다챠 서비스 프론트엔드 모듈

Datcha(다챠) 는 개인 간 데이터를 사고팔 수 있는 데이터 거래 플랫폼입니다.
해당 프론트엔드 모듈은 다챠 서비스의 전체 사용자용 및 관리자용 웹 애플리케이션을 구성하며, 다음과 같은 역할을 수행합니다:

• 사용자 인터페이스(UI) 및 사용자 경험(UX) 제공
• 데이터 거래, 결제, 인증/인가 등 주요 기능을 시각적으로 구현
• 백엔드 및 데이터베이스와의 연동을 통해 데이터 송수신
• 사용자 액션에 따른 상태 변화와 화면 렌더링 처리

서비스 운영에 필요한 컴포넌트 기반 구조, 반응형 UI, 상태 관리, 데이터 동기화, API 연동 등을 포함하고 있습니다.

🔗팀노션 🎨피그마 🌐배포사이트 👨‍🏫시연영상 🏛 조직 페이지

---

💻 기술 스택

기술	아이콘	설명
React		사용자 인터페이스 라이브러리
TypeScript		정적 타입 기반 자바스크립트
TailwindCSS		유틸리티 퍼스트 CSS 프레임워크
Vite		빠른 번들러 및 개발 서버
React Query		서버 상태 관리 라이브러리
Zustand		경량 글로벌 상태 관리 라이브러리

---

📁 디렉토리 구조

front-module/
├──📦 public/
├──📦 src/
|	├── 📁 assets              # 이미지, svg 등
|	├── 📁 components          # 재사용 가능한 UI 컴포넌트
|	├── 📁 constants           # 상수 정의 (텍스트 등)
|	├── 📁 hooks               # 커스텀 훅
|	├── 📁 layout              # 공통 레이아웃 컴포넌트
|	├── 📁 apis                # API 클라이언트 등
|	├── 📁 pages               # 라우팅 기준 페이지 폴더/컴포
|	├── 📁 store               # 전역 상태 관리 
|	├── 📁 router              # react-router 설정
|	├── 📁 utils               # 유틸 함수들
|	├── 📁 types               # 타입 인터페이스
|	├── main.tsx               # 앱 진입점 (Vite 기준)
|	├── index.css              # 전역 css
|	└── vite-env.d.ts
├── package.json
├── tsconfig.json
├── .gitignore
├── vite.config.ts
├── .env
└── README.md

---

👩‍💻 팀원

김소은 개발

김예지 개발

황주경 개발

---

🎯 커밋 컨벤션

• feat: 새로운 기능 추가
• fix: 버그 수정
• docs: 문서 수정
• style: 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우, 스타일 코드 변경
• refactor: 코드 리팩토링
• test: 테스트 코드, 리팩토링 테스트 코드 추가
• build: 패키지 매니저 수정, 주석 추가/수정/삭제

---

🔰 실행 방법

# 1. 의존성 설치 (루트 디렉토리에서 실행)
npm install

# 2. 클라이언트 및 서버 빌드
npm run build

# 3. 개발 서버 실행
npm run dev