├── .eslintrc.json
├── pnpm-lock.yaml
├── public
    └── uploads
    │   └── .gitkeep
├── postcss.config.mjs
├── lib
    ├── utils.ts
    ├── constants.ts
    ├── metadata.ts
    ├── reset-images.ts
    └── cleanup-storage.ts
├── next.config.mjs
├── components
    ├── theme-provider.tsx
    ├── site-title.tsx
    ├── ui
    │   ├── toaster.tsx
    │   ├── card.tsx
    │   ├── button.tsx
    │   ├── use-toast.ts
    │   └── toast.tsx
    ├── save-to-file-button.tsx
    ├── theme-toggle.tsx
    ├── save-field-button.tsx
    ├── global-save-button.tsx
    ├── editable
    │   ├── editable-text.tsx
    │   ├── editable-icon.tsx
    │   ├── editable-list.tsx
    │   ├── editable-media.tsx
    │   └── editable-background.tsx
    ├── navbar.tsx
    ├── footer.tsx
    ├── header.tsx
    └── hero.tsx
├── .vscode
    └── settings.json
├── .gitignore
├── components.json
├── app
    ├── page.tsx
    ├── safelist.css
    ├── api
    │   ├── delete-image
    │   │   └── route.ts
    │   ├── og-image
    │   │   └── route.ts
    │   ├── upload-video
    │   │   └── route.ts
    │   ├── upload-image
    │   │   └── route.ts
    │   ├── update-field
    │   │   └── route.ts
    │   └── update-component
    │   │   └── route.ts
    ├── layout.tsx
    └── globals.css
├── tsconfig.json
├── hooks
    └── use-toast.ts
├── package.json
├── contexts
    └── inline-editor-context.tsx
├── README.md
└── GEMINI.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "next/typescript"]
3 | }


--------------------------------------------------------------------------------
/pnpm-lock.yaml:
--------------------------------------------------------------------------------
1 | lockfileVersion: '9.0'
2 | 
3 | settings:
4 |   autoInstallPeers: true
5 |   excludeLinksFromLockfile: false


--------------------------------------------------------------------------------
/public/uploads/.gitkeep:
--------------------------------------------------------------------------------
1 | # This file ensures the uploads directory structure is maintained in git
2 | # All uploaded files in this directory will be included in your repository


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     '@tailwindcss/postcss': {},
5 |   },
6 | }
7 | 
8 | export default config
9 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   eslint: {
 4 |     ignoreDuringBuilds: true,
 5 |   },
 6 |   typescript: {
 7 |     ignoreBuildErrors: true,
 8 |   },
 9 |   images: {
10 |     unoptimized: true,
11 |   },
12 | }
13 | 
14 | export default nextConfig
15 | 


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as React from 'react'
 4 | import {
 5 |   ThemeProvider as NextThemesProvider,
 6 |   type ThemeProviderProps,
 7 | } from 'next-themes'
 8 | 
 9 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
10 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
11 | }
12 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "css.validate": false,
 3 |   "tailwindCSS.includeLanguages": {
 4 |     "html": "html",
 5 |     "javascript": "javascript",
 6 |     "typescript": "typescript",
 7 |     "javascriptreact": "javascript",
 8 |     "typescriptreact": "typescript"
 9 |   },
10 |   "editor.quickSuggestions": {
11 |     "strings": true
12 |   },
13 |   "files.associations": {
14 |     "*.css": "tailwindcss"
15 |   }
16 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # next.js
 7 | /.next/
 8 | /out/
 9 | 
10 | # production
11 | /build
12 | 
13 | # debug
14 | npm-debug.log*
15 | yarn-debug.log*
16 | yarn-error.log*
17 | .pnpm-debug.log*
18 | 
19 | # env files
20 | .env*
21 | 
22 | # vercel
23 | .vercel
24 | 
25 | # typescript
26 | *.tsbuildinfo
27 | next-env.d.ts


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib"
18 |   },
19 |   "iconLibrary": "lucide"
20 | }


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Header } from "@/components/header"
 2 | import { Hero } from "@/components/hero"
 3 | import { About } from "@/components/about"
 4 | import { Projects } from "@/components/projects"
 5 | import { Contact } from "@/components/contact"
 6 | import { Footer } from "@/components/footer"
 7 | 
 8 | export default function Home() {
 9 |   return (
10 |     <main className="min-h-screen">
11 |       <Header />
12 |       <Hero />
13 |       <About />
14 |       <Projects />
15 |       <Contact />
16 |       <Footer />
17 |     </main>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/lib/constants.ts:
--------------------------------------------------------------------------------
 1 | // 공통 스타일 상수
 2 | export const COMMON_STYLES = {
 3 |   // 삭제 버튼 (X) 스타일 - 모든 섹션에서 통일
 4 |   deleteButton: "absolute -top-1 -right-1 p-0.5 bg-destructive text-destructive-foreground rounded-full hover:bg-destructive/90 z-10 flex items-center justify-center",
 5 |   deleteIcon: "h-3 w-3",
 6 |   
 7 |   // 추가 버튼 스타일
 8 |   addButton: "border-2 border-dashed border-muted-foreground/30 rounded-lg p-8 hover:border-primary hover:bg-primary/5 transition-all cursor-pointer flex flex-col items-center justify-center",
 9 |   addIcon: "h-8 w-8 text-muted-foreground mb-2",
10 |   
11 |   // 카드 스타일
12 |   card: "border-0 shadow-lg hover:shadow-xl transition-all duration-300 relative",
13 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "target": "ES6",
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/lib/metadata.ts:
--------------------------------------------------------------------------------
 1 | import { defaultConfig } from "@/components/header"
 2 | 
 3 | // 메타데이터 헬퍼 함수
 4 | export function getMetadata() {
 5 |   // localStorage는 서버 사이드에서 사용할 수 없으므로 기본값 사용
 6 |   const defaultInfo = {
 7 |     name: "당신의 이름",
 8 |     title: "프론트엔드 개발자",
 9 |     description: defaultConfig.siteDescription, // header의 defaultConfig에서 가져오기
10 |     profileImage: "",
11 |     siteTitle: defaultConfig.siteTitle, // header의 defaultConfig에서 가져오기
12 |   }
13 |   
14 |   // 클라이언트 사이드에서만 localStorage 접근
15 |   if (typeof window !== 'undefined') {
16 |     const saved = localStorage.getItem('hero-info')
17 |     if (saved) {
18 |       try {
19 |         const parsed = JSON.parse(saved)
20 |         return { ...defaultInfo, ...parsed }
21 |       } catch {
22 |         return defaultInfo
23 |       }
24 |     }
25 |   }
26 |   
27 |   return defaultInfo
28 | }


--------------------------------------------------------------------------------
/components/site-title.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useEffect } from "react"
 4 | import { defaultConfig } from "@/components/header"
 5 | 
 6 | export function SiteTitle() {
 7 |   useEffect(() => {
 8 |     // 항상 파일의 defaultConfig.siteTitle 값을 사용
 9 |     document.title = defaultConfig.siteTitle
10 | 
11 |     // localStorage도 파일 값으로 동기화
12 |     localStorage.setItem('portfolio-site-title', defaultConfig.siteTitle)
13 |     
14 |     // storage 이벤트 리스너 (다른 탭에서 변경시)
15 |     const handleStorageChange = () => {
16 |       const savedTitle = localStorage.getItem('portfolio-site-title')
17 |       if (savedTitle) {
18 |         document.title = savedTitle
19 |       } else {
20 |         document.title = defaultConfig.siteTitle
21 |       }
22 |     }
23 |     
24 |     window.addEventListener('storage', handleStorageChange)
25 |     
26 |     return () => {
27 |       window.removeEventListener('storage', handleStorageChange)
28 |     }
29 |   }, [])
30 |   
31 |   return null
32 | }


--------------------------------------------------------------------------------
/app/safelist.css:
--------------------------------------------------------------------------------
 1 | /* Safelist for dynamic Tailwind classes */
 2 | 
 3 | /* Social media colors - ensure these classes are included in the build */
 4 | .bg-yellow-500\/10 { }
 5 | .hover\:bg-yellow-500\/20:hover { }
 6 | .text-yellow-600 { }
 7 | 
 8 | .bg-pink-500\/10 { }
 9 | .hover\:bg-pink-500\/20:hover { }
10 | .text-pink-600 { }
11 | 
12 | .bg-red-500\/10 { }
13 | .hover\:bg-red-500\/20:hover { }
14 | .text-red-600 { }
15 | 
16 | .bg-blue-600\/10 { }
17 | .hover\:bg-blue-600\/20:hover { }
18 | .text-blue-600 { }
19 | 
20 | .bg-sky-500\/10 { }
21 | .hover\:bg-sky-500\/20:hover { }
22 | .text-sky-600 { }
23 | 
24 | .bg-blue-700\/10 { }
25 | .hover\:bg-blue-700\/20:hover { }
26 | .text-blue-700 { }
27 | 
28 | .bg-blue-500\/10 { }
29 | .hover\:bg-blue-500\/20:hover { }
30 | .text-blue-500 { }
31 | 
32 | .bg-green-500\/10 { }
33 | .hover\:bg-green-500\/20:hover { }
34 | .text-green-600 { }
35 | 
36 | /* Other dynamic colors that might be needed */
37 | .bg-primary\/10 { }
38 | .hover\:bg-primary\/20:hover { }
39 | .text-primary { }


--------------------------------------------------------------------------------
/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useToast } from "@/hooks/use-toast"
 4 | import type { Toast as ToastType } from "@/hooks/use-toast"
 5 | import {
 6 |   Toast,
 7 |   ToastClose,
 8 |   ToastDescription,
 9 |   ToastProvider,
10 |   ToastTitle,
11 |   ToastViewport,
12 | } from "@/components/ui/toast"
13 | 
14 | export function Toaster() {
15 |   const { toasts } = useToast()
16 | 
17 |   return (
18 |     <ToastProvider>
19 |       {toasts.map(function ({ id, title, description, action, ...props }: ToastType) {
20 |         return (
21 |           <Toast key={id} {...props}>
22 |             <div className="grid gap-1">
23 |               {title && <ToastTitle>{title}</ToastTitle>}
24 |               {description && (
25 |                 <ToastDescription>{description}</ToastDescription>
26 |               )}
27 |             </div>
28 |             {action}
29 |             <ToastClose />
30 |           </Toast>
31 |         )
32 |       })}
33 |       <ToastViewport />
34 |     </ToastProvider>
35 |   )
36 | }
37 | 


--------------------------------------------------------------------------------
/lib/reset-images.ts:
--------------------------------------------------------------------------------
 1 | // 이미지 관련 localStorage 데이터만 초기화
 2 | export function resetImagePaths() {
 3 |   if (typeof window === 'undefined') return
 4 |   
 5 |   const keysToClean = [
 6 |     'portfolio-hero-info',
 7 |     'portfolio-hero-background', 
 8 |     'portfolio-about-info',
 9 |     'portfolio-about-background',
10 |     'portfolio-projects'
11 |   ]
12 |   
13 |   keysToClean.forEach(key => {
14 |     const data = localStorage.getItem(key)
15 |     if (!data) return
16 |     
17 |     try {
18 |       const parsed = JSON.parse(data)
19 |       
20 |       // 이미지 필드 초기화
21 |       if (parsed.profileImage?.includes('/uploads/')) parsed.profileImage = ''
22 |       if (parsed.backgroundImage?.includes('/uploads/')) parsed.backgroundImage = ''
23 |       if (parsed.image?.includes('/uploads/')) parsed.image = ''
24 |       if (parsed.video?.includes('/uploads/')) parsed.video = ''
25 |       
26 |       // 배열인 경우 (projects)
27 |       if (Array.isArray(parsed)) {
28 |         parsed.forEach(item => {
29 |           if (item.image?.includes('/uploads/')) item.image = ''
30 |           if (item.video?.includes('/uploads/')) item.video = ''
31 |         })
32 |       }
33 |       
34 |       localStorage.setItem(key, JSON.stringify(parsed))
35 |       console.log(`Cleaned image paths from ${key}`)
36 |     } catch (e) {
37 |       console.error(`Error cleaning ${key}:`, e)
38 |     }
39 |   })
40 |   
41 |   console.log('Image paths reset complete. Please refresh the page.')
42 | }


--------------------------------------------------------------------------------
/app/api/delete-image/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from 'next/server'
 2 | import fs from 'fs/promises'
 3 | import path from 'path'
 4 | 
 5 | export async function DELETE(request: NextRequest) {
 6 |   // 개발 환경에서만 작동
 7 |   if (process.env.NODE_ENV !== 'development') {
 8 |     return NextResponse.json(
 9 |       { error: '개발 모드에서만 사용 가능합니다' },
10 |       { status: 403 }
11 |     )
12 |   }
13 | 
14 |   try {
15 |     const { imagePath } = await request.json()
16 |     
17 |     if (!imagePath) {
18 |       return NextResponse.json(
19 |         { error: '파일 경로가 필요합니다' },
20 |         { status: 400 }
21 |       )
22 |     }
23 | 
24 |     // 안전성 검사: uploads 폴더 내의 파일만 삭제 가능
25 |     if (!imagePath.startsWith('/uploads/')) {
26 |       return NextResponse.json(
27 |         { error: 'uploads 폴더의 파일만 삭제 가능합니다' },
28 |         { status: 400 }
29 |       )
30 |     }
31 | 
32 |     // 파일 경로 생성
33 |     const fileName = imagePath.replace('/uploads/', '')
34 |     const filePath = path.join(process.cwd(), 'public', 'uploads', fileName)
35 |     
36 |     // 파일 존재 확인
37 |     try {
38 |       await fs.access(filePath)
39 |     } catch {
40 |       return NextResponse.json(
41 |         { error: '파일을 찾을 수 없습니다' },
42 |         { status: 404 }
43 |       )
44 |     }
45 | 
46 |     // 파일 삭제
47 |     await fs.unlink(filePath)
48 |     
49 |     const fileType = imagePath.includes('video') ? '비디오' : '이미지'
50 |     console.log(`🗑️ ${fileType} 삭제 완료: ${imagePath}`)
51 |     
52 |     return NextResponse.json({ 
53 |       success: true,
54 |       message: `${fileType}가 삭제되었습니다`
55 |     })
56 |     
57 |   } catch (error) {
58 |     console.error('파일 삭제 오류:', error)
59 |     return NextResponse.json(
60 |       { error: '파일 삭제 중 오류가 발생했습니다' },
61 |       { status: 500 }
62 |     )
63 |   }
64 | }


--------------------------------------------------------------------------------
/components/save-to-file-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useState } from "react"
 4 | import { Save, Check } from "lucide-react"
 5 | import { useInlineEditor } from "@/contexts/inline-editor-context"
 6 | 
 7 | interface SaveToFileButtonProps {
 8 |   componentName: string
 9 |   sectionName?: string
10 |   data: unknown
11 |   onSaveSuccess?: () => void
12 |   className?: string
13 |   buttonText?: string
14 | }
15 | 
16 | export function SaveToFileButton({ 
17 |   componentName, 
18 |   sectionName = 'Info',
19 |   data, 
20 |   onSaveSuccess,
21 |   className = "",
22 |   buttonText = "파일에 저장"
23 | }: SaveToFileButtonProps) {
24 |   const { saveToFile } = useInlineEditor()
25 |   const [isSaving, setIsSaving] = useState(false)
26 |   const [saved, setSaved] = useState(false)
27 |   
28 |   const handleSave = async () => {
29 |     setIsSaving(true)
30 |     
31 |     try {
32 |       const success = await saveToFile(componentName, sectionName, data)
33 |       
34 |       if (success) {
35 |         setSaved(true)
36 |         setTimeout(() => setSaved(false), 3000)
37 |         
38 |         if (onSaveSuccess) {
39 |           onSaveSuccess()
40 |         }
41 |       } else {
42 |         alert('❌ 파일 저장에 실패했습니다.')
43 |       }
44 |     } catch (error) {
45 |       console.error('저장 오류:', error)
46 |       alert('❌ 파일 저장 중 오류가 발생했습니다.')
47 |     } finally {
48 |       setIsSaving(false)
49 |     }
50 |   }
51 |   
52 |   return (
53 |     <button
54 |       onClick={handleSave}
55 |       disabled={isSaving || saved}
56 |       className={`flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-all disabled:opacity-50 ${className}`}
57 |     >
58 |       {saved ? (
59 |         <>
60 |           <Check className="h-4 w-4" />
61 |           저장됨
62 |         </>
63 |       ) : (
64 |         <>
65 |           <Save className="h-4 w-4" />
66 |           {isSaving ? '저장 중...' : buttonText}
67 |         </>
68 |       )}
69 |     </button>
70 |   )
71 | }


--------------------------------------------------------------------------------
/hooks/use-toast.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | 
 3 | export interface Toast {
 4 |   id: string
 5 |   title?: string
 6 |   description?: string
 7 |   action?: React.ReactNode
 8 |   duration?: number
 9 | }
10 | 
11 | interface ToastState {
12 |   toasts: Toast[]
13 | }
14 | 
15 | let listeners: Array<(state: ToastState) => void> = []
16 | let memoryState: ToastState = { toasts: [] }
17 | 
18 | function dispatch(action: { type: 'ADD_TOAST' | 'UPDATE_TOAST' | 'REMOVE_TOAST'; toast?: Toast; id?: string }) {
19 |   switch (action.type) {
20 |     case 'ADD_TOAST':
21 |       memoryState = {
22 |         toasts: [...memoryState.toasts, action.toast!],
23 |       }
24 |       break
25 |     case 'UPDATE_TOAST':
26 |       memoryState = {
27 |         toasts: memoryState.toasts.map((t) =>
28 |           t.id === action.id ? { ...t, ...action.toast } : t
29 |         ),
30 |       }
31 |       break
32 |     case 'REMOVE_TOAST':
33 |       memoryState = {
34 |         toasts: memoryState.toasts.filter((t) => t.id !== action.id),
35 |       }
36 |       break
37 |   }
38 |   listeners.forEach((listener) => listener(memoryState))
39 | }
40 | 
41 | export function useToast() {
42 |   const [state, setState] = useState<ToastState>(memoryState)
43 | 
44 |   useEffect(() => {
45 |     listeners.push(setState)
46 |     return () => {
47 |       const index = listeners.indexOf(setState)
48 |       if (index > -1) {
49 |         listeners.splice(index, 1)
50 |       }
51 |     }
52 |   }, [state])
53 | 
54 |   return {
55 |     toasts: state.toasts,
56 |     toast: (toast: Omit<Toast, 'id'>) => {
57 |       const id = Math.random().toString(36).substring(2, 9)
58 |       dispatch({ type: 'ADD_TOAST', toast: { ...toast, id } })
59 |       
60 |       if (toast.duration !== Infinity) {
61 |         setTimeout(() => {
62 |           dispatch({ type: 'REMOVE_TOAST', id })
63 |         }, toast.duration || 3000)
64 |       }
65 |     },
66 |     dismiss: (id: string) => dispatch({ type: 'REMOVE_TOAST', id }),
67 |   }
68 | }


--------------------------------------------------------------------------------
/app/api/og-image/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from 'next/server'
 2 | import fs from 'fs'
 3 | import path from 'path'
 4 | 
 5 | export async function GET(req: NextRequest) {
 6 |   try {
 7 |     // uploads 폴더에서 hero-profile로 시작하는 이미지 찾기
 8 |     const uploadsDir = path.join(process.cwd(), 'public', 'uploads')
 9 |     
10 |     if (fs.existsSync(uploadsDir)) {
11 |       const files = fs.readdirSync(uploadsDir)
12 |       const profileImage = files.find(file => 
13 |         file.startsWith('hero-profile') && 
14 |         (file.endsWith('.jpg') || file.endsWith('.jpeg') || file.endsWith('.png') || file.endsWith('.webp'))
15 |       )
16 |       
17 |       if (profileImage) {
18 |         const imagePath = path.join(uploadsDir, profileImage)
19 |         const imageBuffer = fs.readFileSync(imagePath)
20 |         
21 |         // 이미지 타입 결정
22 |         const ext = path.extname(profileImage).toLowerCase()
23 |         const contentType = 
24 |           ext === '.png' ? 'image/png' :
25 |           ext === '.webp' ? 'image/webp' :
26 |           'image/jpeg'
27 |         
28 |         return new NextResponse(imageBuffer, {
29 |           headers: {
30 |             'Content-Type': contentType,
31 |             'Cache-Control': 'public, max-age=3600',
32 |           },
33 |         })
34 |       }
35 |     }
36 |     
37 |     // 프로필 이미지가 없으면 기본 OG 이미지 생성 (단색 배경)
38 |     const svg = `
39 |       <svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
40 |         <rect width="1200" height="630" fill="#3b82f6"/>
41 |         <text x="50%" y="50%" font-family="Pretendard, sans-serif" font-size="72" fill="white" text-anchor="middle" dominant-baseline="middle">
42 |           나의 포트폴리오
43 |         </text>
44 |       </svg>
45 |     `
46 |     
47 |     return new NextResponse(svg, {
48 |       headers: {
49 |         'Content-Type': 'image/svg+xml',
50 |         'Cache-Control': 'public, max-age=3600',
51 |       },
52 |     })
53 |   } catch (error) {
54 |     console.error('OG 이미지 생성 실패:', error)
55 |     return NextResponse.json({ error: 'Failed to generate OG image' }, { status: 500 })
56 |   }
57 | }


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn(
23 |         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24 |         className
25 |       )}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 |   return (
33 |     <div
34 |       data-slot="card-title"
35 |       className={cn("leading-none font-semibold", className)}
36 |       {...props}
37 |     />
38 |   )
39 | }
40 | 
41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 |   return (
43 |     <div
44 |       data-slot="card-description"
45 |       className={cn("text-muted-foreground text-sm", className)}
46 |       {...props}
47 |     />
48 |   )
49 | }
50 | 
51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 |   return (
53 |     <div
54 |       data-slot="card-action"
55 |       className={cn(
56 |         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57 |         className
58 |       )}
59 |       {...props}
60 |     />
61 |   )
62 | }
63 | 
64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 |   return (
66 |     <div
67 |       data-slot="card-content"
68 |       className={cn("px-6", className)}
69 |       {...props}
70 |     />
71 |   )
72 | }
73 | 
74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 |   return (
76 |     <div
77 |       data-slot="card-footer"
78 |       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79 |       {...props}
80 |     />
81 |   )
82 | }
83 | 
84 | export {
85 |   Card,
86 |   CardHeader,
87 |   CardFooter,
88 |   CardTitle,
89 |   CardAction,
90 |   CardDescription,
91 |   CardContent,
92 | }
93 | 


--------------------------------------------------------------------------------
/lib/cleanup-storage.ts:
--------------------------------------------------------------------------------
 1 | // localStorage에서 존재하지 않는 이미지 경로 정리
 2 | export function cleanupInvalidImages() {
 3 |   if (typeof window === 'undefined') return
 4 | 
 5 |   const keysToCheck = [
 6 |     'portfolio-hero-info',
 7 |     'portfolio-hero-background',
 8 |     'portfolio-about-info',
 9 |     'portfolio-about-background',
10 |     'portfolio-projects',
11 |     'portfolio-contact-info'
12 |   ]
13 | 
14 |   keysToCheck.forEach(key => {
15 |     const data = localStorage.getItem(key)
16 |     if (!data) return
17 | 
18 |     try {
19 |       const parsed = JSON.parse(data)
20 |       let modified = false
21 | 
22 |       // 이미지 필드 확인 및 정리
23 |       const imageFields = ['profileImage', 'backgroundImage', 'image', 'avatar', 'photo']
24 |       
25 |       imageFields.forEach(field => {
26 |         if (parsed[field] && parsed[field].includes('/uploads/')) {
27 |           // 이미지 존재 여부 확인
28 |           const img = new Image()
29 |           img.onerror = () => {
30 |             // 이미지 로드 실패 시 필드 초기화
31 |             parsed[field] = ''
32 |             modified = true
33 |             localStorage.setItem(key, JSON.stringify(parsed))
34 |             console.log(`Cleaned invalid image from ${key}.${field}`)
35 |           }
36 |           img.src = parsed[field]
37 |         }
38 |       })
39 | 
40 |       // 배열인 경우 (projects 등)
41 |       if (Array.isArray(parsed)) {
42 |         parsed.forEach((item, index) => {
43 |           imageFields.forEach(field => {
44 |             if (item[field] && item[field].includes('/uploads/')) {
45 |               const img = new Image()
46 |               img.onerror = () => {
47 |                 item[field] = ''
48 |                 modified = true
49 |                 localStorage.setItem(key, JSON.stringify(parsed))
50 |                 console.log(`Cleaned invalid image from ${key}[${index}].${field}`)
51 |               }
52 |               img.src = item[field]
53 |             }
54 |           })
55 |         })
56 |       }
57 |     } catch (e) {
58 |       console.error(`Error parsing ${key}:`, e)
59 |     }
60 |   })
61 | }
62 | 
63 | // 모든 localStorage 데이터 초기화 (개발용)
64 | export function resetAllData() {
65 |   if (typeof window === 'undefined') return
66 |   
67 |   const keys = Object.keys(localStorage).filter(key => key.startsWith('portfolio-'))
68 |   keys.forEach(key => localStorage.removeItem(key))
69 |   console.log('All portfolio data has been reset')
70 |   window.location.reload()
71 | }


--------------------------------------------------------------------------------
/components/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useState, useEffect } from "react"
 4 | import { Moon, Sun } from "lucide-react"
 5 | import { cn } from "@/lib/utils"
 6 | import { useTheme } from "next-themes"
 7 | 
 8 | interface ThemeToggleProps {
 9 |   className?: string
10 | }
11 | 
12 | export function ThemeToggle({ className }: ThemeToggleProps) {
13 |   const [mounted, setMounted] = useState(false)
14 |   const { theme, setTheme } = useTheme()
15 |   const isDark = theme === "dark"
16 | 
17 |   useEffect(() => {
18 |     setMounted(true)
19 |   }, [])
20 | 
21 |   if (!mounted) {
22 |     return null
23 |   }
24 | 
25 |   return (
26 |     <div
27 |       className={cn(
28 |         "flex w-16 h-8 p-1 rounded-full cursor-pointer transition-all duration-300",
29 |         isDark 
30 |           ? "bg-zinc-950 border border-zinc-800" 
31 |           : "bg-white border border-zinc-200",
32 |         className
33 |       )}
34 |       onClick={() => setTheme(isDark ? "light" : "dark")}
35 |       role="button"
36 |       tabIndex={0}
37 |     >
38 |       <div className="flex justify-between items-center w-full">
39 |         <div
40 |           className={cn(
41 |             "flex justify-center items-center w-6 h-6 rounded-full transition-transform duration-300",
42 |             isDark 
43 |               ? "transform translate-x-0 bg-zinc-800" 
44 |               : "transform translate-x-8 bg-gray-200"
45 |           )}
46 |         >
47 |           {isDark ? (
48 |             <Moon 
49 |               className="w-4 h-4 text-white" 
50 |               strokeWidth={1.5}
51 |             />
52 |           ) : (
53 |             <Sun 
54 |               className="w-4 h-4 text-gray-700" 
55 |               strokeWidth={1.5}
56 |             />
57 |           )}
58 |         </div>
59 |         <div
60 |           className={cn(
61 |             "flex justify-center items-center w-6 h-6 rounded-full transition-transform duration-300",
62 |             isDark 
63 |               ? "bg-transparent" 
64 |               : "transform -translate-x-8"
65 |           )}
66 |         >
67 |           {isDark ? (
68 |             <Sun 
69 |               className="w-4 h-4 text-gray-500" 
70 |               strokeWidth={1.5}
71 |             />
72 |           ) : (
73 |             <Moon 
74 |               className="w-4 h-4 text-black" 
75 |               strokeWidth={1.5}
76 |             />
77 |           )}
78 |         </div>
79 |       </div>
80 |     </div>
81 |   )
82 | }


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type React from "react"
 2 | import type { Metadata } from "next"
 3 | import { ThemeProvider } from "@/components/theme-provider"
 4 | import { InlineEditorProvider } from "@/contexts/inline-editor-context"
 5 | import { SiteTitle } from "@/components/site-title"
 6 | import { getMetadata } from "@/lib/metadata"
 7 | import "./globals.css"
 8 | 
 9 | const metadataInfo = getMetadata()
