# 연철s 포트폴리오 어드민

개인 포트폴리오 웹사이트를 관리하기 위한 관리자 대시보드입니다. Next.js와 VisActor를 활용하여 현대적이고 직관적인 인터페이스를 제공합니다.

## 기능

- 📊 **포트폴리오 관리** - 프로젝트, 기술 스택, 경력 등 포트폴리오 콘텐츠 관리
- 📝 **콘텐츠 에디터** - 마크다운 기반의 풍부한 텍스트 에디터
- 🌗 **다크 모드** - 시스템 환경설정을 지원하는 다크/라이트 모드
- 📱 **반응형 디자인** - 모든 디바이스에서 사용 가능
- 🔒 **인증 시스템** - 관리자 로그인
- 📈 **데이터 시각화** - 포트폴리오 방문자 통계 및 분석

## 기술 스택

- [Next.js 15.0.1](https://nextjs.org/) - React 프레임워크
- [React 19.0.0-rc](https://react.dev/) - UI 라이브러리
- [TypeScript 5.5.4](https://www.typescriptlang.org/) - 타입 안정성
- [Tailwind CSS 3.4.1](https://tailwindcss.com/) - 스타일링
- [VisActor 1.12.10](https://visactor.io/) - 데이터 시각화
- [Supabase 2.49.4](https://supabase.com/) - 백엔드 및 데이터베이스
- [AWS S3 SDK 3.812.0](https://aws.amazon.com/s3/) - 파일 스토리지
- [React Hook Form 7.56.4](https://react-hook-form.com/) - 폼 관리
- [SWR 2.3.3](https://swr.vercel.app/) - 데이터 페칭
- [Jotai 2.10.1](https://jotai.org/) - 상태 관리
- [React Markdown 10.1.0](https://github.com/remarkjs/react-markdown) - 마크다운 렌더링
- [Next Themes 0.3.0](https://github.com/pacocoursey/next-themes) - 테마 관리
- [React Hot Toast 2.5.2](https://react-hot-toast.com/) - 토스트 알림
- [Radix UI 2.1.1](https://www.radix-ui.com/) - 접근성 컴포넌트
- [Lucide React 0.436.0](https://lucide.dev/) - 아이콘
- [Date-fns 3.6.0](https://date-fns.org/) - 날짜 유틸리티

## 시작하기

1. 저장소를 클론합니다

```bash
git clone https://github.com/your-username/portfolio-admin.git
cd portfolio-admin
```

2. 의존성을 설치합니다

```bash
pnpm install
```

3. 환경 변수를 설정합니다

```bash
cp .env.example .env.local
```

4. 개발 서버를 실행합니다

```bash
pnpm dev
```

5. 브라우저에서 [http://localhost:3000](http://localhost:3000)을 열어 확인합니다.

## 프로젝트 구조

```bash
src/
├── app/                    # Next.js 앱 라우터
│   ├── (auth)/            # 인증 관련 페이지
│   ├── (dashboard)/       # 대시보드 페이지
│   └── api/               # API 라우트
├── components/            # React 컴포넌트
│   ├── dashboard/        # 대시보드 컴포넌트
│   ├── editor/          # 에디터 컴포넌트
│   ├── forms/           # 폼 컴포넌트
│   └── ui/              # UI 컴포넌트
├── lib/                  # 유틸리티 함수
├── styles/              # 전역 스타일
└── types/               # TypeScript 타입
```

## 주요 기능 상세

### 포트폴리오 관리

- 프로젝트 CRUD 작업
- 마크다운 콘텐츠 미리보기
- 프로젝트 상태 관리
- 프로젝트 이미지 업로드
- 기술 스택 관리

### 콘텐츠 에디터

- 마크다운 지원
- 이미지 업로드
- 코드 하이라이팅
- 실시간 미리보기

### 데이터 시각화

- 방문자 통계
- 페이지별 조회수
- 사용자 행동 분석
- 트래픽 소스 분석

## 라이선스

이 프로젝트는 MIT 라이선스 하에 있습니다 - 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세요.


제가 작업헀던 내용을 정리하기 위해 제작한 개인 포트폴리오 사이트입니다.

Next.js

React.js

TypeScript

TailwindCSS

Node.js

JavaScript

supabase

포트폴리오 프로젝트

# Dreamweaver-AI 프로젝트 개요

## 프로젝트 소개

Dreamweaver-AI는 사용자가 입력한 키워드(주인공, 친구, 배경, 교훈, 그림 스타일)를 바탕으로 AI가 어린이 그림책 스토리를 생성하고, 선택적으로 삽화를 생성해 책 형태로 보여주는 웹 애플리케이션입니다.

생성된 결과는 공유 링크로 저장하고 다시 열람할 수 있으며, 마지막 공유본은 로컬 스토리지 fallback으로도 확인할 수 있습니다.

## 기술 스택

### Frontend

- `Next.js 15` (App Router)
- `React 19`
- `TypeScript`
- `Tailwind CSS v4` + `globals.css` 커스텀 테마 변수

### Backend/API (Next.js Route Handlers)

- `zod` 기반 요청/응답 검증
- `ReadableStream + SSE` 방식의 스트리밍 응답
- 외부 AI API 연동
  - 스토리 생성/추천: `Groq API`
  - 이미지 생성: `OpenAI Images API`

### Data/Storage

- `Supabase`
  - 공유 스토리 메타/본문 저장 (`storybook_shares`)
  - 삽화 업로드 및 공개 URL 제공 (`storybook-images` storage bucket)
  - 조회수 증가 RPC 사용 (`increment_share_view_count`)

## 핵심 기능

### 1) AI 그림책 생성

- 입력값: 주인공, 친구, 배경, 교훈, 스타일, 삽화 생성 여부
- `/api/generate`에서 스토리 생성 후 SSE로 텍스트를 점진 전송
- 클라이언트는 `story_delta` 이벤트를 받아 타이핑 애니메이션처럼 렌더링
- 삽화 옵션 활성화 시 스토리 생성 후 이미지 생성 단계 진행

### 2) 추천 후 즉시 생성 플로우

- `/api/recommend`에서 AI가 입력 필드를 추천
- 추천값을 폼에 반영한 뒤 바로 생성 API를 호출해 원클릭 생성 UX 제공
- 비정상 응답 대비 fallback 값 내장

### 3) 책 형태 뷰어 UX

- `BookViewer` 컴포넌트에서 표지/본문/뒷표지 구조로 렌더링
- 페이지 넘김 애니메이션(앞/뒤 방향) 제공
- 본문을 문단 단위로 분리하고 페이지 길이에 맞춰 자동 페이징

### 4) 공유/재열람

- 공유 시 해시 기반 ID 생성 후 `/api/share/[id]`에 저장
- 이미지가 data URL이면 Supabase Storage에 업로드 후 공개 URL로 치환
- `/share?id=...`에서 공유본 조회, 조회수 증가 처리
- 서버 조회 실패 시 localStorage fallback으로 복구 시도

### 5) 안정성 및 품질 보강

- 한글 중심 입력/출력 정규화 및 길이 제한
- JSON 파싱 실패 시 보조 추출/복구 로직 제공
- API 키 누락, 외부 API 실패, 이미지 생성 실패 등 예외 처리

## 주요 API 엔드포인트

- `POST /api/generate`: 스토리/삽화 생성 (SSE)
- `POST /api/recommend`: 입력 추천값 생성
- `POST /api/share/[id]`: 공유 데이터 저장
- `GET /api/share/[id]`: 공유 데이터 조회 및 view count 증가

## 실행 스크립트

- `pnpm run dev` : 개발 서버 실행
- `pnpm run build`: 프로덕션 빌드
- `pnpm run start`: 프로덕션 서버 실행
- `pnpm run lint`: 린트 실행

## 환경 변수(요약)

실행 시 아래 계열 변수가 필요합니다.

- Groq: `GROQ_API_KEY`, `GROQ_MODEL`, `GROQ_RECOMMEND_MODEL`
- OpenAI: `OPENAI_API_KEY`, `OPENAI_IMAGE_MODEL`, `OPENAI_IMAGE_SIZE`, `OPENAI_IMAGE_TIMEOUT_MS`
- Supabase: `SUPABASE_URL`, `SUPABASE_ANON_KEY`, `SUPABASE_SERVICE_ROLE_KEY`

프로젝트 운영 환경에 따라 일부 변수는 선택적으로 사용됩니다.


AI 로 만든 나만의 동화책을 공유해보세요!

성 연 철

#supabase