codebase.txt

This file is a merged representation of the entire codebase, combined into a single document by Repomix.

<file_summary>
This section contains a summary of this file.

<purpose>
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.
</purpose>

<file_format>
The content is organized as follows:
1. This summary section
2. Repository information
3. Directory structure
4. Repository files (if enabled)
5. Multiple file entries, each consisting of:
  - File path as an attribute
  - Full contents of the file
</file_format>

<usage_guidelines>
- This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
- When processing this file, use the file path to distinguish
  between different files in the repository.
- Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.
</usage_guidelines>

<notes>
- Some files may have been excluded based on .gitignore rules and Repomix's configuration
- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
- Files matching patterns in .gitignore are excluded
- Files matching default ignore patterns are excluded
- Files are sorted by Git change count (files with more changes are at the bottom)
</notes>

</file_summary>

<directory_structure>
.agent/
  rules/
    frontend-architecture.md
    icon-generation-rules.md
    implementation-rules.md
    main-rule.md
.docs/
  frontend-controller-service-fsd.md
.github/
  workflows/
    deploy
    update-codebase.yml
public/
  vite.svg
src/
  @types/
    vite-env.d.ts
  entities/
    cache/
      lib/
        cache-service.ts
        index.ts
      model/
        cache-model.ts
        index.ts
        type.d.ts
    form/
      lib/
        form-signature-state-service.ts
        index.ts
        question-list-state-service.ts
        question-state-service.ts
      model/
        form-question/
          index.ts
          option.ts
        form-signature/
          index.ts
        index.ts
        type.d.ts
      store/
        index.ts
        use-form-question-list-store.ts
        use-form-signature-store.ts
      ui/
        LongTextQuestionCard/
          index.tsx
        MultipleChoiceQuestionCard/
          index.tsx
        ShortTextQuestionCard/
          index.tsx
        SingleChoiceQuestionCard/
          index.tsx
        index.ts
    README.md
  features/
    authenticate/
      ui/
        login-button/
          kakao/
            index.tsx
          index.tsx
        index.ts
    edit-form/
      ui/
        FormSignatureEditSection/
          hook.ts
          index.tsx
        QuestionAddSection/
          hook.ts
          index.tsx
        QuestionList/
          index.tsx
          use-question-list.ts
        index.ts
    toggle-theme/
      ui/
        dark-mode-button/
          index.tsx
        index.ts
  pages/
    kakao-redirect/
      hook.ts
      index.tsx
    landing/
      hook.ts
      index.tsx
    new-form/
      hook.ts
      index.tsx
  shared/
    context/
      ToastContext/
        index.tsx
      index.ts
    lib/
      axios-manager/
        index.ts
      env-manager/
        index.ts
      type-guard/
        index.ts
      uuid/
        index.ts
      index.ts
    model/
      custom-model/
        index.ts
      index.ts
    ui/
      iconography/
        logo/
          kakao-talk/
            index.tsx
          index.tsx
        stroke/
          angry/
            index.tsx
          balance/
            index.tsx
          dizzy/
            index.tsx
          Document/
            index.tsx
          flash/
            index.tsx
          graduation/
            index.tsx
          minus/
            index.tsx
          monitor/
            index.tsx
          moon/
            index.tsx
          plus/
            index.tsx
          rocket/
            index.tsx
          sad/
            index.tsx
          sparkles/
            index.tsx
          sun/
            index.tsx
          trash/
            index.tsx
          users/
            index.tsx
          index.tsx
        index.tsx
      Toast/
        index.tsx
      index.ts
  styles/
    border-radius.css
    border-width.css
    break-point.css
    colors.css
    font-weight.css
    index.css
  App.tsx
  main.tsx
.gitignore
.prettierignore
.prettierrc
eslint.config.js
index.html
package.json
README.md
tsconfig.json
vite.config.ts
</directory_structure>

<files>
This section contains the contents of the repository's files.

<file path=".agent/rules/frontend-architecture.md">
---
trigger: always_on
---

# Frontend Architecture Rules (FSD-based)

## 1.0 Core Architectural Principles: Controller-Service Separation (FSD-Based)

The strategic application of a Controller-Service architectural pattern, inspired by backend design and aligned with Feature-Sliced Design (FSD), is a non-negotiable foundation of this project. This separation of concerns is critical for maintaining a scalable, testable, and maintainable codebase. Logic must be strictly segregated into the following three layers. The data and dependency flow is strictly unidirectional:

**UI → Controller → Service**

If any architectural or structural decision is not explicitly defined in this document, you must follow the **official Feature-Sliced Design (FSD) guidelines** as the default source of truth.

---

## 1.1 UI Layer (View)

Located within `features/ui`, this layer is exclusively for presentation. Components in this layer must be pure, declarative, and "dumb."

### Responsibilities

- Function as a pure "View" layer, responsible only for rendering data passed down via props.
- Bind UI events (e.g., onClick, onChange) to handler functions provided by the Controller layer.
- Perform minimal, render-time null or empty checks for display purposes.

### Strict Prohibitions

- Containing any business logic, state modification, or data transformation.
- Calling any Service layer logic directly.
- It is strictly forbidden to use any React hooks directly. This includes useState, useEffect, useCallback, useMemo, and all other hooks. All state and effects must be managed by the Controller.

---

## 1.2 Controller Layer (Hooks)

Implemented as custom React hooks within `features/ui/hooks`, this layer acts as the intermediary between the user's intent (View) and the application's business logic (Service).

### Responsibilities

- Receive user events and intents forwarded from the UI Layer.
- Orchestrate and delegate calls to the appropriate Service layer logic.
- Read from and write to state management stores (e.g., Zustand).
- Manage all component-level state, side effects, and memoization by exclusively using all React hooks (useState, useEffect, useMemo, etc.).

### Strict Prohibitions

- Containing any core domain rules or business invariants.
- Mutating domain objects directly; mutations must be performed by a Service.
- Including any UI rendering logic (JSX). The output of a Controller hook should be plain values and handler functions.

---

## 1.3 Service Layer (Domain Logic)

Located within `entities/**/lib`, the Service layer is the brain of the application, containing all pure, framework-agnostic business and domain logic.

### Responsibilities & Attributes

- Must be implemented as stateless functions or static class methods.
- Must be side-effect free, deterministic, and easily testable in isolation.
- Encapsulates all domain rules, data transformations, and business invariants.

### Strict Prohibitions

- Under no circumstances may Services access UI components, Controller hooks, or any other part of the React lifecycle.
- Services must never depend on features or pages slices.

---

## 2.0 Strict Dependency and Naming Rules

To enforce the architectural data flow and maintain code predictability, the following dependency and naming conventions are mandatory.

### 2.1 Dependency Rule Hierarchy

The flow of dependencies is strictly unidirectional to prevent coupling and maintain layer integrity.

- features → entities ✔
- entities → features ✘
- UI → Controller ✔
- Controller → Services ✔
- UI → Services (directly) ✘
- Services → UI ✘

---

### 2.2 Naming Conventions

- **Controller Hooks**  
  Must follow the `use*Controller` pattern (e.g., `useQuestionListController`).

- **Service Layer Files**  
  Must follow either `*StateService` or `*DomainService` patterns (e.g., `FormSignatureStateService`).
</file>

<file path=".agent/rules/icon-generation-rules.md">
---
trigger: glob
globs: src/shared/ui/iconography/**/*.{ts,tsx}
---

When generating an icon, the model MUST follow this rule set without exception. Any output that violates the rules is invalid.

1. Output Format

- Always provide both:
  - Raw .svg markup
  - React component code
- React component must be written in TypeScript.

2. SVG Structure

- Use <svg> tag only. No <symbol>, no external defs.
- Always include a <title> tag for accessibility.
- viewBox must be "0 0 24 24".
- Default size: width=24, height=24.

3. Styling Rules

- Solid style icon.
- Color must be currentColor only.
- `fill="none"` on <svg>.
- Use <path> only unless geometry strictly requires otherwise.
- Stroke rules:
  - `stroke="currentColor"`
  - `strokeWidth={1.125}`
  - `strokeLinecap="round"`
  - `strokeLinejoin="round"`

4. Geometry Rules

- Icon must be visually centered.
- Use even spacing and symmetrical coordinates.
- Avoid unnecessary complexity.
- No decorative noise, no shading, no gradients.

5. React Component Rules

- Component signature:

```tsx
import type { SVGProps } from 'react';
```

- Destructure props exactly:
  - `width = 24`
  - `height = 24`
  - `'aria-label'`
  - `'aria-hidden'`
- `<title>` must render conditionally:
  - Render only when aria-hidden is false.
- Spread props onto <svg>.

6. Naming

- Component name must be PascalCase.
- aria-label value must match the icon name (lowercase).

7. Consistency Enforcement Phrase
   Every icon generation MUST internally obey this rule set.
   If any rule is violated, the icon is considered invalid and must be regenerated.
</file>

<file path=".agent/rules/implementation-rules.md">
---
trigger: always_on
---

# Frontend Implementation Rules

## 3.0 Code Implementation Guidelines

Beyond the architectural structure, you must adhere to a precise set of coding standards to ensure code is readable, consistent, and follows established best practices.

- Readability: Use early returns (guard clauses) wherever possible to reduce nested logic.
- Styling: Use Tailwind classes exclusively for all styling. Do not use plain CSS or `<style>` tags. All utility classes must conform to the latest Tailwind v4 conventions.
- Conditional Styling: When applying Tailwind classes, use class-based conditional syntax wherever possible to improve readability.
- Naming: Use descriptive names for all variables and functions. Event handler functions must be prefixed with `handle`.
- Accessibility: Implement accessibility features on interactive elements. For example, a clickable `<div>` should have `tabIndex="0"`, an appropriate `aria-label`, and both `onClick` and `onKeyDown` handlers.
- Function Syntax: Define functions using const arrow function syntax and apply TypeScript types where possible.

---

## 4.0 React Hooks Usage Rules (Strict)

### Core Rule

UI components (`features/ui`) must NOT use React hooks directly.

This includes, but is not limited to:

- useState
- useEffect
- useMemo
- useCallback
- useRef
- useReducer

This rule has no exceptions.

---

### Where Hooks Are Allowed

All React hooks must be declared and managed **only inside Controller hooks**:

- `use*Controller` (`features/ui/hooks`)

UI components must:

- Receive values and handlers from the controller
- Call functions passed from the controller
- Render JSX only

---

### UI Component Restrictions

UI components must NOT:

- Declare local state
- Use memoization hooks
- Contain side effects
- Derive or compute state from props or stores

Allowed in UI components:

- JSX
- Props
- Event binding to controller handlers
- Minimal render-time guards (e.g. null or empty checks)

---

### Controller Responsibilities (Expanded)

Controller hooks are responsible for:

- State ownership (useState, external store access, etc.)
- Memoization (useMemo, useCallback)
- Side effects (useEffect)
- Deriving computed values for the UI

Controllers expose:

- Plain values
- Plain functions

No JSX is allowed in controller hooks.

---

### Design Intent

This rule enforces a **hard View–Controller boundary**.

The UI layer must remain:

- Declarative
- Stateless
- Replaceable
- Easy to reason about

Violations of this rule are considered **architectural errors**,  
not stylistic preferences.
</file>

<file path=".agent/rules/main-rule.md">
---
trigger: always_on
---

You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

- Follow the user’s requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
- Confirm, then write code!
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
- Focus on easy and readability code, over being performant.
- Fully implement all requested functionality.
- Leave NO todo’s, placeholders or missing pieces.
- Ensure code is complete! Verify thoroughly finalised.
- Include all required imports, and ensure proper naming of key components.
- Be concise Minimize any other prose.
- If you think there might not be a correct answer, you say so.
- If you do not know the answer, say so, instead of guessing.

### Coding Environment

The user asks questions about the following coding languages:

- ReactJS
- NextJS
- JavaScript
- TypeScript
- TailwindCSS
- HTML
- CSS

### Code Implementation Guidelines

Follow these rules when you write code:

- Use early returns whenever possible to make the code more readable.
- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags. And write all Tailwind utility syntax according to the latest Tailwind v4 guidelines, using the new unified @theme tokens and the updated class conventions.
- Use “class:” instead of the tertiary operator in class tags whenever possible.
- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
- Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.

### Additional Mandatory Output Rules

- Every response MUST include:
  1. Commit message(s) describing the current change
  - Follow conventional commit style when applicable
  - Be concise, factual, and scoped to the change
  2. Pull Request body draft for opening a PR
  - Include:
    - Summary of changes
    - Key implementation notes
    - Any breaking or notable behavior
- Default target branch: `dev`
- Exception:
  - If a different target branch is required, the user will explicitly specify it in the request.
  - Do NOT assume any branch other than dev unless stated.
- These outputs are mandatory for every request, regardless of size or complexity.
- Do not omit them. Do not summarize them away.
</file>

<file path=".docs/frontend-controller-service-fsd.md">
# 프론트엔드에서 Controller / Service 를 왜 나누나요? 🤔

이 문서는

**"왜 우리는 프론트엔드에서도 Controller와 Service를 나누는가"**

에 대한 내용을 포함한 개발자 온보딩 문서입니다.

<br/>

## 1️⃣ 흔한 프론트엔드 코드의 문제 😵‍💫

프론트엔드에서 자주 보는 코드 구조는 이런 모습입니다.

- 컴포넌트 안에 상태가 있고
- 이벤트 핸들러 안에서 로직을 처리하고
- 조건이 늘어나고
- 어느 순간 파일이 500줄이 됩니다

그러다 보면 이런 일이 생깁니다 👇

- "이 로직 왜 여기 있어요?"
- "이거 다른 화면에서도 써야 하는데 복붙할까요?"
- "이 상태 누가 바꾸는 거죠?"
- "고치면 어디까지 영향 가는지 모르겠어요…"

즉, **UI, 상태, 로직, 규칙이 한 덩어리로 엉켜버립니다** 🧶

<br/>

## 2️⃣ 백엔드는 왜 Controller / Service를 나눌까요? 🏗️

백엔드에서는 보통 이렇게 나눕니다.

- **Controller**
  - 요청을 받는다
  - 어떤 로직을 실행할지 결정한다
- **Service**
  - 실제 비즈니스 규칙을 처리한다
  - "무엇이 가능한지 / 불가능한지"를 안다

이렇게 나누는 이유는 단순합니다.

👉 **역할이 다르기 때문입니다**

- 요청을 "받는 역할"
- 규칙을 "판단하는 역할"

<br/>

## 3️⃣ 프론트엔드도 사실 똑같습니다 👀

프론트엔드에서도 이미 비슷한 역할이 존재합니다.

- 사용자가 클릭한다 🖱️
- 입력한다 ⌨️
- 선택을 바꾼다 🔄
- 삭제한다 🗑️

이건 전부 **사용자의 의도(Intent)** 입니다.

<br/>

## 4️⃣ 그래서 우리는 이렇게 나눕니다 ✂️

### 🎨 UI (View)

- 화면만 그립니다
- 버튼, 입력창, 레이아웃
- **아무 판단도 하지 않습니다**

### 🎛️ Controller

- 사용자의 행동을 받습니다
- "이 행동은 어떤 의미지?"를 해석합니다
- 어떤 Service를 호출할지 결정합니다
- "이 프로젝트에서는 Controller를 custom hook 형태로 구현합니다"

