feat: 블로그 UI 구조 전면 재설계

CLAUDE.md

@@ -7,13 +7,19 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 - `pnpm dev` - Start development server on localhost:3000
 - `pnpm build` - Build the application for production (configured for static export)
 - `pnpm start` - Start production server
-- `pnpm biome:check` - Run Biome formatter and linter with auto-fix
+- `pnpm biome:check` - Run Biome formatter and linter
+- `pnpm biome:fix` - Run Biome formatter and linter with auto-fix
 - `pnpm biome:staged` - Run Biome on staged files only
 
 ## Code Quality
 
 This project uses Biome for formatting and linting. Always run `pnpm biome:check` before committing changes. The project has a pre-commit hook (lefthook) that automatically runs Biome on staged files.
 
+**IMPORTANT**: 
+- Do NOT run `pnpm build` during development tasks unless specifically requested by the user. The build process is mainly for final deployment verification.
+- When implementing new pages or components, use placeholders instead of actual content. Show what type of content should go in each position rather than writing fake content.
+- Do NOT create UI structures arbitrarily. Always ask the user for specific requirements and approval before implementing any UI design or structure.
+
 ## Git Workflow
 
 ### Branch Strategy
@@ -48,19 +54,8 @@ Co-Authored-By: Claude <[email protected]>
 - `fix: 모바일에서 네비게이션 메뉴 깨짐 수정`
 - `docs: CLAUDE.md에 Git 워크플로우 가이드 추가`
 
-### Pull Request Process
-1. Create feature branch from `main`
-2. Implement changes with descriptive commits
-3. Run `pnpm biome:check` and ensure build passes
-4. Create PR with clear title and description
-5. Link related issues if applicable
-6. Merge after review (if working in team) or directly (if solo)
-
 ### Pre-commit Hooks
-The project uses lefthook to automatically run quality checks:
-- Biome formatting and linting on staged files
-- Prevents commits with linting errors
-- Ensures consistent code style across the project
+The project uses lefthook to automatically run quality checks
 
 ## Claude Code Workflow Instructions
 
@@ -77,18 +72,22 @@ git checkout -b <type>/<description>
 ```
 
 ### 2. Branch Naming Convention
-- `feat/기능명` - New features (e.g., `feat/search-functionality`)
-- `fix/버그명` - Bug fixes (e.g., `fix/mobile-nav-issue`)
-- `docs/문서명` - Documentation updates (e.g., `docs/readme-update`)
-- `config/설정명` - Configuration changes (e.g., `config/eslint-setup`)
-- `refactor/리팩터명` - Code refactoring (e.g., `refactor/component-structure`)
-- `chore/작업명` - Maintenance tasks (e.g., `chore/dependency-update`)
+- `feat/` - New features (e.g., `feat/search-functionality`)
+- `fix/` - Bug fixes (e.g., `fix/mobile-nav-issue`)
+- `docs/` - Documentation updates (e.g., `docs/readme-update`)
+- `config/` - Configuration changes (e.g., `config/eslint-setup`)
+- `refactor/` - Code refactoring (e.g., `refactor/component-structure`)
+- `chore/` - Maintenance tasks (e.g., `chore/dependency-update`)
 
 ### 3. After Completing Work
 ```bash
-# Stage and commit changes
-git add .
-git commit -m "conventional commit message"
+# Stage and commit changes LOGICALLY
+# DO NOT commit everything at once - break into logical commits
+git add [specific files for logical group 1]
+git commit -m "conventional commit message for group 1"
+
+git add [specific files for logical group 2] 
+git commit -m "conventional commit message for group 2"
 
 # Push to remote
 git push -u origin <branch-name>
@@ -99,7 +98,7 @@ gh pr create --title "PR Title" --body "$(cat <<'EOF'
 - Brief description of changes
 - Key implementation details
 
-## Test plan
+## Checklist
 - [ ] Checklist item 1
 - [ ] Checklist item 2
 
