Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,4 @@ next-env.d.ts
.sisyphus/
.claude/
/.agentation/
.idea
128 changes: 38 additions & 90 deletions AGENTS.md
Original file line number Diff line number Diff line change
@@ -1,90 +1,38 @@
# PROJECT KNOWLEDGE BASE

**Generated:** 2026-02-27
**Commit:** 2669f50
**Branch:** master

## OVERVIEW

Modern tech blog platform built on Next.js App Router with MDX-based content, interactive visualization components, analytics tracking, and a token-driven design system.

## STRUCTURE

```
eunu.log/
├── src/ # Source code
│ ├── app/ # Next.js App Router pages
│ ├── core/ # App config/provider composition
│ ├── domains/ # Cross-feature domain contracts/schema
│ ├── features/ # Feature domains (blog/resume/search/home)
│ ├── shared/ # Shared modules (analytics/layout/ui/providers/seo/types)
│ ├── components/ # Visualization-heavy components
│ ├── styles/ # Design tokens and global styles
│ └── (co-located tests + shared/testing helpers)
├── tests/ # Centralized e2e tests (Playwright)
├── internal/ # Internal scripts and linting configuration
├── posts/ # Blog posts (MDX + metadata)
├── public/ # Static assets
├── docs/ # Project documentation
└── (no .agent directory) # AI collaboration rules are documented under docs/
```

## WHERE TO LOOK

| Task | Location | Notes |
| ------------------ | ----------------- | -------------------------------------------------- |
| Pages & Routing | `src/app/` | Next.js App Router with static generation + handlers |
| Components | `src/features/`, `src/shared/`, `src/components/visualization/` | Feature-first + shared modules + visualization |
| Content Processing | `src/features/blog/services/` | MDX feed repository, markdown parsing |
| Styling | `src/styles/` | CSS variables, Tailwind integration |
| Blog Content | `posts/` | MDX files with separate metadata |
| Configuration | Root | `next.config.mjs`, `package.json`, `tsconfig.json` |
| Internal Tooling | `internal/` | Scripts + lint/spell config |

## CONVENTIONS

**Content Structure:** Each blog post uses folder structure: `posts/[slug]/index.mdx + meta.json`
**Component Organization:** Feature-first (`src/features`) + shared modules (`src/shared`) with index.ts exports
**Styling:** CSS variables + Tailwind CSS hybrid approach
**Visualization:** Interactive visualization components live in `src/components/visualization/` and should use client runtime when browser APIs are required

## ANTI-PATTERNS (THIS PROJECT)

- **NEVER** use arbitrary Tailwind values like `p-[13px]` - use standard classes only
- **NEVER** use raw `requestAnimationFrame` loops in React UI when framework lifecycle hooks can be used
- **NEVER** place visualization/animation-heavy components outside `src/components/visualization/` without clear reason
- **NEVER** use `any` type - use `unknown` or proper types
- **NEVER** ship client effects that drop below smooth interaction on mobile

## UNIQUE STYLES

- Dual root layout pattern (`#app-root` + `#overlay-root`) for modal management
- Folder-based content organization with separated metadata
- CSS variable-driven design system integrated with Tailwind
- Custom webpack MDX processing instead of Next.js built-in MDX

## COMMANDS

```bash
# Development (uses webpack flag)
npm run dev

# Build (uses webpack flag)
npm run build

# Testing (Vitest, not Jest)
npm test

# Bundle analysis
ANALYZE=true npm run build
```

## NOTES

- Uses Vitest instead of Jest for testing
- Uses Playwright for mobile-focused e2e coverage
- Webpack flag suggests Turbopack compatibility issues
- No CI/CD setup - relies on Vercel auto-deployment
- Korean language content support in feeds
- Current app dependencies include Next.js 16 and React 19
- AI collaboration guide: `docs/guides/ai-collaboration.md`
# Repository Guidelines

