MiniArca-FE React Application

사진과 텍스트로 특별한 추억을 만드는 영상일기 React 애플리케이션입니다. 일기를 작성하고 미션을 완료하여 포인트를 획득한 뒤, 3D 피규어를 주문할 수 있는 종합적인 일기 서비스입니다.

<관리자> 아이디:admin123@naver.com 비번: admin123!

🎯 프로젝트 개요

주요 기능

• 사용자 인증: 회원가입, 로그인, 로그아웃 기능
• 일기 작성: 사진 업로드(최대 5장), 텍스트 작성, 기분 선택
• 달력 뷰: 월별 일기 조회, 달력 그리드 및 리스트 뷰
• 미션 시스템: 다양한 미션 완료로 포인트 획득
• 3D 피규어 스토어: 포인트로 3D 피규어 주문 및 배송 추적
• 🆕 나의 3D 캐릭터 피규어: 영상일기에서 생성된 3D 캐릭터를 실제 피규어로 주문
• 프로필 관리: 사용자 정보 수정, 통계 조회, 설정 관리
• 포인트 시스템: 일기 작성, 미션 완료로 포인트 획득

기술 스택

• Frontend: React 18.2.0, React Router DOM 6.15.0
• State Management: Context API + useReducer
• HTTP Client: Axios 1.5.0
• Date Handling: date-fns 2.30.0
• Styling: CSS3, CSS Variables, Responsive Design
• Icons: Font Awesome
• Containerization: Docker
• Orchestration: Kubernetes
• Development: Create React App

🚀 현재 완성된 기능

✅ 인증 시스템

• LoginPage: 이메일/비밀번호 로그인, 유효성 검사, 오류 처리
• SignupPage: 회원가입 폼, 비밀번호 강도 표시, 약관 동의
• AuthContext: JWT 토큰 기반 인증, 사용자 상태 관리
• ProtectedRoute: 인증이 필요한 페이지 보호

✅ 핵심 페이지들

• DashboardPage: 메인 대시보드, 통계, 최근 활동, 빠른 액션
• CreateDiaryPage: 일기 작성, 사진 업로드, 기분 선택, 실시간 미리보기
• CalendarPage: 달력 뷰, 월별 네비게이션, 일기 조회, 리스트 뷰
• MissionsPage: 활성 미션, 완료된 미션, 포인트 히스토리
• StorePage: 🆕 영상일기 3D 캐릭터 선택 및 피규어 주문 시스템
• ProfilePage: 프로필 수정, 활동 통계, 비밀번호 변경

✅ 공통 컴포넌트

• Header: 네비게이션, 사용자 메뉴, 모바일 반응형
• Footer: 서비스 링크, 연락처, 소셜 미디어
• Button: 다양한 스타일과 상태를 지원하는 재사용 가능 버튼
• LoadingSpinner: 로딩 상태 표시

✅ 유틸리티 시스템

• Validators: 이메일, 비밀번호, 사용자명 등 검증 함수
• DateUtils: date-fns 기반 날짜 처리 유틸리티
• Constants: 라우트, 오류 메시지 등 상수 관리

📱 주요 페이지 및 라우트

공개 페이지

• / - 홈페이지 (HomePage)
• /login - 로그인 페이지
• /signup - 회원가입 페이지

보호된 페이지 (인증 필요)

• /dashboard - 메인 대시보드
• /create-diary - 새 일기 작성
• /calendar - 달력 및 일기 조회
• /missions - 미션 센터
• /store - 🆕 나의 3D 캐릭터 피규어 스토어
• /profile - 사용자 프로필

🎨 UI/UX 특징

현대적인 디자인

• 그라디언트 배경: 시각적으로 매력적인 그라디언트 색상
• 글래스모피즘: 반투명 효과와 블러 처리
• 마이크로 인터랙션: 호버 효과, 애니메이션, 상태 변화
• 반응형 디자인: 모든 화면 크기에서 최적화

사용자 경험

• 직관적인 네비게이션: 명확한 메뉴 구조
• 실시간 피드백: 폼 유효성 검사, 로딩 상태
• 접근성: 키보드 네비게이션, 스크린 리더 지원
• 성능 최적화: 이미지 최적화, 코드 분할

💾 데이터 관리

RESTful Table API 연동 준비

