Skip to content

워크톡 @hello-pangea/dnd 로 dnd 교체, 이미지 3개 등록 및 프리뷰 dnd 적용 등 #250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yyezzzyy merged 2 commits into from
Dec 26, 2024
Merged

워크톡 @hello-pangea/dnd 로 dnd 교체, 이미지 3개 등록 및 프리뷰 dnd 적용 등 #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd513da
refactor: hello-pagea/dnd 로 dnd 교체, 이미지 3개 등록 및 프리뷰 dnd 적용 등
cccwon2 Dec 24, 2024
508249a
docs: README.md 업데이트
cccwon2 Dec 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
271 changes: 161 additions & 110 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,73 @@
# 워크루트(WorkRoot) 프로젝트
# 코드잇 프론트엔드 9기 2팀 워크루트(WorkRoot) 프로젝트

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

**워크루트(WorkRoot) 프로젝트**는 Next.js, React, TypeScript, TailwindCSS 등 최신 기술 스택을 기반으로 한 프로젝트입니다.
## 배포 사이트: https://www.workroot.life

## 프로젝트 소개

- WorkRoot 소개: 🌳 "일"을 통해 자신의 뿌리를 내리며 "성장"하는 구인구직 사이트
- 개발 기간: 2024. 11. 21 ~ 2024. 12. 30
- 개발 인원: 4명

| 김원 | 김예지 | 김태준 | 홍예림 |
| :---------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: |
| <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"> |
| cccwon2 | yyezzzy | imtaejunk | hongggyelim |

- 역할
- 김원: 팀장, 레포지토리 세팅, 로그인/회원가입, 마이페이지, 공고 목록 페이지, 게시판 목록 페이지, 공고 카드 컴포넌트, 모달 컴포넌트, SEO 설정, 지도 API 연동, Supabase 연동, 회의록 작성
- 김예지: 소셜로그인/회원가입, 알바폼 상세페이지, 로고, 랜딩페이지 디자인 및 기획, 공통 버튼 컴포넌트, 스토리북 세팅, 크로매틱 배포 세팅
- 김태준: 랜딩 페이지, 게시판 상세 페이지, 게시판 카드 컴포넌트, 전역 에러 페이지, 404 페이지
- 홍예림: 공고 작성 페이지, 공고 수정 페이지, 공통 인풋 컴포넌트, 데이터피커 커스텀, 마우스 커서 커스텀, 깃헙 액션 CI 세팅

## 기술 스택

### 주요 의존성

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

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

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

### 폼 & 유효성 검사

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

### UI 컴포넌트
### UI/UX