@@ -108,18 +107,27 @@ EOF
 )"
 ```
 
+**IMPORTANT**: When the user asks to commit changes, NEVER create a single large commit. Always break changes into logical, separate commits such as:
+- Documentation changes
+- Configuration changes  
+- New component implementations
+- Layout/styling updates
+- Bug fixes
+Each commit should represent one logical change or feature.
+
 ### 4. PR Requirements
 - **Always create PRs**: Never commit directly to main
 - **Clear titles**: Use conventional commit format in PR titles
 - **Detailed descriptions**: Include Summary and Test plan sections
 - **Link issues**: Reference related GitHub issues when applicable
-- **Quality checks**: Ensure CI passes before requesting review
 
 ### 5. Work Scope Guidelines
 - **One logical change per PR**: Keep PRs focused and reviewable
 - **Complete features**: Don't leave work in broken state
-- **Test your changes**: Run `pnpm biome:check` and `pnpm build` before committing
+- **Test your changes**: Run `pnpm biome:fix` before committing
 - **Document breaking changes**: Clearly explain any breaking changes
+- **Use placeholders**: When implementing new pages/components, use placeholders like "[Page Title]", "[Description]", "[Content]" instead of actual content
+- **No arbitrary UI**: Do NOT create UI structures without explicit user requirements and approval
 
 ### 6. After PR Creation
 - Wait for CI checks to pass
@@ -142,30 +150,20 @@ This is a Next.js 15 blog application configured for static export with MDX supp
 - TypeScript
 - Biome for code formatting/linting
 
+
 ### Directory Structure
 
 All client-side code is organized under `src/app/` following Next.js App Router conventions with a package-like structure:
 
 - `src/app/` - Next.js App Router root directory
-  - `_components/` - Global reusable React components (underscore prevents routing)
-  - `_hooks/` - Global custom React hooks (underscore prevents routing)
-  - `_fonts/` - Font configurations (underscore prevents routing)
-  - `_lib/` - Global utility functions and libraries (underscore prevents routing)
   - `about/` - About page route
-    - `_components/` - Components specific to about page only
-    - `_hooks/` - Hooks specific to about page only
-    - `page.tsx` - About page component
   - `blog/` - Blog routes
-    - `_components/` - Components specific to blog functionality
-    - `_hooks/` - Hooks specific to blog functionality
     - `[slug]/` - Dynamic blog post pages
-    - `page.tsx` - Blog index page
   - `layout.tsx` - Root layout component
   - `page.tsx` - Home page
   - `not-found.tsx` - 404 error page
   - `globals.css` - Global styles
 - `src/api/` - Server-side utilities (outside app directory)
-  - `posts.ts` - Blog post data fetching utilities
 - `src/contents/` - MDX blog posts (*.mdx files)
 
 **Naming Convention:** 
@@ -191,7 +189,7 @@ The app is configured for static export (`output: 'export'` in next.config.ts) a
 ### Styling
 
 - Uses Tailwind CSS with custom configuration
-- shadcn/ui components with "new-york" style and stone base color
+- shadcn/ui for UI components
 - CSS variables for theming (light/dark mode support)
 - Noto Sans KR font for Korean language support
 - Prose styling for blog content rendering
@@ -205,6 +203,7 @@ This project uses shadcn/ui for consistent, high-quality UI components:
 - **Theming**: Full CSS variables support for light/dark themes
 - **Icons**: Uses Lucide React for icons
 - **Utilities**: `cn()` function in `src/app/_lib/utils.ts` for conditional styling
+- **Color Palette**: Always use `stone` color palette for consistent design (e.g., `text-stone-900`, `border-stone-200`, `bg-stone-50`)
 
 ### Build Output
 

components.json

@@ -5,14 +5,14 @@
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "src/app/_styles/globals.css",
+    "css": "src/app/globals.css",
     "baseColor": "stone",
     "cssVariables": true,
     "prefix": ""
   },
   "aliases": {
     "components": "@/app/_components",
-    "utils": "@/app/_lib/utils",
+    "utils": "@/app/_lib/cn",
     "ui": "@/app/_components/ui",
     "lib": "@/app/_lib",
     "hooks": "@/app/_hooks"

lefthook.yml

@@ -2,4 +2,5 @@ pre-commit:
   commands:
     check:
       glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
-      run: npx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
+      run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
+      stage_fixed: true

package.json

@@ -6,13 +6,16 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "biome:check": "biome check --write --verbose",
-    "biome:staged": "biome check --write --staged --verbose"
+    "biome:check": "biome check --verbose",
+    "biome:fix": "biome check --write --verbose",
+    "biome:staged": "biome check --write --staged"
   },
   "dependencies": {
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.3.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
     "@types/mdx": "^2.0.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/app/_components/Footer.tsx

@@ -0,0 +1,56 @@
+import Link from 'next/link'
+
+export default function Footer() {
+  return (
+    <footer className="border-t border-stone-200 bg-stone-50 mt-auto">
+      <div className="container mx-auto px-5 py-6">
+        {/* 3컬럼 구조 - 모바일에서는 1컬럼 */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
+          <div>
+            <h3 className="font-semibold text-stone-900 text-sm mb-2">
+              [Site Name]
+            </h3>
+            <p className="text-sm text-stone-600">[Site Description]</p>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-stone-900 text-sm mb-2">
+              Contact
+            </h4>
+            <p className="text-sm text-stone-600">
+              <Link
+                href="mailto:[email protected]"
+                className="hover:text-stone-900 transition-colors"
+              >
+                Email
+              </Link>
+            </p>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-stone-900 text-sm mb-2">Links</h4>
+            <div className="flex gap-4 md:flex-col md:gap-0 md:space-y-1">
+              {/* TODO: RSS 추가 */}
+              <Link
+                href="https://github.com/kickbelldev"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-stone-600 hover:text-stone-900 transition-colors"
+              >
+                GitHub
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t border-stone-200 mt-4 pt-3">
+          <div className="text-center">
+            <p className="text-sm text-stone-500">
+              © {new Date().getFullYear()} [Site Name]. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

src/app/_components/Header.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link'
+
+export default function Header() {
+  return (
+    <header className="sticky top-0 z-50 border-b border-stone-200 bg-white">
+      <nav className="container mx-auto px-5 h-14 flex items-center gap-x-6">
+        <Link
+          href="/"
+          className="text-xl font-bold text-stone-900"
+        >
+          [Site Brand]
+        </Link>
+
+        <div className="flex items-center space-x-6">
+          <Link
+            href="/tags"
+            className="text-stone-500 hover:text-stone-900 transition-colors"
+          >
+            Tags
+          </Link>
+          <Link
+            href="/about"
+            className="text-stone-500 hover:text-stone-900 transition-colors"
+          >
+            About
+          </Link>
+        </div>
+      </nav>
+    </header>
+  )
+}