### 🧠 Service

- 실제 규칙이 들어 있습니다
- 상태를 어떻게 바꾸는지 알고 있습니다
- React도, 화면도 모릅니다

즉 이렇게 됩니다 👇

**UI 👉 Controller 👉 Service**

---

<br/>

## 5️⃣ 왜 이렇게까지 나누나요? 🤷‍♂️

이유는 명확합니다.

### ✅ UI가 단순해집니다

- JSX만 보면 무슨 화면인지 바로 보입니다
- 로직이 없어서 읽기 쉽습니다

### ✅ 로직이 재사용됩니다

- Service는 화면이 바뀌어도 그대로 씁니다
- 테스트도 쉬워집니다

### ✅ 수정이 안전해집니다

- 규칙을 고치면 Service만 수정
- 화면을 고치면 UI만 수정

### ✅ "이 코드 어디 있지?"가 사라집니다

- 판단은 Controller
- 규칙은 Service
- 화면은 UI

<br/>

## 6️⃣ 이 프로젝트의 기본 약속 📜

이 프로젝트에서는 다음을 **원칙으로 합니다**.

- UI 컴포넌트는 **멍청해야 합니다** 🤪
- 판단은 Controller에서만 합니다
- 규칙은 Service에만 둡니다
- "여기서 그냥 처리하면 편한데요?"는 금지입니다 ❌

> 이 원칙은 모든 feature 단위 UI 개발에 기본적으로 적용됩니다.

<br/>

## 📌 마지막 안내

이 문서에 적힌 내용은 단순한 가이드가 아닙니다.

📂 **`.agent/rules/frontend-architecture.md`** 에 동일한 규칙이 작성되어 있으며,

🤖 **AI 에이전트에게도 동일하게 공유되고 적용되는 규칙**입니다.
</file>

<file path=".github/workflows/deploy">
name: Deploy Frontend to AWS Amplify (Dev)

on:
  push:
    branches:
      - dev

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'npm'

      - name: Install Dependencies
        run: npm ci

      - name: Build Project
        run: npm run build # 결과물이 dist 폴더에 생긴다고 가정 (Vite 기준)

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      - name: Deploy to AWS Amplify
        run: |
          # 1. 빌드 결과물 압축 (결과 폴더가 build라면 dist를 build로 수정)
          cd dist && zip -r ../deploy.zip . && cd ..

          # 2. 배포 업로드 URL 생성
          UPLOAD_URL=$(aws amplify create-deployment --app-id ${{ secrets.AMPLIFY_APP_ID }} --branch-name dev --query 'zipUploadUrl' --output text)

          # 3. 파일 업로드
          curl -X PUT --upload-file deploy.zip "$UPLOAD_URL"

          # 4. 배포 시작
          aws amplify start-deployment --app-id ${{ secrets.AMPLIFY_APP_ID }} --branch-name dev
</file>

<file path=".github/workflows/update-codebase.yml">
name: Update Codebase

on:
  pull_request:
    types: [closed]

jobs:
  update-codebase:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: 코드 체크아웃
        uses: actions/checkout@v4
        with:
          ref: ${{ github.event.pull_request.base.ref }}

      - name: Node.js 환경 설정
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: 코드베이스 분석 및 codebase.txt 생성
        run: npx -y repomix --output codebase.txt --style xml

      - name: 변경 사항 커밋 및 푸시
        run: |
          git config --global user.name "github-actions[bot]"
          git config --global user.email "github-actions[bot]@users.noreply.github.com"
          git add codebase.txt
          git commit -m "chore: update codebase.txt [skip ci]" || echo "No changes to commit"
          git push
</file>

<file path="public/vite.svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
</file>

<file path="src/@types/vite-env.d.ts">
/// <reference types="vite/client" />

declare global {
  type AppEnvKey = 'VITE_KAKAO_CLIENT_ID' | 'VITE_KAKAO_REDIRECT_URI' | 'VITE_API_BASE_URL';

  interface ImportMetaEnv {
    readonly [key in AppEnvKey]: string;
  }

  interface ImportMeta {
    readonly env: ImportMetaEnv;
  }
}

export {};
</file>

<file path="src/entities/cache/lib/cache-service.ts">
import { TypeGuard } from '@/shared/lib';

import { type CacheData, CacheModel } from '../model';

class CacheService {
  static CACHE_MAP = new Map<string, CacheModel<CacheData>>();

  static get<T extends CacheData>(key: string): T | null {
    const cached = this.CACHE_MAP.get(key);
    if (TypeGuard.checkUndefined(cached) || cached.isExpired) {
      this.CACHE_MAP.delete(key);
      return null;
    } else {
      return cached.data as T;
    }
  }

  static set<T extends CacheData>(key: string, data: T, ttlMs?: number): boolean {
    if (this.CACHE_MAP.has(key)) {
      return false;
    }

    this.CACHE_MAP.set(key, new CacheModel({ data, ttlMs }));
    return true;
  }

  static invalidate(key: string) {
    this.CACHE_MAP.delete(key);
  }
}

export default CacheService;
</file>

<file path="src/entities/cache/lib/index.ts">
export { default as CacheService } from './cache-service';
</file>

<file path="src/entities/cache/model/cache-model.ts">
import { TypeGuard } from '@/shared/lib';
import { CustomModel } from '@/shared/model';

import type { CacheData } from './type';

interface State<T extends CacheData = null> {
  data: T;
  // NOTE: null 인 경우, 기한없는 캐싱
  expiredAt: number | null;
}

interface Props<T extends CacheData = null> {
  data: T;
  // Time To Live (milliseconds)
  ttlMs?: number;
}

class CacheModel<T extends CacheData = null> extends CustomModel<State<T>> {
  private state: State<T>;

  constructor(props: Props<T>) {
    super();
    const { data, ttlMs } = props;
    const now = Date.now();

    this.state = {
      data,
      expiredAt: TypeGuard.checkUndefined(ttlMs) ? null : Math.max(now + ttlMs, now),
    };
  }

  get isExpired(): boolean {
    const { expiredAt } = this.state;

    if (TypeGuard.checkNull(expiredAt)) {
      return false;
    }

    return expiredAt < Date.now();
  }

  get data(): T {
    return this.state.data;
  }

  toJSON(): State<T> {
    return this.state;
  }

  clone(): CacheModel<T> {
    const { data, expiredAt } = this.state;

    return new CacheModel({
      data,
      ttlMs: !TypeGuard.checkNull(expiredAt) ? Math.max(expiredAt - Date.now(), 0) : undefined,
    });
  }
}

export default CacheModel;
</file>

<file path="src/entities/cache/model/index.ts">
export { default as CacheModel } from './cache-model';

export * from './type';
</file>

<file path="src/entities/cache/model/type.d.ts">
type CacheData = string | number | boolean | object | null;

export type { CacheData };
</file>

<file path="src/entities/form/lib/form-signature-state-service.ts">
import { FormSignatureModel } from '../model';

class FormSignatureStateService {
  static getInitialFormSignature() {
    return new FormSignatureModel({});
  }

  static editTitle(prev: FormSignatureModel, title: string) {
    return prev.setValue('title', title);
  }

  static editDescription(prev: FormSignatureModel, description: string) {
    return prev.setValue('description', description);
  }
}

export default FormSignatureStateService;
</file>

<file path="src/entities/form/lib/index.ts">
export { default as FormSignatureStateService } from './form-signature-state-service';
export { default as QuestionStateService } from './question-state-service';
export { default as QuestionListStateService } from './question-list-state-service';
</file>

<file path="src/entities/form/lib/question-list-state-service.ts">
import type { FormQuestionModel } from '../model';

class QuestionListStateService {
  static pushQuestion(prevList: FormQuestionModel[], question: FormQuestionModel) {
    return [...prevList, question];
  }

  static removeQuestionFromList(prevList: FormQuestionModel[], questionId: string) {
    const newList = prevList.filter(question => question.getValue('id') !== questionId);
    return newList.length === prevList.length ? prevList : newList;
  }

  static findQuestionById(
    prevList: FormQuestionModel[],
    questionId: string,
  ): FormQuestionModel | null {
    return prevList.find(question => question.getValue('id') === questionId) || null;
  }

  static replaceQuestionById(
    prevList: FormQuestionModel[],
    newQuestion: FormQuestionModel,
    targetId: string,
  ): FormQuestionModel[] {
    return prevList.map(question =>
      question.getValue('id') === targetId ? newQuestion : question,
    );
  }
}

export default QuestionListStateService;
</file>

<file path="src/entities/form/lib/question-state-service.ts">
import { FormQuestionModel, FormQuestionOptionModel, type FormQuestionType } from '../model';

class QuestionStateService {
  static getInitialQuestion(type: FormQuestionType) {
    return new FormQuestionModel({
      title: '',
      type,
    });
  }

  static editQuestionTitle(prev: FormQuestionModel, title: string, isClone = false) {
    if (isClone) {
      return prev.clone({ title });
    }
    return prev.setValue('title', title);
  }

  static editQuestionType(prev: FormQuestionModel, type: FormQuestionType, isClone = false) {
    if (isClone) {
      return prev.clone({ type });
    }
    return prev.setValue('type', type);
  }

  static editOptionContent(
    prev: FormQuestionModel,
    optionId: string,
    content: string,
    isClone = false,
  ) {
    const prevOptions = prev.getValue('options');
    if (!prevOptions) {
      return prev;
    }

    const newOptions = prevOptions.map(option => {
      if (option.getValue('id') === optionId) {
        return option.clone({ content });
      }
      return option;
    });

    if (isClone) {
      return prev.clone({ options: newOptions });
    }
    return prev.setValue('options', newOptions);
  }

  static addOption(prev: FormQuestionModel, isClone = false) {
    const prevOptions = prev.getValue('options') ?? [];
    const newOption = new FormQuestionOptionModel({ content: '' });
    const newOptions = [...prevOptions, newOption];

    if (isClone) {
      return prev.clone({ options: newOptions });
    }
    return prev.setValue('options', newOptions);
  }

  static removeOption(prev: FormQuestionModel, optionId: string, isClone = false) {
    const prevOptions = prev.getValue('options');
    if (!prevOptions) return prev;

    const newOptions = prevOptions.filter(opt => opt.getValue('id') !== optionId);

    if (isClone) {
      return prev.clone({ options: newOptions });
    }
    return prev.setValue('options', newOptions);
  }
}

export default QuestionStateService;
</file>

<file path="src/entities/form/model/form-question/index.ts">
import { TypeGuard, UUID } from '@/shared/lib';
import { CustomModel } from '@/shared/model';

import FormQuestionOptionModel from './option';

import type { FormQuestionType } from '../';

interface State {
  id: string;
  type: FormQuestionType;
  // 질문 내용
  title: string;
  // 질문 설명
  description: string | null;
  // 필수 질문 여부
  required: boolean;
  // (객관식 질문일 경우), 선택지 목록)
  options: FormQuestionOptionModel[] | null;
}

interface Props {
  id?: string;
  type: FormQuestionType;
  title: string;
  description?: string | null;
  required?: boolean;
  options?: FormQuestionOptionModel[] | null;
}

class FormQuestionModel extends CustomModel<State> {
  private state: State;
  constructor(props: Props) {
    super();
    const { id, type, title, description, required, options } = props;

    const isValidateOptions =
      !!options && options.length !== 0 && type !== 'SHORT_TEXT' && type !== 'LONG_TEXT';

    this.state = {
      id: id || UUID.v4(),
      type: type,
      title: title,
      description: description || null,
      required: required || false,
      options: isValidateOptions ? options : null,
    };
  }

  getValue<K extends keyof State>(key: K): State[K] {
    return this.state[key];
  }

  setValue<K extends keyof State>(key: K, value: State[K]): FormQuestionModel {
    return this.clone({
      [key]: value,
    });
  }

  pushOption(option: FormQuestionOptionModel): FormQuestionModel {
    const options = this.state.options;
    if (TypeGuard.checkNull(options)) {
      return this;
    }
    return this.clone({
      options: [...options, option],
    });
  }

  toJSON(): State {
    return this.state;
  }

  clone(props?: Partial<Exclude<State, 'id'>>): FormQuestionModel {
    return new FormQuestionModel({
      id: this.state.id,
      type: props?.type ?? this.state.type,
      title: props?.title ?? this.state.title,
      required: TypeGuard.checkBoolean(props?.required) ? props?.required : this.state.required,
      description: !TypeGuard.checkUndefined(props?.description)
        ? props.description
        : this.state.description,
      options: !TypeGuard.checkUndefined(props?.options) ? props.options : this.state.options,
    });
  }
}

export default FormQuestionModel;
</file>

<file path="src/entities/form/model/form-question/option.ts">
import { UUID } from '@/shared/lib';
import { CustomModel } from '@/shared/model';

interface State {
  id: string;
  // 선택지 내용
  content: string;
  // 선택 여부
  checked: boolean;
  // 기본 선택 여부
  defaultChecked: boolean;
}

interface Props {
  id?: string;
  content: string;
  checked?: boolean;
  defaultChecked?: boolean;
}

class FormQuestionOptionModel extends CustomModel<State> {
  private state: State;

  constructor(props: Props) {
    super();
    const { id, content, checked, defaultChecked } = props;
    this.state = {
      id: id || UUID.v4(),
      content,
      checked: checked || false,
      defaultChecked: defaultChecked || false,
    };
  }

  getValue<K extends keyof State>(key: K): State[K] {
    return this.state[key];
  }

  setValue<K extends keyof State>(key: K, value: State[K]): FormQuestionOptionModel {
    return this.clone({
      [key]: value,
    });
  }

  toJSON(): State {
    return this.state;
  }

  clone(props?: Partial<State>): FormQuestionOptionModel {
    return new FormQuestionOptionModel({
      ...this.toJSON(),
      ...props,
    });
  }
}

export default FormQuestionOptionModel;
</file>

<file path="src/entities/form/model/form-signature/index.ts">
import { UUID } from '@/shared/lib';
import { CustomModel } from '@/shared/model';

interface State {
  id: string;
  title: string;
  description: string;
  questionIds: string[];
}

interface Props {
  id?: string;
  title?: string;
  description?: string;
  questionIds?: string[];
}

class FormSignatureModel extends CustomModel<State> {
  private state: State;

  constructor(props: Props) {
    super();
    const { id, title, description, questionIds } = props;
    this.state = {
      id: id || UUID.v4(),
      title: title || '',
      description: description || '',
      questionIds: questionIds || [],
    };
  }

  getValue<K extends keyof State>(key: K): State[K] {
    return this.state[key];
  }

  setValue<K extends keyof State>(key: K, value: State[K]): FormSignatureModel {
    return this.clone({
      [key]: value,
    });
  }

  toJSON(): State {
    return this.state;
  }

  clone(props?: Partial<State>): FormSignatureModel {
    return new FormSignatureModel({
      ...this.toJSON(),
      ...props,
    });
  }
}

export default FormSignatureModel;
</file>

<file path="src/entities/form/model/index.ts">
export { default as FormQuestionModel } from './form-question';
export { default as FormQuestionOptionModel } from './form-question/option';
export { default as FormSignatureModel } from './form-signature';

