1. 프로젝트 소개 (Project Overview)

프로젝트 이름: Moonyubi (문유비) 해당 프로젝트는 개발 공부 기록과 포트폴리오를 한 곳에 관리하기 위해 제작한 프로젝트입니다.

2. 기술 스택 (Tech Stack)

프레임워크 : Next.js (App Router) 언어 : TypeScript 데이터베이스 : Supabase (PostgreSQL 기반), (DB + 인증) 상태관리 : Zustand 스타일 : Tailwind CSS Markdown (글 작성 포맷)

3. 기능 (Features)

• Markdown 기반 글쓰기: 코드 블록, 제목, 리스트 등 지원
• Supabase 연동: 데이터베이스에 글 저장 및 불러오기
• 다크모드 / 라이트모드 지원
• 즐겨찾기 / 태그 기능 (예정)
• 상태 관리: Zustand로 가볍게 전역 상태 관리

3. 프로젝트 구조 (Folder Structure)

src/
 ├─ app/
 │   ├─ layout.tsx     # 전체 공통 레이아웃
 │   ├─ page.tsx       # 메인 페이지
 │   └─ globals.css    # 전역 CSS
 ├─ components/
 │   ├─ Header.tsx     # 헤더 (다크모드 토글 버튼 있음)
 │   ├─ Footer.tsx     # 푸터
 │   └─ ThemeToggle.tsx # 다크/라이트 전환 버튼
 └─ store/
     └─ useThemeStore.ts # Zustand 상태 관리

4. 라이브러리 설치

npm install zustand

npm install @supabase/supabase-js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm install framer-motion

npm install lucide-react

npm install antd @ant-design/icons