Chalddack 찰딱

• 배포 URL: https://chalddack.vercel.app/
• 테스트용 계정
  • ID: test1@test.com
  • PW: 11111111

Chalddack 서비스 소개

• 찰딱은 사용자 중심의 중고거래 경험을 제공하는 중고 거래 플랫폼입니다.
• 다양한 중고 물품을 탐색하고, 직접 상품을 등록하거나 거래에 참여할 수 있습니다.
• 실시간 채팅과 거래 예약 기능을 통해 안전한 거래를 진행할 수 있습니다.

팀원 소개

[FE] 홍수민	[FE] 박태우

---

1. 기술 스택

분류	기술 스택
프론트엔드
CI / CD
협업

2. 프로젝트 구조

본 프로젝트는 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/                      # 전역 공통 

3. 페이지별 기능

인증 페이지 (로그인 · 회원가입 페이지)

계정 생성 및 로그인, 유효성 검사를 수행합니다.
인증 상태에 따른 화면 전환 및 모달 처리를 수행합니다.

• 입력값 유효성 검사
  • 이메일 형식, 비밀번호 조건 등 클라이언트 단 유효성 검사
  • 잘못된 입력에 대해 즉각적인 피드백
• 인증 결과 처리 모달
  • 로그인 · 회원가입 성공/실패 결과에 따라 안내 모달 표시
  • 인증 만료 시 로그인 페이지로 이동 후, 세션 만료 안내 모달 표시

회원가입	로그인

---

GNB

서비스 내 주요 페이지로의 이동을 제공하는 전역 네비게이션입니다.

• 인증 상태 기반 네비게이션
  • 비로그인 상태: 로그인 / 회원가입 버튼
  • 로그인 상태: 판매하기 / 채팅하기 / 마이페이지 버튼
• 반응형 네비게이션
  • 화면 크기에 따라 레이아웃이 변경되는 반응형 GNB 구성

---

채팅

페이지 이동 없이 채팅 기능을 사용할 수 있도록, Portal 기반으로 제공되는 실시간 채팅 UI입니다.

• 채팅 목록
  • 내가 참여 중인 채팅방 목록 제공
  • 각 채팅방의 최근 메시지 및 상태 표시
• 채팅방
  • 판매자·구매자 간 실시간 메시지 송수신
• 거래
  • 구매자는 예약하기 버튼을 통해 거래 의사 표시
  • 판매자는 판매 완료 버튼으로 거래 상태를 확정
  • 채팅 → 예약 → 판매 완료까지의 흐름을 채팅방에서 일관되게 제공

채팅생성
채팅
채팅거래

---

게시글 목록 페이지 (홈)

중고 거래 물품을 탐색할 수 있습니다.

• 상품 조회
  • 카테고리별 물품 탐색
  • 최신순/좋아요순/채팅순/조회순 정렬
  • SSR 기반 초기 데이터 프리패칭 + CSR 무한 스크롤
  • 물품 클릭 시 상세페이지로 이동

웹	모바일

---

게시글 상세 페이지

게시글 상세 정보 및 채팅·좋아요 기능을 제공합니다.

• 상품 상세 정보
  • 상품 제목, 가격, 설명 등 기본 정보 제공
  • SSR 기반 데이터 프리패칭으로 상품 상세 정보 즉시 제공
• 연관 상품 탐색
  • 동일 판매자의 다른 상품 목록 제공
• 사용자 인터랙션
  • 채팅을 통한 판매자와의 실시간 문의
  • 좋아요를 통한 관심 상품 표시

웹	모바일

---

마이 페이지

사용자 정보를 관리하고, 게시글을 등록하며, 직접 등록한 상품을 수정 및 삭제할 수 있습니다.

• 사용자 프로필 관리
  • 프로필 이미지, 닉네임 등 기본 정보 표시
  • 프로필 정보 수정 기능 제공 (수정 성공/실패 시 안내 모달 표시)
  • SSR 기반 데이터 프리패칭으로 사용자 프로필 정보 즉시 제공
• 상품 등록
  • 상품 제목, 가격, 카테고리, 설명, 이미지 입력 (등록 성공/실패 시 안내 모달 표시)
• 상품 관리
  • 사용자 행동(판매·구매·관심)에 따라 상품을 구분하여 조회
  • 등록한 상품의 수정 및 삭제 기능 제공

웹	모바일

---

상품 등록 / 수정 모달

사용자가 상품 게시글을 등록하거나 수정할 수 있도록 제공되는 모달입니다.

• 상품 정보 입력
  • 상품 제목, 가격, 카테고리, 설명, 이미지 입력 가능
  • 필수 항목 누락 시 즉각적인 입력 안내 제공
• 처리 모달
  • 등록 및 수정 성공 시 성공 안내 모달 표시
  • 실패 시 에러 상황에 맞는 안내 모달 표시

등록 모달	수정 모달