{"id":18129118,"url":"https://github.com/fe9-4/taskify","last_synced_at":"2025-04-15T12:19:19.193Z","repository":{"id":258943293,"uuid":"874820599","full_name":"fe9-4/taskify","owner":"fe9-4","description":"코드잇 FE 9기 4팀의 Taskify","archived":false,"fork":false,"pushed_at":"2024-11-09T04:07:33.000Z","size":1677,"stargazers_count":1,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T12:18:52.843Z","etag":null,"topics":["axios","bun","codeit","dnd","kanban","kanban-board","nextjs14","react-beautiful-dnd","react18","tailwind-css","taskify","zod"],"latest_commit_sha":null,"homepage":"https://taskify.kr","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/fe9-4.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-18T14:18:40.000Z","updated_at":"2024-11-09T04:07:37.000Z","dependencies_parsed_at":"2024-10-26T04:39:29.445Z","dependency_job_id":null,"html_url":"https://github.com/fe9-4/taskify","commit_stats":null,"previous_names":["fe9-4/taskify"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fe9-4%2Ftaskify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fe9-4%2Ftaskify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fe9-4%2Ftaskify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fe9-4%2Ftaskify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fe9-4","download_url":"https://codeload.github.com/fe9-4/taskify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249067787,"owners_count":21207396,"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":["axios","bun","codeit","dnd","kanban","kanban-board","nextjs14","react-beautiful-dnd","react18","tailwind-css","taskify","zod"],"created_at":"2024-11-01T10:05:41.449Z","updated_at":"2025-04-15T12:19:19.175Z","avatar_url":"https://github.com/fe9-4.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 코드잇 프론트엔드 9기 4팀 Taskify 프로젝트\n\n\u003cdiv align=\"center\"\u003e \n  \u003cimg src=\"https://www.taskify.kr/_next/image?url=%2Fimages%2Flanding%2Flanding1.png\u0026w=828\u0026q=75\" width=\"auto\" height=\"300\"\u003e\n\u003c/div\u003e\n\n## 배포 사이트: https://www.taskify.kr\n\n## 프로젝트 소개\n- Taskify 소개: 회사 내에서 업무를 하면서 팀에서 진행할 여러 프로젝트들을 하나의 직관적인 대시보드에서 관리하면서 팀원들 간 업무 소통을 원활히 하며 업무효율성을 증대시킬 수 있는 서비스입니다. 현재 프로젝트, 예정된 프로젝트, 마감된 프로젝트 등의 여러 상황에도 유연하게 적용하여 사용해볼 수 있고, 업무 진행도 및 일정, 내용 등을 하나의 대시보드와 컬럼, 카드에서 한눈에 파악할 수 있어서 팀원 모두 현재상황에 대해서 언제 어디서든 편하게 파악할 수 있습니다.\n- 제작 기간: 2024. 10. 18 ~ 2024. 11. 5 \n- 제작 인원: 5명 \n\n| 문창기 | 김원 | 김충오 | 지혜민 | 홍예림 |\n| :---: | :---: | :---: | :---: | :---: |\n|\u003cimg src=\"https://avatars.githubusercontent.com/u/126491953?v=4\" width=\"100\" height=\"100\"\u003e|\u003cimg src=\"https://avatars.githubusercontent.com/u/10387266?v=4\" width=\"100\" height=\"100\"\u003e|\u003cimg src=\"https://avatars.githubusercontent.com/u/103034239?v=4\" width=\"100\" height=\"100\"\u003e|\u003cimg src=\"https://avatars.githubusercontent.com/u/144791802?v=4\" width=\"100\" height=\"100\"\u003e|\u003cimg src=\"https://avatars.githubusercontent.com/u/167871589?v=4\" width=\"100\" height=\"100\"\u003e|\n|byeolee1221|cccwon2|ChungO5|hyemeeny|hongggyelim|\n\n- 역할\n  - 문창기: 팀장, github 탬플릿, 테일윈드 커스텀 세팅, chip 컴포넌트, dropdown 컴포넌트, 컬럼 및 카드 컴포넌트, 대시보드 상세페이지\n  - 김원: 레포지토리 세팅, 헤더 컴포넌트, 인증 관련 기능 및 페이지, 계정관리 페이지\n  - 김충오: 랜딩 페이지, 공용 모달 컴포넌트 및 모달 페이지 제작\n  - 지혜민: input 컴포넌트, date picker 커스텀, 할 일 카드(상세 조회, 생성, 수정) 모달 컴포넌트\n  - 홍예림: 버튼 컴포넌트, 사이드바, 대시보드 관리 페이지\n\n\n## 주요 기능 및 기술 스택\n\n### 주요 기능\n\n#### 대시보드로 프로젝트 관리\n- 대시보드를 생성하고 팀원들을 초대하여 하나의 대시보드에서 하나의 프로젝트 전체를 관리할 수 있습니다.\n- 대시보드는 언제든 생성, 삭제가 가능하며, 초대된 팀원의 관리도 편리하게 할 수 있습니다.\n\n#### 대시보드 컬럼에서의 할 일 카드 관리\n- 주요 프로젝트를 컬럼으로 만들고 해당 컬럼에서 할 일 카드를 생성하여 관리할 수 있습니다.\n- 컬럼 간 이동이 가능하여 예정, 진행중, 마감 등으로 컬럼을 구분하면 상황에 따라 프로젝트를 관리해볼 수 있습니다.\n- 컬럼 내 무한스크롤, 태블릿 및 모바일에서의 버튼식 스크롤, 드래그 앤 드랍방식 등 편리한 기능으로 스크롤을 많이 쓰지 않고도 전체 상황을 파악할 수 있습니다.\n\n#### 전체 대시보드 확인이 가능한 사이드바\n- 대시보드가 늘어나면 찾기가 쉽지 않을 수 있는데, 이를 사이드바에서 언제든 확인이 가능합니다.\n- 모바일환경처럼 화면이 작더라도 사이드바를 펼쳐서 어떤 대시보드인지 확인이 가능하도록 구성되어 있습니다.\n\n#### 가시성이 좋은 레이아웃 구조\n- 전체적으로 사용자가 스크롤을 많이 움직이지 않게 설계되어 가시성이 좋게 구성되었습니다.\n- 사용자 경험을 고려한 모달과 토스트 알람을 적절히 분배 후 적용하였습니다.\n\n#### 사용자의 개인정보 보호를 위한 안전성 강화\n- 사용자 개인정보 보호를 위해 쿠키로 토큰을 관리하였으며, HttpOnly 및 secure 등 쿠키를 안전하게 요청에 포함하여 전달할 수 있게 하였습니다.\n- 로그인한 사용자만 서비스를 이용할 수 있도록 설정하여, 주요 정보가 외부로 노출되지 않도록 했습니다.\n\n### 기술 스택\n\n\u003cimg src=\"https://nextjs.org/static/favicon/favicon-32x32.png\" width=\"16\" height=\"16\"\u003e **[Next.js](https://nextjs.org/)** 14.2.15: 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 React 프레임워크\n\n\u003cimg src=\"https://reactjs.org/favicon.ico\" width=\"16\" height=\"16\"\u003e **[React](https://reactjs.org/)** 18: 최신 버전의 React 라이브러리\n\n\u003cimg src=\"https://www.typescriptlang.org/favicon-32x32.png\" width=\"16\" height=\"16\"\u003e **[TypeScript](https://www.typescriptlang.org/)** 5: 정적 타입 언어로, 코드 품질과 생산성을 높여줌\n\n\u003cimg src=\"https://tailwindcss.com/favicons/favicon-32x32.png\" width=\"16\" height=\"16\"\u003e **[Tailwind CSS](https://tailwindcss.com/)** 3.4.14: 유틸리티 기반의 CSS 프레임워크로, 빠르고 효율적인 스타일링 제공\n\n\u003cimg src=\"https://axios-http.com/assets/favicon.ico\" width=\"16\" height=\"16\"\u003e **[Axios](https://axios-http.com/)** 1.7.7: HTTP 요청을 간편하게 처리할 수 있는 라이브러리\n\n\u003cimg src=\"https://jotai.org/favicon.svg\" width=\"16\" height=\"16\"\u003e **[Jotai](https://jotai.org/)** 2.10.1: 간결하고 사용하기 쉬운 전역 상태 관리 라이브러리\n\n\n\n## 주요 의존성\n\n\u003cimg src=\"https://react-hook-form.com/images/logo/react-hook-form-logo-only.png\" width=\"16\" height=\"16\"\u003e **[`react-hook-form`](https://react-hook-form.com/)** 7.53.0: 폼 관리를 위한 React 라이브러리\n\n\u003cimg src=\"https://github.com/react-hook-form.png\" width=\"16\" height=\"16\"\u003e **[`@hookform/resolvers`](https://github.com/react-hook-form/resolvers)** 3.9.0: 폼 유효성 검사를 위한 라이브러리\n\n\u003cimg src=\"https://react-hot-toast.com/favicon.png\" width=\"16\" height=\"16\"\u003e **[`react-hot-toast`](https://react-hot-toast.com/)** 2.4.1: 알림 메시지를 표시하기 위한 라이브러리\n\n\u003cimg src=\"/public/images/favicons/tailwind-merge.svg\" width=\"16\" height=\"16\"\u003e **[`tailwind-merge`](https://github.com/dcastil/tailwind-merge)** 2.5.4: Tailwind CSS 클래스를 효율적으로 병합하는 유틸리티\n\n\u003cimg src=\"https://zod.dev/static/favicon-32x32.png\" width=\"16\" height=\"16\"\u003e **[`zod`](https://github.com/colinhacks/zod)** 3.23.8: 스키마 선언 및 유효성 검사 라이브러리\n\n\u003cimg src=\"/public/images/favicons/react_datepicker.png\" width=\"16\" height=\"16\"\u003e **[`react-datepicker`](https://reactdatepicker.com/)** 7.5.0: 날짜 선택 컴포넌트를 제공하는 라이브러리\n\n\u003cimg src=\"https://react-icons.github.io/react-icons/favicon.ico\" width=\"16\" height=\"16\"\u003e **[`react-icons`](https://react-icons.github.io/react-icons/)** 5.3.0: 다양한 아이콘 세트를 제공하는 라이브러리\n\n\u003cimg src=\"https://github.com/reactjs.png\" width=\"16\" height=\"16\"\u003e **[`react-modal`](https://github.com/reactjs/react-modal)** 3.16.1: 모달 창을 쉽게 구현할 수 있게 해주는 라이브러리\n\n## 스크립트 설명\n\n| 스크립트 | 설명                                        |\n| -------- | ------------------------------------------- |\n| `dev`    | 개발 서버를 실행합니다.                     |\n| `build`  | 프로덕션 빌드를 생성합니다.                 |\n| `start`  | 프로덕션 빌드를 기반으로 서버를 실행합니다. |\n| `lint`   | ESLint를 사용하여 코드 스타일을 검사합니다. |\n| `format` | Prettier를 사용하여 코드 형식을 정리합니다. |\n| `test`   | 테스트를 실행합니다. (현재 설정되지 않음)   |\n\n## 패키지 매니저: Bun\n\n이 프로젝트는 [Bun](https://bun.sh/)을 패키지 매니저로 사용합니다. Bun은 빠른 JavaScript 런타임 및 패키지 매니저입니다.\n\n### Bun 설치 (Windows)\n\nWindows에서 Bun을 설치하려면 PowerShell을 관리자 모드로 실행한 후 다음 명령어를 입력하세요:\n\n```powershell\nnpm install -g bun\n```\n\n### package.json 인스톨\n\n```bash\nbun install\n```\n\n### Bun으로 라이브러리 추가\n\n```bash\nbun add zod\n```\n\n### Bun으로 프로젝트 실행\n\n프로젝트를 빌드하고 개발 서버를 실행하려면 다음 명령어를 사용하세요:\n\n```bash\n# 프로젝트 빌드\nbun run build\n\n# 개발 서버 실행\nbun run dev\n```\n\n## 개발 환경 설정\n\n### ESLint\n\nESLint는 JavaScript 및 TypeScript 코드의 품질을 향상시키고 일관된 코딩 스타일을 유지하는 데 도움을 줍니다.\n이 프로젝트에서는 다음과 같이 ESLint를 구성했습니다:\n\n```json\n{\n  \"extends\": [\"next/core-web-vitals\", \"prettier\"],\n  \"parserOptions\": {\n    \"project\": \"./tsconfig.json\"\n  },\n  \"rules\": {\n    \"react/react-in-jsx-scope\": \"off\"\n  }\n}\n```\n\n이 설정은 Next.js의 core-web-vitals 규칙과 Prettier 호환성을 포함하며, React 17 이상에서는 React를 import 하지 않아도 되도록 설정되어 있습니다.\n\n### Prettier\n\n코드 스타일의 일관성을 유지하기 위해 Prettier를 사용합니다. `.prettierrc` 파일에 다음과 같이 구성되어 있습니다:\n\n```json\n{\n  \"printWidth\": 120,\n  \"tabWidth\": 2,\n  \"useTabs\": false,\n  \"semi\": true,\n  \"singleQuote\": false,\n  \"quoteProps\": \"as-needed\",\n  \"trailingComma\": \"es5\",\n  \"bracketSpacing\": true,\n  \"arrowParens\": \"always\",\n  \"proseWrap\": \"preserve\",\n  \"endOfLine\": \"auto\",\n  \"plugins\": [\"prettier-plugin-tailwindcss\"]\n}\n```\n\n이 설정은 코드의 일관성을 유지하며, Tailwind CSS와의 호환성을 위한 플러그인을 포함하고 있습니다.\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\": [\"@hookform/resolvers\"]\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n  \"exclude\": [\"node_modules\"]\n}\n```\n\n이 설정은 Next.js와 호환되는 TypeScript 환경을 제공하며, 절대 경로 임포트를 위한 paths 설정과 react-hook-form 타입을 포함하고 있습니다.\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이 설정은 프로젝트의 특정 색상과 폰트 설정을 포함하며, Tailwind CSS를 프로젝트의 모든 페이지와 컴포넌트에 적용할 수 있도록 구성되어 있습니다.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffe9-4%2Ftaskify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffe9-4%2Ftaskify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffe9-4%2Ftaskify/lists"}