구깃 (9git) - Frontend

필요한 순간만 접어놓다, 내 하루의 구깃

👥 Team Members

• 임헌찬 @trivialcoding6
• 윤소영 @Yoonsoyoung02
• 윤정민 @Kristyn-Yoon

할당 업무

• 임헌찬
  • 회원가입/로그인 페이지 개발
  • 일정 페이지 개발
• 윤소영
  • Home 페이지 개발
  • 분석 페이지 개발
• 윤정민
  • 챗봇 페이지 개발
  • 프로필 페이지 개발

프로젝트 세팅

# 패키지 설치
yarn

# 개발 서버 실행
yarn dev

폴더 구조

├── app/ # Next.js 13+ App Router 페이지
│ └── ... # 각 라우트별 페이지 컴포넌트
├── components/ # 재사용 가능한 컴포넌트
│ ├── ui/ # shadcn-ui 컴포넌트
│ ├── common/ # 기본 컴포넌트 (단일 공통 컴포넌트)
│ ├── service/ # 서비스 특화 컴포넌트
│ └── shared/ # 여러 페이지에서 공유되는 컴포넌트 (단일 컴포넌트가 아닌 컴포넌트 조합으로 만들어지고 여러곳에서 사용되는 컴포넌트)
├── hooks/ # 커스텀 React hooks
├── utils/ # 유틸리티 함수
├── store/ # Zustand 상태 관리
├── apis/ # API 통신 관련 로직
└── constants/ # 상수 정의

기술 스택

• Next.js: React 기반의 풀스택 웹 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다.

  • App Router를 사용하여 서버 컴포넌트와 클라이언트 컴포넌트를 효율적으로 관리합니다.

• TypeScript: JavaScript의 슈퍼셋 언어로, 정적 타입 시스템을 제공하여 개발 시 타입 안정성을 보장합니다.

• Zustand: 간단하고 빠른 상태 관리 라이브러리로, React 애플리케이션의 전역 상태를 효율적으로 관리합니다.

• Tailwind CSS: 유틸리티 우선 CSS 프레임워크로, 클래스 기반의 스타일링을 통해 빠른 UI 개발이 가능합니다.

• shadcn-ui: Radix UI와 Tailwind CSS를 기반으로 한 재사용 가능한 컴포넌트 모음으로, 커스터마이징이 용이한 현대적인 UI 컴포넌트를 제공합니다.