export * from './type.d';
</file>

<file path="src/entities/form/model/type.d.ts">
type FormQuestionType = 'SINGLE_CHOICE' | 'MULTIPLE_CHOICE' | 'SHORT_TEXT' | 'LONG_TEXT';

export type { FormQuestionType };
</file>

<file path="src/entities/form/store/index.ts">
export { default as useFormSignatureStore } from './use-form-signature-store';
export { default as useFormQuestionListStore } from './use-form-question-list-store';
</file>

<file path="src/entities/form/store/use-form-question-list-store.ts">
import { create } from 'zustand';

import type { FormQuestionModel } from '../model';

interface State {
  formQuestions: FormQuestionModel[];
  setFormQuestions: (
    next: FormQuestionModel[] | ((prev: FormQuestionModel[]) => FormQuestionModel[]),
  ) => void;
}

const useFormQuestionListStore = create<State>(set => ({
  formQuestions: [],
  setFormQuestions: next => {
    set(state => {
      return {
        formQuestions: typeof next === 'function' ? next(state.formQuestions) : next,
      };
    });
  },
}));

export default useFormQuestionListStore;
</file>

<file path="src/entities/form/store/use-form-signature-store.ts">
import { create } from 'zustand';

import FormSignatureModel from '../model/form-signature';

interface State {
  formSignature: null | FormSignatureModel;
  setFormSignature: (
    next: FormSignatureModel | ((prev: null | FormSignatureModel) => FormSignatureModel),
  ) => void;
}

const useFormSignatureStore = create<State>(set => ({
  formSignature: null,
  setFormSignature: next => {
    set(state => {
      return {
        formSignature: typeof next === 'function' ? next(state.formSignature) : next,
      };
    });
  },
}));

export default useFormSignatureStore;
</file>

<file path="src/entities/form/ui/LongTextQuestionCard/index.tsx">
import { memo } from 'react';

import { FormQuestionModel, FormQuestionType } from '@/entities/form/model';
import { Iconography } from '@/shared/ui';

interface Props {
  question: FormQuestionModel;
  onChangeTitle?: (questionId: string, value: string) => void;
  onTypeChange?: (questionId: string, value: FormQuestionType) => void;
  onDeleteQuestion?: (questionId: string) => void;
}

