Next.js React TypeScript Tailwind CSS

백엔드: https://github.com/prgrms-web-devcourse-final-project/web6_8_zoopzoop_be
확장 프로그램: https://github.com/prgrms-web-devcourse-final-project/WEB5_6_ZOOPS_TENSION_FE
데모 영상: https://youtu.be/8ofrx60MaL4

📖 프로젝트 소개

🎯 주요 가치

🧩 핵심 기능

🧭 크롬 확장 프로그램 — 웹에서 즉시 저장

확장-프로그램

📁 아카이브 — 저장과 정리의 중심

📰 뉴스 페이지 — AI 추천 & 맞춤 탐색

👥 팀 스페이스 — 함께 아이디어를 확장하는 공간

🎨 플로우 에디터 — 생각의 흐름을 시각화

🔐 소셜 인증 — 안전하고 간편한 로그인

🛠 기술 스택 & 선택 이유

Frontend Framework

Realtime & Flow

State & Data

UI & Styling

Developer Experience

🚀 빠른 시작

사전 요구사항

설치 및 실행

# 1. 저장소 클론
git clone https://github.com/your-username/zoopzoop.git
cd zoopzoop
# 2. 의존성 설치
npm install
# 3. 환경 변수 설정
cp .env.example .env.local
# 4. 개발 서버 실행
npm run dev

⚙️ 환경 변수

# 백엔드 API 엔드포인트
API_URL=https://api.example.com
# Liveblocks 서버 키 (서버 전용)
NEXT_LIVEBLOCKS_SECRET_KEY=sk_liveblocks_xxx

📦 사용 가능한 스크립트

npm run dev # 개발 서버 실행 (Turbopack)
npm run build # 프로덕션 빌드
npm run start # 프로덕션 서버 시작
npm run lint # ESLint 검사
npm run format # Prettier 포맷 적용
npm run storybook # Storybook 서버 실행
npm run build-storybook # Storybook 정적 빌드

📁 폴더 구조 (Feature-Sliced Design)

src/
├── app/ # Next.js App Router, 전역 Provider
├── features/ # 사용자 액션 단위 (로그인, 업로드 등)
├── entities/ # 도메인 모델, 상태, 타입 (User, Archive, Space 등)
├── widgets/ # 독립 UI 블록 (Header, Sidebar 등)
└── shared/ # 공용 컴포넌트, 유틸, 타입, 라이브러리

ZoopZoop — 웹 지식의 흐름을 기록하고, 팀과 함께 발전시키는 공간 🧠✨