NET ZERO-FitFit_FE

🎯 Goal

NET ZERO-FitFit은 지속 가능한 패션 소비를 장려하고, 사용자들이 자신의 체형에 맞는 옷을 가상으로 입어봄으로써 불필요한 의류 구매와 반품을 줄이는 것을 목표로 합니다. 탄소 배출 저감(Net Zero)에 기여하는 친환경 패션 플랫폼을 지향합니다.

✨ Motivation

패션 산업은 전 세계 탄소 배출의 큰 비중을 차지합니다. 특히 온라인 쇼핑의 활성화로 인해 사이즈 미스 등으로 인한 반품과 폐기가 환경에 악영향을 미치고 있습니다. 저희는 AI 가상 피팅 기술과 중고 거래 활성화, **친환경 보상 시스템(Leaf)**을 결합하여 재미있고 가치 있는 소비 경험을 제공하고자 합니다.

🔑 Key Features

👗 AI 가상 피팅룸: 내 전신 사진과 옷 이미지를 합성하여 가상으로 옷을 입어볼 수 있습니다.
📍 지도 기반 중고 거래: 내 주변의 사용자들과 안전하게 중고 의류를 거래할 수 있습니다.
💬 실시간 채팅: 판매자와 구매자 간의 간편한 소통을 지원합니다.
🤖 챗봇 서비스: 서비스 이용 안내 및 궁금한 점을 빠르게 해결해줍니다.
🌿 친환경 포인트(Leaf): 퀴즈 풀기, 중고 거래 등으로 포인트를 모아 혜택을 받을 수 있습니다.
🔎 상품 검색 및 카테고리: 원하는 옷을 쉽고 빠르게 찾을 수 있습니다.

📌 Supported Notices

본 프로젝트는 Chrome 브라우저 및 모바일 환경에 최적화되어 있습니다.
일부 기능(AI 피팅)은 서버 상태에 따라 지연될 수 있습니다.

👥 Contributors

이름	역할
이주한	FE Developer
박해원	BE Developer
박은경	BE Developer
심현민	BE Developer & AI Developer
유현지	AI Developer
최서연	AI Developer

(팀원 정보를 수정해주세요)

📱 Platforms

Web	Mobile Web

📂 Project structure

