Skip to content

Commit 508249a

Browse files
cccwon2cccwon2
committed
docs: README.md 업데이트
1 parent dd513da commit 508249a

File tree

1 file changed

+161
-110
lines changed

1 file changed

+161
-110
lines changed

‎README.md‎

Lines changed: 161 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,73 @@
1-
# 워크루트(WorkRoot) 프로젝트
1+
# 코드잇 프론트엔드 9기 2팀 워크루트(WorkRoot) 프로젝트
22

3-
## 소개
3+
<div align="center">
4+
<img src="https://www.workroot.life/brand.png" width="auto" height="300">
5+
</div>
46

5-
**워크루트(WorkRoot) 프로젝트**는 Next.js, React, TypeScript, TailwindCSS 등 최신 기술 스택을 기반으로 한 프로젝트입니다.
7+
## 배포 사이트: https://www.workroot.life
8+
9+
## 프로젝트 소개
10+
11+
- WorkRoot 소개: 🌳 "일"을 통해 자신의 뿌리를 내리며 "성장"하는 구인구직 사이트
12+
- 개발 기간: 2024. 11. 21 ~ 2024. 12. 30
13+
- 개발 인원: 4명
14+
15+
| 김원 | 김예지 | 김태준 | 홍예림 |
16+
| :---------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: |
17+
| <img src="https://avatars.githubusercontent.com/u/10387266?v=4" width="100" height="100"> | <img src="https://avatars.githubusercontent.com/u/128662353?v=4" width="100" height="100"> | <img src="https://avatars.githubusercontent.com/u/140049433?v=4" width="100" height="100"> | <img src="https://avatars.githubusercontent.com/u/167871589?v=4" width="100" height="100"> |
18+
| cccwon2 | yyezzzy | imtaejunk | hongggyelim |
19+
20+
- 역할
21+
- 김원: 팀장, 레포지토리 세팅, 로그인/회원가입, 마이페이지, 공고 목록 페이지, 게시판 목록 페이지, 공고 카드 컴포넌트, 모달 컴포넌트, SEO 설정, 지도 API 연동, Supabase 연동, 회의록 작성
22+
- 김예지: 소셜로그인/회원가입, 알바폼 상세페이지, 로고, 랜딩페이지 디자인 및 기획, 공통 버튼 컴포넌트, 스토리북 세팅, 크로매틱 배포 세팅
23+
- 김태준: 랜딩 페이지, 게시판 상세 페이지, 게시판 카드 컴포넌트, 전역 에러 페이지, 404 페이지
24+
- 홍예림: 공고 작성 페이지, 공고 수정 페이지, 공통 인풋 컴포넌트, 데이터피커 커스텀, 마우스 커서 커스텀, 깃헙 액션 CI 세팅
625

726
## 기술 스택
827

928
### 주요 의존성
1029

