|
1 | | -# 38-COLLABORATION-WEB-SANPDECK |
| 1 | +# 38-COLLABORATION-WEB-SNAPDECK |
2 | 2 |
|
3 | | -### LETS SOPT 38기 합동 세미나 데스크탑 웹 2조 스냅덱🍰 |
| 3 | +### LETS SOPT 38기 합동 세미나 데스크탑 웹 2조 스냅덱 🍰 |
| 4 | + |
| 5 | +<br /> |
| 6 | + |
| 7 | +<p align="center"> |
| 8 | + <img src="src/assets/images/logo.svg" alt="스냅덱 로고" width="160" /> |
| 9 | +</p> |
| 10 | + |
| 11 | +<br /> |
| 12 | + |
| 13 | +## 👥 팀 소개 |
| 14 | + |
| 15 | +<div align="center"> |
| 16 | + |
| 17 | +| **chungyo** | **seojin15** | **gyeongbibin** | **nyewon** | **jyeon03** | |
| 18 | +| :-------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: | |
| 19 | +| <img src="https://github.com/chungyo.png" width="150" height="150"/><br/>[@chungyo](https://github.com/chungyo) | <img src="https://github.com/seojin15.png" width="150" height="150"/><br/>[@seojin15](https://github.com/seojin15) | <img src="https://github.com/gyeongbibin.png" width="150" height="150"/><br/>[@gyeongbibin](https://github.com/gyeongbibin) | <img src="https://github.com/nyewon.png" width="150" height="150"/><br/>[@nyewon](https://github.com/nyewon) | <img src="https://github.com/jyeon03.png" width="150" height="150"/><br/>[@jyeon03](https://github.com/jyeon03) | |
| 20 | + |
| 21 | +</div> |
| 22 | + |
| 23 | +<br /> |
| 24 | + |
| 25 | +## 🛠️ 기술 스택 |
| 26 | + |
| 27 | +| 역할 | 종류 | |
| 28 | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 29 | +| Library |  | |
| 30 | +| Programming Language |  | |
| 31 | +| Build Tool |  | |
| 32 | +| Styling |  | |
| 33 | +| Routing |  | |
| 34 | +| Data Fetching |  | |
| 35 | +| UI Primitive |  | |
| 36 | +| DnD |  | |
| 37 | +| Formatting |   | |
| 38 | +| Package Manager |  | |
| 39 | +| Version Control |   | |
| 40 | +| UI Documentation |   | |
| 41 | +| Deployment |  | |
| 42 | +| Cooperation |    | |
| 43 | + |
| 44 | +<br /> |
| 45 | + |
| 46 | +## 🚀 실행 방법 |
| 47 | + |
| 48 | +```bash |
| 49 | +pnpm install |
| 50 | +pnpm dev |
| 51 | +``` |
| 52 | + |
| 53 | +<br /> |
| 54 | + |
| 55 | +## 📜 Scripts |
| 56 | + |
| 57 | +| Command | Description | |
| 58 | +| ---------------------- | ------------------------------------- | |
| 59 | +| `pnpm dev` | Vite 개발 서버 실행 | |
| 60 | +| `pnpm build` | TypeScript 빌드 및 Vite 프로덕션 빌드 | |
| 61 | +| `pnpm lint` | ESLint 검사 | |
| 62 | +| `pnpm lint:fix` | ESLint 자동 수정 | |
| 63 | +| `pnpm format` | Prettier 포맷 적용 | |
| 64 | +| `pnpm format:check` | Prettier 포맷 검사 | |
| 65 | +| `pnpm preview` | 빌드 결과 미리보기 | |
| 66 | +| `pnpm storybook` | Storybook 개발 서버 실행 | |
| 67 | +| `pnpm build-storybook` | Storybook 정적 빌드 | |
| 68 | +| `pnpm chromatic` | Chromatic 배포 | |
| 69 | + |
| 70 | +<br /> |
| 71 | + |
| 72 | +## 🗂️ 폴더 구조 |
| 73 | + |
| 74 | +```text |
| 75 | +📦 38-COLLABORATION-WEB-SNAPDECK |
| 76 | +├── 📁 public |
| 77 | +│ └── 📁 fonts |
| 78 | +├── 📁 src |
| 79 | +│ ├── 📁 app |
| 80 | +│ │ ├── App.tsx |
| 81 | +│ │ └── 📁 router |
| 82 | +│ ├── 📁 assets |
| 83 | +│ │ ├── 📁 icons |
| 84 | +│ │ └── 📁 images |
| 85 | +│ ├── 📁 features |
| 86 | +│ │ ├── 📁 content |
| 87 | +│ │ │ ├── 📁 api |
| 88 | +│ │ │ ├── 📁 components |
| 89 | +│ │ │ ├── 📁 constants |
| 90 | +│ │ │ ├── 📁 hooks |
| 91 | +│ │ │ ├── 📁 queries |
| 92 | +│ │ │ ├── 📁 types |
| 93 | +│ │ │ └── 📁 utils |
| 94 | +│ │ └── 📁 home |
| 95 | +│ │ ├── 📁 api |
| 96 | +│ │ ├── 📁 components |
| 97 | +│ │ ├── 📁 constants |
| 98 | +│ │ ├── 📁 hooks |
| 99 | +│ │ ├── 📁 queries |
| 100 | +│ │ └── 📁 types |
| 101 | +│ ├── 📁 pages |
| 102 | +│ │ ├── 📁 ContentPage |
| 103 | +│ │ ├── 📁 HomePage |
| 104 | +│ │ └── 📁 NotFoundPage |
| 105 | +│ ├── 📁 shared |
| 106 | +│ │ ├── 📁 api |
| 107 | +│ │ ├── 📁 styles |
| 108 | +│ │ ├── 📁 types |
| 109 | +│ │ ├── 📁 ui |
| 110 | +│ │ └── 📁 utils |
| 111 | +│ └── main.tsx |
| 112 | +├── .github |
| 113 | +├── package.json |
| 114 | +└── vite.config.ts |
| 115 | +``` |
| 116 | + |
| 117 | +<br /> |
| 118 | + |
| 119 | +## 📑 컨벤션 |
| 120 | + |
| 121 | +### Git Branch |
| 122 | + |
| 123 | +| 브랜치 | 용도 | |
| 124 | +| ----------------------------- | --------- | |
| 125 | +| **main** | 배포용 | |
| 126 | +| **develop** | 통합 개발 | |
| 127 | +| **feat/기능명/#이슈번호** | 기능 개발 | |
| 128 | +| **fix/기능명/#이슈번호** | 버그 수정 | |
| 129 | +| **refactor/기능명/#이슈번호** | 리팩토링 | |
| 130 | + |
| 131 | +### Commit Convention |
| 132 | + |
| 133 | +| 태그 | 내용 | |
| 134 | +| ------------ | ------------------------------------------- | |
| 135 | +| **init** | 개발 환경 초기 세팅 | |
| 136 | +| **feat** | 새로운 기능 추가 | |
| 137 | +| **fix** | 버그 수정 | |
| 138 | +| **docs** | 문서 수정 | |
| 139 | +| **style** | 스타일 변경 코드 | |
| 140 | +| **refactor** | 기능 변화 없이 코드 구조 개선 / 가독성 향상 | |
| 141 | +| **hotfix** | 긴급 수정 사항 | |
| 142 | +| **chore** | 기타 자잘한 작업 | |
| 143 | + |
| 144 | +### Commit Message Example |
| 145 | + |
| 146 | +```text |
| 147 | +feat: 프롬프트 입력 컴포넌트 구현 |
| 148 | +``` |
| 149 | + |
| 150 | +### Issue Convention |
| 151 | + |
| 152 | +```text |
| 153 | +[TYPE] 작업 내용 |
| 154 | +
|
| 155 | +## Describe |
| 156 | +작업에 대한 설명을 작성합니다. |
| 157 | +
|
| 158 | +## Tasks |
| 159 | +- [ ] 해야 할 작업 1 |
| 160 | +- [ ] 해야 할 작업 2 |
| 161 | +``` |
| 162 | + |
| 163 | +### PR Convention |
| 164 | + |
| 165 | +```text |
| 166 | +[TYPE] 작업 내용 |
| 167 | +
|
| 168 | +## 📌 Summary |
| 169 | +- Closes #이슈 번호 |
| 170 | +
|
| 171 | +## 📚 Tasks |
| 172 | +- 작업 내용 |
| 173 | +
|
| 174 | +## 🔍 Describe |
| 175 | +- 작업에 대한 상세 설명 |
| 176 | +
|
| 177 | +## 👀 To Reviewer |
| 178 | +- 리뷰어가 봐주었으면 하는 부분 |
| 179 | +
|
| 180 | +## 📸 Screenshot |
| 181 | +- 작업 결과물 이미지 또는 영상 |
| 182 | +``` |
| 183 | + |
| 184 | +### Coding Convention |
| 185 | + |
| 186 | +<details> |
| 187 | +<summary>🐵 컴포넌트</summary> |
| 188 | + |
| 189 | +- 공통 컴포넌트는 `shared/ui`에 배치합니다. |
| 190 | +- feature에 종속되는 컴포넌트는 `features/{domain}/components`에 배치합니다. |
| 191 | +- 컴포넌트명은 파스칼케이스를 사용합니다. ex) `PromptTextarea` |
| 192 | +- UI 컴포넌트는 가능한 한 렌더링 책임에 집중합니다. |
| 193 | +</details> |
| 194 | + |
| 195 | +<details> |
| 196 | +<summary>🐷 변수/상수</summary> |
| 197 | + |
| 198 | +- 상수는 대문자 SNAKE_CASE를 사용합니다. ex) `SOURCE_ACTION_OPTIONS` |
| 199 | +- feature 내부에서만 공유되는 상수는 `features/{domain}/constants`에 배치합니다. |
| 200 | +</details> |
| 201 | + |
| 202 | +<details> |
| 203 | +<summary>🐶 함수 & 훅</summary> |
| 204 | + |
| 205 | +- hooks는 `use` 접두어를 사용합니다. |
| 206 | +- 화살표 함수 사용을 우선합니다. |
| 207 | +- 이벤트 핸들링 함수는 `handle` 접두어를 사용합니다. |
| 208 | +- 이벤트 핸들링 함수가 아닌 함수에는 불필요하게 `handle`을 붙이지 않습니다. |
| 209 | +</details> |
| 210 | + |
| 211 | +<details> |
| 212 | +<summary>🐰 타입</summary> |
| 213 | + |
| 214 | +- 객체 구조 타입은 `interface` 사용을 우선합니다. |
| 215 | +- 여러 파일에서 공유되는 타입은 `types` 폴더에 분리합니다. |
| 216 | +- 1회성 props 타입은 `~Props`로 네이밍합니다. |
| 217 | +</details> |
| 218 | + |
| 219 | +<details> |
| 220 | +<summary>🐢 스타일</summary> |
| 221 | + |
| 222 | +- 시맨틱 태그 사용을 지향합니다. |
| 223 | +- 단위는 `rem` 사용을 기본으로 합니다. |
| 224 | +- border처럼 고정 크기가 필요한 경우 `px` 사용을 허용합니다. |
| 225 | +- Tailwind class가 길어질 경우 `cn`으로 역할별 분리를 고려합니다. |
| 226 | +</details> |
| 227 | + |
| 228 | +</br> |
| 229 | + |
| 230 | +## 🧩 초기 세팅 역할 분배 |
| 231 | + |
| 232 | +| 담당자 | 담당 기능 | |
| 233 | +| -------- | ---------------------------------------------------------------------------------------------- | |
| 234 | +| **지연** | 폴더 구조 세팅, PR, Issue 템플릿 및 라벨 자동화 설정, Auto 리뷰어 설정, Discord 자동 알림 설정 | |
| 235 | +| **충영** | CI/CD 파이프라인 구축 및 배포, 라우터 초기 세팅 | |
| 236 | +| **예원** | 절대 경로 설정, SVGR 설정, MSW 세팅 | |
| 237 | +| **경빈** | StoryBook 세팅 및 배포, Tailwind CSS 세팅, Style 설정 | |
| 238 | +| **서진** | Tanstack Query 및 axios 세팅, ESLint, Prettier 설정 | |
| 239 | + |
| 240 | +</br> |
| 241 | + |
| 242 | +## 🧩 컴포넌트 & 뷰 역할 분배 |
| 243 | + |
| 244 | +| 담당자 | 담당 컴포넌트 | |
| 245 | +| -------- | ----------------------------------------------------- | |
| 246 | +| **지연** | LinkModal, ConfirmModal, PromptPanel, HomePage Layout | |
| 247 | +| **충영** | TextButton, SlideContent, ContentPage Layout | |
| 248 | +| **예원** | Modal, MenuHeader, BackHeader, SlideTitle | |
| 249 | +| **경빈** | TextField, ChatPrompt | |
| 250 | +| **서진** | IconButton, HomeTitle, DashBoard | |
| 251 | + |
| 252 | +</br> |
| 253 | + |
| 254 | +## 🧩 API 역할 분배 |
| 255 | + |
| 256 | +| 담당자 | 담당 기능 | |
| 257 | +| -------- | ---------------------- | |
| 258 | +| **지연** | 슬라이드 순서 변경 | |
| 259 | +| **충영** | 덱 조회, 슬라이드 삭제 | |
| 260 | +| **예원** | 슬라이드 추가 | |
| 261 | +| **경빈** | 채팅 조회 | |
| 262 | +| **서진** | 대시보드 조회 | |
0 commit comments