const LongTextQuestionCard = (props: Props) => {
  const { question, onChangeTitle, onTypeChange, onDeleteQuestion } = props;

  return (
    <section className="w-full flex flex-col gap-[12px] p-[24px] bg-bg-default border border-divider-default rounded-[16px] shadow-sm">
      <div className="w-full flex justify-between items-center">
        {/* 질문 타입 선택 */}
        <select
          value={question?.getValue('type') ?? 'SHORT_TEXT'}
          className="appearance-none cursor-pointer px-[8px] py-[4px] text-[12px] rounded-[6px] bg-bg-sub border border-divider-default text-text-secondary transition-colors"
          onChange={e =>
            onTypeChange?.(question.getValue('id'), e.target.value as FormQuestionType)
          }
        >
          <option value="SHORT_TEXT">단답형</option>
          <option value="LONG_TEXT">장답형</option>
          <option value="MULTIPLE_CHOICE">객관식(복수선택)</option>
          <option value="SINGLE_CHOICE">객관식(단일선택)</option>
        </select>

        <button
          type="button"
          aria-label="질문 삭제"
          className="group rounded-full aspect-square p-[8px] flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition-colors cursor-pointer"
          onClick={() => onDeleteQuestion?.(question.getValue('id'))}
        >
          <Iconography.Stroke.Trash
            className="text-gray-500 group-hover:text-danger transition-colors duration-200"
            aria-hidden
          />
        </button>
      </div>

      <div className="w-full flex flex-col gap-[12px]">
        <div className="w-full">
          <input
            type="text"
            placeholder="질문을 입력해주세요. (최대 50자)"
            className="w-full py-[4px] text-[18px] font-bold bg-transparent border-b border-gray-200 text-text-primary focus:border-brand-primary focus:outline-none placeholder:text-text-tertiary transition-colors"
            maxLength={50}
            value={question.getValue('title')}
            onChange={e => onChangeTitle?.(question.getValue('id'), e.target.value)}
          />
        </div>

        <div className="w-full pt-[8px]">
          <div className="w-full max-w-[400px]">
            <textarea
              disabled
              placeholder="장문형 텍스트 (최대 1000자)"
              className="resize-none w-full h-[100px] px-[12px] py-[10px] text-[14px] rounded-[8px] border border-dashed border-gray-300 bg-gray-100 text-gray-400 cursor-not-allowed select-none"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export default memo(LongTextQuestionCard);
</file>

<file path="src/entities/form/ui/MultipleChoiceQuestionCard/index.tsx">
import { memo } from 'react';

import { FormQuestionModel, FormQuestionType } from '@/entities/form/model';
import { Iconography } from '@/shared/ui';

interface Props {
  question: FormQuestionModel;
  onChangeTitle?: (questionId: string, value: string) => void;
  onTypeChange?: (questionId: string, value: FormQuestionType) => void;
  onDeleteQuestion?: (questionId: string) => void;
  onAddOption?: (questionId: string) => void;
  onRemoveOption?: (questionId: string, optionId: string) => void;
  onUpdateOption?: (questionId: string, optionId: string, value: string) => void;
}

const MultipleChoiceQuestionCard = (props: Props) => {
  const {
    question,
    onChangeTitle,
    onTypeChange,
    onDeleteQuestion,
    onAddOption,
    onRemoveOption,
    onUpdateOption,
  } = props;

  return (
    <section className="w-full flex flex-col gap-[12px] p-[24px] bg-bg-default border border-divider-default rounded-[16px] shadow-sm">
      <div className="w-full flex justify-between items-center">
        {/* 질문 타입 선택 */}
        <select
          value={question?.getValue('type') ?? 'SHORT_TEXT'}
          className="appearance-none cursor-pointer px-[8px] py-[4px] text-[12px] rounded-[6px] bg-bg-sub border border-divider-default text-text-secondary transition-colors"
          onChange={e =>
            onTypeChange?.(question.getValue('id'), e.target.value as FormQuestionType)
          }
        >
          <option value="SHORT_TEXT">단답형</option>
          <option value="LONG_TEXT">장답형</option>
          <option value="MULTIPLE_CHOICE">객관식(복수선택)</option>
          <option value="SINGLE_CHOICE">객관식(단일선택)</option>
        </select>

        <button
          type="button"
          aria-label="질문 삭제"
          className="group rounded-full aspect-square p-[8px] flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition-colors cursor-pointer"
          onClick={() => onDeleteQuestion?.(question.getValue('id'))}
        >
          <Iconography.Stroke.Trash
            className="text-gray-500 group-hover:text-danger transition-colors duration-200"
            aria-hidden
          />
        </button>
      </div>
      <div className="w-full flex flex-col gap-[12px]">
        <div className="w-full">
          <input
            type="text"
            placeholder="질문을 입력해주세요. (최대 50자)"
            className="w-full py-[4px] text-[18px] font-bold bg-transparent border-b border-gray-200 text-text-primary focus:border-brand-primary focus:outline-none placeholder:text-text-tertiary transition-colors"
            maxLength={50}
            value={question.getValue('title')}
            onChange={e => onChangeTitle?.(question.getValue('id'), e.target.value)}
          />
        </div>

        <div className="w-full pt-[8px]">
          <div className="w-full flex flex-col gap-[8px]">
            {question.getValue('options')?.map(option => {
              const { id, content } = option.toJSON();
              return (
                <div key={id} className="w-full flex items-center gap-[8px]">
                  <div className="w-[18px] h-[18px] border border-gray-300 bg-white flex-shrink-0 rounded-[4px]" />
                  <input
                    type="text"
                    value={content}
                    placeholder="옵션을 입력해주세요"
                    className="flex-1 text-[14px] text-text-primary bg-transparent border-b border-transparent focus:border-brand-primary focus:outline-none placeholder:text-text-tertiary transition-colors py-[4px]"
                    onChange={e => onUpdateOption?.(question.getValue('id'), id, e.target.value)}
                  />
                  <button
                    type="button"
                    onClick={() => onRemoveOption?.(question.getValue('id'), id)}
                    className="p-[4px] rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
                    aria-label="옵션 삭제"
                  >
                    <Iconography.Stroke.Minus
                      className="w-[20px] h-[20px] text-danger hover:cursor-pointer"
                      aria-hidden
                    />
                  </button>
                </div>
              );
            })}

            <button
              type="button"
              onClick={() => onAddOption?.(question.getValue('id'))}
              className="w-fit flex items-center gap-[4px] px-[8px] py-[4px] rounded-[6px] hover:bg-gray-100 transition-colors text-[13px] text-text-secondary font-medium"
            >
              <Iconography.Stroke.Plus className="w-[14px] h-[14px]" />
              <span>옵션 추가</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default memo(MultipleChoiceQuestionCard);
</file>

<file path="src/entities/form/ui/ShortTextQuestionCard/index.tsx">
import { memo } from 'react';

import { Iconography } from '@/shared/ui';

import type { FormQuestionModel, FormQuestionType } from '@/entities/form/model';

interface Props {
  question: FormQuestionModel;
  onChangeTitle?: (questionId: string, value: string) => void;
  onTypeChange?: (questionId: string, value: FormQuestionType) => void;
  onDeleteQuestion?: (questionId: string) => void;
}

const ShortTextQuestionCard = (props: Props) => {
  const { question, onChangeTitle, onTypeChange, onDeleteQuestion } = props;

  return (
    <section className="w-full flex flex-col gap-[12px] p-[24px] bg-bg-default border border-divider-default rounded-[16px] shadow-sm">
      <div className="w-full flex justify-between items-center">
        {/* 질문 타입 선택 */}
        <select
          value={question?.getValue('type') ?? 'SHORT_TEXT'}
          className="appearance-none cursor-pointer px-[8px] py-[4px] text-[12px] rounded-[6px] bg-bg-sub border border-divider-default text-text-secondary transition-colors"
          onChange={e =>
            onTypeChange?.(question.getValue('id'), e.target.value as FormQuestionType)
          }
        >
          <option value="SHORT_TEXT">단답형</option>
          <option value="LONG_TEXT">장답형</option>
          <option value="MULTIPLE_CHOICE">객관식(복수선택)</option>
          <option value="SINGLE_CHOICE">객관식(단일선택)</option>
        </select>

        <button
          type="button"
          aria-label="질문 삭제"
          className="group rounded-full aspect-square p-[8px] flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition-colors cursor-pointer"
          onClick={() => onDeleteQuestion?.(question.getValue('id'))}
        >
          <Iconography.Stroke.Trash
            className="text-gray-500 group-hover:text-danger transition-colors duration-200"
            aria-hidden
          />
        </button>
      </div>
      <div className="w-full flex flex-col gap-[12px]">
        <div className="w-full">
          <input
            type="text"
            placeholder="질문을 입력해주세요. (최대 50자)"
            className="w-full py-[4px] text-[18px] font-bold bg-transparent border-b border-gray-200 text-text-primary focus:border-brand-primary focus:outline-none placeholder:text-text-tertiary transition-colors"
            maxLength={50}
            value={question.getValue('title')}
            onChange={e => onChangeTitle?.(question.getValue('id'), e.target.value)}
          />
        </div>

        <div className="w-full pt-[8px]">
          <div className="w-full max-w-[400px]">
            <input
              disabled
              type="text"
              placeholder="단답형 텍스트 (최대 100자)"
              className="w-full px-[12px] py-[10px] text-[14px] rounded-[8px] border border-dashed border-gray-300 bg-gray-100 text-gray-400 cursor-not-allowed select-none"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export default memo(ShortTextQuestionCard);
</file>

<file path="src/entities/form/ui/SingleChoiceQuestionCard/index.tsx">
import { memo } from 'react';

import { FormQuestionModel, FormQuestionType } from '@/entities/form/model';
import { Iconography } from '@/shared/ui';

interface Props {
  question: FormQuestionModel;
  onTypeChange?: (questionId: string, value: FormQuestionType) => void;
  onDeleteQuestion?: (questionId: string) => void;
  onChangeTitle?: (questionId: string, value: string) => void;
  onAddOption?: (questionId: string) => void;
  onRemoveOption?: (questionId: string, optionId: string) => void;
  onUpdateOption?: (questionId: string, optionId: string, value: string) => void;
}

const SingleChoiceQuestionCard = (props: Props) => {
  const {
    question,
    onChangeTitle,
    onAddOption,
    onRemoveOption,
    onUpdateOption,
    onTypeChange,
    onDeleteQuestion,
  } = props;

  return (
    <section className="w-full flex flex-col gap-[12px] p-[24px] bg-bg-default border border-divider-default rounded-[16px] shadow-sm">
      <div className="w-full flex justify-between items-center">
        {/* 질문 타입 선택 */}
        <select
          value={question?.getValue('type') ?? 'SHORT_TEXT'}
          className="appearance-none cursor-pointer px-[8px] py-[4px] text-[12px] rounded-[6px] bg-bg-sub border border-divider-default text-text-secondary transition-colors"
          onChange={e =>
            onTypeChange?.(question.getValue('id'), e.target.value as FormQuestionType)
          }
        >
          <option value="SHORT_TEXT">단답형</option>
          <option value="LONG_TEXT">장답형</option>
          <option value="MULTIPLE_CHOICE">객관식(복수선택)</option>
          <option value="SINGLE_CHOICE">객관식(단일선택)</option>
        </select>

        <button
          type="button"
          aria-label="질문 삭제"
          className="group rounded-full aspect-square p-[8px] flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition-colors cursor-pointer"
          onClick={() => onDeleteQuestion?.(question.getValue('id'))}
        >
          <Iconography.Stroke.Trash
            className="text-gray-500 group-hover:text-danger transition-colors duration-200"
            aria-hidden
          />
        </button>
      </div>
      <div className="w-full flex flex-col gap-[12px]">
        <div className="w-full">
          <input
            type="text"
            placeholder="질문을 입력해주세요. (최대 50자)"
            className="w-full py-[4px] text-[18px] font-bold bg-transparent border-b border-gray-200 text-text-primary focus:border-brand-primary focus:outline-none placeholder:text-text-tertiary transition-colors"
            maxLength={50}
            value={question.getValue('title')}
            onChange={e => onChangeTitle?.(question.getValue('id'), e.target.value)}
          />
        </div>

        <div className="w-full pt-[8px]">
          <div className="w-full flex flex-col gap-[8px]">
            {question.getValue('options')?.map(option => {
              const { id, content } = option.toJSON();
              return (
                <div key={id} className="w-full flex items-center gap-[8px]">
                  <div className="w-[18px] h-[18px] border border-gray-300 bg-white flex-shrink-0 rounded-full" />
                  <input
                    type="text"
                    value={content}
                    placeholder="옵션을 입력해주세요"
                    className="flex-1 text-[14px] text-text-primary bg-transparent border-b border-transparent focus:border-brand-primary focus:outline-none placeholder:text-text-tertiary transition-colors py-[4px]"
                    onChange={e => onUpdateOption?.(question.getValue('id'), id, e.target.value)}
                  />
                  <button
                    type="button"
                    onClick={() => onRemoveOption?.(question.getValue('id'), id)}
                    className="p-[4px] rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
                    aria-label="옵션 삭제"
                  >
                    <Iconography.Stroke.Minus
                      className="w-[20px] h-[20px] text-danger hover:cursor-pointer"
                      aria-hidden
                    />
                  </button>
                </div>
              );
            })}

            <button
              type="button"
              onClick={() => onAddOption?.(question.getValue('id'))}
              className="w-fit flex items-center gap-[4px] px-[8px] py-[4px] rounded-[6px] hover:bg-gray-100 transition-colors text-[13px] text-text-secondary font-medium"
            >
              <Iconography.Stroke.Plus className="w-[14px] h-[14px]" />
              <span>옵션 추가</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default memo(SingleChoiceQuestionCard);
</file>

<file path="src/entities/form/ui/index.ts">
export { default as ShortTextQuestionCard } from './ShortTextQuestionCard';
export { default as LongTextQuestionCard } from './LongTextQuestionCard';
export { default as SingleChoiceQuestionCard } from './SingleChoiceQuestionCard';
export { default as MultipleChoiceQuestionCard } from './MultipleChoiceQuestionCard';
</file>

<file path="src/entities/README.md">
- 데이터 모델과 해당 데이터에 대한 로직을 포함
</file>

<file path="src/features/authenticate/ui/login-button/kakao/index.tsx">
import { memo } from 'react';

import { EnvManager } from '@/shared/lib';

const Kakao = () => {
  const clientId = EnvManager.getAppEnv('VITE_KAKAO_CLIENT_ID') ?? '';
  const redirectUri = EnvManager.getAppEnv('VITE_KAKAO_REDIRECT_URI') ?? '';

  return (
    <a
      role="button"
      href={`https://kauth.kakao.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code`}
      aria-label="카카오 로그인"
      className="flex items-center justify-center gap-[12px] bg-[#FEE500] text-[rgba(0,0,0,0.85)] text-base p-[12px] rounded-[12px] hover:bg-[#FDD835] active:bg-[#FBC02D] transition-colors duration-200 w-fit"
    >
      <span>카카오 로그인</span>
    </a>
  );
};

export default memo(Kakao);
</file>

<file path="src/features/authenticate/ui/login-button/index.tsx">
import KakaoLoginButton from './kakao';

const LoginButton = {
  Kakao: KakaoLoginButton,
};

export default LoginButton;
</file>

<file path="src/features/authenticate/ui/index.ts">
export { default as LoginButton } from './login-button';
</file>

<file path="src/features/edit-form/ui/FormSignatureEditSection/hook.ts">
import { useCallback } from 'react';

import { FormSignatureStateService } from '@/entities/form/lib';
import { useFormSignatureStore } from '@/entities/form/store';
import { TypeGuard } from '@/shared/lib';

const useFormSignatureEditSectionController = () => {
  const { formSignature, setFormSignature } = useFormSignatureStore();

  const handleTitleChange = useCallback(
    (title: string) => {
      setFormSignature(prev => {
        if (TypeGuard.checkNull(prev)) {
          const newFormSignature = FormSignatureStateService.getInitialFormSignature();
          return FormSignatureStateService.editTitle(newFormSignature, title);
        }
        const clonedFormSignature = prev.clone();
        return FormSignatureStateService.editTitle(clonedFormSignature, title);
      });
    },
    [setFormSignature],
  );

  const handleDescriptionChange = useCallback(
    (description: string) => {
      setFormSignature(prev => {
        if (TypeGuard.checkNull(prev)) {
          const newFormSignature = FormSignatureStateService.getInitialFormSignature();
          return FormSignatureStateService.editDescription(newFormSignature, description);
        }
        const clonedFormSignature = prev.clone();
        return FormSignatureStateService.editDescription(clonedFormSignature, description);
      });
    },
    [setFormSignature],
  );

  return {
    formSignature,
    handleTitleChange,
    handleDescriptionChange,
  };
};

export default useFormSignatureEditSectionController;
</file>

<file path="src/features/edit-form/ui/FormSignatureEditSection/index.tsx">
import { memo } from 'react';

import useFormSignatureEditSectionController from './hook';

const FormSignatureEditSection = memo(() => {
  const { formSignature, handleTitleChange, handleDescriptionChange } =
    useFormSignatureEditSectionController();

  return (
    <section className="w-full flex flex-col gap-[12px] p-[24px] bg-bg-default border-t-[8px] border-x border-b border-t-brand-primary border-x-divider-default border-b-divider-default rounded-[12px] shadow-sm">
      <div className="w-full">
        <input
          type="text"
          placeholder="제목을 입력해주세요."
          className="w-full py-[8px] text-[32px] font-bold bg-transparent border-b border-gray-200 text-text-primary focus:border-brand-primary focus:outline-none placeholder:text-text-tertiary transition-colors"
          maxLength={100}
          value={formSignature?.getValue('title') ?? ''}
          onChange={e => handleTitleChange(e.target.value)}
        />
      </div>

      <div className="w-full">
        <input
          type="text"
          placeholder="필요할 경우, 추가적인 설명을 입력해주세요."
          className="w-full py-[4px] text-[14px] bg-transparent border-b border-gray-200 text-text-secondary focus:border-brand-primary focus:outline-none placeholder:text-text-tertiary transition-colors"
          maxLength={200}
          value={formSignature?.getValue('description') ?? ''}
          onChange={e => handleDescriptionChange(e.target.value)}
        />
      </div>
    </section>
  );
});
FormSignatureEditSection.displayName = 'FormSignatureEditSection';

export default FormSignatureEditSection;
</file>

<file path="src/features/edit-form/ui/QuestionAddSection/hook.ts">
import { useCallback } from 'react';

import { QuestionListStateService, QuestionStateService } from '@/entities/form/lib';
import { useFormQuestionListStore } from '@/entities/form/store';

import type { FormQuestionType } from '@/entities/form/model';

const useQuestionAddSectionController = () => {
  const { setFormQuestions } = useFormQuestionListStore();

  // 질문 추가 핸들러
  const handleAddQuestion = useCallback(
    (questionType: FormQuestionType) => {
      const formQuestion = QuestionStateService.getInitialQuestion(questionType);
      setFormQuestions(prev => QuestionListStateService.pushQuestion(prev, formQuestion));
    },
    [setFormQuestions],
  );

  return { handleAddQuestion };
};

export default useQuestionAddSectionController;
</file>

<file path="src/features/edit-form/ui/QuestionAddSection/index.tsx">
import { memo } from 'react';

import useQuestionAddSectionController from './hook';

const QuestionAddSection = () => {
  const { handleAddQuestion } = useQuestionAddSectionController();

  const buttonBaseClass =
    'border-[2px] border-divider-default rounded-[8px] py-[12px] px-[16px] flex justify-center items-center flex-nowrap w-full text-[14px] text-center text-nowrap transition-colors duration-100 ease-in-out';
  const activeClass =
    'hover:bg-brand-primary/10 hover:border-brand-primary hover:text-brand-primary cursor-pointer text-text-secondary';

  return (
    <section className="shadow-sm border border-divider-default rounded-[16px] p-[24px] flex flex-col gap-[16px] bg-bg-default w-full">
      <h3 className="text-[20px] font-bold text-text-primary">질문 추가</h3>
      <div className="flex-1 w-full flex items-center gap-[12px]">
        <button
          className={`${buttonBaseClass} ${activeClass}`}
          onClick={() => handleAddQuestion('SHORT_TEXT')}
        >
          단답형
        </button>
        <button
          className={`${buttonBaseClass} ${activeClass}`}
          onClick={() => handleAddQuestion('LONG_TEXT')}
        >
          장문형
        </button>
        <button
          className={`${buttonBaseClass} ${activeClass}`}
          onClick={() => handleAddQuestion('MULTIPLE_CHOICE')}
        >
          복수선택
        </button>
        <button
          className={`${buttonBaseClass} ${activeClass}`}
          onClick={() => handleAddQuestion('SINGLE_CHOICE')}
        >
          단일선택
        </button>
      </div>
    </section>
  );
};

export default memo(QuestionAddSection);
</file>

<file path="src/features/edit-form/ui/QuestionList/index.tsx">
import { memo } from 'react';

import {
  ShortTextQuestionCard,
  LongTextQuestionCard,
  SingleChoiceQuestionCard,
  MultipleChoiceQuestionCard,
} from '@/entities/form/ui';

import useQeustionListController from './use-question-list';

const QuestionList = () => {
  const {
    questions,
    handleTitleChange,
    handleTypeChange,
    handleDeleteQuestion,
    handleUpdateOption,
    handleAddOption,
    handleRemoveOption,
  } = useQeustionListController();

  return (
    <div className="flex flex-col gap-[24px] w-full">
      {questions.map(question => {
        const questionId = question.getValue('id');
        const questionType = question.getValue('type');

        switch (questionType) {
          case 'SHORT_TEXT':
            return (
              <ShortTextQuestionCard
                key={questionId}
                question={question}
                onChangeTitle={handleTitleChange}
                onDeleteQuestion={handleDeleteQuestion}
                onTypeChange={handleTypeChange}
              />
            );
          case 'LONG_TEXT':
            return (
              <LongTextQuestionCard
                key={questionId}
                question={question}
                onChangeTitle={handleTitleChange}
                onDeleteQuestion={handleDeleteQuestion}
                onTypeChange={handleTypeChange}
              />
            );
          case 'SINGLE_CHOICE':
            return (
              <SingleChoiceQuestionCard
                key={questionId}
                question={question}
                onChangeTitle={handleTitleChange}
                onAddOption={handleAddOption}
                onRemoveOption={handleRemoveOption}
                onUpdateOption={handleUpdateOption}
                onDeleteQuestion={handleDeleteQuestion}
                onTypeChange={handleTypeChange}
              />
            );
          case 'MULTIPLE_CHOICE':
            return (
              <MultipleChoiceQuestionCard
                key={questionId}
                question={question}
                onChangeTitle={handleTitleChange}
                onAddOption={handleAddOption}
                onRemoveOption={handleRemoveOption}
                onUpdateOption={handleUpdateOption}
                onDeleteQuestion={handleDeleteQuestion}
                onTypeChange={handleTypeChange}
              />
            );
          default:
            return null;
        }
      })}
    </div>
  );
};

export default memo(QuestionList);
</file>

<file path="src/features/edit-form/ui/QuestionList/use-question-list.ts">
import { QuestionStateService, QuestionListStateService } from '@/entities/form/lib';
import { useFormQuestionListStore } from '@/entities/form/store';
import { TypeGuard } from '@/shared/lib';

import type { FormQuestionType } from '@/entities/form/model';

const useQeustionListController = () => {
  const { formQuestions, setFormQuestions } = useFormQuestionListStore();

  const handleTitleChange = (questionId: string, title: string) => {
    setFormQuestions(prevList => {
      const prevQuestion = QuestionListStateService.findQuestionById(prevList, questionId);
      if (TypeGuard.checkNull(prevQuestion)) {
        return prevList;
      }
      const newQuestion = QuestionStateService.editQuestionTitle(prevQuestion, title);
      return QuestionListStateService.replaceQuestionById(prevList, newQuestion, questionId);
    });
  };

  const handleTypeChange = (questionId: string, type: FormQuestionType) => {
    setFormQuestions(prevList => {
      const prevQuestion = QuestionListStateService.findQuestionById(prevList, questionId);
      if (TypeGuard.checkNull(prevQuestion)) {
        return prevList;
      }
      const newQuestion = QuestionStateService.editQuestionType(prevQuestion, type);
      return QuestionListStateService.replaceQuestionById(prevList, newQuestion, questionId);
    });
  };

  const handleDeleteQuestion = (questionId: string) => {
    setFormQuestions(prevList => {
      return QuestionListStateService.removeQuestionFromList(prevList, questionId);
    });
  };

  const handleUpdateOption = (questionId: string, optionId: string, content: string) => {
    setFormQuestions(prevList => {
      const prevQuestion = QuestionListStateService.findQuestionById(prevList, questionId);
      if (TypeGuard.checkNull(prevQuestion)) {
        return prevList;
      }
      const newQuestion = QuestionStateService.editOptionContent(prevQuestion, optionId, content);
      return QuestionListStateService.replaceQuestionById(prevList, newQuestion, questionId);
    });
  };

  const handleAddOption = (questionId: string) => {
    setFormQuestions(prevList => {
      const prevQuestion = QuestionListStateService.findQuestionById(prevList, questionId);
      if (TypeGuard.checkNull(prevQuestion)) {
        return prevList;
      }
      const newQuestion = QuestionStateService.addOption(prevQuestion);
      return QuestionListStateService.replaceQuestionById(prevList, newQuestion, questionId);
    });
  };

  const handleRemoveOption = (questionId: string, optionId: string) => {
    setFormQuestions(prevList => {
      const prevQuestion = QuestionListStateService.findQuestionById(prevList, questionId);
      if (TypeGuard.checkNull(prevQuestion)) {
        return prevList;
      }
      const newQuestion = QuestionStateService.removeOption(prevQuestion, optionId);
      return QuestionListStateService.replaceQuestionById(prevList, newQuestion, questionId);
    });
  };

  return {
    questions: formQuestions,
    handleTitleChange,
    handleTypeChange,
    handleDeleteQuestion,
    handleUpdateOption,
    handleAddOption,
    handleRemoveOption,
  };
};

export default useQeustionListController;
</file>

<file path="src/features/edit-form/ui/index.ts">
export { default as FormSignatureEditSection } from './FormSignatureEditSection';
export { default as QuestionAddSection } from './QuestionAddSection';
export { default as QuestionList } from './QuestionList';
</file>

<file path="src/features/toggle-theme/ui/dark-mode-button/index.tsx">
import { memo, useCallback, useState } from 'react';

import { TypeGuard } from '@/shared/lib';
import { Iconography } from '@/shared/ui';

const DarkModeButton = () => {
  const [darkMode, setDarkMode] = useState(
    document?.documentElement.classList.contains('dark') ?? false,
  );

  const handleToggle = useCallback(() => {
    if (TypeGuard.checkUndefined(document)) {
      return;
    }
    if (darkMode) {
      document.documentElement.classList.remove('dark');
      setDarkMode(false);
    } else {
      document.documentElement.classList.add('dark');
      setDarkMode(true);
    }
  }, [darkMode]);

  return (
    <button
      onClick={handleToggle}
      aria-pressed={darkMode}
      aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
      className="rounded-full bg-gray-200 p-2 text-gray-800 w-fit h-fit aspect-square transition-colors hover:bg-gray-300 active:bg-gray-400"
    >
      {darkMode ? <Iconography.Stroke.Sun aria-hidden /> : <Iconography.Stroke.Moon aria-hidden />}
    </button>
  );
};

export default memo(DarkModeButton);
</file>

<file path="src/features/toggle-theme/ui/index.ts">
export { default as DarkModeButton } from './dark-mode-button';
</file>

<file path="src/pages/kakao-redirect/hook.ts">
import { useCallback, useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';

import { TypeGuard } from '@/shared/lib';
import { AxiosManager } from '@/shared/lib';

const useKakaoRedirectPageController = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  const initialize = useCallback(async () => {
    const code = searchParams.get('code');

    console.log(code);

    if (!TypeGuard.checkNull(code)) {
      // TODO: 인가코드를 이용하여 access token을 발급
      try {
        await AxiosManager.getAxiosInstance().post('', { data: { code } });
        localStorage.setItem('isLoggined', 'true');
      } catch {
        localStorage.setItem('isLoggined', 'false');
      }
    } else {
      localStorage.setItem('isLoggined', 'false');
    }
    navigate('/');
  }, [searchParams, navigate]);

  useEffect(() => {
    initialize();
  }, []);
};

export default useKakaoRedirectPageController;
</file>

<file path="src/pages/kakao-redirect/index.tsx">
import useKakaoRedirectPageController from './hook';

const KakaoRedirectPage = () => {
  useKakaoRedirectPageController();

  return (
    <div className="bg-bg-default w-full h-[100dvh] flex justify-center items-center">
      <span className="text-text-primary text-base font-medium">...</span>
    </div>
  );
};

export default KakaoRedirectPage;
</file>

<file path="src/pages/landing/hook.ts">
import { useState } from 'react';

const useLandingPageController = () => {
  const [isLoggined] = useState(() => {
    const loginFlag = localStorage?.getItem('isLoggined');
    return loginFlag === 'true';
  });

  return {
    isLoggined,
  };
};

export default useLandingPageController;
</file>

<file path="src/pages/landing/index.tsx">
import { Link } from 'react-router-dom';

// import { LoginButton } from '@/features/authenticate/ui';
import { DarkModeButton } from '@/features/toggle-theme/ui';
import { Iconography } from '@/shared/ui';

import useLandingPageController from './hook';

const LandingPage = () => {
  const { isLoggined } = useLandingPageController();

  return (
    <div className="w-full min-h-[100dvh] overflow-y-auto flex flex-col bg-bg-base text-text-primary">
      <header className="w-full px-6 py-4 flex justify-between items-center bg-bg-base border-b border-border-default sticky top-0 z-50">
        <div className="flex items-center gap-3">
          <Link to="/" aria-label="CRATE 홈" className="flex items-center gap-3 group">
            <div className="bg-brand-primary w-10 h-10 rounded-slim-xl flex justify-center items-center text-text-inverse font-slim-bold text-lg group-hover:scale-105 transition-transform">
              C
            </div>
            <span className="text-xl font-slim-bold tracking-tight text-text-primary group-hover:text-brand-primary transition-colors">
              CRATE
            </span>
          </Link>
        </div>
        <nav className="flex items-center gap-3">
          <DarkModeButton />
          <Link
            to="/dashboard"
            className="px-4 py-2 text-sm font-slim-semibold text-text-secondary hover:text-text-primary rounded-slim-lg hover:bg-bg-subtle transition-all"
          >
            대시보드
          </Link>
          {isLoggined ? (
            <span className="px-4 py-2 text-sm font-slim-semibold text-brand-primary bg-brand-primary/10 rounded-slim-lg">
              로그인됨
            </span>
          ) : (
            <div className="flex items-center gap-2">
              <Link
                to="/login"
                className="px-4 py-2 text-sm font-slim-semibold text-text-secondary hover:text-text-primary rounded-slim-lg hover:bg-bg-subtle transition-all"
              >
                로그인
              </Link>
              <Link
                to="/signup"
                className="px-4 py-2 text-sm font-slim-semibold text-text-inverse bg-brand-primary rounded-slim-lg hover:bg-brand-primary-hover transition-all"
              >
                회원가입
              </Link>
            </div>
          )}
        </nav>
      </header>

      <main className="flex-1">
        <section className="w-full px-6 py-24 flex flex-col items-center gap-8 bg-bg-base">
          <div className="flex flex-col items-center gap-6 max-w-4xl text-center">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-neon-pink-50 dark:bg-neon-pink-950/30 border border-neon-pink-200 dark:border-neon-pink-800 text-neon-pink-600 dark:text-neon-pink-400 font-slim-semibold rounded-slim-xl text-sm">
              <Iconography.Stroke.Sparkles className="w-4 h-4" />
              <span>선발의 새로운 기준</span>
            </div>

            <h1 className="text-5xl desktop:text-7xl font-slim-bold text-center leading-tight tracking-tight text-text-primary">
              <span className="text-neon-pink-600 dark:text-neon-pink-400">선발,</span> 이제{' '}
              <span className="text-neon-green-600 dark:text-neon-green-400">쉽게</span>!
            </h1>

            <p className="text-xl desktop:text-2xl text-text-secondary text-center font-medium max-w-2xl leading-relaxed">
              흩어진 도구와 복잡한 과정은 이제{' '}
              <span className="font-bold text-brand-primary">CRATE</span>로 끝.
            </p>

            <div className="flex flex-wrap justify-center gap-4">
              <Link
                to="/new-form"
                className="px-8 py-4 bg-brand-primary text-text-inverse font-slim-semibold text-lg rounded-slim-xl shadow-md hover:shadow-lg transform hover:scale-105 transition-all flex items-center gap-3"
              >
                <Iconography.Stroke.Rocket className="w-6 h-6" />
                <span>지금 시작하기</span>
              </Link>
              <Link
                to="/login"
                className="px-8 py-4 bg-bg-subtle text-text-primary font-slim-semibold text-lg rounded-slim-xl border border-border-default hover:border-brand-primary hover:shadow-sm transform hover:scale-105 transition-all flex items-center gap-3"
              >
                <Iconography.Stroke.Monitor className="w-6 h-6" />
                <span>로그인하기</span>
              </Link>
            </div>
          </div>
        </section>

        <section className="w-full px-6 py-20 bg-bg-subtle">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-4xl desktop:text-5xl font-slim-bold mb-4 text-text-primary">
                이런 경험 있으신가요?
              </h2>
            </div>

            <div className="grid grid-cols-1 desktop:grid-cols-3 gap-6">
              <article className="p-8 bg-bg-base rounded-slim-2xl border border-border-default shadow-sm hover:shadow-md hover:border-brand-primary transition-all group">
                <div className="w-12 h-12 flex items-center justify-center bg-neon-pink-50 dark:bg-neon-pink-950/30 rounded-slim-xl mb-6 group-hover:scale-110 transition-transform">
                  <Iconography.Stroke.Dizzy className="w-6 h-6 text-neon-pink-600 dark:text-neon-pink-400" />
                </div>
                <h3 className="text-xl font-slim-bold text-text-primary mb-3">
                  도구가 너무 많아요
                </h3>
                <p className="text-text-secondary text-sm leading-relaxed">
                  구글 폼으로 수집, 엑셀로 정리, 메신저로 논의... 너무 복잡해요.
                </p>
              </article>

              <article className="p-8 bg-bg-base rounded-slim-2xl border border-border-default shadow-sm hover:shadow-md hover:border-neon-green-500 transition-all group">
                <div className="w-12 h-12 flex items-center justify-center bg-neon-green-50 dark:bg-neon-green-950/30 rounded-slim-xl mb-6 group-hover:scale-110 transition-transform">
                  <Iconography.Stroke.Angry className="w-6 h-6 text-neon-green-600 dark:text-neon-green-400" />
                </div>
                <h3 className="text-xl font-slim-bold text-text-primary mb-3">공정하지 않아요</h3>
                <p className="text-text-secondary text-sm leading-relaxed">
                  모집 중에 평가하면 먼저 지원한 사람이 유리하고, 일관성도 떨어져요.
                </p>
              </article>

              <article className="p-8 bg-bg-base rounded-slim-2xl border border-border-default shadow-sm hover:shadow-md hover:border-neon-violet-500 transition-all group">
                <div className="w-12 h-12 flex items-center justify-center bg-neon-violet-50 dark:bg-neon-violet-950/30 rounded-slim-xl mb-6 group-hover:scale-110 transition-transform">
                  <Iconography.Stroke.Sad className="w-6 h-6 text-neon-violet-600 dark:text-neon-violet-400" />
                </div>
                <h3 className="text-xl font-slim-bold text-text-primary mb-3">협업이 어려워요</h3>
                <p className="text-text-secondary text-sm leading-relaxed">
                  여러 운영진이 함께 평가하려면 파일 공유하고 취합하고... 너무 복잡해요.
                </p>
              </article>
            </div>
          </div>
        </section>

        <section className="w-full px-6 py-20 bg-bg-base">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-4xl desktop:text-5xl font-slim-bold mb-4 text-text-primary">
                CRATE가 해결해요!
              </h2>
              <p className="text-xl text-text-secondary font-medium">
                선발에 집중할 수 있는 올인원 플랫폼
              </p>
            </div>

            <div className="grid grid-cols-1 desktop:grid-cols-2 gap-6">
              <article className="group relative p-8 bg-bg-subtle border-2 border-transparent rounded-slim-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                <div className="flex items-start gap-6">
                  <div className="w-16 h-16 flex items-center justify-center bg-brand-primary rounded-slim-xl shrink-0 group-hover:scale-110 transition-transform duration-300">
                    <Iconography.Stroke.Target className="w-8 h-8 text-white" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-slim-bold text-text-primary mb-2 group-hover:text-brand-primary transition-colors">
                      통합 워크플로우
                    </h3>
                    <p className="text-text-secondary">
                      양식 제작부터 합격 통보까지, 한 곳에서 끝
                    </p>
                  </div>
                </div>
              </article>

              <article className="group relative p-8 bg-bg-subtle border-2 border-transparent rounded-slim-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                <div className="flex items-start gap-6">
                  <div className="w-16 h-16 flex items-center justify-center bg-neon-pink-500 rounded-slim-xl shrink-0 group-hover:scale-110 transition-transform duration-300">
                    <Iconography.Stroke.Balance className="w-8 h-8 text-white" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-slim-bold text-text-primary mb-2 group-hover:text-neon-pink-500 transition-colors">
                      공정한 평가
                    </h3>
                    <p className="text-text-secondary">
                      모집 마감 후 일괄 평가로 완벽한 공정성
                    </p>
                  </div>
                </div>
              </article>

              <article className="group relative p-8 bg-bg-subtle border-2 border-transparent rounded-slim-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                <div className="flex items-start gap-6">
                  <div className="w-16 h-16 flex items-center justify-center bg-neon-violet-500 rounded-slim-xl shrink-0 group-hover:scale-110 transition-transform duration-300">
                    <Iconography.Stroke.Users className="w-8 h-8 text-white" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-slim-bold text-text-primary mb-2 group-hover:text-neon-violet-500 transition-colors">
                      팀 협업
                    </h3>
                    <p className="text-text-secondary">
                      여러 운영진이 함께 평가, 파일 공유 없이 즉시 협업
                    </p>
                  </div>
                </div>
              </article>

              <article className="group relative p-8 bg-bg-subtle border-2 border-transparent rounded-slim-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                <div className="flex items-start gap-6">
                  <div className="w-16 h-16 flex items-center justify-center bg-neon-green-500 rounded-slim-xl shrink-0 group-hover:scale-110 transition-transform duration-300">
                    <Iconography.Stroke.Flash className="w-8 h-8 text-white" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-slim-bold text-text-primary mb-2 group-hover:text-neon-green-500 transition-colors">
                      단순함
                    </h3>
                    <p className="text-text-secondary">
                      직관적인 드래그 앤 드롭으로 5분 만에 모집 시작
                    </p>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </section>

        <section className="w-full px-6 py-20 bg-gradient-to-b from-bg-subtle via-bg-base to-bg-subtle">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-4xl desktop:text-5xl font-slim-bold mb-4 text-text-primary">
                이런 분들께 추천해요
              </h2>
            </div>

            <div className="grid grid-cols-1 desktop:grid-cols-3 gap-8">
              <article className="group relative overflow-hidden p-10 bg-gradient-to-br from-brand-primary via-brand-primary/90 to-brand-primary/80 rounded-slim-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300">
                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl group-hover:bg-white/20 transition-all" />
                <div className="absolute bottom-0 left-0 w-24 h-24 bg-black/5 rounded-full blur-2xl" />
                <div className="relative z-10 flex flex-col h-full">
                  <div className="w-16 h-16 flex items-center justify-center bg-white/20 backdrop-blur-sm rounded-slim-xl mb-6 group-hover:scale-110 transition-transform">
                    <Iconography.Stroke.Graduation className="w-10 h-10 text-white" />
                  </div>
                  <h3 className="text-3xl font-slim-bold text-white mb-4">대학 동아리</h3>
                  <p className="text-white/90 leading-relaxed">
                    부원 모집부터 선정까지 한 번에.
                  </p>
                </div>
              </article>

              <article className="group relative overflow-hidden p-10 bg-gradient-to-br from-neon-pink-500 via-neon-pink-400 to-neon-pink-600 rounded-slim-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300">
                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl group-hover:bg-white/20 transition-all" />
                <div className="absolute bottom-0 left-0 w-24 h-24 bg-black/5 rounded-full blur-2xl" />
                <div className="relative z-10 flex flex-col h-full">
                  <div className="w-16 h-16 flex items-center justify-center bg-white/20 backdrop-blur-sm rounded-slim-xl mb-6 group-hover:scale-110 transition-transform">
                    <Iconography.Stroke.Rocket className="w-10 h-10 text-white" />
                  </div>
                  <h3 className="text-3xl font-slim-bold text-white mb-4">스타트업</h3>
                  <p className="text-white/90 leading-relaxed">
                    전문가 없이도 완벽한 채용 프로세스.
                  </p>
                </div>
              </article>

              <article className="group relative overflow-hidden p-10 bg-gradient-to-br from-neon-violet-500 via-neon-violet-400 to-neon-violet-600 rounded-slim-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300">
                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl group-hover:bg-white/20 transition-all" />
                <div className="absolute bottom-0 left-0 w-24 h-24 bg-black/5 rounded-full blur-2xl" />
                <div className="relative z-10 flex flex-col h-full">
                  <div className="w-16 h-16 flex items-center justify-center bg-white/20 backdrop-blur-sm rounded-slim-xl mb-6 group-hover:scale-110 transition-transform">
                    <Iconography.Stroke.Document className="w-10 h-10 text-white" />
                  </div>
                  <h3 className="text-3xl font-slim-bold text-white mb-4">행사 운영진</h3>
                  <p className="text-white/90 leading-relaxed">
                    공정하고 빠른 참가자 모집.
                  </p>
                </div>
              </article>
            </div>
          </div>
        </section>

        <article className="w-full px-6 py-20 bg-brand-primary text-text-inverse relative overflow-hidden">
          <div className="max-w-4xl mx-auto text-center relative z-10">
            <h2 className="text-4xl desktop:text-6xl font-slim-bold mb-6 leading-tight tracking-tight">
              선발의 새로운 기준,
              <br />
              지금 시작하세요
            </h2>
            <p className="text-xl desktop:text-2xl mb-10 font-slim-normal flex items-center justify-center gap-2 opacity-90">
              복잡한 설정 없이 5분 만에 모집 시작 <Iconography.Stroke.Flash className="w-5 h-5" />
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <Link
                to="/new-form"
                className="px-10 py-5 bg-bg-base text-brand-primary font-slim-bold text-xl rounded-slim-2xl shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all flex items-center gap-3"
              >
                <Iconography.Stroke.Target className="w-8 h-8" />
                <span>무료로 시작하기</span>
              </Link>
              {!isLoggined && (
                <Link
                  to="/signup"
                  className="px-10 py-5 bg-brand-secondary text-text-inverse font-slim-bold text-xl rounded-slim-2xl shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all flex items-center gap-3"
                >
                  <Iconography.Stroke.Rocket className="w-8 h-8" />
                  <span>회원가입</span>
                </Link>
              )}
            </div>
            <p className="mt-8 text-sm font-slim-normal flex items-center justify-center gap-2 opacity-75">
              <Iconography.Stroke.Sparkles className="w-4 h-4" /> 신용카드 등록 불필요 · 언제든
              무료로 시작
            </p>
          </div>
        </article>
      </main>

      <footer className="w-full px-6 py-12 bg-bg-subtle border-t border-border-default text-text-primary">
        <div className="max-w-6xl mx-auto flex flex-col desktop:flex-row justify-between items-center gap-6">
          <div className="flex items-center gap-3">
            <div className="bg-brand-primary w-10 h-10 rounded-slim-xl flex justify-center items-center text-text-inverse font-slim-bold text-lg">
              C
            </div>
            <span className="text-xl font-slim-bold tracking-tight">CRATE</span>
          </div>
          <div className="text-center desktop:text-right">
            <p className="text-text-secondary text-sm">
              © 2025 indigo-net. CRATE by indigo-net. All rights reserved.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default LandingPage;
</file>

<file path="src/pages/new-form/hook.ts">
import { useEffect, useRef } from 'react';

import { useFormQuestionListStore } from '@/entities/form/store';

const useNewFormPageController = () => {
  const { formQuestions } = useFormQuestionListStore();

  const listRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // NOTE: 질문이 추가되더라도, "질문추가용UI" 를 추적하기 위해 카드리스트의 가장 하단으로 스크롤 이동
    if (listRef.current) {
      listRef.current.scrollIntoView({
        block: 'end',
        behavior: 'smooth',
      });
    }
  }, [formQuestions.length]);

  return { formQuestions, listRef };
};

export default useNewFormPageController;
</file>

<file path="src/pages/new-form/index.tsx">
import {
  QuestionList,
  QuestionAddSection,
  FormSignatureEditSection,
} from '@/features/edit-form/ui';

import useNewFormPageController from './hook';

const NewFormPage = () => {
  const { listRef } = useNewFormPageController();

  return (
    <div className="w-full h-[100dvh] flex flex-col">
      <header className="px-[32px] py-[16px] flex justify-center items-center bg-default border-b border-b-divider-default">
        <div className="mx-auto w-full max-w-[1200px] flex justify-between items-center">
          {/** 👇 TODO: Button 컴포넌트로 대체 */}
          <button className="rounded-[8px] w-fit flex items-center justify-center gap-[8px] py-[8px] px-[16px] bg-transparent color-text-tertiary hover:bg-gray-100/90 text-text-primary text-[16px]">
            {/** 👇 TODO: Icon 컴포넌트로 대체 */}
            <span>I</span>
            <span>돌아가기</span>
          </button>

          <div className="flex items-center gap-[12px]">
            <button className="border-border-sub rounded-[8px] w-fit flex items-center justify-center gap-[8px] py-[8px] px-[16px] bg-transparent color-text-tertiary hover:bg-gray-100/90">
              초기화
            </button>
            {/** 👇 TODO: Button 컴포넌트로 대체 */}
            <button className="border-none rounded-[8px] w-fit flex items-center justify-center gap-[8px] py-[8px] px-[16px] bg-brand-primary color-white hover:bg-brand-primary/90">
              {/** 👇 TODO: Icon 컴포넌트로 대체 */}
              <span>I</span>
              <span>저장 및 게시</span>
            </button>
          </div>
        </div>
      </header>

      <main className="flex-1 overflow-y-auto flex flex-col bg-bg-sub items-center h-full w-full">
        <div ref={listRef} className="p-[32px] flex flex-col gap-[24px] w-full max-w-[1200px]">
          <FormSignatureEditSection />
          <QuestionList />
          <QuestionAddSection />
        </div>
      </main>
    </div>
  );
};

export default NewFormPage;
</file>

<file path="src/shared/context/ToastContext/index.tsx">
import { createContext, useContext, useEffect, useRef, useState } from 'react';

import { Toast } from '@/shared/ui';

import type { ReactNode } from 'react';

interface State {
  showToast: (message: string) => void;
}

const ToastContext = createContext<State | null>(null);

interface Props {
  children: ReactNode;
}

const ToastProvider = ({ children }: Props) => {
  const [message, setMessage] = useState<string>('');
  const [isVisible, setIsVisible] = useState(false);
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const showToast = (newMessage: string) => {
    // 이전 타이머 제거
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }

    setMessage(newMessage);
    setIsVisible(true);

    // 3초 후 자동 숨김
    timerRef.current = setTimeout(() => {
      setIsVisible(false);
    }, 3000);
  };

  useEffect(() => {
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
  }, []);

  return (
    <ToastContext.Provider value={{ showToast }}>
      {children}
      <Toast message={message} isVisible={isVisible} />
    </ToastContext.Provider>
  );
};

const useToastContext = () => {
  const context = useContext(ToastContext);
  if (!context) {
    throw new Error('useToastContext must be used within a ToastProvider');
  }
  return context;
};

export { ToastProvider, useToastContext };
</file>

<file path="src/shared/context/index.ts">
export { ToastProvider, useToastContext } from './ToastContext';
</file>

<file path="src/shared/lib/axios-manager/index.ts">
import axios, { AxiosInstance, AxiosError, CreateAxiosDefaults } from 'axios';

class AxiosManager {
  private static instance: AxiosInstance | null = null;

  private static createInstance(config?: CreateAxiosDefaults): AxiosInstance {
    const defaultConfig: CreateAxiosDefaults = {
      baseURL: import.meta.env.VITE_API_BASE_URL,
      timeout: 10000,
      withCredentials: true, // httpOnly 쿠키 전송을 위해 필요
      headers: {
        'Content-Type': 'application/json',
      },
    };

    // 기본 설정과 사용자 설정 병합
    const instance = axios.create({
      ...defaultConfig,
      ...config,
      headers: {
        ...defaultConfig.headers,
        ...config?.headers,
      },
    });

    instance.interceptors.response.use(
      response => {
        return response;
      },
      (error: AxiosError) => {
        if (error.response?.status === 401) {
          // TODO: refresh token
        }
        return Promise.reject(error);
      },
    );

    return instance;
  }

  static getAxiosInstance(config?: CreateAxiosDefaults): AxiosInstance {
    if (!this.instance) {
      this.instance = this.createInstance(config);
    }
    return this.instance;
  }
}

export default AxiosManager;
</file>

<file path="src/shared/lib/env-manager/index.ts">
class EnvManager {
  static getAppEnv(key: AppEnvKey): string | null {
    return import.meta.env[key] ?? null;
  }

  static checkDevMode(): boolean {
    return import.meta.env.DEV;
  }

  static checkProdMode(): boolean {
    return import.meta.env.PROD;
  }
}

export default EnvManager;
</file>

<file path="src/shared/lib/type-guard/index.ts">
class TypeGuard {
  static checkString(value: unknown): value is string {
    return typeof value === 'string';
  }

  static checkNumber(value: unknown): value is number {
    return typeof value === 'number' && !Number.isNaN(value);
  }

  static checkBoolean(value: unknown): value is boolean {
    return typeof value === 'boolean';
  }

  static checkNull(value: unknown): value is null {
    return value === null;
  }

  static checkUndefined(value: unknown): value is undefined {
    return value === undefined;
  }
}

export default TypeGuard;
</file>

<file path="src/shared/lib/uuid/index.ts">
class UUID {
  /**
   * @description
   * - 16바이트(128bit) 난수 배열을 반환
   * - 브라우저 환경: Web Crypto API (crypto.getRandomValues) 사용
   * - Node.js 환경: crypto.randomBytes 사용
   */
  private static getRandomBytes16(): Uint8Array {
    if (typeof globalThis.crypto !== 'undefined' && globalThis.crypto.getRandomValues) {
      const out = new Uint8Array(16);
      globalThis.crypto.getRandomValues(out);
      return out;
    }
    // eslint-disable-next-line @typescript-eslint/no-require-imports
    const nodeCrypto = require('crypto') as typeof import('crypto');
    return new Uint8Array(nodeCrypto.randomBytes(16));
  }

  static v4(): string {
    const randomBytes = this.getRandomBytes16();
    randomBytes[6] = (randomBytes[6] & 0x0f) | 0x40;
    randomBytes[8] = (randomBytes[8] & 0x3f) | 0x80;
    const hex = Array.from(randomBytes, byte => byte.toString(16).padStart(2, '0')).join('');
    return [
      hex.slice(0, 8),
      hex.slice(8, 12),
      hex.slice(12, 16),
      hex.slice(16, 20),
      hex.slice(20),
    ].join('-');
  }

  static isValidV4(uuid: string): boolean {
    const regex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
    return regex.test(uuid);
  }
}
export default UUID;
</file>

<file path="src/shared/lib/index.ts">
export { default as AxiosManager } from './axios-manager';
export { default as EnvManager } from './env-manager';
export { default as TypeGuard } from './type-guard';
export { default as UUID } from './uuid';
</file>

<file path="src/shared/model/custom-model/index.ts">
abstract class CustomModel<T> {
  // 직렬화용 JSON 객체를 반환해야 한다.
  abstract toJSON(): T;
  // 자기 자신을 복제한 새 인스턴스를 반환해야 한다.
  abstract clone(props?: Partial<T>): CustomModel<T>;
}

export default CustomModel;
</file>

<file path="src/shared/model/index.ts">
export { default as CustomModel } from './custom-model';
</file>

<file path="src/shared/ui/iconography/logo/kakao-talk/index.tsx">
import type { SVGProps } from 'react';

const KakaoTalk = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'kakaotalk',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <path d="M4 11.2C4 7.78 7.58 5 12 5C16.42 5 20 7.78 20 11.2C20 14.62 16.42 17.4 12 17.4C11.19 17.4 10.4 17.31 9.66 17.15L6 19L6.78 15.93C5.05 14.95 4 13.18 4 11.2Z" />
    </svg>
  );
};

export default KakaoTalk;
</file>

<file path="src/shared/ui/iconography/logo/index.tsx">
import KakaoTalk from './kakao-talk';

const Logo = {
  KakaoTalk: KakaoTalk,
};

export default Logo;
</file>

<file path="src/shared/ui/iconography/stroke/angry/index.tsx">
import type { SVGProps } from 'react';

const Angry = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'angry',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <circle cx="12" cy="12" r="10" />
      <path d="M16 16s-1.5-2-4-2-4 2-4 2" />
      <path d="M7.5 8 9 9" />
      <path d="m15 9 1.5-1" />
      <path d="M9 10h.01" />
      <path d="M15 10h.01" />
    </svg>
  );
};

export default Angry;
</file>

<file path="src/shared/ui/iconography/stroke/balance/index.tsx">
import type { SVGProps } from 'react';

const Balance = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'balance',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
    >
      {!ariaHidden && <title>{ariaLabel}</title>}

      <path d="M12 3V21" stroke="currentColor" strokeWidth={1.125} strokeLinecap="round" />
      <path d="M8 21H16" stroke="currentColor" strokeWidth={1.125} strokeLinecap="round" />
      <path d="M3 6H21" stroke="currentColor" strokeWidth={1.125} strokeLinecap="round" />

      <path d="M6 6L2.5 12" stroke="currentColor" strokeWidth={1.125} strokeLinecap="round" />
      <path d="M6 6L9.5 12" stroke="currentColor" strokeWidth={1.125} strokeLinecap="round" />
      <path d="M18 6L14.5 12" stroke="currentColor" strokeWidth={1.125} strokeLinecap="round" />
      <path d="M18 6L21.5 12" stroke="currentColor" strokeWidth={1.125} strokeLinecap="round" />

      <path d="M3.5 12H8.5" stroke="currentColor" strokeWidth={1.125} strokeLinecap="round" />
      <path d="M15.5 12H20.5" stroke="currentColor" strokeWidth={1.125} strokeLinecap="round" />
    </svg>
  );
};

export default Balance;
</file>

<file path="src/shared/ui/iconography/stroke/dizzy/index.tsx">
import type { SVGProps } from 'react';

const Dizzy = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'dizzy',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <circle cx="12" cy="12" r="10" />
      <path d="M8 9h.01" />
      <path d="M16 9h.01" />
      <path d="M10 15c.5-1 1-1.5 2-1.5s1.5.5 2 1.5" />
      <path d="M8 9.01V9" />
      <path d="M16 9.01V9" />
      <path d="M12 12c-2 0-3.5 1-4 2.5" />
      <path d="M12 12c2 0 3.5 1 4 2.5" />
    </svg>
  );
};

