{"id":49820422,"url":"https://github.com/prgrms-fullcycle-devcourse/webfull_9_10_j-park_fe","last_synced_at":"2026-05-13T10:07:13.767Z","repository":{"id":345454333,"uuid":"1179481158","full_name":"prgrms-fullcycle-devcourse/webfull_9_10_J-park_FE","owner":"prgrms-fullcycle-devcourse","description":"Team 제이팍 - 등불 프로젝트의 프론트엔드 작업 공간","archived":false,"fork":false,"pushed_at":"2026-04-14T02:22:59.000Z","size":2410,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-14T03:21:57.435Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://webfull-9-10-j-park-fe.vercel.app","language":"TypeScript","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/prgrms-fullcycle-devcourse.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":"2026-03-12T04:19:00.000Z","updated_at":"2026-04-13T09:00:12.000Z","dependencies_parsed_at":"2026-03-19T22:02:13.012Z","dependency_job_id":null,"html_url":"https://github.com/prgrms-fullcycle-devcourse/webfull_9_10_J-park_FE","commit_stats":null,"previous_names":["prgrms-fullcycle-devcourse/webfull_9_10_j-park_fe"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/prgrms-fullcycle-devcourse/webfull_9_10_J-park_FE","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_J-park_FE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_J-park_FE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_J-park_FE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_J-park_FE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prgrms-fullcycle-devcourse","download_url":"https://codeload.github.com/prgrms-fullcycle-devcourse/webfull_9_10_J-park_FE/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prgrms-fullcycle-devcourse%2Fwebfull_9_10_J-park_FE/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32977395,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T06:31:55.726Z","status":"ssl_error","status_checked_at":"2026-05-13T06:31:51.336Z","response_time":115,"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":[],"created_at":"2026-05-13T10:06:44.999Z","updated_at":"2026-05-13T10:07:13.760Z","avatar_url":"https://github.com/prgrms-fullcycle-devcourse.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 프로젝트 템플릿\n\nNext.js 기반 프론트엔드 프로젝트 템플릿입니다.\n\n## 기술 스택\n\n| 기술                                         | 버전 | 용도                    |\n| -------------------------------------------- | ---- | ----------------------- |\n| [Next.js](https://nextjs.org/)               | 15.x | 프레임워크 (App Router) |\n| [React](https://react.dev/)                  | 19.x | UI (TypeScript)         |\n| [TailwindCSS](https://tailwindcss.com/)      | 4.x  | 스타일링                |\n| [HeroUI](https://heroui.com/)                | 2.x  | UI 컴포넌트 라이브러리  |\n| [Zustand](https://zustand.docs.pmnd.rs/)     | 5.x  | 전역 상태관리           |\n| [TanStack Query](https://tanstack.com/query) | 5.x  | 서버 상태관리           |\n| [day.js](https://day.js.org/)                | 1.x  | 날짜 관리               |\n| [Axios](https://axios-http.com/)             | 1.x  | HTTP 통신               |\n\n## 시작하기\n\n```bash\n# 1. 의존성 설치\nnpm install\n\n# 2. 환경변수 설정\ncp .env.example .env.local\n\n# 3. 개발 서버 실행\nnpm run dev\n```\n\n`http://localhost:7263` 에서 확인할 수 있습니다.\n\n## 폴더 구조\n\n```\nsrc/\n├── app/                    # Next.js App Router (라우팅, 레이아웃)\n│   ├── layout.tsx          # Root 레이아웃\n│   ├── page.tsx            # 홈 페이지\n│   ├── providers.tsx       # 전역 Provider (HeroUI + TanStack Query)\n│   └── globals.css         # 전역 스타일\n├── components/             # 공통 컴포넌트\n│   └── ui/                 # 커스텀 UI 컴포넌트\n├── hooks/                  # 커스텀 훅\n│   └── queries/            # TanStack Query 커스텀 훅\n├── lib/                    # 유틸리티 \u0026 외부 라이브러리 설정\n│   ├── axios.ts            # Axios 인스턴스 (Interceptors)\n│   ├── dayjs.ts            # day.js 로케일 \u0026 플러그인 설정\n│   └── utils.ts            # 공통 유틸리티 함수\n├── stores/                 # Zustand 스토어\n├── types/                  # TypeScript 타입 정의\n└── constants/              # 상수 정의\n```\n\n## 코딩 컨벤션\n\n### 파일 네이밍\n\n| 종류     | 규칙                   | 예시                |\n| -------- | ---------------------- | ------------------- |\n| 컴포넌트 | PascalCase             | `UserCard.tsx`      |\n| 훅       | camelCase (use 접두사) | `use-auth.ts`       |\n| 스토어   | camelCase (use 접두사) | `use-auth-store.ts` |\n| 유틸리티 | camelCase              | `format-date.ts`    |\n| 타입     | camelCase              | `user.ts`           |\n| 상수     | camelCase              | `api-routes.ts`     |\n\n### 상태관리 가이드\n\n- **전역 UI 상태** (모달, 사이드바 등) → **Zustand**\n- **서버 데이터** (API 응답, CRUD) → **TanStack Query**\n- **컴포넌트 로컬 상태** → **useState / useReducer**\n\n### Zustand 사용법\n\n```tsx\n// 선택적 구독 (Best Practice)\nconst count = useExampleStore((state) =\u003e state.count);\nconst increment = useExampleStore((state) =\u003e state.increment);\n\n// ❌ 전체 스토어 구독 (불필요한 리렌더링 발생)\nconst store = useExampleStore();\n```\n\n### TanStack Query 사용법\n\n```tsx\n// Query Key Factory 패턴 사용\nexport const userKeys = {\n  all: ['users'] as const,\n  lists: () =\u003e [...userKeys.all, 'list'] as const,\n  list: (filters: object) =\u003e [...userKeys.lists(), filters] as const,\n  details: () =\u003e [...userKeys.all, 'detail'] as const,\n  detail: (id: number) =\u003e [...userKeys.details(), id] as const,\n};\n\n// 커스텀 훅으로 감싸서 사용\nexport function useUserList(params: UserListParams) {\n  return useQuery({\n    queryKey: userKeys.list(params),\n    queryFn: () =\u003e api.get('/users', { params }),\n  });\n}\n```\n\n### Axios 사용법\n\n```tsx\nimport { api } from '@/lib/axios';\n\n// 타입 안전한 API 호출\nconst users = await api.get\u003cApiResponse\u003cUser[]\u003e\u003e('/users');\nconst user = await api.post\u003cApiResponse\u003cUser\u003e\u003e('/users', { name: '홍길동' });\n```\n\n### day.js 사용법\n\n```tsx\nimport dayjs from '@/lib/dayjs';\n\n// 한국어 로케일이 기본 적용됨\ndayjs().format('YYYY년 M월 D일'); // '2025년 1월 1일'\ndayjs('2025-01-01').fromNow(); // '1달 전'\n```\n\n## 환경변수\n\n| 변수명                | 설명         | 기본값                                  |\n| --------------------- | ------------ | --------------------------------------- |\n| `NEXT_PUBLIC_API_URL` | API 서버 URL | `https://lampfire-backend.onrender.com` |\n| `NEXT_PUBLIC_APP_URL` | 앱 URL       | `http://localhost:7263`                 |\n\n## 스크립트\n\n```bash\nnpm run dev      # 개발 서버 실행\nnpm run build    # 프로덕션 빌드\nnpm run start    # 프로덕션 서버 실행\nnpm run lint     # ESLint 검사\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprgrms-fullcycle-devcourse%2Fwebfull_9_10_j-park_fe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprgrms-fullcycle-devcourse%2Fwebfull_9_10_j-park_fe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprgrms-fullcycle-devcourse%2Fwebfull_9_10_j-park_fe/lists"}