과목: 나노랩심화(전공 심화)
주제: 바이브 코딩 — 자유주제 개요: Lovable로 초기 사이트 생성 → GitHub에 연결 → 로컬 클론 후 TypeScript/React 기반으로 구조/디자인/컴포넌트 직접 커스터마이징
- 목적: 포트폴리오
- 구성: Mini Profile, About, Research Philosophy, Why CVLAB, Interests, Goal, Technical Stack, Featured/Other Projects, Contact
- 방식: Lovable 템플릿을 기반으로 코드 레벨 수정(레이아웃/타이포/컴포넌트/아이콘/토스트/반응형)
- 반응형 랜딩(영웅 섹션, 네비게이션, 프로젝트 카드, 스킬 소개)
- 섹션 단위 컴포넌트화(About/Projects/Skills/Contact)
- UI 프리미티브(shadcn/ui) 대량 포함: 버튼, 카드, 다이얼로그, 드로어, 탭, 토스트 등
- 훅: 모바일 판별(use-mobile), 토스트(use-toast)
- 에셋 관리: 프로필/배경 이미지(src/assets), favicon/robots(public)
| Frontend |
|
| Bundler |
|
| Styling |
|
| Quality |
|
| Package |
|
| Deploy |
|
# 최상단
.
├── deploy.yml # 배포 워크플로 파일(권장 위치는 .github/workflows/deploy.yml)
├── public/
│ ├── favicon.ico
│ ├── placeholder.svg
│ └── robots.txt
├── src/
│ ├── assets/
│ │ ├── hero-bg.jpg
│ │ └── ID_PHOTO.png
│ ├── components/
│ │ ├── About.tsx
│ │ ├── Contact.tsx
│ │ ├── Hero.tsx
│ │ ├── Navigation.tsx
│ │ ├── Projects.tsx
│ │ ├── Skills.tsx
│ │ └── ui/ # shadcn/ui 파생 컴포넌트들
│ │ ├── alert-dialog.tsx
│ │ ├── alert.tsx
│ │ ├── aspect-ratio.tsx
│ │ ├── avatar.tsx
│ │ ├── badge.tsx
│ │ ├── breadcrumb.tsx
│ │ ├── button.tsx
│ │ ├── calendar.tsx
│ │ ├── card.tsx
│ │ ├── carousel.tsx
│ │ ├── chart.tsx
│ │ ├── checkbox.tsx
│ │ ├── collapsible.tsx
│ │ ├── command.tsx
│ │ ├── context-menu.tsx
│ │ ├── dialog.tsx
│ │ ├── drawer.tsx
│ │ ├── dropdown-menu.tsx
│ │ ├── form.tsx
│ │ ├── hover-card.tsx
│ │ ├── input-otp.tsx
│ │ ├── input.tsx
│ │ ├── label.tsx
│ │ ├── menubar.tsx
│ │ ├── navigation-menu.tsx
│ │ ├── pagination.tsx
│ │ ├── popover.tsx
│ │ ├── progress.tsx
│ │ ├── radio-group.tsx
│ │ ├── resizable.tsx
│ │ ├── scroll-area.tsx
│ │ ├── select.tsx
│ │ ├── separator.tsx
│ │ ├── sheet.tsx
│ │ ├── skeleton.tsx
│ │ ├── slider.tsx
│ │ ├── sonner.tsx
│ │ ├── switch.tsx
│ │ ├── table.tsx
│ │ ├── tabs.tsx
│ │ ├── textarea.tsx
│ │ ├── toast.tsx
│ │ ├── toaster.tsx
│ │ ├── toggle-group.tsx
│ │ ├── toggle.tsx
│ │ ├── tooltip.tsx
│ │ └── use-toast.ts # UI 전용 토스트 훅(중복 파일 주의)
│ ├── hooks/
│ │ ├── use-mobile.tsx
│ │ └── use-toast.ts # hooks 버전(use-toast) — 실제 사용 위치 점검 필요
│ ├── lib/
│ │ └── utils.ts
│ ├── pages/
│ │ ├── Index.tsx
│ │ └── NotFound.tsx
│ ├── App.css
│ ├── App.tsx
│ ├── index.css
│ ├── main.tsx
│ └── vite-env.d.ts
├── .gitignore
├── bun.lockb
├── components.json
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
참고: components/ui/use-toast.ts 와 src/hooks/use-toast.ts 중복 존재. 실제 import 경로를 통일(예: @/components/ui/use-toast)하는 것을 권장.
Node.js LTS 필수 npm 또는 bun 중 택1
# 1) 의존성 설치
npm i
# 또는
bun install
# 2) 개발 서버
npm run dev
# 또는
bun run dev
# 3) 프로덕션 빌드
npm run build
# 또는
bun run build
# 4) 로컬 프리뷰(선택)
npm run preview
# 또는
bun run preview권장 위치: .github/workflows/deploy.yml
Vite + Pages 환경에서 vite.config.ts의 base를 레포 이름에 맞게 설정 필요
// 변경점: GitHub Pages용 base 경로 지정(레포가 user.github.io가 아닌 경우 필수)
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
base: "/BcKmini.github.io/", // 레포 이름으로 교체
});# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
push:
branches: [ main ]
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npm run build
- uses: actions/upload-pages-artifact@v3
with:
path: dist
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- id: deployment
uses: actions/deploy-pages@v4