| 이태빈 | 김재욱 | 최민경 | 김수빈 | 이지수 | 안세빈 | 신수민 |
|---|---|---|---|---|---|---|
 |
|
|
|
|
|
|
| 팀장 | 부팀장 | 팀원 | 팀원 | 팀원 | 팀원 | 팀원 |
| 프로필 헤더 구매 교환(요청 취소) |
알림 포인트 |
판매 교환(거절 승인) 공통 컴포넌트(카드) |
로딩 인디케이터 포토카드 조회 |
인증/인가 구글 OAuth 랜딩페이지 공통 컴포넌트(버튼) |
마켓플레이스 | 판매 취소 |
최애의 포토는 포인트를 재화로 사용하여 자신이 좋아하는 사진을 구매 할 수도 있고, 교환을 원하는 사람들끼리 서로의 카드를 교환할 수도 있습니다!
1시간 마다 등장하는 깜짝 포인트 이벤트를 통해 즐거운 경험도 해볼 수 있습니다!
서로의 포토카드를 교환하고, 나만의 포토카드를 자랑하는 재미와 함께 상호 교류도 즐길 수 있는 플랫폼, 최애의 포토에서 만나보세요!
| Category | Tech Stack |
|---|---|
| Frontend |     |
| Backend |      |
| Library | ↳ Frontend     ↳ Backend       |
| Deploy |   |
| Tool |     |
이태빈(팀장)
- 헤더 레이아웃, 프로필 모달 UI
- 포토카드 구매
- 상세 조회
- 내가 등록한 카드가 아닐 경우, 포인트를 사용해 구매하거나, 교환 카드를 제시할 수 있습니다.
- 구매
- 포토 카드를 구매하려는 유저가 상점에 올라온 매진되지 않은 포토 카드를 포인트를 사용해 구매할 수 있는 기능입니다. 구매할 경우, 포토 카드의 가격만큼 구매자의 포인트가 차감되고 판매자의 포인트는 증가합니다.
- 상세 조회
- 포토카드 교환
- 요청
- 상점에 올라온 매진되지 않은 포토 카드에 대해 교환을 제안할 수 있는 기능입니다. 교환을 원하는 유저는 교환할 카드를 한 장 선택해 교환 제안서를 보낼 수 있습니다.
- 취소
- 구매자가 교환 요청한 포토카드를 취소할 수 있는 기능입니다.
- 요청
김재욱(부팀장)
- 알림
- 알림에는 아래와 같은 유형이 있습니다. 이때 알림이 발생한 시점을 표시합니다.
- 1시간~23시간 내 :
- 예시 : 1시간 전, 2시간 전, 3시간 전, ... , 23시간 전
- 24시간 이후~6일 이내 :
- 예시 : 1일 전, 2일 전, 3일 전, ... , 6일 전
- 7일 이후~3주 이내 :
- 예시 : 1주일 전, 2주일 전, 3주일 전
- 4주 이후~11개월 이내 :
- 예시 : 1개월 전, 2개월 전, 3개월 전, ... , 11개월 전
- 12개월 이후 :
- 예시 : 1년 전, 2년 전, 3년 전, ...
- 포토 카드 교환 성사 알림 기능 : 포토 카드 교환 제안을 한 유저의 제안이 승인/거절될 경우, 교환 성사 혹은 불발되었음을 알리는 기능입니다.
- 포토 카드 교환 제안 알림 기능 : 판매자에게 판매 포토 카드에 대한 교환 제안이 온 것을 알리는 기능입니다.
- 포토 카드 구매 완료 알림 기능 : 유저가 판매 중인 포토 카드를 포인트로 구매했음을 알리는 기능입니다.
- 포토 카드 판매 성사 알림 기능 : 판매자의 판매 포토 카드가 팔렸음을 알리는 기능입니다.
- 포토 카드 품절 알림 기능 : 판매자에게 판매 중이던 포토 카드가 전체 판매되어 품절 처리되었음을 알리는 기능입니다.
- 1시간~23시간 내 :
- 알림에는 아래와 같은 유형이 있습니다. 이때 알림이 발생한 시점을 표시합니다.
- 깜짝 포인트
- 깜짝 모달을 활용해 유저에게 1시간에 1번 랜덤 상자 뽑기 기회를 부여하는 기능입니다. 뽑은 포인트는 적립됩니다.
최민경
- 포토카드 판매
- 판매
- 기존에 소유하고 있는 포토카드를 판매할 수 있는 기능입니다. 유저가 소유 중인 포토 카드 중 하나를 선택하고, 발행량 이내에 판매할 장 수, 장당 판매 금액을 입력 후 상점에 업로드할 수 있습니다.
- 수정
- 내가 등록한 카드일 경우 판매 정보 수정이 가능합니다.
- 판매
- 포토카드 교환
- 승인 및 거절
- 교환 카드 제시에 대한 승인/거절이 가능합니다.
- 판매자는 포토 카드 상세에서 요청이 온 교환 카드 목록을 확인할 수 있습니다.
- 판매자가 승인하면, 교환 요청을 한 유저와 판매 포토 카드의 소유주가 서로 변경됩니다.
- 승인 및 거절
김수빈
- 성공 & 실패 모달
- 나의 포토카드 조회
- 유저가 상점에서 구매했거나, 본인 소유로 등록한 포토 카드를 전체 조회하는 나만의 사진첩 기능입니다. 필터, 정렬, 검색, 페이지네이션 기능을 포함합니다.
- 내가 판매중인 포토카드 조회
- 유저가 판매를 위해 상점에 올린 포토 카드 목록 조회 기능입니다. 필터링(등급, 장르, 판매방법, 매진여부), 페이지네이션 기능을 포함합니다.
이지수
- 인증 / 인가
- 회원가입
- 유저 회원가입 기능을 제공합니다.
- 로그인
- 계정으로 로그인하면 각 계정에 부여된 권한에 맞는 기능에 접근할 수 있습니다.
- 로그아웃
- 유저가 로그인 상태를 유지하고 싶지 않을 경우 로그아웃이 가능합니다.
- 회원가입
- 구글 OAuth
- 유저는 구글 아이디로 회원가입과 로그인을 할 수 있습니다.
- 랜딩 페이지
- 로그인하지 않은 사용자에게는 서비스를 소개하는 랜딩 페이지를 보여줍니다.
- 로그인한 사용자에게는 랜딩 페이지를 보여주지 않습니다.
안세빈
- 포토카드 전체 조회
- 판매할 카드가 등록되는 상점입니다. 검색, 필터(등급, 장르, 설명, 매진 여부 등), 정렬(최신/오래된 순, 낮은/높은 가격 순)
- 무한 스크롤링 기능을 포함합니다.
- 필터는 단일 선택만 가능합니다.
신수민
- 포토카드 생성
- 유저 본인이 찍은 사진을 카드로 생성하는 기능입니다. 원하는 사진을 업로드하고, 사진에 대한 정보(이름, 최소 가격, 등급, 총 발행량, 장르, 설명 등)를 입력 혹은 선택해 카드를 생성 및 등록할 수 있습니다.
- 포토카드 판매
- 상세 조회
- 내가 등록한 카드일 경우 다른 사람이 제시한 교환 카드 제시 목록을 조회할 수 있습니다.
- 취소 - 내가 등록한 카드일 경우 판매 취소가 가능합니다.
- 상세 조회
Frontend
📦 /
┣ 📂src
┃ ┣ 📂app
┃ ┃ ┣ 📂(auth)
┃ ┃ ┃ ┣ 📂google-callback
┃ ┃ ┃ ┣ 📂login
┃ ┃ ┃ ┗ 📂signup
┃ ┃ ┣ 📂marketplace
┃ ┃ ┃ ┗ 📂[id]
┃ ┃ ┃ ┣ 📂buyer
┃ ┃ ┃ ┗ 📂seller
┃ ┃ ┣ 📂my-gallery
┃ ┃ ┃ ┗ 📂create
┃ ┃ ┣ 📂my-sell
┃ ┃ ┣ 📜globals.css # 전역 스타일 정의
┃ ┃ ┣ 📜layout.js # 전체 앱 레이아웃 컴포넌트
┃ ┃ ┣ 📜loading.js # 페이지 로딩 상태 처리
┃ ┃ ┣ 📜page.js # 루트 페이지 엔트리
┃ ┃ ┗ 📜Providers.jsx # 전역 Provider 등록 컴포넌트
┃ ┣ 📂assets
┃ ┃ ┣ 📂fonts
┃ ┃ ┣ 📂icons
┃ ┃ ┗ 📂images
┃ ┣ 📂components # 공통 UI 컴포넌트
┃ ┃ ┣ 📂common
┃ ┃ ┣ 📂modal
┃ ┃ ┗ 📂ui
┃ ┣ 📂contexts # React Context 정의
┃ ┣ 📂hooks # 커스텀 훅 모음
┃ ┣ 📂lib
┃ ┃ ┣ 📂api # API 요청 관련 유틸
┃ ┃ ┗ 📂utils # 일반 유틸 함수 모음
┃ ┗ 📂providers # 전역 상태 Provider 등
┣ 📜.env # 환경 변수 정의
┣ 📜.env.example # 환경 변수 예시 템플릿
┣ 📜.gitignore # Git 추적 제외 목록
┣ 📜.prettierrc # Prettier 코드 포맷팅 설정
┣ 📜eslint.config.mjs # ESLint 린트 설정
┣ 📜jsconfig.json # JS/TS 모듈 경로 설정
┣ 📜next.config.mjs # Next.js 설정 파일
┗ 📜README.md # 프로젝트 설명 문서
Backend
📦 /
┣ 📂src
┃ ┣ 📂config # 환경설정 및 설정 파일 모음
┃ ┣ 📂controllers # 라우트 요청에 대한 비즈니스 로직 처리
┃ ┣ 📂db
┃ ┃ ┣ 📂generated # Prisma에 의해 자동 생성된 파일
┃ ┃ ┗ 📂prisma
┃ ┃ ┣ 📂migrations # Prisma 마이그레이션 파일
┃ ┃ ┣ 📂mocks # 테스트용 mock 데이터
┃ ┃ ┣ 📜prisma.js # Prisma 클라이언트 초기화
┃ ┃ ┣ 📜schema.prisma # Prisma 스키마 정의 파일
┃ ┃ ┗ 📜seed.js # 초기 데이터 시드 파일
┃ ┣ 📂middlewares # Express 미들웨어 정의
┃ ┣ 📂repositories # DB 접근 로직 (DAO 계층)
┃ ┣ 📂routes # 라우터 정의
┃ ┣ 📂services # 비즈니스 로직 처리 계층
┃ ┣ 📂structs
┃ ┃ ┗ 📂auth # 인증 관련 구조체 및 유틸
┃ ┣ 📂uploads # 파일 업로드 저장소
┃ ┣ 📂utils # 유틸리티 함수 모음
┃ ┗ 📜app.js # Express 앱 엔트리포인트
┣ 📜.env # 환경 변수 설정
┣ 📜.env.example # 환경 변수 예시 파일
┣ 📜.gitignore # Git 추적 제외 파일 목록
┣ 📜.http # REST API 테스트용 요청 모음 (VSCode용)
┣ 📜.prettierrc # Prettier 코드 포맷 설정
┣ 📜package-lock.json # 패키지 잠금 파일
┣ 📜package.json # 프로젝트 의존성 및 스크립트 정의
┗ 📜README.md # 프로젝트 설명 문서