{"id":17436227,"url":"https://github.com/cccwon2/fe9-advanced-project-template","last_synced_at":"2025-12-30T22:25:20.112Z","repository":{"id":257844782,"uuid":"873048278","full_name":"cccwon2/fe9-advanced-project-template","owner":"cccwon2","description":"FE9 중급 및 고급 프로젝트 Next.js 템플릿","archived":false,"fork":false,"pushed_at":"2024-11-18T01:48:54.000Z","size":455,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T03:18:18.076Z","etag":null,"topics":["app-router","codeit","next-auth","nextjs","nextjs-app-router","nextjs-template","nextjs14","react-hook-form","reactjs","tailwind-css","typescript","zustand"],"latest_commit_sha":null,"homepage":"","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/cccwon2.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}},"created_at":"2024-10-15T14:10:48.000Z","updated_at":"2024-11-18T01:48:57.000Z","dependencies_parsed_at":"2024-11-18T08:37:36.503Z","dependency_job_id":null,"html_url":"https://github.com/cccwon2/fe9-advanced-project-template","commit_stats":{"total_commits":46,"total_committers":1,"mean_commits":46.0,"dds":0.0,"last_synced_commit":"1a9bd5c70b6abb5ed64148a8de53e27c3bab0ebb"},"previous_names":["cccwon2/fe9-advanced-project-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cccwon2%2Ffe9-advanced-project-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cccwon2%2Ffe9-advanced-project-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cccwon2%2Ffe9-advanced-project-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cccwon2%2Ffe9-advanced-project-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cccwon2","download_url":"https://codeload.github.com/cccwon2/fe9-advanced-project-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245950528,"owners_count":20699087,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["app-router","codeit","next-auth","nextjs","nextjs-app-router","nextjs-template","nextjs14","react-hook-form","reactjs","tailwind-css","typescript","zustand"],"created_at":"2024-10-17T10:07:09.624Z","updated_at":"2025-12-30T22:25:20.080Z","avatar_url":"https://github.com/cccwon2.png","language":"TypeScript","readme":"# FE9 중급 및 고급 프로젝트 템플릿\n\n## 소개\n\n**FE9 중급 및 고급 프로젝트 템플릿**은 Next.js, React, TypeScript, TailwindCSS 등 최신 기술 스택을 기반으로 한 프론트엔드 프로젝트 템플릿입니다.\n이 템플릿은 소셜 로그인 기능과 이미지 업로드 기능 등을 포함하여 중급 및 고급 수준의 웹 애플리케이션 개발에 적합하도록 구성되어 있습니다.\n\n## 기술 스택\n\n### 주요 의존성\n\n[![Next.js](https://img.shields.io/badge/Next.js-14.2.15-black?logo=next.js)](https://nextjs.org/)\n[![React](https://img.shields.io/badge/React-18-blue?logo=react)](https://reactjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?logo=typescript)](https://www.typescriptlang.org/)\n[![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.4.14-38B2AC?logo=tailwind-css)](https://tailwindcss.com/)\n\n### 상태 관리 \u0026 데이터 페칭\n\n[![React Query](https://img.shields.io/badge/@tanstack/react--query-5.59.19-FF4154?logo=react-query)](https://tanstack.com/query)\n[![Zustand](https://img.shields.io/badge/Zustand-5.0.1-brown)](https://github.com/pmndrs/zustand)\n[![Axios](https://img.shields.io/badge/Axios-1.7.7-5A29E4?logo=axios)](https://axios-http.com/)\n\n### 인증\n\n[![Next Auth](https://img.shields.io/badge/Next--Auth-4.24.8-000000?logo=next.js)](https://next-auth.js.org/)\n\n### 폼 \u0026 유효성 검사\n\n[![React Hook Form](https://img.shields.io/badge/React%20Hook%20Form-7.53.0-EC5990)](https://react-hook-form.com/)\n[![Zod](https://img.shields.io/badge/Zod-3.23.8-3068B7)](https://zod.dev/)\n[![HookForm Resolvers](https://img.shields.io/badge/@hookform/resolvers-3.9.0-EC5990)](https://github.com/react-hook-form/resolvers)\n\n### UI 컴포넌트\n\n[![Hello Pangea DnD](https://img.shields.io/badge/@hello--pangea/dnd-17.0.0-yellow)](https://github.com/hello-pangea/dnd)\n[![React DatePicker](https://img.shields.io/badge/React%20DatePicker-7.4.0-216BA5)](https://reactdatepicker.com/)\n[![React Modal](https://img.shields.io/badge/React%20Modal-3.16.1-black)](https://github.com/reactjs/react-modal)\n[![React Icons](https://img.shields.io/badge/React%20Icons-5.3.0-E91E63)](https://react-icons.github.io/)\n[![React Spinners](https://img.shields.io/badge/React%20Spinners-0.14.1-36D7B7)](https://www.davidhu.io/react-spinners/)\n[![React Hot Toast](https://img.shields.io/badge/React%20Hot%20Toast-2.4.1-FF4444)](https://react-hot-toast.com/)\n\n### 유틸리티\n\n[![date-fns](https://img.shields.io/badge/date--fns-4.1.0-yellow)](https://date-fns.org/)\n[![Tailwind Merge](https://img.shields.io/badge/tailwind--merge-2.5.4-38B2AC)](https://github.com/dcastil/tailwind-merge)\n[![Form Data](https://img.shields.io/badge/form--data-4.0.1-green)](https://github.com/form-data/form-data)\n\n### 개발 도구\n\n[![ESLint](https://img.shields.io/badge/ESLint-8.57.1-4B32C3?logo=eslint)](https://eslint.org/)\n[![Prettier](https://img.shields.io/badge/Prettier-3.3.3-F7B93E?logo=prettier)](https://prettier.io/)\n\n## 환경 설정\n\n### 환경 변수 설정\n\n프로젝트 루트에 `.env` 파일을 생성하고 다음 환경 변수를 설정하세요:\n\n```env\n# API 설정\nNEXT_PUBLIC_API_URL=your-api-url\nNEXT_PUBLIC_TEAM_ID=your-team-id\n```\n\n### 인증 미들웨어\n\n이 프로젝트는 Next.js 미들웨어를 사용하여 인증을 관리합니다. 다음 경로는 인증이 필요하지 않습니다:\n\n- `/login` - 로그인 페이지\n- `/signup` - 회원가입 페이지\n- `/_next` - Next.js 시스템 파일\n- `/favicon.ico` - 파비콘\n- 이미지 파일 (jpg, jpeg, gif, png, svg)\n\n인증되지 않은 사용자가 보호된 경로에 접근하면 자동으로 로그인 페이지(`/login`)로 리다이렉트됩니다.\n\n## 스크립트\n\n| 스크립트 | 설명                                     |\n| -------- | ---------------------------------------- |\n| `dev`    | 개발 서버를 실행합니다 (Next.js)         |\n| `build`  | 프로덕션 빌드를 생성합니다               |\n| `start`  | 프로덕션 서버를 실행합니다               |\n| `lint`   | ESLint로 코드를 검사합니다               |\n| `format` | Prettier로 코드 형식을 정리합니다        |\n| `clean`  | `.next`와 `out` 디렉터리를 삭제합니다    |\n| `test`   | 테스트를 실행합니다 (현재 구성되지 않음) |\n\n## 시작하기\n\n1. 저장소 클론:\n\n```bash\ngit clone https://github.com/cccwon2/fe9-advanced-project-template.git\n```\n\n2. 프로젝트 디렉토리로 이동:\n\n```bash\ncd fe9-advanced-project-template\n```\n\n3. 의존성 설치:\n\n```bash\nnpm install\n```\n\n4. 환경 변수 설정:\n   `.env` 파일을 생성하고 위의 '환경 변수 설정' 섹션에 명시된 변수들을 설정하세요.\n\n5. 개발 서버 실행:\n\n```bash\nnpm run dev\n```\n\n이제 http://localhost:3000 에서 프로젝트를 확인할 수 있습니다.\n\n## 개발 환경 설정\n\n### ESLint\n\nESLint는 JavaScript 및 TypeScript 코드의 품질을 향상시키고 일관된 코딩 스타일을 유지하는 데 도움을 줍니다.\n이 프로젝트에서는 다음과 같이 ESLint를 구성했습니다:\n\n```json\n{\n  \"extends\": [\n    \"next\",\n    \"next/core-web-vitals\",\n    \"eslint:recommended\",\n    \"plugin:@typescript-eslint/recommended\",\n    \"plugin:prettier/recommended\"\n  ],\n  \"plugins\": [\"@typescript-eslint\", \"prettier\"],\n  \"parser\": \"@typescript-eslint/parser\",\n  \"rules\": {\n    \"prettier/prettier\": [\n      \"error\",\n      {\n        \"endOfLine\": \"lf\"\n      }\n    ],\n    \"linebreak-style\": [\"error\", \"unix\"],\n    \"no-unused-vars\": \"off\",\n    \"@typescript-eslint/no-unused-vars\": \"warn\"\n  }\n}\n```\n\n이 설정은 Next.js, TypeScript, Prettier와 관련된 규칙을 적용하며, 사용하지 않는 변수에 대해 경고를 표시합니다.\n또한 일관된 줄 바꿈 스타일을 강제하고 Prettier와의 통합을 설정합니다.\n\n### Prettier\n\n코드 스타일의 일관성을 유지하기 위해 Prettier를 사용합니다. `.prettierrc` 파일에 다음과 같이 구성되어 있습니다:\n\n```json\n{\n  \"printWidth\": 120, // 한 줄의 최대 길이를 120자로 제한\n  \"tabWidth\": 2, // 탭의 너비를 2 스페이스로 설정\n  \"useTabs\": false, // 탭 대신 스페이스 사용\n  \"semi\": true, // 문장 끝에 세미콜론 사용\n  \"singleQuote\": false, // 작은따옴표 대신 큰따옴표 사용\n  \"quoteProps\": \"as-needed\", // 필요한 경우에만 객체 속성에 따옴표 사용\n  \"trailingComma\": \"es5\", // ES5에서 허용되는 후행 쉼표 사용\n  \"bracketSpacing\": true, // 객체 리터럴의 중괄호 주위에 공백 추가\n  \"arrowParens\": \"always\", // 화살표 함수의 매개변수에 항상 괄호 사용\n  \"proseWrap\": \"preserve\", // 마크다운 등의 프로즌 래핑 보존\n  \"endOfLine\": \"lf\", // 줄 끝에 LF(Line Feed) 사용\n  \"plugins\": [\"@trivago/prettier-plugin-sort-imports\", \"prettier-plugin-tailwindcss\"],\n  \"importOrder\": [\n    // import 문 정렬 순서 지정\n    \"^@/lib/(.*)$\",\n    \"^@/app/(.*)$\",\n    \"^@/components/(.*)$\",\n    \"^[./]\"\n  ],\n  \"importOrderSeparation\": true, // import 그룹 사이에 빈 줄 추가\n  \"importOrderSortSpecifiers\": true, // import 지정자 정렬\n  \"overrides\": [\n    {\n      \"files\": \"*\",\n      \"options\": {\n        \"endOfLine\": \"lf\"\n      }\n    }\n  ]\n}\n```\n\n이 설정은 코드 포맷팅의 세부 사항을 정의하고, import 문의 정렬 순서를 지정합니다.\n\n### TypeScript\n\n타입 안정성을 높이기 위해 TypeScript를 사용합니다. `tsconfig.json` 파일에 다음과 같이 구성되어 있습니다:\n\n```json\n{\n  \"compilerOptions\": {\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true,\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"paths\": {\n      \"@/*\": [\"./src/*\"]\n    },\n    \"types\": [\"./src/types/auth\", \"@hookform/resolvers\"]\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\", \"custom.d.ts\"],\n  \"exclude\": [\"node_modules\"]\n}\n```\n\n### TailwindCSS\n\nCSS 프레임워크로 스타일링을 돕습니다. `tailwind.config.ts` 파일에 다음과 같이 구성되어 있습니다:\n\n```typescript\nimport type { Config } from \"tailwindcss\";\n\nconst config: Config = {\n  content: [\n    \"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n  ],\n  theme: {\n    extend: {\n      colors: {\n        background: \"var(--background)\",\n        foreground: \"var(--foreground)\",\n      },\n      fontFamily: {\n        sans: [\n          \"Pretendard\",\n          \"-apple-system\",\n          \"BlinkMacSystemFont\",\n          \"system-ui\",\n          \"Helvetica Neue\",\n          \"Apple SD Gothic Neo\",\n          \"sans-serif\",\n        ],\n      },\n    },\n  },\n  plugins: [],\n};\n\nexport default config;\n```\n\n## Next.js 설정\n\n`next.config.mjs` 파일에서 Next.js의 설정을 관리합니다:\n\n```javascript\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n  swcMinify: true,\n  webpack(config) {\n    config.module.rules.push({\n      test: /\\.svg$/,\n      use: [\"@svgr/webpack\"],\n    });\n\n    return config;\n  },\n};\n\nexport default nextConfig;\n```\n\n이 설정은 SVG 파일을 React 컴포넌트로 가져올 수 있게 해줍니다.\n\n## SVG 타입 정의\n\n`custom.d.ts` 파일에서 SVG 파일에 대한 타입 정의를 제공합니다:\n\n```typescript\ndeclare module \"*.svg\" {\n  import React from \"react\";\n  const SVG: React.VFC\u003cReact.SVGProps\u003cSVGSVGElement\u003e\u003e;\n  export default SVG;\n}\n```\n\n이를 통해 TypeScript 환경에서 SVG 파일을 React 컴포넌트로 사용할 수 있습니다.\n\n## 소셜 로그인 설정\n\nGoogle 및 Kakao 소셜 로그인 설정을 위해서는 `next-auth` 라이브러리를 사용합니다.\n인증을 위해 `.env` 파일에 다음과 같은 환경 변수를 설정해야 합니다:\n\n```\nGOOGLE_CLIENT_ID=your-google-client-id\nGOOGLE_CLIENT_SECRET=your-google-client-secret\nKAKAO_CLIENT_ID=your-kakao-client-id\nKAKAO_CLIENT_SECRET=your-kakao-client-secret\n```\n\n이 템플릿을 사용하면 최신 웹 개발 기술을 활용한 프로젝트를 빠르게 시작할 수 있습니다.\n각 기술과 도구의 설정이 미리 되어 있어, 개발에 즉시 착수할 수 있습니다.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcccwon2%2Ffe9-advanced-project-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcccwon2%2Ffe9-advanced-project-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcccwon2%2Ffe9-advanced-project-template/lists"}