| 소개 | 구현 | 마치며 |
|---|---|---|
| 📖 개요 | 🎯 주요 페이지 및 기능 | 👦 팀원 |
| 💡 프로젝트 기획 | 📚 파일 구조도 | 📣 소감 |
| 🌵 빌드 환경 | 👀 산출물 | 🌱 회고 기록 |
👏 SSAFY 11기 2학기 자율 프로젝트 👏
2024.10.14 ~ 2024.11.19 (6주)
Project. Clofit (Team. FitTeam)
현대의 소비자들은 자신의 스타일과 취향에 맞는 의류를 선택하는 데 많은 시간을 투자하고 있으며, 다양한 패션 아이템을 쉽게 찾고, 적합한 스타일을 추천받고자 하는 욕구가 커지고 있습니다. 특히, 온라인 쇼핑에서는 다양한 상품을 선택할 수 있는 장점이 있지만, 실제 착용감을 확인할 수 없다는 단점이 존재합니다. 이러한 문제를 해결하기 위해, 우리는 AI 딥러닝 모델을 사용한 가상 피팅을 통해 의류의 착용감을 시각적으로 확인하여 소비자에게 차별화된 가치를 제공하는 웹애플리케이션 프로젝트를 진행하였습니다.
| FrontEnd | BackEnd | Database | Infra | AI |
|---|---|---|---|---|
| Next.js 14.2.6 | Java 21 (Amazon Corretto 21) | MySQL 8.0.37 | AWS EC2 (Ubuntu 20.04) | OOTDiffusion |
| Node.js 20 | Spring Boot 3.3.5 | Redis 7.2.1 | Nginx 1.26.2 | YoLo v8 - Deepfashion |
| TypeScript 5.6.3 | Gradle 8.10.2 | Jenkins 2.462.3 | ||
| React 18.3.1 | Spring Data JPA | Docker 27.3.1 | ||
| Zustand 5.0.1 | IntelliJ IDEA 2024.1.4 | Docker Compose 2.29.2 | ||
| Tailwind CSS | lombok | AWS S3 | ||
| JWT | ||||
| Python 3.9 | ||||
| fastAPI 0.115.4 | ||||
| selenium |
사용자가 선택한 의류에 대해 의류의 카테고리와 색상을 분류해서 사용자의 옷장에 추가해 줍니다.
수집한 의류 데이터의 사진과 정보를 볼 수 있으며 가상피팅을 진행하기 위해 필요한 옷장에 의류를 등록할 수 있습니다.
사용자가 선택한 색상을 기반으로 의류를 추천 받을 수 있습니다. 사용자가 등록한 의류의 목록을 확인 할 수 있습니다.
마이페이지에서 사용자가 좋아요를 등록한 가상피팅 사진을 확인 할 수 있습니다.
상품정보와 공개설정을 진행한 다른 사용자의 가상 피팅의 정보를 확인 할 수 있습니다. 사용자의 전신사진과 옷장에 등록한 의류사진을 기반으로 가상피팅을 진행하는 화면입니다. 최근 완성된 피팅에서 완료여부를 확인할 수 있으며 저장한 피팅 목록에 등록 할 수 있습니다.
| API명세서1 | API명세서2 |
|---|---|
![]() |
![]() |
| ERD |
|---|
![]() |
| 시스템 구조도 |
|---|
![]() |
| 1주차 스프린트 | 2주차 스프린트 | 3주차 스프린트 |
|---|---|---|
![]() |
![]() |
![]() |
| 4주차 스프린트 | 5주차 스프린트 |
|---|---|
![]() |
![]() |
📦 frontend
- 📂 .next
- 📂 .storybook
- 📂 public
- 📂 assets
- 📂 form
- 📂 login
- 📂 src
- 📂 app
- 📂 (main)
- 📂 auth
- 📂 login
- 📂 _components
- 📂 KakaoLoginButton
- 📂 NaverLoginButton
- 📂 nickname
- 📂 redirect
- 📂 create
- 📂 fonts
- 📂 test
- 📂 components
- 📂 Button
- 📂 CreateButton
- 📂 DeleteButton
- 📂 IndexButton
- 📂 LikeButton
- 📂 LogoutButton
- 📂 PaginationButton
- 📂 ReportButton
- 📂 RouteButton
- 📂 ShareButton
- 📂 VoteButton
- 📂 WordVoteButton
- 📂 Card
- 📂 Form
- 📂 Header
- 📂 Input
- 📂 SearchInput
- 📂 ValueInput
- 📂 Modal
- 📂 Skeleton
- 📂 Textarea
- 📂 context
- 📂 store
- 📂 stories
- 📂 assets
- 📂 utils
- 📂 loader
- 📂 vendor
- 📜 yarn.lock
📦 backend/memetionary
- 📂 gradle
- 📂 wrapper
- 📜 gradle-wrapper.jar
- 📜 gradle-wrapper.properties
- 📂 src
- 📂 main
- 📂 java
- 📂 com
- 📂 ssafy
- 📂 memetionary
- 📂 common
- 📂 controller
- 📂 dto
- 📂 entity
- 📂 exception
- 📂 config
- 📂 declaration
- 📂 controller
- 📂 dto
- 📂 entity
- 📂 repository
- 📂 service
- 📂 hashtag
- 📂 entity
- 📂 repository
- 📂 service
- 📂 link
- 📂 entity
- 📂 repository
- 📂 service
- 📂 member
- 📂 controller
- 📂 dto
- 📂 entity
- 📂 repository
- 📂 service
- 📂 oauth2
- 📂 domain
- 📂 dto
- 📂 filter
- 📂 handler
- 📂 repository
- 📂 service
- 📂 token
- 📂 util
- 📂 word
- 📂 controller
- 📂 dto
- 📂 entity
- 📂 repository
- 📂 service
- 📂 wordes
- 📂 controller
- 📂 document
- 📂 dto
- 📂 repository
- 📂 service
- 📂 resources
👑 강현후 (팀장/Front-End) 피팅, 상품, 옷장 페이지 |
🎀 손유진 (Front-End) 메인, 마이, 피드 페이지 |
🐲 강지우 (Back-End) 피팅AI, API 시큐리티 |
🌳 김연동 (Back-End) 유저, 모델 API 크롤링, 시큐리티 |
🧸 임 권 (Back-End) INFRA, 피드 API YOLO AI |
🦦 김성현 (Back-End) 옷장, 의류 API |
😊 강현후
😎 손유진
🍇 김성현
🏡 임 권
🥳 김연동
👶 강지우















