🌐 Cyworld Next

싸이월드 미니홈피 스타일로 제작한 개인 포트폴리오 웹사이트입니다.

🔗 배포 링크

https://github.com/minji105/cyworld-next

✨ 주요 기능

홈

• 프로필 사진, 미니룸

프로젝트

• 진행한 프로젝트를 카드 형태로 목록 표시
• 기술 스택 태그 기반 다중 필터링
• 프로젝트 클릭 시 GitHub README를 불러와 상세 페이지 렌더링
• GitHub 저장소 바로가기 링크

기능 구현 예정

• today/total 방문자 수
• 방명록

🛠 기술 스택

분류	기술
Framework	Next.js 16 (App Router)
Language	TypeScript
Styling	Tailwind CSS v4
Markdown	react-markdown, remark-gfm, rehype-raw
API	GitHub REST API
Linting	ESLint (Airbnb), Prettier
Git Hooks	Husky, lint-staged

📁 프로젝트 구조

src/
├── app/
│   ├── page.tsx                 # 홈 페이지
│   ├── projects/
│   │   ├── page.tsx             # 프로젝트 목록
│   │   ├── [project]/page.tsx   # 프로젝트 상세
│   │   └── _components/         # Filter, List
│   └── _components/             # Miniroom, UpdatedNews
├── components/                  # 공통 컴포넌트
├── constants/                   # 프로젝트 데이터, 링크, API 경로
├── lib/
└── utils/

🚀 로컬 실행

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

http://localhost:3000 에서 확인할 수 있습니다.

📝 스크립트

npm run dev      # Turbopack 기반 개발 서버 실행
npm run build    # 프로덕션 빌드
npm run start    # 프로덕션 서버 실행
npm run lint     # ESLint 검사