- 배포 URL: https://chalddack.vercel.app/
- 테스트용 계정
- ID: [email protected]
- PW: 11111111
- 찰딱은 사용자 중심의 중고거래 경험을 제공하는 중고 거래 플랫폼입니다.
- 다양한 중고 물품을 탐색하고, 직접 상품을 등록하거나 거래에 참여할 수 있습니다.
- 실시간 채팅과 거래 예약 기능을 통해 안전한 거래를 진행할 수 있습니다.
| 분류 | 기술 스택 |
|---|---|
| 프론트엔드 |      |
| CI / CD |   |
| 협업 |     |
본 프로젝트는 Next.js(App Router) 기반으로 개발되었으며, FSD(Feature-Sliced Design) 아키텍처를 기반으로 핵심 레이어의 책임을 유지하되, 프로젝트 규모에 맞게 구조를 간소화하여 적용했습니다.
src/
├─ app/ # Next.js App Router
│ ├─ login/
│ ├─ signup/
│ ├─ my/
│ ├─ detail/[postingId]/
│ └─ api/ # Next Route Handlers
│
├─ entities/ # 핵심 도메인
│ ├─ post/
│ ├─ user/
│ └─ chat/
│
├─ features/ # 사용자 행동 단위 기능
│ ├─ auth/
│ ├─ like/
│ ├─ createPost/
│ ├─ editPost/
│ ├─ editProfile/
│ ├─ deal/
│ └─ chat/
│
├─ widgets/ # 복합 UI 블록
│ ├─ GNB/
│ └─ footer/
│
├─ views/ # 페이지 전용 UI
│
└─ shared/ # 전역 공통 계정 생성 및 로그인, 유효성 검사를 수행합니다.
인증 상태에 따른 화면 전환 및 모달 처리를 수행합니다.
- 입력값 유효성 검사
- 이메일 형식, 비밀번호 조건 등 클라이언트 단 유효성 검사
- 잘못된 입력에 대해 즉각적인 피드백
- 인증 결과 처리 모달
- 로그인 · 회원가입 성공/실패 결과에 따라 안내 모달 표시
- 인증 만료 시 로그인 페이지로 이동 후, 세션 만료 안내 모달 표시
| 회원가입 | 로그인 |
|---|---|
|
|
서비스 내 주요 페이지로의 이동을 제공하는 전역 네비게이션입니다.
- 인증 상태 기반 네비게이션
- 비로그인 상태: 로그인 / 회원가입 버튼
- 로그인 상태: 판매하기 / 채팅하기 / 마이페이지 버튼
- 반응형 네비게이션
- 화면 크기에 따라 레이아웃이 변경되는 반응형 GNB 구성
페이지 이동 없이 채팅 기능을 사용할 수 있도록, Portal 기반으로 제공되는 실시간 채팅 UI입니다.
- 채팅 목록
- 내가 참여 중인 채팅방 목록 제공
- 각 채팅방의 최근 메시지 및 상태 표시
- 채팅방
- 판매자·구매자 간 실시간 메시지 송수신
- 거래
- 구매자는 예약하기 버튼을 통해 거래 의사 표시
- 판매자는 판매 완료 버튼으로 거래 상태를 확정
- 채팅 → 예약 → 판매 완료까지의 흐름을 채팅방에서 일관되게 제공
| 채팅생성 |
|---|
|
| 채팅 |
|
| 채팅거래 |
|
중고 거래 물품을 탐색할 수 있습니다.
- 상품 조회
- 카테고리별 물품 탐색
- 최신순/좋아요순/채팅순/조회순 정렬
- SSR 기반 초기 데이터 프리패칭 + CSR 무한 스크롤
- 물품 클릭 시 상세페이지로 이동
| 웹 | 모바일 |
|
|
게시글 상세 정보 및 채팅·좋아요 기능을 제공합니다.
- 상품 상세 정보
- 상품 제목, 가격, 설명 등 기본 정보 제공
- SSR 기반 데이터 프리패칭으로 상품 상세 정보 즉시 제공
- 연관 상품 탐색
- 동일 판매자의 다른 상품 목록 제공
- 사용자 인터랙션
- 채팅을 통한 판매자와의 실시간 문의
- 좋아요를 통한 관심 상품 표시
| 웹 | 모바일 |
|
|
사용자 정보를 관리하고, 게시글을 등록하며, 직접 등록한 상품을 수정 및 삭제할 수 있습니다.
- 사용자 프로필 관리
- 프로필 이미지, 닉네임 등 기본 정보 표시
- 프로필 정보 수정 기능 제공 (수정 성공/실패 시 안내 모달 표시)
- SSR 기반 데이터 프리패칭으로 사용자 프로필 정보 즉시 제공
- 상품 등록
- 상품 제목, 가격, 카테고리, 설명, 이미지 입력 (등록 성공/실패 시 안내 모달 표시)
- 상품 관리
- 사용자 행동(판매·구매·관심)에 따라 상품을 구분하여 조회
- 등록한 상품의 수정 및 삭제 기능 제공
| 웹 | 모바일 |
|---|---|
|
|
사용자가 상품 게시글을 등록하거나 수정할 수 있도록 제공되는 모달입니다.
- 상품 정보 입력
- 상품 제목, 가격, 카테고리, 설명, 이미지 입력 가능
- 필수 항목 누락 시 즉각적인 입력 안내 제공
- 처리 모달
- 등록 및 수정 성공 시 성공 안내 모달 표시
- 실패 시 에러 상황에 맞는 안내 모달 표시
| 등록 모달 | 수정 모달 |
|
|