Wordy FE

UMC 10th Wordy 프로젝트 프론트엔드

업무일지 작성, AI 성과 변환, 주간·월간 대시보드를 통해 개인 업무를 체계적으로 관리하는 웹 애플리케이션입니다.

기술 스택

• React 19 + TypeScript
• Vite
• Tailwind CSS v4

팀원 및 역할 분담

이름	담당
예원 (조이)	공용 컴포넌트, 홈, 랜딩페이지, 태그 관리 모달
채연 (길동)	업무일지 작성 (카드 · 체크리스트 · 드래그 등)
보미 (보리)	성과 미리보기, 업무일지 모아보기
서윤 (마리)	로그인/회원가입, 대시보드 (주간 · 월간)

폴더 구조

src/
├── assets/          # 이미지, 폰트 등 정적 파일
├── components/
│   ├── common/      # 앱 전체 공용 컴포넌트 (조이 담당, 개별 생성 금지)
│   └── [page]/      # 페이지 전용 컴포넌트
├── pages/           # 라우트 단위 페이지
├── hooks/           # 커스텀 훅
├── stores/          # 전역 상태 관리
├── api/             # API 호출
├── types/           # TypeScript 타입 정의
└── utils/           # 유틸 함수

화면 목록 및 플로우

메인

랜딩 페이지
  ├─ 기존 회원 → 자체 로그인 / 구글 로그인 → 메인 홈
  └─ 신규 회원 → 회원가입 / 구글 로그인 → 이용 약관 동의 → 내 정보(프로필) 입력 → 메인 홈

일일 업무 기록

업무 일지
  └─ 일별 업무 일지 작성 → AI 자동 성과 변환 → 성과 관련 내용 편집 → 결과 공유하기

일지 모아보기
  └─ 저장된 일지 확인 (달별)
       ├─ 삭제하기
       └─ 성과 대시보드에 반영하기 (체크박스) → 성과 대시보드에 반영

성과 대시보드

Weekly 탭
  ├─ 월간 요약 인사이트 → 주간 회고 작성 → 다음주 계획 작성
  ├─ 핵심 지표 진행 현황
  └─ 업무 흐름 타임라인
  * 주간 대시보드 3개 이상 생성 시 월간 대시보드 자동 생성

Monthly 탭
  ├─ 월간 요약 인사이트 → 월간 회고 작성 → 다음달 계획 작성
  ├─ 핵심 지표 진행 현황
  └─ 업무 흐름 타임라인

설정 / 알림함

설정
  ├─ 프로필 (이름, 가입 이메일, 비밀번호, 계정 삭제)
  ├─ 플랜 및 결제 → 멤버 삭제
  └─ 휴지통 → 복원하기

알림함
  └─ 알림 수신 설정 (이메일, 마케팅 on/off)

시작하기

# 의존성 설치
pnpm install

# 개발 서버 실행
pnpm dev

# 빌드
pnpm build

환경 변수

.env.example을 복사해서 .env 파일을 만들어주세요.

cp .env.example .env

스크립트

명령어	설명
pnpm dev	개발 서버 실행
pnpm build	프로덕션 빌드
pnpm check	포맷팅 + 린트 자동 수정
pnpm lint	린트 검사
pnpm format	포맷팅
pnpm type-check	타입 체크
pnpm preview	빌드 결과 로컬 미리보기

협업 규칙

브랜치 전략

main        — 배포 브랜치. 직접 push 금지
develop     — 개발 통합 브랜치
feat/#이슈번호-기능명  — 기능 개발
fix/#이슈번호-버그명   — 버그 수정

예시: feat/#12-login-page / fix/#34-button-style

커밋 컨벤션

형식: 타입: 제목

타입	설명
feat	새로운 기능
fix	버그 수정
style	UI/스타일 변경 (기능 변화 없음)
refactor	리팩토링
chore	설정, 패키지 등 기타 변경
docs	문서 수정
test	테스트 추가/수정
revert	커밋 되돌리기

예시: feat: 로그인 페이지 구현 / fix: 버튼 클릭 시 이벤트 중복 실행 수정

커밋 형식이 맞지 않으면 자동으로 커밋이 막힙니다.

이슈 규칙

• 작업 시작 전 이슈 먼저 생성
• 이슈 제목 형식: [FEAT] 기능명 / [BUG] 버그명

PR 규칙

• PR 제목은 커밋 컨벤션과 동일한 형식
• 이슈 없이 PR 금지 (closes #이슈번호 필수)
• feat / fix 브랜치 → develop 으로 PR
• develop → main 은 배포 시점에만 머지
• PR 승인 1명 이상 필수
• PR의 모든 리뷰 댓글 resolve 후 머지
• 리뷰 요청 후 팀원들에게 공지