• 사용자 관리: 회원가입, 로그인, 프로필 업데이트
• 일기 데이터: CRUD 작업, 사진 첨부, 메타데이터
• 미션 시스템: 진행 상황 추적, 포인트 지급
• 주문 관리: 피규어 주문, 배송 상태 추적

현재 목업 데이터

모든 기능이 완전히 구현되었으며, 실제 API와 연동하기 위한 구조가 준비되어 있습니다.

🛠 개발 환경 설정

필요 조건

• Node.js 16.0.0 이상
• npm 또는 yarn
• Docker

로컬 개발 서버 실행

# 의존성 설치
npm install

# 개발 서버 시작
npm start

Docker를 사용한 실행

# Docker 이미지 빌드
docker build -t miniarca-fe .

# Docker 컨테이너 실행
docker run -p 3000:3000 miniarca-fe

환경 변수

REACT_APP_API_BASE_URL=https://your-api-domain.com
REACT_APP_ENVIRONMENT=development

🚀 배포 가이드

이 프로젝트는 Docker와 Kubernetes를 사용하여 배포할 수 있도록 설정되어 있습니다.

1. Docker 이미지 빌드: Dockerfile을 사용하여 프로덕션용 React 애플리케이션 이미지를 빌드합니다.
2. Kubernetes 배포: deployment.yml 파일을 사용하여 Kubernetes 클러스터에 애플리케이션을 배포합니다.
3. 클러스터 접근: kubeconfig.yaml 파일은 Kubernetes 클러스터에 접근하기 위한 설정 파일입니다. 이 파일은 민감한 정보를 포함하고 있으므로 버전 관리에 포함해서는 안 됩니다.

📞 지원 및 문의

개발 관련 문의

• 기술적 문제나 개선 사항에 대한 문의는 프로젝트 이슈를 통해 제출해 주세요.

기능 개선 제안

• 새로운 기능이나 UI/UX 개선 아이디어는 언제든 환영합니다.

---

📋 완성된 컴포넌트 체크리스트

• ✅ SignupPage: 회원가입 폼, 비밀번호 강도 표시, 유효성 검사
• ✅ AuthPages.css: 로그인/회원가입 페이지 통합 스타일링
• ✅ DashboardPage: 대시보드 UI, 통계 카드, 최근 활동
• ✅ CreateDiaryPage: 일기 작성, 사진 업로드, 기분 선택, 미리보기
• ✅ CalendarPage: 달력 뷰, 월별 네비게이션, 일기 조회
• ✅ MissionsPage: 미션 시스템, 포인트 관리, 진행 상황 추적
• ✅ StorePage: 🆕 영상일기 3D 캐릭터 피규어 주문 시스템
• ✅ ProfilePage: 프로필 관리, 통계, 설정, 비밀번호 변경
• ✅ Footer: 서비스 정보, 링크, 연락처, 소셜 미디어

🎉 모든 주요 컴포넌트가 성공적으로 완성되었습니다!

React 애플리케이션이 완전히 작동 가능한 상태로 구현되었으며, 사용자는 회원가입부터 일기 작성, 미션 완료, 피규어 주문까지 전체 서비스를 이용할 수 있습니다.

🆕 새로운 기능: 나의 3D 캐릭터 피규어

핵심 기능

• 일기 캐릭터 선택: 영상일기에서 생성된 3D 캐릭터들을 날짜별로 조회
• 달력/리스트 뷰: 캐릭터를 달력 형태 또는 리스트 형태로 탐색
• 커스터마이징 옵션: 크기(소/중/대), 색상(원본/화이트/블랙/골드/커스텀), 소재(PLA/ABS/PETG/Resin) 선택
• 실시간 가격 계산: 선택한 옵션에 따른 포인트 가격 자동 계산
• 주문 관리: 주문 접수부터 3D 제작, 포장, 배송까지 상태 추적
• 배송 정보: 수령인 정보, 주소, 연락처, 배송 메모 입력

기술적 특징

• 반응형 디자인: 모바일, 태블릿, 데스크톱 최적화
• 모달 기반 주문: 직관적인 주문 프로세스
• 포인트 시스템 연동: 기존 포인트 시스템과 완전 통합
• 상태 관리: 주문 상태별 아이콘 및 색상 표시