10 | 
11 | export const metadata: Metadata = {
12 |   metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'),
13 |   title: metadataInfo.siteTitle,
14 |   description: metadataInfo.description,
15 |   keywords: ["포트폴리오", "개발자", "프론트엔드", "웹개발"],
16 |   authors: [{ name: "당신의 이름" }],
17 |   openGraph: {
18 |     type: "website",
19 |     locale: "ko_KR",
20 |     url: "https://your-domain.com",
21 |     title: "나의 포트폴리오",
22 |     description: "창의적인 아이디어로 웹 경험을 디자인합니다.",
23 |     siteName: "나의 포트폴리오",
24 |     images: [
25 |       {
26 |         url: "/api/og-image", // 동적 OG 이미지 API
27 |         width: 1200,
28 |         height: 630,
29 |         alt: "프로필 이미지",
30 |       },
31 |     ],
32 |   },
33 |   twitter: {
34 |     card: "summary_large_image",
35 |     title: "나의 포트폴리오",
36 |     description: "창의적인 아이디어로 웹 경험을 디자인합니다.",
37 |     images: ["/api/og-image"],
38 |   },
39 |   robots: {
40 |     index: true,
41 |     follow: true,
42 |     googleBot: {
43 |       index: true,
44 |       follow: true,
45 |       "max-video-preview": -1,
46 |       "max-image-preview": "large",
47 |       "max-snippet": -1,
48 |     },
49 |   },
50 | }
51 | 
52 | export default function RootLayout({
53 |   children,
54 | }: Readonly<{
55 |   children: React.ReactNode
56 | }>) {
57 |   return (
58 |     <html lang="ko" suppressHydrationWarning>
59 |       <head>
60 |         <link 
61 |           rel="stylesheet" 
62 |           as="style" 
63 |           crossOrigin="anonymous"
64 |           href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" 
65 |         />
66 |         {/* 카카오톡 공유 최적화 */}
67 |         <meta property="og:image:width" content="1200" />
68 |         <meta property="og:image:height" content="630" />
69 |       </head>
70 |       <body className="font-pretendard" suppressHydrationWarning>
71 |         <ThemeProvider 
72 |           attribute="class" 
73 |           defaultTheme="system" 
74 |           enableSystem
75 |           disableTransitionOnChange
76 |         >
77 |           <InlineEditorProvider>
78 |             <SiteTitle />
79 |             {children}
80 |           </InlineEditorProvider>
81 |         </ThemeProvider>
82 |       </body>
83 |     </html>
84 |   )
85 | }
86 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-v0-project",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "next build",
 7 |     "dev": "next dev",
 8 |     "lint": "next lint",
 9 |     "start": "next start"
10 |   },
11 |   "dependencies": {
12 |     "@hookform/resolvers": "^3.10.0",
13 |     "@radix-ui/react-accordion": "1.2.2",
14 |     "@radix-ui/react-alert-dialog": "1.1.4",
15 |     "@radix-ui/react-aspect-ratio": "1.1.1",
16 |     "@radix-ui/react-avatar": "1.1.2",
17 |     "@radix-ui/react-checkbox": "1.1.3",
18 |     "@radix-ui/react-collapsible": "1.1.2",
19 |     "@radix-ui/react-context-menu": "2.2.4",
20 |     "@radix-ui/react-dialog": "1.1.4",
21 |     "@radix-ui/react-dropdown-menu": "2.1.4",
22 |     "@radix-ui/react-hover-card": "1.1.4",
23 |     "@radix-ui/react-label": "2.1.1",
24 |     "@radix-ui/react-menubar": "1.1.4",
25 |     "@radix-ui/react-navigation-menu": "1.2.3",
26 |     "@radix-ui/react-popover": "1.1.4",
27 |     "@radix-ui/react-progress": "1.1.1",
28 |     "@radix-ui/react-radio-group": "1.2.2",
29 |     "@radix-ui/react-scroll-area": "1.2.2",
30 |     "@radix-ui/react-select": "2.1.4",
31 |     "@radix-ui/react-separator": "1.1.1",
32 |     "@radix-ui/react-slider": "1.2.2",
33 |     "@radix-ui/react-slot": "1.1.1",
34 |     "@radix-ui/react-switch": "1.1.2",
35 |     "@radix-ui/react-tabs": "1.1.2",
36 |     "@radix-ui/react-toast": "1.2.4",
37 |     "@radix-ui/react-toggle": "1.1.1",
38 |     "@radix-ui/react-toggle-group": "1.1.1",
39 |     "@radix-ui/react-tooltip": "1.1.6",
40 |     "autoprefixer": "^10.4.20",
41 |     "class-variance-authority": "^0.7.1",
42 |     "clsx": "^2.1.1",
43 |     "cmdk": "1.0.4",
44 |     "date-fns": "4.1.0",
45 |     "embla-carousel-react": "8.5.1",
46 |     "framer-motion": "^12.23.12",
47 |     "geist": "^1.3.1",
48 |     "gsap": "^3.13.0",
49 |     "input-otp": "1.4.1",
50 |     "lucide-react": "^0.454.0",
51 |     "next": "15.2.4",
52 |     "next-themes": "latest",
53 |     "react": "^19",
54 |     "react-day-picker": "9.8.0",
55 |     "react-dom": "^19",
56 |     "react-hook-form": "^7.60.0",
57 |     "react-resizable-panels": "^2.1.7",
58 |     "recharts": "2.15.4",
59 |     "sonner": "^1.7.4",
60 |     "tailwind-merge": "^2.5.5",
61 |     "tailwindcss-animate": "^1.0.7",
62 |     "vaul": "^1.1.2",
63 |     "zod": "3.25.67"
64 |   },
65 |   "devDependencies": {
66 |     "@tailwindcss/postcss": "^4.1.9",
67 |     "@types/node": "^22.17.2",
68 |     "@types/react": "^19.1.11",
69 |     "@types/react-dom": "^19.1.7",
70 |     "eslint": "^9.34.0",
71 |     "eslint-config-next": "^15.5.0",
72 |     "postcss": "^8.5",
73 |     "tailwindcss": "^4.1.9",
74 |     "tw-animate-css": "1.3.3",
75 |     "typescript": "^5"
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ArrowRight } from "lucide-react"
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 8 |   size?: "sm" | "md" | "lg"
 9 |   variant?: "default" | "outline" | "ghost"
10 | }
11 | 
12 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
13 |   ({ children, className, size = "md", variant = "default", ...props }, ref) => {
14 |     const sizeClasses = {
15 |       sm: "w-28 p-1.5 text-sm",
16 |       md: "w-32 p-2 text-base",
17 |       lg: "w-36 p-2.5 text-lg"
18 |     }
19 | 
20 |     if (variant === "ghost") {
21 |       return (
22 |         <button
23 |           ref={ref}
24 |           className={cn(
25 |             "cursor-pointer rounded-md bg-transparent text-center font-medium transition-all hover:bg-accent hover:text-accent-foreground",
26 |             sizeClasses[size],
27 |             className
28 |           )}
29 |           {...props}
30 |         >
31 |           {children}
32 |         </button>
33 |       )
34 |     }
35 | 
36 |     if (variant === "outline") {
37 |       return (
38 |         <button
39 |           ref={ref}
40 |           className={cn(
41 |             "relative cursor-pointer overflow-hidden rounded-full border-2 border-primary bg-background text-center font-semibold transition-all hover:text-primary-foreground",
42 |             sizeClasses[size],
43 |             className
44 |           )}
45 |           {...props}
46 |         >
47 |           <span className="relative z-10">{children}</span>
48 |           <div className="absolute left-[50%] top-[50%] h-0 w-0 translate-x-[-50%] translate-y-[-50%] rounded-full bg-primary transition-all duration-300 hover:h-[200%] hover:w-[200%]"></div>
49 |         </button>
50 |       )
51 |     }
52 | 
53 |     // Default variant with interactive hover effect
54 |     return (
55 |       <button
56 |         ref={ref}
57 |         className={cn(
58 |           "group relative cursor-pointer overflow-hidden rounded-full border bg-background text-center font-semibold",
59 |           sizeClasses[size],
60 |           className
61 |         )}
62 |         {...props}
63 |       >
64 |         <span className="inline-block translate-x-1 transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
65 |           {children}
66 |         </span>
67 |         <div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-1 group-hover:opacity-100">
68 |           <span>{children}</span>
69 |           <ArrowRight className="h-4 w-4" />
70 |         </div>
71 |         <div className="absolute left-[20%] top-[40%] h-2 w-2 scale-[0] rounded-lg bg-primary transition-all duration-300 group-hover:left-[0%] group-hover:top-[0%] group-hover:h-full group-hover:w-full group-hover:scale-[1.8] group-hover:bg-primary"></div>
72 |       </button>
73 |     )
74 |   }
75 | )
76 | 
77 | Button.displayName = "Button"
78 | 
79 | export { Button }
80 | 


--------------------------------------------------------------------------------
/components/save-field-button.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState } from "react"
  4 | import { Save, Check, AlertCircle } from "lucide-react"
  5 | 
  6 | interface SaveFieldButtonProps {
  7 |   component: string
  8 |   field: string
  9 |   value: unknown
 10 |   onSave?: () => void
 11 |   className?: string
 12 | }
 13 | 
 14 | export function SaveFieldButton({ 
 15 |   component, 
 16 |   field, 
 17 |   value, 
 18 |   onSave,
 19 |   className = ""
 20 | }: SaveFieldButtonProps) {
 21 |   const [isSaving, setIsSaving] = useState(false)
 22 |   const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'success' | 'error'>('idle')
 23 |   
 24 |   const handleSave = async () => {
 25 |     if (process.env.NODE_ENV !== 'development') {
 26 |       console.warn('파일 저장은 개발 모드에서만 가능합니다')
 27 |       return
 28 |     }
 29 |     
 30 |     setIsSaving(true)
 31 |     setSaveStatus('saving')
 32 |     
 33 |     try {
 34 |       const response = await fetch('/api/update-field', {
 35 |         method: 'POST',
 36 |         headers: {
 37 |           'Content-Type': 'application/json',
 38 |         },
 39 |         body: JSON.stringify({
 40 |           component,
 41 |           field,
 42 |           value
 43 |         })
 44 |       })
 45 |       
 46 |       const result = await response.json()
 47 |       
 48 |       if (result.success) {
 49 |         setSaveStatus('success')
 50 |         console.log(`✅ ${component}.tsx의 ${field} 필드가 저장되었습니다`)
 51 |         onSave?.()
 52 |         
 53 |         setTimeout(() => {
 54 |           setSaveStatus('idle')
 55 |         }, 2000)
 56 |       } else {
 57 |         setSaveStatus('error')
 58 |         console.error('필드 저장 실패:', result.error)
 59 |         
 60 |         setTimeout(() => {
 61 |           setSaveStatus('idle')
 62 |         }, 3000)
 63 |       }
 64 |     } catch (error) {
 65 |       console.error('필드 저장 중 오류:', error)
 66 |       setSaveStatus('error')
 67 |       
 68 |       setTimeout(() => {
 69 |         setSaveStatus('idle')
 70 |       }, 3000)
 71 |     }
 72 |     
 73 |     setIsSaving(false)
 74 |   }
 75 |   
 76 |   const getIcon = () => {
 77 |     switch (saveStatus) {
 78 |       case 'success':
 79 |         return <Check className="h-4 w-4" />
 80 |       case 'error':
 81 |         return <AlertCircle className="h-4 w-4" />
 82 |       default:
 83 |         return <Save className="h-4 w-4" />
 84 |     }
 85 |   }
 86 |   
 87 |   const getColor = () => {
 88 |     switch (saveStatus) {
 89 |       case 'success':
 90 |         return 'bg-green-600 hover:bg-green-700'
 91 |       case 'error':
 92 |         return 'bg-red-600 hover:bg-red-700'
 93 |       default:
 94 |         return 'bg-blue-600 hover:bg-blue-700'
 95 |     }
 96 |   }
 97 |   
 98 |   return (
 99 |     <button
100 |       onClick={handleSave}
101 |       disabled={isSaving}
102 |       className={`
103 |         p-2 rounded-lg text-white transition-all duration-200
104 |         disabled:opacity-50 disabled:cursor-not-allowed
105 |         ${getColor()}
106 |         ${className}
107 |       `}
108 |       title={`${field} 필드를 파일에 저장`}
109 |     >
110 |       {getIcon()}
111 |     </button>
112 |   )
113 | }


--------------------------------------------------------------------------------
/app/api/upload-video/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextRequest, NextResponse } from 'next/server'
  2 | import fs from 'fs/promises'
  3 | import path from 'path'
  4 | 
  5 | export async function POST(request: NextRequest) {
  6 |   // 개발 환경에서만 작동
  7 |   if (process.env.NODE_ENV !== 'development') {
  8 |     return NextResponse.json(
  9 |       { error: '개발 모드에서만 사용 가능합니다' },
 10 |       { status: 403 }
 11 |     )
 12 |   }
 13 | 
 14 |   try {
 15 |     const formData = await request.formData()
 16 |     const file = formData.get('file') as File
 17 |     const purpose = formData.get('purpose') as string || 'general-video'
 18 |     const oldPath = formData.get('oldPath') as string || ''
 19 |     
 20 |     if (!file) {
 21 |       return NextResponse.json(
 22 |         { error: '파일이 없습니다' },
 23 |         { status: 400 }
 24 |       )
 25 |     }
 26 | 
 27 |     // 파일 확장자 확인
 28 |     const validExtensions = ['.mp4', '.webm', '.ogg']
 29 |     const fileExtension = path.extname(file.name).toLowerCase()
 30 |     
 31 |     if (!validExtensions.includes(fileExtension)) {
 32 |       return NextResponse.json(
 33 |         { error: '비디오 파일만 업로드 가능합니다 (MP4, WebM)' },
 34 |         { status: 400 }
 35 |       )
 36 |     }
 37 | 
 38 |     // 파일 크기 제한 (20MB)
 39 |     if (file.size > 20 * 1024 * 1024) {
 40 |       return NextResponse.json(
 41 |         { error: '파일 크기는 20MB 이하여야 합니다' },
 42 |         { status: 400 }
 43 |       )
 44 |     }
 45 | 
 46 |     // 의미있는 파일명 생성 (purpose-timestamp.ext)
 47 |     const timestamp = Date.now()
 48 |     const uniqueFileName = `${purpose}-${timestamp}${fileExtension}`
 49 |     const publicPath = path.join(process.cwd(), 'public', 'uploads')
 50 |     
 51 |     // uploads 폴더가 없으면 생성
 52 |     try {
 53 |       await fs.access(publicPath)
 54 |     } catch {
 55 |       await fs.mkdir(publicPath, { recursive: true })
 56 |     }
 57 | 
 58 |     // 기존 파일 삭제 (같은 purpose의 이전 파일들 삭제)
 59 |     if (oldPath && oldPath.startsWith('/uploads/')) {
 60 |       try {
 61 |         const oldFileName = oldPath.replace('/uploads/', '')
 62 |         const oldFilePath = path.join(publicPath, oldFileName)
 63 |         await fs.unlink(oldFilePath)
 64 |         console.log(`🗑️ 기존 비디오 삭제: ${oldPath}`)
 65 |       } catch (error) {
 66 |         console.log('기존 비디오 삭제 실패 (파일이 없을 수 있음):', error)
 67 |       }
 68 |     }
 69 |     
 70 |     // 같은 purpose의 다른 파일들도 삭제
 71 |     try {
 72 |       const files = await fs.readdir(publicPath)
 73 |       for (const existingFile of files) {
 74 |         if (existingFile.startsWith(`${purpose}-`) && existingFile !== uniqueFileName) {
 75 |           const fileToDelete = path.join(publicPath, existingFile)
 76 |           await fs.unlink(fileToDelete)
 77 |           console.log(`🗑️ 이전 ${purpose} 비디오 삭제: ${existingFile}`)
 78 |         }
 79 |       }
 80 |     } catch (error) {
 81 |       console.log('이전 비디오 정리 중 오류:', error)
 82 |     }
 83 | 
 84 |     // 파일 저장
 85 |     const filePath = path.join(publicPath, uniqueFileName)
 86 |     const bytes = await file.arrayBuffer()
 87 |     const buffer = Buffer.from(bytes)
 88 |     
 89 |     await fs.writeFile(filePath, buffer)
 90 |     
 91 |     // 웹에서 접근 가능한 경로 반환
 92 |     const webPath = `/uploads/${uniqueFileName}`
 93 |     
 94 |     console.log(`✅ 비디오 업로드 완료: ${webPath}`)
 95 |     
 96 |     return NextResponse.json({ 
 97 |       success: true,
 98 |       path: webPath,
 99 |       filename: uniqueFileName
100 |     })
101 |     
102 |   } catch (error) {
103 |     console.error('파일 업로드 오류:', error)
104 |     return NextResponse.json(
105 |       { error: '파일 업로드 중 오류가 발생했습니다' },
106 |       { status: 500 }
107 |     )
108 |   }
109 | }


--------------------------------------------------------------------------------
/app/api/upload-image/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextRequest, NextResponse } from 'next/server'
  2 | import fs from 'fs/promises'
  3 | import path from 'path'
  4 | 
  5 | export async function POST(request: NextRequest) {
  6 |   // 개발 환경에서만 작동
  7 |   if (process.env.NODE_ENV !== 'development') {
  8 |     return NextResponse.json(
  9 |       { error: '개발 모드에서만 사용 가능합니다' },
 10 |       { status: 403 }
 11 |     )
 12 |   }
 13 | 
 14 |   try {
 15 |     const formData = await request.formData()
 16 |     const file = formData.get('file') as File
 17 |     const purpose = formData.get('purpose') as string || 'general' // hero-profile, hero-background, about-image 등
 18 |     const oldPath = formData.get('oldPath') as string || '' // 기존 파일 경로
 19 |     
 20 |     if (!file) {
 21 |       return NextResponse.json(
 22 |         { error: '파일이 없습니다' },
 23 |         { status: 400 }
 24 |       )
 25 |     }
 26 | 
 27 |     // 파일 확장자 확인
 28 |     const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg']
 29 |     const fileExtension = path.extname(file.name).toLowerCase()
 30 |     
 31 |     if (!validExtensions.includes(fileExtension)) {
 32 |       return NextResponse.json(
 33 |         { error: '이미지 파일만 업로드 가능합니다' },
 34 |         { status: 400 }
 35 |       )
 36 |     }
 37 | 
 38 |     // 파일 크기 제한 (5MB)
 39 |     if (file.size > 5 * 1024 * 1024) {
 40 |       return NextResponse.json(
 41 |         { error: '파일 크기는 5MB 이하여야 합니다' },
 42 |         { status: 400 }
 43 |       )
 44 |     }
 45 | 
 46 |     // 의미있는 파일명 생성 (purpose-timestamp.ext)
 47 |     const timestamp = Date.now()
 48 |     const uniqueFileName = `${purpose}-${timestamp}${fileExtension}`
 49 |     const publicPath = path.join(process.cwd(), 'public', 'uploads')
 50 |     
 51 |     // uploads 폴더가 없으면 생성
 52 |     try {
 53 |       await fs.access(publicPath)
 54 |     } catch {
 55 |       await fs.mkdir(publicPath, { recursive: true })
 56 |     }
 57 | 
 58 |     // 기존 파일 삭제 (같은 purpose의 이전 파일들 삭제)
 59 |     if (oldPath && oldPath.startsWith('/uploads/')) {
 60 |       try {
 61 |         const oldFileName = oldPath.replace('/uploads/', '')
 62 |         const oldFilePath = path.join(publicPath, oldFileName)
 63 |         await fs.unlink(oldFilePath)
 64 |         console.log(`🗑️ 기존 파일 삭제: ${oldPath}`)
 65 |       } catch (error) {
 66 |         console.log('기존 파일 삭제 실패 (파일이 없을 수 있음):', error)
 67 |       }
 68 |     }
 69 |     
 70 |     // 같은 purpose의 다른 파일들도 삭제
 71 |     try {
 72 |       const files = await fs.readdir(publicPath)
 73 |       for (const existingFile of files) {
 74 |         if (existingFile.startsWith(`${purpose}-`) && existingFile !== uniqueFileName) {
 75 |           const fileToDelete = path.join(publicPath, existingFile)
 76 |           await fs.unlink(fileToDelete)
 77 |           console.log(`🗑️ 이전 ${purpose} 파일 삭제: ${existingFile}`)
 78 |         }
 79 |       }
 80 |     } catch (error) {
 81 |       console.log('이전 파일 정리 중 오류:', error)
 82 |     }
 83 | 
 84 |     // 파일 저장
 85 |     const filePath = path.join(publicPath, uniqueFileName)
 86 |     const bytes = await file.arrayBuffer()
 87 |     const buffer = Buffer.from(bytes)
 88 |     
 89 |     await fs.writeFile(filePath, buffer)
 90 |     
 91 |     // 웹에서 접근 가능한 경로 반환
 92 |     const webPath = `/uploads/${uniqueFileName}`
 93 |     
 94 |     console.log(`✅ 이미지 업로드 완료: ${webPath}`)
 95 |     
 96 |     return NextResponse.json({ 
 97 |       success: true,
 98 |       path: webPath,
 99 |       filename: uniqueFileName
100 |     })
101 |     
102 |   } catch (error) {
103 |     console.error('파일 업로드 오류:', error)
104 |     return NextResponse.json(
105 |       { error: '파일 업로드 중 오류가 발생했습니다' },
106 |       { status: 500 }
107 |     )
108 |   }
109 | }


--------------------------------------------------------------------------------
/components/global-save-button.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState } from "react"
  4 | import { Save, Check, AlertCircle } from "lucide-react"
  5 | import { useInlineEditor } from "@/contexts/inline-editor-context"
  6 | 
  7 | export function GlobalSaveButton() {
  8 |   const { isEditMode, saveToFile, getData } = useInlineEditor()
  9 |   const [isSaving, setIsSaving] = useState(false)
 10 |   const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'success' | 'error'>('idle')
 11 |   const [message, setMessage] = useState("")
 12 |   
 13 |   if (!isEditMode) return null
 14 |   
 15 |   const handleSaveAll = async () => {
 16 |     setIsSaving(true)
 17 |     setSaveStatus('saving')
 18 |     setMessage("저장 중...")
 19 |     
 20 |     const components = [
 21 |       { name: 'hero', section: 'Info' },
 22 |       { name: 'about', section: 'Info' },
 23 |       { name: 'projects', section: 'Info' },
 24 |       { name: 'contact', section: 'Info' },
 25 |       { name: 'contact', section: 'SocialLinks', dataKey: 'contact-social-links' },
 26 |       { name: 'footer', section: 'Info' },
 27 |       { name: 'header', section: 'Config' }
 28 |     ]
 29 |     
 30 |     let successCount = 0
 31 |     const failedComponents: string[] = []
 32 |     
 33 |     for (const comp of components) {
 34 |       const dataKey = comp.dataKey || (comp.name === 'header' ? 'nav-config' : `${comp.name}-info`)
 35 |       const data = getData(dataKey)
 36 |       
 37 |       if (data) {
 38 |         try {
 39 |           const success = await saveToFile(comp.name, comp.section, data)
 40 |           if (success) {
 41 |             successCount++
 42 |           } else {
 43 |             failedComponents.push(comp.name)
 44 |           }
 45 |         } catch (error) {
 46 |           console.error(`${comp.name} 저장 실패:`, error)
 47 |           failedComponents.push(comp.name)
 48 |         }
 49 |       }
 50 |     }
 51 |     
 52 |     if (failedComponents.length === 0) {
 53 |       setSaveStatus('success')
 54 |       setMessage(`✅ 모든 변경사항이 저장되었습니다 (${successCount}개 컴포넌트)`)
 55 |       setTimeout(() => {
 56 |         setSaveStatus('idle')
 57 |         setMessage("")
 58 |       }, 3000)
 59 |     } else {
 60 |       setSaveStatus('error')
 61 |       setMessage(`⚠️ 일부 저장 실패: ${failedComponents.join(', ')}`)
 62 |       setTimeout(() => {
 63 |         setSaveStatus('idle')
 64 |         setMessage("")
 65 |       }, 5000)
 66 |     }
 67 |     
 68 |     setIsSaving(false)
 69 |   }
 70 |   
 71 |   return (
 72 |     <div className="fixed bottom-20 right-4 z-[9998] flex flex-col items-end gap-2">
 73 |       <button
 74 |         onClick={handleSaveAll}
 75 |         disabled={isSaving}
 76 |         className={`
 77 |           p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-110 
 78 |           disabled:opacity-50 disabled:cursor-not-allowed
 79 |           ${saveStatus === 'success' ? 'bg-green-600' : 
 80 |             saveStatus === 'error' ? 'bg-red-600' : 
 81 |             'bg-blue-600'} 
 82 |           text-white
 83 |         `}
 84 |         title="모든 변경사항을 파일에 저장"
 85 |       >
 86 |         {saveStatus === 'success' ? (
 87 |           <Check className="h-5 w-5" />
 88 |         ) : saveStatus === 'error' ? (
 89 |           <AlertCircle className="h-5 w-5" />
 90 |         ) : (
 91 |           <Save className="h-5 w-5" />
 92 |         )}
 93 |       </button>
 94 |       
 95 |       {message && (
 96 |         <div className={`
 97 |           px-4 py-2 rounded-lg shadow-lg text-sm max-w-xs
 98 |           ${saveStatus === 'success' ? 'bg-green-100 text-green-800' : 
 99 |             saveStatus === 'error' ? 'bg-red-100 text-red-800' : 
100 |             'bg-blue-100 text-blue-800'}
101 |         `}>
102 |           {message}
103 |         </div>
104 |       )}
105 |     </div>
106 |   )
107 | }


