옷장..난감! FE

"개인 디지털 옷장 기반 의류 및 코디 추천 서비스"
사용자의 옷장 데이터와 스타일 취향을 바탕으로 어울리는 상품과 코디를 추천합니다.

Backend Repository : AIBE5_FinalProject_Team4_BE

🗂️ Project Overview

옷장난감은 사용자가 보유한 옷과 관심 상품을 디지털 옷장에 등록하고,
옷장 데이터와 취향 데이터를 기반으로 개인화된 상품과 코디를 추천받을 수 있는 서비스입니다.
이 저장소는 위 서비스의 웹 화면과 사용자 인터랙션을 담당합니다.

개발 기간 : 2026.05.19 ~ 2026.06.26

📖 Documentation

프로젝트의 원활한 협업을 위한 가이드라인과 공식 문서입니다.
작업을 시작하기 전 Wiki와 docs 문서를 함께 확인해 주세요!

개발환경 세팅	브랜치 전략	팀 컨벤션	폴더 구조	공식 문서

📚 Stacks

구분	기술
Language	TypeScript 6.0.3
Framework	React 18.3.1
Build Tool	Vite 8.0.14
Routing	React Router 7.15.1
HTTP Client	Axios 1.16.1
Styling	Tailwind CSS 4.3.0
Runtime	Node.js 24.13.0

🛠️ Features

기능	설명
로그인 / 온보딩	사용자 인증 이후 선호 스타일과 기본 프로필을 입력하는 화면을 제공합니다.
홈 추천	취향 기반 상품 추천, 유사 상품 추천, 보유 옷 기준 추천을 화면에 표시합니다.
디지털 옷장	보유한 옷과 미보유 관심 상품을 탭으로 구분해 조회하고 관리합니다.
옷 등록	사진 기반 등록과 구매내역 기반 등록 흐름을 제공합니다.
프로필 / 스타일	사용자 정보와 선호 스타일을 확인하고 수정하는 화면을 제공합니다.
룩피드	코디 기반 게시글, 좋아요, 댓글, 저장, 팔로우 기능 화면을 제공합니다.
공통 상태 처리	로딩, 에러, 빈 상태, 이미지 skeleton 등 공통 UI 상태를 관리합니다.

🧪 Local Development

이 프로젝트는 Node.js v24.13.0을 사용합니다.

nvm install
nvm use
node -v

레포지토리를 클론한 뒤 의존성을 설치합니다.

git clone https://github.com/prgrms-aibe-devcourse/AIBE5_FinalProject_Team4_FE.git
cd AIBE5_FinalProject_Team4_FE
npm ci

환경변수 파일을 생성하고 백엔드 API 주소를 확인합니다.

cp .env.example .env.local

VITE_API_BASE_URL=http://localhost:8080

개발 서버를 실행합니다.

npm run dev

브라우저에서 아래 주소로 접속합니다.

http://localhost:5173

백엔드가 localhost:8080에서 실행 중이면 /api/* 요청이 자동으로 프록시됩니다.

📁 Project Structure

src/
├── api/            # Axios 인스턴스 및 API 호출 함수
├── assets/         # 이미지, 폰트 등 정적 자원
├── components/     # 화면 및 재사용 컴포넌트
│   └── common/     # 공통 UI 컴포넌트
├── hooks/          # 커스텀 훅
├── pages/          # 라우트별 페이지 컴포넌트
│   └── error/      # 공통 에러 페이지
├── types/          # TypeScript 공통 타입 정의
└── utils/          # 순수 유틸리티 함수

🔗 Path Alias

@/는 src/를 가리키는 절대경로 alias입니다.

// 상대경로 대신 절대경로를 사용합니다.
import Button from '@/components/common/Button';

📜 Scripts

명령어	설명
npm run dev	개발 서버 실행
npm run build	프로덕션 빌드
npm run lint	ESLint 코드 검사
npm run preview	빌드 결과물 로컬 미리보기

🔐 Environment Variables

변수명	설명	예시
VITE_API_BASE_URL	백엔드 API 주소	http://localhost:8080

VITE_ 접두사가 붙은 환경변수만 브라우저에서 접근할 수 있습니다.
민감한 정보에는 VITE_ 접두사를 사용하지 않습니다.

🦖 "Team 우주 최강 공룡" 🚀

류태우	이석민	김세준	최준영	홍가현
@taeaeuu	@seokminseok	@warcat12	@jychoi0831	@devken65
🧠 팀장	👤 팀원	👤 팀원	👤 팀원	👤 팀원