조민지의 미니홈피

TODAY 1

|

TOTAL 369

← 목록으로

Cyworld

Cyworld GitHub 저장소

개인

스택: Next.js, Typescript, TailwindCSS

🌐 Cyworld Next

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

cyworld

🔗 배포 링크

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

✨ 주요 기능

  • 프로필 사진, 미니룸

프로젝트

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

기능 구현 예정

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

🛠 기술 스택

분류기술
FrameworkNext.js 16 (App Router)
LanguageTypeScript
StylingTailwind CSS v4
Markdownreact-markdown, remark-gfm, rehype-raw
APIGitHub REST API
LintingESLint (Airbnb), Prettier
Git HooksHusky, 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 검사
프로젝트방명록