1130
[![Next.js](https://img.shields.io/badge/Next.js-14.2.15-black?logo=next.js)](https://nextjs.org/)
1231
[![React](https://img.shields.io/badge/React-18-blue?logo=react)](https://reactjs.org/)
13-
[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?logo=typescript)](https://www.typescriptlang.org/)
32+
[![TypeScript](https://img.shields.io/badge/TypeScript-5.6.3-blue?logo=typescript)](https://www.typescriptlang.org/)
1433
[![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.4.14-38B2AC?logo=tailwind-css)](https://tailwindcss.com/)
1534

1635
### 상태 관리 & 데이터 페칭
1736

1837
[![React Query](https://img.shields.io/badge/@tanstack/react--query-5.59.19-FF4154?logo=react-query)](https://tanstack.com/query)
1938
[![Zustand](https://img.shields.io/badge/Zustand-5.0.1-brown)](https://github.com/pmndrs/zustand)
2039
[![Axios](https://img.shields.io/badge/Axios-1.7.7-5A29E4?logo=axios)](https://axios-http.com/)
40+
[![Supabase](https://img.shields.io/badge/Supabase-2.47.10-3ECF8E?logo=supabase)](https://supabase.io/)
2141

2242
### 폼 & 유효성 검사
2343

2444
[![React Hook Form](https://img.shields.io/badge/React%20Hook%20Form-7.53.0-EC5990)](https://react-hook-form.com/)
2545
[![Zod](https://img.shields.io/badge/Zod-3.23.8-3068B7)](https://zod.dev/)
2646
[![HookForm Resolvers](https://img.shields.io/badge/@hookform/resolvers-3.9.0-EC5990)](https://github.com/react-hook-form/resolvers)
2747

28-
### UI 컴포넌트
48+
### UI/UX
2949

30-
[![React DatePicker](https://img.shields.io/badge/React%20DatePicker-7.4.0-216BA5)](https://reactdatepicker.com/)
31-
[![React Modal](https://img.shields.io/badge/React%20Modal-3.16.1-black)](https://github.com/reactjs/react-modal)
50+
[![Framer Motion](https://img.shields.io/badge/Framer%20Motion-11.15.0-0055FF?logo=framer)](https://www.framer.com/motion/)
51+
[![React DatePicker](https://img.shields.io/badge/React%20DatePicker-7.5.0-216BA5)](https://reactdatepicker.com/)
3252
[![React Icons](https://img.shields.io/badge/React%20Icons-5.3.0-E91E63)](https://react-icons.github.io/react-icons)
33-
[![React Spinners](https://img.shields.io/badge/React%20Spinners-0.14.1-36D7B7)](https://www.davidhu.io/react-spinners/)
3453
[![React Hot Toast](https://img.shields.io/badge/React%20Hot%20Toast-2.4.1-FF4444)](https://react-hot-toast.com/)
54+
[![Hello Pangea DnD](https://img.shields.io/badge/Hello%20Pangea%20DnD-17.0.0-yellow)](https://github.com/hello-pangea/dnd)
55+
56+
### 지도 & 소셜
57+
58+
[![React Kakao Maps SDK](https://img.shields.io/badge/React%20Kakao%20Maps%20SDK-1.1.27-FFCD00)](https://www.npmjs.com/package/react-kakao-maps-sdk)
59+
[![Next Auth](https://img.shields.io/badge/Next%20Auth-4.24.10-000000?logo=next.js)](https://next-auth.js.org/)
60+
[![Channel Talk](https://img.shields.io/badge/Channel%20Talk%20SDK-2.0.0-00A6B4)](https://channel.io/)
3561

3662
### 개발 도구
3763

3864
[![ESLint](https://img.shields.io/badge/ESLint-8.57.1-4B32C3?logo=eslint)](https://eslint.org/)
3965
[![Prettier](https://img.shields.io/badge/Prettier-3.3.3-F7B93E?logo=prettier)](https://prettier.io/)
40-
[![Husky](https://img.shields.io/badge/Husky-9.1.6-yellow?logo=git)](https://typicode.github.io/husky/)
41-
[![Commitlint](https://img.shields.io/badge/Commitlint-19.5.0-green?logo=commitlint)](https://commitlint.js.org/)
66+
[![Storybook](https://img.shields.io/badge/Storybook-8.4.4-FF4785?logo=storybook)](https://storybook.js.org/)
67+
[![React Query DevTools](https://img.shields.io/badge/React%20Query%20DevTools-5.59.20-FF4154)](https://tanstack.com/query/latest/docs/react/devtools)
4268

4369
## 개발 환경 설정
4470

45-
### 커밋 메시지 컨벤션
46-
47-
commitlint를 사용하여 다음과 같은 커밋 메시지 형식을 강제합니다:
48-
49-
```
50-
type: Subject
51-
```
52-
53-
#### 커밋 타입:
54-
55-
- feat: 새로운 기능에 대한 커밋
56-
- 예: feat: 회원가입 기능 구현
57-
- fix: 버그 수정에 대한 커밋
58-
- 예: fix: 회원가입 유효성 검사 오류 수정
59-
- build: 빌드 관련 파일 수정에 대한 커밋
60-
- 예: build: next.config.js 업데이트
61-
- chore: 그 외 자잘한 수정에 대한 커밋
62-
- 예: chore: 불필요한 console.log 제거
63-
- delete: 기능 삭제에 대한 커밋
64-
- 예: delete: 사용하지 않는 컴포넌트 제거
65-
- ci: CI/CD 관련 설정 수정에 대한 커밋
66-
- 예: ci: github actions workflow 추가
67-
- docs: 문서 수정에 대한 커밋
68-
- 예: docs: readme.md 업데이트
69-
- style: 코드 스타일 혹은 포맷 등에 관한 커밋
70-
- 예: style: 들여쓰기 수정
71-
- refactor: 코드 리팩토링에 대한 커밋
72-
- 예: refactor: 회원가입 로직 개선
73-
- test: 테스트 코드 수정에 대한 커밋
74-
- 예: test: 회원가입 테스트 케이스 추가
75-
76-
#### 커밋 메시지 규칙:
77-
78-
- type은 소문자로 시작합니다
79-
- type은 위 목록 중 하나여야 합니다
80-
- Subject는 필수이며 비어있을 수 없습니다
81-
- type과 Subject 사이에는 ': ' (콜론+공백)이 있어야 합니다
82-
83-
#### 예시:
84-
85-
```bash
86-
feat: 회원가입 기능 구현
87-
fix: 로그인 버튼 클릭 시 오류 수정
88-
docs: API 문서 업데이트
89-
style: 코드 포맷팅 적용
90-
```
91-
9271
### ESLint 설정
9372

9473
```json
@@ -98,12 +77,22 @@ style: 코드 포맷팅 적용
9877
"next/core-web-vitals",
9978
"eslint:recommended",
10079
"plugin:@typescript-eslint/recommended",
101-
"plugin:prettier/recommended"
80+
"plugin:prettier/recommended",
81+
"prettier"
10282
],
10383
"plugins": ["@typescript-eslint", "prettier"],
84+
"parser": "@typescript-eslint/parser",
10485
"rules": {
105-
"prettier/prettier": ["error", { "endOfLine": "lf" }],
86+
"import/no-anonymous-default-export": "off",
87+
"@typescript-eslint/no-explicit-any": "off",
88+
"prettier/prettier": [
89+
"error",
90+
{
91+
"endOfLine": "lf"
92+
}
93+
],
10694
"linebreak-style": ["error", "unix"],
95+
"no-unused-vars": "off",
10796
"@typescript-eslint/no-unused-vars": "warn"
10897
}
10998
}
@@ -125,73 +114,81 @@ style: 코드 포맷팅 적용
125114
"proseWrap": "preserve", // 마크다운 텍스트의 줄바꿈 처리 방식
126115
"endOfLine": "lf", // 줄 끝 문자를 LF(Line Feed)로 통일
127116
"plugins": [
128-
"@trivago/prettier-plugin-sort-imports", // 임포트 구문 자동 정렬 플러그인
129117
"prettier-plugin-tailwindcss" // Tailwind CSS 클래스 자동 정렬 플러그인
130-
],
131-
"importOrder": [
132-
// 임포트 구문 정렬 순서 설정
133-
"^@/lib/(.*)$", // 1순위: lib 디렉토리 임포트
134-
"^@/app/(.*)$", // 2순위: app 디렉토리 임포트
135-
"^@/components/(.*)$", // 3순위: components 디렉토리 임포트
136-
"^[./]" // 4순위: 상대 경로 임포트
137-
],
138-
"importOrderSeparation": true, // 임포트 그룹 사이에 빈 줄 추가
139-
"importOrderSortSpecifiers": true // 임포트 구문 내부의 요소들 정렬
118+
]
140119
}
141120
```
142121

143122
### TailwindCSS 설정
144123

145124
```typescript
146-
const config = {
125+
import type { Config } from "tailwindcss";
126+
127+
const config: Config = {
147128
content: [
148129
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
149130
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
150131
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
132+
"./stories/**/*.{js,ts,jsx,tsx}",
133+
"./src/app/globals.css",
134+
"./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
151135
],
152136
theme: {
153137
extend: {
154138
colors: {
155-
background: "var(--background)",
156139
foreground: "var(--foreground)",
140+
black: {
141+
100: "#6B6B6B",
142+
200: "#525252",
143+
300: "#373737",
144+
400: "#1F1F1F",
145+
500: "#040404",
146+
},
147+
grayscale: {
148+
50: "#FFFFFF",
149+
100: "#DEDEDE",
150+
200: "#C4C4C4",
151+
300: "#ABABAB",
152+
400: "#999999",
153+
500: "#808080",
154+
},
155+
primary: {
156+
orange: {
157+
50: "#fbfffd",
158+
100: "#8ab08c",
159+
200: "#64a466",
160+
300: "#388e3c",
161+
400: "#156719",
162+
},
163+
blue: {
164+
100: "#535779",
165+
200: "#3E415B",
166+
300: "#2A2C3D",
167+
},
168+
},
169+
background: {
170+
100: "#FCFCFC",
171+
200: "#F7F7F7",
172+
300: "#EFEFEF",
173+
},
174+
line: {
175+
100: "#F2F2F2",
176+
200: "#E6E6E6",
177+
},
178+
state: {
179+
error: "#FC4100",
180+
},
157181
},
158182
fontFamily: {
159-
sans: [
160-
"Pretendard",
161-
"-apple-system",
162-
"BlinkMacSystemFont",
163-
"system-ui",
164-
"Helvetica Neue",
165-
"Apple SD Gothic Neo",
166-
"sans-serif",
167-
],
183+
nexon: ["var(--font-nexon)", "sans-serif"],
184+
hakgyo: ["var(--font-hakgyo)", "sans-serif"],
185+
sans: ["Pretendard", "sans-serif"],
168186
},
169187
},
170188
},
171189
};
172-
```
173190

174-
### Git Hooks (Husky)
175-
176-
- pre-commit: lint-staged를 실행하여 커밋 전 코드 품질 검사
177-
- commit-msg: commitlint를 통한 커밋 메시지 형식 검사
178-
179-
### 스크립트
180-
181-
```json
182-
{
183-
"scripts": {
184-
"dev": "next dev",
185-
"build": "next build",
186-
"start": "next start",
187-
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
188-
"clean": "rimraf .next out",
189-
"prepare": "husky",
190-
"lint-staged": "lint-staged",
191-
"format": "prettier --write .",
192-
"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
193-
}
194-
}
191+
export default config;
195192
```
196193

197194
## 시작하기
@@ -206,8 +203,45 @@ git clone [repository-url]
206203
프로젝트 루트에 .env 파일을 생성하고 다음 내용을 추가합니다:
207204

208205
```bash
206+
# 클라이언트 사이드
209207
NEXT_PUBLIC_API_URL=your-api-url
210208
NEXT_PUBLIC_TEAM_ID=your-team-id
209+
210+
# 서버 사이드
211+
CHROMATIC_PROJECT_TOKEN=your-chromatic-project-token
212+
213+
# 도메인
214+
NEXT_PUBLIC_DOMAIN_URL=your-domain-url
215+
216+
# 테스트 계정(지원자)
217+
NEXT_PUBLIC_TEST_APPLICANT_ID=your-test-applicant-id
218+
NEXT_PUBLIC_TEST_APPLICANT_PASSWORD=your-test-applicant-password
219+
220+
# 테스트 계정(사장님)
221+
NEXT_PUBLIC_TEST_OWNER_ID=your-test-owner-id
222+
NEXT_PUBLIC_TEST_OWNER_PASSWORD=your-test-owner-password
223+
224+
# 페이스북
225+
NEXT_PUBLIC_FB_APP_ID=your-facebook-app-id
226+
227+
# 카카오맵
228+
NEXT_PUBLIC_KAKAO_APP_KEY=your-kakao-app-key
229+
230+
# 수파베이스
231+
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
232+
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
233+
234+
# 카카오 클라이언트 아이디
235+
NEXT_PUBLIC_KAKAO_CLIENT_ID=your-kakao-client-id
236+
237+
# 구글 클라이언트 아이디
238+
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id
239+
240+
# 채널톡 플러그인 키
241+
NEXT_PUBLIC_CHANNEL_IO_PLUGIN_KEY=your-channel-io-plugin-key
242+
243+
# 구글 애널리틱스
244+
NEXT_PUBLIC_GA_ID=your-google-analytics-id
211245
```
212246

213247
3. 의존성 설치:
@@ -226,13 +260,30 @@ npm run dev
226260

227261
```
228262
src/
229-
├── app/ # Next.js 14+ App Router
230-
├── components/ # 재사용 가능한 컴포넌트
231-
├── hooks/ # 커스텀 훅
232-
├── lib/ # 유틸리티 함수
233-
├── store/ # 상태 관리
234-
├── types/ # TypeScript 타입 정의
235-
└── zod/ # Zod 스키마 정의
263+
├── app/ # Next.js 14+ App Router
264+
│ ├── (auth)/ # 인증 관련 라우트 (로그인, 회원가입)
265+
│ ├── (home)/ # 홈 페이지 관련 라우트
266+
│ ├── (pages)/ # 주요 페이지 라우트
267+
│ │ ├── (workform)/ # 워크폼 관련 페이지
268+
│ │ ├── my-workform/ # 마이 워크폼 페이지
269+
│ │ └── work-talk/ # 워크톡 게시판 페이지
270+
│ └── components/ # 공통 컴포넌트
271+
│ ├── animation/ # 애니메이션 컴포넌트
272+
│ ├── button/ # 버튼 컴포넌트
273+
│ ├── card/ # 카드 컴포넌트
274+
│ ├── chip/ # 칩 컴포넌트
275+
│ ├── input/ # 입력 컴포넌트
276+
│ ├── layout/ # 레이아웃 컴포넌트
277+
│ ├── loading-spinner/ # 로딩 스피너 컴포넌트
278+
│ └── pagination/ # 페이지네이션 컴포넌트
279+
├── constants/ # 상수 정의
280+
├── hooks/ # 커스텀 훅
281+
│ └── queries/ # React Query 관련 훅
282+
├── lib/ # 유틸리티 함수
283+
├── schemas/ # Zod 스키마 정의
284+
├── store/ # 상태 관리 (Zustand)
285+
├── types/ # TypeScript 타입 정의
286+
└── utils/ # 유틸리티 함수
236287
```
237288

238289
## 라이선스

0 commit comments

Comments
 (0)