{"id":49326992,"url":"https://github.com/devnogi/devnogi-react","last_synced_at":"2026-04-26T20:32:45.529Z","repository":{"id":300023447,"uuid":"995063501","full_name":"devnogi/devnogi-react","owner":"devnogi","description":"데브노기 프론트엔드 React","archived":false,"fork":false,"pushed_at":"2026-02-24T14:36:07.000Z","size":42799,"stargazers_count":0,"open_issues_count":1,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-24T18:59:38.136Z","etag":null,"topics":["nextjs","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devnogi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-02T23:07:28.000Z","updated_at":"2026-02-24T14:36:29.000Z","dependencies_parsed_at":"2025-06-19T13:51:43.409Z","dependency_job_id":"d28c7384-afa3-4cc2-98ad-447bc5f36228","html_url":"https://github.com/devnogi/devnogi-react","commit_stats":null,"previous_names":["devnogi/devnogi-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devnogi/devnogi-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnogi%2Fdevnogi-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnogi%2Fdevnogi-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnogi%2Fdevnogi-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnogi%2Fdevnogi-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devnogi","download_url":"https://codeload.github.com/devnogi/devnogi-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnogi%2Fdevnogi-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32312377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T19:15:34.056Z","status":"ssl_error","status_checked_at":"2026-04-26T19:15:15.467Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","tailwindcss","typescript"],"created_at":"2026-04-26T20:32:45.443Z","updated_at":"2026-04-26T20:32:45.514Z","avatar_url":"https://github.com/devnogi.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DevNogi Front\n\n마비노기 정보 커뮤니티를 위한 Next.js 15 기반 프론트엔드 애플리케이션입니다. MSA(Microservices Architecture)와 BFF(Backend for Frontend) 패턴을 적용하여 효율적인 서비스 간 통신을 구현합니다.\n\n## 기술 스택\n\n- **런타임**: Node.js v22\n- **프레임워크**: [Next.js](https://nextjs.org) v15.3.3 (App Router)\n- **언어**: TypeScript v5\n- **UI 라이브러리**: React v19\n- **스타일링**:\n  - Tailwind CSS v4\n  - Shadcn/UI\n  - Pretendard 폰트 (Primary)\n- **상태 관리 \u0026 데이터 페칭**: TanStack Query v5\n- **HTTP 클라이언트**: Axios v1.10\n- **폼 관리**: React Hook Form + Zod\n- **아이콘**: Lucide React\n- **API 모킹**: MSW (Mock Service Worker) v2\n- **테스팅**:\n  - Jest v30\n  - React Testing Library v16\n  - jest-fixed-jsdom (Next.js 15 호환)\n- **코드 품질**:\n  - ESLint v9 + Prettier v3.5\n  - Husky v9 + lint-staged v16\n\n## 프로젝트 구조\n\n```\ndevnogi-front/\n├── src/\n│   ├── app/                    # Next.js App Router\n│   │   ├── (auth)/             # 인증 페이지 그룹\n│   │   │   ├── sign-in/          # 로그인 페이지\n│   │   │   ├── sign-up/          # 회원가입 페이지\n│   │   │   └── social-callback/  # 소셜 로그인 콜백\n│   │   ├── (main)/             # 메인 애플리케이션 (NavBar 포함)\n│   │   │   ├── auction/          # 경매장 페이지\n│   │   │   ├── auction-history/  # 거래 내역 페이지\n│   │   │   ├── community/        # 커뮤니티 페이지\n│   │   │   │   ├── [id]/           # 상세 페이지\n│   │   │   │   └── write/          # 글쓰기 페이지\n│   │   │   └── mypage/           # 마이페이지\n│   │   ├── api/                # BFF API 라우트\n│   │   │   ├── auth/             # 인증 API\n│   │   │   ├── posts/            # 게시글 API\n│   │   │   ├── comments/         # 댓글 API\n│   │   │   ├── boards/           # 게시판 API\n│   │   │   ├── auction-history/  # 경매 내역 API\n│   │   │   └── item-categories/  # 아이템 카테고리 API\n│   │   └── fonts/              # 폰트 파일\n│   ├── components/\n│   │   ├── page/               # 페이지별 컴포넌트\n│   │   │   ├── auction/          # 경매장 관련\n│   │   │   ├── auction-history/  # 거래 내역 관련\n│   │   │   ├── community/        # 커뮤니티 관련\n│   │   │   └── auth/             # 인증 관련\n│   │   ├── commons/            # 공용 컴포넌트\n│   │   ├── navigation/         # 네비게이션 컴포넌트\n│   │   ├── errors/             # 에러 페이지 컴포넌트\n│   │   └── ui/                 # Shadcn UI 컴포넌트\n│   ├── hooks/                  # 커스텀 React Hooks\n│   ├── types/                  # TypeScript 타입 정의\n│   ├── contexts/               # React Context\n│   ├── lib/\n│   │   ├── api/                # API 클라이언트 \u0026 서버 설정\n│   │   │   ├── clients.ts        # clientAxios, TanStack Query 설정\n│   │   │   ├── server.ts         # createServerAxios, MSW 초기화\n│   │   │   └── gateway-selector.ts # 게이트웨이 URL 선택\n│   │   └── auth/               # 인증 관련 유틸\n│   ├── mocks/                  # MSW 모킹 설정\n│   │   ├── data/                 # Mock JSON 데이터\n│   │   ├── server.ts             # MSW 핸들러\n│   │   └── initServer.ts         # MSW 서버 초기화\n│   └── utils/                  # 공통 유틸리티 함수\n├── public/                     # 정적 파일\n├── Dockerfile                  # Docker 멀티 스테이지 빌드\n└── docker-compose-*.yml        # Docker Compose 설정\n```\n\n## 주요 기능\n\n### 인증 시스템\n- **이메일 로그인**: 이메일/비밀번호 기반 로그인\n- **소셜 로그인**: 구글, 카카오, 네이버 OAuth 연동\n- **회원가입**: 이메일/닉네임 중복 체크, 약관 동의\n- **세션 관리**: 쿠키 기반 인증 상태 유지\n\n### 커뮤니티\n- **게시글 목록**: 카드 형태 UI, 무한 스크롤\n- **카테고리 필터**: 게시판별 분류\n- **정렬 옵션**: 최신순, 인기순, 댓글순, 조회순\n- **게시글 상세**: 댓글 작성 및 조회\n- **글쓰기**: 모달 기반 게시글 작성\n\n### 경매 내역\n- **무한 스크롤**: TanStack Query 기반 페이지네이션\n- **검색 기능**: 아이템 이름 검색\n- **필터링**: 카테고리, 가격 범위, 날짜 범위, 아이템 옵션\n- **정렬**: 거래 최신순, 가격순 등\n- **반응형 UI**: 데스크톱 사이드바 / 모바일 모달 필터\n\n### 마이페이지\n- 사용자 정보 조회 및 프로필 편집\n\n## 아키텍처\n\n### BFF (Backend for Frontend) 패턴\n\n이 프로젝트는 Next.js API Routes를 활용한 BFF 패턴을 구현합니다:\n\n**요청 흐름:**\n```\nClient Component\n  ↓ (clientAxios)\nNext.js API Route (/api/*)\n  ↓ (createServerAxios)\nGateway Server (http://168.107.43.221:8080)\n  ↓ (prefix 기반 라우팅)\nBackend Services\n  ├─ OPEN API BATCH (/oab/*) - 경매장, 거래 내역\n  └─ 커뮤니티 서버 (/dcs/api/*) - 게시판, 댓글\n```\n\n### Route Groups\n\n- `(auth)/` - 인증 페이지 (NavBar 없음)\n- `(main)/` - 메인 애플리케이션 (NavBar 포함)\n\n### API 레이어\n\n**Client-side (`src/lib/api/clients.ts`):**\n- `clientAxios`: 클라이언트 컴포넌트에서 사용\n- Base URL: `/api` (Next.js API Routes)\n- Timeout: 5000ms\n\n**Server-side (`src/lib/api/server.ts`):**\n- `createServerAxios()`: API 라우트 핸들러에서 사용\n- Base URL: `process.env.GATEWAY_URL`\n- Authorization 및 Cookie 헤더 전달\n- MSW 서버 자동 초기화\n\n**TanStack Query 설정:**\n- `staleTime: 200ms`\n- 윈도우 포커스, 재연결, 마운트 시 자동 refetch 비활성화\n\n### 커스텀 Hooks\n\n| Hook | 용도 |\n|------|------|\n| `useInfiniteAuctionHistory` | 경매 내역 무한 스크롤 |\n| `useAuctionHistory` | 경매 내역 단일 페이지 조회 |\n| `useInfinitePosts` | 게시글 무한 스크롤 |\n| `usePostDetail` | 게시글 상세 조회 |\n| `useItemCategories` | 아이템 카테고리 트리 조회 |\n| `useSearchOptions` | 검색 옵션 조회 |\n| `useItemInfos` | 아이템 정보 조회 |\n\n### API 모킹 (MSW)\n\n**활성화 조건:**\n- `VERCEL_ENV=development|preview` AND\n- `API_MOCKING=enabled`\n\n**구성:**\n- Mock 핸들러: `src/mocks/server.ts`\n- Mock 데이터: `src/mocks/data/*.json`\n- 테스트 환경에서 자동 활성화 (`jest.setup.ts`)\n\n## API 문서\n\n### 백엔드 서비스\n\n모든 API는 **게이트웨이 서버**를 통해 라우팅됩니다.\n\n**게이트웨이 서버:**\n```\nhttp://168.107.43.221:8080/\n```\n\n**백엔드 서비스:**\n\n| 서비스 | Prefix | Swagger | 담당 기능 |\n|--------|--------|---------|-----------|\n| OPEN API BATCH | `/oab` | [Swagger UI](http://138.2.126.248:8080/swagger-ui/index.html) | 경매장, 거래 내역 |\n| 커뮤니티 서버 | `/dcs/api` | [Swagger UI](http://3.39.119.27/swagger-ui/index.html) | 게시판, 게시글, 댓글 |\n| Auth 서버 | `/das/api` | - | 인증, 회원가입, 소셜 로그인 |\n\n**커뮤니티 API 응답 구조:**\n```typescript\n{\n  success: boolean,\n  code: string,\n  message: string,\n  data: T,\n  timestamp: string\n}\n```\n\n### API 라우트 목록\n\n**인증 API (`/api/auth/*`)**\n```\nPOST   /api/auth/login              # 로그인\nPOST   /api/auth/signup             # 회원가입\nPOST   /api/auth/signup/social      # 소셜 회원가입\nPOST   /api/auth/logout             # 로그아웃\nGET    /api/auth/me                 # 현재 사용자 정보\nPOST   /api/auth/check-email        # 이메일 중복 체크\nPOST   /api/auth/check-nickname     # 닉네임 중복 체크\n```\n\n**커뮤니티 API (`/api/posts/*`, `/api/comments/*`)**\n```\nGET    /api/posts                   # 전체 게시글 조회\nGET    /api/posts/[id]              # 게시판별 게시글 조회\nGET    /api/posts/details/[id]      # 게시글 상세 조회\nGET    /api/comments/[postId]       # 댓글 조회\nPOST   /api/comments/[postId]       # 댓글 작성\nGET    /api/boards                  # 게시판 목록 조회\n```\n\n**경매 API (`/api/auction-history/*`)**\n```\nGET    /api/auction-history         # 경매 내역 조회\nPOST   /api/auction-history/search  # 상세 검색\nGET    /api/item-categories         # 아이템 카테고리 조회\nGET    /api/item-infos              # 아이템 정보 조회\nGET    /api/search-option           # 검색 옵션 조회\n```\n\n### Slash Commands\n\n프로젝트에서 사용 가능한 커스텀 명령어:\n- `/api-spec` - 전체 API 스펙 조회\n- `/api-endpoint` - 특정 엔드포인트 상세 조회\n\n## 개발 환경 설정\n\n0. 원본 저장소에서 프로젝트 포크\n[원본 저장소 링크](https://github.com/devnogi/devnogi-react)\n\n1. 저장소 클론\n```bash\ngit clone [your-repository-url]\ncd devnogi-front\n```\n\n2. 의존성 설치\n```bash\nnpm install\n```\n\n3. 환경 변수 설정\n```bash\n# .sample_env를 참조하여 .env 파일 생성\ncp .sample_env .env\n```\n\n**환경 변수 설명:**\n- `NODE_ENV` - 런타임 환경 (development/production)\n- `VERCEL_ENV` - Vercel 환경 (development/preview/production)\n- `API_MOCKING` - MSW 활성화 여부 (enabled/disabled)\n- `GATEWAY_URL` - 백엔드 게이트웨이 URL\n\n4. 개발 서버 실행\n```bash\nnpm run dev\n```\n\n브라우저에서 [http://localhost:3000](http://localhost:3000)을 열어 애플리케이션을 확인할 수 있습니다.\n\n### Path Aliases\n\n프로젝트는 `@/` alias를 사용하여 절대 경로로 import합니다:\n\n```typescript\nimport { Button } from \"@/components/ui/button\";\nimport { clientAxios } from \"@/lib/api/clients\";\nimport { formatDate } from \"@/utils/date\";\n```\n\nTypeScript 및 Jest 설정에서 모두 지원됩니다.\n\n## 개발 프로세스\n\n### GitHub Flow 브랜치 전략\n\n이 프로젝트는 실제 배포 전까지는 단순하고 지속적인 배포를 지향하는 GitHub Flow를 따릅니다:\n\n- `main`: 항상 배포 가능한 상태를 유지하는 기본 브랜치\n\n### 브랜치 작업 플로우\n\n0. 작업 전 원본 저장소와 싱크 확인\n\n1. 새로운 작업 시작\n```bash\ngit switch main\ngit pull origin main\ngit switch -c 브랜치명\n# 개발 작업 수행\ngit add .\ngit commit -m \"작업 설명\"\ngit push origin 브랜치명\n# PR 생성: 브랜치명 -\u003e main\n```\n\n2. PR(Pull Request) 프로세스\n   - PR 생성 시 작업 내용 상세히 설명\n   - 코드 리뷰 진행\n   - 승인 후 main 브랜치에 머지\n\n3. 머지 완료 후 포크 저장소 최신화\n\n### 커밋 메시지 컨벤션\n\n```\n\u003ctype\u003e: \u003csubject\u003e\n\n\u003cbody\u003e (선택사항)\n\n\u003cfooter\u003e (선택사항)\n```\n\n**Type:**\n- `feat`: 새로운 기능 추가\n- `fix`: 버그 수정\n- `docs`: 문서 수정\n- `style`: 코드 포맷팅 (기능 변경 없음)\n- `refactor`: 코드 리팩토링 (기능 변경 없음)\n- `test`: 테스트 코드 추가/수정\n- `chore`: 빌드 프로세스, 도구 변경\n- `perf`: 성능 개선\n- `design`: UI/UX 디자인 변경\n- `security`: 보안 관련 변경\n\n**Subject 규칙:**\n- 최대 50자\n- 소문자로 시작\n- 마침표 없음\n- 명령형 현재 시제 (add, fix, update, remove)\n\n**예시:**\n```bash\nfeat: add user login functionality\nfix: improve error handling on login\ndocs: update README with API documentation\n```\n\n**Footer (선택사항):**\n```\nCloses: #123\nFixes: #456\nBREAKING CHANGE: API response format changed\n```\n\n## 품질 관리\n\n### Pre-commit Hooks (Husky + lint-staged)\n\n커밋 시 Staged 파일에 대해 자동으로 다음 작업이 수행됩니다:\n\n1. **Prettier**: 코드 포맷팅\n2. **ESLint**: 코드 품질 검사 및 자동 수정\n3. **Jest**: 변경된 파일과 관련된 테스트 실행\n\n```bash\n# lint-staged 설정\n\"*.{ts,tsx}\": [\n  \"prettier --write\",\n  \"eslint --fix\",\n  \"npm test -- --bail --findRelatedTests\"\n]\n```\n\n### ESLint\n\n- Next.js 권장 설정 사용 (`eslint.config.mjs`)\n- 빌드 시 ESLint 에러가 있어도 빌드 성공 (`next.config.ts`)\n\n### 테스팅\n\n- **Jest 환경**: `jest-fixed-jsdom` (Next.js 15 호환)\n- **테스트 파일**: `*.test.tsx` (소스 파일과 동일 위치)\n- **MSW**: 모든 테스트에서 자동으로 사용 가능\n- **실행 명령어**:\n  ```bash\n  npm test                    # 전체 테스트\n  npm test -- --watch        # Watch 모드\n  npm test -- \u003cfile-path\u003e    # 특정 파일 테스트\n  ```\n\n## 개발 명령어\n\n```bash\n# 개발 서버 실행\nnpm run dev\n\n# 프로덕션 빌드\nnpm run build\n\n# 프로덕션 서버 실행\nnpm start\n\n# 린트 검사\nnpm run lint\n\n# 테스트 실행\nnpm test\n```\n\n## Docker 배포\n\n### 로컬 개발\n\n```bash\n# 개발 환경 실행\ndocker-compose -f docker-compose-dev.yml up\n\n# 로컬 환경 실행\ndocker-compose -f docker-compose-local.yml up\n```\n\n### 프로덕션 배포\n\n```bash\n# 프로덕션 빌드 및 실행\ndocker-compose -f docker-compose-prod.yaml up -d\n```\n\n**Docker 설정:**\n- 멀티 스테이지 빌드 (node:20-alpine)\n- Next.js standalone 출력 모드\n- 기본 포트: 3010\n- 보안 사용자(nextjs)로 실행\n\n## 디자인 시스템\n\n### 디자인 철학\n\nDevNogi는 **부드럽고 현대적이며 친근한** 디자인을 추구합니다:\n\n**핵심 원칙:**\n- **Rounded \u0026 Soft**: 넉넉한 border radius, 부드러운 모서리, 은은한 그림자\n- **Colorful but Subtle**: 파스텔톤, 그라데이션 악센트, 강한 대비 지양\n- **Clean \u0026 Minimal**: 넉넉한 여백, 명확한 계층, 깔끔한 레이아웃\n- **Friendly \u0026 Approachable**: 따뜻한 색상, 환영하는 인터랙션\n\n**영감 출처:**\n- Reddit: 카드 기반 레이아웃, 명확한 콘텐츠 계층\n- Threads: 부드러운 색상, 둥근 디자인, 친근한 인터랙션\n- Notion: 깔끔한 미학, 넉넉한 여백, 부드러운 애니메이션\n- Linear: 모던한 그라데이션, 섬세한 그림자, 세련된 타이포그래피\n\n### 색상 팔레트\n\n**브랜드 컬러 (Blue):**\n- `brand-500` (#0ea5e9): 메인 브랜드 색상 - 버튼, 링크, 강조\n- `brand-100` to `brand-900`: 배경, 호버, 텍스트용 전체 스케일\n\n**액센트 컬러 (Purple):**\n- `accent-500` (#a855f7): 보조 액센트 - 뱃지, 하이라이트, 특별 액션\n- `accent-100` to `accent-900`: 악센트 및 장식 요소용 전체 스케일\n\n**사용 가이드:**\n- Primary actions: `bg-gradient-to-r from-blue-600 to-purple-600`\n- Backgrounds: `bg-gradient-to-br from-blue-50 via-white to-purple-50`\n- Interactive elements: 색상 전환을 활용한 은은한 호버 효과\n- 순수 검정/흰색 지양 - `gray-900` / `gray-50` 사용\n\n### Border Radius 표준\n\n| Element | Radius | Class | Use Case |\n|---------|--------|-------|----------|\n| Cards | 16-24px | `rounded-2xl` | 메인 콘텐츠 카드, 모달 |\n| Buttons | 8-12px | `rounded-lg` | 버튼, 폼 입력 |\n| Small elements | 6-8px | `rounded-md` | 태그, 뱃지, 필 |\n| Images | 12px | `rounded-xl` | 프로필 이미지, 썸네일 |\n| Avatars | 50% | `rounded-full` | 사용자 아바타 |\n\n### Typography\n\n**Primary Font: Pretendard**\n- 한글과 영문에 최적화된 모던한 sans-serif\n- SIL Open Font License 1.1 (상업적 사용 가능)\n- 디지털 스크린에 최적화된 가독성\n- 9개 웨이트 (100-900)\n- CSS variable: `--font-pretendard`\n- Tailwind class: `font-sans`\n\n**Typography Scale:**\n\n| Element | Size | Weight | Usage |\n|---------|------|--------|-------|\n| H1 | 30-36px | 700 | 페이지 제목 |\n| H2 | 24-30px | 600-700 | 섹션 헤더 |\n| H3 | 20-24px | 600 | 하위 섹션 헤더 |\n| Body | 14-16px | 400 | 본문 텍스트 |\n| Small | 12-14px | 400 | 캡션, 메타데이터 |\n\n**Line Height:**\n- Headings: 1.2-1.3\n- Body text: 1.5-1.7 (가독성을 위한 넉넉한 행간)\n- Code: 1.4\n\n### Interactive Elements\n\n**Buttons:**\n- Primary: 그라데이션 배경 (`from-blue-600 to-purple-600`)\n- Height: `h-12` (48px) 터치 최적화\n- Hover: 약간 확대 (`hover:scale-[1.02]`), 그라데이션 강조\n- Disabled: 50% 투명도, 호버 효과 없음\n\n**Inputs:**\n- Height: `h-12` (48px)\n- Padding: 아이콘이 있을 때 `pl-11` (왼쪽 패딩)\n- Border: `border-gray-300`, focus: `border-blue-500`\n- Rounded: `rounded-lg`\n\n## 개발 원칙\n\n### TypeScript 원칙\n\n- **타입 안정성 우선**: 모든 변수, 함수, 컴포넌트에 명시적 타입 정의\n- **`any` 지양**: 대신 `unknown` 사용\n- **제네릭 활용**: 재사용 가능한 타입 정의\n- **타입 추론 활용**: 불필요한 타입 어노테이션 지양\n\n### React 원칙\n\n- **단일 책임**: 각 컴포넌트는 하나의 명확한 책임\n- **컴포넌트 크기**: 200줄 이하 유지\n- **불변성**: 상태 업데이트 시 항상 새 객체/배열 생성\n- **순수 함수 컴포넌트**: 부수효과 없는 순수 함수로 작성\n- **Hook 규칙**: 최상위 레벨에서만 호출, 조건문/반복문 내 사용 금지\n\n### Next.js 원칙\n\n- **Server Components 우선**: 기본적으로 서버 컴포넌트 사용\n- **`'use client'`**: 필요한 경우에만 사용\n- **메타데이터 관리**: 각 페이지에 적절한 메타데이터 설정\n- **동적 메타데이터**: `generateMetadata` 함수 활용\n\n### 상태 관리\n\n- **로컬 상태 우선**: Props drilling이 3단계 이하일 때 컴포넌트 상태 사용\n- **전역 상태**: Props drilling이 3단계 초과 시에만 고려\n- **상태 정규화**: 중첩된 객체 대신 평탄한 구조 사용\n- **ID 기반 관계**: 중복 데이터 제거\n\n### 성능 최적화\n\n- **코드 스플리팅**: 라우트 기반 자동 스플리팅 활용\n- **동적 import**: 큰 컴포넌트는 동적 import로 분할\n- **메모이제이션**: `useMemo`, `useCallback` 적절히 활용\n- **Image 최적화**: Next.js Image 컴포넌트 사용\n\n### 접근성\n\n- **시맨틱 HTML**: 적절한 HTML 태그 사용\n- **ARIA 속성**: 필요시 ARIA 속성 활용\n- **키보드 내비게이션**: 키보드로 모든 기능 접근 가능\n- **색상 대비**: WCAG 2.1 AA 기준 준수\n\n### 보안\n\n- **입력 검증**: 모든 사용자 입력 검증\n- **XSS 방지**: 적절한 이스케이핑 및 새니타이징\n- **환경 변수**: 민감 정보는 환경 변수로 관리\n- **클라이언트 노출 금지**: 서버 전용 정보 클라이언트에 노출 금지\n\n## 라이선스\n\n이 프로젝트는 오픈 소스이며, 학습 및 포트폴리오 목적으로 자유롭게 사용할 수 있습니다.\n\n**폰트 라이선스:**\n- **Pretendard**: SIL Open Font License 1.1 (상업적 사용 가능)\n- **Mabinogi Classic**: 저작권 제한 있음 (게임 관련 브랜딩에만 제한적 사용)\n\n## 참고 자료\n\n- [Next.js 공식 문서](https://nextjs.org/docs)\n- [React 공식 문서](https://react.dev)\n- [TanStack Query 공식 문서](https://tanstack.com/query)\n- [Tailwind CSS 공식 문서](https://tailwindcss.com)\n- [MSW 공식 문서](https://mswjs.io)\n- [CLAUDE.md](./CLAUDE.md) - AI 어시스턴트용 프로젝트 상세 가이드\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnogi%2Fdevnogi-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevnogi%2Fdevnogi-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnogi%2Fdevnogi-react/lists"}