export default Dizzy;
</file>

<file path="src/shared/ui/iconography/stroke/Document/index.tsx">
import type { SVGProps } from 'react';

const Document = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'document',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <path
        d="M7 3.75H14L18.25 8V20.25H7V3.75Z"
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinejoin="round"
      />
      <path d="M14 3.75V8H18.25" stroke="currentColor" strokeWidth={1.125} strokeLinejoin="round" />
      <path
        d="M9.5 12H15.5M9.5 15.5H15.5"
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
      />
    </svg>
  );
};

export default Document;
</file>

<file path="src/shared/ui/iconography/stroke/flash/index.tsx">
import type { SVGProps } from 'react';

const Flash = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'flash',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <path d="M13 2 L3 14 L12 14 L11 22 L21 10 L12 10 L13 2 Z" />
    </svg>
  );
};

export default Flash;
</file>

<file path="src/shared/ui/iconography/stroke/graduation/index.tsx">
import type { SVGProps } from 'react';

const Graduation = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'graduation',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
      <path d="M6 12v5c3 3 9 3 12 0v-5" />
    </svg>
  );
};

export default Graduation;
</file>

<file path="src/shared/ui/iconography/stroke/minus/index.tsx">
import type { SVGProps } from 'react';

const Minus = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'minus',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <path
        d="M5 12h14"
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

