📘프로젝트 소개

-  사용자가 책 커버를 직접 생성하고 수정할 수 있는 웹 기반 북 커버 제작 서비스입니다.
-  로그인 후 책 목록을 확인하고, 북 커버 생성·수정·상세 확인까지 모든 과정을 웹에서 처리할 수 있습니다.
-  Next.js · TypeScript · Tailwind · MUI로 제작되었습니다.

🚩서비스 핵심 가치

• 이 서비스는 이야기가 가진 감정과 분위기를 시각적인 언어로 바꾸어, 누구나 자신의 세계를 아름다운 커버로 표현할 수 있게 합니다.
• 복잡한 디자인 도구 없이도 스토리만으로 감각적인 추상 그래픽이 탄생하며, 창작자가 작품과 더 깊이 연결되는 경험을 제공합니다.

---

🔗 데모 링크

배포 URL: 배포 주소 입력하세요. (배포 후 링크를 입력하세요)

---

🚀 기술 스택 (Tech Stack)

✨ ✨

• Framework: Next.js (App Router)
• Language: TypeScript
• UI: Tailwind CSS, MUI (Material UI)
• Package Manager: npm

---

📄 주요 페이지 (Pages)

1. 🔐 로그인 페이지

• 사용자 인증 기능 제공
• 로그인 후 책 목록 페이지로 이동

2. 📚 책 목록 페이지

• 생성된 책 목록 조회
• 책 상세 페이지로 이동 가능
• 새 책 커버 생성 버튼 제공

3. 🎨 책 커버 생성 페이지

• 기본 템플릿 기반 커버 생성
• 커버 스타일 선택, 제목/저자 입력
• 생성된 커버는 후보 3개 중에 1개 이미지 선택하여 저장

[LLM모델로 디자인 텍스트 가이드 요청]

4. ✏️ 책 커버 수정 페이지

• 기존 커버 데이터 불러오기
• 텍스트/색상/레이아웃 수정 가능
• 수정 후 다시 저장하거나 미리보기 가능

5. 📘 책 상세 페이지

• 책 정보 + 생성된 커버 이미지 보여줌
• 수정 페이지 이동 및 삭제 버튼 제공

---

⭐우리 프롬프트의 독자적 매력

이미지 AI 모델

특징	설명
스토리 기반 추상 그래픽 변환	텍스트 → 감정 → 색감/형태로 변환하는 독창적 구조
상단 25% 공백 룰	실제 북 커버 UI에 최적화된 고유 규칙
절대 금지 요소 시스템	3D, 텍스트, 모형 출력 문제를 완전히 차단
순수 2D 추상 그래픽	즉시 출판·디자인에 쓰기 적합
장르 분위기 최우선 반영	추상적이지만 주제성 유지
사용자 요청은 ‘추상 요소’만 반영	안정적인 결과 + 사용자 커스터마이징 가능

TEXT AI 모델

특징	설명
디자인 텍스트 가이드	디자인을 요청해야 할지 막막하다면 텍스트로 가이드 받음

---

⚙️ 설치 및 실행 (Installation & Setup)

1. 저장소 클론

git clone https://github.com/NoMoreChaos/mini-4th-frontend.git
cd mini-4th-frontend

2. 패키지 설치

npm install

3. 환경 변수 설정

• .env.local파일 생성 후 아래와 같이 입력:

NEXT_PUBLIC_API_BASE_URL=
OPENAI_API_KEY=

4. 개발 서버 실행

npm run dev

🛠️ API 구조 (예시)

Method	Endpoint	Description
POST	/api/user/login	계정 로그
GET	/api/books	책 목록 조회
POST	/api/books	새 책 등록
GET	/api/books/detail	책 상세 조회
GET	/api/books/modify/{book id}	책 정보 수정
PUT	/api/books/modify/{book id}	책 정보 수정
DELETE	/api/books/delete	책 삭제

📂 프로젝트 폴더 구조

src/
├── api/
│
├── app/
│   ├── api/            # Next.js API Routes
│   ├── bookCreate/     # 책 커버 생성 페이지
│   ├── bookEdit/       # 책 커버 수정 페이지
│   ├── components/     # 재사용 가능 UI 컴포넌트
│   ├── data/           # 더미 데이터 / 정적 데이터
│   ├── detail/         # 책 상세 페이지
│   ├── login/          # 로그인 페이지
│   ├── favicon.ico
│   ├── globals.css     # 전역 스타일(Tailwind 포함)
│   ├── layout.tsx      # 공통 레이아웃 및 Provider 설정
│   ├── page.tsx        # 홈 페이지 (목록)
│   └── providers.tsx   # MUI 등 전역 Provider 모음
│
├── hooks/              # 커스텀 React Hooks
└── types/              # TypeScript 타입 정의

---

🎉우리 서비스로 인해 만나는 문제 해결점

✅ AI가 스토리 기반으로 즉시 추상 그래픽 커버를 생성하여 디자이너 의뢰 비용 없이 바로 생성 가능
✅ 누구나 전문가 수준의 추상적 북커버 시각화 가능
✅ 전용 프롬프트 규칙을 사용하여 문제를 해결(이상한 형태의 텍스트, 표지 생성)
✅ 생성 이미지, 수정 정보가 한 곳에서 관리되어 프로젝트 운영이 쉬워짐
✅ 버전 비교 어려움 -> 커버 페이지에서 여러 커버 비교 및 재수정