https://github.com/100-hours-a-week/9-team-Devths-WIKI/wiki/🎨-프론트엔드-기술-스택-설계

📝 최종 기술 스택 요약표

영역	기술	선정 이유 요약
언어	TypeScript v5.9.3	화면/기능이 많아 데이터 구조가 복잡해지는 Devths에서 타입을 통해 필드 누락·타입 착각을 개발 단계에서 차단하고, 리팩토링과 협업 안정성을 높이기 위해 채택
라이브러리	React v19.2	캘린더/게시판/채팅처럼 상태 변화와 인터랙션이 많은 UI를 컴포넌트 단위로 분리해 관리하고, 상태 기반 UI 업데이트로 복잡도를 낮추기 위해 채택
프레임워크	Next.js 16	페이지 수가 많고(공통 레이아웃 반복), 로그인 전/후 분기와 에러 페이지가 중요한 구조에서 라우팅·레이아웃·에러 처리·SSR/SSG를 프레임워크 수준에서 표준화하기 위해 채택
전역 상태	Zustand v5.0.9	토스트/전역 모달/탭·필터 같은 UI 전역 상태가 많아 prop drilling을 줄이고, 필요한 상태만 선택 구독해 리렌더링 범위를 통제하기 위해 채택
서버 상태	TanStack Query v5.90.16	목록/검색/필터/무한 스크롤이 많고, 변경 후 갱신(invalidate) 흐름이 복잡해지는 Devths에서 캐싱·동기화·페이지네이션 패턴을 표준화하기 위해 채택
스타일링	Tailwind CSS v4.1	반복 UI와 상태별 스타일(선택/에러/비활성 등)이 많은 구조에서 JSX에서 빠르게 수정하고, config로 디자인 기준을 고정해 일관성을 유지하기 위해 채택
UI 컴포넌트	shadcn/ui	모달/드롭다운/탭 등 상호작용 UI를 프로젝트가 코드로 소유해 요구사항에 맞게 수정하고, 접근성 패턴을 기반으로 공통 UI를 표준화하기 위해 채택
캘린더 UI	FullCalendar v6.1.20	달력 특유의 뷰 전환·이벤트 배치·예외 케이스를 검증된 라이브러리로 커버하고, Devths 요구에 맞춘 커스텀 렌더링/상호작용 구현에 집중하기 위해 채택
패키지 관리	pnpm v10.27.0	의존성이 커질수록 설치 속도/디스크/CI 안정성이 중요해지는 팀 프로젝트에서 공용 저장소 기반 설치 효율과 lockfile 재현성을 확보하기 위해 채택
번들러/빌드	Turbopack	Next.js 기본 통합 흐름을 유지하면서 설정 부담을 줄이고, 규모 확장 시 개발 서버 체감 속도를 확보하는 선택지로 채택
유효성 검사	Zod v4.3.4	입력 화면과 규칙이 많은 구조에서 검증 정책을 스키마로 고정·재사용하고, TypeScript 타입 추론으로 검증 규칙과 타입 불일치 리스크를 줄이기 위해 채택
폼 처리	React Hook Form v7.70.0	회원가입/작성/수정 등 폼이 많은 프로젝트에서 폼 상태·제출·에러 처리를 표준화하고, Zod 검증 결과를 UI에 일관되게 연결하기 위해 채택
API 통신	Axios v1.13.2	OAuth 이후 공통 헤더/토큰 주입, 공통 에러 처리, 업로드 패턴 등을 인터셉터와 인스턴스로 중앙화해 네트워크 정책을 일관되게 운영하기 위해 채택
단위/컴포넌트 테스트	Vitest v4.0.16	UI 로직/검증/상태 전환 테스트를 빠르게 반복 실행하고, TS/React 테스트 생태계와 결합해 테스트 환경 운영 부담을 줄이기 위해 채택
컴포넌트 테스트 라이브러리	React Testing Library v16.3.1	구현이 아니라 사용자 관점(DOM 상호작용)으로 테스트를 작성해 리팩토링 내구성을 높이고, 접근성 기반 조회로 테스트 표준을 만들기 위해 채택
E2E 테스트	Playwright v1.57.0	랜딩→로그인→메인 진입 같은 핵심 사용자 시나리오를 실제 브라우저에서 검증하고, 자동 대기/트레이스 등으로 E2E 운영 안정성을 확보하기 위해 채택
실시간	STOMP + WebSocket	채팅/알림에서 필요한 재연결·폴백·룸 단위 메시징·ACK 패턴을 기본 제공해, 실환경 예외 처리 부담을 줄이고 안정적인 실시간 UX를 만들기 위해 채택

🤖 Devths

1️⃣ 서비스 목적

Devths는 취업 준비 사용자를 대상으로 일정(캘린더/To-Do) 관리, 게시판 기반 정보 탐색·작성·공유, 개인/그룹 채팅, AI 커리어 챗봇을 통한 자료 분석·상담, 알림, 프로필/팔로우 기능을 통해 취업 준비 과정을 한 곳에서 관리하고 실행할 수 있도록 도와주는 서비스이다.

2️⃣ 서비스 핵심 기능

(1) 캘린더

일정 조회/등록/수정/삭제 (월, 주 뷰)
AI 자동 일정 삽입: 채용 공고 업로드 → AI로 추출 → 일정 초안 생성 → 사용자 확인 후 캘린더에 저장

(2) 게시판

글 목록/상세/작성/수정/삭제
댓글/좋아요/검색(필터)

(3) 챗봇/AI

이력서/포트폴리오/채용공고 등 입력 기반 답변 생성
면접 모드 (질문 생성/피드백)
대화 이력 관리 및 컨텍스트 기반 응답 제공

(4) 채팅

채팅방 목록/생성/참여/나가기
실시간 메시지 전송/수신, 읽음 처리
메시지 히스토리 로딩(무한스크롤) 및 파일/이미지 첨부

3️⃣ 선정 기준

<aside> 💡

Devths는 페이지가 많고(캘린더/게시판/채팅/챗봇/프로필/설정 등), 데이터 형태가 다양하며, 실시간 기능(채팅)과 AI 기반 비동기 처리(공고 업로드 → 추출 → 초안 생성)가 섞여 있는 서비스임

그래서 프론트엔드 기술 스택은 서비스 요구사항을 안정적으로 구현하고, 유지보수와 확장에 강한 조합인지 더 중요하다고 생각함 </aside>

(1) 기능 적합성

Devths는 단순 CRUD만 있는 서비스가 아니라, 캘린더/무한스크롤/실시간/파일업로드/AI 처리 흐름처럼 UI 요구가 복잡함
판단 기준
- 실시간 이벤트(읽음/전송/입장 등) 처리를 안정적으로 붙일 수 있는가?
- 비동기 데이터(조회/저장/재시도/캐싱) 처리가 표준화 가능한가?
- 라우팅/레이아웃 구현이 쉬운가?