## Always-Follow Rules
- Keep changes minimal and scoped to the task. Do not edit unrelated files.
- Preserve the current MDX pipeline. MDX must stay on the custom webpack rule with `@mdx-js/loader` in `next.config.mjs`; do not switch to Next.js built-in MDX unless the whole content pipeline is intentionally migrated.
- Keep visualization-heavy UI in `src/components/visualization/`. Do not move that code to other folders without a clear architectural reason.
- Never use `any`. Use concrete types or `unknown` with narrowing.
- Never use arbitrary Tailwind values such as `p-[13px]`. Use standard utilities, shared tokens, and existing style patterns.
- Do not replace feature-first structure with flat shared folders. Keep code in `src/features/`, `src/shared/`, and `src/domains/` by responsibility.
- Preserve blog content structure as `posts/**/index.mdx` with nearby `meta.json`, including nested series directories when present.

## Project Structure
- `src/app/` — Next.js App Router pages, layouts, handlers
- `src/core/` — app-level providers and configuration composition
- `src/domains/` — cross-feature contracts and schemas
- `src/features/` — feature modules such as blog, home, resume, and search
- `src/shared/` — reusable UI, layout, analytics, SEO, and providers
- `src/components/visualization/` — animation and visualization-heavy components
- `src/styles/` — design tokens and global styles
- `posts/` — blog content, series entries, and metadata managed as nested `index.mdx` + `meta.json`
- `tests/` — Playwright end-to-end coverage
- `internal/` — scripts and tool configuration

## Development Commands
- `npm run dev` — run the local dev server with webpack
- `npm run build` — create the production build
- `npm run lint` — run ESLint on source files
- `npm run lint:css:syntax` — check CSS syntax rules
- `npm run test:unit` — run Vitest unit tests
- `npm run test:components` — run component-focused Vitest tests
- `npm run test:e2e` — run Playwright scenarios
- `npm run test:ci` — run the main CI-equivalent validation set

## Style & Testing
Use TypeScript with 2-space indentation, semicolons, single quotes, trailing commas (`es5`), and 80-column width; Prettier enforces this. Name components in `PascalCase`, hooks in `camelCase` with a `use` prefix, and tests as `*.test.ts` or `*.test.tsx`. Add targeted Vitest or Playwright coverage when changing logic, UI behavior, parsers, or app actions. Before opening a PR, run `npm run build` and the most relevant test command for the change.

## Commits & PRs
Use commit messages like `type(scope): concise description`, for example `fix(home): preview 배포 타입 오류 수정`. Common types include `feat`, `fix`, `refactor`, `test`, and `chore`. Use branch names like `codex/<task>`. Follow `.github/pull_request_template.md`, link related issues or PRs, and include screenshots when UI changes are visible. Confirm mobile/desktop and dark/light behavior when layout or navigation changes.
52 changes: 52 additions & 0 deletions docs/exec-plans/active/2026-03-11-refactor-to-standard-nextjs.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# Refactor to Standard Next.js Structure

## 1. Goal
Simplify the current somewhat over-engineered (FSD/DDD-like) directory structure (`src/domains`, `src/features`, `src/core`, `src/shared`) into a flatter, more standard Next.js application structure. This will reduce cognitive load, make it easier to locate files, and improve maintainability for a personal blog project.

## 2. Scope
- Reorganize directories inside `src/` to follow a standard Next.js pattern (`app`, `components`, `lib`, `hooks`, `types`).
- Migrate existing UI components from `src/features/*/ui`, `src/shared/ui`, `src/shared/layout` to `src/components/*`.
- Migrate business logic, API clients, and utilities from `src/features/*/services`, `src/shared/analytics`, `src/shared/integrations` to `src/lib/*`.
- Migrate types and models from `src/domains/*/model`, `src/features/*/model` to a top-level `src/types` or colocated with features in `lib`.
- Migrate configurations and providers from `src/core`, `src/shared/providers` to `src/components/providers` or `src/lib/config`.
- Update all internal import paths to reflect the new structure.
- Update `ARCHITECTURE.md` to document the new, simplified structure.
- Run tests and linters to ensure nothing is broken.

