몽글몽글 상상나래 (MGMG-FRONT)

1. 프로젝트 소개

몽글몽글 상상나래는 사용자가 직접 동화의 작가가 되어 세상에 단 하나뿐인 동화책을 만들 수 있는 AI 기반 사용자 참여형 동화 생성 플랫폼입니다. 아이들의 무한한 상상력과 창의력을 인공지능 기술과 결합하여, 누구나 쉽게 자신만의 이야기를 만들고 공유하는 즐거움을 선사합니다.

2. 주요 기능

• 🎨 AI 동화 생성:

  • 단계별 UI를 통해 주인공의 이름, 성격, 외모, 배경 시대, 장르 등 동화의 핵심 요소를 직접 설정합니다.
  • 사용자가 설정한 값을 기반으로 AI가 스토리를 생성하고, 각 페이지에 맞는 삽화를 그려줍니다.

• 📖 인터랙티브 스토리:

  • 생성된 동화 속에서 사용자가 직접 다음 행동이나 대사를 선택하여 이야기를 원하는 방향으로 이끌어 나갈 수 있습니다.
  • 사용자의 선택에 따라 다양한 결말을 맞이하는 멀티 엔딩 구조를 경험할 수 있습니다.

• 📚 갤러리:

  • 나의 갤러리: 내가 만든 모든 동화책을 모아보고 언제든지 다시 읽을 수 있습니다.
  • 공개 갤러리: 다른 사용자들이 만들어 전체 공개로 설정한 멋진 동화책들을 감상할 수 있습니다.

• 👥 사용자 및 커뮤니티:

  • 회원가입/로그인: 안전한 사용자 인증을 통해 개인화된 서비스를 제공합니다.
  • 마이페이지: 내 정보를 확인하고 수정할 수 있습니다.
  • 커뮤니티: 자유롭게 글을 작성하고 다른 사용자들과 소통할 수 있는 게시판 기능을 제공합니다.

3. 기술 스택

• Core: React.js
• Routing: React Router DOM
• HTTP Client: Axios
• State Management: React Context API, React Hooks
• UI/UX: CSS, Ant Design, React-Pageflip
• Build Tool: Create React App

4. 프로젝트 구조

/src
├───api/          # Axios 인스턴스 및 API 호출 함수 관리
├───assets/       # CSS, 폰트 등 에셋
├───components/   # 재사용 가능한 UI 컴포넌트 (Header, Footer, Modal 등)
│   ├───create/   # 동화 생성 단계별 컴포넌트
│   └───...
├───constants/    # 상수 관리 (라우팅 경로, API 주소 등)
├───context/      # 전역 상태 관리 (UserContext)
├───hooks/        # 커스텀 훅 관리
├───images/       # 정적 이미지 에셋
├───pages/        # 라우팅 단위가 되는 페이지 컴포넌트
├───styles/       # 전역 스타일 및 스타일 관련 유틸
├───utils/        # 기타 유틸리티 함수
├───App.js        # 최상위 컴포넌트, 라우팅 설정
└───index.js      # 애플리케이션 진입점

5. 로컬 개발 환경 설정

사전 요구사항

• Node.js (v18.x 이상 권장)
• npm (v9.x 이상 권장)

설치 및 실행

# 1. 프로젝트 클론
# git clone [repository_url]

# 2. 프로젝트 루트 디렉토리로 이동
cd FE

# 3. 의존성 패키지 설치
npm install

# 4. 개발 서버 실행
npm start

실행 후 http://localhost:3000 에서 애플리케이션을 확인할 수 있습니다.

6. API 및 데이터 흐름

본 프로젝트는 백엔드 서버 및 AI 서버와 통신하여 동적 데이터를 처리합니다.

• 인증: 사용자가 로그인하면 서버로부터 인증 정보(쿠키 또는 토큰)를 받아 UserContext를 통해 사용자 상태를 전역적으로 관리합니다. ProtectedRoute 컴포넌트는 로그인이 필요한 페이지에 대한 접근을 제어합니다.
• 동화 생성:
  1. 사용자가 Create 페이지에서 동화 설정을 완료하고 '동화 만들기'를 클릭합니다.
  2. handleStorySubmit 함수가 axios를 통해 백엔드 서버의 /stories 엔드포인트로 동화 설정 데이터를 POST 요청으로 전송합니다.
  3. 요청 성공 시, 백엔드로부터 받은 storyId와 초기 페이지 데이터를 가지고 /interactive-story로 이동하여 동화를 시작합니다.
• 커뮤니티:
  • 게시글 목록은 /articles 엔드포인트로 GET 요청하여 가져옵니다.
  • 새 글 작성은 /articles 엔드포인트로 POST 요청하여 생성합니다.

참고:

1. 모든 API 요청의 기본 URL은 .env 파일의 REACT_APP_AI_API 환경 변수를 통해 설정됩니다.
2. 모든 API 요청의 기본 URL은 .env 파일의 REACT_APP_BACK_IP 환경 변수를 통해 설정됩니다.