KB 헬스케어 Task

KB 과제 프로젝트 - React + TypeScript + Vite 기반 태스크 관리 애플리케이션

1. 과제 구현사항

과제에 정의된 API 명세 변경없이 개발을 진행하였습니다.

• 색상토큰화 진행
• GNB/LNB 구현
• Dashboard 구현
• Login 구헌
• Task 구현
  • Task list 가상스크롤링
  • 무한 스크롤
• TaskDetail 구헌
  • 삭제 모달 구현
  • 실제 삭제는 되지 않음
• User page 구현
• Logic Test 진행

구현 중 AI 사용

• UI 디자인
• 자동 완성
• Page Component
• css token 생성 및 정리

2. Dependencies

Core

패키지	버전	설명
React	^19.2.0	UI 라이브러리
TypeScript	~5.9.3	타입 시스템
Vite	^7.2.4	빌드 도구

상태 관리

패키지	버전	설명
@tanstack/react-query	^5.90.18	서버 상태 관리
zustand	^5.0.10	클라이언트 상태 관리

라우팅 & 폼

패키지	버전	설명
react-router-dom	^7.12.0	라우팅
react-hook-form	^7.71.1	폼 관리
zod	^4.3.5	스키마 검증
@hookform/resolvers	^5.2.2	폼 검증 리졸버

UI & 스타일링

패키지	버전	설명
tailwindcss	^4.1.18	CSS 프레임워크
@radix-ui/*	-	Headless UI 컴포넌트
lucide-react	^0.562.0	아이콘
framer-motion	^12.27.0	애니메이션
class-variance-authority	^0.7.1	컴포넌트 variants

HTTP & 테스트

패키지	버전	설명
axios	^1.13.2	HTTP 클라이언트
msw	^2.12.7	API 모킹
vitest	^4.0.17	테스트 프레임워크
@testing-library/react	^16.3.1	React 테스트 유틸리티

3. 설정 방법

요구 사항

• Node.js 18+
• npm 또는 yarn

설치 및 실행

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

# 빌드 미리보기
npm run preview

# 린트 실행
npm run lint

환경 변수

env/ 폴더에 환경 변수 파일을 설정합니다.

그 외 사항

husky를 통해 lint 와 convention 확인작업을 진행했습니다.

4. 폴더 아키텍쳐

src/
├── api/                    # API 클라이언트 설정
│   ├── authStorage.ts      # 인증 토큰 스토리지
│   └── client.ts           # Axios 인스턴스
│
├── app/                    # 앱 설정
│   ├── App.tsx             # 루트 컴포넌트
│   ├── authChecker.tsx     # 인증 체크 컴포넌트
│   ├── initializeLoading.tsx
│   ├── queryClient.ts      # React Query 클라이언트
│   └── router.tsx          # 라우터 설정
│
├── components/             # 공통 컴포넌트
│   ├── baseLayout/         # 기본 레이아웃
│   ├── errorDialog/        # 에러 다이얼로그
│   └── mainLayout/         # 메인 레이아웃 (사이드바, 네비게이션)
│
├── features/               # 도메인별 기능 (Clean Architecture)
│   ├── auth/               # 인증
│   ├── dashboard/          # 대시보드
│   ├── profile/            # 프로필
│   └── task/               # 태스크
│       ├── domain.ts       # 도메인 모델 (타입, 인터페이스)
│       ├── repository.ts   # 데이터 접근 계층
│       └── usecase.ts      # 비즈니스 로직
│
├── hooks/                  # 커스텀 훅
│   └── useAppInitializer.ts
│
├── mocks/                  # MSW 모킹
│   ├── browser.ts          # 브라우저 환경 설정
│   ├── handlers.ts         # API 핸들러
│   └── server.ts           # 서버 환경 설정
│
├── pages/                  # 페이지 컴포넌트
│   ├── dashboard/          # 대시보드 페이지
│   ├── login/              # 로그인 페이지
│   ├── profile/            # 프로필 페이지
│   └── task/               # 태스크 페이지
│       ├── taskDetail/     # 태스크 상세
│       ├── taskLayout/     # 태스크 레이아웃
│       └── taskList/       # 태스크 목록
│
├── query/                  # React Query 훅
│   ├── auth/               # 인증 관련 쿼리/뮤테이션
│   ├── dashboard/          # 대시보드 쿼리
│   ├── profile/            # 프로필 쿼리
│   └── task/               # 태스크 쿼리
│
├── shadcn/                 # shadcn/ui 컴포넌트
│   ├── hooks/              # UI 훅 (use-mobile 등)
│   ├── lib/                # 유틸리티 (cn 함수 등)
│   └── ui/                 # UI 컴포넌트
│
├── store/                  # Zustand 스토어
│   ├── useAuthStore.ts     # 인증 상태
│   ├── useErrorDialogStore.ts  # 에러 다이얼로그 상태
│   └── useMessageStore.ts  # 메시지 상태
│
├── styles/                 # 전역 스타일
│   └── index.css
│
├── tests/                  # 테스트 파일
│   ├── api/                # API 테스트
│   ├── features/           # Feature 테스트
│   ├── mocks/              # Mock 테스트
│   ├── query/              # Query 테스트
│   └── store/              # Store 테스트
│
├── utils/                  # 유틸리티 함수
│
└── main.tsx                # 엔트리 포인트

아키텍쳐 특징

• Clean Architecture: features/ 폴더에서 domain, repository, usecase 패턴 적용
• 관심사 분리: API 호출(query), 상태 관리(store), UI(pages, components) 분리
• 테스트 용이성: MSW를 활용한 API 모킹으로 테스트 환경 구성