--------------------------------------------------------------------------------
/components/editable/editable-text.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useEffect, useRef } from 'react'
  4 | import { useInlineEditor } from '@/contexts/inline-editor-context'
  5 | import { Check, X, Edit2 } from 'lucide-react'
  6 | 
  7 | interface EditableTextProps {
  8 |   value: string
  9 |   onChange: (value: string) => void
 10 |   className?: string
 11 |   placeholder?: string
 12 |   multiline?: boolean
 13 |   storageKey?: string
 14 | }
 15 | 
 16 | export function EditableText({ 
 17 |   value, 
 18 |   onChange, 
 19 |   className = '', 
 20 |   placeholder = '텍스트를 입력하세요',
 21 |   multiline = false,
 22 |   storageKey
 23 | }: EditableTextProps) {
 24 |   const { isEditMode, saveData, getData } = useInlineEditor()
 25 |   const [isEditing, setIsEditing] = useState(false)
 26 |   const [tempValue, setTempValue] = useState(value)
 27 |   const [isHovered, setIsHovered] = useState(false)
 28 |   const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
 29 | 
 30 |   // 초기값 로드
 31 |   useEffect(() => {
 32 |     if (storageKey) {
 33 |       const saved = getData(storageKey) as string | null
 34 |       if (saved) {
 35 |         onChange(saved)
 36 |         setTempValue(saved)
 37 |       }
 38 |     }
 39 |   }, [storageKey])
 40 | 
 41 |   const handleSave = () => {
 42 |     onChange(tempValue)
 43 |     if (storageKey) {
 44 |       saveData(storageKey, tempValue)
 45 |     }
 46 |     setIsEditing(false)
 47 |   }
 48 | 
 49 |   const handleCancel = () => {
 50 |     setTempValue(value)
 51 |     setIsEditing(false)
 52 |   }
 53 | 
 54 |   const handleKeyDown = (e: React.KeyboardEvent) => {
 55 |     if (e.key === 'Enter' && !multiline) {
 56 |       handleSave()
 57 |     } else if (e.key === 'Escape') {
 58 |       handleCancel()
 59 |     }
 60 |   }
 61 | 
 62 |   useEffect(() => {
 63 |     if (isEditing && inputRef.current) {
 64 |       inputRef.current.focus()
 65 |       inputRef.current.select()
 66 |     }
 67 |   }, [isEditing])
 68 | 
 69 |   if (!isEditMode) {
 70 |     return <span className={className}>{value || placeholder}</span>
 71 |   }
 72 | 
 73 |   if (isEditing) {
 74 |     return (
 75 |       <span className="inline-flex items-center gap-1">
 76 |         {multiline ? (
 77 |           <textarea
 78 |             ref={inputRef as React.RefObject<HTMLTextAreaElement>}
 79 |             value={tempValue}
 80 |             onChange={(e) => setTempValue(e.target.value)}
 81 |             onKeyDown={handleKeyDown}
 82 |             className={`${className} bg-background border rounded px-1 py-0.5 text-sm`}
 83 |             rows={3}
 84 |           />
 85 |         ) : (
 86 |           <input
 87 |             ref={inputRef as React.RefObject<HTMLInputElement>}
 88 |             type="text"
 89 |             value={tempValue}
 90 |             onChange={(e) => setTempValue(e.target.value)}
 91 |             onKeyDown={handleKeyDown}
 92 |             className={`${className} bg-background border rounded px-1 py-0.5 text-sm min-w-[100px]`}
 93 |           />
 94 |         )}
 95 |         <button
 96 |           onClick={handleSave}
 97 |           className="p-1 rounded hover:bg-green-500/20 text-green-500 transition-colors"
 98 |           title="저장 (Enter)"
 99 |         >
100 |           <Check className="h-4 w-4" />
101 |         </button>
102 |         <button
103 |           onClick={handleCancel}
104 |           className="p-1 rounded hover:bg-red-500/20 text-red-500 transition-colors"
105 |           title="취소 (Esc)"
106 |         >
107 |           <X className="h-4 w-4" />
108 |         </button>
109 |       </span>
110 |     )
111 |   }
112 | 
113 |   return (
114 |     <span
115 |       className={`${className} relative group cursor-pointer hover:bg-muted/50 rounded px-1 transition-colors`}
116 |       onMouseEnter={() => setIsHovered(true)}
117 |       onMouseLeave={() => setIsHovered(false)}
118 |       onClick={() => setIsEditing(true)}
119 |     >
120 |       {value || placeholder}
121 |       {isHovered && (
122 |         <Edit2 className="inline-block ml-1 h-3 w-3 text-muted-foreground" />
123 |       )}
124 |     </span>
125 |   )
126 | }


--------------------------------------------------------------------------------
/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | // Inspired by react-hot-toast library
  4 | import * as React from "react"
  5 | 
  6 | import type {
  7 |   ToastActionElement,
  8 |   ToastProps,
  9 | } from "@/components/ui/toast"
 10 | 
 11 | const TOAST_LIMIT = 1
 12 | const TOAST_REMOVE_DELAY = 1000000
 13 | 
 14 | type ToasterToast = ToastProps & {
 15 |   id: string
 16 |   title?: React.ReactNode
 17 |   description?: React.ReactNode
 18 |   action?: ToastActionElement
 19 | }
 20 | 
 21 | const actionTypes = {
 22 |   ADD_TOAST: "ADD_TOAST",
 23 |   UPDATE_TOAST: "UPDATE_TOAST",
 24 |   DISMISS_TOAST: "DISMISS_TOAST",
 25 |   REMOVE_TOAST: "REMOVE_TOAST",
 26 | } as const
 27 | 
 28 | let count = 0
 29 | 
 30 | function genId() {
 31 |   count = (count + 1) % Number.MAX_SAFE_INTEGER
 32 |   return count.toString()
 33 | }
 34 | 
 35 | type ActionType = typeof actionTypes
 36 | 
 37 | type Action =
 38 |   | {
 39 |       type: ActionType["ADD_TOAST"]
 40 |       toast: ToasterToast
 41 |     }
 42 |   | {
 43 |       type: ActionType["UPDATE_TOAST"]
 44 |       toast: Partial<ToasterToast>
 45 |     }
 46 |   | {
 47 |       type: ActionType["DISMISS_TOAST"]
 48 |       toastId?: ToasterToast["id"]
 49 |     }
 50 |   | {
 51 |       type: ActionType["REMOVE_TOAST"]
 52 |       toastId?: ToasterToast["id"]
 53 |     }
 54 | 
 55 | interface State {
 56 |   toasts: ToasterToast[]
 57 | }
 58 | 
 59 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 60 | 
 61 | const addToRemoveQueue = (toastId: string) => {
 62 |   if (toastTimeouts.has(toastId)) {
 63 |     return
 64 |   }
 65 | 
 66 |   const timeout = setTimeout(() => {
 67 |     toastTimeouts.delete(toastId)
 68 |     dispatch({
 69 |       type: "REMOVE_TOAST",
 70 |       toastId: toastId,
 71 |     })
 72 |   }, TOAST_REMOVE_DELAY)
 73 | 
 74 |   toastTimeouts.set(toastId, timeout)
 75 | }
 76 | 
 77 | export const reducer = (state: State, action: Action): State => {
 78 |   switch (action.type) {
 79 |     case "ADD_TOAST":
 80 |       return {
 81 |         ...state,
 82 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 83 |       }
 84 | 
 85 |     case "UPDATE_TOAST":
 86 |       return {
 87 |         ...state,
 88 |         toasts: state.toasts.map((t) =>
 89 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 90 |         ),
 91 |       }
 92 | 
 93 |     case "DISMISS_TOAST": {
 94 |       const { toastId } = action
 95 | 
 96 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 97 |       // but I'll keep it here for simplicity
 98 |       if (toastId) {
 99 |         addToRemoveQueue(toastId)
100 |       } else {
101 |         state.toasts.forEach((toast) => {
102 |           addToRemoveQueue(toast.id)
103 |         })
104 |       }
105 | 
106 |       return {
107 |         ...state,
108 |         toasts: state.toasts.map((t) =>
109 |           t.id === toastId || toastId === undefined
110 |             ? {
111 |                 ...t,
112 |                 open: false,
113 |               }
114 |             : t
115 |         ),
116 |       }
117 |     }
118 |     case "REMOVE_TOAST":
119 |       if (action.toastId === undefined) {
120 |         return {
121 |           ...state,
122 |           toasts: [],
123 |         }
124 |       }
125 |       return {
126 |         ...state,
127 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
128 |       }
129 |   }
130 | }
131 | 
132 | const listeners: Array<(state: State) => void> = []
133 | 
134 | let memoryState: State = { toasts: [] }
135 | 
136 | function dispatch(action: Action) {
137 |   memoryState = reducer(memoryState, action)
138 |   listeners.forEach((listener) => {
139 |     listener(memoryState)
140 |   })
141 | }
142 | 
143 | type Toast = Omit<ToasterToast, "id">
144 | 
145 | function toast({ ...props }: Toast) {
146 |   const id = genId()
147 | 
148 |   const update = (props: ToasterToast) =>
149 |     dispatch({
150 |       type: "UPDATE_TOAST",
151 |       toast: { ...props, id },
152 |     })
153 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
154 | 
155 |   dispatch({
156 |     type: "ADD_TOAST",
157 |     toast: {
158 |       ...props,
159 |       id,
160 |       open: true,
161 |       onOpenChange: (open) => {
162 |         if (!open) dismiss()
163 |       },
164 |     },
165 |   })
166 | 
167 |   return {
168 |     id: id,
169 |     dismiss,
170 |     update,
171 |   }
172 | }
173 | 
174 | function useToast() {
175 |   const [state, setState] = React.useState<State>(memoryState)
176 | 
177 |   React.useEffect(() => {
178 |     listeners.push(setState)
179 |     return () => {
180 |       const index = listeners.indexOf(setState)
181 |       if (index > -1) {
182 |         listeners.splice(index, 1)
183 |       }
184 |     }
185 |   }, [state])
186 | 
187 |   return {
188 |     ...state,
189 |     toast,
190 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
191 |   }
192 | }
193 | 
194 | export { useToast, toast }
195 | 