## 3. Constraints
- The Next.js `app` router structure (`src/app/**`) itself remains mostly unchanged, except for import updates.
- The `posts/` directory and its content pipeline remain unchanged.
- The styling approach (Tailwind + CSS variables in `src/styles`) remains unchanged.
- No new features or bug fixes should be introduced during this refactoring. It is a pure structural change.

## 4. Milestones
- **Phase 1: Preparation:**
- Create the new base directories (`src/components`, `src/lib`, `src/types`, `src/hooks`).
- **Phase 2: Types & Models Migration:**
- Move files from `src/domains/*/model/*` and `src/features/*/model/*` to `src/types/*` or `src/lib/*`.
- Fix import paths for these types.
- **Phase 3: Lib & Utilities Migration:**
- Move files from `src/features/*/services/*` to `src/lib/content/` (or similar).
- Move files from `src/shared/integrations/*`, `src/shared/analytics/*`, `src/shared/seo/*` to `src/lib/*`.
- Move utility functions to `src/lib/utils.ts`.
- **Phase 4: Component Migration:**
- Move common UI components from `src/shared/ui/*` to `src/components/ui/`.
- Move layout components from `src/shared/layout/*` to `src/components/layout/`.
- Move feature-specific UI from `src/features/*/ui/*` to `src/components/[feature]/`.
- Move `src/core/providers`, `src/shared/providers` to `src/components/providers/`.
- **Phase 5: Cleanup & Update Documentation:**
- Delete empty old directories (`src/domains`, `src/features`, `src/shared`, `src/core`).
- Update `ARCHITECTURE.md` to reflect the new structure.
- **Phase 6: Verification:**
- Run all tests (`npm run test:ci`).
- Verify local build (`npm run build`).

## 5. Verification
- All TypeScript compiler checks must pass (`npm run lint`).
- All unit and E2E tests must pass (`npm run test:ci`).
- The development server must start without errors (`npm run dev`).
- A production build must succeed (`npm run build`).
- The application (both UI and functionality like view counts) must work identically to before.

## 6. Rollback
- Since the project is managed by Git, if any issues arise or the refactoring becomes too complex, the rollback strategy is to hard reset to the commit prior to starting this execution plan (`git reset --hard HEAD`).
20 changes: 10 additions & 10 deletions posts/블로그-시스템-구축기/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -788,22 +788,22 @@ Phase 1~5로 나눠 단계별로 개선했어요.

### 9.1 기능 추가

- [ ] 검색 기능 (Algolia or local index)
- [ ] RSS Feed 생성
- [ ] 댓글 시스템 (giscus)
- [ ] OG Image 자동 생성
- 검색 기능 (Algolia or local index)
- RSS Feed 생성
- 댓글 시스템 (giscus)
- OG Image 자동 생성

### 9.2 성능 최적화

- [ ] Image 최적화 (WebP, AVIF)
- [ ] Critical CSS inline
- [ ] Font preloading 전략
- Image 최적화 (WebP, AVIF)
- Critical CSS inline
- Font preloading 전략

### 9.3 개발 경험

- [ ] Storybook 도입
- [ ] E2E 테스트 (Playwright)
- [ ] 단위 테스트 커버리지 80%+
- Storybook 도입
- E2E 테스트 (Playwright)
- 단위 테스트 커버리지 80%+

---

Expand Down
1 change: 0 additions & 1 deletion tests/e2e/smoke/navigation-ia.smoke.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { expect, test } from '@playwright/test';
test.describe('Navigation IA', () => {
test('@smoke 모바일 하단 네비 4탭이 동작해요', async ({ page }, testInfo) => {
test.skip(!testInfo.project.use.isMobile, '모바일 프로젝트 전용 테스트예요.');

await page.goto('/');
await expect(
page.getByRole('navigation', { name: '모바일 하단 네비게이션' })
Expand Down
Loading