수많은 디바이스 중 유저에게 최적의 조합을 제공하다 UMC 9th Project - Client Repository
이 저장소는 Device Life의 클라이언트 애플리케이션 코드를 관리합니다. 사용자가 직관적으로 기기를 탐색하고, 조합을 생성하며, 실시간으로 시각적인 평가 피드백을 받을 수 있는 UI/UX 구현에 집중합니다.
- 조합 워크스페이스 UI: 기기 추가/삭제 시 부드러운 인터랙션 및 상태 관리 구현
- 실시간 평가 피드백: 생태계, 충전, 컬러 점수 데이터를 시각적 그래프나 수치로 즉시 렌더링
- 기기 탐색 및 필터 UI: 가격대 조절을 위한 Range Slider 컴포넌트 및 카테고리 칩 구현
- 라이프스타일 선택: 이미지 카드 및 브랜드 로고를 활용한 직관적인 사용자 입력 인터페이스
- 인터랙션: 내 조합 라이브러리의 스와이프 삭제 및 모달 애니메이션 처리
 |
 |
 |
|---|---|---|
| 박유민 @waldls |
이선우 @Seony777 |
임병훈 @H-un1 |
| Frontend Lead | Frontend | Frontend |
| 역할 | 종류 | 선정 근거 |
|---|---|---|
| Language & Framework |    |
TypeScript로 타입 안정성을 확보하고, React 기반 컴포넌트 UI를 구성했으며, Vite의 빠른 번들링과 HMR로 개발 생산성을 높였습니다. |
| Styling |  |
유틸리티 기반 스타일링으로 빠르고 일관된 UI를 구현했습니다. |
| State Management |   |
Zustand로 클라이언트 상태를 간단히 관리하고, TanStack Query로 서버 상태/캐싱을 선언적으로 관리했습니다. |
| Data Fetching |  |
Axios로 HTTP 요청을 처리하고, TanStack Query로 요청 상태/캐싱/동기화 관리를 수행했습니다. |
| Tools |   |
ESLint로 코드 규칙을 통일하고, Prettier로 포맷을 자동화해 일관된 코드 스타일을 유지했습니다. |
| DevOps |    |
Git/GitHub로 버전 관리 및 협업을 진행하고, Vercel로 배포 자동화 및 CI/CD 과정을 간소화했습니다. |
| Package Manager |  |
표준 패키지 매니저(npm)를 사용하여 의존성 설치 및 관리를 수행했습니다. |
- main: 최종적으로 사용자에게 배포되는 가장 안정적인 버전 브랜치
- develop: 다음 출시 버전을 개발하는 중심 브랜치. 기능 개발 완료 후 feature 브랜치들이 병합
- feature: 기능 개발용 브랜치. develop에서 분기하여 작업
- 모든 기능 개발은 feature 브랜치에서 시작
- 작업 시작 전, 항상 최신 develop 내용 받아오기 (git pull origin develop)
- 작업 완료 후, develop으로 Pull Request(PR) 생성
- PR에 Reviewer(멘션) 지정 이후 머지
- 브랜치 이름 형식: feature/이슈번호-기능명
- 예시: feature/1-login-ui
- type은 소문자만 사용 (feat, fix, refactor, docs, style, test, chore)
- subject는 모두 현재형 동사
| type | 설명 |
|---|---|
| start | 새로운 프로젝트를 시작할 때 |
| feat | 새로운 기능을 추가할 때 |
| fix | 버그를 수정할 때 |
| design | CSS 등 사용자 UI 디자인을 변경할 때 |
| refactor | 기능 변경 없이 코드를 리팩토링할 때 |
| settings | 설정 파일을 변경할 때 |
| comment | 필요한 주석을 추가하거나 변경할 때 |
| dependency/Plugin | 의존성/플러그인을 추가할 때 |
| docs | README.md 등 문서를 수정할 때 |
| merge | 브랜치를 병합할 때 |
| deploy | 빌드 및 배포 관련 작업을 할 때 |
| rename | 파일 혹은 폴더명을 수정하거나 옮길 때 |
| remove | 파일을 삭제하는 작업만 수행했을 때 |
| revert | 이전 버전으로 롤백할 때 |
- feat: 컴포넌트 추가
- fix: 가려짐 현상 해결
-
연락 자주 확인하기
- 디스코드/카카오톡 알림을 자주 확인합니다.
-
적극적으로 의견 공유하기
- 막히는 부분이나 변경 사항이 생기면 빠르게 공유합니다.
-
PR Merge 규칙
- 기본적으로 전원 Approve 후 Merge하며, PR 작성자가 브랜치를 삭제합니다.
- 단, 여행 등 개인 일정으로 확인이 어려운 경우, 해당 인원을 제외한 팀원의 Approve로 Merge 가능합니다.
-
라이브러리 설치 공유
- 작업 중 새로운 라이브러리를 설치한 경우, 디스코드 스레드에 댓글로 공유합니다.
-
Figma 수치 규칙
- 디자이너님께서 별도로 안내한 경우를 제외하고, 가장 가까운 4의 배수로 스냅하여 적용합니다.