export default Minus;
</file>

<file path="src/shared/ui/iconography/stroke/monitor/index.tsx">
import type { SVGProps } from 'react';

const Monitor = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'monitor',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <rect width="20" height="14" x="2" y="3" rx="2" />
      <line x1="8" x2="16" y1="21" y2="21" />
      <line x1="12" x2="12" y1="17" y2="21" />
    </svg>
  );
};

export default Monitor;
</file>

<file path="src/shared/ui/iconography/stroke/moon/index.tsx">
import type { SVGProps } from 'react';

const Moon = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'moon',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <path
        d="M19.2 13.4A7.5 7.5 0 1 1 10.9 4.7A5.2 5.2 0 0 0 19.2 13.4Z"
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

export default Moon;
</file>

<file path="src/shared/ui/iconography/stroke/plus/index.tsx">
import type { SVGProps } from 'react';

const Plus = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'plus',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <path
        d="M12 5v14M5 12h14"
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

export default Plus;
</file>

<file path="src/shared/ui/iconography/stroke/rocket/index.tsx">
import type { SVGProps } from 'react';

const Rocket = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'rocket',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      stroke="currentColor"
      strokeWidth={1.125}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden={ariaHidden}
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <g transform="rotate(45 12 12)">
        <path
          d="M12 2C15.5 4 18 7.5 18 11.5V14.5C18 16 16.5 17.5 15 17.5H9C7.5 17.5 6 16 6 14.5V11.5C6 7.5 8.5 4 12 2Z"
          stroke="currentColor"
          strokeWidth={1.125}
          strokeLinecap="round"
          strokeLinejoin="round"
        />

        <circle cx="12" cy="9" r="1.75" stroke="currentColor" strokeWidth={1.125} />

        <path
          d="M6 12L3.5 15V11L6 10"
          stroke="currentColor"
          strokeWidth={1.125}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M18 12L20.5 15V11L18 10"
          stroke="currentColor"
          strokeWidth={1.125}
          strokeLinecap="round"
          strokeLinejoin="round"
        />

        <path
          d="M12 17.5
             C11.5 18.2 10.8 19.2 10.6 20.3
             C10.4 21.3 11.1 22.1 12 22.6
             C12.9 22.1 13.6 21.3 13.4 20.3
             C13.2 19.2 12.5 18.2 12 17.5Z"
          stroke="currentColor"
          strokeWidth={1.125}
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
        />
      </g>
    </svg>
  );
};

