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