src
├── api                                          # API 요청 함수 모음
│   ├── authApi.js                               # 인증 관련 API (로그인, 회원가입 등)
│   ├── chatApi.js                               # 채팅 관련 API (메시지 전송, 조회)
│   ├── chatbotApi.js                            # 챗봇 관련 API
│   ├── clothesApi.js                            # 의류 관련 API (상품 등록, 조회)
│   ├── common.js                                # 공통 API 설정 및 함수
│   ├── fittingApi.js                            # 가상 피팅 관련 API
│   ├── memberApi.js                             # 회원 정보 관련 API
│   ├── orderApi.js                              # 주문 및 거래 내역 API
│   ├── quizApi.js                               # 퀴즈 관련 API
│   └── recommendationApi.js                     # 추천 시스템 관련 API
├── App.css                                      # 앱 전역 CSS 파일
├── App.jsx                                      # 앱의 메인 라우팅 및 레이아웃 설정 컴포넌트
├── assets                                       # 정적 리소스 (이미지, 아이콘 등)
│   ├── advertisement1.png                       # 광고 배너 이미지
│   ├── bnkBank.png                              # 부산은행 아이콘
│   ├── earth_quiz.png                           # 퀴즈 지구 이미지
│   ├── earth.png                                # 지구 아이콘
│   ├── fitfit.png                               # 핏핏 로고 이미지
│   ├── hanaBank.png                             # 하나은행 아이콘
│   ├── ibkBank.png                              # 기업은행 아이콘
│   ├── kakao_login_medium_wide.png              # 카카오 로그인 버튼 이미지
│   ├── kakaoBank.png                            # 카카오뱅크 아이콘
│   ├── kBank.png                                # 케이뱅크 아이콘
│   ├── kbBank.png                               # 국민은행 아이콘
│   ├── kebBank.png                              # 하나은행(구 외환) 아이콘
│   ├── kfccBank.png                             # 새마을금고 아이콘
│   ├── logo-fitfit copy.png                     # 로고 사본
│   ├── logo-fitfit.png                          # 메인 로고
│   ├── nhBank.png                               # 농협은행 아이콘
│   ├── postBank.png                             # 우체국 아이콘
│   ├── scBank.png                               # SC제일은행 아이콘
│   ├── shinhanBank.png                          # 신한은행 아이콘
│   ├── space.png                                # 우주 배경 이미지
│   ├── suhyupBank.png                           # 수협 아이콘
│   ├── tossBank.png                             # 토스뱅크 아이콘
│   ├── userLocation.png                         # 사용자 위치 표시 아이콘
│   └── wooriBank.png                            # 우리은행 아이콘
├── components                                   # 공통으로 사용되는 UI 컴포넌트
│   ├── BottomNavBar.jsx                         # 하단 네비게이션 바 (메인 메뉴 이동)
│   └── PhotoPickerModal.jsx                     # 사진 선택 모달 (카메라/앨범)
├── constants                                    # 상수 데이터 모음
│   ├── categories.js                            # 상품 카테고리 정의
│   └── termContent.js                           # 약관 내용 정의
├── contexts                                     # 전역 상태 관리 (Context API)
│   ├── MapContext.jsx                           # 지도 관련 상태 컨텍스트
│   ├── SellFormContext.jsx                      # 판매글 작성 폼 상태 컨텍스트
│   └── SignupContext.jsx                        # 회원가입 진행 상태 컨텍스트
├── Hello.jsx                                    # 테스트용 Hello 컴포넌트
├── hooks                                        # 커스텀 훅 모음
│   └── useRequireAuth.js                        # 로그인 여부 확인 및 리다이렉트 훅
├── index.css                                    # Tailwind CSS 진입점 및 기본 스타일
├── main.jsx                                     # React 앱 진입점 (DOM 렌더링)
├── pages                                        # 페이지 단위 컴포넌트 폴더
│   ├── auth                                     # 인증 관련 페이지
│   │   ├── AuthStartPage.css                    # 시작 페이지 스타일
│   │   ├── AuthStartPage.jsx                    # 시작 페이지 (로그인/회원가입 분기)
│   │   └── kakao                                # 카카오 로그인 관련
│   │       └── KakaoRedirect.jsx                # 카카오 로그인 콜백 처리 페이지
│   ├── category                                 # 카테고리 관련 페이지
│   │   ├── CategoryPage.jsx                     # 카테고리 목록 페이지
│   │   ├── CategoryResultPage.jsx               # 카테고리 선택 결과 리스트 페이지
│   │   └── components                           # 카테고리 페이지 내부 컴포넌트
│   │       ├── AccessoriesCategory.jsx          # 액세서리 카테고리 컴포넌트
│   │       ├── BagsCategory.jsx                 # 가방 카테고리 컴포넌트
│   │       ├── BottomsCategory.jsx              # 하의 카테고리 컴포넌트
│   │       ├── CategoryClothesList.jsx          # 카테고리 의류 목록 컴포넌트
│   │       ├── DressesCategory.jsx              # 원피스 카테고리 컴포넌트
│   │       ├── OuterwearCategory.jsx            # 아우터 카테고리 컴포넌트
│   │       ├── RecommendedCategory.jsx          # 추천 카테고리 컴포넌트
│   │       ├── ShoesCategory.jsx                # 신발 카테고리 컴포넌트
│   │       └── TopsCategory.jsx                 # 상의 카테고리 컴포넌트
│   ├── Chat                                     # 채팅 관련 페이지
│   │   ├── ChatPage.jsx                         # 채팅방 목록 페이지
│   │   └── ChatRoomPage.jsx                     # 개별 1:1 채팅방 페이지
│   ├── Closet                                   # 옷장 관련 페이지
│   │   ├── Closet.jsx                           # 내 옷장 메인 페이지 (등록된 옷 확인)
│   │   ├── components                           # 옷장 페이지 내부 컴포넌트
│   │   │   └── ClosetTab.jsx                    # 옷장 탭 컴포넌트
│   │   └── FittingRoomPage.jsx                  # 가상 피팅룸 페이지 (AI 피팅 실행)
│   ├── LoadingPage.jsx                          # 로딩 화면 페이지
│   ├── MainPage                                 # 메인화면 페이지
│   │   ├── components                           # 메인화면 내부 컴포넌트
│   │   │   ├── AdSection.jsx                    # 광고 섹션
│   │   │   ├── MainNavBar.jsx                   # 메인 상단 네비게이션바
│   │   │   ├── NewTab.jsx                       # 신상품 탭 컨텐츠
│   │   │   ├── PopularRankingSection.jsx        # 인기 랭킹 섹션
│   │   │   ├── PopularTab.jsx                   # 인기 상품 탭 컨텐츠
│   │   │   ├── ProductCard.jsx                  # 상품 카드 컴포넌트 (썸네일, 가격 등)
│   │   │   ├── RecommendTab.jsx                 # 추천 상품 탭 컨텐츠
│   │   │   ├── SaleTab.jsx                      # 세일 상품 탭 컨텐츠
│   │   │   ├── SearchBar.jsx                    # 검색바 컴포넌트
│   │   │   └── WelcomeModal.jsx                 # 환영 모달 컴포넌트
│   │   └── MainPage.jsx                         # 메인 페이지 진입점
│   ├── map                                      # 지도 관련 페이지
│   │   ├── LocationSearchModal.jsx              # 위치 검색 모달
│   │   ├── MapPage.jsx                          # 지도 페이지 (내 주변 상품 찾기)
│   │   └── useKakaoLoader.jsx                   # 카카오맵 로더 훅
│   ├── MyPage                                   # 마이페이지
│   │   ├── AccountManagePage.jsx                # 계정 관리 페이지
│   │   ├── BodyInfoPage.jsx                     # 체형 정보 관리 페이지
│   │   ├── ChatbotPage.jsx                      # 챗봇 상담 페이지
│   │   ├── components                           # 마이페이지 내부 컴포넌트
│   │   │   ├── CleanTransactionModal.jsx        # 클린 거래 안내 모달
│   │   │   ├── HistoryPageLayout.jsx            # 내역 페이지 레이아웃
│   │   │   ├── PurchaseHistoryList.jsx          # 구매 내역 리스트
│   │   │   ├── PurchaseHistoryTab.jsx           # 구매 내역 탭
│   │   │   ├── ReviewModal.jsx                  # 리뷰 작성 모달
│   │   │   ├── SalesHistoryList.jsx             # 판매 내역 리스트
│   │   │   └── SalesHistoryTab.jsx              # 판매 내역 탭
│   │   ├── LeafManagePage.jsx                   # 리프(포인트) 관리 페이지
│   │   ├── MyPage.jsx                           # 마이페이지 메인 화면
│   │   ├── ProfileEditPage.jsx                  # 프로필 편집 페이지
│   │   ├── PurchaseHistoryPage.jsx              # 구매 내역 전체 페이지
│   │   ├── QuizPage                             # 퀴즈 관련 페이지 폴더
│   │   │   ├── QuizPage.jsx                     # 퀴즈 메인 페이지
│   │   │   └── QuizQuestionPage.jsx             # 퀴즈 문제 풀이 페이지
│   │   ├── SalesHistoryPage.jsx                 # 판매 내역 전체 페이지
│   │   ├── SellPage                             # 상품 판매 등록 폴더
│   │   │   ├── components                       # 판매 페이지 내부 컴포넌트
│   │   │   │   ├── BasicInfoSection.jsx         # 기본 정보 입력 섹션
│   │   │   │   ├── DatePickerModal.jsx          # 날짜 선택 모달
│   │   │   │   ├── DirectTransactionSection.jsx # 직거래 설정 섹션
│   │   │   │   ├── PhotoUploadSection.jsx       # 사진 업로드 섹션
│   │   │   │   ├── PriceSection.jsx             # 가격 설정 섹션
│   │   │   │   ├── SizeSection.jsx              # 사이즈 설정 섹션
│   │   │   │   ├── SpecialSaleSection.jsx       # 특가 설정 섹션
│   │   │   │   ├── StyleSection.jsx             # 스타일 태그 설정 섹션
│   │   │   │   └── VirtualFittingSection.jsx    # 가상피팅 허용 설정
│   │   │   ├── EditSellPage.jsx                 # 판매글 수정 페이지
│   │   │   └── SellPage.jsx                     # 판매글 등록 페이지
│   │   └── WithdrawalPage.jsx                   # 회원 탈퇴 페이지
│   ├── Payment                                  # 결제 관련 페이지
│   │   └── PaymentPage.jsx                      # 결제 진행 페이지
│   ├── ProductDetailPage                        # 상품 상세 페이지
│   │   ├── components                           # 상세 페이지 내부 컴포넌트
│   │   │   ├── ProductActionButtons.jsx         # 구매/채팅 버튼
│   │   │   ├── ProductDescription.jsx           # 상품 상세 설명
│   │   │   ├── ProductDetailHeader.jsx          # 상세 페이지 헤더
│   │   │   ├── ProductImageCarousel.jsx         # 상품 이미지 슬라이더
│   │   │   ├── ProductInfoSection.jsx           # 상품 정보 섹션
│   │   │   ├── ProductSizeSection.jsx           # 실측 사이즈 섹션
│   │   │   └── SellerInfoBox.jsx                # 판매자 정보 박스
│   │   └── ProductDetailPage.jsx                # 상품 상세 페이지 메인
│   ├── SearchPage                               # 검색 관련 페이지
│   │   ├── components                           # 검색 페이지 내부 컴포넌트
│   │   │   ├── PriceFilterDropdown.jsx          # 가격 필터 
│   │   │   ├── RegionFilterDropdown.jsx         # 지역 필터
│   │   │   └── StyleFilterDropdown.jsx          # 스타일 필터
│   │   └── SearchPage.jsx                       # 검색 결과 페이지
│   └── signup                                   # 회원가입 관련 페이지
│       ├── components                           # 회원가입 내부 컴포넌트
│       │   ├── BirthDateSelector.css            # 생년월일 선택 스타일
│       │   ├── BirthDateSelector.jsx            # 생년월일 선택 컴포넌트
│       │   ├── GenderSelector.css               # 성별 선택 스타일
│       │   ├── GenderSelector.jsx               # 성별 선택 컴포넌트
│       │   ├── InputWithCheckButton.css         # 중복확인 버튼 포함 입력창 스타일
│       │   ├── InputWithCheckButton.jsx         # 중복확인 버튼 포함 입력창
│       │   ├── LabeledInput.css                 # 라벨 포함 입력창 스타일
│       │   ├── LabeledInput.jsx                 # 라벨 포함 입력창
│       │   ├── PasswordFields.css               # 비밀번호 입력 필드 스타일
│       │   └── PasswordFields.jsx               # 비밀번호 입력 필드
│       ├── SignupPage.jsx                       # 회원가입 메인 페이지
│       ├── SignupStep1.css                      # 단계1 스타일
│       ├── SignupStep1.jsx                      # 단계1 (약관동의)
│       ├── SignupStep2.css                      # 단계2 스타일
│       ├── SignupStep2.jsx                      # 단계2 (정보입력)
│       ├── SignupStep3.css                      # 단계3 스타일
│       ├── SignupStep3.jsx                      # 단계3 (완료)
│       ├── styles                               # 회원가입 공통 스타일
│       │   └── common.css                       # 공통 CSS
│       ├── TermsDetailPage.css                  # 약관 상세 스타일
│       ├── TermsDetailPage.jsx                  # 약관 상세 내용 페이지
│       ├── TermsPage.css                        # 약관 목록 스타일
│       └── TermsPage.jsx                        # 약관 목록 페이지
├── reducers                                     # Redux Reducer 모음
│   ├── auth.js                                  # 인증 관련 리듀서
│   ├── counter.js                               # 카운터 리듀서 (예제용)
│   └── index.js                                 # 루트 리듀서 결합
├── store.js                                     # Redux Store 설정 파일
├── styles                                       # 스타일 관련 폴더
│   └── global.css                               # 전역 CSS 파일
└── utils                                        # 유틸리티 함수 폴더
    ├── formatters.js                            # 날짜/금액 포맷팅 함수
    ├── imageCompression.js                      # 이미지 압축 유틸리티
    └── imageUtils.js                            # 이미지 처리 관련 함수

