NET ZERO-FitFit은 지속 가능한 패션 소비를 장려하고, 사용자들이 자신의 체형에 맞는 옷을 가상으로 입어봄으로써 불필요한 의류 구매와 반품을 줄이는 것을 목표로 합니다. 탄소 배출 저감(Net Zero)에 기여하는 친환경 패션 플랫폼을 지향합니다.
패션 산업은 전 세계 탄소 배출의 큰 비중을 차지합니다. 특히 온라인 쇼핑의 활성화로 인해 사이즈 미스 등으로 인한 반품과 폐기가 환경에 악영향을 미치고 있습니다. 저희는 AI 가상 피팅 기술과 중고 거래 활성화, **친환경 보상 시스템(Leaf)**을 결합하여 재미있고 가치 있는 소비 경험을 제공하고자 합니다.
- 👗 AI 가상 피팅룸: 내 전신 사진과 옷 이미지를 합성하여 가상으로 옷을 입어볼 수 있습니다.
- 📍 지도 기반 중고 거래: 내 주변의 사용자들과 안전하게 중고 의류를 거래할 수 있습니다.
- 💬 실시간 채팅: 판매자와 구매자 간의 간편한 소통을 지원합니다.
- 🤖 챗봇 서비스: 서비스 이용 안내 및 궁금한 점을 빠르게 해결해줍니다.
- 🌿 친환경 포인트(Leaf): 퀴즈 풀기, 중고 거래 등으로 포인트를 모아 혜택을 받을 수 있습니다.
- 🔎 상품 검색 및 카테고리: 원하는 옷을 쉽고 빠르게 찾을 수 있습니다.
- 본 프로젝트는 Chrome 브라우저 및 모바일 환경에 최적화되어 있습니다.
- 일부 기능(AI 피팅)은 서버 상태에 따라 지연될 수 있습니다.
| 이름 | 역할 |
|---|---|
| 이주한 | FE Developer |
| 박해원 | BE Developer |
| 박은경 | BE Developer |
| 심현민 | BE Developer & AI Developer |
| 유현지 | AI Developer |
| 최서연 | AI Developer |
(팀원 정보를 수정해주세요)
| Web | Mobile Web |
|---|---|
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 # 이미지 처리 관련 함수
- Node.js 18+
- npm 9+
$ npm install.env 파일을 생성하고 필요한 환경 변수를 설정하세요.
VITE_API_URL=your_api_url
VITE_KAKAO_API_KEY=your_kakao_key
...To run the project locally:
$ npm run dev- 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
This project is licensed under the MIT License - see the LICENSE file for details.
이 프로젝트는 핵심 기능을 구현하기 위해 다음과 같은 오픈소스 라이브러리와 패키지들을 활용하고 있습니다:
| 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 |
코드 품질 유지 및 일관된 코딩 컨벤션 적용 |
문의사항은 Issues에 등록해주시거나 leejuhan0527@gmail.com으로 이메일을 보내주세요.