--------------------------------------------------------------------------------
/app/api/update-field/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextRequest, NextResponse } from 'next/server'
  2 | import fs from 'fs/promises'
  3 | import path from 'path'
  4 | 
  5 | export async function POST(request: NextRequest) {
  6 |   // 🔒 개발 환경에서만 작동 (배포 시 자동 비활성화)
  7 |   if (process.env.NODE_ENV !== 'development') {
  8 |     return NextResponse.json(
  9 |       { error: '개발 모드에서만 사용 가능합니다' },
 10 |       { status: 403 }
 11 |     )
 12 |   }
 13 | 
 14 |   try {
 15 |     const { component, field, value } = await request.json()
 16 |     
 17 |     // 📁 수정 가능한 컴포넌트 파일들
 18 |     const componentFiles: Record<string, string> = {
 19 |       'hero': 'components/hero.tsx',
 20 |       'about': 'components/about.tsx',
 21 |       'projects': 'components/projects.tsx',
 22 |       'contact': 'components/contact.tsx',
 23 |       'footer': 'components/footer.tsx',
 24 |       'header': 'components/header.tsx',
 25 |       'navbar': 'components/navbar.tsx'
 26 |     }
 27 |     
 28 |     const fileName = componentFiles[component]
 29 |     if (!fileName) {
 30 |       return NextResponse.json(
 31 |         { error: '허용되지 않은 컴포넌트입니다' },
 32 |         { status: 400 }
 33 |       )
 34 |     }
 35 |     
 36 |     // 파일 읽기
 37 |     const filePath = path.join(process.cwd(), fileName)
 38 |     let content = await fs.readFile(filePath, 'utf-8')
 39 |     
 40 |     // 값 포맷팅
 41 |     let formattedValue: string
 42 |     if (typeof value === 'string') {
 43 |       // 문자열 값 이스케이프 처리
 44 |       const escaped = value.replace(/\\/g, '\\\\')
 45 |                           .replace(/"/g, '\\"')
 46 |                           .replace(/\n/g, '\\n')
 47 |                           .replace(/\r/g, '\\r')
 48 |                           .replace(/\t/g, '\\t')
 49 |       formattedValue = `"${escaped}"`
 50 |     } else if (Array.isArray(value)) {
 51 |       formattedValue = JSON.stringify(value)
 52 |     } else if (typeof value === 'object' && value !== null) {
 53 |       formattedValue = JSON.stringify(value)
 54 |     } else if (typeof value === 'number' || typeof value === 'boolean') {
 55 |       formattedValue = String(value)
 56 |     } else {
 57 |       formattedValue = 'null'
 58 |     }
 59 |     
 60 |     // const 변수 패턴 찾기 - 배열이나 객체를 포함한 전체 선언
 61 |     const constPattern = new RegExp(
 62 |       `(const\\s+${field}\\s*=\\s*)([\\s\\S]*?)(?=\\n\\s*(?:const|let|var|function|export|import|//|/\\*|\\n\\s*$))`,
 63 |       'g'
 64 |     )
 65 |     
 66 |     // defaultInfo 객체 내부 필드 패턴
 67 |     const fieldPattern = new RegExp(
 68 |       `(^\\s*${field}:\\s*)([^,\\n}]+)(,?)`,
 69 |       'gm'
 70 |     )
 71 |     
 72 |     // 먼저 const 변수로 선언되어 있는지 확인
 73 |     if (content.includes(`const ${field} =`)) {
 74 |       // const 변수 전체를 새 값으로 교체
 75 |       const startIndex = content.indexOf(`const ${field} =`)
 76 |       if (startIndex !== -1) {
 77 |         // 다음 const, let, var, function 등을 찾아서 끝 위치 결정
 78 |         const afterStart = startIndex + `const ${field} =`.length
 79 |         let endIndex = content.length
 80 |         
 81 |         // 다음 최상위 선언을 찾기
 82 |         const nextPatterns = [
 83 |           /\nconst\s+/g,
 84 |           /\nlet\s+/g,
 85 |           /\nvar\s+/g,
 86 |           /\nfunction\s+/g,
 87 |           /\nexport\s+/g,
 88 |           /\nimport\s+/g,
 89 |           /\n\/\/ /g,
 90 |           /\n\/\*/g,
 91 |           /\n\s*\n(?=\s*const|\s*let|\s*var|\s*function)/g
 92 |         ]
 93 |         
 94 |         for (const pattern of nextPatterns) {
 95 |           pattern.lastIndex = afterStart
 96 |           const match = pattern.exec(content)
 97 |           if (match && match.index < endIndex) {
 98 |             endIndex = match.index
 99 |           }
100 |         }
101 |         
102 |         // 교체
103 |         content = content.substring(0, startIndex) + 
104 |                   `const ${field} = ${formattedValue}` + 
105 |                   content.substring(endIndex)
106 |       }
107 |     }
108 |     // 그다음 객체 필드로 존재하는지 확인
109 |     else if (fieldPattern.test(content)) {
110 |       content = content.replace(fieldPattern, (match, prefix, oldValue, comma) => {
111 |         return `${prefix}${formattedValue}${comma || ''}`
112 |       })
113 |     }
114 |     // 둘 다 없으면 defaultInfo 객체 안에 추가
115 |     else {
116 |       const defaultInfoPattern = /const\s+default\w+\s*=\s*\{/
117 |       const match = content.match(defaultInfoPattern)
118 |       
119 |       if (match) {
120 |         const insertIndex = match.index! + match[0].length
121 |         const insertion = `\n    ${field}: ${formattedValue},`
122 |         content = content.slice(0, insertIndex) + insertion + content.slice(insertIndex)
123 |       } else {
124 |         return NextResponse.json(
125 |           { error: 'defaultInfo 객체를 찾을 수 없습니다' },
126 |           { status: 400 }
127 |         )
128 |       }
129 |     }
130 |     
131 |     // 파일 저장
132 |     await fs.writeFile(filePath, content, 'utf-8')
133 |     
134 |     console.log(`✅ ${fileName}의 ${field} 필드가 업데이트되었습니다`)
135 |     
136 |     return NextResponse.json({ 
137 |       success: true,
138 |       message: '필드가 성공적으로 저장되었습니다'
139 |     })
140 |     
141 |   } catch (error) {
142 |     console.error('필드 저장 오류:', error)
143 |     return NextResponse.json(
144 |       { error: '필드 저장 중 오류가 발생했습니다' },
145 |       { status: 500 }
146 |     )
147 |   }
148 | }


--------------------------------------------------------------------------------
/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as ToastPrimitives from "@radix-ui/react-toast"
  5 | import { cva, type VariantProps } from "class-variance-authority"
  6 | import { X } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const ToastProvider = ToastPrimitives.Provider
 11 | 
 12 | const ToastViewport = React.forwardRef<
 13 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 14 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 15 | >(({ className, ...props }, ref) => (
 16 |   <ToastPrimitives.Viewport
 17 |     ref={ref}
 18 |     className={cn(
 19 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 20 |       className
 21 |     )}
 22 |     {...props}
 23 |   />
 24 | ))
 25 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 26 | 
 27 | const toastVariants = cva(
 28 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 29 |   {
 30 |     variants: {
 31 |       variant: {
 32 |         default: "border bg-background text-foreground",
 33 |         destructive:
 34 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 35 |       },
 36 |     },
 37 |     defaultVariants: {
 38 |       variant: "default",
 39 |     },
 40 |   }
 41 | )
 42 | 
 43 | const Toast = React.forwardRef<
 44 |   React.ElementRef<typeof ToastPrimitives.Root>,
 45 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 46 |     VariantProps<typeof toastVariants>
 47 | >(({ className, variant, ...props }, ref) => {
 48 |   return (
 49 |     <ToastPrimitives.Root
 50 |       ref={ref}
 51 |       className={cn(toastVariants({ variant }), className)}
 52 |       {...props}
 53 |     />
 54 |   )
 55 | })
 56 | Toast.displayName = ToastPrimitives.Root.displayName
 57 | 
 58 | const ToastAction = React.forwardRef<
 59 |   React.ElementRef<typeof ToastPrimitives.Action>,
 60 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 61 | >(({ className, ...props }, ref) => (
 62 |   <ToastPrimitives.Action
 63 |     ref={ref}
 64 |     className={cn(
 65 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 66 |       className
 67 |     )}
 68 |     {...props}
 69 |   />
 70 | ))
 71 | ToastAction.displayName = ToastPrimitives.Action.displayName
 72 | 
 73 | const ToastClose = React.forwardRef<
 74 |   React.ElementRef<typeof ToastPrimitives.Close>,
 75 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 76 | >(({ className, ...props }, ref) => (
 77 |   <ToastPrimitives.Close
 78 |     ref={ref}
 79 |     className={cn(
 80 |       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 81 |       className
 82 |     )}
 83 |     toast-close=""
 84 |     {...props}
 85 |   >
 86 |     <X className="h-4 w-4" />
 87 |   </ToastPrimitives.Close>
 88 | ))
 89 | ToastClose.displayName = ToastPrimitives.Close.displayName
 90 | 
 91 | const ToastTitle = React.forwardRef<
 92 |   React.ElementRef<typeof ToastPrimitives.Title>,
 93 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 94 | >(({ className, ...props }, ref) => (
 95 |   <ToastPrimitives.Title
 96 |     ref={ref}
 97 |     className={cn("text-sm font-semibold", className)}
 98 |     {...props}
 99 |   />
100 | ))
101 | ToastTitle.displayName = ToastPrimitives.Title.displayName
102 | 
103 | const ToastDescription = React.forwardRef<
104 |   React.ElementRef<typeof ToastPrimitives.Description>,
105 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
106 | >(({ className, ...props }, ref) => (
107 |   <ToastPrimitives.Description
108 |     ref={ref}
109 |     className={cn("text-sm opacity-90", className)}
110 |     {...props}
111 |   />
112 | ))
113 | ToastDescription.displayName = ToastPrimitives.Description.displayName
114 | 
115 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
116 | 
117 | type ToastActionElement = React.ReactElement<typeof ToastAction>
118 | 
119 | export {
120 |   type ToastProps,
121 |   type ToastActionElement,
122 |   ToastProvider,
123 |   ToastViewport,
124 |   Toast,
125 |   ToastTitle,
126 |   ToastDescription,
127 |   ToastClose,
128 |   ToastAction,
129 | }
130 | 


--------------------------------------------------------------------------------
/components/editable/editable-icon.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useEffect } from 'react'
  4 | import { useInlineEditor } from '@/contexts/inline-editor-context'
  5 | import * as Icons from 'lucide-react'
  6 | import { Edit2, Search } from 'lucide-react'
  7 | 
  8 | interface EditableIconProps {
  9 |   icon: string
 10 |   onChange: (icon: string) => void
 11 |   className?: string
 12 |   size?: number
 13 |   storageKey?: string
 14 | }
 15 | 
 16 | // 자주 사용하는 아이콘들
 17 | const popularIcons = [
 18 |   'Home', 'User', 'Mail', 'Phone', 'MapPin', 'Calendar', 'Clock', 'Heart',
 19 |   'Star', 'Share2', 'Link', 'Download', 'Upload', 'Search', 'Settings',
 20 |   'Instagram', 'Youtube', 'Facebook', 'Twitter', 'Linkedin', 'Github',
 21 |   'Globe', 'Camera', 'Image', 'Video', 'Music', 'Mic', 'Book', 'FileText',
 22 |   'Briefcase', 'ShoppingBag', 'ShoppingCart', 'CreditCard', 'DollarSign',
 23 |   'TrendingUp', 'Award', 'Gift', 'Coffee', 'MessageCircle', 'MessageSquare',
 24 |   'Send', 'Bell', 'BellRing', 'Check', 'X', 'Plus', 'Minus', 'ChevronRight',
 25 |   'ChevronLeft', 'ChevronDown', 'ChevronUp', 'ArrowRight', 'ArrowLeft',
 26 |   'Menu', 'Grid', 'List', 'Filter', 'Trash2', 'Edit', 'Copy', 'Clipboard'
 27 | ]
 28 | 
 29 | export function EditableIcon({ 
 30 |   icon, 
 31 |   onChange, 
 32 |   className = '',
 33 |   size = 24,
 34 |   storageKey
 35 | }: EditableIconProps) {
 36 |   const { isEditMode, saveData, getData } = useInlineEditor()
 37 |   const [isHovered, setIsHovered] = useState(false)
 38 |   const [showPicker, setShowPicker] = useState(false)
 39 |   const [searchTerm, setSearchTerm] = useState('')
 40 |   const [selectedIcon, setSelectedIcon] = useState(icon)
 41 | 
 42 |   // 초기값 로드
 43 |   useEffect(() => {
 44 |     if (storageKey) {
 45 |       const saved = getData(storageKey) as string | null
 46 |       if (saved) {
 47 |         onChange(saved)
 48 |         setSelectedIcon(saved)
 49 |       }
 50 |     }
 51 |   }, [storageKey])
 52 | 
 53 |   const IconComponent = Icons[icon as keyof typeof Icons] as React.ComponentType<{className?: string; size?: number}>
 54 |   const FallbackIcon = Icons.HelpCircle
 55 | 
 56 |   const filteredIcons = searchTerm 
 57 |     ? popularIcons.filter(name => 
 58 |         name.toLowerCase().includes(searchTerm.toLowerCase())
 59 |       )
 60 |     : popularIcons
 61 | 
 62 |   const handleIconSelect = (iconName: string) => {
 63 |     setSelectedIcon(iconName)
 64 |     onChange(iconName)
 65 |     if (storageKey) {
 66 |       saveData(storageKey, iconName)
 67 |     }
 68 |     setShowPicker(false)
 69 |     setSearchTerm('')
 70 |   }
 71 | 
 72 |   if (!isEditMode) {
 73 |     return IconComponent ? <IconComponent className={className} size={size} /> : <FallbackIcon className={className} size={size} />
 74 |   }
 75 | 
 76 |   return (
 77 |     <>
 78 |       <div
 79 |         className="relative inline-block group cursor-pointer"
 80 |         onMouseEnter={() => setIsHovered(true)}
 81 |         onMouseLeave={() => setIsHovered(false)}
 82 |         onClick={() => setShowPicker(true)}
 83 |       >
 84 |         {IconComponent ? <IconComponent className={className} size={size} /> : <FallbackIcon className={className} size={size} />}
 85 |         {isHovered && (
 86 |           <div className="absolute -top-1 -right-1 p-0.5 bg-primary rounded-full">
 87 |             <Edit2 className="h-2.5 w-2.5 text-primary-foreground" />
 88 |           </div>
 89 |         )}
 90 |       </div>
 91 | 
 92 |       {/* 아이콘 선택 모달 */}
 93 |       {showPicker && (
 94 |         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
 95 |           <div className="bg-background border rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-hidden flex flex-col">
 96 |             <h3 className="text-lg font-semibold mb-4">아이콘 선택</h3>
 97 |             
 98 |             {/* 검색 */}
 99 |             <div className="relative mb-4">
100 |               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
101 |               <input
102 |                 type="text"
103 |                 value={searchTerm}
104 |                 onChange={(e) => setSearchTerm(e.target.value)}
105 |                 placeholder="아이콘 검색..."
106 |                 className="w-full pl-10 pr-4 py-2 border rounded-lg bg-background"
107 |                 autoFocus
108 |               />
109 |             </div>
110 | 
111 |             {/* 아이콘 그리드 */}
112 |             <div className="flex-1 overflow-y-auto">
113 |               <div className="grid grid-cols-8 gap-2">
114 |                 {filteredIcons.map((iconName) => {
115 |                   const Icon = Icons[iconName as keyof typeof Icons] as React.ComponentType<{className?: string; size?: number}>
116 |                   if (!Icon || typeof Icon !== 'function') return null
117 |                   
118 |                   return (
119 |                     <button
120 |                       key={iconName}
121 |                       onClick={() => handleIconSelect(iconName)}
122 |                       className={`p-3 rounded-lg hover:bg-muted transition-colors ${
123 |                         selectedIcon === iconName ? 'bg-primary text-primary-foreground' : ''
124 |                       }`}
125 |                       title={iconName}
126 |                     >
127 |                       <Icon className="h-6 w-6 mx-auto" />
128 |                     </button>
129 |                   )
130 |                 })}
131 |               </div>
132 |             </div>
133 | 
134 |             <button
135 |               onClick={() => {
136 |                 setShowPicker(false)
137 |                 setSearchTerm('')
138 |               }}
139 |               className="mt-4 w-full py-2 border rounded-lg hover:bg-muted"
140 |             >
141 |               취소
142 |             </button>
143 |           </div>
144 |         </div>
145 |       )}
146 |     </>
147 |   )
148 | }


--------------------------------------------------------------------------------
/contexts/inline-editor-context.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import React, { createContext, useContext, useState, useEffect } from 'react'
  4 | import { cleanupInvalidImages } from '@/lib/cleanup-storage'
  5 | import { GlobalSaveButton } from '@/components/global-save-button'
  6 | 
  7 | interface EditorContextType {
  8 |   isEditMode: boolean
  9 |   setIsEditMode: (value: boolean) => void
 10 |   isDevelopment: boolean
 11 |   saveData: (key: string, value: unknown) => void
 12 |   getData: (key: string) => unknown
 13 |   hoveredElement: string | null
 14 |   setHoveredElement: (element: string | null) => void
 15 |   saveToFile: (component: string, section: string, data: unknown) => Promise<boolean>
 16 |   saveFieldToFile: (component: string, field: string, value: unknown) => Promise<boolean>
 17 | }
 18 | 
 19 | const EditorContext = createContext<EditorContextType | undefined>(undefined)
 20 | 
 21 | export function InlineEditorProvider({ children }: { children: React.ReactNode }) {
 22 |   const [isEditMode, setIsEditMode] = useState(false)
 23 |   const [hoveredElement, setHoveredElement] = useState<string | null>(null)
 24 |   const isDevelopment = process.env.NODE_ENV === 'development'
 25 | 
 26 |   // localStorage에서 데이터 불러오기
 27 |   const getData = (key: string) => {
 28 |     if (typeof window !== 'undefined') {
 29 |       const saved = localStorage.getItem(`portfolio-${key}`)
 30 |       if (saved) {
 31 |         try {
 32 |           return JSON.parse(saved)
 33 |         } catch {
 34 |           return saved
 35 |         }
 36 |       }
 37 |     }
 38 |     return null
 39 |   }
 40 | 
 41 |   // localStorage에 데이터 저장
 42 |   const saveData = (key: string, value: unknown) => {
 43 |     if (typeof window !== 'undefined') {
 44 |       localStorage.setItem(`portfolio-${key}`, 
 45 |         typeof value === 'string' ? value : JSON.stringify(value)
 46 |       )
 47 |     }
 48 |   }
 49 |   
 50 |   // 실제 파일에 저장 (개발 모드에서만)
 51 |   const saveToFile = async (component: string, section: string, data: unknown): Promise<boolean> => {
 52 |     if (!isDevelopment) {
 53 |       console.warn('파일 저장은 개발 모드에서만 가능합니다')
 54 |       return false
 55 |     }
 56 |     
 57 |     try {
 58 |       const response = await fetch('/api/update-component', {
 59 |         method: 'POST',
 60 |         headers: {
 61 |           'Content-Type': 'application/json',
 62 |         },
 63 |         body: JSON.stringify({
 64 |           component,
 65 |           section,
 66 |           data
 67 |         })
 68 |       })
 69 |       
 70 |       const result = await response.json()
 71 |       
 72 |       if (result.success) {
 73 |         console.log('✅ 파일이 성공적으로 저장되었습니다')
 74 |         // localStorage도 업데이트
 75 |         saveData(`${component}-${section}`, data)
 76 |         return true
 77 |       } else {
 78 |         console.error('파일 저장 실패:', result.error)
 79 |         return false
 80 |       }
 81 |     } catch (error) {
 82 |       console.error('파일 저장 중 오류:', error)
 83 |       return false
 84 |     }
 85 |   }
 86 |   
 87 |   // 개별 필드 저장 (더 안전한 방식)
 88 |   const saveFieldToFile = async (component: string, field: string, value: unknown): Promise<boolean> => {
 89 |     if (!isDevelopment) {
 90 |       console.warn('파일 저장은 개발 모드에서만 가능합니다')
 91 |       return false
 92 |     }
 93 |     
 94 |     try {
 95 |       const response = await fetch('/api/update-field', {
 96 |         method: 'POST',
 97 |         headers: {
 98 |           'Content-Type': 'application/json',
 99 |         },
100 |         body: JSON.stringify({
101 |           component,
102 |           field,
103 |           value
104 |         })
105 |       })
106 |       
107 |       const result = await response.json()
108 |       
109 |       if (result.success) {
110 |         console.log(`✅ ${field} 필드가 성공적으로 저장되었습니다`)
111 |         return true
112 |       } else {
113 |         console.error('필드 저장 실패:', result.error)
114 |         return false
115 |       }
116 |     } catch (error) {
117 |       console.error('필드 저장 중 오류:', error)
118 |       return false
119 |     }
120 |   }
121 | 
122 |   // 컴포넌트 마운트 시 이미지 정리
123 |   useEffect(() => {
124 |     cleanupInvalidImages()
125 |   }, [])
126 | 
127 |   // 개발 모드에서 Ctrl+E로 편집 모드 토글
128 |   useEffect(() => {
129 |     if (!isDevelopment) return
130 |     
131 |     const handleKeyPress = (e: KeyboardEvent) => {
132 |       if (e.ctrlKey && (e.key === 'e' || e.key === 'E')) {
133 |         e.preventDefault()
134 |         setIsEditMode(prev => {
135 |           const newState = !prev
136 |           console.log('편집 모드:', newState ? 'ON' : 'OFF')
137 |           return newState
138 |         })
139 |       }
140 |     }
141 | 
142 |     window.addEventListener('keydown', handleKeyPress)
143 |     return () => window.removeEventListener('keydown', handleKeyPress)
144 |   }, [isDevelopment])
145 | 
146 |   return (
147 |     <EditorContext.Provider
148 |       value={{
149 |         isEditMode,
150 |         setIsEditMode,
151 |         isDevelopment,
152 |         saveData,
153 |         getData,
154 |         hoveredElement,
155 |         setHoveredElement,
156 |         saveToFile,
157 |         saveFieldToFile
158 |       }}
159 |     >
160 |       {children}
161 |       {isDevelopment && (
162 |         <>
163 |           <button
164 |             type="button"
165 |             onClick={() => setIsEditMode(!isEditMode)}
166 |             className="fixed bottom-4 right-4 z-[9999] p-3 bg-primary text-primary-foreground rounded-full shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-110"
167 |             aria-label={isEditMode ? "편집 모드 끄기" : "편집 모드 켜기"}
168 |           >
169 |             <span className="text-lg">{isEditMode ? '✕' : '✏️'}</span>
170 |           </button>
171 |           <GlobalSaveButton />
172 |         </>
173 |       )}
174 |     </EditorContext.Provider>
175 |   )
176 | }
177 | 
178 | export const useInlineEditor = () => {
179 |   const context = useContext(EditorContext)
180 |   if (context === undefined) {
181 |     throw new Error('useInlineEditor must be used within an InlineEditorProvider')
182 |   }
183 |   return context
184 | }


--------------------------------------------------------------------------------
/components/editable/editable-list.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useEffect } from 'react'
  4 | import { useInlineEditor } from '@/contexts/inline-editor-context'
  5 | import { Plus, Trash2, GripVertical } from 'lucide-react'
  6 | 
  7 | interface EditableListProps {
  8 |   items: string[]
  9 |   onChange: (items: string[]) => void
 10 |   className?: string
 11 |   storageKey?: string
 12 |   placeholder?: string
 13 |   maxItems?: number
 14 | }
 15 | 
 16 | export function EditableList({ 
 17 |   items, 
 18 |   onChange, 
 19 |   className = '',
 20 |   storageKey,
 21 |   placeholder = '새 항목',
 22 |   maxItems = 20
 23 | }: EditableListProps) {
 24 |   const { isEditMode, saveData, getData } = useInlineEditor()
 25 |   const [localItems, setLocalItems] = useState(items)
 26 |   const [draggedIndex, setDraggedIndex] = useState<number | null>(null)
 27 |   const [newItem, setNewItem] = useState('')
 28 |   const [editingIndex, setEditingIndex] = useState<number | null>(null)
 29 |   const [editValue, setEditValue] = useState('')
 30 | 
 31 |   // 초기값 로드
 32 |   useEffect(() => {
 33 |     if (storageKey) {
 34 |       const saved = getData(storageKey)
 35 |       if (saved && Array.isArray(saved)) {
 36 |         setLocalItems(saved)
 37 |         onChange(saved)
 38 |       }
 39 |     }
 40 |   }, [storageKey])
 41 | 
 42 |   const handleSave = (newItems: string[]) => {
 43 |     setLocalItems(newItems)
 44 |     onChange(newItems)
 45 |     if (storageKey) {
 46 |       saveData(storageKey, newItems)
 47 |     }
 48 |   }
 49 | 
 50 |   const handleAdd = () => {
 51 |     if (newItem.trim() && localItems.length < maxItems) {
 52 |       const updated = [...localItems, newItem.trim()]
 53 |       handleSave(updated)
 54 |       setNewItem('')
 55 |     }
 56 |   }
 57 | 
 58 |   const handleRemove = (index: number) => {
 59 |     const updated = localItems.filter((_, i) => i !== index)
 60 |     handleSave(updated)
 61 |   }
 62 | 
 63 |   const handleEdit = (index: number) => {
 64 |     setEditingIndex(index)
 65 |     setEditValue(localItems[index])
 66 |   }
 67 | 
 68 |   const handleSaveEdit = () => {
 69 |     if (editingIndex !== null) {
 70 |       const updated = [...localItems]
 71 |       updated[editingIndex] = editValue
 72 |       handleSave(updated)
 73 |       setEditingIndex(null)
 74 |       setEditValue('')
 75 |     }
 76 |   }
 77 | 
 78 |   const handleDragStart = (index: number) => {
 79 |     setDraggedIndex(index)
 80 |   }
 81 | 
 82 |   const handleDragOver = (e: React.DragEvent, index: number) => {
 83 |     e.preventDefault()
 84 |     if (draggedIndex === null || draggedIndex === index) return
 85 | 
 86 |     const draggedItem = localItems[draggedIndex]
 87 |     const updated = [...localItems]
 88 |     updated.splice(draggedIndex, 1)
 89 |     updated.splice(index, 0, draggedItem)
 90 |     
 91 |     setLocalItems(updated)
 92 |     setDraggedIndex(index)
 93 |   }
 94 | 
 95 |   const handleDragEnd = () => {
 96 |     if (draggedIndex !== null) {
 97 |       handleSave(localItems)
 98 |     }
 99 |     setDraggedIndex(null)
100 |   }
101 | 
102 |   if (!isEditMode) {
103 |     return (
104 |       <div className={className}>
105 |         {localItems.map((item, index) => (
106 |           <div key={index} className="mb-2">
107 |             {item}
108 |           </div>
109 |         ))}
110 |       </div>
111 |     )
112 |   }
113 | 
114 |   return (
115 |     <div className={className}>
116 |       {localItems.map((item, index) => (
117 |         <div
118 |           key={index}
119 |           draggable
120 |           onDragStart={() => handleDragStart(index)}
121 |           onDragOver={(e) => handleDragOver(e, index)}
122 |           onDragEnd={handleDragEnd}
123 |           className={`flex items-center gap-2 mb-2 p-2 rounded-lg border ${
124 |             draggedIndex === index ? 'opacity-50' : ''
125 |           } hover:bg-muted/50 group`}
126 |         >
127 |           <GripVertical className="h-4 w-4 text-muted-foreground cursor-move" />
128 |           
129 |           {editingIndex === index ? (
130 |             <div className="flex-1 flex gap-1">
131 |               <input
132 |                 type="text"
133 |                 value={editValue}
134 |                 onChange={(e) => setEditValue(e.target.value)}
135 |                 onKeyDown={(e) => {
136 |                   if (e.key === 'Enter') handleSaveEdit()
137 |                   if (e.key === 'Escape') setEditingIndex(null)
138 |                 }}
139 |                 className="flex-1 px-2 py-1 border rounded bg-background"
140 |                 autoFocus
141 |               />
142 |               <button
143 |                 onClick={handleSaveEdit}
144 |                 className="px-2 py-1 text-sm bg-green-500 text-white rounded hover:bg-green-600"
145 |               >
146 |                 저장
147 |               </button>
148 |               <button
149 |                 onClick={() => setEditingIndex(null)}
150 |                 className="px-2 py-1 text-sm bg-gray-500 text-white rounded hover:bg-gray-600"
151 |               >
152 |                 취소
153 |               </button>
154 |             </div>
155 |           ) : (
156 |             <>
157 |               <span 
158 |                 className="flex-1 cursor-pointer hover:bg-muted rounded px-2 py-1"
159 |                 onClick={() => handleEdit(index)}
160 |               >
161 |                 {item}
162 |               </span>
163 |               <button
164 |                 onClick={() => handleRemove(index)}
165 |                 className="opacity-0 group-hover:opacity-100 p-1 text-red-500 hover:bg-red-500/20 rounded transition-opacity"
166 |               >
167 |                 <Trash2 className="h-4 w-4" />
168 |               </button>
169 |             </>
170 |           )}
171 |         </div>
172 |       ))}
173 | 
174 |       {localItems.length < maxItems && (
175 |         <div className="flex gap-2 mt-2">
176 |           <input
177 |             type="text"
178 |             value={newItem}
179 |             onChange={(e) => setNewItem(e.target.value)}
180 |             onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
181 |             placeholder={placeholder}
182 |             className="flex-1 px-3 py-2 border rounded-lg bg-background"
183 |           />
184 |           <button
185 |             onClick={handleAdd}
186 |             className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 flex items-center gap-2"
187 |           >
188 |             <Plus className="h-4 w-4" />
189 |             추가
190 |           </button>
191 |         </div>
192 |       )}
193 |     </div>
194 |   )
195 | }


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "./safelist.css";
  3 | 
  4 | /* Tailwind v4 테마 설정 */
  5 | @theme {
  6 |   --color-background: hsl(0 0% 100%);
  7 |   --color-foreground: hsl(0 0% 3.9%);
  8 |   --color-card: hsl(0 0% 100%);
  9 |   --color-card-foreground: hsl(0 0% 3.9%);
 10 |   --color-popover: hsl(0 0% 100%);
 11 |   --color-popover-foreground: hsl(0 0% 3.9%);
 12 |   --color-primary: hsl(0 0% 9%);
 13 |   --color-primary-foreground: hsl(0 0% 98%);
 14 |   --color-secondary: hsl(0 0% 96.1%);
 15 |   --color-secondary-foreground: hsl(0 0% 9%);
 16 |   --color-muted: hsl(0 0% 96.1%);
 17 |   --color-muted-foreground: hsl(0 0% 45.1%);
 18 |   --color-accent: hsl(0 0% 96.1%);
 19 |   --color-accent-foreground: hsl(0 0% 9%);
 20 |   --color-destructive: hsl(0 84.2% 60.2%);
 21 |   --color-destructive-foreground: hsl(0 0% 98%);
 22 |   --color-border: hsl(0 0% 89.8%);
 23 |   --color-input: hsl(0 0% 89.8%);
 24 |   --color-ring: hsl(0 0% 3.9%);
 25 |   --radius: 0.5rem;
 26 | }
 27 | 
 28 | /* CSS 변수 (컴포넌트 호환성) */
 29 | :root {
 30 |   --background: 0 0% 100%;
 31 |   --foreground: 0 0% 3.9%;
 32 |   --card: 0 0% 100%;
 33 |   --card-foreground: 0 0% 3.9%;
 34 |   --popover: 0 0% 100%;
 35 |   --popover-foreground: 0 0% 3.9%;
 36 |   --primary: 0 0% 9%;
 37 |   --primary-foreground: 0 0% 98%;
 38 |   --secondary: 0 0% 96.1%;
 39 |   --secondary-foreground: 0 0% 9%;
 40 |   --muted: 0 0% 96.1%;
 41 |   --muted-foreground: 0 0% 45.1%;
 42 |   --accent: 0 0% 96.1%;
 43 |   --accent-foreground: 0 0% 9%;
 44 |   --destructive: 0 84.2% 60.2%;
 45 |   --destructive-foreground: 0 0% 98%;
 46 |   --border: 0 0% 89.8%;
 47 |   --input: 0 0% 89.8%;
 48 |   --ring: 0 0% 3.9%;
 49 |   --radius: 0.5rem;
 50 | }
 51 | 
 52 | .dark {
 53 |   --color-background: hsl(0 0% 3.9%);
 54 |   --color-foreground: hsl(0 0% 98%);
 55 |   --color-card: hsl(0 0% 3.9%);
 56 |   --color-card-foreground: hsl(0 0% 98%);
 57 |   --color-popover: hsl(0 0% 3.9%);
 58 |   --color-popover-foreground: hsl(0 0% 98%);
 59 |   --color-primary: hsl(0 0% 98%);
 60 |   --color-primary-foreground: hsl(0 0% 9%);
 61 |   --color-secondary: hsl(0 0% 14.9%);
 62 |   --color-secondary-foreground: hsl(0 0% 98%);
 63 |   --color-muted: hsl(0 0% 14.9%);
 64 |   --color-muted-foreground: hsl(0 0% 63.9%);
 65 |   --color-accent: hsl(0 0% 14.9%);
 66 |   --color-accent-foreground: hsl(0 0% 98%);
 67 |   --color-destructive: hsl(0 62.8% 30.6%);
 68 |   --color-destructive-foreground: hsl(0 0% 98%);
 69 |   --color-border: hsl(0 0% 14.9%);
 70 |   --color-input: hsl(0 0% 14.9%);
 71 |   --color-ring: hsl(0 0% 83.1%);
 72 |   
 73 |   --background: 0 0% 3.9%;
 74 |   --foreground: 0 0% 98%;
 75 |   --card: 0 0% 3.9%;
 76 |   --card-foreground: 0 0% 98%;
 77 |   --popover: 0 0% 3.9%;
 78 |   --popover-foreground: 0 0% 98%;
 79 |   --primary: 0 0% 98%;
 80 |   --primary-foreground: 0 0% 9%;
 81 |   --secondary: 0 0% 14.9%;
 82 |   --secondary-foreground: 0 0% 98%;
 83 |   --muted: 0 0% 14.9%;
 84 |   --muted-foreground: 0 0% 63.9%;
 85 |   --accent: 0 0% 14.9%;
 86 |   --accent-foreground: 0 0% 98%;
 87 |   --destructive: 0 62.8% 30.6%;
 88 |   --destructive-foreground: 0 0% 98%;
 89 |   --border: 0 0% 14.9%;
 90 |   --input: 0 0% 14.9%;
 91 |   --ring: 0 0% 83.1%;
 92 | }
 93 | 
 94 | /* Pretendard 폰트 설정 */
 95 | @layer base {
 96 |   body {
 97 |     font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
 98 |     -webkit-font-smoothing: antialiased;
 99 |     -moz-osx-font-smoothing: grayscale;
100 |     text-rendering: optimizeLegibility;
101 |     word-break: keep-all; /* 한글 줄바꿈 최적화 */
102 |     overflow-wrap: break-word;
103 |   }
104 | }
105 | 
106 | 
107 | /* 모바일 우선 설정 */
108 | @layer base {
109 |   * {
110 |     border-color: hsl(240 5.9% 90%);
111 |   }
112 |   
113 |   html {
114 |     @apply scroll-smooth;
115 |     font-size: 16px; /* 모바일 기본 폰트 크기 */
116 |   }
117 |   
118 |   body {
119 |     @apply bg-background text-foreground;
120 |     min-height: 100vh;
121 |     min-height: 100dvh; /* 모바일 뷰포트 대응 */
122 |   }
123 |   
124 |   /* 모바일 탭 대상 최소 크기 보장 */
125 |   button, a {
126 |     min-height: 44px;
127 |     min-width: 44px;
128 |     @apply touch-manipulation;
129 |   }
130 |   
131 |   /* 모바일 안전 영역 */
132 |   .safe-area-inset {
133 |     padding-left: env(safe-area-inset-left);
134 |     padding-right: env(safe-area-inset-right);
135 |     padding-bottom: env(safe-area-inset-bottom);
136 |   }
137 | }
138 | 
139 | /* 반응형 타이포그래피 */
140 | @layer utilities {
141 |   .text-responsive-xs {
142 |     @apply text-xs sm:text-sm;
143 |   }
144 |   
145 |   .text-responsive-sm {
146 |     @apply text-sm sm:text-base;
147 |   }
148 |   
149 |   .text-responsive-base {
150 |     @apply text-base sm:text-lg;
151 |   }
152 |   
153 |   .text-responsive-lg {
154 |     @apply text-lg sm:text-xl lg:text-2xl;
155 |   }
156 |   
157 |   .text-responsive-xl {
158 |     @apply text-xl sm:text-2xl lg:text-3xl;
159 |   }
160 |   
161 |   .text-responsive-2xl {
162 |     @apply text-2xl sm:text-3xl lg:text-4xl;
163 |   }
164 |   
165 |   .text-responsive-3xl {
166 |     @apply text-3xl sm:text-4xl lg:text-5xl;
167 |   }
168 |   
169 |   .text-responsive-4xl {
170 |     @apply text-4xl sm:text-5xl lg:text-6xl;
171 |   }
172 | }
173 | 
174 | 
175 | /* 부드러운 그림자 */
176 | @layer utilities {
177 |   .shadow-soft {
178 |     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
179 |   }
180 |   
181 |   .shadow-soft-lg {
182 |     box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
183 |   }
184 |   
185 |   .shadow-soft-xl {
186 |     box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
187 |   }
188 | }
189 | 
190 | /* 애니메이션 */
191 | @layer utilities {
192 |   .animate-in {
193 |     animation: fadeIn 0.5s ease-in-out;
194 |   }
195 |   
196 |   .animate-float {
197 |     animation: float 6s ease-in-out infinite;
198 |   }
199 |   
200 |   @keyframes fadeIn {
201 |     from {
202 |       opacity: 0;
203 |       transform: translateY(10px);
204 |     }
205 |     to {
206 |       opacity: 1;
207 |       transform: translateY(0);
208 |     }
209 |   }
210 |   
211 |   @keyframes float {
212 |     0%, 100% {
213 |       transform: translateY(0px);
214 |     }
215 |     50% {
216 |       transform: translateY(-10px);
217 |     }
218 |   }
219 | }
220 | 
221 | /* 모바일 뷰포트 헤이트 대응 */
222 | @supports (height: 100dvh) {
223 |   .h-screen {
224 |     height: 100dvh;
225 |   }
226 |   
227 |   .min-h-screen {
228 |     min-height: 100dvh;
229 |   }
230 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🎨 VibeCoding - 인라인 편집 포트폴리오 템플릿
  2 | 
  3 | <div align="center">
  4 |   <img src="https://img.shields.io/badge/Next.js-15.0-black?style=for-the-badge&logo=next.js" />
  5 |   <img src="https://img.shields.io/badge/TypeScript-5.0-blue?style=for-the-badge&logo=typescript" />
  6 |   <img src="https://img.shields.io/badge/Tailwind-3.4-38B2AC?style=for-the-badge&logo=tailwind-css" />
  7 |   <img src="https://img.shields.io/badge/License-MIT-green?style=for-the-badge" />
  8 | </div>
  9 | 
 10 | <br />
 11 | 
 12 | > 🚀 **개발자가 아니어도 쉽게 수정 가능한 포트폴리오 템플릿**  
 13 | > 인라인 편집 기능으로 실시간으로 내용을 수정하고, 이미지를 업로드하고, 레이아웃을 커스터마이징하세요.
 14 | 
 15 | <br />
 16 | 
 17 | ## 📺 강의 영상
 18 | 
 19 | - [fork 후 편집 및 배포 강의](https://www.youtube.com/watch?v=U6zL8qittGk)
 20 | 
 21 | <br />
 22 | 
 23 | ## ✨ 주요 기능
 24 | 
 25 | ### 🎯 **인라인 편집 시스템**
 26 | - **Ctrl + E** 또는 **편집 버튼**으로 편집 모드 활성화
 27 | - 텍스트, 이미지, 아이콘을 클릭해서 바로 수정
 28 | - 변경사항 자동 저장 (localStorage)
 29 | - 개발 모드에서 파일 시스템 저장 지원
 30 | 
 31 | ### 📱 **완벽한 반응형 디자인**
 32 | - 모바일, 태블릿, 데스크톱 최적화
 33 | - 다크모드/라이트모드 지원
 34 | - 부드러운 애니메이션과 트랜지션
 35 | 
 36 | ### 🎨 **커스터마이징 가능한 섹션**
 37 | - **Hero**: 인삿말, 프로필 이미지, 소셜 링크
 38 | - **About**: 경험, 스킬, 스토리, 취미
 39 | - **Projects**: 프로젝트 갤러리 (이미지/비디오)
 40 | - **Contact**: 연락처 정보, QR 코드, 문의 양식
 41 | 
 42 | ### 🔥 **스마트한 기능들**
 43 | - 의미있는 파일명 자동 생성 (hero-profile, about-background 등)
 44 | - 기존 파일 자동 삭제로 저장 공간 관리
 45 | - QR 코드로 연락처 저장 (vCard 3.0)
 46 | - 푸터 네비게이션 자동 동기화
 47 | - SNS 공유 시 프로필 이미지 자동 썸네일 (Open Graph)
 48 | 
 49 | <br />
 50 | 
 51 | ## 🚀 빠른 시작
 52 | 
 53 | ### 1. 설치
 54 | 
 55 | ```bash
 56 | # 저장소 클론
 57 | git clone https://github.com/Mrbaeksang/my-site-template.git
 58 | 
 59 | # 브랜치 확인 (기본 브랜치는 main입니다)
 60 | cd my-site-template
 61 | git branch
 62 | 
 63 | # 만약 master 브랜치에 있다면 main으로 전환
 64 | git checkout main
 65 | 
 66 | # 또는 처음부터 main 브랜치 지정하여 클론
 67 | git clone -b main https://github.com/Mrbaeksang/my-site-template.git
 68 | cd my-site-template
 69 | 
 70 | # 패키지 설치
 71 | npm install
 72 | 
 73 | # 개발 서버 실행
 74 | npm run dev
 75 | ```
 76 | 
 77 | ### 2. 편집 모드 사용법
 78 | 
 79 | 1. **편집 모드 켜기**
 80 |    - 개발 환경: `Ctrl + E` 또는 우하단 ✏️ 버튼 클릭
 81 |    - 편집 가능한 요소에 마우스를 올리면 편집 아이콘이 나타남
 82 | 
 83 | 2. **텍스트 편집**
 84 |    - 텍스트에 마우스 호버 → 편집 아이콘 클릭
 85 |    - 내용 수정 → Enter 또는 ✓ 버튼으로 저장
 86 |    - Esc 또는 × 버튼으로 취소
 87 | 
 88 | 3. **이미지/비디오 업로드**
 89 |    - 미디어 요소 호버 → 설정 아이콘 클릭
 90 |    - 파일 선택 또는 URL 입력
 91 |    - 자동으로 최적화된 파일명으로 저장
 92 | 
 93 | 4. **배경 설정**
 94 |    - 각 섹션 상단의 설정 아이콘 클릭
 95 |    - 이미지/비디오/색상 중 선택
 96 |    - 투명도 조절 가능
 97 | 
 98 | <br />
 99 | 
100 | ## 📁 프로젝트 구조
101 | 
102 | ```
103 | vibeCoding/
104 | ├── app/
105 | │   ├── api/
106 | │   │   ├── delete-image/
107 | │   │   ├── og-image/
108 | │   │   ├── update-component/
109 | │   │   ├── update-field/
110 | │   │   ├── upload-image/
111 | │   │   └── upload-video/
112 | │   ├── globals.css
113 | │   ├── layout.tsx
114 | │   ├── page.tsx
115 | │   └── safelist.css
116 | ├── components/
117 | │   ├── editable/
118 | │   │   ├── editable-background.tsx
119 | │   │   ├── editable-icon.tsx
120 | │   │   ├── editable-list.tsx
121 | │   │   ├── editable-media.tsx
122 | │   │   └── editable-text.tsx
123 | │   ├── ui/
124 | │   │   ├── button.tsx
125 | │   │   ├── card.tsx
126 | │   │   ├── toast.tsx
127 | │   │   ├── toaster.tsx
128 | │   │   └── use-toast.ts
129 | │   ├── about.tsx
130 | │   ├── contact.tsx
131 | │   ├── footer.tsx
132 | │   ├── global-save-button.tsx
133 | │   ├── header.tsx
134 | │   ├── hero.tsx
135 | │   ├── navbar.tsx
136 | │   ├── projects.tsx
137 | │   ├── save-field-button.tsx
138 | │   ├── save-to-file-button.tsx
139 | │   ├── site-title.tsx
140 | │   ├── theme-provider.tsx
141 | │   └── theme-toggle.tsx
142 | ├── contexts/
143 | │   └── inline-editor-context.tsx
144 | ├── hooks/
145 | │   └── use-toast.ts
146 | ├── lib/
147 | │   ├── cleanup-storage.ts
148 | │   ├── constants.ts
149 | │   ├── metadata.ts
150 | │   ├── reset-images.ts
151 | │   └── utils.ts
152 | ├── public/
153 | │   └── uploads/
154 | ├── components.json
155 | ├── package.json
156 | └── tsconfig.json
157 | ```
158 | 
159 | <br />
160 | 
161 | ## 🎨 커스터마이징
162 | 
163 | ### 색상 테마 변경
164 | 
165 | `app/globals.css`에서 CSS 변수를 수정하세요:
166 | 
167 | ```css
168 | :root {
169 |   --primary: 221.2 83.2% 53.3%;      /* 메인 색상 */
170 |   --primary-foreground: 210 40% 98%; /* 메인 텍스트 색상 */
171 |   --background: 0 0% 100%;           /* 배경색 */
172 |   --foreground: 222.2 84% 4.9%;      /* 텍스트 색상 */
173 | }
174 | ```
175 | 
176 | ### 섹션 추가/제거
177 | 
178 | `app/page.tsx`에서 섹션을 관리하세요:
179 | 
180 | ```tsx
181 | export default function Page() {
182 |   return (
183 |     <>
184 |       <Header />      {/* 헤더 네비게이션 */}
185 |       <Hero />        {/* 히어로 섹션 */}
186 |       <About />       {/* 소개 섹션 */}
187 |       <Projects />    {/* 프로젝트 섹션 */}
188 |       <Contact />     {/* 연락처 섹션 */}
189 |       <Footer />      {/* 푸터 */}
190 |     </>
191 |   )
192 | }
193 | ```
194 | 
195 | ### 기본값 설정
196 | 
197 | 각 컴포넌트의 `defaultInfo` 객체를 수정하세요:
198 | 
199 | ```typescript
200 | // components/hero.tsx
201 | const defaultInfo = {
202 |   greeting: "안녕하세요,",
203 |   name: "홍길동입니다",
204 |   title: "프론트엔드 개발자",
205 |   description: "창의적인 웹 경험을 만듭니다"
206 | }
207 | ```
208 | 
209 | <br />
210 | 
211 | ## 🛠 기술 스택
212 | 
213 | - **Framework**: [Next.js 15](https://nextjs.org/) - React 프레임워크
214 | - **Language**: [TypeScript](https://www.typescriptlang.org/) - 타입 안정성
215 | - **Styling**: [Tailwind CSS](https://tailwindcss.com/) - 유틸리티 CSS
216 | - **Icons**: [Lucide React](https://lucide.dev/) - 아이콘 라이브러리
217 | - **Theme**: [next-themes](https://github.com/pacocoursey/next-themes) - 다크모드
218 | - **QR Code**: [qrcode](https://www.npmjs.com/package/qrcode) - QR 코드 생성
219 | 
220 | <br />
221 | 
222 | ## 📝 환경 변수
223 | 
224 | `.env.local` 파일을 생성하고 필요한 환경 변수를 설정하세요:
225 | 
226 | ```env
227 | # 개발 환경 설정
228 | NODE_ENV=development
229 | 
230 | # 추가 설정 (선택사항)
231 | NEXT_PUBLIC_SITE_URL=http://localhost:3000
232 | ```
233 | 
234 | <br />
235 | 
236 | ## 🚢 배포
237 | 
238 | ### Vercel (추천)
239 | 
240 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/yourusername/vibecoding)
241 | 
242 | 1. 위 버튼 클릭 또는 [Vercel](https://vercel.com)에서 직접 임포트
243 | 2. 환경 변수 설정
244 | 3. 배포 완료!
245 | 
246 | ### 다른 플랫폼
247 | 
248 | ```bash
249 | # 프로덕션 빌드
250 | npm run build
251 | 
252 | # 프로덕션 실행
253 | npm start
254 | ```
255 | 
256 | <br />
257 | 
258 | ## 🤝 기여하기
259 | 
260 | 기여는 언제나 환영입니다! 
261 | 
262 | 1. Fork the Project
263 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
264 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
265 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
266 | 5. Open a Pull Request
267 | 
268 | <br />
269 | 
270 | ## 📄 라이선스
271 | 
272 | MIT License - 자유롭게 사용하세요!
273 | 
274 | <br />
275 | 
276 | ## 👨‍💻 제작자
277 | 
278 | **백상 (Mrbaeksang)**
279 | - YouTube: [@Mrbaeksang95](https://www.youtube.com/@Mrbaeksang95)
280 | - Website: [devcom.kr](https://devcom.kr/)
281 | - Email: qortkdgus95@gmail.com
282 | 
283 | <br />
284 | 
285 | ## 🙏 감사의 말
286 | 
287 | 이 템플릿이 도움이 되었다면 ⭐️ 스타를 눌러주세요!
288 | 
289 | <br />
290 | 
291 | ---
292 | 
293 | <div align="center">
294 |   Made with ❤️ by Mrbaeksang
295 | </div>


--------------------------------------------------------------------------------
/components/navbar.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import React, { useEffect, useState } from "react"
  4 | import { motion } from "framer-motion"
  5 | import { LucideIcon, Settings } from "lucide-react"
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | interface NavItem {
  9 |   name: string
 10 |   url: string
 11 |   icon: LucideIcon
 12 | }
 13 | 
 14 | interface NavBarProps {
 15 |   items: NavItem[]
 16 |   className?: string
 17 |   logo?: string
 18 |   logoImage?: string
 19 |   isEditMode?: boolean
 20 |   onEditMenu?: () => void
 21 | }
 22 | 
 23 | export function NavBar({ items, className, logo, logoImage, isEditMode, onEditMenu }: NavBarProps) {
 24 |   // ==================== 🎨 네비게이션 바 커스텀 가이드 🎨 ====================
 25 |   // 
 26 |   // 이 컴포넌트는 header.tsx에서 설정합니다!
 27 |   // 여기서는 스타일과 동작만 수정 가능합니다.
 28 |   // 
 29 |   // 📌 커스텀 가능한 부분들:
 30 |   // - 네비게이션 바 위치 (상단/하단)
 31 |   // - 배경색과 투명도
 32 |   // - 애니메이션 효과
 33 |   // - 모바일/데스크톱 반응형 동작
 34 |   // 
 35 |   // ==================================================================
 36 |   
 37 |   const [activeTab, setActiveTab] = useState(items[0]?.name || '')
 38 |   // Removed isMobile state as it was unused
 39 | 
 40 |   // Scroll detection for active section
 41 |   useEffect(() => {
 42 |     const handleScroll = () => {
 43 |       const sections = items.map(item => item.url.substring(1))
 44 |       const currentSection = sections.find(section => {
 45 |         const element = document.getElementById(section)
 46 |         if (element) {
 47 |           const rect = element.getBoundingClientRect()
 48 |           return rect.top <= 100 && rect.bottom >= 100
 49 |         }
 50 |         return false
 51 |       })
 52 |       
 53 |       if (currentSection) {
 54 |         const activeItem = items.find(item => item.url === `#${currentSection}`)
 55 |         if (activeItem) {
 56 |           setActiveTab(activeItem.name)
 57 |         }
 58 |       }
 59 |     }
 60 | 
 61 |     window.addEventListener("scroll", handleScroll)
 62 |     handleScroll()
 63 |     
 64 |     return () => window.removeEventListener("scroll", handleScroll)
 65 |   }, [items])
 66 | 
 67 |   const scrollToSection = (url: string) => {
 68 |     const element = document.querySelector(url)
 69 |     if (element) {
 70 |       const offsetTop = element.getBoundingClientRect().top + window.scrollY
 71 |       window.scrollTo({
 72 |         top: offsetTop - 80, // 네비게이션 바 높이만큼 오프셋
 73 |         behavior: "smooth"
 74 |       })
 75 |     }
 76 |   }
 77 | 
 78 |   return (
 79 |     <div
 80 |       className={cn(
 81 |         // 🎯 네비게이션 바 위치 설정
 82 |         // 모바일과 데스크톱 모두 상단에 고정
 83 |         "fixed top-4 inset-x-4 z-50 translate-x-0 md:top-6 md:inset-x-auto md:left-1/2 md:-translate-x-1/2",
 84 |         className,
 85 |       )}
 86 |     >
 87 |       {/* 네비게이션 바 컨테이너 */}
 88 |       <div className={cn(
 89 |         // 🎨 네비게이션 바 스타일
 90 |         "flex w-full items-center justify-center gap-2 flex-wrap md:w-auto md:flex-nowrap md:gap-3",
 91 |         // 배경색: bg-background/80 (80% 불투명도)
 92 |         // 테두리: border-border
 93 |         // 블러 효과: backdrop-blur-lg
 94 |         // 모서리: rounded-full (완전 둥글게)
 95 |         // 그림자: shadow-lg
 96 |         "bg-background/80 border border-border backdrop-blur-lg py-1 px-2 md:px-4 rounded-full shadow-lg"
 97 |       )}>
 98 |         {/* 로고 영역 (있을 경우) */}
 99 |         {(logo || logoImage) && (
100 |           <div className="flex-shrink-0 px-3 md:px-4 py-1 md:border-r md:border-border/50">
101 |             {logoImage ? (
102 |               <img 
103 |                 src={logoImage} 
104 |                 alt="Logo" 
105 |                 className="h-8 w-auto"
106 |                 onError={(e) => {
107 |                   // 이미지 로드 실패시 텍스트 로고로 대체
108 |                   e.currentTarget.style.display = 'none'
109 |                   if (logo) {
110 |                     const textLogo = document.createElement('span')
111 |                     textLogo.className = 'font-bold text-foreground'
112 |                     textLogo.textContent = logo
113 |                     e.currentTarget.parentElement?.appendChild(textLogo)
114 |                   }
115 |                 }}
116 |               />
117 |             ) : (
118 |               <span className="font-bold text-foreground">{logo}</span>
119 |             )}
120 |           </div>
121 |         )}
122 |         
123 |         {/* 메뉴 아이템들 */}
124 |         {items.map((item) => {
125 |           const Icon = item.icon
126 |           const isActive = activeTab === item.name
127 |           
128 |           // Icon이 유효한 컴포넌트인지 확인 (function 또는 forwardRef)
129 |           const isValidIcon = Icon && (
130 |             typeof Icon === 'function' || 
131 |             (typeof Icon === 'object' && Icon !== null && '$$typeof' in Icon && (Icon as React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>).$$typeof === Symbol.for('react.forward_ref'))
132 |           )
133 |           
134 |           if (!isValidIcon) {
135 |             console.error('Invalid icon for item:', item.name, Icon)
136 |             return null
137 |           }
138 | 
139 |           return (
140 |             <button
141 |               key={item.name}
142 |               onClick={() => {
143 |                 setActiveTab(item.name)
144 |                 scrollToSection(item.url)
145 |               }}
146 |               className={cn(
147 |                 // 🔘 버튼 기본 스타일
148 |                 "relative flex flex-shrink-0 items-center justify-center cursor-pointer text-sm font-semibold px-3 md:px-6 py-2 rounded-full transition-colors",
149 |                 // 비활성 상태: text-foreground/80
150 |                 // 호버 상태: hover:text-primary
151 |                 "text-foreground/80 hover:text-primary",
152 |                 // 활성 상태: bg-muted text-primary
153 |                 isActive && "bg-muted text-primary",
154 |               )}
155 |             >
156 |               {/* 데스크톱: 텍스트 표시 */}
157 |               <span className="hidden md:inline">{item.name}</span>
158 |               {/* 모바일: 아이콘 표시 */}
159 |               <span className="md:hidden">
160 |                 <Icon size={18} strokeWidth={2.5} />
161 |               </span>
162 |               {/* 🌟 활성 탭 애니메이션 효과 */}
163 |               {isActive && (
164 |                 <motion.div
165 |                   layoutId="lamp"
166 |                   className="absolute inset-0 w-full bg-primary/5 rounded-full -z-10"
167 |                   initial={false}
168 |                   transition={{
169 |                     type: "spring",
170 |                     stiffness: 300,
171 |                     damping: 30,
172 |                   }}
173 |                 >
174 |                   {/* 상단 램프 효과 (빛나는 효과) */}
175 |                   <div className="absolute -top-2 left-1/2 -translate-x-1/2 w-8 h-1 bg-primary rounded-t-full">
176 |                     {/* 글로우 효과들 */}
177 |                     <div className="absolute w-12 h-6 bg-primary/20 rounded-full blur-md -top-2 -left-2" />
178 |                     <div className="absolute w-8 h-6 bg-primary/20 rounded-full blur-md -top-1" />
179 |                     <div className="absolute w-4 h-4 bg-primary/20 rounded-full blur-sm top-0 left-2" />
180 |                   </div>
181 |                 </motion.div>
182 |               )}
183 |             </button>
184 |           )
185 |         })}
186 |         
187 |         {/* Edit Button */}
188 |         {isEditMode && onEditMenu && (
189 |           <button
190 |             onClick={onEditMenu}
191 |             className="p-2 rounded-full hover:bg-muted transition-colors"
192 |             title="메뉴 편집"
193 |           >
194 |             <Settings className="h-4 w-4" />
195 |           </button>
196 |         )}
197 |       </div>
198 |     </div>
199 |   )
200 | }


--------------------------------------------------------------------------------
/GEMINI.md:
--------------------------------------------------------------------------------
  1 | # 🤖 AI를 위한 프로젝트 구조 설명서
  2 | 
  3 | > 이 문서는 AI (ChatGPT, Claude, Gemini 등)가 이 프로젝트를 빠르게 이해하고 수정할 수 있도록 작성되었습니다.
  4 | 
  5 | ## 📁 프로젝트 개요
  6 | 
  7 | - **프로젝트 타입**: Next.js 15 인라인 편집 포트폴리오 템플릿
  8 | - **주요 기술**: Next.js 15, TypeScript, Tailwind CSS 3.4, Lucide React, next-themes
  9 | - **편집 방식**: 컴포넌트별 인라인 편집 + 로컬/파일 저장 API 제공
 10 | - **목적**: 비개발자도 쉽게 수정 가능한 한국어 포트폴리오 템플릿
 11 | - **제작자**: 백상 (@Mrbaeksang95) - https://devcom.kr/
 12 | 
 13 | ## 🎯 핵심 특징
 14 | 
 15 | 1. **인라인 편집 중심**: `Ctrl + E` 또는 우하단 버튼으로 편집 모드 전환, `useInlineEditor` 훅이 로컬 스토리지와 API 저장을 모두 관리
 16 | 2. **자동 자산 관리**: `/app/api/upload-*` 라우트가 의미있는 파일명 생성과 기존 파일 정리를 담당 (개발 모드 전용)
 17 | 3. **섹션 단위 데이터 모델**: Hero/About/Projects/Contact/Footers 등 각 컴포넌트에 `defaultInfo` 및 저장 키가 정의되어 있어 빈 값이면 자동으로 비표시
 18 | 4. **완전한 반응형 & 테마**: Tailwind CSS 유틸리티와 `next-themes`로 다크/라이트 + 디바이스별 레이아웃 지원
 19 | 5. **한글 친화 기능**: QR 코드(vCard 3.0), OG 이미지 API, Lucide 아이콘 한글 안내 등 한국어 설명이 기본 제공
 20 | 
 21 | ## 📂 폴더 구조
 22 | 
 23 | ```
 24 | vibeCoding/
 25 | ├── app/
 26 | │   ├── api/
 27 | │   │   ├── delete-image/        # 업로드 자산 정리
 28 | │   │   ├── og-image/            # OG 이미지 생성
 29 | │   │   ├── update-component/    # 전체 컴포넌트 데이터 저장
 30 | │   │   ├── update-field/        # 단일 필드 저장
 31 | │   │   ├── upload-image/        # 이미지 업로드 (dev only)
 32 | │   │   └── upload-video/        # 비디오 업로드 (dev only)
 33 | │   ├── globals.css              # Tailwind 기반 전역 스타일
 34 | │   ├── layout.tsx               # 루트 레이아웃 및 메타데이터
 35 | │   ├── page.tsx                 # 홈 구성 (Hero~Footer)
 36 | │   └── safelist.css             # Tailwind safelist 용도
 37 | ├── components/
 38 | │   ├── editable/                # 인라인 편집 전용 컴포넌트군
 39 | │   │   ├── editable-background.tsx
 40 | │   │   ├── editable-icon.tsx
 41 | │   │   ├── editable-list.tsx
 42 | │   │   ├── editable-media.tsx
 43 | │   │   └── editable-text.tsx
 44 | │   ├── ui/                      # 버튼/카드/토스트 등 공용 UI
 45 | │   ├── about.tsx                # 소개 섹션 + 타임라인/스킬 편집
 46 | │   ├── contact.tsx              # 연락처 + QR/소셜 편집
 47 | │   ├── footer.tsx               # 푸터 및 네비 동기화
 48 | │   ├── global-save-button.tsx   # 파일 저장 토글 버튼
 49 | │   ├── header.tsx               # 상단 헤더 + 고정 네비게이션
 50 | │   ├── hero.tsx                 # 히어로 섹션 + 배경/소셜 편집
 51 | │   ├── navbar.tsx               # 섹션 네비게이션 메뉴
 52 | │   ├── projects.tsx             # 프로젝트 카드/미디어 관리
 53 | │   ├── save-field-button.tsx    # 단일 필드 저장 버튼
 54 | │   ├── save-to-file-button.tsx  # JSON 파일 저장 버튼
 55 | │   ├── site-title.tsx           # 상단 타이틀/설명 편집
 56 | │   ├── theme-provider.tsx       # 테마 컨텍스트 연결
 57 | │   └── theme-toggle.tsx         # 라이트/다크 토글
 58 | ├── contexts/
 59 | │   └── inline-editor-context.tsx # 편집 상태 + 저장 로직
 60 | ├── hooks/
 61 | │   └── use-toast.ts             # 토스트 훅 (UI 공유)
 62 | ├── lib/
 63 | │   ├── cleanup-storage.ts       # 로컬 파일 정리 유틸
 64 | │   ├── constants.ts             # 공용 상수/스타일
 65 | │   ├── metadata.ts              # site metadata
 66 | │   ├── reset-images.ts          # 이미지 리셋 유틸
 67 | │   └── utils.ts                 # className 병합 등
 68 | ├── public/
 69 | │   └── uploads/                 # 업로드된 미디어 (개발 시 생성)
 70 | ├── publicuploads/               # 서버 업로드 보조 경로 (개발용)
 71 | ├── components.json              # 컴포넌트 저장 데이터 (dev)
 72 | ├── GEMINI.md
 73 | ├── README.md
 74 | ├── package.json
 75 | └── tsconfig.json
 76 | ```
 77 | 
 78 | ## 🔧 각 파일별 수정 방법
 79 | 
 80 | ### ⭐ 주요 섹션 기본 데이터
 81 | 
 82 | > 인라인 편집 기능으로 런타임에 대부분의 값을 바꿀 수 있지만, **새 프로젝트의 기본값**이나 **필드 구성**을 조정할 때는 각 컴포넌트의 `default*` 상수를 수정하세요. 모든 컴포넌트는 `useInlineEditor` 컨텍스트를 통해 `saveData(key, value)` / `saveToFile(component, field, value)`를 호출합니다.
 83 | 
 84 | #### 1. `components/hero.tsx`
 85 | - `defaultInfo`: 인삿말(`greeting`), 이름(`name`), 직함(`title`), 소개문(`description`), 배경(`background`), CTA 버튼(`projectButton`) 기본값을 정의합니다.
 86 | - `defaultSocialLinks`: `{ name, icon, url }` 배열. 사용할 수 있는 아이콘 키는 `AVAILABLE_ICONS` 객체에 정리되어 있습니다.
 87 | - 저장 키: `hero-info`, `hero-social-links`, `hero-background`.
 88 | ```typescript
 89 | const defaultInfo = {
 90 |   greeting: "안녕하세요,",
 91 |   name: "당신의 이름",
 92 |   title: "프론트엔드 개발자",
 93 |   description: "창의적인 아이디어로 웹 경험을 디자인합니다.",
 94 |   background: { image: "", video: "", color: "", opacity: 0.1 }
 95 | }
 96 | ```
 97 | 
 98 | #### 2. `components/about.tsx`
 99 | - `defaultInfo` 안에 `experienceCards`, `skills`, `story`, `hobbies`, `background`가 한 번에 정의됩니다.
100 | - 카드/스킬 추가 버튼이 있으므로 기본 배열의 최대 길이는 자유롭게 조정할 수 있습니다.
101 | - 저장 키: `about-info`, `about-background`.
102 | ```typescript
103 | const defaultInfo = {
104 |   experienceCards: [{ icon: "briefcase", title: "회사명", period: "2020 - 현재", description: "직무" }],
105 |   skills: [{ icon: "code", title: "프론트엔드", description: "React, TypeScript" }],
106 |   story: ["당신의 이야기를 입력하세요"],
107 |   hobbies: ["📚 독서"],
108 |   background: { image: "", video: "", color: "", opacity: 0.1 }
109 | }
110 | ```
111 | 
112 | #### 3. `components/projects.tsx`
113 | - `defaultInfo`에 `initialDisplay`, `loadMoreCount`, `projects` 배열을 정의합니다.
114 | - `projects` 항목은 `{ image, video?, title, description }` 형태이며 비어 있으면 편집 UI에서 새로 추가합니다.
115 | - 저장 키: `projects-info`, `projects-background`. `saveToFile('projects', 'Info', data)`를 호출하므로 필드명 주의.
116 | 
117 | #### 4. `components/contact.tsx`
118 | - `defaultInfo`는 연락처, 소개 문구, QR 설정(`qrContent` 배열) 등을 포함합니다.
119 | - `defaultSocialLinks` 배열을 변경하면 초기 소셜 버튼 구성이 달라집니다. 아이콘 키는 `AVAILABLE_ICONS` 참고.
120 | - 저장 키: `contact-info`, `contact-social-links`, `contact-background`.
121 | 
122 | #### 5. `components/footer.tsx`
123 | - `defaultInfo`에 푸터 표시 여부, 빠른 링크, 연락처 영역 텍스트가 들어 있습니다.
124 | - `templateCreator`/`showTemplateCredit` 값은 고정이므로 수정하려면 로직을 변경해야 합니다.
125 | - 헤더에서 `nav-config` 데이터를 읽어와 푸터 빠른 링크를 동기화합니다.
126 | 
127 | #### 6. `components/header.tsx`
128 | - `defaultConfig`에 로고 텍스트/이미지, 네비게이션 항목(`items` 배열), 사이트 타이틀/설명이 포함됩니다.
129 | - 아이콘 이름은 `ICON_MAP` 키(대문자 시작)와 매핑되어 있으므로 문자열 그대로 저장하면 자동으로 변환됩니다.
130 | - 저장 키: `nav-config`. `saveToFile('navigation', 'Config', data)` / `saveFieldToFile('site-title', value)` 사용.
131 | 
132 | #### 7. 기타
133 | - `components/site-title.tsx`: 문서 `<title>`과 소개 문구 기본값을 설정하며 `portfolio-site-title` 키에 저장합니다.
134 | - `components/global-save-button.tsx`, `save-to-file-button.tsx`: 로컬 스토리지 값을 JSON 파일로 저장할 때 사용하는 트리거 버튼입니다. 저장 경로는 `components.json`.
135 | - `contexts/inline-editor-context.tsx`: 모든 저장 키와 파일 이름을 관리합니다. 새로운 컴포넌트를 추가할 때는 이 컨텍스트에 키/핸들러를 등록하세요.
136 | 
137 | ## 🎨 스타일 수정 방법
138 | 
139 | ### 색상 테마
140 | - **파일**: `app/globals.css`
141 | - **CSS 변수**: `:root`와 `.dark`에서 색상 정의
142 | - 주요 색상:
143 |   - `--primary`: 주 색상
144 |   - `--background`: 배경색
145 |   - `--foreground`: 텍스트 색상
146 | 
147 | ### Tailwind 클래스
148 | - 모든 스타일은 Tailwind CSS 유틸리티를 사용합니다.
149 | - 반응형: `md:`, `lg:` 접두사
150 | - 다크모드: `dark:` 접두사 (`next-themes`와 연동)
151 | - 동적 클래스 목록은 `app/safelist.css`에 정의하여 purge 대상에서 제외합니다.
152 | 
153 | ## 💡 중요한 패턴들
154 | 
155 | ### 1. 조건부 렌더링
156 | ```typescript
157 | // 빈 문자열이면 자동 숨김
158 | {instagram && <InstagramIcon />}
159 | 
160 | // false면 섹션 전체 숨김
161 | {showFooter && <Footer />}
162 | ```
163 | 
164 | ### 2. 이미지 처리
165 | - 인라인 업로드 시 `/public/uploads` 아래에 `purpose-timestamp.ext` 형식으로 저장되며, 동일 purpose 파일은 자동 정리됩니다.
166 | - 업로드 라우트는 개발 모드에서만 동작합니다. 배포 환경에서는 수동으로 `/public`에 파일을 추가하세요.
167 | - 경로는 항상 `/uploads/파일명` 또는 정적 자산일 경우 `/이미지명` 형식을 사용합니다.
168 | - 이미지가 비어 있으면 컴포넌트마다 기본 placeholder 또는 배경색이 표시됩니다.
169 | 
170 | ### 3. 배열 필터링
171 | ```typescript
172 | // 빈 항목 자동 제거
173 | const validProjects = projects.filter(p => p.image)
174 | ```
175 | 
176 | ### 4. 한글 인코딩
177 | ```typescript
178 | // QR코드용 한글 인코딩
179 | encodeURIComponent(vCardString.trim())
180 | ```
181 | 
182 | ## 🚀 빌드 & 배포
183 | 
184 | ### 개발 서버
185 | ```bash
186 | npm run dev
187 | # http://localhost:3000
188 | ```
189 | 
190 | ### 프로덕션 빌드
191 | ```bash
192 | npm run build
193 | npm run start
194 | ```
195 | 
196 | ### 배포 플랫폼
197 | - Vercel (추천) - Next.js 자동 최적화
198 | - Netlify
199 | - GitHub Pages (정적 export 필요)
200 | 
201 | ## ⚠️ 주의사항
202 | 
203 | 1. **데이터 저장 플로우**: 인라인 편집 후에는 자동으로 로컬 스토리지에 저장되지만, 파일(`components.json`)에 반영하려면 `global-save-button` 또는 각 섹션의 저장 버튼을 눌러야 합니다.
204 | 2. **이미지 크기**: 
205 |    - 프로필: 500x500px (정사각형)
206 |    - 프로젝트: 1920x1080px (16:9) 권장
207 |    - 최대 5MB (업로드 라우트 제한)
208 | 3. **문자열 규칙**:
209 |    - 빈 값: `""` (빈 따옴표)
210 |    - 사용 안함: `false`
211 |    - 배열 마지막: 쉼표 없음
212 | 4. **개발/운영 모드**: 파일 업로드/삭제 API는 `NODE_ENV=development`에서만 동작합니다. 운영 배포에서는 수동으로 자산을 업데이트하세요.
213 | 5. **한글 인코딩**: UTF-8 유지, vCard 생성 시 `encodeURIComponent` 이미 적용됨.
214 | 
215 | ## 🔍 디버깅 팁
216 | 
217 | ### 일반적인 오류들
218 | 1. **"Expression expected"**: 쉼표나 중괄호 확인
219 | 2. **이미지 안 보임**: 파일명과 경로 확인
220 | 3. **섹션 안 보임**: show 속성이 false인지 확인
221 | 4. **스타일 안 됨**: className 오타 확인
222 | 
223 | ### 콘솔 확인
224 | ```javascript
225 | // 브라우저 개발자 도구 (F12)
226 | console.log(projectsInfo)  // 데이터 확인
227 | ```
228 | 
229 | ## 📝 추가 자료
230 | 
231 | - `README.md`: 프로젝트 소개, 설치, 폴더 구조 개요
232 | - YouTube 강의: https://www.youtube.com/watch?v=U6zL8qittGk (편집 워크플로 전체 설명)
233 | 
234 | ## 🤝 기여 방법
235 | 
236 | 이 템플릿은 오픈소스입니다. 개선사항이나 버그를 발견하면:
237 | 1. GitHub Issues에 등록
238 | 2. Pull Request 제출
239 | 3. 제작자 연락: https://devcom.kr/
240 | 
241 | ---
242 | 
243 | **템플릿 제작**: 백상 (@Mrbaeksang95)
244 | **YouTube**: https://www.youtube.com/@Mrbaeksang95
245 | **Website**: https://devcom.kr/


--------------------------------------------------------------------------------
/app/api/update-component/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextRequest, NextResponse } from 'next/server'
  2 | import fs from 'fs/promises'
  3 | import path from 'path'
  4 | 
  5 | // 더 안전한 객체 찾기 함수
  6 | function findObjectBounds(content: string, objectName: string, isArray: boolean = false) {
  7 |   // 여러 패턴 시도
  8 |   const patterns = isArray ? [
  9 |     `const ${objectName} = \\[`,
 10 |     `const ${objectName}: .*? = \\[`,
 11 |     `const ${objectName}:\\s*Array<.*?>\\s*=\\s*\\[`
 12 |   ] : [
 13 |     `const ${objectName} = \\{`,
 14 |     `const ${objectName}: .*? = \\{`
 15 |   ]
 16 | 
 17 |   let startIndex = -1
 18 |   let startMatch = ''
 19 | 
 20 |   // 정규식으로 시작점 찾기
 21 |   for (const pattern of patterns) {
 22 |     const regex = new RegExp(pattern)
 23 |     const match = content.match(regex)
 24 |     if (match && match.index !== undefined) {
 25 |       startIndex = match.index
 26 |       startMatch = match[0]
 27 |       break
 28 |     }
 29 |   }
 30 | 
 31 |   if (startIndex === -1) {
 32 |     return null
 33 |   }
 34 | 
 35 |   // 개선된 중괄호/대괄호 균형 찾기
 36 |   const openChar = isArray ? '[' : '{'
 37 |   const closeChar = isArray ? ']' : '}'
 38 |   let depth = 0
 39 |   let inString = false
 40 |   let stringChar = ''
 41 |   let escapeNext = false
 42 |   let inComment = false
 43 |   let inMultiLineComment = false
 44 | 
 45 |   // 시작 위치부터 파싱
 46 |   const startPos = startIndex + startMatch.length - 1
 47 | 
 48 |   for (let i = startPos; i < content.length; i++) {
 49 |     const char = content[i]
 50 |     const nextChar = content[i + 1]
 51 |     const prevChar = content[i - 1]
 52 | 
 53 |     // 멀티라인 주석 처리
 54 |     if (!inString && !inComment && char === '/' && nextChar === '*') {
 55 |       inMultiLineComment = true
 56 |       i++
 57 |       continue
 58 |     }
 59 |     if (inMultiLineComment && char === '*' && nextChar === '/') {
 60 |       inMultiLineComment = false
 61 |       i++
 62 |       continue
 63 |     }
 64 |     if (inMultiLineComment) continue
 65 | 
 66 |     // 단일 라인 주석 처리
 67 |     if (!inString && !inMultiLineComment && char === '/' && nextChar === '/') {
 68 |       inComment = true
 69 |       continue
 70 |     }
 71 |     if (inComment && char === '\n') {
 72 |       inComment = false
 73 |       continue
 74 |     }
 75 |     if (inComment) continue
 76 | 
 77 |     // 이스케이프 문자 처리
 78 |     if (escapeNext) {
 79 |       escapeNext = false
 80 |       continue
 81 |     }
 82 |     if (char === '\\') {
 83 |       escapeNext = true
 84 |       continue
 85 |     }
 86 | 
 87 |     // 문자열 처리 (템플릿 리터럴 포함)
 88 |     if (!inString && (char === '"' || char === "'" || char === '`')) {
 89 |       inString = true
 90 |       stringChar = char
 91 |       continue
 92 |     }
 93 |     if (inString && char === stringChar && prevChar !== '\\') {
 94 |       inString = false
 95 |       stringChar = ''
 96 |       continue
 97 |     }
 98 | 
 99 |     // 문자열 내부면 건너뛰기
100 |     if (inString) continue
101 | 
102 |     // 중괄호/대괄호 카운팅
103 |     if (char === openChar) {
104 |       depth++
105 |     } else if (char === closeChar) {
106 |       depth--
107 |       if (depth === 0) {
108 |         return { startIndex, endIndex: i }
109 |       }
110 |     }
111 |   }
112 | 
113 |   return null
114 | }
115 | 
116 | export async function POST(request: NextRequest) {
117 |   // 🔒 개발 환경에서만 작동 (배포 시 자동 비활성화)
118 |   if (process.env.NODE_ENV !== 'development') {
119 |     return NextResponse.json(
120 |       { error: '개발 모드에서만 사용 가능합니다' },
121 |       { status: 403 }
122 |     )
123 |   }
124 | 
125 |   try {
126 |     const { component, section, data } = await request.json()
127 | 
128 |     // 📁 수정 가능한 컴포넌트 파일들
129 |     const componentFiles: Record<string, string> = {
130 |       'hero': 'components/hero.tsx',
131 |       'about': 'components/about.tsx',
132 |       'projects': 'components/projects.tsx',
133 |       'contact': 'components/contact.tsx',
134 |       'footer': 'components/footer.tsx',
135 |       'header': 'components/header.tsx',
136 |       'navbar': 'components/navbar.tsx'
137 |     }
138 | 
139 |     const fileName = componentFiles[component]
140 |     if (!fileName) {
141 |       return NextResponse.json(
142 |         { error: '허용되지 않은 컴포넌트입니다' },
143 |         { status: 400 }
144 |       )
145 |     }
146 | 
147 |     // 파일 읽기
148 |     const filePath = path.join(process.cwd(), fileName)
149 |     const originalContent = await fs.readFile(filePath, 'utf-8')
150 | 
151 |     let content = originalContent
152 | 
153 |     // 🎯 defaultInfo/defaultConfig 객체 찾아서 교체
154 |     const objectName = `default${section || 'Info'}`
155 |     const isArray = section === 'SocialLinks'
156 | 
157 |     // 안전한 파싱으로 객체 경계 찾기
158 |     const bounds = findObjectBounds(content, objectName, isArray)
159 | 
160 |     if (!bounds) {
161 |       // 객체를 찾을 수 없는 경우 오류 반환
162 |       return NextResponse.json(
163 |         { error: `${objectName} 객체를 찾을 수 없습니다` },
164 |         { status: 400 }
165 |       )
166 |     }
167 | 
168 |     // 새로운 객체 내용 생성
169 |     let newObjectContent: string
170 | 
171 |     if (isArray) {
172 |       // 배열인 경우 JSON.stringify 사용
173 |       newObjectContent = JSON.stringify(data, null, 2)
174 |         .split('\n')
175 |         .map((line, index) => index === 0 ? line : `  ${line}`)
176 |         .join('\n')
177 |     } else {
178 |       // 객체인 경우 각 속성을 개별 처리
179 |       const contentArray = Object.entries(data).map(([key, value]) => {
180 |         // header 컴포넌트의 items 처리 - 아이콘을 문자열로 변환
181 |         if (component === 'header' && key === 'items' && Array.isArray(value)) {
182 |           const itemsWithStringIcons = value.map((item: { icon?: unknown; [key: string]: unknown }) => ({
183 |             ...item,
184 |             icon: typeof item.icon === 'string' ? item.icon : "Home"
185 |           }))
186 |           return `    ${key}: ${JSON.stringify(itemsWithStringIcons)}`
187 |         } else if (typeof value === 'string') {
188 |           // 문자열 값 이스케이프 처리
189 |           const escaped = value.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n')
190 |           return `    ${key}: "${escaped}"`
191 |         } else if (Array.isArray(value)) {
192 |           // projects 배열인 경우 타입 정의 추가
193 |           if (component === 'projects' && key === 'projects') {
194 |             return `    ${key}: ${JSON.stringify(value)} as Array<{ image: string; video?: string; title: string; description: string }>`
195 |           }
196 |           return `    ${key}: ${JSON.stringify(value)}`
197 |         } else {
198 |           return `    ${key}: ${JSON.stringify(value)}`
199 |         }
200 |       }).join(',\n')
201 | 
202 |       newObjectContent = contentArray
203 |     }
204 | 
205 |     // 타입 정의를 유지하면서 새로운 객체 생성
206 |     let newDefaultObject: string
207 | 
208 |     if (isArray) {
209 |       // 원래 타입 정의 추출
210 |       const originalDeclaration = content.substring(bounds.startIndex, bounds.endIndex + 1)
211 |       const typeMatch = originalDeclaration.match(new RegExp(`const ${objectName}(:[^=]+)? = \\[`))
212 |       const typeDefinition = typeMatch && typeMatch[1] ? typeMatch[1] : ': { name: string; icon: string; url: string }[]'
213 |       newDefaultObject = `const ${objectName}${typeDefinition} = ${newObjectContent}`
214 |     } else {
215 |       newDefaultObject = `const ${objectName} = {\n${newObjectContent}\n  }`
216 |     }
217 | 
218 |     // 파일 내용 교체
219 |     const beforeContent = content.substring(0, bounds.startIndex)
220 |     const afterContent = content.substring(bounds.endIndex + 1)
221 |     content = beforeContent + newDefaultObject + afterContent
222 | 
223 |     // 파일 저장 전 검증
224 |     if (content.length < originalContent.length * 0.5) {
225 |       // 파일 크기가 너무 작아진 경우 오류로 처리
226 |       console.error('⚠️ 파일 크기가 비정상적으로 줄어듦. 저장 취소.')
227 |       return NextResponse.json(
228 |         { error: '파일 처리 중 오류가 발생했습니다. 원본 파일은 그대로 유지됩니다.' },
229 |         { status: 500 }
230 |       )
231 |     }
232 | 
233 |     // 파일 저장
234 |     await fs.writeFile(filePath, content, 'utf-8')
235 | 
236 |     console.log(`✅ ${fileName} 파일이 업데이트되었습니다`)
237 | 
238 |     // header 컴포넌트인 경우 layout.tsx의 metadata도 업데이트
239 |     if (component === 'header' && section === 'Config') {
240 |       try {
241 |         // layout.tsx 파일 읽기
242 |         const layoutPath = path.join(process.cwd(), 'app/layout.tsx')
243 |         let layoutContent = await fs.readFile(layoutPath, 'utf-8')
244 | 
245 |         // import 문이 있는지 확인하고 없으면 추가
246 |         if (!layoutContent.includes('import { getMetadata }')) {
247 |           const importInsertPoint = layoutContent.indexOf('import "./globals.css"')
248 |           if (importInsertPoint !== -1) {
249 |             layoutContent = layoutContent.slice(0, importInsertPoint) +
250 |               'import { getMetadata } from "@/lib/metadata"\n' +
251 |               layoutContent.slice(importInsertPoint)
252 |           }
253 |         }
254 | 
255 |         // metadataInfo 변수가 있는지 확인하고 없으면 추가
256 |         if (!layoutContent.includes('const metadataInfo = getMetadata()')) {
257 |           const insertPoint = layoutContent.indexOf('export const metadata')
258 |           if (insertPoint !== -1) {
259 |             layoutContent = layoutContent.slice(0, insertPoint) +
260 |               'const metadataInfo = getMetadata()\n\n' +
261 |               layoutContent.slice(insertPoint)
262 |           }
263 |         }
264 | 
265 |         // layout.tsx 저장
266 |         await fs.writeFile(layoutPath, layoutContent, 'utf-8')
267 |         console.log('✅ layout.tsx도 함께 업데이트되었습니다')
268 |       } catch (layoutError) {
269 |         console.error('layout.tsx 업데이트 오류:', layoutError)
270 |         // layout.tsx 업데이트 실패해도 메인 작업은 성공으로 처리
271 |       }
272 |     }
273 | 
274 |     return NextResponse.json({
275 |       success: true,
276 |       message: '파일이 성공적으로 저장되었습니다'
277 |     })
278 | 
279 |   } catch (error) {
280 |     console.error('파일 저장 오류:', error)
281 |     return NextResponse.json(
282 |       { error: '파일 저장 중 오류가 발생했습니다' },
283 |       { status: 500 }
284 |     )
285 |   }
286 | }


--------------------------------------------------------------------------------
/components/editable/editable-media.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useEffect } from 'react'
  4 | import { useInlineEditor } from '@/contexts/inline-editor-context'
  5 | import { Upload, X, Link, Check } from 'lucide-react'
  6 | 
  7 | interface EditableMediaProps {
  8 |   src: string
  9 |   onChange: (src: string) => void
 10 |   type?: 'image' | 'video' | 'auto'
 11 |   className?: string
 12 |   storageKey?: string
 13 |   alt?: string
 14 |   purpose?: string // 파일 용도 (hero-profile, hero-background 등)
 15 | }
 16 | 
 17 | export function EditableMedia({ 
 18 |   src, 
 19 |   onChange, 
 20 |   type = 'auto',
 21 |   className = '',
 22 |   storageKey,
 23 |   alt = 'Media',
 24 |   purpose = 'general'
 25 | }: EditableMediaProps) {
 26 |   const { isEditMode, saveData, getData } = useInlineEditor()
 27 |   const [isHovered, setIsHovered] = useState(false)
 28 |   const [showUploadModal, setShowUploadModal] = useState(false)
 29 |   const [uploadType, setUploadType] = useState<'file' | 'url'>('file')
 30 |   const [urlInput, setUrlInput] = useState('')
 31 |   const [previewUrl, setPreviewUrl] = useState(src)
 32 | 
 33 |   // 초기값 로드
 34 |   useEffect(() => {
 35 |     if (storageKey) {
 36 |       const saved = getData(storageKey) as string | null
 37 |       if (saved) {
 38 |         onChange(saved)
 39 |         setPreviewUrl(saved)
 40 |       }
 41 |     }
 42 |   }, [storageKey])
 43 | 
 44 |   const isVideo = type === 'video' || (type === 'auto' && (src?.includes('.mp4') || src?.includes('.webm') || src?.includes('youtube')))
 45 | 
 46 |   // 파일 업로드 함수 제거 (public 폴더 방식 사용)
 47 | 
 48 |   const handleUrlSubmit = () => {
 49 |     if (urlInput) {
 50 |       setPreviewUrl(urlInput)
 51 |       onChange(urlInput)
 52 |       if (storageKey) {
 53 |         saveData(storageKey, urlInput)
 54 |       }
 55 |       setShowUploadModal(false)
 56 |       setUrlInput('')
 57 |     }
 58 |   }
 59 | 
 60 |   const handleRemove = async () => {
 61 |     // uploads 폴더의 이미지인 경우 서버에서도 삭제
 62 |     if (previewUrl && previewUrl.startsWith('/uploads/')) {
 63 |       try {
 64 |         const response = await fetch('/api/delete-image', {
 65 |           method: 'DELETE',
 66 |           headers: {
 67 |             'Content-Type': 'application/json',
 68 |           },
 69 |           body: JSON.stringify({ imagePath: previewUrl })
 70 |         })
 71 |         
 72 |         const result = await response.json()
 73 |         if (result.success) {
 74 |           console.log('이미지 삭제 완료')
 75 |         }
 76 |       } catch (error) {
 77 |         console.error('이미지 삭제 실패:', error)
 78 |       }
 79 |     }
 80 |     
 81 |     onChange('')
 82 |     setPreviewUrl('')
 83 |     if (storageKey) {
 84 |       saveData(storageKey, '')
 85 |     }
 86 |   }
 87 | 
 88 |   if (!isEditMode) {
 89 |     // src가 빈 문자열이면 아무것도 렌더링하지 않음
 90 |     if (!src) {
 91 |       return null
 92 |     }
 93 |     
 94 |     if (isVideo) {
 95 |       return (
 96 |         <video 
 97 |           src={src} 
 98 |           className={className}
 99 |           autoPlay 
100 |           loop 
101 |           muted 
102 |           playsInline
103 |         />
104 |       )
105 |     }
106 |     return <img 
107 |       src={src} 
108 |       alt={alt} 
109 |       className={className}
110 |       onError={(e) => {
111 |         // 이미지 로드 실패 시 숨김 처리
112 |         const target = e.target as HTMLImageElement
113 |         target.style.opacity = '0'
114 |         // localStorage에서 제거 고려
115 |         if (storageKey && src.includes('/uploads/')) {
116 |           console.warn(`Image not found: ${src}`)
117 |         }
118 |       }}
119 |     />
120 |   }
121 | 
122 |   return (
123 |     <>
124 |       <div 
125 |         className="relative group w-full h-full"
126 |         onMouseEnter={() => setIsHovered(true)}
127 |         onMouseLeave={() => setIsHovered(false)}
128 |       >
129 |         {previewUrl ? (
130 |           <>
131 |             {isVideo ? (
132 |               <video 
133 |                 src={previewUrl} 
134 |                 className={className}
135 |                 autoPlay 
136 |                 loop 
137 |                 muted 
138 |                 playsInline
139 |               />
140 |             ) : (
141 |               <img src={previewUrl} alt={alt} className={className} />
142 |             )}
143 |             {isHovered && (
144 |               <div className="absolute inset-0 bg-black/50 flex items-center justify-center gap-2">
145 |                 <button
146 |                   onClick={() => setShowUploadModal(true)}
147 |                   className="p-2 bg-white/90 rounded-lg hover:bg-white transition-colors"
148 |                 >
149 |                   <Upload className="h-5 w-5 text-black" />
150 |                 </button>
151 |                 <button
152 |                   onClick={handleRemove}
153 |                   className="p-2 bg-red-500/90 rounded-lg hover:bg-red-500 transition-colors"
154 |                 >
155 |                   <X className="h-5 w-5 text-white" />
156 |                 </button>
157 |               </div>
158 |             )}
159 |           </>
160 |         ) : (
161 |           <div 
162 |             onClick={() => setShowUploadModal(true)}
163 |             className={`${className} border-2 border-dashed border-muted-foreground/30 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-muted-foreground/50 transition-colors min-h-[200px]`}
164 |           >
165 |             <Upload className="h-8 w-8 text-muted-foreground mb-2" />
166 |             <span className="text-sm text-muted-foreground">클릭하여 업로드</span>
167 |           </div>
168 |         )}
169 |       </div>
170 | 
171 |       {/* 업로드 모달 */}
172 |       {showUploadModal && (
173 |         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
174 |           <div className="bg-background border rounded-lg p-6 max-w-md w-full mx-4">
175 |             <h3 className="text-lg font-semibold mb-4">미디어 업로드</h3>
176 |             
177 |             <div className="flex gap-2 mb-4">
178 |               <button
179 |                 onClick={() => setUploadType('file')}
180 |                 className={`flex-1 py-2 px-4 rounded-lg border ${uploadType === 'file' ? 'bg-primary text-primary-foreground' : 'bg-background'}`}
181 |               >
182 |                 <Upload className="h-4 w-4 inline mr-2" />
183 |                 파일 업로드
184 |               </button>
185 |               <button
186 |                 onClick={() => setUploadType('url')}
187 |                 className={`flex-1 py-2 px-4 rounded-lg border ${uploadType === 'url' ? 'bg-primary text-primary-foreground' : 'bg-background'}`}
188 |               >
189 |                 <Link className="h-4 w-4 inline mr-2" />
190 |                 URL 입력
191 |               </button>
192 |             </div>
193 | 
194 |             {uploadType === 'file' ? (
195 |               <div>
196 |                 <div className="mb-4 p-4 bg-muted rounded-lg">
197 |                   <p className="text-sm font-medium mb-2">📁 컴퓨터에서 이미지 선택:</p>
198 |                   <p className="text-xs text-muted-foreground mb-2">
199 |                     JPG, PNG, GIF, WebP 지원 (최대 5MB)
200 |                   </p>
201 |                   {previewUrl && (
202 |                     <p className="text-xs text-amber-600 dark:text-amber-500">
203 |                       ⚠️ 새 이미지 업로드시 기존 이미지가 교체됩니다 (서버에서 자동 삭제)
204 |                     </p>
205 |                   )}
206 |                 </div>
207 |                 <input
208 |                   id="file-upload"
209 |                   type="file"
210 |                   accept="image/*"
211 |                   onChange={async (e) => {
212 |                     const file = e.target.files?.[0]
213 |                     if (!file) return
214 |                     
215 |                     // 파일 크기 체크
216 |                     if (file.size > 5 * 1024 * 1024) {
217 |                       alert('파일 크기는 5MB 이하여야 합니다')
218 |                       return
219 |                     }
220 |                     
221 |                     // 파일 업로드
222 |                     const formData = new FormData()
223 |                     formData.append('file', file)
224 |                     formData.append('purpose', purpose)
225 |                     formData.append('oldPath', previewUrl || '')
226 |                     
227 |                     try {
228 |                       const response = await fetch('/api/upload-image', {
229 |                         method: 'POST',
230 |                         body: formData
231 |                       })
232 |                       
233 |                       const result = await response.json()
234 |                       
235 |                       if (result.success) {
236 |                         setPreviewUrl(result.path)
237 |                         onChange(result.path)
238 |                         if (storageKey) {
239 |                           saveData(storageKey, result.path)
240 |                         }
241 |                         setShowUploadModal(false)
242 |                         alert('✅ 이미지가 업로드되었습니다!')
243 |                       } else {
244 |                         alert(`❌ ${result.error}`)
245 |                       }
246 |                     } catch {
247 |                       alert('업로드 중 오류가 발생했습니다')
248 |                     }
249 |                   }}
250 |                   className="hidden"
251 |                 />
252 |                 <label
253 |                   htmlFor="file-upload"
254 |                   className="w-full py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 cursor-pointer flex items-center justify-center"
255 |                 >
256 |                   <Upload className="h-4 w-4 mr-2" />
257 |                   파일 선택
258 |                 </label>
259 |               </div>
260 |             ) : (
261 |               <div>
262 |                 <input
263 |                   type="text"
264 |                   value={urlInput}
265 |                   onChange={(e) => setUrlInput(e.target.value)}
266 |                   placeholder="https://example.com/image.jpg"
267 |                   className="w-full px-3 py-2 border rounded-lg bg-background"
268 |                   onKeyDown={(e) => e.key === 'Enter' && handleUrlSubmit()}
269 |                 />
270 |                 <button
271 |                   onClick={handleUrlSubmit}
272 |                   className="w-full mt-2 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
273 |                 >
274 |                   <Check className="h-4 w-4 inline mr-2" />
275 |                   적용
276 |                 </button>
277 |               </div>
278 |             )}
279 | 
280 |             <button
281 |               onClick={() => setShowUploadModal(false)}
282 |               className="w-full mt-4 py-2 border rounded-lg hover:bg-muted"
283 |             >
284 |               취소
285 |             </button>
286 |           </div>
287 |         </div>
288 |       )}
289 |     </>
290 |   )
291 | }


--------------------------------------------------------------------------------
/components/footer.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { ArrowUp, Heart, Youtube, Globe, Mail } from "lucide-react"
  4 | import { useState, useEffect } from "react"
  5 | import { EditableText } from "@/components/editable/editable-text"
  6 | import { useInlineEditor } from "@/contexts/inline-editor-context"
  7 | 
  8 | export function Footer() {
  9 |   const { getData, saveData, isEditMode, saveToFile } = useInlineEditor()
 10 |   const currentYear = new Date().getFullYear()
 11 |   
 12 |   // 헤더의 네비게이션 데이터 가져오기 - 기본값 설정
 13 |   const [navItems, setNavItems] = useState<Array<{name: string, url: string}>>([
 14 |     { name: "소개", url: "#about" },
 15 |     { name: "프로젝트", url: "#projects" },
 16 |     { name: "연락처", url: "#contact" }
 17 |   ])
 18 | 
 19 |   const scrollToTop = () => {
 20 |     window.scrollTo({ top: 0, behavior: "smooth" })
 21 |   }
 22 | 
 23 |   // 기본 데이터
 24 |   const defaultInfo = {
 25 |     showFooter: true,
 26 |     name: "당신의 이름",
 27 |     description: "당신을 소개하는 짧은 문구를 작성해주세요. ",
 28 |     showQuickLinks: true,
 29 |     quickLinksTitle: "빠른 링크",
 30 |     showContactInfo: true,
 31 |     contactTitle: "연락처",
 32 |     phone: "010-0000-0000",
 33 |     email: "your-email@example.com",
 34 |     location: "당신의 위치",
 35 |     copyright: "",
 36 |     showMadeWith: true,
 37 |     madeWithLocation: "Mrbaeksang",
 38 |     showTemplateCredit: true,
 39 |     templateCreator: {"name":"백상","youtube":"https://www.youtube.com/@Mrbaeksang95/videos","website":"https://devcom.kr/","email":"qortkdgus95@gmail.com"},
 40 |     showScrollTop: true
 41 |   }
 42 | 
 43 |   const [footerInfo, setFooterInfo] = useState(defaultInfo)
 44 | 
 45 |   // localStorage에서 데이터 로드
 46 |   useEffect(() => {
 47 |     // 푸터 정보 로드
 48 |     const savedData = getData('footer-info')
 49 |     if (savedData) {
 50 |       // Made with와 템플릿 크레딧은 편집 불가이므로 기본값 유지
 51 |       setFooterInfo({ 
 52 |         ...defaultInfo, 
 53 |         ...savedData,
 54 |         showMadeWith: defaultInfo.showMadeWith,
 55 |         madeWithLocation: defaultInfo.madeWithLocation,
 56 |         showTemplateCredit: defaultInfo.showTemplateCredit,
 57 |         templateCreator: defaultInfo.templateCreator
 58 |       })
 59 |     }
 60 |     
 61 |     // 헤더 네비게이션 데이터도 함께 로드
 62 |     const navConfig = getData('nav-config') as { items?: Array<{name: string, url: string, icon: string, show: boolean}> } | null
 63 |     if (navConfig?.items) {
 64 |       // show가 true인 항목만 필터링하여 푸터에 표시
 65 |       const visibleItems = navConfig.items
 66 |         .filter(item => item.show)
 67 |         .map(item => ({ name: item.name, url: item.url }))
 68 |       if (visibleItems.length > 0) {
 69 |         setNavItems(visibleItems)
 70 |       }
 71 |     }
 72 |   }, [isEditMode])
 73 | 
 74 |   const updateFooterInfo = async (key: string, value: string | boolean) => {
 75 |     // Made with와 템플릿 크레딧 관련 필드는 수정 불가
 76 |     if (key === 'showMadeWith' || key === 'madeWithLocation' || 
 77 |         key === 'showTemplateCredit' || key === 'templateCreator') {
 78 |       return
 79 |     }
 80 |     const newInfo = { ...footerInfo, [key]: value }
 81 |     setFooterInfo(newInfo)
 82 |     saveData('footer-info', newInfo)
 83 |     // 파일로도 저장
 84 |     await saveToFile('footer', 'Info', newInfo)
 85 |   }
 86 |   
 87 |   // 푸터 전체를 표시하지 않음
 88 |   if (!footerInfo.showFooter && !isEditMode) {
 89 |     return null
 90 |   }
 91 | 
 92 |   return (
 93 |     <footer className="bg-muted/30 border-t border-border">
 94 |       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
 95 |         {/* 상단 섹션 */}
 96 |         {(footerInfo.name || footerInfo.showQuickLinks || footerInfo.showContactInfo) && (
 97 |           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
 98 |             {/* 브랜드/이름 */}
 99 |             {footerInfo.name && (
100 |               <div>
101 |                 <h3 className="font-bold text-foreground mb-3">
102 |                   <EditableText
103 |                     value={footerInfo.name}
104 |                     onChange={(value) => updateFooterInfo('name', value)}
105 |                     storageKey="footer-name"
106 |                   />
107 |                 </h3>
108 |                 {footerInfo.description && (
109 |                   <p className="text-sm text-muted-foreground leading-relaxed">
110 |                     <EditableText
111 |                       value={footerInfo.description}
112 |                       onChange={(value) => updateFooterInfo('description', value)}
113 |                       storageKey="footer-description"
114 |                       multiline
115 |                     />
116 |                   </p>
117 |                 )}
118 |               </div>
119 |             )}
120 | 
121 |             {/* 빠른 링크 */}
122 |             {footerInfo.showQuickLinks && navItems.length > 0 && (
123 |               <div>
124 |                 <h4 className="font-semibold text-foreground mb-3">
125 |                   <EditableText
126 |                     value={footerInfo.quickLinksTitle}
127 |                     onChange={(value) => updateFooterInfo('quickLinksTitle', value)}
128 |                     storageKey="footer-quicklinks-title"
129 |                   />
130 |                 </h4>
131 |                 <div className="flex flex-col space-y-2">
132 |                   {navItems.map((item, index) => (
133 |                     <button
134 |                       key={index}
135 |                       onClick={() => {
136 |                         const element = document.querySelector(item.url)
137 |                         if (element) {
138 |                           element.scrollIntoView({ behavior: "smooth" })
139 |                         }
140 |                       }}
141 |                       className="text-sm text-muted-foreground hover:text-foreground transition-colors text-left"
142 |                     >
143 |                       {item.name}
144 |                     </button>
145 |                   ))}
146 |                 </div>
147 |               </div>
148 |             )}
149 | 
150 |             {/* 연락처 정보 */}
151 |             {footerInfo.showContactInfo && (footerInfo.phone || footerInfo.email || footerInfo.location) && (
152 |               <div>
153 |                 <h4 className="font-semibold text-foreground mb-3">
154 |                   <EditableText
155 |                     value={footerInfo.contactTitle}
156 |                     onChange={(value) => updateFooterInfo('contactTitle', value)}
157 |                     storageKey="footer-contact-title"
158 |                   />
159 |                 </h4>
160 |                 <div className="space-y-2 text-sm text-muted-foreground">
161 |                   {footerInfo.phone && (
162 |                     <p>
163 |                       <EditableText
164 |                         value={footerInfo.phone}
165 |                         onChange={(value) => updateFooterInfo('phone', value)}
166 |                         storageKey="footer-phone"
167 |                       />
168 |                     </p>
169 |                   )}
170 |                   {footerInfo.email && (
171 |                     <p>
172 |                       <EditableText
173 |                         value={footerInfo.email}
174 |                         onChange={(value) => updateFooterInfo('email', value)}
175 |                         storageKey="footer-email"
176 |                       />
177 |                     </p>
178 |                   )}
179 |                   {footerInfo.location && (
180 |                     <p>
181 |                       <EditableText
182 |                         value={footerInfo.location}
183 |                         onChange={(value) => updateFooterInfo('location', value)}
184 |                         storageKey="footer-location"
185 |                       />
186 |                     </p>
187 |                   )}
188 |                 </div>
189 |               </div>
190 |             )}
191 |           </div>
192 |         )}
193 | 
194 |         {/* 하단 카피라이트 */}
195 |         <div className="border-t border-border pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
196 |           <div className="text-sm text-muted-foreground">
197 |             {isEditMode ? (
198 |               <EditableText
199 |                 value={footerInfo.copyright || `© ${currentYear} ${footerInfo.name || 'Portfolio'}. All rights reserved.`}
200 |                 onChange={(value) => updateFooterInfo('copyright', value)}
201 |                 storageKey="footer-copyright"
202 |               />
203 |             ) : (
204 |               <p>{footerInfo.copyright || `© ${currentYear} ${footerInfo.name || 'Portfolio'}. All rights reserved.`}</p>
205 |             )}
206 |           </div>
207 |           
208 |           {/* Made with 메시지 & 템플릿 크레딧 */}
209 |           <div className="flex items-center gap-2 text-sm text-muted-foreground">
210 |             {footerInfo.showMadeWith && (
211 |               <span className="flex items-center">
212 |                 Made with <Heart className="h-3 w-3 mx-1 text-red-500" />
213 |                 {footerInfo.madeWithLocation && `in ${footerInfo.madeWithLocation}`}
214 |               </span>
215 |             )}
216 |             
217 |             {/* 템플릿 제작자 크레딧 (편집 불가) */}
218 |             {footerInfo.showTemplateCredit && footerInfo.templateCreator && (
219 |               <>
220 |                 {footerInfo.showMadeWith && <span className="text-muted-foreground/50">•</span>}
221 |                 <span className="text-xs text-muted-foreground/70">Template by Mrbaeksang</span>
222 |                 <div className="flex items-center gap-1">
223 |                   <a 
224 |                     href={`mailto:${footerInfo.templateCreator.email}`}
225 |                     className="inline-flex items-center justify-center w-6 h-6 rounded-full hover:bg-muted transition-colors"
226 |                     aria-label="Email"
227 |                   >
228 |                     <Mail className="h-3 w-3 text-muted-foreground/70 hover:text-muted-foreground" />
229 |                   </a>
230 |                   <a 
231 |                     href={footerInfo.templateCreator.youtube}
232 |                     target="_blank"
233 |                     rel="noopener noreferrer"
234 |                     className="inline-flex items-center justify-center w-6 h-6 rounded-full hover:bg-muted transition-colors"
235 |                     aria-label="YouTube"
236 |                   >
237 |                     <Youtube className="h-3 w-3 text-muted-foreground/70 hover:text-muted-foreground" />
238 |                   </a>
239 |                   <a 
240 |                     href={footerInfo.templateCreator.website}
241 |                     target="_blank"
242 |                     rel="noopener noreferrer"
243 |                     className="inline-flex items-center justify-center w-6 h-6 rounded-full hover:bg-muted transition-colors"
244 |                     aria-label="DevCom"
245 |                   >
246 |                     <Globe className="h-3 w-3 text-muted-foreground/70 hover:text-muted-foreground" />
247 |                   </a>
248 |                 </div>
249 |               </>
250 |             )}
251 |           </div>
252 | 
253 |           {/* 맨 위로 버튼 */}
254 |           {footerInfo.showScrollTop && (
255 |             <button
256 |               onClick={scrollToTop}
257 |               className="p-2 rounded-full hover:bg-muted transition-colors"
258 |               aria-label="맨 위로"
259 |             >
260 |               <ArrowUp className="h-4 w-4 text-muted-foreground" />
261 |             </button>
262 |           )}
263 |         </div>
264 |       </div>
265 |     </footer>
266 |   )
267 | }
268 | 


--------------------------------------------------------------------------------
/components/header.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { useState, useEffect } from "react"
  5 | import { Home, User, Briefcase, Mail, Settings, Heart, Star, Camera, Music, Book, Coffee, Rocket, Plus, X, type LucideIcon } from "lucide-react"
  6 | import { NavBar } from "@/components/navbar"
  7 | import { ThemeToggle } from "@/components/theme-toggle"
  8 | import { useInlineEditor } from "@/contexts/inline-editor-context"
  9 | 
 10 | // 아이콘 매핑 객체
 11 | const ICON_MAP = {
 12 |   Home,
 13 |   User,
 14 |   Briefcase,
 15 |   Mail,
 16 |   Settings,
 17 |   Heart,
 18 |   Star,
 19 |   Camera,
 20 |   Music,
 21 |   Book,
 22 |   Coffee,
 23 |   Rocket
 24 | }
 25 | 
 26 | // 기본 데이터 (파일에는 문자열로 저장되지만 여기서는 컴포넌트로 변환)
 27 | export const defaultConfig = {
 28 |     logo: "포트폴리오",
 29 |     logoImage: "",
 30 |     showNavBar: true,
 31 |     showThemeToggle: true,
 32 |     items: [{"name":"Home","url":"#hero","icon":"Home","show":true},{"name":"About","url":"#about","icon":"User","show":true},{"name":"Projects","url":"#projects","icon":"Briefcase","show":true},{"name":"Contact","url":"#contact","icon":"Mail","show":true},{"name":"갤러리","url":"#gallery","icon":"Camera","show":false},{"name":"블로그","url":"#blog","icon":"Book","show":false}],
 33 |     siteTitle: "My portfolio",
 34 |     siteDescription: "창의적인 아이디어로 웹 경험을 디자인합니다!"
 35 |   }
 36 | 
 37 | export function Header() {
 38 |   const { getData, saveData, isEditMode, saveToFile, saveFieldToFile } = useInlineEditor()
 39 |   
 40 |   // defaultConfig의 아이콘을 컴포넌트로 변환한 상태로 초기화
 41 |   const [navConfig, setNavConfig] = useState({
 42 |     ...defaultConfig,
 43 |     items: defaultConfig.items.map(item => ({
 44 |       ...item,
 45 |       icon: typeof item.icon === 'string' 
 46 |         ? (ICON_MAP[item.icon as keyof typeof ICON_MAP] || Home)
 47 |         : item.icon
 48 |     }))
 49 |   })
 50 |   const [showEditModal, setShowEditModal] = useState(false)
 51 |   const [siteTitle, setSiteTitle] = useState(defaultConfig.siteTitle)
 52 |   const [siteDescription, setSiteDescription] = useState(defaultConfig.siteDescription)
 53 |   
 54 |   // localStorage에서 데이터 로드
 55 |   useEffect(() => {
 56 |     // 사이트 제목 복원 - site-title.tsx와 같은 키 사용
 57 |     const savedTitle = localStorage.getItem('portfolio-site-title')
 58 |     if (savedTitle) {
 59 |       setSiteTitle(savedTitle)
 60 |       document.title = savedTitle
 61 |     } else {
 62 |       // 현재 document.title을 기본값으로 사용
 63 |       setSiteTitle(document.title)
 64 |     }
 65 |     
 66 |     const savedData = getData('nav-config') as { 
 67 |       logo?: string; 
 68 |       logoImage?: string; 
 69 |       showNavBar?: boolean; 
 70 |       showThemeToggle?: boolean; 
 71 |       items?: Array<{ name: string; url: string; icon: string; show: boolean }> 
 72 |     } | null
 73 |     if (savedData && savedData.items) {
 74 |       // 아이콘 복원
 75 |       const restoredItems = savedData.items.map((item) => {
 76 |         let iconComponent = Home // 기본값
 77 |         
 78 |         // 문자열로 저장된 아이콘 이름을 컴포넌트로 변환
 79 |         if (typeof item.icon === 'string' && ICON_MAP[item.icon as keyof typeof ICON_MAP]) {
 80 |           iconComponent = ICON_MAP[item.icon as keyof typeof ICON_MAP]
 81 |         }
 82 |         
 83 |         return {
 84 |           ...item,
 85 |           icon: iconComponent
 86 |         }
 87 |       })
 88 |       
 89 |       setNavConfig({ 
 90 |         ...defaultConfig, 
 91 |         ...savedData,
 92 |         items: restoredItems
 93 |       })
 94 |     }
 95 |   }, [])
 96 |   
 97 |   const updateNavConfig = (key: string, value: string | boolean | typeof navConfig.items) => {
 98 |     const newConfig = { ...navConfig, [key]: value }
 99 |     setNavConfig(newConfig)
100 |     
101 |     // 사이트 제목과 디스크립션 업데이트
102 |     if (key === 'siteTitle' && typeof value === 'string') {
103 |       setSiteTitle(value)
104 |       document.title = value
105 |       localStorage.setItem('portfolio-site-title', value)
106 |     }
107 | 
108 |     if (key === 'siteDescription' && typeof value === 'string') {
109 |       setSiteDescription(value)
110 |       localStorage.setItem('portfolio-site-description', value)
111 |     }
112 |     
113 |     // 저장할 때 아이콘을 문자열로 변환
114 |     const configToSave: { 
115 |       logo?: string; 
116 |       logoImage?: string; 
117 |       showNavBar?: boolean; 
118 |       showThemeToggle?: boolean; 
119 |       items?: Array<{ name: string; url: string; icon: string | LucideIcon; show: boolean }> 
120 |     } = { ...newConfig }
121 |     if (configToSave.items) {
122 |       configToSave.items = newConfig.items.map((item) => {
123 |         const iconName = Object.keys(ICON_MAP).find(key => ICON_MAP[key as keyof typeof ICON_MAP] === item.icon) || 'Home'
124 |         return {
125 |           ...item,
126 |           icon: iconName
127 |         }
128 |       })
129 |     }
130 |     saveData('nav-config', configToSave)
131 |   }
132 |   
133 |   const updateMenuItem = (index: number, field: string, value: string | boolean | LucideIcon) => {
134 |     const newItems = [...navConfig.items]
135 |     newItems[index] = { ...newItems[index], [field]: value }
136 |     updateNavConfig('items', newItems)
137 |   }
138 |   
139 |   const addMenuItem = () => {
140 |     const newItems = [...navConfig.items]
141 |     newItems.push({
142 |       name: "새 메뉴",
143 |       url: "#new",
144 |       icon: Home,
145 |       show: true
146 |     })
147 |     updateNavConfig('items', newItems)
148 |   }
149 |   
150 |   const removeMenuItem = (index: number) => {
151 |     const newItems = navConfig.items.filter((_, i) => i !== index)
152 |     updateNavConfig('items', newItems)
153 |   }
154 |   
155 |   // 실제로 표시할 메뉴만 필터링하고 아이콘 문자열을 컴포넌트로 변환
156 |   const activeItems = navConfig.items
157 |     .filter(item => item.show)
158 |     .map(item => {
159 |       // icon이 이미 컴포넌트인 경우 그대로 사용
160 |       if (typeof item.icon !== 'string') {
161 |         return item
162 |       }
163 |       // 문자열인 경우 컴포넌트로 변환
164 |       return {
165 |         ...item,
166 |         icon: ICON_MAP[item.icon as keyof typeof ICON_MAP] || Home
167 |       }
168 |     })
169 |   
170 |   // 네비게이션 바를 표시하지 않음
171 |   if (!navConfig.showNavBar) {
172 |     return navConfig.showThemeToggle ? (
173 |       <div className="fixed top-6 right-6 z-50">
174 |         <ThemeToggle />
175 |       </div>
176 |     ) : null
177 |   }
178 |   
179 |   return (
180 |     <>
181 |       {/* Navigation Bar */}
182 |       <NavBar 
183 |         items={activeItems} 
184 |         logo={navConfig.logo}
185 |         logoImage={navConfig.logoImage}
186 |         isEditMode={isEditMode}
187 |         onEditMenu={() => setShowEditModal(true)}
188 |       />
189 |       
190 |       {/* Theme Toggle - Fixed Position */}
191 |       {navConfig.showThemeToggle && (
192 |         <div className="fixed top-20 right-6 md:top-6 md:right-6 z-50">
193 |           <ThemeToggle />
194 |         </div>
195 |       )}
196 |       
197 |       {/* Edit Modal */}
198 |       {showEditModal && isEditMode && (
199 |         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100]">
200 |           <div className="bg-background border rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
201 |             <h3 className="text-lg font-semibold mb-4">사이트 설정</h3>
202 |             
203 |             {/* Site Title */}
204 |             <div className="mb-6 p-4 border rounded-lg">
205 |               <h4 className="font-medium mb-3">사이트 제목 설정</h4>
206 |               <div className="space-y-3">
207 |                 <div>
208 |                   <label className="text-sm text-muted-foreground">브라우저 탭 제목</label>
209 |                   <input
210 |                     type="text"
211 |                     value={siteTitle}
212 |                     onChange={(e) => {
213 |                       setSiteTitle(e.target.value)
214 |                       document.title = e.target.value
215 |                       updateNavConfig('siteTitle', e.target.value)
216 |                     }}
217 |                     className="w-full px-3 py-2 border rounded-lg bg-background"
218 |                     placeholder="나의 포트폴리오"
219 |                   />
220 |                 </div>
221 |                 <div>
222 |                   <label className="text-sm text-muted-foreground">사이트 설명</label>
223 |                   <input
224 |                     type="text"
225 |                     value={siteDescription}
226 |                     onChange={(e) => {
227 |                       setSiteDescription(e.target.value)
228 |                       updateNavConfig('siteDescription', e.target.value)
229 |                     }}
230 |                     className="w-full px-3 py-2 border rounded-lg bg-background"
231 |                     placeholder="창의적인 아이디어로 웹 경험을 디자인합니다."
232 |                   />
233 |                 </div>
234 |               </div>
235 |             </div>
236 |             
237 |             {/* Logo Settings */}
238 |             <div className="mb-6 p-4 border rounded-lg">
239 |               <h4 className="font-medium mb-3">네비바 로고 설정</h4>
240 |               <div className="space-y-3">
241 |                 <div>
242 |                   <label className="text-sm text-muted-foreground">로고 텍스트</label>
243 |                   <input
244 |                     type="text"
245 |                     value={navConfig.logo}
246 |                     onChange={(e) => updateNavConfig('logo', e.target.value)}
247 |                     className="w-full px-3 py-2 border rounded-lg bg-background"
248 |                     placeholder="나의 포트폴리오"
249 |                   />
250 |                 </div>
251 |               </div>
252 |             </div>
253 |             
254 |             {/* Menu Items - 홈, 소개, 프로젝트, 연락처만 이름 변경 가능 */}
255 |             <div className="mb-6">
256 |               <h4 className="font-medium mb-3">메뉴 이름 변경</h4>
257 |               <div className="space-y-3">
258 |                 {navConfig.items.slice(0, 4).map((item, index) => (
259 |                   <div key={index} className="flex items-center gap-2">
260 |                     <label className="text-sm text-muted-foreground w-20">
261 |                       {index === 0 ? '홈' : index === 1 ? '소개' : index === 2 ? '프로젝트' : '연락처'}
262 |                     </label>
263 |                     <input
264 |                       type="text"
265 |                       value={item.name}
266 |                       onChange={(e) => updateMenuItem(index, 'name', e.target.value)}
267 |                       className="flex-1 px-2 py-1 border rounded bg-background"
268 |                       placeholder="메뉴 이름"
269 |                     />
270 |                   </div>
271 |                 ))}
272 |               </div>
273 |             </div>
274 |             
275 |             <div className="flex gap-2">
276 |               <button
277 |                 onClick={() => setShowEditModal(false)}
278 |                 className="flex-1 py-2 bg-muted text-foreground rounded-lg hover:bg-muted/80"
279 |               >
280 |                 닫기
281 |               </button>
282 |               <button
283 |                 onClick={async () => {
284 |                   // 아이콘을 문자열로 변환한 설정 객체 생성
285 |                   const configToSave = {
286 |                     ...navConfig,
287 |                     siteTitle: siteTitle, // 실제 입력된 siteTitle 변수 사용
288 |                     siteDescription: siteDescription, // 실제 입력된 siteDescription 변수 사용
289 |                     items: navConfig.items.map((item) => ({
290 |                       ...item,
291 |                       icon: typeof item.icon === 'string'
292 |                         ? item.icon
293 |                         : Object.keys(ICON_MAP).find(key => ICON_MAP[key as keyof typeof ICON_MAP] === item.icon) || 'Home'
294 |                     }))
295 |                   }
296 | 
297 |                   // 다른 컴포넌트들처럼 간단하게 한 번에 저장
298 |                   const success = await saveToFile('header', 'Config', configToSave)
299 | 
300 |                   if (success) {
301 |                     saveData('nav-config', configToSave)
302 |                     localStorage.setItem('portfolio-site-title', siteTitle)
303 |                     localStorage.setItem('portfolio-site-description', siteDescription)
304 |                     document.title = siteTitle // 저장 후 document.title 다시 설정
305 |                     alert('✅ 네비게이션 설정이 파일에 저장되었습니다!')
306 |                     setShowEditModal(false)
307 |                   } else {
308 |                     alert('❌ 파일 저장에 실패했습니다.')
309 |                   }
310 |                 }}
311 |                 className="flex-1 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 font-medium"
312 |               >
313 |                 📁 파일에 저장
314 |               </button>
315 |             </div>
316 |           </div>
317 |         </div>
318 |       )}
319 |     </>
320 |   )
321 | }
322 | 


--------------------------------------------------------------------------------
/components/hero.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { useState, useEffect } from "react"
  5 | import { Button } from "@/components/ui/button"
  6 | import { ArrowDown, Instagram, MessageCircle, Mail, Youtube, Facebook, Twitter, Globe, Linkedin, Settings, X, Plus, Github, Twitch, Send, MessageSquare } from "lucide-react"
  7 | import { EditableText } from "@/components/editable/editable-text"
  8 | import { EditableMedia } from "@/components/editable/editable-media"
  9 | import { EditableBackground } from "@/components/editable/editable-background"
 10 | import { useInlineEditor } from "@/contexts/inline-editor-context"
 11 | 
 12 | // 사용 가능한 아이콘 정의
 13 | const AVAILABLE_ICONS = {
 14 |   instagram: Instagram,
 15 |   youtube: Youtube,
 16 |   facebook: Facebook,
 17 |   twitter: Twitter,
 18 |   linkedin: Linkedin,
 19 |   github: Github,
 20 |   discord: MessageSquare,
 21 |   twitch: Twitch,
 22 |   telegram: Send,
 23 |   globe: Globe,
 24 |   message: MessageCircle,
 25 |   mail: Mail,
 26 |   plus: Plus,
 27 |   settings: Settings,
 28 |   x: X,
 29 |   arrowDown: ArrowDown,
 30 | }
 31 | 
 32 | export function Hero() {
 33 |   const { getData, saveData, isEditMode, saveToFile, saveFieldToFile } = useInlineEditor()
 34 |   
 35 |   // 초기 데이터 - 배열 형태로 변경
 36 |   const defaultSocialLinks = [{"name":"Instagram","icon":"instagram","url":"https://instagram.com/username"},{"name":"YouTube","icon":"youtube","url":"https://youtube.com/@username"}]
 37 |   
 38 |   const defaultInfo = {
 39 |     greeting: "안녕하세요,",
 40 |     name: "당신의 이름",
 41 |     title: "프론트엔드 개발자",
 42 |     description: "창의적인 아이디어로 웹 경험을 디자인합니다.",
 43 |     profileImage: "",
 44 |     backgroundImage: "",
 45 |     backgroundVideo: "",
 46 |     backgroundOpacity: 0.1,
 47 |     projectButton: "프로젝트 보기",
 48 |     background: {"image":"","video":"","color":"","opacity":0.1}
 49 |   }
 50 | 
 51 |   const [backgroundData, setBackgroundData] = useState<{ image: string; video: string; color: string; opacity: number } | null>(null)
 52 |   const [heroInfo, setHeroInfo] = useState(defaultInfo)
 53 |   const [socialLinks, setSocialLinks] = useState(defaultSocialLinks)
 54 |   const [showSocialEditor, setShowSocialEditor] = useState(false)
 55 |   const [showIconPicker, setShowIconPicker] = useState<number | null>(null)
 56 | 
 57 |   // localStorage에서 데이터 로드 - 편집 모드가 변경될 때마다 실행
 58 |   useEffect(() => {
 59 |     const savedData = getData('hero-info') as typeof defaultInfo | null
 60 |     if (savedData) {
 61 |       setHeroInfo({ ...defaultInfo, ...savedData })
 62 |       // background 데이터가 있으면 설정 (savedData에는 background 필드가 없음)
 63 |     }
 64 |     
 65 |     const savedSocial = getData('hero-social-links') as { name: string; icon: string; url: string }[] | null
 66 |     if (savedSocial) {
 67 |       setSocialLinks(savedSocial)
 68 |     }
 69 |     
 70 |     const savedBg = getData('hero-background') as { image: string; video: string; color: string; opacity: number } | null
 71 |     if (savedBg) {
 72 |       setBackgroundData(savedBg)
 73 |     }
 74 |   }, [isEditMode]) // isEditMode가 변경될 때마다 데이터 다시 로드
 75 | 
 76 |   const updateHeroInfo = (key: string, value: string) => {
 77 |     // 업데이트
 78 |     const newInfo = {
 79 |       ...heroInfo,
 80 |       [key]: value
 81 |     }
 82 |     setHeroInfo(newInfo)
 83 |     saveData('hero-info', newInfo)
 84 |   }
 85 |   
 86 |   const addSocialLink = () => {
 87 |     const newLinks = [...socialLinks]
 88 |     newLinks.push({ name: '새 링크', icon: 'globe', url: '' })
 89 |     setSocialLinks(newLinks)
 90 |     saveData('hero-social-links', newLinks)
 91 |   }
 92 |   
 93 |   const updateSocialLink = (index: number, field: 'name' | 'icon' | 'url', value: string) => {
 94 |     const newLinks = [...socialLinks]
 95 |     newLinks[index] = { ...newLinks[index], [field]: value }
 96 |     setSocialLinks(newLinks)
 97 |     saveData('hero-social-links', newLinks)
 98 |   }
 99 |   
100 |   const removeSocialLink = (index: number) => {
101 |     const newLinks = socialLinks.filter((_, i) => i !== index)
102 |     setSocialLinks(newLinks)
103 |     saveData('hero-social-links', newLinks)
104 |   }
105 | 
106 |   const scrollToAbout = () => {
107 |     const aboutSection = document.querySelector("#about")
108 |     if (aboutSection) {
109 |       aboutSection.scrollIntoView({ behavior: "smooth" })
110 |     }
111 |   }
112 | 
113 |   const scrollToProjects = () => {
114 |     const projectsSection = document.querySelector("#projects")
115 |     if (projectsSection) {
116 |       projectsSection.scrollIntoView({ behavior: "smooth" })
117 |     }
118 |   }
119 | 
120 | 
121 |   // 소셜 아이콘 렌더링 함수
122 |   const renderSocialIcon = (link: { name: string; icon: string; url: string }, index: number) => {
123 |     const Icon = AVAILABLE_ICONS[link.icon as keyof typeof AVAILABLE_ICONS] || Globe
124 |     if (!link.url && !isEditMode) return null
125 |     
126 |     const isEmail = link.icon === 'mail' || link.url.startsWith('mailto:')
127 |     const href = isEmail && !link.url.startsWith('mailto:') ? `mailto:${link.url}` : link.url
128 |     
129 |     return (
130 |       <a
131 |         key={index}
132 |         href={href || '#'}
133 |         target={isEmail ? undefined : "_blank"}
134 |         rel={isEmail ? undefined : "noopener noreferrer"}
135 |         className="w-10 h-10 rounded-full border border-foreground/20 flex items-center justify-center hover:bg-foreground hover:text-background transition-all hover:scale-110"
136 |         onClick={!link.url ? (e) => e.preventDefault() : undefined}
137 |         title={link.name}
138 |       >
139 |         <Icon className="h-5 w-5" />
140 |       </a>
141 |     )
142 |   }
143 | 
144 |   return (
145 |     <EditableBackground
146 |       image={backgroundData?.image || ""}
147 |       video={backgroundData?.video || ""}
148 |       color={backgroundData?.color || ""}
149 |       opacity={backgroundData?.opacity || 0.1}
150 |       onChange={(data) => {
151 |         const newData = {
152 |           image: backgroundData?.image || "",
153 |           video: backgroundData?.video || "",
154 |           color: backgroundData?.color || "",
155 |           opacity: backgroundData?.opacity || 0.1,
156 |           ...data
157 |         }
158 |         setBackgroundData(newData)
159 |         saveData('hero-background', newData)
160 |         
161 |         // heroInfo도 업데이트 (파일 저장을 위해)
162 |         const updatedHeroInfo = { ...heroInfo, background: newData }
163 |         setHeroInfo(updatedHeroInfo)
164 |         saveData('hero-info', updatedHeroInfo)
165 |       }}
166 |       storageKey="hero-background"
167 |       className="min-h-screen flex items-center justify-center relative overflow-hidden"
168 |     >
169 |       <section 
170 |         id="hero" 
171 |         className="w-full"
172 |       >
173 |         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
174 |           <div className="grid md:grid-cols-2 gap-12 items-center">
175 |             {/* 왼쪽: 텍스트 내용 */}
176 |             <div className="order-2 md:order-1">
177 |               <h2 className="text-3xl font-bold mb-2">
178 |                 <EditableText
179 |                   value={heroInfo.greeting}
180 |                   onChange={(value) => updateHeroInfo('greeting', value)}
181 |                   storageKey="hero-greeting"
182 |                 />
183 |               </h2>
184 |               <h1 className="text-5xl md:text-6xl font-bold mb-4">
185 |                 <EditableText
186 |                   value={heroInfo.name}
187 |                   onChange={(value) => updateHeroInfo('name', value)}
188 |                   storageKey="hero-name"
189 |                 />
190 |               </h1>
191 |               <p className="text-2xl mb-4 text-muted-foreground">
192 |                 <EditableText
193 |                   value={heroInfo.title}
194 |                   onChange={(value) => updateHeroInfo('title', value)}
195 |                   storageKey="hero-title"
196 |                 />
197 |               </p>
198 |               <p className="text-lg mb-8 text-muted-foreground">
199 |                 <EditableText
200 |                   value={heroInfo.description}
201 |                   onChange={(value) => updateHeroInfo('description', value)}
202 |                   storageKey="hero-description"
203 |                   multiline
204 |                 />
205 |               </p>
206 | 
207 |               {/* 프로젝트 보기 버튼 */}
208 |               <div className="mb-8">
209 |                 {isEditMode ? (
210 |                   <div className="flex flex-col gap-2 w-fit">
211 |                     <input
212 |                       type="text"
213 |                       value={heroInfo.projectButton}
214 |                       onChange={(e) => updateHeroInfo('projectButton', e.target.value)}
215 |                       placeholder="프로젝트 버튼 텍스트"
216 |                       className="px-3 py-2 border rounded-lg bg-background text-sm text-center"
217 |                     />
218 |                     <Button onClick={scrollToProjects} size="lg" disabled className="justify-center">
219 |                       {heroInfo.projectButton || "프로젝트 보기"}
220 |                     </Button>
221 |                   </div>
222 |                 ) : (
223 |                   heroInfo.projectButton && (
224 |                     <Button onClick={scrollToProjects} size="lg" className="justify-center">
225 |                       {heroInfo.projectButton}
226 |                     </Button>
227 |                   )
228 |                 )}
229 |               </div>
230 | 
231 |               {/* 소셜 링크 */}
232 |               <div className="flex gap-4 flex-wrap items-center">
233 |                 {socialLinks.map((link, index) => renderSocialIcon(link, index))}
234 |                 
235 |                 {/* 편집 버튼 */}
236 |                 {isEditMode && (
237 |                   <button
238 |                     onClick={() => setShowSocialEditor(true)}
239 |                     className="w-10 h-10 rounded-full border-2 border-dashed border-foreground/20 flex items-center justify-center hover:border-primary hover:bg-primary/10 transition-all"
240 |                     title="소셜 링크 편집"
241 |                   >
242 |                     <Settings className="h-5 w-5" />
243 |                   </button>
244 |                 )}
245 |               </div>
246 |             </div>
247 | 
248 |             {/* 오른쪽: 프로필 이미지 */}
249 |             <div className="order-1 md:order-2 flex justify-center">
250 |               <div className="relative">
251 |                 <div className="w-64 h-64 md:w-80 md:h-80 rounded-full bg-muted overflow-hidden shadow-2xl">
252 |                   <EditableMedia
253 |                     src={heroInfo.profileImage}
254 |                     onChange={(src) => updateHeroInfo('profileImage', src)}
255 |                     type="image"
256 |                     storageKey="hero-profileImage"
257 |                     className="w-full h-full object-contain"
258 |                     alt="프로필"
259 |                     purpose="hero-profile"
260 |                   />
261 |                 </div>
262 |                 <div className="absolute inset-0 rounded-full bg-gradient-to-tr from-primary/20 to-transparent pointer-events-none" />
263 |               </div>
264 |             </div>
265 |           </div>
266 |         </div>
267 | 
268 |         {/* 스크롤 인디케이터 */}
269 |         <button
270 |           onClick={scrollToAbout}
271 |           className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce"
272 |         >
273 |           <ArrowDown className="h-6 w-6 text-muted-foreground" />
274 |         </button>
275 |       </section>
276 |       
277 |       {/* 소셜 링크 편집 모달 */}
278 |       {showSocialEditor && isEditMode && (
279 |         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100]">
280 |           <div className="bg-background border rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
281 |             <div className="flex items-center justify-between mb-4">
282 |               <h3 className="text-lg font-semibold">소셜 링크 편집</h3>
283 |               <button
284 |                 onClick={() => setShowSocialEditor(false)}
285 |                 className="p-1 hover:bg-muted rounded-lg"
286 |               >
287 |                 <X className="h-5 w-5" />
288 |               </button>
289 |             </div>
290 |             
291 |             <div className="space-y-3">
292 |               {socialLinks.map((link, index) => {
293 |                 const Icon = AVAILABLE_ICONS[link.icon as keyof typeof AVAILABLE_ICONS] || Globe
294 |                 
295 |                 return (
296 |                   <div key={index} className="flex items-center gap-3 p-3 border rounded-lg">
297 |                     {/* 아이콘 미리보기 */}
298 |                     <div className="w-10 h-10 rounded-full border border-foreground/20 flex items-center justify-center">
299 |                       <Icon className="h-5 w-5" />
300 |                     </div>
301 |                     
302 |                     {/* 플랫폼 이름 입력 */}
303 |                     <input
304 |                       type="text"
305 |                       value={link.name}
306 |                       onChange={(e) => updateSocialLink(index, 'name', e.target.value)}
307 |                       placeholder="플랫폼 이름"
308 |                       className="w-32 px-3 py-2 border rounded-lg bg-background"
309 |                     />
310 |                     
311 |                     {/* 아이콘 선택 버튼 */}
312 |                     <div className="relative">
313 |                       <button
314 |                         onClick={() => setShowIconPicker(showIconPicker === index ? null : index)}
315 |                         className="px-3 py-2 border rounded-lg bg-background hover:bg-muted flex items-center gap-2"
316 |                       >
317 |                         <Icon className="h-4 w-4" />
318 |                         <span className="text-sm">아이콘 변경</span>
319 |                       </button>
320 |                       
321 |                       {/* 아이콘 선택 드롭다운 */}
322 |                       {showIconPicker === index && (
323 |                         <div className="absolute top-full mt-2 left-0 bg-background border rounded-lg shadow-lg p-2 z-50 w-64 max-h-64 overflow-y-auto">
324 |                           <div className="text-xs font-medium text-muted-foreground mb-2 px-2">소셜 미디어</div>
325 |                           <div className="grid grid-cols-4 gap-1">
326 |                             {[
327 |                               { value: 'instagram', label: 'Instagram' },
328 |                               { value: 'youtube', label: 'YouTube' },
329 |                               { value: 'facebook', label: 'Facebook' },
330 |                               { value: 'twitter', label: 'Twitter' },
331 |                               { value: 'linkedin', label: 'LinkedIn' },
332 |                               { value: 'github', label: 'GitHub' },
333 |                               { value: 'discord', label: 'Discord' },
334 |                               { value: 'twitch', label: 'Twitch' },
335 |                               { value: 'telegram', label: 'Telegram' },
336 |                               { value: 'message', label: '메시지' },
337 |                               { value: 'mail', label: '이메일' },
338 |                               { value: 'globe', label: '웹사이트' }
339 |                             ].map(({ value, label }) => {
340 |                               const IconOption = AVAILABLE_ICONS[value as keyof typeof AVAILABLE_ICONS]
341 |                               return (
342 |                                 <button
343 |                                   key={value}
344 |                                   onClick={() => {
345 |                                     updateSocialLink(index, 'icon', value)
346 |                                     setShowIconPicker(null)
347 |                                   }}
348 |                                   className="p-2 hover:bg-muted rounded-lg flex flex-col items-center gap-1 transition-colors"
349 |                                   title={label}
350 |                                 >
351 |                                   <IconOption className="h-5 w-5" />
352 |                                   <span className="text-xs">{label}</span>
353 |                                 </button>
354 |                               )
355 |                             })}
356 |                           </div>
357 |                         </div>
358 |                       )}
359 |                     </div>
360 |                     
361 |                     {/* URL 입력 */}
362 |                     <input
363 |                       type="text"
364 |                       value={link.url}
365 |                       onChange={(e) => updateSocialLink(index, 'url', e.target.value)}
366 |                       placeholder="URL 또는 이메일"
367 |                       className="flex-1 px-3 py-2 border rounded-lg bg-background"
368 |                     />
369 |                     
370 |                     {/* 삭제 버튼 */}
371 |                     <button
372 |                       onClick={() => removeSocialLink(index)}
373 |                       className="p-2 text-destructive hover:bg-destructive/10 rounded-lg"
374 |                     >
375 |                       <X className="h-4 w-4" />
376 |                     </button>
377 |                   </div>
378 |                 )
379 |               })}
380 |               
381 |               <button
382 |                 onClick={addSocialLink}
383 |                 className="w-full py-3 border-2 border-dashed rounded-lg hover:border-primary hover:bg-primary/5 transition-all"
384 |               >
385 |                 <Plus className="h-4 w-4 inline mr-2" />
386 |                 소셜 링크 추가
387 |               </button>
388 |             </div>
389 |             
390 |             <div className="mt-6 pt-4 border-t">
391 |               <p className="text-sm text-muted-foreground mb-4">
392 |                 💡 팁: 플랫폼 이름을 입력하고, 아이콘을 선택한 후 URL을 입력하세요. 빈 URL은 표시되지 않습니다.
393 |               </p>
394 |               <div className="flex gap-2">
395 |                 <button
396 |                   onClick={() => setShowSocialEditor(false)}
397 |                   className="flex-1 py-2 bg-muted text-foreground rounded-lg hover:bg-muted/80"
398 |                 >
399 |                   닫기
400 |                 </button>
401 |                 <button
402 |                   onClick={async () => {
403 |                     // Hero 컴포넌트의 모든 데이터를 수집
404 |                     const allData = {
405 |                       greeting: heroInfo.greeting,
406 |                       name: heroInfo.name,
407 |                       title: heroInfo.title,
408 |                       description: heroInfo.description,
409 |                       profileImage: heroInfo.profileImage,
410 |                       backgroundImage: backgroundData?.image || "",
411 |                       backgroundVideo: backgroundData?.video || "",
412 |                       backgroundOpacity: backgroundData?.opacity || 0.1,
413 |                       projectButton: heroInfo.projectButton,
414 |                     }
415 |                     
416 |                     // heroInfo 파일에 저장
417 |                     const success1 = await saveToFile('hero', 'Info', allData)
418 |                     
419 |                     // 소셜 링크도 파일에 저장 (defaultSocialLinks 필드 업데이트)
420 |                     const success2 = await saveFieldToFile('hero', 'defaultSocialLinks', socialLinks)
421 |                     
422 |                     if (success1 && success2) {
423 |                       // localStorage도 업데이트
424 |                       saveData('hero-info', heroInfo)
425 |                       saveData('hero-social-links', socialLinks)
426 |                       saveData('hero-background', backgroundData)
427 |                       alert('✅ 파일이 성공적으로 저장되었습니다!\n\n이제 F5를 눌러도 변경사항이 유지됩니다.')
428 |                       setShowSocialEditor(false)
429 |                     } else {
430 |                       alert('❌ 파일 저장에 실패했습니다.')
431 |                     }
432 |                   }}
433 |                   className="flex-1 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 font-medium"
434 |                 >
435 |                   📁 파일에 저장
436 |                 </button>
437 |               </div>
438 |             </div>
439 |           </div>
440 |         </div>
441 |       )}
442 |     </EditableBackground>
443 |   )
444 | }


--------------------------------------------------------------------------------
/components/editable/editable-background.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useRef, useEffect } from 'react'
  4 | import { useInlineEditor } from '@/contexts/inline-editor-context'
  5 | import { Upload, Image as ImageIcon, Video, Palette, Settings } from 'lucide-react'
  6 | 
  7 | interface EditableBackgroundProps {
  8 |   image?: string
  9 |   video?: string
 10 |   color?: string
 11 |   opacity?: number
 12 |   onChange: (data: {
 13 |     image?: string
 14 |     video?: string
 15 |     color?: string
 16 |     opacity?: number
 17 |   }) => void
 18 |   storageKey?: string
 19 |   className?: string
 20 |   children?: React.ReactNode
 21 | }
 22 | 
 23 | export function EditableBackground({ 
 24 |   image = '',
 25 |   video = '',
 26 |   color = '',
 27 |   opacity = 0.5,
 28 |   onChange,
 29 |   storageKey,
 30 |   className = '',
 31 |   children
 32 | }: EditableBackgroundProps) {
 33 |   const { isEditMode, saveData, getData } = useInlineEditor()
 34 |   const [showSettings, setShowSettings] = useState(false)
 35 |   const [backgroundType, setBackgroundType] = useState<'image' | 'video' | 'color'>(
 36 |     video ? 'video' : 'image'  // 기본값을 항상 'image'로 설정
 37 |   )
 38 |   const [tempImage, setTempImage] = useState(image)
 39 |   const [tempVideo, setTempVideo] = useState(video)
 40 |   const [tempColor, setTempColor] = useState(color || '#000000')
 41 |   const [tempOpacity, setTempOpacity] = useState(opacity)
 42 |   const [imageAspect, setImageAspect] = useState<string>('object-contain')
 43 | 
 44 |   // 초기값 로드
 45 |   useEffect(() => {
 46 |     if (storageKey) {
 47 |       const saved = getData(storageKey) as { image?: string; video?: string; color?: string; opacity?: number } | null
 48 |       if (saved) {
 49 |         if (saved.video) {
 50 |           setBackgroundType('video')
 51 |           setTempVideo(saved.video)
 52 |         } else if (saved.image) {
 53 |           setBackgroundType('image')
 54 |           setTempImage(saved.image)
 55 |           detectImageAspect(saved.image)
 56 |         } else if (saved.color) {
 57 |           setBackgroundType('color')
 58 |           setTempColor(saved.color)
 59 |         }
 60 |         setTempOpacity(saved.opacity || 0.5)
 61 |         onChange(saved as { image: string; video: string; color: string; opacity: number })
 62 |       }
 63 |     }
 64 |   }, [storageKey])
 65 | 
 66 |   // 이미지 비율 감지 함수
 67 |   const detectImageAspect = (src: string) => {
 68 |     if (!src) return
 69 |     
 70 |     const img = new Image()
 71 |     img.onload = () => {
 72 |       const ratio = img.width / img.height
 73 |       
 74 |       // 비율에 따라 object-fit 스타일 결정
 75 |       if (ratio >= 2.5) {
 76 |         // 매우 넓은 이미지는 cover로 (배경으로 적합)
 77 |         setImageAspect('object-cover')
 78 |       } else {
 79 |         // 일반적인 비율은 contain으로 (전체가 보이도록)
 80 |         setImageAspect('object-contain')
 81 |       }
 82 |     }
 83 |     img.src = src
 84 |   }
 85 | 
 86 |   // 이미지가 변경될 때마다 비율 감지
 87 |   useEffect(() => {
 88 |     if (tempImage) {
 89 |       detectImageAspect(tempImage)
 90 |     }
 91 |   }, [tempImage])
 92 | 
 93 |   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
 94 |     const file = e.target.files?.[0]
 95 |     if (file) {
 96 |       const reader = new FileReader()
 97 |       reader.onloadend = () => {
 98 |         const result = reader.result as string
 99 |         if (file.type.includes('video')) {
100 |           setTempVideo(result)
101 |           setBackgroundType('video')
102 |           handleSave('video', result)
103 |         } else {
104 |           setTempImage(result)
105 |           setBackgroundType('image')
106 |           detectImageAspect(result)
107 |           handleSave('image', result)
108 |         }
109 |       }
110 |       reader.readAsDataURL(file)
111 |     }
112 |   }
113 | 
114 |   const handleSave = async (type?: string, value?: string) => {
115 |     // 이전 파일 삭제를 위한 로직
116 |     const prevImage = tempImage
117 |     const prevVideo = tempVideo
118 |     
119 |     const data = {
120 |       image: backgroundType === 'image' ? (value || tempImage) : '',
121 |       video: backgroundType === 'video' ? (value || tempVideo) : '',
122 |       color: backgroundType === 'color' ? tempColor : '',
123 |       opacity: tempOpacity
124 |     }
125 |     
126 |     // 배경 타입이 변경되면 이전 파일 삭제 (업로드된 파일만)
127 |     if (backgroundType !== 'image' && prevImage && prevImage.includes('/uploads/')) {
128 |       // 이미지에서 다른 타입으로 변경시 이미지 삭제
129 |       try {
130 |         await fetch('/api/delete-image', {
131 |           method: 'DELETE',
132 |           headers: { 'Content-Type': 'application/json' },
133 |           body: JSON.stringify({ imagePath: prevImage })
134 |         })
135 |       } catch (error) {
136 |         console.error('Failed to delete old image:', error)
137 |       }
138 |     }
139 |     
140 |     if (backgroundType !== 'video' && prevVideo && prevVideo.includes('/uploads/')) {
141 |       // 비디오에서 다른 타입으로 변경시 비디오 삭제
142 |       try {
143 |         await fetch('/api/delete-image', {
144 |           method: 'DELETE',
145 |           headers: { 'Content-Type': 'application/json' },
146 |           body: JSON.stringify({ imagePath: prevVideo })
147 |         })
148 |       } catch (error) {
149 |         console.error('Failed to delete old video:', error)
150 |       }
151 |     }
152 |     
153 |     // onChange 콜백으로 부모 컴포넌트에 알림 (부모에서 파일 저장 처리)
154 |     onChange(data)
155 |     
156 |     // localStorage에만 저장
157 |     if (storageKey) {
158 |       saveData(storageKey, data)
159 |     }
160 |   }
161 | 
162 |   const renderBackground = () => {
163 |     if (backgroundType === 'video' && tempVideo) {
164 |       return (
165 |         <video
166 |           src={tempVideo}
167 |           autoPlay
168 |           loop
169 |           muted
170 |           playsInline
171 |           className="absolute inset-0 w-full h-full object-cover"
172 |           style={{ opacity: tempOpacity }}
173 |         />
174 |       )
175 |     } else if (backgroundType === 'image' && tempImage) {
176 |       return (
177 |         <img
178 |           src={tempImage}
179 |           alt="Background"
180 |           className={`absolute inset-0 w-full h-full ${imageAspect}`}
181 |           style={{ opacity: tempOpacity }}
182 |         />
183 |       )
184 |     } else if (backgroundType === 'color' && tempColor) {
185 |       return (
186 |         <div
187 |           className="absolute inset-0"
188 |           style={{
189 |             backgroundColor: tempColor,
190 |             opacity: tempOpacity
191 |           }}
192 |         />
193 |       )
194 |     }
195 |     return null
196 |   }
197 | 
198 |   return (
199 |     <div className={`relative ${className}`}>
200 |       {renderBackground()}
201 |       
202 |       {/* 컨텐츠 */}
203 |       <div className="relative z-10">
204 |         {children}
205 |       </div>
206 | 
207 |       {/* 편집 버튼 */}
208 |       {isEditMode && (
209 |         <button
210 |           onClick={() => {
211 |             // 현재 배경에 따라 타입 자동 설정, 기본은 이미지
212 |             if (tempVideo) {
213 |               setBackgroundType('video')
214 |             } else {
215 |               setBackgroundType('image')  // 기본값을 이미지로 설정
216 |             }
217 |             setShowSettings(true)
218 |           }}
219 |           className="absolute top-4 left-4 z-20 p-2 bg-background/90 rounded-lg border shadow-lg hover:bg-background transition-colors"
220 |         >
221 |           <Settings className="h-5 w-5" />
222 |         </button>
223 |       )}
224 | 
225 |       {/* 설정 모달 */}
226 |       {showSettings && (
227 |         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
228 |           <div className="bg-background border rounded-lg p-6 max-w-md w-full mx-4">
229 |             <h3 className="text-lg font-semibold mb-4">배경 설정</h3>
230 | 
231 |             {/* 배경 타입 선택 */}
232 |             <div className="grid grid-cols-3 gap-2 mb-4">
233 |               <button
234 |                 onClick={() => setBackgroundType('image')}
235 |                 className={`py-2 px-3 rounded-lg border flex flex-col items-center gap-1 ${
236 |                   backgroundType === 'image' ? 'bg-primary text-primary-foreground' : ''
237 |                 }`}
238 |               >
239 |                 <ImageIcon className="h-5 w-5" />
240 |                 <span className="text-xs">이미지</span>
241 |               </button>
242 |               <button
243 |                 onClick={() => setBackgroundType('video')}
244 |                 className={`py-2 px-3 rounded-lg border flex flex-col items-center gap-1 ${
245 |                   backgroundType === 'video' ? 'bg-primary text-primary-foreground' : ''
246 |                 }`}
247 |               >
248 |                 <Video className="h-5 w-5" />
249 |                 <span className="text-xs">비디오</span>
250 |               </button>
251 |               <button
252 |                 onClick={() => setBackgroundType('color')}
253 |                 className={`py-2 px-3 rounded-lg border flex flex-col items-center gap-1 ${
254 |                   backgroundType === 'color' ? 'bg-primary text-primary-foreground' : ''
255 |                 }`}
256 |               >
257 |                 <Palette className="h-5 w-5" />
258 |                 <span className="text-xs">색상</span>
259 |               </button>
260 |             </div>
261 | 
262 |             {/* 타입별 설정 */}
263 |             {backgroundType === 'image' && (
264 |               <div>
265 |                 <div className="mb-3 p-3 bg-muted rounded-lg">
266 |                   <p className="text-xs font-medium mb-1">📁 컴퓨터에서 이미지 선택:</p>
267 |                   <p className="text-xs text-muted-foreground mb-1">
268 |                     JPG, PNG, GIF, WebP 지원 (최대 5MB)
269 |                   </p>
270 |                   {tempImage && (
271 |                     <p className="text-xs text-amber-600 dark:text-amber-500">
272 |                       ⚠️ 새 이미지 업로드시 기존 이미지가 교체됩니다 (서버에서 자동 삭제)
273 |                     </p>
274 |                   )}
275 |                 </div>
276 |                 <input
277 |                   id="bg-file-upload"
278 |                   type="file"
279 |                   accept="image/*"
280 |                   onChange={async (e) => {
281 |                     const file = e.target.files?.[0]
282 |                     if (!file) return
283 |                     
284 |                     // 파일 크기 체크
285 |                     if (file.size > 5 * 1024 * 1024) {
286 |                       alert('파일 크기는 5MB 이하여야 합니다')
287 |                       return
288 |                     }
289 |                     
290 |                     // 파일 업로드
291 |                     const formData = new FormData()
292 |                     formData.append('file', file)
293 |                     // storageKey를 기반으로 purpose 설정
294 |                     const purpose = storageKey ? storageKey.replace('-background', '') + '-background' : 'background'
295 |                     formData.append('purpose', purpose)
296 |                     formData.append('oldPath', tempImage || '')
297 |                     
298 |                     try {
299 |                       const response = await fetch('/api/upload-image', {
300 |                         method: 'POST',
301 |                         body: formData
302 |                       })
303 |                       
304 |                       const result = await response.json()
305 |                       
306 |                       if (result.success) {
307 |                         setTempImage(result.path)
308 |                         detectImageAspect(result.path)
309 |                         handleSave('image', result.path)
310 |                         alert('✅ 배경 이미지가 업로드되었습니다!')
311 |                       } else {
312 |                         alert(`❌ ${result.error}`)
313 |                       }
314 |                     } catch {
315 |                       alert('업로드 중 오류가 발생했습니다')
316 |                     }
317 |                   }}
318 |                   className="hidden"
319 |                 />
320 |                 <label
321 |                   htmlFor="bg-file-upload"
322 |                   className="w-full py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 cursor-pointer flex items-center justify-center mb-3"
323 |                 >
324 |                   <Upload className="h-4 w-4 mr-2" />
325 |                   파일 선택
326 |                 </label>
327 |                 
328 |                 <div className="relative">
329 |                   <input
330 |                     type="text"
331 |                     value={tempImage}
332 |                     onChange={(e) => {
333 |                       setTempImage(e.target.value)
334 |                       if (e.target.value) {
335 |                         detectImageAspect(e.target.value)
336 |                       }
337 |                     }}
338 |                     placeholder="또는 URL 직접 입력 (https://...)"
339 |                     className="w-full px-3 py-2 border rounded-lg bg-background"
340 |                   />
341 |                 </div>
342 |               </div>
343 |             )}
344 | 
345 |             {backgroundType === 'video' && (
346 |               <div>
347 |                 <div className="mb-3 p-3 bg-muted rounded-lg">
348 |                   <p className="text-xs font-medium mb-1">📁 컴퓨터에서 비디오 선택:</p>
349 |                   <p className="text-xs text-muted-foreground mb-1">
350 |                     MP4, WebM 지원 (최대 20MB)
351 |                   </p>
352 |                   {tempVideo && (
353 |                     <p className="text-xs text-amber-600 dark:text-amber-500">
354 |                       ⚠️ 새 비디오 업로드시 기존 비디오가 교체됩니다 (서버에서 자동 삭제)
355 |                     </p>
356 |                   )}
357 |                 </div>
358 |                 <input
359 |                   id="bg-video-upload"
360 |                   type="file"
361 |                   accept="video/mp4,video/webm"
362 |                   onChange={async (e) => {
363 |                     const file = e.target.files?.[0]
364 |                     if (!file) return
365 |                     
366 |                     // 파일 크기 체크 (비디오는 20MB까지)
367 |                     if (file.size > 20 * 1024 * 1024) {
368 |                       alert('비디오 파일 크기는 20MB 이하여야 합니다')
369 |                       return
370 |                     }
371 |                     
372 |                     // 파일 업로드
373 |                     const formData = new FormData()
374 |                     formData.append('file', file)
375 |                     // storageKey를 기반으로 purpose 설정
376 |                     const purpose = storageKey ? storageKey.replace('-background', '') + '-background-video' : 'background-video'
377 |                     formData.append('purpose', purpose)
378 |                     formData.append('oldPath', tempVideo || '')
379 |                     
380 |                     try {
381 |                       const response = await fetch('/api/upload-video', {
382 |                         method: 'POST',
383 |                         body: formData
384 |                       })
385 |                       
386 |                       const result = await response.json()
387 |                       
388 |                       if (result.success) {
389 |                         setTempVideo(result.path)
390 |                         handleSave('video', result.path)
391 |                         alert('✅ 배경 비디오가 업로드되었습니다!')
392 |                       } else {
393 |                         alert(`❌ ${result.error}`)
394 |                       }
395 |                     } catch {
396 |                       alert('업로드 중 오류가 발생했습니다')
397 |                     }
398 |                   }}
399 |                   className="hidden"
400 |                 />
401 |                 <label
402 |                   htmlFor="bg-video-upload"
403 |                   className="w-full py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 cursor-pointer flex items-center justify-center mb-3"
404 |                 >
405 |                   <Upload className="h-4 w-4 mr-2" />
406 |                   비디오 선택
407 |                 </label>
408 |                 
409 |                 <div className="relative">
410 |                   <input
411 |                     type="text"
412 |                     value={tempVideo}
413 |                     onChange={(e) => setTempVideo(e.target.value)}
414 |                     placeholder="또는 URL 직접 입력 (YouTube, Vimeo 등)"
415 |                     className="w-full px-3 py-2 border rounded-lg bg-background"
416 |                   />
417 |                 </div>
418 |               </div>
419 |             )}
420 | 
421 |             {backgroundType === 'color' && (
422 |               <div>
423 |                 <input
424 |                   type="color"
425 |                   value={tempColor}
426 |                   onChange={(e) => setTempColor(e.target.value)}
427 |                   className="w-full h-20 border rounded-lg cursor-pointer"
428 |                 />
429 |               </div>
430 |             )}
431 | 
432 |             {/* 투명도 설정 */}
433 |             <div className="mt-4">
434 |               <label className="text-sm text-muted-foreground">
435 |                 투명도: {Math.round(tempOpacity * 100)}%
436 |               </label>
437 |               <input
438 |                 type="range"
439 |                 min="0"
440 |                 max="1"
441 |                 step="0.1"
442 |                 value={tempOpacity}
443 |                 onChange={(e) => setTempOpacity(parseFloat(e.target.value))}
444 |                 className="w-full"
445 |               />
446 |             </div>
447 | 
448 |             {/* 버튼들 */}
449 |             <div className="space-y-2 mt-6">
450 |               {/* 기본으로 설정 버튼 */}
451 |               <button
452 |                 onClick={async () => {
453 |                   // 기존 파일들 삭제 (업로드된 파일만)
454 |                   if (tempImage && tempImage.includes('/uploads/')) {
455 |                     try {
456 |                       await fetch('/api/delete-image', {
457 |                         method: 'DELETE',
458 |                         headers: { 'Content-Type': 'application/json' },
459 |                         body: JSON.stringify({ imagePath: tempImage })
460 |                       })
461 |                     } catch (error) {
462 |                       console.error('Failed to delete image:', error)
463 |                     }
464 |                   }
465 |                   
466 |                   if (tempVideo && tempVideo.includes('/uploads/')) {
467 |                     try {
468 |                       await fetch('/api/delete-image', {
469 |                         method: 'DELETE',
470 |                         headers: { 'Content-Type': 'application/json' },
471 |                         body: JSON.stringify({ imagePath: tempVideo })
472 |                       })
473 |                     } catch (error) {
474 |                       console.error('Failed to delete video:', error)
475 |                     }
476 |                   }
477 |                   
478 |                   // 모든 값을 초기화
479 |                   setTempImage('')
480 |                   setTempVideo('')
481 |                   setTempColor('')
482 |                   setTempOpacity(0.1)
483 |                   setBackgroundType('image')
484 |                   
485 |                   // 바로 적용
486 |                   const resetData = {
487 |                     image: '',
488 |                     video: '',
489 |                     color: '',
490 |                     opacity: 0.1
491 |                   }
492 |                   onChange(resetData)
493 |                   if (storageKey) {
494 |                     saveData(storageKey, resetData)
495 |                   }
496 |                   setShowSettings(false)
497 |                 }}
498 |                 className="w-full py-2 bg-muted text-foreground rounded-lg hover:bg-muted/80 border border-border"
499 |               >
500 |                 🔄 기본으로 설정
501 |               </button>
502 |               
503 |               {/* 적용/취소 버튼 */}
504 |               <div className="flex gap-2">
505 |                 <button
506 |                   onClick={() => {
507 |                     handleSave()
508 |                     setShowSettings(false)
509 |                   }}
510 |                   className="flex-1 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
511 |                 >
512 |                   적용
513 |                 </button>
514 |                 <button
515 |                   onClick={() => setShowSettings(false)}
516 |                   className="flex-1 py-2 border rounded-lg hover:bg-muted"
517 |                 >
518 |                   취소
519 |                 </button>
520 |               </div>
521 |             </div>
522 |           </div>
523 |         </div>
524 |       )}
525 |     </div>
526 |   )
527 | }


--------------------------------------------------------------------------------