🚀 Start

1. Requirements

Node.js 18+
npm 9+

2. Install

$ npm install

Copy your local environment

.env 파일을 생성하고 필요한 환경 변수를 설정하세요.

VITE_API_URL=your_api_url
VITE_KAKAO_API_KEY=your_kakao_key
...

To run the project locally:

$ npm run dev

📚 Documentation (Developer Docs)

👨‍💻 How to contribute

Fork the Project
Create your Feature Branch (git checkout -b feat/AmazingFeature)
Commit your Changes (git commit -m 'feat: some AmazingFeature')
Push to the Branch (git push origin feat/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

💻 Open-Source Software (OSS)

이 프로젝트는 핵심 기능을 구현하기 위해 다음과 같은 오픈소스 라이브러리와 패키지들을 활용하고 있습니다:

Category	Package(s)	Description
Core Framework	`react`, `react-dom`, `vite`	웹 인터페이스 구축 및 고성능 빌드 환경 제공
State Management	`redux-toolkit`, `react-redux`	전역 상태 관리 및 효율적인 데이터 흐름 제어
Data Fetching	`react-query`, `axios`	서버 데이터 페칭, 캐싱 및 비동기 HTTP 통신
Real-time Comm.	`stompjs`, `sockjs-client`	웹소켓 기반의 실시간 채팅 기능 구현
Routing	`react-router-dom`	선언적 라우팅을 통한 페이지 간 이동 관리
Map & Location	`react-kakao-maps-sdk`	카카오맵 API 연동을 통한 지도 기반 거래 정보 제공
UI Components	`react-icons`, `sweetalert2`, `react-hot-toast`	아이콘 시스템 및 스냅백 알림/모달 UI 제공
UI & UX	`react-confetti`, `react-day-picker`, `react-markdown`	대화형 애니메이션, 날짜 선택 및 마크다운 렌더링 지원
Utilities	`browser-image-compression`	이미지 업로드 최적화를 위한 브라우저 단 이미지 압축
Styling	`tailwindcss`, `postcss`, `autoprefixer`	유틸리티 퍼스트 프레임워크를 이용한 현대적인 디자인 구현
Development	`eslint`, `globals`	코드 품질 유지 및 일관된 코딩 컨벤션 적용

📝 Questions or Support

문의사항은 Issues에 등록해주시거나 leejuhan0527@gmail.com으로 이메일을 보내주세요.

Name		Name	Last commit message	Last commit date
Latest commit History 321 Commits
.github		.github
.idea		.idea
public/fonts		public/fonts
src		src
.DS_Store		.DS_Store
.coderabbit.yaml		.coderabbit.yaml
.editorconfig		.editorconfig
.gitignore		.gitignore
CLOUDFRONT_SETUP.md		CLOUDFRONT_SETUP.md
README.md		README.md
eslint.config.js		eslint.config.js
image.png		image.png
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vite.config.js		vite.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

NET ZERO-FitFit_FE

🎯 Goal

✨ Motivation

🔑 Key Features

📌 Supported Notices

👥 Contributors

📱 Platforms

📂 Project structure

🚀 Start

1. Requirements

2. Install

Copy your local environment

📚 Documentation (Developer Docs)

👨‍💻 How to contribute

📄 License

💻 Open-Source Software (OSS)

📝 Questions or Support

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

NET ZERO-FitFit_FE

🎯 Goal

✨ Motivation

🔑 Key Features

📌 Supported Notices

👥 Contributors

📱 Platforms

📂 Project structure

🚀 Start

1. Requirements

2. Install

Copy your local environment

📚 Documentation (Developer Docs)

👨‍💻 How to contribute

📄 License

💻 Open-Source Software (OSS)

📝 Questions or Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages