Memento Pick - AI 여행 기념품 생성 웹 애플리케이션

"모든 여행이 작품이 되는 경험"

10X-THON 2025 해커톤 프로젝트 - Frontend

AI가 여행 사진을 분석하고 예술 작품으로 변환하는 기념품 생성 서비스의 웹 인터페이스입니다.

📋 목차

• 프로젝트 개요
• 핵심 기능
• 기술 스택
• 시작하기
• 프로젝트 구조
• 개발 가이드
• API 연동
• 문서

🎯 프로젝트 개요

서비스 컨셉

사용자가 여행 사진을 업로드하면 AI가 분석하여 맞춤형 기념품 디자인을 생성합니다:

• 고품질 상품 사진과 사용자 사진 결합
• AI 기반 스타일 추천
• 다양한 제품 타입 (포스터, 포토북, 달력 등)

사용자 흐름

1. 이미지 업로드: 여행 사진 업로드 (0~10장)
2. 스타일 선택: AI 추천 또는 직접 선택
3. 제품 타입 선택: 포스터, 포토북, 달력 등
4. AI 생성: 실시간 진행 상태 확인
5. 결과 확인: 다운로드 및 공유

🎨 핵심 기능

1. 이미지 업로드

• ✅ 드래그 앤 드롭 지원
• ✅ 다중 이미지 업로드 (최대 10장)
• ✅ 이미지 프리뷰 및 삭제
• ✅ 파일 크기/형식 검증

2. 스타일 옵션 (6가지)

• ANIMATION: 애니메이션 스타일
• REALISTIC: 실사 스타일
• CARTOON: 카툰 스타일
• WATERCOLOR: 수채화 스타일
• OIL_PAINTING: 유화 스타일
• SKETCH: 스케치 스타일

3. 제품 타입 (5가지)

• CALENDAR: 달력
• PHOTOBOOK: 포토북
• POSTER: 포스터
• POSTCARD: 엽서
• THREE_D_PRINT: 3D 프린팅 도면

🛠 기술 스택

Frontend Framework

• Next.js: 13.5.6 (App Router)
• React: 18.2.0
• TypeScript: 5.2.2

Styling

• Tailwind CSS: 반응형 디자인

Development Tools

• ESLint: 코드 품질 관리
• Prettier: 코드 포맷팅

Runtime

• Node.js: 21.7.1
• npm: 10.5.0

🚀 시작하기

사전 요구사항

• Node.js 21.7.1+
• npm 10.5.0+
• Memento API 서버 실행 중 (http://localhost:9998)

설치 및 실행

1. 의존성 설치

   cd memento-pick
   npm install

2. 환경 변수 설정

   # .env.local 파일 생성
   echo "NEXT_PUBLIC_API_URL=http://localhost:9998/api/v1" > .env.local

3. 개발 서버 실행

   npm run dev

4. 브라우저 접속

   http://localhost:3000
   

📁 프로젝트 구조

memento-pick/
├── docs/                       # 문서
│   ├── PROJECT.md
│   ├── DEVELOPMENT.md
│   └── CHANGELOG.md
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/             # React 컴포넌트
│   │   ├── ui/
│   │   ├── features/
│   │   └── layout/
│   ├── hooks/                  # Custom Hooks
│   ├── services/               # API 서비스
│   ├── types/                  # TypeScript 타입
│   └── utils/                  # 유틸리티
├── public/                     # 정적 파일
└── package.json

🔧 개발 가이드

개발 워크플로우

1. 코드 작성
2. 검증 (필수!)

   npm run lint:fix && npx tsc --noEmit && npm run build

3. 문서화 - docs/CHANGELOG.md 업데이트
4. Git 커밋

Git 커밋 컨벤션

타입: 간결한 한 줄 설명

feat: 새로운 기능
fix: 버그 수정
refactor: 리팩토링
docs: 문서 변경
style: 코드 포맷팅

상세 가이드: docs/DEVELOPMENT.md

📡 API 연동

• Base URL: http://localhost:9998/api/v1
• Backend: ../memento

주요 API

• POST /souvenirs - 기념품 생성
• GET /souvenirs/{id} - 기념품 조회
• GET /souvenirs?userId={userId} - 목록 조회

📚 문서

• PROJECT.md - 프로젝트 개요
• DEVELOPMENT.md - 개발 가이드
• CHANGELOG.md - 변경 이력

🚧 현재 상태

✅ 완료

• 프로젝트 초기 설정
• 문서 구조 생성

📋 향후 계획

• UI 프레임워크 선정
• 페이지 구조 설계
• 컴포넌트 개발
• API 연동
• 반응형 디자인

📄 라이선스

10X-THON 2025 해커톤 프로젝트

---

Backend API: Memento API "모든 여행이 작품이 되는 야놀자" 🎨