export default Rocket;
</file>

<file path="src/shared/ui/iconography/stroke/sad/index.tsx">
import type { SVGProps } from 'react';

const Sad = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'sad',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <circle cx="12" cy="12" r="10" />
      <path d="M16 16s-1.5-2-4-2-4 2-4 2" />
      <line x1="9" x2="9.01" y1="9" y2="9" />
      <line x1="15" x2="15.01" y1="9" y2="9" />
    </svg>
  );
};

export default Sad;
</file>

<file path="src/shared/ui/iconography/stroke/sparkles/index.tsx">
import type { SVGProps } from 'react';

const Sparkles = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'sparkles',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <path d="m12 3 1.912 5.886L20 10.8l-5.888 1.914L12 18.6l-1.912-5.886L4.2 10.8l5.888-1.914z" />
      <path d="m19 19 1.5-1.5L22 19l-1.5 1.5z" />
      <path d="m5 5 1.5-1.5L8 5 6.5 6.5z" />
    </svg>
  );
};

export default Sparkles;
</file>

<file path="src/shared/ui/iconography/stroke/sun/index.tsx">
import type { SVGProps } from 'react';

const Sun = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'sun',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <circle cx={12} cy={12} r={5} stroke="currentColor" strokeWidth={1.125} />
      <line
        x1={12}
        y1={0.5}
        x2={12}
        y2={3.5}
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
      />
      <line
        x1={12}
        y1={20.5}
        x2={12}
        y2={23.5}
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
      />
      <line
        x1={0.5}
        y1={12}
        x2={3.5}
        y2={12}
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
      />
      <line
        x1={20.5}
        y1={12}
        x2={23.5}
        y2={12}
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
      />
      <line
        x1={4.2}
        y1={4.2}
        x2={6.3}
        y2={6.3}
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
      />
      <line
        x1={17.7}
        y1={17.7}
        x2={19.8}
        y2={19.8}
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
      />
      <line
        x1={17.7}
        y1={6.3}
        x2={19.8}
        y2={4.2}
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
      />
      <line
        x1={4.2}
        y1={19.8}
        x2={6.3}
        y2={17.7}
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
      />
    </svg>
  );
};

export default Sun;
</file>

<file path="src/shared/ui/iconography/stroke/trash/index.tsx">
import type { SVGProps } from 'react';

const Trash = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'trash',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <path
        d="M3 6H21"
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M8 6V4H16V6"
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M6 6L7 20H17L18 6"
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M10 10V17M14 10V17"
        stroke="currentColor"
        strokeWidth={1.125}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

export default Trash;
</file>

<file path="src/shared/ui/iconography/stroke/users/index.tsx">
import type { SVGProps } from 'react';

const Users = (props: SVGProps<SVGSVGElement>) => {
  const {
    width = 24,
    height = 24,
    'aria-label': ariaLabel = 'users',
    'aria-hidden': ariaHidden = false,
  } = props;

  return (
    <svg
      {...props}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden={ariaHidden}
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {!ariaHidden && <title>{ariaLabel}</title>}
      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
      <circle cx="9" cy="7" r="4" />
      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
    </svg>
  );
};

export default Users;
</file>

<file path="src/shared/ui/iconography/stroke/index.tsx">
import Angry from './angry';
import Balance from './balance';
import Dizzy from './dizzy';
import Document from './Document';
import Flash from './flash';
import Graduation from './graduation';
import Minus from './minus';
import Monitor from './monitor';
import Moon from './moon';
import Plus from './plus';
import Rocket from './rocket';
import Sad from './sad';
import Sparkles from './sparkles';
import Sun from './sun';
import Target from './target';
import Trash from './trash';
import Users from './users';

const Stroke = {
  Angry,
  Balance,
  Dizzy,
  Document,
  Flash,
  Graduation,
  Minus,
  Monitor,
  Moon,
  Plus,
  Rocket,
  Sad,
  Sparkles,
  Sun,
  Target,
  Trash,
  Users,
};

export default Stroke;
</file>

<file path="src/shared/ui/iconography/index.tsx">
import Logo from './logo';
import Stroke from './stroke';

const Iconography = {
  Logo: Logo,
  Stroke: Stroke,
};

export default Iconography;
</file>

<file path="src/shared/ui/Toast/index.tsx">
import { createPortal } from 'react-dom';

interface Props {
  message: string;
  isVisible: boolean;
}

const Toast = (props: Props) => {
  const { message, isVisible } = props;

  return createPortal(
    <div
      className={`fixed bottom-[98px] left-1/2 -translate-x-1/2 z-50 flex items-center justify-center transition-opacity duration-300 ease-in-out ${
        isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'
      }`}
    >
      <div className="bg-gray-600 text-white px-[20px] py-[12px] rounded-[8px] shadow-lg max-w-[90vw] break-words text-[14px]">
        {message}
      </div>
    </div>,
    document.body,
  );
};
Toast.displayName = 'Toast';

export default Toast;
</file>

<file path="src/shared/ui/index.ts">
export { default as Iconography } from './iconography';
export { default as Toast } from './Toast';
</file>

<file path="src/styles/border-radius.css">
@theme {
  --radius-slim-sm: 4px;
  --radius-slim-md: 8px;
  --radius-slim-lg: 12px;
  --radius-slim-xl: 16px;
  --radius-slim-2xl: 24px;
}
</file>

<file path="src/styles/border-width.css">
@theme {
  --border-width-slim: 0.5px;
  --border-width-thin: 1px;
}
</file>

<file path="src/styles/break-point.css">
@theme {
  --breakpoint-mobile: 365px;
  --breakpoint-desktop: 720px;
}
</file>

<file path="src/styles/colors.css">
/* ============================================
 * CRATE Color Token System
 * Primary: Indigo | Secondary: Orange
 * Supports Light & Dark Modes
 * WCAG AA Compliant
 * ============================================ */

:root {
  /* ==================== BRAND COLORS ==================== */

  /* Primary (Indigo) - Main brand color */
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;

  /* Secondary (Orange) - Accent color */
  --color-secondary-50: #fff7ed;
  --color-secondary-100: #ffedd5;
  --color-secondary-200: #fed7aa;
  --color-secondary-300: #fdba74;
  --color-secondary-400: #fb923c;
  --color-secondary-500: #f97316;
  --color-secondary-600: #ea580c;
  --color-secondary-700: #c2410c;
  --color-secondary-800: #9a3412;
  --color-secondary-900: #7c2d12;

  /* ==================== SEMANTIC TOKENS ==================== */

  /* Brand */
  --color-brand-primary: var(--color-primary-600);
  --color-brand-secondary: var(--color-secondary-500);

  /* Backgrounds */
  --color-bg-base: #ffffff;
  --color-bg-subtle: #f9fafb;
  --color-bg-muted: #f3f4f6;

  /* Text */
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-tertiary: #9ca3af;
  --color-text-inverse: #ffffff;

  /* Borders */
  --color-border-default: #e5e7eb;
  --color-border-subtle: #f3f4f6;
  --color-border-strong: #d1d5db;

  /* Interactive States */
  --color-interactive-primary: var(--color-primary-600);
  --color-interactive-primary-hover: var(--color-primary-700);
  --color-interactive-primary-active: var(--color-primary-800);
  --color-interactive-secondary: var(--color-secondary-500);
  --color-interactive-secondary-hover: var(--color-secondary-600);
  --color-interactive-secondary-active: var(--color-secondary-700);

  /* ==================== FUNCTIONAL COLORS ==================== */

  /* Success (Green) */
  --color-success: #10b981;
  --color-success-bg: #d1fae5;
  --color-success-border: #6ee7b7;

  /* Warning (Amber) */
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-warning-border: #fcd34d;

  /* Error (Red) */
  --color-error: #ef4444;
  --color-error-bg: #fee2e2;
  --color-error-border: #fca5a5;

  /* Info (Blue) */
  --color-info: #3b82f6;
  --color-info-bg: #dbeafe;
  --color-info-border: #93c5fd;

  /* ==================== SURFACE COLORS ==================== */

  --color-surface-overlay: rgba(0, 0, 0, 0.5);
  --color-surface-elevated: #ffffff;

  /* ==================== GRAYSCALE ==================== */

  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ==================== ADDITIONAL PALETTES ==================== */

  /* Blue */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* Green */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;

  /* Red */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;

  /* Amber */
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;

  /* Indigo (extended) */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;

  /* Orange (extended) */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;

  /* Cyan */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;

  /* Pink */
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;

  /* Purple */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;

  /* Neon Pink (Hot) */
  --color-neon-pink-50: #fdf2f8;
  --color-neon-pink-100: #fce7f3;
  --color-neon-pink-200: #fbcfe8;
  --color-neon-pink-300: #f9a8d4;
  --color-neon-pink-400: #f472b6;
  --color-neon-pink-500: #ec4899;
  --color-neon-pink-600: #db2777;
  --color-neon-pink-700: #be185d;
  --color-neon-pink-800: #9d174d;
  --color-neon-pink-900: #831843;

  /* Neon Green (Lime) */
  --color-neon-green-50: #f0fdf4;
  --color-neon-green-100: #dcfce7;
  --color-neon-green-200: #bbf7d0;
  --color-neon-green-300: #86efac;
  --color-neon-green-400: #4ade80;
  --color-neon-green-500: #22c55e;
  --color-neon-green-600: #16a34a;
  --color-neon-green-700: #15803d;
  --color-neon-green-800: #166534;
  --color-neon-green-900: #14532d;

  /* Neon Violet (Electric) */
  --color-neon-violet-50: #f5f3ff;
  --color-neon-violet-100: #ede9fe;
  --color-neon-violet-200: #ddd6fe;
  --color-neon-violet-300: #c4b5fd;
  --color-neon-violet-400: #a78bfa;
  --color-neon-violet-500: #8b5cf6;
  --color-neon-violet-600: #7c3aed;
  --color-neon-violet-700: #6d28d9;
  --color-neon-violet-800: #5b21b6;
  --color-neon-violet-900: #4c1d95;

  /* ==================== UTILITY ==================== */

  --color-white: #ffffff;
  --color-black: #000000;
}

/* ============================================
 * DARK MODE
 * ============================================ */

.dark {
  /* ==================== SEMANTIC TOKENS (DARK) ==================== */

  /* Brand (lighter for dark backgrounds) */
  --color-brand-primary: var(--color-primary-400);
  --color-brand-secondary: var(--color-secondary-400);

  /* Backgrounds */
  --color-bg-base: #0f172a;
  --color-bg-subtle: #1e293b;
  --color-bg-muted: #334155;

  /* Text */
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-inverse: #0f172a;

  /* Borders */
  --color-border-default: #334155;
  --color-border-subtle: #1e293b;
  --color-border-strong: #475569;

  /* Interactive States (lighter for visibility) */
  --color-interactive-primary: var(--color-primary-500);
  --color-interactive-primary-hover: var(--color-primary-400);
  --color-interactive-primary-active: var(--color-primary-300);
  --color-interactive-secondary: var(--color-secondary-500);
  --color-interactive-secondary-hover: var(--color-secondary-400);
  --color-interactive-secondary-active: var(--color-secondary-300);

  /* ==================== FUNCTIONAL COLORS (DARK) ==================== */

  /* Success */
  --color-success: #34d399;
  --color-success-bg: #064e3b;
  --color-success-border: #059669;

  /* Warning */
  --color-warning: #fbbf24;
  --color-warning-bg: #78350f;
  --color-warning-border: #d97706;

  /* Error */
  --color-error: #f87171;
  --color-error-bg: #7f1d1d;
  --color-error-border: #dc2626;

  /* Info */
  --color-info: #60a5fa;
  --color-info-bg: #1e3a8a;
  --color-info-border: #2563eb;

  /* ==================== SURFACE COLORS (DARK) ==================== */

  --color-surface-overlay: rgba(0, 0, 0, 0.7);
  --color-surface-elevated: #1e293b;

  /* Neon Pink (Hot) */
  --color-neon-pink-50: #fce7f3;
  --color-neon-pink-100: #fbcfe8;
  --color-neon-pink-200: #f9a8d4;
  --color-neon-pink-300: #f472b6;
  --color-neon-pink-400: #ec4899;
  --color-neon-pink-500: #db2777;
  --color-neon-pink-600: #be185d;
  --color-neon-pink-700: #9d174d;
  --color-neon-pink-800: #831843;
  --color-neon-pink-900: #701a75;

  /* Neon Green (Lime) */
  --color-neon-green-50: #dcfce7;
  --color-neon-green-100: #bbf7d0;
  --color-neon-green-200: #86efac;
  --color-neon-green-300: #4ade80;
  --color-neon-green-400: #22c55e;
  --color-neon-green-500: #16a34a;
  --color-neon-green-600: #15803d;
  --color-neon-green-700: #166534;
  --color-neon-green-800: #14532d;
  --color-neon-green-900: #064e3b;

  /* Neon Violet (Electric) */
  --color-neon-violet-50: #ede9fe;
  --color-neon-violet-100: #ddd6fe;
  --color-neon-violet-200: #c4b5fd;
  --color-neon-violet-300: #a78bfa;
  --color-neon-violet-400: #8b5cf6;
  --color-neon-violet-500: #7c3aed;
  --color-neon-violet-600: #6d28d9;
  --color-neon-violet-700: #5b21b6;
  --color-neon-violet-800: #4c1d95;
  --color-neon-violet-900: #3b0764;
}

/* ============================================
 * TAILWIND V4 THEME INTEGRATION
 * ============================================ */