[![React DatePicker](https://img.shields.io/badge/React%20DatePicker-7.4.0-216BA5)](https://reactdatepicker.com/)
[![React Modal](https://img.shields.io/badge/React%20Modal-3.16.1-black)](https://github.com/reactjs/react-modal)
[![Framer Motion](https://img.shields.io/badge/Framer%20Motion-11.15.0-0055FF?logo=framer)](https://www.framer.com/motion/)
[![React DatePicker](https://img.shields.io/badge/React%20DatePicker-7.5.0-216BA5)](https://reactdatepicker.com/)
[![React Icons](https://img.shields.io/badge/React%20Icons-5.3.0-E91E63)](https://react-icons.github.io/react-icons)
[![React Spinners](https://img.shields.io/badge/React%20Spinners-0.14.1-36D7B7)](https://www.davidhu.io/react-spinners/)
[![React Hot Toast](https://img.shields.io/badge/React%20Hot%20Toast-2.4.1-FF4444)](https://react-hot-toast.com/)
[![Hello Pangea DnD](https://img.shields.io/badge/Hello%20Pangea%20DnD-17.0.0-yellow)](https://github.com/hello-pangea/dnd)

### 지도 & 소셜

[![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)
[![Next Auth](https://img.shields.io/badge/Next%20Auth-4.24.10-000000?logo=next.js)](https://next-auth.js.org/)
[![Channel Talk](https://img.shields.io/badge/Channel%20Talk%20SDK-2.0.0-00A6B4)](https://channel.io/)

### 개발 도구

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

## 개발 환경 설정

### 커밋 메시지 컨벤션

commitlint를 사용하여 다음과 같은 커밋 메시지 형식을 강제합니다:

```
type: Subject
```

#### 커밋 타입:

- feat: 새로운 기능에 대한 커밋
- 예: feat: 회원가입 기능 구현
- fix: 버그 수정에 대한 커밋
- 예: fix: 회원가입 유효성 검사 오류 수정
- build: 빌드 관련 파일 수정에 대한 커밋
- 예: build: next.config.js 업데이트
- chore: 그 외 자잘한 수정에 대한 커밋
- 예: chore: 불필요한 console.log 제거
- delete: 기능 삭제에 대한 커밋
- 예: delete: 사용하지 않는 컴포넌트 제거
- ci: CI/CD 관련 설정 수정에 대한 커밋
- 예: ci: github actions workflow 추가
- docs: 문서 수정에 대한 커밋
- 예: docs: readme.md 업데이트
- style: 코드 스타일 혹은 포맷 등에 관한 커밋
- 예: style: 들여쓰기 수정
- refactor: 코드 리팩토링에 대한 커밋
- 예: refactor: 회원가입 로직 개선
- test: 테스트 코드 수정에 대한 커밋
- 예: test: 회원가입 테스트 케이스 추가

#### 커밋 메시지 규칙:

- type은 소문자로 시작합니다
- type은 위 목록 중 하나여야 합니다
- Subject는 필수이며 비어있을 수 없습니다
- type과 Subject 사이에는 ': ' (콜론+공백)이 있어야 합니다

#### 예시:

```bash
feat: 회원가입 기능 구현
fix: 로그인 버튼 클릭 시 오류 수정
docs: API 문서 업데이트
style: 코드 포맷팅 적용
```

### ESLint 설정

```json
Expand All @@ -98,12 +77,22 @@ style: 코드 포맷팅 적용
"next/core-web-vitals",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
"plugin:prettier/recommended",
"prettier"
],
"plugins": ["@typescript-eslint", "prettier"],
"parser": "@typescript-eslint/parser",
"rules": {
"prettier/prettier": ["error", { "endOfLine": "lf" }],
"import/no-anonymous-default-export": "off",
"@typescript-eslint/no-explicit-any": "off",
"prettier/prettier": [
"error",
{
"endOfLine": "lf"
}
],
"linebreak-style": ["error", "unix"],
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "warn"
}
}
Expand All @@ -125,73 +114,81 @@ style: 코드 포맷팅 적용
"proseWrap": "preserve", // 마크다운 텍스트의 줄바꿈 처리 방식
"endOfLine": "lf", // 줄 끝 문자를 LF(Line Feed)로 통일
"plugins": [
"@trivago/prettier-plugin-sort-imports", // 임포트 구문 자동 정렬 플러그인
"prettier-plugin-tailwindcss" // Tailwind CSS 클래스 자동 정렬 플러그인
],
"importOrder": [
// 임포트 구문 정렬 순서 설정
"^@/lib/(.*)$", // 1순위: lib 디렉토리 임포트
"^@/app/(.*)$", // 2순위: app 디렉토리 임포트
"^@/components/(.*)$", // 3순위: components 디렉토리 임포트
"^[./]" // 4순위: 상대 경로 임포트
],
"importOrderSeparation": true, // 임포트 그룹 사이에 빈 줄 추가
"importOrderSortSpecifiers": true // 임포트 구문 내부의 요소들 정렬
]
}
```

### TailwindCSS 설정

```typescript
const config = {
import type { Config } from "tailwindcss";

const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./stories/**/*.{js,ts,jsx,tsx}",
"./src/app/globals.css",
"./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
black: {
100: "#6B6B6B",
200: "#525252",
300: "#373737",
400: "#1F1F1F",
500: "#040404",
},
grayscale: {
50: "#FFFFFF",
100: "#DEDEDE",
200: "#C4C4C4",
300: "#ABABAB",
400: "#999999",
500: "#808080",
},
primary: {
orange: {
50: "#fbfffd",
100: "#8ab08c",
200: "#64a466",
300: "#388e3c",
400: "#156719",
},
blue: {
100: "#535779",
200: "#3E415B",
300: "#2A2C3D",
},
},
background: {
100: "#FCFCFC",
200: "#F7F7F7",
300: "#EFEFEF",
},
line: {
100: "#F2F2F2",
200: "#E6E6E6",
},
state: {
error: "#FC4100",
},
},
fontFamily: {
sans: [
"Pretendard",
"-apple-system",
"BlinkMacSystemFont",
"system-ui",
"Helvetica Neue",
"Apple SD Gothic Neo",
"sans-serif",
],
nexon: ["var(--font-nexon)", "sans-serif"],
hakgyo: ["var(--font-hakgyo)", "sans-serif"],
sans: ["Pretendard", "sans-serif"],
},
},
},
};
```

### Git Hooks (Husky)

- pre-commit: lint-staged를 실행하여 커밋 전 코드 품질 검사
- commit-msg: commitlint를 통한 커밋 메시지 형식 검사

### 스크립트

```json
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"clean": "rimraf .next out",
"prepare": "husky",
"lint-staged": "lint-staged",
"format": "prettier --write .",
"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
}
}
export default config;
```

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

```bash
# 클라이언트 사이드
NEXT_PUBLIC_API_URL=your-api-url
NEXT_PUBLIC_TEAM_ID=your-team-id

# 서버 사이드
CHROMATIC_PROJECT_TOKEN=your-chromatic-project-token

# 도메인
NEXT_PUBLIC_DOMAIN_URL=your-domain-url

# 테스트 계정(지원자)
NEXT_PUBLIC_TEST_APPLICANT_ID=your-test-applicant-id
NEXT_PUBLIC_TEST_APPLICANT_PASSWORD=your-test-applicant-password

# 테스트 계정(사장님)
NEXT_PUBLIC_TEST_OWNER_ID=your-test-owner-id
NEXT_PUBLIC_TEST_OWNER_PASSWORD=your-test-owner-password

# 페이스북
NEXT_PUBLIC_FB_APP_ID=your-facebook-app-id

# 카카오맵
NEXT_PUBLIC_KAKAO_APP_KEY=your-kakao-app-key

# 수파베이스
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

# 카카오 클라이언트 아이디
NEXT_PUBLIC_KAKAO_CLIENT_ID=your-kakao-client-id

# 구글 클라이언트 아이디
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id

# 채널톡 플러그인 키
NEXT_PUBLIC_CHANNEL_IO_PLUGIN_KEY=your-channel-io-plugin-key

# 구글 애널리틱스
NEXT_PUBLIC_GA_ID=your-google-analytics-id
```

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

```
src/
├── app/ # Next.js 14+ App Router
├── components/ # 재사용 가능한 컴포넌트
├── hooks/ # 커스텀 훅
├── lib/ # 유틸리티 함수
├── store/ # 상태 관리
├── types/ # TypeScript 타입 정의
└── zod/ # Zod 스키마 정의
├── app/ # Next.js 14+ App Router
│ ├── (auth)/ # 인증 관련 라우트 (로그인, 회원가입)
│ ├── (home)/ # 홈 페이지 관련 라우트
│ ├── (pages)/ # 주요 페이지 라우트
│ │ ├── (workform)/ # 워크폼 관련 페이지
│ │ ├── my-workform/ # 마이 워크폼 페이지
│ │ └── work-talk/ # 워크톡 게시판 페이지
│ └── components/ # 공통 컴포넌트
│ ├── animation/ # 애니메이션 컴포넌트
│ ├── button/ # 버튼 컴포넌트
│ ├── card/ # 카드 컴포넌트
│ ├── chip/ # 칩 컴포넌트
│ ├── input/ # 입력 컴포넌트
│ ├── layout/ # 레이아웃 컴포넌트
│ ├── loading-spinner/ # 로딩 스피너 컴포넌트
│ └── pagination/ # 페이지네이션 컴포넌트
├── constants/ # 상수 정의
├── hooks/ # 커스텀 훅
│ └── queries/ # React Query 관련 훅
├── lib/ # 유틸리티 함수
├── schemas/ # Zod 스키마 정의
├── store/ # 상태 관리 (Zustand)
├── types/ # TypeScript 타입 정의
└── utils/ # 유틸리티 함수
```

## 라이선스
Expand Down
Loading
Loading