| 백지연 | 김충영 | 민경빈 | 송민서 | 황유림 |
|---|---|---|---|---|
|
|
|
|
|
| @jyeon03 | @chungyo | @gyeongbibin | @MinseoSONG | @yurimidaH |
| Feature | Description |
|---|---|
| 홈 | 오늘의 식당, 하시픽, 인기 맛집, 매거진 등 주요 콘텐츠를 제공합니다. |
| 검색 | 키워드와 음식 장르, 정렬 필터를 통해 일본 맛집을 탐색할 수 있습니다. |
| 식당 상세 | 식당 정보, 메뉴, 리뷰, 매장 정보를 확인할 수 있습니다. |
| 오늘의 식당 | 랜덤 추천 식당을 확인하고 다시 추천받을 수 있습니다. |
| 예약 신청 | 식당 예약 정보를 입력하고 포인트 기반 수수료를 확인할 수 있습니다. |
| 내 예약 정보 | 진행 중, 방문 예정, 방문 완료, 예약 취소 상태별 예약을 확인할 수 있습니다. |
| 예약 상세 | 예약 정보 확인과 예약 취소를 지원합니다. |
| 리뷰 | 방문 완료 예약에 대해 리뷰를 작성하고, 작성한 리뷰를 관리할 수 있습니다. |
| 마이페이지 | 사용자 프로필, 보유 포인트, 마이 리뷰 정보를 확인할 수 있습니다. |
| 매거진 | 일본 맛집과 여행 관련 콘텐츠를 제공합니다. |
| PWA | 모바일 웹 환경에서 앱처럼 사용할 수 있도록 PWA를 지원합니다. |
자세한 기술 스택과 버전 기준은 Tech Stack을 따릅니다.
자세한 기준은 App Structure를 따릅니다.
| Folder | Responsibility |
|---|---|
app |
전역 Provider, Router, Layout 등 앱 실행 조립 코드 |
pages |
route 단위 화면, 페이지 전용 UI와 상태 조합 |
features |
여러 페이지에서 재사용되는 도메인 기능 |
shared |
도메인과 무관하게 앱 내부에서 공유되는 공통 코드 |
test |
테스트 환경 설정과 공통 mock 유틸 |
- 특정 route에서만 사용하는 코드는 pages/{pageName}에 둡니다.
- 여러 페이지에서 재사용되는 도메인 기능은 features/{domain}으로 승격합니다.
- 도메인 의미가 없는 공통 hook, util, component는 shared에 둡니다.
- page끼리는 서로의 내부 파일을 직접 import하지 않습니다.
- UI primitive는 packages/hds-ui, icon은 packages/hds-icons, token은 packages/hds-tokens에서 관리합니다.
| App | Package | Description |
|---|---|---|
apps/client |
@hashi/client |
사용자 서비스 앱 |
apps/admin |
@hashi/admin |
관리자 앱 |
packages/hds-ui |
@hashi/hds-ui |
공통 UI 컴포넌트 패키지 |
packages/hds-icons |
@hashi/hds-icons |
공통 아이콘 패키지 |
packages/hds-tokens |
@hashi/hds-tokens |
디자인 토큰 패키지 |
| Target | Dev | Build | Preview |
|---|---|---|---|
| Client | pnpm dev:client |
pnpm build:client |
pnpm preview:client |
| Admin | pnpm dev:admin |
pnpm build:admin |
pnpm preview:admin |
| All | - | pnpm build |
- |
기본 vercel.json은 client 배포용입니다. Admin은 별도 Vercel project에서 vercel.admin.json을 사용합니다.
GitHub Actions는 client와 admin 배포 workflow를 분리합니다. Admin workflow는
VERCEL_ADMIN_PROJECT_ID repository secret으로 Admin Vercel project를 선택하고,
vercel.admin.json을 명시적으로 사용합니다.
pnpm exec vercel build --local-config vercel.admin.json
pnpm exec vercel deploy --prebuilt --local-config vercel.admin.json자세한 기준은 Coding Convention을 따릅니다.
- 컴포넌트는 arrow function과 named export를 사용합니다.
- 컴포넌트 파일은 PascalCase, 일반 .ts 파일과 폴더는 camelCase를 사용합니다.
- 의미 없는 div 사용을 지양하고 가능한 semantic tag를 사용합니다.
- 버튼 역할은 button 요소를 사용하고, 텍스트가 없는 아이콘 버튼에는 aria-label을 제공합니다.
- 타입 이름은 PascalCase, Props 타입은 Props 접미사를 사용합니다.
- 이벤트 핸들러에는 handle 접두사를 사용합니다.
- boolean 값은 is, has, check 등의 접두사로 의미를 드러냅니다.
- 컴포넌트 파일은 PascalCase, 일반 .ts 파일과 폴더는 camelCase를 사용합니다.
- 의미 없는 div 사용을 지양하고 가능한 semantic tag를 사용합니다.
- 버튼 역할은 button 요소를 사용하고, 텍스트가 없는 아이콘 버튼에는 aria-label을 제공합니다.
- 타입 이름은 PascalCase, Props 타입은 Props 접미사를 사용합니다.
- 이벤트 핸들러에는 handle 접두사를 사용합니다.
- boolean 값은 is, has, check 등의 접두사로 의미를 드러냅니다.
- 스타일은 기본적으로 Tailwind CSS utility class를 사용합니다.
- 반복되는 variant 조합은 class-variance-authority의 cva와 VariantProps를 사용합니다.
- 반복되는 variant 조합은 class-variance-authority의 cva와 VariantProps를 사용합니다.
- 공통 디자인 값은 HDS token을 우선 사용합니다.
자세한 기준은 Git Convention을 따릅니다.
HASHI Client는 Jira로 작업을 관리하고 GitHub로 코드 리뷰와 병합을 관리합니다.
- Jira 티켓을 생성합니다.
- Jira 티켓 번호를 기준으로 브랜치를 생성합니다.
- 작업 브랜치에서 개발합니다.
- 작업이 끝나면
develop브랜치로 PR을 생성합니다. - 최소 2명 이상의 approve를 받은 뒤 merge합니다.
- merge된 브랜치는 삭제합니다.
브랜치명은 다음 형식을 사용합니다.
type/HASHI-번호-작업-요약
예시는 다음과 같습니다.
feat/HASHI-12-login
fix/HASHI-18-button-style
docs/HASHI-30-convention-docs
커밋 메시지는 다음 형식을 사용합니다.
type(scope): HASHI-번호 작업 내용
예시는 다음과 같습니다.
feat(client): HASHI-12 로그인 페이지 구현
fix(hds-ui): HASHI-18 Button disabled 스타일 수정
docs(docs): HASHI-30 컨벤션 문서 추가
| Branch | Description |
|---|---|
main |
배포 가능한 브랜치 |
develop |
기능 브랜치들이 병합되는 개발 기준 브랜치 |
feat/* |
새로운 기능 개발 |
fix/* |
버그 수정 |
refactor/* |
기능 변화 없는 코드 구조 개선 |
style/* |
UI 스타일, CSS, 포맷팅 수정 |
docs/* |
문서 작성 및 수정 |
test/* |
테스트 코드 및 테스트 환경 수정 |
chore/* |
빌드 설정, 패키지 관리, 기타 잡무 |
자세한 기준은 PR Checklist을 따릅니다.
- PR 대상 브랜치는
develop입니다. - PR 본문은
.github/pull_request_template.md를 기준으로 작성합니다. - 변경 범위가 하나의 Jira 이슈로 설명 가능한지 확인합니다.
- 관련 없는 변경이 섞이지 않도록
git status와 diff를 확인합니다. - UI 변경이 있으면 가능한 경우 screenshot 또는 수동 확인 결과를 남깁니다.
- merge 전 최소 2명 이상의 approve를 받습니다.
자세한 기준은 Package Management을 따릅니다.
- 패키지 매니저는
pnpm을 사용합니다. npm,yarn,bunlockfile을 추가하지 않습니다.- 외부 패키지 버전은
pnpm-workspace.yaml의 catalog에서 관리합니다. - 내부 workspace 의존성은
workspace:*를 사용합니다. - 새 패키지를 추가하면
package.json,pnpm-lock.yaml, 필요 시pnpm-workspace.yaml을 함께 갱신합니다.
- 많이 웃기
- 연락 잘 보기, 카카오톡 빨리 확인하기
- 급한 연락을 확인하지 않으면 전화하기
- 짜증내지 않기
- 둥글둥글하게 말하기
- AI를 사용하되 결과는 꼼꼼하게 확인하기
- 모르는 것은 30분만 혼자 고민하고 공유하기
- 싸우지 않기
- 불편한 점이 있으면 바로 말하기
- 빠른 공유가 필요한 내용은 카카오톡으로 소통합니다.
- 작업 단위와 진행 상태는 Jira 이슈를 기준으로 관리합니다.
- 코드 변경과 리뷰는 GitHub PR을 기준으로 진행합니다.
- 기획, 정책, 회의 내용처럼 팀 전체가 참고해야 하는 내용은 문서로 남깁니다.
자세한 기준은 Jira Ticket Guide을 따릅니다.
- 작업은 Jira 이슈 단위로 나누어 관리합니다.
- 이슈 상태는
TODO,IN PROGRESS,CODE REVIEW,QA,DONE흐름으로 관리합니다. - 작업을 시작하면 담당 이슈를
IN PROGRESS로 이동합니다. - PR을 생성하면
CODE REVIEW상태로 관리합니다. - 리뷰 이후 확인이 필요한 작업은
QA상태로 관리합니다. - PR이 병합되면 이슈를
DONE으로 정리합니다.
HASHI는 AI와 함께 개발하기 위해 spec, convention, workflow, skill 문서를 함께 관리합니다.
- Tech Stack
- Monorepo
- App Structure
- Data Layer
- Design System
- Design System Components
- Design System Component Plan
- Design System Icons
- Styling And Design Tokens
- Mobile WebView