@theme {
  /* ==================== BRAND ==================== */
  --color-brand-primary: var(--color-brand-primary);
  --color-brand-secondary: var(--color-brand-secondary);

  /* ==================== SEMANTIC ==================== */
  --color-bg-base: var(--color-bg-base);
  --color-bg-subtle: var(--color-bg-subtle);
  --color-bg-muted: var(--color-bg-muted);

  --color-text-primary: var(--color-text-primary);
  --color-text-secondary: var(--color-text-secondary);
  --color-text-tertiary: var(--color-text-tertiary);
  --color-text-inverse: var(--color-text-inverse);

  --color-border-default: var(--color-border-default);
  --color-border-subtle: var(--color-border-subtle);
  --color-border-strong: var(--color-border-strong);

  /* ==================== INTERACTIVE ==================== */
  --color-interactive-primary: var(--color-interactive-primary);
  --color-interactive-primary-hover: var(--color-interactive-primary-hover);
  --color-interactive-primary-active: var(--color-interactive-primary-active);
  --color-interactive-secondary: var(--color-interactive-secondary);
  --color-interactive-secondary-hover: var(--color-interactive-secondary-hover);
  --color-interactive-secondary-active: var(--color-interactive-secondary-active);

  /* ==================== FUNCTIONAL ==================== */
  --color-success: var(--color-success);
  --color-success-bg: var(--color-success-bg);
  --color-success-border: var(--color-success-border);

  --color-warning: var(--color-warning);
  --color-warning-bg: var(--color-warning-bg);
  --color-warning-border: var(--color-warning-border);

  --color-error: var(--color-error);
  --color-error-bg: var(--color-error-bg);
  --color-error-border: var(--color-error-border);

  --color-info: var(--color-info);
  --color-info-bg: var(--color-info-bg);
  --color-info-border: var(--color-info-border);

  /* ==================== SURFACE ==================== */
  --color-surface-overlay: var(--color-surface-overlay);
  --color-surface-elevated: var(--color-surface-elevated);

  /* ==================== PALETTES ==================== */

  /* Primary (Indigo) */
  --color-primary-50: var(--color-primary-50);
  --color-primary-100: var(--color-primary-100);
  --color-primary-200: var(--color-primary-200);
  --color-primary-300: var(--color-primary-300);
  --color-primary-400: var(--color-primary-400);
  --color-primary-500: var(--color-primary-500);
  --color-primary-600: var(--color-primary-600);
  --color-primary-700: var(--color-primary-700);
  --color-primary-800: var(--color-primary-800);
  --color-primary-900: var(--color-primary-900);

  /* Secondary (Orange) */
  --color-secondary-50: var(--color-secondary-50);
  --color-secondary-100: var(--color-secondary-100);
  --color-secondary-200: var(--color-secondary-200);
  --color-secondary-300: var(--color-secondary-300);
  --color-secondary-400: var(--color-secondary-400);
  --color-secondary-500: var(--color-secondary-500);
  --color-secondary-600: var(--color-secondary-600);
  --color-secondary-700: var(--color-secondary-700);
  --color-secondary-800: var(--color-secondary-800);
  --color-secondary-900: var(--color-secondary-900);

  /* Grayscale */
  --color-gray-50: var(--color-gray-50);
  --color-gray-100: var(--color-gray-100);
  --color-gray-200: var(--color-gray-200);
  --color-gray-300: var(--color-gray-300);
  --color-gray-400: var(--color-gray-400);
  --color-gray-500: var(--color-gray-500);
  --color-gray-600: var(--color-gray-600);
  --color-gray-700: var(--color-gray-700);
  --color-gray-800: var(--color-gray-800);
  --color-gray-900: var(--color-gray-900);

  /* Blue */
  --color-blue-50: var(--color-blue-50);
  --color-blue-100: var(--color-blue-100);
  --color-blue-200: var(--color-blue-200);
  --color-blue-300: var(--color-blue-300);
  --color-blue-400: var(--color-blue-400);
  --color-blue-500: var(--color-blue-500);
  --color-blue-600: var(--color-blue-600);
  --color-blue-700: var(--color-blue-700);
  --color-blue-800: var(--color-blue-800);
  --color-blue-900: var(--color-blue-900);

  /* Green */
  --color-green-50: var(--color-green-50);
  --color-green-100: var(--color-green-100);
  --color-green-200: var(--color-green-200);
  --color-green-300: var(--color-green-300);
  --color-green-400: var(--color-green-400);
  --color-green-500: var(--color-green-500);
  --color-green-600: var(--color-green-600);
  --color-green-700: var(--color-green-700);
  --color-green-800: var(--color-green-800);
  --color-green-900: var(--color-green-900);

  /* Red */
  --color-red-50: var(--color-red-50);
  --color-red-100: var(--color-red-100);
  --color-red-200: var(--color-red-200);
  --color-red-300: var(--color-red-300);
  --color-red-400: var(--color-red-400);
  --color-red-500: var(--color-red-500);
  --color-red-600: var(--color-red-600);
  --color-red-700: var(--color-red-700);
  --color-red-800: var(--color-red-800);
  --color-red-900: var(--color-red-900);

  /* Amber */
  --color-amber-50: var(--color-amber-50);
  --color-amber-100: var(--color-amber-100);
  --color-amber-200: var(--color-amber-200);
  --color-amber-300: var(--color-amber-300);
  --color-amber-400: var(--color-amber-400);
  --color-amber-500: var(--color-amber-500);
  --color-amber-600: var(--color-amber-600);
  --color-amber-700: var(--color-amber-700);
  --color-amber-800: var(--color-amber-800);
  --color-amber-900: var(--color-amber-900);

  /* Indigo */
  --color-indigo-50: var(--color-indigo-50);
  --color-indigo-100: var(--color-indigo-100);
  --color-indigo-200: var(--color-indigo-200);
  --color-indigo-300: var(--color-indigo-300);
  --color-indigo-400: var(--color-indigo-400);
  --color-indigo-500: var(--color-indigo-500);
  --color-indigo-600: var(--color-indigo-600);
  --color-indigo-700: var(--color-indigo-700);
  --color-indigo-800: var(--color-indigo-800);
  --color-indigo-900: var(--color-indigo-900);

  /* Orange */
  --color-orange-50: var(--color-orange-50);
  --color-orange-100: var(--color-orange-100);
  --color-orange-200: var(--color-orange-200);
  --color-orange-300: var(--color-orange-300);
  --color-orange-400: var(--color-orange-400);
  --color-orange-500: var(--color-orange-500);
  --color-orange-600: var(--color-orange-600);
  --color-orange-700: var(--color-orange-700);
  --color-orange-800: var(--color-orange-800);
  --color-orange-900: var(--color-orange-900);

  /* Cyan */
  --color-cyan-50: var(--color-cyan-50);
  --color-cyan-100: var(--color-cyan-100);
  --color-cyan-200: var(--color-cyan-200);
  --color-cyan-300: var(--color-cyan-300);
  --color-cyan-400: var(--color-cyan-400);
  --color-cyan-500: var(--color-cyan-500);
  --color-cyan-600: var(--color-cyan-600);
  --color-cyan-700: var(--color-cyan-700);
  --color-cyan-800: var(--color-cyan-800);
  --color-cyan-900: var(--color-cyan-900);

  /* Pink */
  --color-pink-50: var(--color-pink-50);
  --color-pink-100: var(--color-pink-100);
  --color-pink-200: var(--color-pink-200);
  --color-pink-300: var(--color-pink-300);
  --color-pink-400: var(--color-pink-400);
  --color-pink-500: var(--color-pink-500);
  --color-pink-600: var(--color-pink-600);
  --color-pink-700: var(--color-pink-700);
  --color-pink-800: var(--color-pink-800);
  --color-pink-900: var(--color-pink-900);

  /* Purple */
  --color-purple-50: var(--color-purple-50);
  --color-purple-100: var(--color-purple-100);
  --color-purple-200: var(--color-purple-200);
  --color-purple-300: var(--color-purple-300);
  --color-purple-400: var(--color-purple-400);
  --color-purple-500: var(--color-purple-500);
  --color-purple-600: var(--color-purple-600);
  --color-purple-700: var(--color-purple-700);
  --color-purple-800: var(--color-purple-800);
  --color-purple-900: var(--color-purple-900);

  /* Neon Pink */
  --color-neon-pink-50: var(--color-neon-pink-50);
  --color-neon-pink-100: var(--color-neon-pink-100);
  --color-neon-pink-200: var(--color-neon-pink-200);
  --color-neon-pink-300: var(--color-neon-pink-300);
  --color-neon-pink-400: var(--color-neon-pink-400);
  --color-neon-pink-500: var(--color-neon-pink-500);
  --color-neon-pink-600: var(--color-neon-pink-600);
  --color-neon-pink-700: var(--color-neon-pink-700);
  --color-neon-pink-800: var(--color-neon-pink-800);
  --color-neon-pink-900: var(--color-neon-pink-900);

  /* Neon Green */
  --color-neon-green-50: var(--color-neon-green-50);
  --color-neon-green-100: var(--color-neon-green-100);
  --color-neon-green-200: var(--color-neon-green-200);
  --color-neon-green-300: var(--color-neon-green-300);
  --color-neon-green-400: var(--color-neon-green-400);
  --color-neon-green-500: var(--color-neon-green-500);
  --color-neon-green-600: var(--color-neon-green-600);
  --color-neon-green-700: var(--color-neon-green-700);
  --color-neon-green-800: var(--color-neon-green-800);
  --color-neon-green-900: var(--color-neon-green-900);

  /* Neon Violet */
  --color-neon-violet-50: var(--color-neon-violet-50);
  --color-neon-violet-100: var(--color-neon-violet-100);
  --color-neon-violet-200: var(--color-neon-violet-200);
  --color-neon-violet-300: var(--color-neon-violet-300);
  --color-neon-violet-400: var(--color-neon-violet-400);
  --color-neon-violet-500: var(--color-neon-violet-500);
  --color-neon-violet-600: var(--color-neon-violet-600);
  --color-neon-violet-700: var(--color-neon-violet-700);
  --color-neon-violet-800: var(--color-neon-violet-800);
  --color-neon-violet-900: var(--color-neon-violet-900);

  /* Utility */
  --color-white: var(--color-white);
  --color-black: var(--color-black);
}
</file>

<file path="src/styles/font-weight.css">
@theme {
  --font-weight-slim-thin: 300;
  --font-weight-slim-normal: 400;
  --font-weight-slim-semibold: 600;
  --font-weight-slim-bold: 700;
}
</file>

<file path="src/styles/index.css">
@import 'tailwindcss';

@import './border-radius.css';
@import './border-width.css';
@import './break-point.css';
@import './colors.css';
@import './font-weight.css';

* {
  /* padding과 border를 width에 포함 */
  box-sizing: border-box;
}

html {
  font-size: 16px;
  /* 텍스트 렌더링 최적화 */
  text-rendering: optimizeLegibility;
  /* Firefox에서 폰트 렌더링 개선 */
  -webkit-font-smoothing: antialiased;
  /* macOS/iOS에서 폰트 렌더링 개선 */
  -moz-osx-font-smoothing: grayscale;
  /* 테마 색상 적용 */
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
}

body {
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
</file>

<file path="src/App.tsx">
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import KakaoRedirectPage from './pages/kakao-redirect';
import LandingPage from './pages/landing';
import NewFormPage from './pages/new-form';
import { ToastProvider } from './shared/context';

const App = () => {
  return (
    <ToastProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/new-form" element={<NewFormPage />} />
          <Route path="/kakao-authorize" element={<KakaoRedirectPage />} />
        </Routes>
      </BrowserRouter>
    </ToastProvider>
  );
};

export default App;
</file>

<file path="src/main.tsx">
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

import './styles/index.css';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);
</file>

<file path=".gitignore">
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

.env
</file>

<file path=".prettierignore">
dist
node_modules
</file>

<file path=".prettierrc">
{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "avoid"
}
</file>

<file path="eslint.config.js">
import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-config-prettier';
import { defineConfig } from 'eslint/config';
import importPlugin from 'eslint-plugin-import';

export default defineConfig([
  {
    files: ['**/*.{ts,tsx}'],
    ignores: ['dist'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs.flat.recommended,
      prettier,
    ],
    plugins: {
      import: importPlugin,
    },
    rules: {
      semi: ['error', 'always'],
      quotes: ['error', 'single'],
      'import/order': [
        'error',
        {
          groups: [
            'builtin',
            'external',
            'internal',
            'parent',
            'sibling',
            'index',
            'object',
            'type',
          ],
          pathGroups: [
            {
              pattern: './lib/**',
              group: 'sibling',
              position: 'before',
            },
            {
              pattern: './model/**',
              group: 'sibling',
              position: 'before',
            },
            {
              pattern: './store/**',
              group: 'sibling',
              position: 'before',
            },
            {
              pattern: './ui/**',
              group: 'sibling',
              position: 'before',
            },
            // shared
            {
              pattern: '@/shared/lib/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/shared/model/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/shared/store/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/shared/ui/**',
              group: 'internal',
              position: 'before',
            },
            // entities
            {
              pattern: '@/entities/**/lib/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/entities/**/model/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/entities/**/store/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/entities/**/ui/**',
              group: 'internal',
              position: 'before',
            },
            // features
            {
              pattern: '@/features/**/lib/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/features/**/model/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/features/**/store/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/features/**/ui/**',
              group: 'internal',
              position: 'before',
            },
            // widgets
            {
              pattern: '@/widgets/**/lib/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/widgets/**/model/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/widgets/**/store/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/widgets/**/ui/**',
              group: 'internal',
              position: 'before',
            },
            // pages
            {
              pattern: '@/pages/**/lib/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/pages/**/model/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/pages/**/store/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/pages/**/ui/**',
              group: 'internal',
              position: 'before',
            },
            // apps
            {
              pattern: '@/apps/**/lib/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/apps/**/model/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/apps/**/store/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: '@/apps/**/ui/**',
              group: 'internal',
              position: 'before',
            },
          ],
          pathGroupsExcludedImportTypes: ['builtin'],
          'newlines-between': 'always',
          alphabetize: {
            order: 'asc',
            caseInsensitive: true,
          },
        },
      ],
    },
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    settings: {
      'import/resolver': {
        typescript: true,
        node: true,
      },
    },
  },
]);
</file>

<file path="index.html">
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>crate</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
</file>

<file path="package.json">
{
  "name": "crate",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "format": "prettier --write ."
  },
  "dependencies": {
    "axios": "^1.13.2",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-router-dom": "^7.11.0",
    "zustand": "^5.0.9"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",
    "@tailwindcss/vite": "^4.1.17",
    "@types/node": "^24.10.1",
    "@types/react": "^19.2.5",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^5.1.1",
    "autoprefixer": "^10.4.22",
    "eslint": "^9.39.1",
    "eslint-config-prettier": "^10.1.8",
    "eslint-import-resolver-typescript": "^4.4.4",
    "eslint-plugin-import": "^2.32.0",
    "eslint-plugin-prettier": "^5.5.4",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
    "postcss": "^8.5.6",
    "prettier": "^3.7.3",
    "tailwindcss": "^4.1.17",
    "typescript": "~5.9.3",
    "typescript-eslint": "^8.46.4",
    "vite": "^7.2.4",
    "vite-plugin-eslint": "^1.8.1"
  }
}
</file>

<file path="README.md">
# fe-crate
</file>

<file path="tsconfig.json">
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "strict": true,
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}
</file>

<file path="vite.config.ts">
import path from 'path';

import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import eslint from 'vite-plugin-eslint';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss(), eslint()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    host: true,
  },
});
</file>

</files>