diff --git a/.gitignore b/.gitignore
index c2065bc..54b6590 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,3 +35,16 @@ out/
 
 ### VS Code ###
 .vscode/
+
+### db ###
+*.mv.db
+*.trace.db
+*.sql
+
+### env ###
+/backend/.env.properties
+# env files (all environments)
+.env
+backend/.env.properties
+*.env
+.env.*
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9b90498
--- /dev/null
+++ b/README.md
@@ -0,0 +1,308 @@
+# 🧶 Knitly - Online Knitting Pattern & Community Platform
+
+> 취미로 뜨개질을 즐기는 사람들이 자유롭게 도안을 제작하고 판매하며,
+> 서로의 창작물을 공유할 수 있는 커뮤니티 기반 플랫폼입니다.
+> 단순한 도안 판매를 넘어, 제작자와 소비자가 함께 성장하는 창작 생태계를 지향합니다.
+---
+## ✨ 프로젝트 개요
+
+* **프로젝트명:** Knitly
+* **주제:** 뜨개질 도안 판매 및 커뮤니티 서비스
+* **주제 선정 이유:**
+  “취미로 뜨개질을 하는 사람들이 자유롭게 도안을 제작하고 공유할 수 있는 플랫폼이 있으면 좋겠다는 아이디어에서 출발하였습니다.”
+* **개발 목표:**
+
+  * 캐싱과 락을 통한 **성능 향상 및 데이터 일관성 확보**
+  * 서비스 간 **데이터 흐름 및 비동기 처리 구현**
+  * **Redis 기반**의 인기순 조회, 동시성 제어, 찜 기능 관리
+  * **외부 API 연동** (토스페이먼츠, OAuth 2.0, PDF 변환 등)
+  * **예외 처리 강화 및 테스트 코드 검증**
+  * 전체 서비스의 **안정성 및 유지보수성 확보**
+
+---
+
+## 💻 기술적 특징
+
+| 분류                 | 기술 스택                                                   |
+| ------------------ | ------------------------------------------------------- |
+| **Backend**        | Spring Boot 3.5.x, Java 17, JPA(Hibernate), MySQL       |
+| **Infra**          | AWS EC2, Docker, Redis, Nginx                           |
+| **API**            | OAuth 2.0 (Google Login), Toss Payments API, Swagger UI |
+| **DevOps**         | GitHub Actions (CI/CD), Docker Compose                  |
+| **Test & Monitor** | JUnit5, MockMvc, Prometheus, Jmeter, NGrinder         |
+| **Tooling**        | IntelliJ, Postman, DBeaver, Slack, Notion               |
+
+<img width="500" height="600" alt="아키텍처 drawio" src="https://github.com/user-attachments/assets/15f29ed1-f7f1-4ad3-8b0f-ef4a361c8959" />
+
+---
+
+## 🧩 주요 기능 요약
+
+| 구분             | 기능                                           |
+| -------------- | -------------------------------------------- |
+| **회원가입 / 로그인** | 구글 OAuth 2.0 로그인, JWT 기반 인증/인가               |
+| **도안 제작**      | 10x10 격자(Grid) 기반 UI에서 도안 제작 → PDF 변환 저장     |
+| **상품 판매**      | 제작한 도안 또는 PDF 업로드 / 무료·한정 판매 지원              |
+| **상품 구매**      | Queue 기반 이메일 자동 발송 / Redis 락으로 재고 관리         |
+| **상품 조회**      | Redis ZSet으로 인기순 정렬 / 카테고리별·가격순·최신순          |
+| **찜 및 리뷰**     | Redis 찜 카운트 / Rabbit Queue 기반 DB 동기화 / 리뷰 작성 |
+| **커뮤니티**       | 게시글 및 댓글 CRUD / 소프트 딜리트 기반 관리                |
+| **마이페이지**      | 구매내역, 찜목록, 이벤트 참여내역, 구독 관리                   |
+| **결제**         | Toss Payments API 연동 / 모의결제 지원               |
+| **인증/인가**      | JWT 기반 인증 필터 / 조회 외 모든 API 토큰 검증             |
+---
+
+# 팀원
+|[김예진](https://github.com/dpwls8984)|[김시현](https://github.com/SiHejt)|[나웅철](https://github.com/No-366)|[부종우](https://github.com/Boojw)|[정혜연](https://github.com/hznnoy)|
+|:-:|:-:|:-:|:-:|:-:|
+|<img width="150" height="150" alt="image" src="https://github.com/user-attachments/assets/7686f2dd-8ca1-47d5-be94-79ac13d508b4" />|<img width="150" height="150" alt="image" src="https://github.com/user-attachments/assets/0ed8ffdd-5a65-4e91-9ec0-568d8afad469" />|<img width="150" height="150" alt="image" src="https://github.com/user-attachments/assets/958906b3-1bdd-4546-bf1a-4932d7660bfd" />|<img width="150" height="420" alt="150" src="https://github.com/user-attachments/assets/d37491fa-1b9e-4754-896e-bb3c5794b665" />|<img width="150" height="150" alt="image" src="https://github.com/user-attachments/assets/061156b1-634c-416a-b32d-d8b9e9cd9de6" />|
+|BE, FE|BE, FE|BE, FE|BE, FE|BE, FE|
+
+
+
+## 🛠️ 역할 분담
+
+| 이름   | 담당 기능 |
+|--------|-----------|
+| **김예진** | - 상품 구매(Redis, 분산 락)<br>- 상품 판매 |
+| **김시현** | - 상품 리뷰<br>- 상품 찜(Redis & RabbitMQ) |
+| **나웅철** | - Google 소셜 로그인<br>- JWT 인증<br>- 판매자 페이지 |
+| **부종우** | - 커뮤니티 글<br>- 커뮤니티 댓글<br>- 마이페이지 조회(작성 글/댓글) |
+| **정혜연** | - 도안 생성 + PDF 저장<br>- 도안 조회<br>- 상품 조회(Redis ZSet)<br>- 상품 결제(토스 페이먼츠 연동)|
+---
+
+# 🧩 기능 정의서 (Feature Definition)
+
+## 🧑‍💻 회원가입 / 로그인
+
+- **소셜 로그인 지원**
+    - 구글 OAuth 2.0 기반 로그인
+    - OAuth 인증 완료 시 프로젝트 내로 리다이렉트
+- **회원 정보 수정**
+    - 닉네임 / 프로필 이미지 수정 기능 ❌ (비활성)
+- **회원 탈퇴 / 재가입**
+    - 회원정보 테이블에 `status` 칼럼 추가하여 상태 관리
+    - 탈퇴 시 소셜 계정 연결 끊기 로직 포함
+
+---
+
+## 🎨 도안 제작
+
+- 10X10 격자에 기호를 삽입해 도안을 만들고 pdf 파일로 저장
+- **프론트엔드**
+    - 격자(Grid) UI 기반 도안 제작 화면
+    - 사용자의 입력을 `gridData(JSON)` 형태로 백엔드에 전송
+- **백엔드**
+    - 수신한 `gridData`를 기반으로 PDF 파일 생성 및 저장
+
+---
+
+## 🛍️ 상품 판매
+
+- **판매 대상**
+    - 사용자가 직접 제작한 도안 또는 일반 PDF 업로드 가능
+- **상품 형태**
+    - 유료/무료 도안 + 상시/한정 수량 선택해 도안 상품 판매 지원
+- **카테고리 분류**
+    - 상의 / 하의 / 아우터 / 가방 / 기타 / 무료 / 한정
+
+---
+
+## 💸 상품 구매
+
+- **구매 프로세스**
+    - 사용자는 도안을 구매하면 이메일로 PDF 자동 발송
+    - 이메일은 소셜 로그인 계정으로 발송됨
+- **비동기 처리**
+    - Kafka 대신 **Queue 구조** 사용
+    - 큐에 `(사용자 계정, 도안 PDF)` 정보 저장 후 자동 이메일 전송
+- **재고 관리**
+    - 한정 수량 도안은 **Redis Lock + Queue** 기반 동시성 제어
+
+---
+
+## 🔍 상품 조회
+
+- **정렬 기준**
+    - 인기순 (Redis ZSet으로 구매수 기반 정렬)
+    - 최신순, 가격순 정렬 지원
+    - 메인페이지에서 인기 top5 상품 조회
+- **페이징 처리**
+    - Spring 서버사이드 렌더링 기반 `Paging` 처리
+- **필터링**
+    - 카테고리별 / 무료 / 한정 도안 조회 가능
+
+---
+
+## 🤎 **상품 찜 & 리뷰**
+
+- Redis를 이용한 실시간 찜 카운트
+- Rabbit 큐를 활용하여 10분마다 DB에 동기화
+- 상품별 리뷰 작성 및 확인 가능
+
+---
+
+## 💬 커뮤니티
+
+- **게시판**
+    - 단일 게시판 구조
+- **게시글 기능**
+    - 글 등록 / 수정 / 삭제
+- **댓글 기능**
+    - 댓글 등록 / 삭제
+
+---
+
+## 🙋 마이페이지
+
+- 찜, 구매내역, 이벤트 참여내역, 구독 관리
+- 마이페이지 작성글/댓글 확인
+
+---
+
+## 🧵 판매자 개인 페이지
+
+- **판매자 전용 페이지**
+    - 판매중인 도안 목록 및 환영 문구 표시
+- **구독 연결**
+    - 판매자와 구독 기능 연계 (판매자별 구독 관리)
+
+---
+
+## 🎁 선착순 이벤트 (선택사항)
+
+- **이벤트 생성**
+    - 운영진이 직접 생성 (한정수량 / 무료 등)
+- **재고 관리**
+    - 한정수량 이벤트는 Redis Lock 사용
+    - 필요 시 Queue 병행 사용
+
+---
+
+## 📬 구독 기능 (선택사항)
+
+- 판매자를 구독한 사용자는 한 달간 해당 판매자의 모든 도안 다운로드 가능
+
+---
+
+## 💳 결제 기능
+
+- 토스 페이먼츠 API와 연동하여 결제 가능
+
+---
+
+## 🔐 인증 / 인가
+
+- **JWT 기반 인증 적용**
+    - 조회(READ) API를 제외한 모든 Controller에 토큰 검증 로직 필수
+
+---
+
+✅ **정리 요약**
+
+- 기술 키워드: `Spring Boot`, `Redis`, `JWT`, `Queue`, `H2`, `MySQL`, `Swagger`, `OAuth 2.0`, `Docker`
+- 주요 비동기 처리: **Queue (Kafka 대체)**
+- 주요 동시성 제어: **Redis Lock (Lettuce 기반)**
+- 데이터 전달 형식: **JSON (gridData, API 응답)**
+
+```mermaid
+flowchart LR
+  A[비회원]
+  B1[소셜 로그인 - 구글 OAuth 2.0]
+  B2[회원가입]
+  B3[탈퇴 및 재가입]
+
+  A --> B1
+  B1 --> B2
+  B1 --> B3
+
+  D[도안 제작]
+  D3[PDF 파일 생성·저장]
+
+  B2 --> D
+  D --> D3
+
+  E[상품]
+  E1[상품 판매 - 유료·무료 / 상시·한정]
+  E2[상품 구매 - 이메일 발송 / 재고관리]
+  E3[상품 조회 - 정렬]
+  E4[상품 찜·리뷰]
+
+  B2 --> E
+  E --> E1
+  E --> E2
+  E --> E3
+  E --> E4
+  
+  F[커뮤니티]
+  F1[글 작성/댓글 작성]
+
+	B2 --> F
+	F --> F1
+
+  G[마이페이지]
+  G1[구매내역 확인]
+  G2[리뷰/찜 확인]
+  G3[판매자 스토어]
+  G4[내 도안 목록]
+
+  B2 --> G
+  G --> G1
+  G --> G2
+  G --> G3
+  G --> G4
+  
+  K[결제 기능]
+  K1[토스 페이먼츠 API 연동]
+  K2[결제 완료 후 이메일 발송]
+
+  B2 --> K
+  K --> K1
+  K1 --> K2
+```
+---
+
+## 📃 커밋 컨벤션 & 협업 규칙
+### GitHub Flow(main/feature + develop)
+> 이슈 생성 → 브랜치 생성 → 구현 → Commit & Push → PR 생성 → 코드 리뷰 → develop에 Merge
+
+- `main`: 배포용 안정 브랜치
+- `dev`: 기능 통합 브랜치
+- `feature/{domain}`: 기능 단위 작업 브랜치
+- `hotfix`: 오류 해결 브랜치
+- `publishing`: AWS 배포용 브랜치
+  
+### 커밋 컨벤션
+
+|유형 | 설명|
+|---|---|
+|init|초기설정|
+|feat| 새로운 기능|
+|fix| 버그 수정|
+|docs|문서 변경(README 등)|
+|style| 포맷/스타일(기능 변경 없음)|
+|refactor| 리팩토링(동작 변경 없음)|
+|test| 테스트|
+|chore| 빌드/설정/의존성|
+|remove| 파일/폴더 삭제|
+|rename| 파일/폴더명 변경|
+
+### 커밋 고유 번호
+- 소셜로그인 100
+- 커뮤니티 200
+- 상품 300
+    - 주문 301
+    - 판매 302
+    - 리뷰 303
+    - 찜 등록/취소 304
+    - 목록 조회 305
+    - 결제 306
+- 마이페이지 400
+    - 판매자 페이지 401
+    - 조회 402
+    - 찜 조회 403
+- 도안 500
+    - 생성 501
+    - 조회 / 삭제 502
+- 이벤트 600
+
diff --git a/build.gradle.kts b/backend/build.gradle.kts
similarity index 52%
rename from build.gradle.kts
rename to backend/build.gradle.kts
index 979e961..f60ccd7 100644
--- a/build.gradle.kts
+++ b/backend/build.gradle.kts
@@ -26,9 +26,13 @@ repositories {
 
 dependencies {
     implementation("org.springframework.boot:spring-boot-starter-data-redis")
+    implementation ("org.redisson:redisson-spring-boot-starter:3.27.2") // Redisson 라이브러리
     implementation("org.springframework.boot:spring-boot-starter-security")
     implementation("org.springframework.boot:spring-boot-starter-validation")
     implementation("org.springframework.boot:spring-boot-starter-web")
+    implementation("org.springframework.boot:spring-boot-starter-data-jpa")
+    implementation("org.springframework.boot:spring-boot-starter-oauth2-client")
+    implementation("org.springframework.boot:spring-boot-starter-amqp")
     compileOnly("org.projectlombok:lombok")
     developmentOnly("org.springframework.boot:spring-boot-devtools")
     runtimeOnly("com.h2database:h2")
@@ -37,6 +41,24 @@ dependencies {
     testImplementation("org.springframework.boot:spring-boot-starter-test")
     testImplementation("org.springframework.security:spring-security-test")
     testRuntimeOnly("org.junit.platform:junit-platform-launcher")
+    implementation("org.apache.pdfbox:pdfbox:2.0.29") // PDF 변환 라이브러리
+    implementation("commons-codec:commons-codec:1.16.0")
+    implementation("org.springframework.boot:spring-boot-starter-mail")   // Spring Email
+
+    // JWT 라이브러리 (필수)
+    implementation("io.jsonwebtoken:jjwt-api:0.12.5")
+    runtimeOnly("io.jsonwebtoken:jjwt-impl:0.12.5")
+    runtimeOnly("io.jsonwebtoken:jjwt-jackson:0.12.5")
+
+    implementation("org.apache.pdfbox:pdfbox:2.0.29") // PDF 변환 라이브러리
+    implementation("commons-codec:commons-codec:1.16.0")
+
+    // Swagger/OpenAPI
+    // SpringDoc OpenAPI (Swagger 3) - WebMVC 및 Swagger UI 포함
+    implementation("org.springdoc:springdoc-openapi-starter-webmvc-ui:2.8.11")
+
+    implementation("com.fasterxml.jackson.core:jackson-databind")
+
 }
 
 tasks.withType<Test> {
diff --git a/backend/docker-compose.yml b/backend/docker-compose.yml
new file mode 100644
index 0000000..cce1629
--- /dev/null
+++ b/backend/docker-compose.yml
@@ -0,0 +1,37 @@
+services:
+  mysql:
+    image: mysql:8.0
+    container_name: knitly_db-mysql
+    environment:
+      MYSQL_ROOT_PASSWORD: ${DB_PW}
+      MYSQL_DATABASE: knitly_db
+    ports:
+      - "3306:3306"
+    command: --default-authentication-plugin=mysql_native_password
+    volumes:
+      - mysql_data:/var/lib/mysql
+
+  redis:
+    image: redis:latest
+    container_name: knitly_redis
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis_data:/data
+
+  rabbitmq:
+    image: rabbitmq:3-management
+    container_name: knitly_rabbitmq
+    ports:
+      - "5672:5672"
+      - "15672:15672"
+    environment:
+      RABBITMQ_DEFAULT_USER: guest
+      RABBITMQ_DEFAULT_PASS: guest
+    volumes:
+      - rabbitmq_data:/var/lib/rabbitmq
+
+volumes:
+  mysql_data:
+  redis_data:
+  rabbitmq_data:
diff --git a/gradle/wrapper/gradle-wrapper.jar b/backend/gradle/wrapper/gradle-wrapper.jar
similarity index 100%
rename from gradle/wrapper/gradle-wrapper.jar
rename to backend/gradle/wrapper/gradle-wrapper.jar
diff --git a/gradle/wrapper/gradle-wrapper.properties b/backend/gradle/wrapper/gradle-wrapper.properties
similarity index 100%
rename from gradle/wrapper/gradle-wrapper.properties
rename to backend/gradle/wrapper/gradle-wrapper.properties
diff --git a/gradlew b/backend/gradlew
similarity index 100%
rename from gradlew
rename to backend/gradlew
diff --git a/gradlew.bat b/backend/gradlew.bat
similarity index 100%
rename from gradlew.bat
rename to backend/gradlew.bat
diff --git a/settings.gradle.kts b/backend/settings.gradle.kts
similarity index 100%
rename from settings.gradle.kts
rename to backend/settings.gradle.kts
diff --git a/backend/src/main/java/com/mysite/knitly/KnitlyApplication.java b/backend/src/main/java/com/mysite/knitly/KnitlyApplication.java
new file mode 100644
index 0000000..1336e86
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/KnitlyApplication.java
@@ -0,0 +1,20 @@
+package com.mysite.knitly;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.boot.context.properties.ConfigurationPropertiesScan;
+import org.springframework.data.jpa.repository.config.EnableJpaAuditing;
+
+@SpringBootApplication
+@EnableJpaAuditing
+// @ConfigurationPropertiesScan 역할 : @ConfigurationProperties가 붙은 모든 클래스를 자동으로 스캔하여
+// Spring IoC 컨테이너의 빈(Bean)으로 등록하고,
+// 외부 설정 파일(properties 또는 YAML)의 값과 바인딩하도록 활성화
+@ConfigurationPropertiesScan
+public class KnitlyApplication {
+
+    public static void main(String[] args) {
+        SpringApplication.run(KnitlyApplication.class, args);
+    }
+
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/comment/controller/CommentController.java b/backend/src/main/java/com/mysite/knitly/domain/community/comment/controller/CommentController.java
new file mode 100644
index 0000000..0bcf58a
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/comment/controller/CommentController.java
@@ -0,0 +1,85 @@
+package com.mysite.knitly.domain.community.comment.controller;
+
+import com.mysite.knitly.domain.community.comment.dto.CommentCreateRequest;
+import com.mysite.knitly.domain.community.comment.dto.CommentResponse;
+import com.mysite.knitly.domain.community.comment.dto.CommentTreeResponse;
+import com.mysite.knitly.domain.community.comment.dto.CommentUpdateRequest;
+import com.mysite.knitly.domain.community.comment.service.CommentService;
+import com.mysite.knitly.domain.mypage.dto.PageResponse;
+import jakarta.validation.Valid;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+import com.mysite.knitly.domain.user.entity.User;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.security.access.prepost.PreAuthorize;
+import java.net.URI;
+
+@RestController
+@RequestMapping("/community")
+@RequiredArgsConstructor
+public class CommentController {
+
+    private final CommentService commentService;
+
+    // 댓글 목록
+    @GetMapping("/posts/{postId}/comments")
+    public ResponseEntity<PageResponse<CommentTreeResponse>> getComments(
+            @PathVariable Long postId,
+            @RequestParam(defaultValue = "asc") String sort,
+            @RequestParam(defaultValue = "0") int page,
+            @RequestParam(defaultValue = "10") int size,
+            @AuthenticationPrincipal User user
+    ) {
+        Page<CommentTreeResponse> result = commentService.getComments(postId, sort, page, size, user);
+        return ResponseEntity.ok(PageResponse.of(result));
+    }
+
+    // 댓글 개수
+    @GetMapping("/posts/{postId}/comments/count")
+    public ResponseEntity<Long> count(@PathVariable Long postId) {
+        return ResponseEntity.ok(commentService.count(postId));
+    }
+
+    // 댓글 작성 (parentId 있으면 대댓글)
+    @PostMapping("/posts/{postId}/comments")
+    @PreAuthorize("isAuthenticated()")
+    public ResponseEntity<CommentResponse> create(
+            @PathVariable Long postId,
+            @AuthenticationPrincipal User user,
+            @Valid @RequestBody CommentCreateRequest request
+    ) {
+        if (!postId.equals(request.postId())) {
+            return ResponseEntity.badRequest().build();
+        }
+        CommentResponse resp = commentService.create(request, user);
+        // 리소스 구조 일관성: /community/posts/{postId}/comments/{commentId}
+        return ResponseEntity
+                .created(URI.create(String.format("/community/posts/%d/comments/%d", postId, resp.id())))
+                .body(resp);
+    }
+
+    // 댓글 수정
+    @PatchMapping("/comments/{commentId}")
+    @PreAuthorize("isAuthenticated()")
+    public ResponseEntity<Void> update(
+            @PathVariable Long commentId,
+            @Valid @RequestBody CommentUpdateRequest request,
+            @AuthenticationPrincipal User user
+    ) {
+        commentService.update(commentId, request, user);
+        return ResponseEntity.noContent().build();
+    }
+
+    // 댓글 삭제
+    @DeleteMapping("/comments/{commentId}")
+    @PreAuthorize("isAuthenticated()")
+    public ResponseEntity<Void> delete(
+            @PathVariable Long commentId,
+            @AuthenticationPrincipal User user
+    ) {
+        commentService.delete(commentId, user);
+        return ResponseEntity.noContent().build();
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentCreateRequest.java b/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentCreateRequest.java
new file mode 100644
index 0000000..628e300
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentCreateRequest.java
@@ -0,0 +1,19 @@
+package com.mysite.knitly.domain.community.comment.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.NotNull;
+import jakarta.validation.constraints.Size;
+import jakarta.validation.constraints.Positive;
+
+public record CommentCreateRequest(
+
+        @NotNull(message = "게시글 ID는 필수입니다.")
+        Long postId,
+
+        @Positive(message = "parentId는 1 이상의 값이어야 합니다.")
+        Long parentId,
+
+        @NotBlank(message = "댓글 내용은 필수입니다.")
+        @Size(min = 1, max = 300, message = "댓글은 1자 이상 300자 이하로 입력해 주세요.")
+        String content
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentResponse.java b/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentResponse.java
new file mode 100644
index 0000000..2c97d25
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentResponse.java
@@ -0,0 +1,12 @@
+package com.mysite.knitly.domain.community.comment.dto;
+
+import java.time.LocalDateTime;
+
+public record CommentResponse(
+        Long id,
+        String content,
+        Long authorId,
+        String authorDisplay,
+        LocalDateTime createdAt,
+        boolean mine
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentTreeResponse.java b/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentTreeResponse.java
new file mode 100644
index 0000000..bafcea1
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentTreeResponse.java
@@ -0,0 +1,16 @@
+package com.mysite.knitly.domain.community.comment.dto;
+
+import java.time.LocalDateTime;
+import java.util.List;
+
+        //  트리 응답 구조
+        public record CommentTreeResponse(
+                Long id,
+                String content,
+                Long authorId,
+                String authorDisplay,
+                LocalDateTime createdAt,
+                boolean mine,
+                Long parentId,
+                List<CommentTreeResponse> children
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentUpdateRequest.java b/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentUpdateRequest.java
new file mode 100644
index 0000000..d4bfe59
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/comment/dto/CommentUpdateRequest.java
@@ -0,0 +1,11 @@
+package com.mysite.knitly.domain.community.comment.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.Size;
+
+public record CommentUpdateRequest(
+
+        @NotBlank(message = "댓글 내용은 필수입니다.")
+        @Size(min = 1, max = 300, message = "댓글은 1자 이상 300자 이하로 입력해 주세요.")
+        String content
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/comment/entity/Comment.java b/backend/src/main/java/com/mysite/knitly/domain/community/comment/entity/Comment.java
new file mode 100644
index 0000000..febf396
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/comment/entity/Comment.java
@@ -0,0 +1,63 @@
+package com.mysite.knitly.domain.community.comment.entity;
+
+import com.mysite.knitly.domain.community.post.entity.Post;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.global.jpa.BaseTimeEntity;
+import jakarta.persistence.*;
+import lombok.*;
+import org.hibernate.annotations.Where;
+import java.util.ArrayList;
+import java.util.List;
+
+@Getter
+@NoArgsConstructor(access = AccessLevel.PROTECTED)
+@AllArgsConstructor
+@Builder
+@Entity
+@Table(name = "comments")
+@Where(clause = "is_deleted = false")
+public class Comment extends BaseTimeEntity {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "comment_id")
+    private Long id;
+
+    @Lob
+    @Column(nullable = false)
+    private String content;
+
+    @ManyToOne(fetch = FetchType.LAZY, optional = false)
+    @JoinColumn(name = "user_id", nullable = false)
+    private User author;
+
+    @ManyToOne(fetch = FetchType.LAZY, optional = false)
+    @JoinColumn(name = "post_id", nullable = false)
+    private Post post;
+
+    // 대댓글, 자기참조
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "parent_id")
+    private Comment parent;
+
+    @OneToMany(mappedBy = "parent", cascade = CascadeType.ALL, orphanRemoval = true)
+    @OrderBy("createdAt ASC")
+    @Builder.Default
+    private List<Comment> children = new ArrayList<>();
+
+    @Builder.Default
+    @Column(name = "is_deleted", nullable = false)
+    private boolean deleted = false;
+
+    public void setPost(Post post) { this.post = post; }
+    public void setParent(Comment parent) { this.parent = parent; }
+    public boolean isRoot() { return this.parent == null; }
+
+    public void softDelete() { this.deleted = true; }
+
+    public void update(String newContent) { this.content = newContent; }
+
+    public boolean isAuthor(User user) {
+        return user != null && author != null && author.getUserId().equals(user.getUserId());
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/comment/repository/CommentRepository.java b/backend/src/main/java/com/mysite/knitly/domain/community/comment/repository/CommentRepository.java
new file mode 100644
index 0000000..393f1f8
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/comment/repository/CommentRepository.java
@@ -0,0 +1,53 @@
+package com.mysite.knitly.domain.community.comment.repository;
+
+import com.mysite.knitly.domain.community.comment.entity.Comment;
+import com.mysite.knitly.domain.community.post.entity.Post;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.jpa.repository.*;
+import org.springframework.data.repository.query.Param;
+
+import java.util.List;
+import java.util.Collection;
+
+
+public interface CommentRepository extends JpaRepository<Comment, Long> {
+
+    List<Comment> findByPost(Post post);
+
+    // 정렬（등록순,최신순)
+    @EntityGraph(attributePaths = "author")
+    Page<Comment> findByPostAndDeletedFalseOrderByCreatedAtAsc(Post post, Pageable pageable);
+    @EntityGraph(attributePaths = "author")
+    Page<Comment> findByPostAndDeletedFalseOrderByCreatedAtDesc(Post post, Pageable pageable);
+
+    // 댓글 수
+    long countByPostIdAndDeletedFalse(Long postId);
+
+    // 루트 댓글
+    @EntityGraph(attributePaths = "author")
+    Page<Comment> findByPostAndParentIsNullAndDeletedFalseOrderByCreatedAtAsc(Post post, Pageable pageable);
+    @EntityGraph(attributePaths = "author")
+    Page<Comment> findByPostAndParentIsNullAndDeletedFalseOrderByCreatedAtDesc(Post post, Pageable pageable);
+
+    // 자식 대댓글
+    @EntityGraph(attributePaths = "author")
+    List<Comment> findByParentIdAndDeletedFalseOrderByCreatedAtAsc(Long parentId);
+
+    // 자식 대댓글 배치 조회 (N+1 제거)
+    @EntityGraph(attributePaths = "author")
+    List<Comment> findByParentIdInAndDeletedFalseOrderByCreatedAtAsc(Collection<Long> parentIds);
+
+    // 마이페이지 댓글 조회 시
+    Page<Comment> findByAuthor_UserIdAndDeletedFalseAndContentContainingIgnoreCaseOrderByCreatedAtDesc(
+            Long userId, String content, Pageable pageable
+    );
+
+    @Query("SELECT c.author.userId " +
+            "FROM Comment c " +
+            "WHERE c.deleted = false AND c.post.id = :postId " +
+            "GROUP BY c.author.userId " +
+            "ORDER BY MIN(c.createdAt) ASC")
+
+    List<Long> findAuthorOrderForPost(@Param("postId") Long postId);
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/comment/service/CommentService.java b/backend/src/main/java/com/mysite/knitly/domain/community/comment/service/CommentService.java
new file mode 100644
index 0000000..8faac14
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/comment/service/CommentService.java
@@ -0,0 +1,217 @@
+package com.mysite.knitly.domain.community.comment.service;
+
+import com.mysite.knitly.domain.community.comment.dto.CommentCreateRequest;
+import com.mysite.knitly.domain.community.comment.dto.CommentResponse;
+import com.mysite.knitly.domain.community.comment.dto.CommentTreeResponse;
+import com.mysite.knitly.domain.community.comment.dto.CommentUpdateRequest;
+import com.mysite.knitly.domain.community.comment.entity.Comment;
+import com.mysite.knitly.domain.community.comment.repository.CommentRepository;
+import com.mysite.knitly.domain.community.post.entity.Post;
+import com.mysite.knitly.domain.community.post.repository.PostRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+@Service
+@RequiredArgsConstructor
+@Transactional(readOnly = true)
+public class CommentService {
+
+    private final CommentRepository commentRepository;
+    private final PostRepository postRepository;
+
+    // 댓글 목록
+    public Page<CommentTreeResponse> getComments(Long postId, String sort, int page, int size, User currentUser) {
+        Post post = postRepository.findById(postId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.POST_NOT_FOUND));
+
+        Pageable pageable = PageRequest.of(page, size);
+
+        Page<Comment> roots = ("desc".equalsIgnoreCase(sort))
+                ? commentRepository.findByPostAndParentIsNullAndDeletedFalseOrderByCreatedAtDesc(post, pageable)
+                : commentRepository.findByPostAndParentIsNullAndDeletedFalseOrderByCreatedAtAsc(post, pageable);
+
+        Map<Long, Integer> authorNoMap = buildAuthorNoMap(postId);
+        // N+1 제거
+        List<Long> parentIds = roots.getContent().stream()
+                .map(Comment::getId)
+                .toList();
+        Map<Long, List<Comment>> childrenMap = parentIds.isEmpty()
+                ? Map.of()
+                : commentRepository.findByParentIdInAndDeletedFalseOrderByCreatedAtAsc(parentIds)
+                .stream()
+                .collect(Collectors.groupingBy(c -> c.getParent().getId()));
+
+        return roots.map(root ->
+                toTreeResponseWithGroupedChildren(root, currentUser, authorNoMap, childrenMap)
+        );
+
+    }
+
+    // 댓글 개수
+    public long count(Long postId) {
+        return commentRepository.countByPostIdAndDeletedFalse(postId);
+    }
+
+    // 댓글 작성
+    @Transactional
+    public CommentResponse create(CommentCreateRequest req, User currentUser) {
+        if (currentUser == null) {
+            throw new ServiceException(ErrorCode.COMMENT_UNAUTHORIZED);
+        }
+        Post post = postRepository.findById(req.postId())
+                .orElseThrow(() -> new ServiceException(ErrorCode.POST_NOT_FOUND));
+        // 인증 사용자 그대로 사용
+        User author = currentUser;
+
+        // parentId가 있으면 동일 게시글 소속인지 검증
+        Comment parent = null;
+        if (req.parentId() != null) {
+            parent = commentRepository.findById(req.parentId())
+                    .orElseThrow(() -> new ServiceException(ErrorCode.COMMENT_NOT_FOUND));
+            if (!parent.getPost().getId().equals(req.postId())) {
+                throw new ServiceException(ErrorCode.BAD_REQUEST);
+            }
+        }
+
+        // content trim & 공백만 입력 금지
+        String trimmed = req.content() == null ? null : req.content().trim();
+        if (trimmed == null || trimmed.isBlank()) {
+            throw new ServiceException(ErrorCode.BAD_REQUEST);
+        }
+
+        Comment saved = commentRepository.save(
+                Comment.builder()
+                        .post(post)
+                        .author(author)
+                        .content(trimmed)
+                        .parent(parent)
+                        .build()
+        );
+
+        Map<Long, Integer> authorNoMap = buildAuthorNoMap(req.postId());
+        return toFlatResponse(saved, currentUser, authorNoMap);
+    }
+
+    // 댓글 수정
+    @Transactional
+    public void update(Long commentId, CommentUpdateRequest req, User currentUser) {
+        if (currentUser == null) {
+            throw new ServiceException(ErrorCode.COMMENT_UNAUTHORIZED);
+        }
+        Comment c = commentRepository.findById(commentId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.COMMENT_NOT_FOUND));
+
+        if (c.isDeleted()) {
+            throw new ServiceException(ErrorCode.COMMENT_ALREADY_DELETED);
+        }
+        if (!c.isAuthor(currentUser)) {
+            throw new ServiceException(ErrorCode.COMMENT_UPDATE_FORBIDDEN);
+        }
+
+        // content trim & 공백만 입력 금지
+        String trimmed = req.content() == null ? null : req.content().trim();
+        if (trimmed == null || trimmed.isBlank()) {
+            throw new ServiceException(ErrorCode.BAD_REQUEST);
+        }
+        c.update(trimmed);
+    }
+
+    // 댓글 삭제
+    @Transactional
+    public void delete(Long commentId, User currentUser) {
+        if (currentUser == null) {
+            throw new ServiceException(ErrorCode.COMMENT_UNAUTHORIZED);
+        }
+        Comment c = commentRepository.findById(commentId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.COMMENT_NOT_FOUND));
+
+        if (c.isDeleted()) {
+            throw new ServiceException(ErrorCode.COMMENT_ALREADY_DELETED);
+        }
+        if (!c.isAuthor(currentUser)) {
+            throw new ServiceException(ErrorCode.COMMENT_DELETE_FORBIDDEN);
+        }
+        c.softDelete();
+    }
+
+    // 작성자 첫 댓글 시간 기준으로
+    private Map<Long, Integer> buildAuthorNoMap(Long postId) {
+        List<Long> order = commentRepository.findAuthorOrderForPost(postId);
+        Map<Long, Integer> map = new HashMap<>();
+        int n = 1;
+        for (Long uid : order) {
+            map.put(uid, n++);
+        }
+        return map;
+    }
+
+    // create 응답
+    private CommentResponse toFlatResponse(Comment c, User currentUser, Map<Long, Integer> authorNoMap) {
+        Long uid = (c.getAuthor() == null) ? null : c.getAuthor().getUserId();
+        int no = (uid != null && authorNoMap.containsKey(uid)) ? authorNoMap.get(uid) : 0;
+        String display = (no > 0) ? "익명의 털실 " + no : "익명의 털실";
+
+        boolean mine = c.isAuthor(currentUser);
+
+        return new CommentResponse(
+                c.getId(),
+                c.getContent(),
+                uid,
+                display,
+                c.getCreatedAt(),
+                mine
+        );
+    }
+    // 트리 응답 변환
+    private CommentTreeResponse toTreeResponseWithGroupedChildren(
+            Comment root,
+            User currentUser,
+            Map<Long, Integer> authorNoMap,
+            Map<Long, List<Comment>> childrenMap
+    ) {
+        List<Comment> children = childrenMap.getOrDefault(root.getId(), List.of());
+        return new CommentTreeResponse(
+                root.getId(),
+                root.getContent(),
+                root.getAuthor() == null ? null : root.getAuthor().getUserId(),
+                displayName(root, authorNoMap),
+                root.getCreatedAt(),
+                isMine(root, currentUser),
+                root.getParent() == null ? null : root.getParent().getId(),
+                children.stream()
+                        .map(ch -> new CommentTreeResponse(
+                                ch.getId(),
+                                ch.getContent(),
+                                ch.getAuthor() == null ? null : ch.getAuthor().getUserId(),
+                                displayName(ch, authorNoMap),
+                                ch.getCreatedAt(),
+                                isMine(ch, currentUser),
+                                ch.getParent() == null ? null : ch.getParent().getId(),
+                                List.of()
+                        ))
+                        .collect(Collectors.toList())
+        );
+    }
+
+    private boolean isMine(Comment c, User currentUser) {
+        return c.isAuthor(currentUser);
+    }
+
+    private String displayName(Comment c, Map<Long, Integer> authorNoMap) {
+        Long uid = (c.getAuthor() == null) ? null : c.getAuthor().getUserId();
+        int no = (uid != null && authorNoMap.containsKey(uid)) ? authorNoMap.get(uid) : 0;
+        return (no > 0) ? "익명의 털실 " + no : "익명의 털실";
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/post/controller/PostController.java b/backend/src/main/java/com/mysite/knitly/domain/community/post/controller/PostController.java
new file mode 100644
index 0000000..53fd7ee
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/post/controller/PostController.java
@@ -0,0 +1,73 @@
+package com.mysite.knitly.domain.community.post.controller;
+
+import com.mysite.knitly.domain.community.post.dto.PostCreateRequest;
+import com.mysite.knitly.domain.community.post.dto.PostListItemResponse;
+import com.mysite.knitly.domain.community.post.dto.PostResponse;
+import com.mysite.knitly.domain.community.post.dto.PostUpdateRequest;
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import com.mysite.knitly.domain.community.post.service.PostService;
+import com.mysite.knitly.domain.user.entity.User;
+import jakarta.validation.Valid;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.web.bind.annotation.*;
+
+@RestController
+@RequestMapping("/community/posts")
+@RequiredArgsConstructor
+public class PostController {
+
+    private final PostService postService;
+
+    @GetMapping
+    public ResponseEntity<Page<PostListItemResponse>> getPosts(
+            @RequestParam(required = false) PostCategory category,
+            @RequestParam(required = false) String query,
+            @RequestParam(defaultValue = "0") int page,
+            @RequestParam(defaultValue = "10") int size
+    ) {
+        return ResponseEntity.ok(postService.getPostList(category, query, page, size));
+    }
+
+    @GetMapping("/{postId}")
+    public ResponseEntity<PostResponse> getPost(
+            @AuthenticationPrincipal User user,
+            @PathVariable("postId") Long postId
+    ) {
+        return ResponseEntity.ok(postService.getPost(postId, user));
+    }
+
+    @PostMapping
+    @org.springframework.security.access.prepost.PreAuthorize("isAuthenticated()")
+    public ResponseEntity<PostResponse> create(
+            @Valid @RequestBody PostCreateRequest request
+            , @AuthenticationPrincipal User user
+
+    ) {
+        PostResponse res = postService.create(request, user);
+        return ResponseEntity.status(HttpStatus.CREATED).body(res);
+    }
+
+    @PutMapping("/{postId}")
+    @org.springframework.security.access.prepost.PreAuthorize("isAuthenticated()")
+    public ResponseEntity<PostResponse> update(
+            @PathVariable("postId") Long postId,
+            @Valid @RequestBody PostUpdateRequest request,
+            @AuthenticationPrincipal User user
+    ) {
+        return ResponseEntity.ok(postService.update(postId, request, user));
+    }
+
+    @DeleteMapping("/{postId}")
+    @org.springframework.security.access.prepost.PreAuthorize("isAuthenticated()")
+    public ResponseEntity<Void> delete(
+            @PathVariable Long postId,
+            @AuthenticationPrincipal User user
+    ) {
+        postService.delete(postId, user);
+        return ResponseEntity.noContent().build();
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostCreateRequest.java b/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostCreateRequest.java
new file mode 100644
index 0000000..d64d83b
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostCreateRequest.java
@@ -0,0 +1,21 @@
+package com.mysite.knitly.domain.community.post.dto;
+
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.NotNull;
+import jakarta.validation.constraints.Size;
+import java.util.List;
+
+public record PostCreateRequest(
+
+        @NotNull(message = "카테고리는 필수입니다.")
+        PostCategory category,
+
+        @NotBlank(message = "제목은 필수입니다.")
+        String title,
+
+        @NotBlank(message = "내용은 필수입니다.")
+        String content,
+
+        List<String> imageUrls
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostListItemResponse.java b/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostListItemResponse.java
new file mode 100644
index 0000000..8a00e86
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostListItemResponse.java
@@ -0,0 +1,16 @@
+package com.mysite.knitly.domain.community.post.dto;
+
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import java.time.LocalDateTime;
+
+public record PostListItemResponse(
+
+        Long id,
+        PostCategory category,
+        String title,
+        String excerpt,
+        String authorDisplay,
+        LocalDateTime createdAt,
+        Long commentCount,
+        String thumbnailUrl
+) {}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostListRowResponse.java b/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostListRowResponse.java
new file mode 100644
index 0000000..6527d39
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostListRowResponse.java
@@ -0,0 +1,15 @@
+package com.mysite.knitly.domain.community.post.dto;
+
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import java.time.LocalDateTime;
+
+public record PostListRowResponse(
+        Long id,
+        PostCategory category,
+        String title,
+        String excerpt,
+        Long authorId,
+        LocalDateTime createdAt,
+        Long commentCount,
+        String thumbnailUrl
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostResponse.java b/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostResponse.java
new file mode 100644
index 0000000..b0ba1ee
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostResponse.java
@@ -0,0 +1,20 @@
+package com.mysite.knitly.domain.community.post.dto;
+
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import java.time.LocalDateTime;
+import java.util.List;
+
+// 게시글 단건 응답 DTO
+public record PostResponse(
+    Long id,
+    PostCategory category,
+    String title,
+    String content,
+    List<String> imageUrls,
+    Long authorId,
+    String authorDisplay,
+    LocalDateTime createdAt,
+    LocalDateTime updatedAt,
+    Long commentCount,
+    boolean mine
+) {}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostUpdateRequest.java b/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostUpdateRequest.java
new file mode 100644
index 0000000..02a0436
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/post/dto/PostUpdateRequest.java
@@ -0,0 +1,22 @@
+package com.mysite.knitly.domain.community.post.dto;
+
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import jakarta.validation.constraints.*;
+
+import java.util.List;
+
+public record PostUpdateRequest(
+
+    @NotNull(message = "카테고리를 선택해 주세요.")
+    PostCategory category,
+
+    @NotBlank(message = "제목은 필수입니다.")
+    @Size(max = 100, message = "제목은 100자 이하로 입력해 주세요.")
+    String title,
+
+    @NotBlank(message = "내용은 필수입니다.")
+    String content,
+
+    @Size(max = 5, message = "이미지는 최대 5개까지 업로드할 수 있습니다.")
+    List<String> imageUrls
+) {}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/post/entity/Post.java b/backend/src/main/java/com/mysite/knitly/domain/community/post/entity/Post.java
new file mode 100644
index 0000000..a602788
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/post/entity/Post.java
@@ -0,0 +1,82 @@
+package com.mysite.knitly.domain.community.post.entity;
+
+import com.mysite.knitly.domain.community.comment.entity.Comment;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.global.jpa.BaseTimeEntity;
+import jakarta.persistence.*;
+import lombok.*;
+import org.hibernate.annotations.Where;
+import java.util.ArrayList;
+import java.util.List;
+
+@Getter
+@NoArgsConstructor(access = AccessLevel.PROTECTED)
+@AllArgsConstructor
+@Builder
+@Entity
+@Table(name = "posts")
+@Where(clause = "is_deleted = false")
+public class Post extends BaseTimeEntity {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "post_id")
+    private Long id;
+
+    @Column(nullable = false, length = 100)
+    private String title;
+
+    @Lob
+    @Column(nullable = false)
+    private String content;
+
+    // 다중 이미지 URL
+    @Builder.Default
+    @ElementCollection
+    @CollectionTable(name = "post_images", joinColumns = @JoinColumn(name = "post_id"))
+    @Column(name = "url", nullable = false, length = 512)
+    @OrderColumn(name = "sort_order")
+    private List<String> imageUrls = new ArrayList<>();
+
+    @Enumerated(EnumType.STRING)
+    @Column(name = "post_category", nullable = false, columnDefinition = "ENUM('FREE','QUESTION','TIP')")
+    private PostCategory category;
+
+    @ManyToOne(fetch = FetchType.LAZY, optional = false)
+    @JoinColumn(name = "user_id", nullable = false)
+    private User author;
+
+    @Builder.Default
+    @Column(name = "is_deleted", nullable = false)
+    private boolean deleted = false;
+
+    @Builder.Default
+    @OneToMany(mappedBy = "post", cascade = CascadeType.ALL, orphanRemoval = true)
+    private List<Comment> comments = new ArrayList<>();
+
+    public void addComment(Comment comment) {
+        comments.add(comment);
+        comment.setPost(this);
+    }
+
+    public void softDelete() { this.deleted = true; }
+
+    // 이미지 수정
+    public void update(String title, String content, PostCategory category) {
+        this.title = title;
+        this.content = content;
+        this.category = category;
+    }
+
+    // 이미지 교체
+    public void replaceImages(List<String> newUrls) {
+        this.imageUrls.clear();
+        if (newUrls != null) {
+            this.imageUrls.addAll(newUrls);
+        }
+    }
+
+        public boolean isAuthor(User user) {
+        return user != null && author != null && author.getUserId().equals(user.getUserId());
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/post/entity/PostCategory.java b/backend/src/main/java/com/mysite/knitly/domain/community/post/entity/PostCategory.java
new file mode 100644
index 0000000..37cb15d
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/post/entity/PostCategory.java
@@ -0,0 +1,6 @@
+package com.mysite.knitly.domain.community.post.entity;
+
+// 카테고리 드롭다운 자유, 질문, 팁
+public enum PostCategory {
+    FREE, QUESTION, TIP
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/post/repository/PostRepository.java b/backend/src/main/java/com/mysite/knitly/domain/community/post/repository/PostRepository.java
new file mode 100644
index 0000000..d4d9de4
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/post/repository/PostRepository.java
@@ -0,0 +1,59 @@
+package com.mysite.knitly.domain.community.post.repository;
+
+import com.mysite.knitly.domain.community.post.dto.PostListRowResponse;
+import com.mysite.knitly.domain.community.post.entity.Post;
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.jpa.repository.*;
+import org.springframework.data.repository.query.Param;
+import java.util.Collection;
+import java.util.List;
+
+public interface PostRepository extends JpaRepository<Post, Long> {
+
+    @EntityGraph(attributePaths = "author")
+    @Query(
+            "SELECT p " +
+                    "FROM Post p " +
+                    "WHERE (:category IS NULL OR p.category = :category) " +
+                    "  AND ( :query IS NULL OR :query = '' " +
+                    "        OR LOWER(p.title) LIKE LOWER(CONCAT('%', :query, '%')) " +
+                    "        OR p.content      LIKE CONCAT('%', :query, '%') ) " +
+                    "ORDER BY p.createdAt DESC"
+    )
+    Page<Post> findListRows(@Param("category") PostCategory category,
+                            @Param("query") String query,
+                            Pageable pageable);
+
+    @Query("SELECT COUNT(c.id) FROM Comment c WHERE c.post.id = :postId AND c.deleted = false")
+    long countCommentsByPostId(@Param("postId") Long postId);
+
+    // 댓글 수 일괄 조회 (N+1 문제 제거)
+    @Query("""
+            SELECT c.post.id, COUNT(c.id)
+            FROM Comment c
+            WHERE c.post.id IN :postIds AND c.deleted = false
+            GROUP BY c.post.id
+            """)
+              List<Object[]> countCommentsByPostIds(@Param("postIds") List<Long> postIds);
+
+    //내가 쓴 글 목록 + 검색
+    @Query("""
+            select p
+            from Post p
+            where p.author.userId = :uid
+             and (
+                :q is null or :q = ''
+                 or lower(p.title)   like lower(concat('%', :q, '%'))
+                 or lower(cast(p.content as string)) like lower(concat('%', :q, '%'))
+                  )
+            """)
+    Page<Post> findMyPosts(
+            @Param("uid") Long userId,
+            @Param("q") String query,
+            Pageable pageable
+    );
+
+    long deleteByIdInAndAuthor_UserId(Collection<Long> ids, Long userId);
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/community/post/service/PostService.java b/backend/src/main/java/com/mysite/knitly/domain/community/post/service/PostService.java
new file mode 100644
index 0000000..ec65db1
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/community/post/service/PostService.java
@@ -0,0 +1,191 @@
+package com.mysite.knitly.domain.community.post.service;
+
+import com.mysite.knitly.domain.community.post.dto.PostCreateRequest;
+import com.mysite.knitly.domain.community.post.dto.PostListItemResponse;
+import com.mysite.knitly.domain.community.post.dto.PostResponse;
+import com.mysite.knitly.domain.community.post.dto.PostUpdateRequest;
+import com.mysite.knitly.domain.community.post.entity.Post;
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import com.mysite.knitly.domain.community.post.repository.PostRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import com.mysite.knitly.global.util.Anonymizer;
+import com.mysite.knitly.global.util.ImageValidator;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.List;
+import java.util.Objects;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+// 상세 기능:  mine(현재 사용자 = 작성자)
+// 등록,수정 기능, 이미지 확장자 검증(png/jpg/jpeg) + 엔티티 저장/수정
+@Service
+@RequiredArgsConstructor
+@Transactional(readOnly = true)
+public class PostService {
+
+    private final PostRepository postRepository;
+
+    public Page<PostListItemResponse> getPostList(PostCategory category, String query, int page, int size) {
+        Pageable pageable = PageRequest.of(page, size);
+        Page<Post> posts = postRepository.findListRows(category, query, pageable);
+
+        // 댓글 수 일괄 조회로 N+1 제거
+        List<Long> ids = posts.getContent().stream().map(Post::getId).toList();
+        Map<Long, Long> countMap = postRepository.countCommentsByPostIds(ids).stream()
+                .collect(Collectors.toMap(r -> (Long) r[0], r -> (Long) r[1], Long::sum));
+
+        return posts.map(p -> {
+            String exRaw = p.getContent() == null ? "" : p.getContent();
+
+            // 공백/특수 공백 제거 후 요약 생성
+            String cleaned = exRaw.replaceAll("[\\s\\u00A0\\u3000]+", "");
+            String ex = cleaned.isEmpty()
+                    ? ""
+                    : (cleaned.length() > 10 ? cleaned.substring(0, 10) + "..." : cleaned);
+            long commentCount = countMap.getOrDefault(p.getId(), 0L);
+
+            String thumbnail = (p.getImageUrls() == null || p.getImageUrls().isEmpty())
+                    ? null : p.getImageUrls().get(0);
+
+            return new PostListItemResponse(
+                    p.getId(),
+                    p.getCategory(),
+                    p.getTitle(),
+                    ex,
+                    Anonymizer.yarn(p.getAuthor().getUserId()),
+                    p.getCreatedAt(),
+                    commentCount,
+                    thumbnail
+            );
+        });
+    }
+
+    public PostResponse getPost(Long id, User currentUserOrNull) {
+        Post p = postRepository.findById(id)
+                .orElseThrow(() -> new ServiceException(ErrorCode.POST_NOT_FOUND));
+
+        long commentCount = postRepository.countCommentsByPostId(id);
+
+        boolean mine = p.isAuthor(currentUserOrNull);
+
+        return new PostResponse(
+                p.getId(),
+                p.getCategory(),
+                p.getTitle(),
+                p.getContent(),
+                p.getImageUrls(),
+                p.getAuthor().getUserId(),
+                Anonymizer.yarn(p.getAuthor().getUserId()),
+                p.getCreatedAt(),
+                p.getUpdatedAt(),
+                commentCount,
+                mine
+        );
+    }
+
+    @Transactional
+    public PostResponse create(PostCreateRequest req, User currentUser) {
+        if (currentUser == null) {
+            throw new ServiceException(ErrorCode.POST_UNAUTHORIZED);
+        }
+        // 제목 길이(100자 초과)
+        if (req.title() != null && req.title().length() > 100) {
+            throw new ServiceException(ErrorCode.POST_TITLE_LENGTH_INVALID);
+        }
+
+        List<String> urls = normalizeUrls(req.imageUrls());
+        if (urls.size() > 5) {
+            throw new ServiceException(ErrorCode.POST_IMAGE_COUNT_EXCEEDED);
+        }
+        for (String u : urls) {
+            if (!ImageValidator.isAllowedImageUrl(u)) {
+                throw new ServiceException(ErrorCode.POST_IMAGE_EXTENSION_INVALID);
+            }
+        }
+
+        // 요청 authorId는 무시, 인증된 사용자 객체를 그대로 사용
+        User author = currentUser;
+
+        Post post = Post.builder()
+                .category(req.category())
+                .title(req.title())
+                .content(req.content())
+                .author(author)
+                .build();
+
+        post.replaceImages(urls);
+
+        Post saved = postRepository.save(post);
+        return getPost(saved.getId(), currentUser);
+    }
+
+    @Transactional
+    public PostResponse update(Long id, PostUpdateRequest req, User currentUser) {
+        if (currentUser == null) {
+            throw new ServiceException(ErrorCode.POST_UNAUTHORIZED);
+        }
+        // 제목 길이(100자 초과)
+        if (req.title() != null && req.title().length() > 100) {
+            throw new ServiceException(ErrorCode.POST_TITLE_LENGTH_INVALID);
+        }
+        Post p = postRepository.findById(id)
+                .orElseThrow(() -> new ServiceException(ErrorCode.POST_NOT_FOUND));
+
+        if (!p.isAuthor(currentUser)) {
+            throw new ServiceException(ErrorCode.POST_UPDATE_FORBIDDEN);
+        }
+
+        p.update(
+                req.title(),
+                req.content(),
+                req.category()
+        );
+
+        if (req.imageUrls() != null) {
+            List<String> urls = normalizeUrls(req.imageUrls());
+            if (urls.size() > 5) {
+                throw new ServiceException(ErrorCode.POST_IMAGE_COUNT_EXCEEDED);
+            }
+            for (String u : urls) {
+                if (!ImageValidator.isAllowedImageUrl(u)) {
+                    throw new ServiceException(ErrorCode.POST_IMAGE_EXTENSION_INVALID);
+                }
+            }
+            p.replaceImages(urls);
+        }
+
+        return getPost(p.getId(), currentUser);
+    }
+
+    @Transactional
+    public void delete(Long id, User currentUser) {
+        if (currentUser == null) {
+            throw new ServiceException(ErrorCode.POST_UNAUTHORIZED);
+        }
+        Post p = postRepository.findById(id)
+                .orElseThrow(() -> new ServiceException(ErrorCode.POST_NOT_FOUND));
+
+        if (!p.isAuthor(currentUser)) {
+            throw new ServiceException(ErrorCode.POST_DELETE_FORBIDDEN);
+        }
+
+        p.softDelete();
+    }
+
+    private List<String> normalizeUrls(List<String> raw) {
+        if (raw == null) return List.of();
+        return raw.stream()
+                .filter(Objects::nonNull)
+                .map(String::trim)
+                .filter(s -> !s.isEmpty())
+                .toList();
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/controller/DesignController.java b/backend/src/main/java/com/mysite/knitly/domain/design/controller/DesignController.java
new file mode 100644
index 0000000..f634ae1
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/controller/DesignController.java
@@ -0,0 +1,131 @@
+package com.mysite.knitly.domain.design.controller;
+
+import com.mysite.knitly.domain.design.dto.DesignListResponse;
+import com.mysite.knitly.domain.design.dto.DesignRequest;
+import com.mysite.knitly.domain.design.dto.DesignResponse;
+import com.mysite.knitly.domain.design.dto.DesignUploadRequest;
+import com.mysite.knitly.domain.design.entity.Design;
+import com.mysite.knitly.domain.design.repository.DesignRepository;
+import com.mysite.knitly.domain.design.service.DesignService;
+import com.mysite.knitly.domain.design.util.LocalFileStorage;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import jakarta.validation.Valid;
+import lombok.RequiredArgsConstructor;
+import org.springframework.core.io.Resource;
+import org.springframework.core.io.UrlResource;
+import org.springframework.http.ContentDisposition;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.io.IOException;
+import java.nio.charset.StandardCharsets;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.util.List;
+
+@RestController
+@RequiredArgsConstructor
+@RequestMapping("/designs")
+public class DesignController {
+    private final DesignService designService;
+    private final DesignRepository designRepository;
+    private final LocalFileStorage localFileStorage;
+
+    // 도안 생성
+    @PostMapping(consumes = MediaType.APPLICATION_JSON_VALUE, produces = MediaType.APPLICATION_JSON_VALUE)
+    public ResponseEntity<DesignResponse> createDesign(
+            @AuthenticationPrincipal User user,
+            @Valid @RequestBody DesignRequest request
+
+    ) {
+        DesignResponse response = designService.createDesign(user, request);
+
+        return ResponseEntity.ok(response);
+    }
+
+
+    //기존 PDF 업로드
+    @PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
+    public ResponseEntity<DesignResponse> uploadDesignPdf(
+            @AuthenticationPrincipal User user,
+            @RequestPart("file") MultipartFile file,
+            @RequestParam(required = false) String designName
+    ) {
+        DesignUploadRequest req = new DesignUploadRequest(designName, file);
+        return ResponseEntity.ok(designService.uploadPdfDesign(user, req));
+    }
+
+    // 도안 목록 조회
+    @GetMapping("/my")
+    public ResponseEntity<List<DesignListResponse>> getMyDesigns(
+            @AuthenticationPrincipal User user
+    ) {
+        List<DesignListResponse> designs = designService.getMyDesigns(user);
+        return ResponseEntity.ok(designs);
+    }
+
+    // 도안 삭제
+    @DeleteMapping("/{designId}")
+    public ResponseEntity<Void> deleteDesign(
+            @AuthenticationPrincipal User user,
+            @PathVariable Long designId){
+        designService.deleteDesign(user, designId);
+        return ResponseEntity.noContent().build();
+    }
+
+    // 판매 중지
+    @PatchMapping("/{designId}/stop")
+    public ResponseEntity<Void> stopDesignSale(
+            @AuthenticationPrincipal User user,
+            @PathVariable Long designId
+    ) {
+        designService.stopDesignSale(user, designId);
+        return ResponseEntity.noContent().build();
+    }
+
+    // 판매 재개
+    @PatchMapping("/{designId}/relist")
+    public ResponseEntity<Void> relistDesign(
+            @AuthenticationPrincipal User user,
+            @PathVariable Long designId
+    ) {
+        designService.relistDesign(user, designId);
+        return ResponseEntity.noContent().build();
+    }
+
+    @GetMapping("/{designId}/pdf")
+    public ResponseEntity<Resource> downloadDesignPdf(
+            @PathVariable Long designId
+    ) throws IOException {
+        Design design = designRepository.findById(designId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.DESIGN_NOT_FOUND));
+
+        // 파일 경로 가져오기
+        Path filePath = localFileStorage.toAbsolutePathFromUrl(design.getPdfUrl());
+
+        if (!Files.exists(filePath)) {
+            throw new ServiceException(ErrorCode.DESIGN_FILE_NOT_FOUND);
+        }
+
+        // 파일을 Resource로 변환
+        Resource resource = new UrlResource(filePath.toUri());
+
+        // Content-Disposition 헤더 설정 (브라우저에서 열기)
+        String contentDisposition = ContentDisposition
+                .inline()
+                .filename(design.getDesignName() + ".pdf", StandardCharsets.UTF_8)
+                .build()
+                .toString();
+
+        return ResponseEntity.ok()
+                .contentType(MediaType.APPLICATION_PDF)
+                .header(HttpHeaders.CONTENT_DISPOSITION, contentDisposition)
+                .body(resource);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignListResponse.java b/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignListResponse.java
new file mode 100644
index 0000000..9111f3f
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignListResponse.java
@@ -0,0 +1,24 @@
+package com.mysite.knitly.domain.design.dto;
+
+import com.mysite.knitly.domain.design.entity.Design;
+import com.mysite.knitly.domain.design.entity.DesignState;
+
+import java.time.LocalDateTime;
+
+public record DesignListResponse (
+        Long designId,
+        String designName,
+        String pdfUrl,
+        DesignState designState,
+        LocalDateTime createdAt
+){
+    public static DesignListResponse from(Design design) {
+        return new DesignListResponse(
+                design.getDesignId(),
+                design.getDesignName(),
+                design.getPdfUrl(),
+                design.getDesignState(),
+                design.getCreatedAt()
+        );
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignRequest.java b/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignRequest.java
new file mode 100644
index 0000000..d3f3136
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignRequest.java
@@ -0,0 +1,34 @@
+package com.mysite.knitly.domain.design.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.NotNull;
+import jakarta.validation.constraints.Size;
+
+import java.util.List;
+
+public record DesignRequest (
+
+    @NotBlank(message = "파일 이름은 필수 항목입니다.")
+    @Size(max = 30, message = "파일 이름은 30자를 초과할 수 없습니다.")
+    String designName,
+
+    @NotNull(message = "도안 데이터는 필수 항목입니다.")
+    @Size(min = 10, max = 10, message = "도안은 10x10 크기여야 합니다.")
+    List<@Size(min = 10, max = 10, message = "각 행은 10칸이어야 합니다.") List<String>> gridData,
+
+    @Size(max = 80, message = "파일 이름은 80자를 초과할 수 없습니다.")
+    String fileName // (선택) 파일 이름
+) {
+    // 유효성 검증 메서드 ( 10x10 크기인지 확인 )
+    public boolean isValidGridSize() {
+        if (gridData == null || gridData.size() != 10) {
+            return false;
+        }
+        for (List<String> row : gridData) {
+            if (row == null || row.size() != 10) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignResponse.java b/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignResponse.java
new file mode 100644
index 0000000..35b00a7
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignResponse.java
@@ -0,0 +1,25 @@
+package com.mysite.knitly.domain.design.dto;
+
+import com.mysite.knitly.domain.design.entity.Design;
+import com.mysite.knitly.domain.design.entity.DesignState;
+
+import java.time.LocalDateTime;
+
+public record DesignResponse (
+        Long designId,
+        String designName,
+        String pdfUrl,
+        DesignState designState,
+        LocalDateTime createdAt
+){
+    public static DesignResponse from(Design design){
+        return new DesignResponse(
+                design.getDesignId(),
+                design.getDesignName(),
+                design.getPdfUrl(),
+                design.getDesignState(),
+                design.getCreatedAt()
+        );
+    }
+
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignUploadRequest.java b/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignUploadRequest.java
new file mode 100644
index 0000000..60965a0
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/dto/DesignUploadRequest.java
@@ -0,0 +1,10 @@
+package com.mysite.knitly.domain.design.dto;
+
+import jakarta.validation.constraints.Size;
+import org.springframework.web.multipart.MultipartFile;
+
+public record DesignUploadRequest(
+        @Size(max = 30, message = "도안명은 30자를 초과할 수 없습니다.")
+        String designName,
+        MultipartFile pdfFile
+) {}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/entity/Design.java b/backend/src/main/java/com/mysite/knitly/domain/design/entity/Design.java
new file mode 100644
index 0000000..80c3b8b
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/entity/Design.java
@@ -0,0 +1,96 @@
+package com.mysite.knitly.domain.design.entity;
+
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import org.springframework.data.annotation.CreatedDate;
+import org.springframework.data.jpa.domain.support.AuditingEntityListener;
+
+import java.time.LocalDateTime;
+import java.util.UUID;
+
+@Entity
+@Getter
+@NoArgsConstructor
+@Table(name = "designs")
+@AllArgsConstructor
+@Builder
+@EntityListeners(AuditingEntityListener.class)
+public class Design {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long designId;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "user_id", nullable = false)
+    private User user;
+
+    @Column
+    private String pdfUrl;
+
+    @Enumerated(EnumType.STRING)
+    @Column(nullable = false)
+    private DesignState designState;
+
+    @Column(nullable = false, length = 30)
+    private String designName;
+
+    @Column(name = "grid_data", columnDefinition = "JSON", nullable = false)
+    private String gridData;
+
+    @CreatedDate
+    @Column(nullable = false)
+    private LocalDateTime createdAt;
+
+    // 삭제 가능 여부 확인 - BEFORE_SALE 상태인 경우에만 삭제 가능
+    public boolean isDeletable() {
+        return this.designState == DesignState.BEFORE_SALE;
+    }
+
+    // 도안 작성자 확인 - userId 비교
+    public boolean isOwnedBy(Long userId) {
+        return this.user.getUserId().equals(userId);
+    }
+
+    // 최초 판매 시작 메서드
+    // 오직 BEFORE_SALE 상태에서만 호출 가능
+    // 판매 전 -> 판매 중으로 변경
+    public void startSale() {
+        if (this.designState != DesignState.BEFORE_SALE) {
+            throw new ServiceException(ErrorCode.DESIGN_ALREADY_ON_SALE);
+        }
+        this.designState = DesignState.ON_SALE;
+    }
+
+    // 판매 중 -> 판매 중지 메서드
+    // 오직 ON_SALE 상태에서만 호출 가능
+    public void stopSale() {
+        if( this.designState != DesignState.ON_SALE) {
+            throw new ServiceException(ErrorCode.DESIGN_NOT_ON_SALE);
+        }
+        this.designState = DesignState.STOPPED;
+    }
+
+    // 판매 중지 -> 판매 재개 메서드
+    // 오직 STOPPED 상태에서만 호출 가능
+    public void relist() {
+        if (this.designState != DesignState.STOPPED) {
+            throw new ServiceException(ErrorCode.DESIGN_NOT_STOPPED);
+        }
+        this.designState = DesignState.ON_SALE;
+    }
+}
+
+
+//CREATE TABLE `designs` (
+//        `design_id`	BIGINT	NOT NULL	DEFAULT AUTO_INCREMENT,
+//        `pdf_url`	VARCHAR(255)	NULL,
+//	`design_state`	ENUM('ON_SALE', 'STOPPED', 'BEFORE_SALE')	NOT NULL	DEFAULT BEFORE_SALE,
+//	`design_name`	VARCHAR(30)	NOT NULL
+//);
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/entity/DesignState.java b/backend/src/main/java/com/mysite/knitly/domain/design/entity/DesignState.java
new file mode 100644
index 0000000..81ddb58
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/entity/DesignState.java
@@ -0,0 +1,5 @@
+package com.mysite.knitly.domain.design.entity;
+
+public enum DesignState {
+    ON_SALE, STOPPED, BEFORE_SALE // 판매중, 판매중지, 판매전
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/repository/DesignRepository.java b/backend/src/main/java/com/mysite/knitly/domain/design/repository/DesignRepository.java
new file mode 100644
index 0000000..3ba414e
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/repository/DesignRepository.java
@@ -0,0 +1,15 @@
+package com.mysite.knitly.domain.design.repository;
+
+import com.mysite.knitly.domain.design.entity.Design;
+import com.mysite.knitly.domain.user.entity.User;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Optional;
+
+@Repository
+public interface DesignRepository extends JpaRepository<Design,Long> {
+    List<Design> findByUser(User user);
+    Optional<Design> findByDesignId(Long designId);
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/service/DesignService.java b/backend/src/main/java/com/mysite/knitly/domain/design/service/DesignService.java
new file mode 100644
index 0000000..74b75eb
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/service/DesignService.java
@@ -0,0 +1,202 @@
+package com.mysite.knitly.domain.design.service;
+
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.mysite.knitly.domain.design.dto.DesignListResponse;
+import com.mysite.knitly.domain.design.dto.DesignRequest;
+import com.mysite.knitly.domain.design.dto.DesignResponse;
+import com.mysite.knitly.domain.design.dto.DesignUploadRequest;
+import com.mysite.knitly.domain.design.entity.Design;
+import com.mysite.knitly.domain.design.entity.DesignState;
+import com.mysite.knitly.domain.design.repository.DesignRepository;
+import com.mysite.knitly.domain.design.util.FileValidator;
+import com.mysite.knitly.domain.design.util.LocalFileStorage;
+import com.mysite.knitly.domain.design.util.PdfGenerator;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import com.mysite.knitly.global.util.FileNameUtils;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.io.IOException;
+import java.util.List;
+import java.util.stream.Collectors;
+
+@Service
+@Transactional
+@RequiredArgsConstructor
+@Slf4j
+public class DesignService {
+    private final DesignRepository designRepository;
+    private final PdfGenerator pdfGenerator;
+    private final LocalFileStorage localFileStorage;
+    private final ObjectMapper objectMapper;
+    private final FileValidator fileValidator;
+
+    // 도안 생성
+    @Transactional
+    public DesignResponse createDesign(User user, DesignRequest request) {
+        // gridData 입력 검증
+        if(!request.isValidGridSize()) throw new ServiceException(ErrorCode.DESIGN_INVALID_GRID_SIZE);
+
+        // PDF 생성
+        byte[] pdfBytes = pdfGenerator.generate(request.designName(), request.gridData());
+
+        // 파일명 정리
+        String base = (request.fileName() == null || request.fileName().isBlank())
+                ? request.designName()
+                : request.fileName();
+        String sanitized = FileNameUtils.sanitize(base);
+
+
+        // 로컬에 파일 저장
+        String pdfUrl = localFileStorage.savePdfFile(pdfBytes, sanitized);
+
+        // gridData를 JSON 문자열로 변환
+        String gridDataJson = convertGridDataToJson(request.gridData());
+
+        // 도안 엔티티 생성 및 저장
+        Design design = Design.builder()
+                .user(user)
+                .designName(request.designName())
+                .pdfUrl(pdfUrl)
+                .gridData(gridDataJson)
+                .designState(DesignState.BEFORE_SALE)
+                .build();
+
+        Design savedDesign = designRepository.save(design);
+
+        return DesignResponse.from(savedDesign);
+
+    }
+
+    // 기존 pdf 파일 업로드
+    public DesignResponse uploadPdfDesign(User user, DesignUploadRequest request){
+
+        MultipartFile pdfFile = request.pdfFile();
+        fileValidator.validatePdfFile(pdfFile);
+
+        byte[] pdfBytes;
+        try {
+            pdfBytes = pdfFile.getBytes();
+        } catch (IOException e) {
+            log.error("파일 읽기 실패: fileName={}", pdfFile.getOriginalFilename(), e);
+            throw new ServiceException(ErrorCode.DESIGN_FILE_SAVE_FAILED);
+        }
+
+        String base = (request.designName() == null || request.designName().isBlank())
+                ? defaultBaseName(pdfFile.getOriginalFilename())
+                : request.designName();
+        String sanitized = FileNameUtils.sanitize(base);
+
+        String pdfUrl = localFileStorage.savePdfFile(pdfBytes, sanitized);
+        String defaultGrid = "{}";
+        Design design = Design.builder()
+                .user(user)
+                .designName(sanitized)
+                .pdfUrl(pdfUrl)
+                .gridData(defaultGrid)
+                .designState(DesignState.BEFORE_SALE)
+                .build();
+
+        Design savedDesign = designRepository.save(design);
+
+        log.info("PDF 업로드 완료 - designId={}",  savedDesign.getDesignId());
+
+        return DesignResponse.from(savedDesign);
+    }
+
+    // 본인 도안 조회
+    @Transactional(readOnly = true)
+    public List<DesignListResponse> getMyDesigns (User user){
+        List<Design> designs = designRepository.findByUser(user);
+
+        return designs.stream()
+                .map(DesignListResponse::from)
+                .collect(Collectors.toList());
+    }
+
+
+    // 도안 삭제 - BEFORE_SALE 상태인 도안만 삭제 가능, ON_SALE 또는 STOPPED 상태인 도안은 삭제 불가
+    public void deleteDesign(User user, Long designId){
+        Design design = designRepository.findById(designId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.DESIGN_NOT_FOUND));
+
+        // 본인 도안인지 확인
+        Long userId = user.getUserId();
+        if(!design.isOwnedBy(userId)){
+            throw new ServiceException(ErrorCode.DESIGN_UNAUTHORIZED_DELETE);
+        }
+
+        if(!design.isDeletable()){
+            throw new ServiceException(ErrorCode.DESIGN_NOT_DELETABLE);
+        }
+
+        try {
+            localFileStorage.deleteFile(design.getPdfUrl());
+        } catch (Exception e) {
+            log.warn("파일 삭제 실패 (DB는 삭제 진행): pdfUrl={}", design.getPdfUrl(), e);
+            // 파일 삭제 실패해도 DB는 삭제 진행
+        }
+
+        designRepository.delete(design);
+    }
+
+
+    private String convertGridDataToJson(Object gridData) {
+        try {
+            return objectMapper.writeValueAsString(gridData);
+        } catch (JsonProcessingException e) {
+            throw new ServiceException(ErrorCode.DESIGN_INVALID_GRID_SIZE);
+        }
+    }
+
+    private String defaultBaseName(String original) {
+        if (original == null || original.isBlank()) return "design";
+        int i = original.lastIndexOf('.');
+        return i > 0 ? original.substring(0, i) : original;
+    }
+
+    // 판매 중지 - ON_SALE -> STOPPED
+    @Transactional
+    public void stopDesignSale(User user, Long designId) {
+        Design design = designRepository.findById(designId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.DESIGN_NOT_FOUND));
+
+        // 본인 도안인지 확인
+        if (!design.isOwnedBy(user.getUserId())) {
+            throw new ServiceException(ErrorCode.DESIGN_UNAUTHORIZED_DELETE);
+        }
+
+        // Design 엔티티의 stopSale() 메서드 호출
+        // ON_SALE 상태가 아니면 예외 발생
+        design.stopSale();
+
+        log.info("도안 판매 중지 완료 - designId={}, userId={}", designId, user.getUserId());
+    }
+
+    // 판매 재개 - STOPPED -> ON_SALE
+    @Transactional
+    public void relistDesign(User user, Long designId) {
+        Design design = designRepository.findById(designId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.DESIGN_NOT_FOUND));
+
+        // 본인 도안인지 확인
+        if (!design.isOwnedBy(user.getUserId())) {
+            throw new ServiceException(ErrorCode.DESIGN_UNAUTHORIZED_DELETE);
+        }
+
+        // Design 엔티티의 relist() 메서드 호출
+        // STOPPED 상태가 아니면 예외 발생
+        design.relist();
+
+        log.info("도안 판매 재개 완료 - designId={}, userId={}", designId, user.getUserId());
+    }
+
+}
+
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/util/FileValidator.java b/backend/src/main/java/com/mysite/knitly/domain/design/util/FileValidator.java
new file mode 100644
index 0000000..6c38ed8
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/util/FileValidator.java
@@ -0,0 +1,56 @@
+package com.mysite.knitly.domain.design.util;
+
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Component;
+import org.springframework.web.multipart.MultipartFile;
+
+@Slf4j
+@Component
+public class FileValidator {
+    private static final long MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+    private static final String ALLOWED_CONTENT_TYPE = "application/pdf";
+    private static final String[] ALLOWED_EXTENSIONS = {".pdf"};
+
+    // pdf 파일 유효성 검증
+    public void validatePdfFile(MultipartFile file) {
+        // 1. 파일 존재 여부
+        if (file == null || file.isEmpty()) {
+            throw new ServiceException(ErrorCode.DESIGN_FILE_EMPTY);
+        }
+
+        // 2. 파일 크기 검증
+        if (file.getSize() > MAX_FILE_SIZE) {
+            log.warn("파일 크기 초과: {} bytes (최대: {} bytes)", file.getSize(), MAX_FILE_SIZE);
+            throw new ServiceException(ErrorCode.DESIGN_FILE_SIZE_EXCEEDED);
+        }
+
+        // 3. Content-Type 검증
+        String contentType = file.getContentType();
+        if (contentType == null || !contentType.equals(ALLOWED_CONTENT_TYPE)) {
+            log.warn("잘못된 파일 타입: {}", contentType);
+            throw new ServiceException(ErrorCode.DESIGN_FILE_INVALID_TYPE);
+        }
+
+        // 4. 확장자 검증
+        String originalFilename = file.getOriginalFilename();
+        if (originalFilename == null || !hasValidExtension(originalFilename)) {
+            log.warn("잘못된 파일 확장자: {}", originalFilename);
+            throw new ServiceException(ErrorCode.DESIGN_FILE_INVALID_TYPE);
+        }
+
+        log.debug("파일 검증 통과: name={}, size={} bytes", originalFilename, file.getSize());
+    }
+
+    private boolean hasValidExtension(String filename) {
+        String lowerFilename = filename.toLowerCase();
+        for (String ext : ALLOWED_EXTENSIONS) {
+            if (lowerFilename.endsWith(ext)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/util/LocalFileStorage.java b/backend/src/main/java/com/mysite/knitly/domain/design/util/LocalFileStorage.java
new file mode 100644
index 0000000..e0dbb56
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/util/LocalFileStorage.java
@@ -0,0 +1,98 @@
+package com.mysite.knitly.domain.design.util;
+
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Component;
+
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.nio.file.StandardOpenOption;
+import java.time.LocalDate;
+import java.util.Objects;
+import java.util.UUID;
+
+
+@Slf4j
+@Component
+public class LocalFileStorage {
+
+    @Value("${file.upload-dir:uploads/designs}")
+    private String uploadDir;
+
+    @Value("${file.public-prefix:/files}")
+    private String publicPrefix;
+
+    // 바이트 배열로 들어온 pdf를 저장
+    // {uuid8}_{sanitizedName}.pdf 형태로 저장
+    public String savePdfFile(byte[] fileData, String fileName) {
+        try {
+            LocalDate today = LocalDate.now();
+
+            // 업로드 디렉토리 생성
+            Path base = Paths.get(uploadDir).toAbsolutePath().normalize();
+            Path dir = base.resolve(Paths.get(
+                    String.valueOf(today.getYear()),
+                    String.format("%02d", today.getMonthValue()),
+                    String.format("%02d", today.getDayOfMonth())
+            ));
+            Files.createDirectories(dir);
+
+            // 고유 파일명 생성
+            String baseName = stripPdfExtension(Objects.toString(fileName, "design"));
+            String uuid8 = UUID.randomUUID().toString().replace("-", "").substring(0, 8);
+            String savedName = uuid8 + "_" + baseName + ".pdf";
+
+            // 저장
+            Path filePath = dir.resolve(savedName);
+            Files.write(filePath, fileData, StandardOpenOption.CREATE_NEW);
+
+            // 접근 가능한 URL 생성
+            String relativePath = String.join("/",
+                    String.valueOf(today.getYear()),
+                    String.format("%02d", today.getMonthValue()),
+                    String.format("%02d", today.getDayOfMonth()),
+                    savedName
+            );
+
+            String url = (publicPrefix.endsWith("/") ? publicPrefix.substring(0, publicPrefix.length()-1) : publicPrefix)
+                    + "/" + relativePath;
+
+            log.info("PDF 저장 완료: {}", filePath);
+
+            return url; // DB에는 접근 가능한 URL만 저장
+        } catch (IOException e) {
+            log.error("PDF 파일 저장 실패", e);
+            throw new ServiceException(ErrorCode.DESIGN_FILE_SAVE_FAILED);
+        }
+    }
+
+    // PDF URL에서 절대 경로 변환
+    public Path toAbsolutePathFromUrl(String pdfUrl) {
+        String prefix = publicPrefix.endsWith("/") ? publicPrefix : publicPrefix + "/";
+        String rel = pdfUrl.startsWith(prefix) ? pdfUrl.substring(prefix.length()) :
+                (pdfUrl.startsWith(publicPrefix) ? pdfUrl.substring(publicPrefix.length()) : pdfUrl);
+        if (rel.startsWith("/")) rel = rel.substring(1);
+        return Paths.get(uploadDir).toAbsolutePath().normalize().resolve(rel).normalize();
+    }
+
+    public void deleteFile(String fileUrl) throws IOException {
+        Path filePath = toAbsolutePathFromUrl(fileUrl);
+        if (Files.exists(filePath)) {
+            Files.delete(filePath);
+            log.info("파일 삭제 완료: {}", filePath);
+        } else {
+            log.warn("삭제할 파일이 존재하지 않음: {}", filePath);
+        }
+    }
+
+    private String stripPdfExtension(String name) {
+        if (name.toLowerCase().endsWith(".pdf")) {
+            return name.substring(0, name.length() - 4);
+        }
+        return name;
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/design/util/PdfGenerator.java b/backend/src/main/java/com/mysite/knitly/domain/design/util/PdfGenerator.java
new file mode 100644
index 0000000..9e2e0e9
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/design/util/PdfGenerator.java
@@ -0,0 +1,174 @@
+package com.mysite.knitly.domain.design.util;
+
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import lombok.extern.slf4j.Slf4j;
+import org.apache.pdfbox.pdmodel.PDDocument;
+import org.apache.pdfbox.pdmodel.PDDocumentInformation;
+import org.apache.pdfbox.pdmodel.PDPage;
+import org.apache.pdfbox.pdmodel.PDPageContentStream;
+import org.apache.pdfbox.pdmodel.common.PDRectangle;
+import org.apache.pdfbox.pdmodel.font.PDType0Font;
+import org.springframework.core.io.ClassPathResource;
+import org.springframework.stereotype.Component;
+
+import java.awt.*;
+import java.io.InputStream;
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+import java.io.ByteArrayOutputStream;
+import java.util.List;
+
+@Slf4j
+@Component
+public class PdfGenerator {
+    private static final int GRID_SIZE = 10;
+    private static final float MARGIN = 36f;    // A4 기준 상하좌우 여백 - 0.5 inch
+    private static final float TITLE_SIZE = 18f; // 도안명 - 18pt
+    private static final float SYMBOL_SIZE = 14f; // 격자 셀 안 기호 크기 - 14pt (11pt에서 증가)
+
+    public byte[] generate(String designName, List<List<String>> gridData){
+        try (PDDocument doc = new PDDocument()) {
+            // 문서 메타
+            PDDocumentInformation info = doc.getDocumentInformation();
+            info.setTitle(designName);
+            info.setAuthor("Knitly");
+
+            // 페이지 & 폰트
+            PDPage page = new PDPage(PDRectangle.A4);
+            doc.addPage(page);
+
+            PDType0Font font = loadFont(doc); // 한글 폰트 임베딩
+
+            // 좌표/영역 계산
+            PDRectangle box = page.getMediaBox();
+            float pageWidth = box.getWidth();
+            float pageHeight = box.getHeight();
+
+            float contentLeft = MARGIN;
+            float contentRight = pageWidth - MARGIN;
+            float contentTop = pageHeight - MARGIN;
+            float contentBottom = MARGIN;
+
+            try (PDPageContentStream cs = new PDPageContentStream(doc, page)) {
+
+                // 제목
+                float titleY = contentTop - 4;
+                drawTextCentered(cs, font, TITLE_SIZE, designName, pageWidth / 2, titleY);
+
+                // 그리드 영역 크기 결정 (가로 폭 기준으로 셀 크기 산정)
+                float availableWidth = contentRight - contentLeft;
+                float cellSize = Math.min(36f, availableWidth / GRID_SIZE); // 기본 36pt, 필요 시 자동 축소
+                float gridWidth = cellSize * GRID_SIZE;
+                float gridHeight = cellSize * GRID_SIZE;
+
+                // 그리드 위치(가로 중앙)
+                float gridLeft = (pageWidth - gridWidth) / 2;
+                float gridTop = titleY - 24f; // 제목과의 간격
+
+                // 격자 라인
+                cs.setStrokingColor(Color.DARK_GRAY);
+                cs.setLineWidth(0.8f);
+                // 가로줄
+                for (int r = 0; r <= GRID_SIZE; r++) {
+                    float y = gridTop - r * cellSize;
+                    cs.moveTo(gridLeft, y);
+                    cs.lineTo(gridLeft + gridWidth, y);
+                }
+                // 세로줄
+                for (int c = 0; c <= GRID_SIZE; c++) {
+                    float x = gridLeft + c * cellSize;
+                    cs.moveTo(x, gridTop);
+                    cs.lineTo(x, gridTop - gridHeight);
+                }
+                cs.stroke();
+
+                // 셀 기호 출력 (중앙정렬)
+                cs.setNonStrokingColor(Color.BLACK);
+                for (int r = 0; r < GRID_SIZE; r++) {
+                    for (int c = 0; c < GRID_SIZE; c++) {
+                        String symbolType = gridData.get(r).get(c);
+                        if (symbolType != null && !symbolType.isBlank()) {
+                            float cx = gridLeft + c * cellSize + cellSize / 2;
+                            float cy = gridTop - r * cellSize - cellSize / 2 + 3f; // 살짝 위 보정
+
+                            // 기호 타입에 따라 다른 심볼 출력
+                            String displaySymbol = convertSymbolToDisplay(symbolType);
+                            drawTextCentered(cs, font, SYMBOL_SIZE, displaySymbol, cx, cy);
+                        }
+                    }
+                }
+
+                // 생성일 푸터
+                String ts = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm"));
+                drawTextRight(cs, font, 9f, "생성일: " + ts, contentRight, contentBottom);
+            }
+
+            ByteArrayOutputStream bos = new ByteArrayOutputStream();
+            doc.save(bos);
+            byte[] pdf = bos.toByteArray();
+            log.info("PDF 생성 완료: name='{}', size={} bytes", designName, pdf.length);
+            return pdf;
+
+        } catch (Exception e) {
+            log.error("PDF 생성 실패 - name={}", designName, e);
+            throw new ServiceException(ErrorCode.DESIGN_PDF_GENERATION_FAILED);
+        }
+    }
+
+    /**
+     * 프론트엔드에서 받은 기호 타입을 PDF에 표시할 실제 문자로 변환
+     */
+    private String convertSymbolToDisplay(String symbolType) {
+        if (symbolType == null) return "";
+
+        switch (symbolType.toLowerCase()) {
+            case "empty":
+                return "○";  // 빈 원 (U+25CB)
+            case "filled":
+                return "●";  // 채워진 원 (U+25CF)
+            case "x":
+                return "×";  // 곱하기 기호 (U+00D7)
+            case "v":
+                return "V";  // V
+            case "t":
+                return "T";  // T
+            case "plus":
+                return "+";  // +
+            case "a":
+                return "A";  // A
+            default:
+                return symbolType;  // 알 수 없는 경우 그대로 출력
+        }
+    }
+
+    private PDType0Font loadFont(PDDocument doc) throws Exception {
+        ClassPathResource res = new ClassPathResource("fonts/NanumGothic-Regular.ttf");
+        try (InputStream in = res.getInputStream()) {
+            return PDType0Font.load(doc, in, true); // true: 폰트 임베딩
+        }
+    }
+
+    private void drawTextCentered(PDPageContentStream cs, PDType0Font font, float size,
+                                  String text, float centerX, float centerY) throws Exception {
+        float textWidth = font.getStringWidth(text) / 1000 * size;
+        float x = centerX - textWidth / 2;
+        drawText(cs, font, size, text, x, centerY);
+    }
+
+    private void drawTextRight(PDPageContentStream cs, PDType0Font font, float size,
+                               String text, float rightX, float y) throws Exception {
+        float textWidth = font.getStringWidth(text) / 1000 * size;
+        float x = rightX - textWidth;
+        drawText(cs, font, size, text, x, y);
+    }
+
+    private void drawText(PDPageContentStream cs, PDType0Font font, float size,
+                          String text, float x, float y) throws Exception {
+        cs.beginText();
+        cs.setFont(font, size);
+        cs.newLineAtOffset(x, y);
+        cs.showText(text);
+        cs.endText();
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/home/controller/HomeController.java b/backend/src/main/java/com/mysite/knitly/domain/home/controller/HomeController.java
new file mode 100644
index 0000000..ec5f7e4
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/home/controller/HomeController.java
@@ -0,0 +1,50 @@
+package com.mysite.knitly.domain.home.controller;
+
+import com.mysite.knitly.domain.home.service.HomeSectionService;
+import com.mysite.knitly.domain.product.product.dto.ProductListResponse;
+import com.mysite.knitly.domain.home.dto.HomeSummaryResponse;
+import com.mysite.knitly.domain.home.dto.LatestPostItem;
+import com.mysite.knitly.domain.home.dto.LatestReviewItem;
+import com.mysite.knitly.domain.user.entity.User;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+
+@RestController
+@RequiredArgsConstructor
+@RequestMapping("/home")
+public class HomeController {
+    private final HomeSectionService homeSectionService;
+
+    // 메인화면: 인기 상품 Top5
+    public ResponseEntity<List<ProductListResponse>> popularTop5(
+            @AuthenticationPrincipal(errorOnInvalidType = false) User user
+    ) {
+        return ResponseEntity.ok(homeSectionService.getPopularTop5(user));
+    }
+
+    // 추가: 최신 리뷰
+    @GetMapping("/latest/reviews")
+    public ResponseEntity<List<LatestReviewItem>> latestReviews() {
+        return ResponseEntity.ok(homeSectionService.getLatestReviews(3));
+    }
+
+    // 추가: 최신 커뮤니티 글 3개
+    @GetMapping("/latest/posts")
+    public ResponseEntity<List<LatestPostItem>> latestPosts() {
+        return ResponseEntity.ok(homeSectionService.getLatestPosts(3));
+    }
+
+    // 추가: 홈 요약 (한 번 호출로 3섹션 모두)
+    @GetMapping("/summary")
+    public ResponseEntity<HomeSummaryResponse> summary(
+            @AuthenticationPrincipal(errorOnInvalidType = false) User user
+    ) {
+        return ResponseEntity.ok(homeSectionService.getHomeSummary(user));
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/home/dto/HomeSummaryResponse.java b/backend/src/main/java/com/mysite/knitly/domain/home/dto/HomeSummaryResponse.java
new file mode 100644
index 0000000..3d797e4
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/home/dto/HomeSummaryResponse.java
@@ -0,0 +1,10 @@
+package com.mysite.knitly.domain.home.dto;
+
+import com.mysite.knitly.domain.product.product.dto.ProductListResponse;
+import java.util.List;
+
+public record HomeSummaryResponse(
+        List<ProductListResponse> popularProducts, // 인기 상품 Top5
+        List<LatestReviewItem> latestReviews,      // 최신 리뷰
+        List<LatestPostItem> latestPosts           // 최신 커뮤니티 글
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/home/dto/LatestPostItem.java b/backend/src/main/java/com/mysite/knitly/domain/home/dto/LatestPostItem.java
new file mode 100644
index 0000000..0e3b595
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/home/dto/LatestPostItem.java
@@ -0,0 +1,11 @@
+package com.mysite.knitly.domain.home.dto;
+
+import java.time.LocalDateTime;
+
+public record LatestPostItem(
+        Long postId,
+        String title,
+        String category,
+        String thumbnailUrl,
+        LocalDateTime createdAt
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/home/dto/LatestReviewItem.java b/backend/src/main/java/com/mysite/knitly/domain/home/dto/LatestReviewItem.java
new file mode 100644
index 0000000..7ee8ddf
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/home/dto/LatestReviewItem.java
@@ -0,0 +1,13 @@
+package com.mysite.knitly.domain.home.dto;
+
+import java.time.LocalDate;
+
+public record LatestReviewItem(
+        Long reviewId,
+        Long productId,
+        String productTitle,
+        String productThumbnailUrl,
+        Integer rating,
+        String content,
+        LocalDate createdDate
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/home/repository/HomeQueryRepository.java b/backend/src/main/java/com/mysite/knitly/domain/home/repository/HomeQueryRepository.java
new file mode 100644
index 0000000..527888a
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/home/repository/HomeQueryRepository.java
@@ -0,0 +1,55 @@
+package com.mysite.knitly.domain.home.repository;
+
+import com.mysite.knitly.domain.home.dto.LatestPostItem;
+import com.mysite.knitly.domain.home.dto.LatestReviewItem;
+import jakarta.persistence.EntityManager;
+import jakarta.persistence.PersistenceContext;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Repository
+public class HomeQueryRepository {
+
+    @PersistenceContext
+    private EntityManager em;
+
+    // 최신 리뷰 N개
+    public List<LatestReviewItem> findLatestReviews(int limit) {
+        return em.createQuery("""
+                SELECT new com.mysite.knitly.domain.home.dto.LatestReviewItem(
+                    r.reviewId,
+                    p.productId,
+                    p.title,
+                    CAST(NULL AS string),
+                    r.rating,
+                    r.content,
+                    CAST(r.createdAt AS LocalDate)
+                )
+                FROM Review r
+                JOIN r.product p
+                WHERE r.isDeleted = false
+                ORDER BY r.createdAt DESC
+                """, LatestReviewItem.class)
+                .setMaxResults(limit)
+                .getResultList();
+    }
+
+    // 최신 커뮤니티 글 N개 (deleted=false, 최신순)
+    public List<LatestPostItem> findLatestPosts(int limit) {
+        return em.createQuery("""
+                SELECT new com.mysite.knitly.domain.home.dto.LatestPostItem(
+                    p.id,
+                    p.title,
+                    CAST(p.category AS string),
+                    CAST(NULL AS string),
+                    p.createdAt
+                )
+                FROM Post p
+                WHERE p.deleted = false
+                ORDER BY p.createdAt DESC
+                """, LatestPostItem.class)
+                .setMaxResults(limit)
+                .getResultList();
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/home/service/HomeSectionService.java b/backend/src/main/java/com/mysite/knitly/domain/home/service/HomeSectionService.java
new file mode 100644
index 0000000..857ad9e
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/home/service/HomeSectionService.java
@@ -0,0 +1,100 @@
+package com.mysite.knitly.domain.home.service;
+
+import com.mysite.knitly.domain.home.dto.HomeSummaryResponse;
+import com.mysite.knitly.domain.home.dto.LatestPostItem;
+import com.mysite.knitly.domain.home.dto.LatestReviewItem;
+import com.mysite.knitly.domain.home.repository.HomeQueryRepository;
+import com.mysite.knitly.domain.product.like.repository.ProductLikeRepository;
+import com.mysite.knitly.domain.product.product.dto.ProductListResponse;
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.repository.ProductRepository;
+import com.mysite.knitly.domain.product.product.service.RedisProductService;
+import com.mysite.knitly.domain.user.entity.User;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.Sort;
+import org.springframework.stereotype.Service;
+
+import java.util.*;
+import java.util.stream.Collectors;
+
+@Service
+@RequiredArgsConstructor
+
+public class HomeSectionService {
+
+    private final RedisProductService redisProductService;
+    private final ProductRepository productRepository;
+    private final HomeQueryRepository homeQueryRepository;
+    private final ProductLikeRepository productLikeRepository;
+
+    // 인기 Top5 조회 - 홈 화면용
+    public List<ProductListResponse> getPopularTop5(User user) {
+        List<Long> topIds = redisProductService.getTopNPopularProducts(5);
+
+        if (topIds.isEmpty()) {
+            // Redis에 데이터 없으면 DB에서 직접 조회
+            Pageable top5 = PageRequest.of(0, 5, Sort.by("purchaseCount").descending());
+            List<Product> products = productRepository.findByIsDeletedFalse(top5).getContent();
+
+            return mapProductsToResponse(user, products);
+        }
+
+        List<Product> unorderedProducts = productRepository.findByProductIdInAndIsDeletedFalse(topIds);
+
+        // [수정] 찜 여부 확인
+        Set<Long> likedProductIds = getLikedProductIds(user, unorderedProducts);
+
+        // Redis 순서대로 정렬
+        Map<Long, Product> productMap = unorderedProducts.stream()
+                .collect(Collectors.toMap(Product::getProductId, p -> p));
+
+        // [수정] 람다를 사용해 "from(Product, boolean)" 호출
+        return topIds.stream()
+                .map(productMap::get)
+                .filter(Objects::nonNull)
+                .map(product -> ProductListResponse.from(
+                        product,
+                        likedProductIds.contains(product.getProductId())
+                ))
+                .collect(Collectors.toList());
+    }
+    // 최신 리뷰 N개
+    public List<LatestReviewItem> getLatestReviews(int limit) {
+        return homeQueryRepository.findLatestReviews(limit);
+    }
+
+    // 최신 커뮤니티 글 N개
+    public List<LatestPostItem> getLatestPosts(int limit) {
+        return homeQueryRepository.findLatestPosts(limit);
+    }
+    // 홈 (인기 5 + 최신 리뷰 3 + 최신 글 3)
+    public HomeSummaryResponse getHomeSummary(User user) {
+        var popular = getPopularTop5(user); // user 전달
+        var reviews = getLatestReviews(3);
+        var posts   = getLatestPosts(3);
+        return new HomeSummaryResponse(popular, reviews, posts);
+    }
+
+    private List<ProductListResponse> mapProductsToResponse(User user, List<Product> products) {
+        Set<Long> likedProductIds = getLikedProductIds(user, products);
+        return products.stream()
+                .map(product -> ProductListResponse.from(
+                        product,
+                        likedProductIds.contains(product.getProductId())
+                ))
+                .toList();
+    }
+
+    private Set<Long> getLikedProductIds(User user, List<Product> products) {
+        if (user == null || products.isEmpty()) {
+            return Collections.emptySet();
+        }
+        List<Long> productIds = products.stream()
+                .map(Product::getProductId)
+                .toList();
+        // (가정) user.getUserId()
+        return productLikeRepository.findLikedProductIdsByUserId(user.getUserId(), productIds);
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/mypage/controller/MyPageController.java b/backend/src/main/java/com/mysite/knitly/domain/mypage/controller/MyPageController.java
new file mode 100644
index 0000000..69494fa
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/mypage/controller/MyPageController.java
@@ -0,0 +1,96 @@
+package com.mysite.knitly.domain.mypage.controller;
+
+import com.mysite.knitly.domain.mypage.dto.*;
+import com.mysite.knitly.domain.mypage.service.MyPageService;
+import com.mysite.knitly.domain.payment.dto.PaymentDetailResponse;
+import com.mysite.knitly.domain.payment.service.PaymentService;
+import com.mysite.knitly.domain.user.entity.User;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Sort;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.security.access.prepost.PreAuthorize;
+
+
+@RestController
+@RequestMapping("/mypage")
+@RequiredArgsConstructor
+@PreAuthorize("isAuthenticated()")
+public class MyPageController {
+
+    private final MyPageService service;
+    private final PaymentService paymentService;
+
+    // 프로필 조회 (이름 + 이메일)
+    @GetMapping("/profile")
+    public ProfileResponse profile(@AuthenticationPrincipal User principal) {
+        return new ProfileResponse(principal.getName(), principal.getEmail());
+    }
+
+    // 주문 내역 조회
+    @GetMapping("/orders")
+    public PageResponse<OrderCardResponse> orders(
+            @AuthenticationPrincipal User principal,
+            @RequestParam(defaultValue = "0") int page,
+            @RequestParam(defaultValue = "3") int size
+    ) {
+        return PageResponse.of(service.getOrderCards(principal.getUserId(), PageRequest.of(page, size)));
+    }
+
+    // 주문 내역별 결제 정보 조회(주문 카드에서 결제내역 보기 버튼 클릭 시 호출)
+    @GetMapping("/orders/{orderId}/payment")
+    public ResponseEntity<?> myOrderPayment(
+            @AuthenticationPrincipal User principal,
+            @PathVariable Long orderId
+    ) {
+        PaymentDetailResponse detail = paymentService.getPaymentDetailByOrder(principal, orderId);
+        return ResponseEntity.ok(detail);
+    }
+
+    // 내가 쓴 글 조회 (검색기능 + 정렬)
+    @GetMapping("/posts")
+    public PageResponse<MyPostListItemResponse> myPosts(
+            @AuthenticationPrincipal User principal,
+            @RequestParam(required = false) String query,
+            @RequestParam(defaultValue = "0") int page,
+            @RequestParam(defaultValue = "10") int size
+    ) {
+        var pageable = PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "createdAt"));
+        return PageResponse.of(service.getMyPosts(principal.getUserId(), query, pageable));
+    }
+
+    // 내가 쓴 댓글 조회 (검색 + 정렬)
+    @GetMapping("/comments")
+    public PageResponse<MyCommentListItem> myComments(
+            @AuthenticationPrincipal User principal,
+            @RequestParam(required = false) String query,
+            @RequestParam(defaultValue = "0") int page,
+            @RequestParam(defaultValue = "10") int size
+    ) {
+        var pageable = PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "createdAt"));
+        return PageResponse.of(service.getMyComments(principal.getUserId(), query, pageable));
+    }
+    // 내가 찜한 상품 조회
+    @GetMapping("/favorites")
+    public PageResponse<FavoriteProductItem> myFavorites(
+            @AuthenticationPrincipal User principal,
+            @RequestParam(defaultValue = "0") int page,
+            @RequestParam(defaultValue = "10") int size
+    ) {
+        var pageable = PageRequest.of(page, size);
+        return PageResponse.of(service.getMyFavorites(principal.getUserId(), pageable));
+    }
+
+    // 내가 작성한 리뷰 조회
+    @GetMapping("/reviews")
+    public PageResponse<ReviewListItem> myReviews(
+            @AuthenticationPrincipal User principal,
+            @RequestParam(defaultValue = "0") int page,
+            @RequestParam(defaultValue = "10") int size
+    ) {
+        var pageable = PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "createdAt"));
+        return PageResponse.of(service.getMyReviewsV2(principal.getUserId(), pageable));
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/FavoriteProductItem.java b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/FavoriteProductItem.java
new file mode 100644
index 0000000..56d7560
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/FavoriteProductItem.java
@@ -0,0 +1,14 @@
+package com.mysite.knitly.domain.mypage.dto;
+
+import java.time.LocalDate;
+import java.math.BigDecimal;
+
+
+// 마이페이지 - 내가 찜한 상품 조회
+
+public record FavoriteProductItem(
+        Long productId,
+        String productTitle,
+        String sellerName,     // (판매자)
+        String thumbnailUrl
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/MyCommentListItem.java b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/MyCommentListItem.java
new file mode 100644
index 0000000..76b2c56
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/MyCommentListItem.java
@@ -0,0 +1,10 @@
+package com.mysite.knitly.domain.mypage.dto;
+
+import java.time.LocalDate;
+
+public record MyCommentListItem(
+        Long commentId,
+        Long postId,
+        LocalDate createdDate,
+        String preview
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/MyPostListItemResponse.java b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/MyPostListItemResponse.java
new file mode 100644
index 0000000..04ca88d
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/MyPostListItemResponse.java
@@ -0,0 +1,12 @@
+package com.mysite.knitly.domain.mypage.dto;
+
+import java.time.LocalDateTime;
+
+public record MyPostListItemResponse(
+        Long id,
+        String title,
+        String excerpt,
+        String thumbnailUrl,
+
+        LocalDateTime createdAt
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/OrderCardResponse.java b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/OrderCardResponse.java
new file mode 100644
index 0000000..a2a0b16
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/OrderCardResponse.java
@@ -0,0 +1,16 @@
+package com.mysite.knitly.domain.mypage.dto;
+
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
+
+public record OrderCardResponse(
+        Long orderId,
+        LocalDateTime orderedAt,
+        Double totalPrice,
+        List<OrderLine> items
+) {
+    public static OrderCardResponse of(Long orderId, LocalDateTime orderedAt, Double totalPrice) {
+        return new OrderCardResponse(orderId, orderedAt, totalPrice, new ArrayList<>());
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/OrderLine.java b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/OrderLine.java
new file mode 100644
index 0000000..9655b90
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/OrderLine.java
@@ -0,0 +1,10 @@
+package com.mysite.knitly.domain.mypage.dto;
+
+public record OrderLine(
+        Long orderItemId,
+        Long productId,
+        String productTitle,
+        int quantity,
+        Double orderPrice,
+        boolean isReviewed
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/PageResponse.java b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/PageResponse.java
new file mode 100644
index 0000000..0e9a41c
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/PageResponse.java
@@ -0,0 +1,26 @@
+package com.mysite.knitly.domain.mypage.dto;
+
+import org.springframework.data.domain.Page;
+import java.util.List;
+
+public record PageResponse<T>(
+        List<T> content,
+        int page,
+        int size,
+        long totalElements,
+        int totalPages,
+        boolean first,
+        boolean last
+) {
+    public static <T> PageResponse<T> of(Page<T> p) {
+        return new PageResponse<>(
+                p.getContent(),
+                p.getNumber(),
+                p.getSize(),
+                p.getTotalElements(),
+                p.getTotalPages(),
+                p.isFirst(),
+                p.isLast()
+        );
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/ProfileResponse.java b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/ProfileResponse.java
new file mode 100644
index 0000000..344afaf
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/ProfileResponse.java
@@ -0,0 +1,3 @@
+package com.mysite.knitly.domain.mypage.dto;
+
+public record ProfileResponse(String name, String email) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/ReviewListItem.java b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/ReviewListItem.java
new file mode 100644
index 0000000..3bd2f4d
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/mypage/dto/ReviewListItem.java
@@ -0,0 +1,15 @@
+package com.mysite.knitly.domain.mypage.dto;
+
+import java.time.LocalDate;
+import java.util.List;
+
+public record ReviewListItem(
+        Long reviewId,
+        Long productId,
+        String productTitle,
+        String productThumbnailUrl,
+        Integer rating,
+        String content,
+        List<String> reviewImageUrls,// 프론트에서 접기/펼치기
+        LocalDate createdDate
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/mypage/repository/MyPageQueryRepository.java b/backend/src/main/java/com/mysite/knitly/domain/mypage/repository/MyPageQueryRepository.java
new file mode 100644
index 0000000..bc9c31e
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/mypage/repository/MyPageQueryRepository.java
@@ -0,0 +1,190 @@
+package com.mysite.knitly.domain.mypage.repository;
+
+import com.mysite.knitly.domain.mypage.dto.*;
+import jakarta.persistence.EntityManager;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageImpl;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Repository;
+
+import java.time.LocalDateTime;
+import java.util.*;
+import java.util.stream.Collectors;
+
+@Repository
+@RequiredArgsConstructor
+public class MyPageQueryRepository {
+
+    private final EntityManager em;
+
+    // 주문 내역 조회
+    public Page<OrderCardResponse> findOrderCards(Long userId, Pageable pageable) {
+        String jpql = """
+            select o.orderId, o.createdAt, o.totalPrice,
+                   p.productId, p.title,
+                   oi.quantity, oi.orderPrice,
+                   oi.orderItemId
+            from Order o
+            join o.orderItems oi
+            join oi.product p
+            where o.user.userId = :uid
+            order by o.createdAt desc
+        """;
+
+        List<Object[]> rows = em.createQuery(jpql, Object[].class)
+                .setParameter("uid", userId)
+                .setFirstResult((int) pageable.getOffset())
+                .setMaxResults(pageable.getPageSize())
+                .getResultList();
+
+        long total = em.createQuery("select count(o) from Order o where o.user.userId = :uid", Long.class)
+                .setParameter("uid", userId)
+                .getSingleResult();
+
+        if (rows.isEmpty()) {
+            return new PageImpl<>(List.of(), pageable, total);
+        }
+
+        Set<Long> productIdsInOrders = rows.stream()
+                .map(r -> (Long) r[3])
+                .collect(Collectors.toSet());
+
+        Set<Long> orderItemIds = rows.stream()
+                .map(r -> (Long) r[7])
+                .collect(Collectors.toSet());
+
+        Set<Long> reviewedOrderItemIds = new HashSet<>(em.createQuery("""
+                    select r.orderItem.orderItemId from Review r
+                    where r.user.userId = :userId 
+                      and r.orderItem.orderItemId in :orderItemIds
+                    """, Long.class)
+                .setParameter("userId", userId)
+                .setParameter("orderItemIds", orderItemIds)
+                .getResultList());
+
+        Map<Long, LocalDateTime> orderedAtMap = new LinkedHashMap<>();
+        Map<Long, Double> totalMap = new LinkedHashMap<>();
+        Map<Long, List<OrderLine>> itemsMap = new LinkedHashMap<>();
+
+        for (Object[] r : rows) {
+            Long oId = (Long) r[0];
+            LocalDateTime orderedAt = (LocalDateTime) r[1];
+            Double totalPrice = (r[2] == null) ? 0d : ((Number) r[2]).doubleValue();
+            Long productId = (Long) r[3];
+            String productTitle = (String) r[4];
+            Integer quantity = (Integer) r[5];
+            Double orderPrice = (r[6] == null) ? 0d : ((Number) r[6]).doubleValue();
+            Long orderItemId = (Long) r[7];
+
+            orderedAtMap.putIfAbsent(oId, orderedAt);
+            totalMap.putIfAbsent(oId, totalPrice);
+
+            boolean isReviewed = reviewedOrderItemIds.contains(orderItemId);
+
+            itemsMap.computeIfAbsent(oId, k -> new ArrayList<>())
+                    .add(new OrderLine(orderItemId, productId, productTitle, quantity, orderPrice, isReviewed));
+        }
+
+        List<OrderCardResponse> cards = new ArrayList<>();
+        for (Long id : itemsMap.keySet()) {
+            cards.add(new OrderCardResponse(
+                    id,
+                    orderedAtMap.get(id),
+                    totalMap.get(id),
+                    Collections.unmodifiableList(itemsMap.get(id))
+            ));
+        }
+
+        return new PageImpl<>(cards, pageable, total);
+    }
+
+    // ✅ 수정: 내가 쓴 글 조회 - CAST를 사용하여 CLOB → VARCHAR 변환
+    public Page<MyPostListItemResponse> findMyPosts(Long userId, String query, Pageable pageable) {
+        String base = """
+                SELECT new com.mysite.knitly.domain.mypage.dto.MyPostListItemResponse(
+                    p.id,
+                    p.title,
+                    CASE WHEN LENGTH(CAST(p.content AS string)) > 10 
+                         THEN CONCAT(SUBSTRING(CAST(p.content AS string), 1, 10), '...')
+                         ELSE CAST(p.content AS string)
+                    END,
+                    (SELECT MIN(i) FROM Post p2 JOIN p2.imageUrls i WHERE p2 = p),
+                    p.createdAt
+                )
+                FROM Post p
+                WHERE p.author.userId = :uid
+                  AND p.deleted = false
+                """;
+
+        if (query != null && !query.isBlank()) {
+            base += " AND (LOWER(p.title) LIKE LOWER(CONCAT('%', :q, '%')) OR LOWER(CAST(p.content AS string)) LIKE LOWER(CONCAT('%', :q, '%')))";
+        }
+
+        var q = em.createQuery(base + " ORDER BY p.createdAt DESC", MyPostListItemResponse.class)
+                .setParameter("uid", userId);
+
+        if (query != null && !query.isBlank()) {
+            q.setParameter("q", query.trim());
+        }
+
+        List<MyPostListItemResponse> list = q
+                .setFirstResult((int) pageable.getOffset())
+                .setMaxResults(pageable.getPageSize())
+                .getResultList();
+
+        long total = em.createQuery("""
+                        SELECT COUNT(p.id)
+                        FROM Post p
+                        WHERE p.author.userId = :uid AND p.deleted = false
+                        """, Long.class)
+                .setParameter("uid", userId)
+                .getSingleResult();
+
+        return new PageImpl<>(list, pageable, total);
+    }
+
+    // ✅ 최종 수정: 내가 쓴 댓글 조회 - LocalDate로 CAST
+    public Page<MyCommentListItem> findMyComments(Long userId, String query, Pageable pageable) {
+        String base = """
+                SELECT new com.mysite.knitly.domain.mypage.dto.MyCommentListItem(
+                    c.id,
+                    c.post.id,
+                    CAST(c.createdAt AS LocalDate),
+                    CASE WHEN LENGTH(CAST(c.content AS string)) > 30 
+                         THEN CONCAT(SUBSTRING(CAST(c.content AS string), 1, 30), '...')
+                         ELSE CAST(c.content AS string)
+                    END
+                )
+                FROM Comment c
+                WHERE c.author.userId = :uid
+                  AND c.deleted = false
+                """;
+
+        if (query != null && !query.isBlank()) {
+            base += " AND LOWER(CAST(c.content AS string)) LIKE LOWER(CONCAT('%', :q, '%'))";
+        }
+
+        var q = em.createQuery(base + " ORDER BY c.createdAt DESC", MyCommentListItem.class)
+                .setParameter("uid", userId);
+
+        if (query != null && !query.isBlank()) {
+            q.setParameter("q", query.trim());
+        }
+
+        List<MyCommentListItem> list = q
+                .setFirstResult((int) pageable.getOffset())
+                .setMaxResults(pageable.getPageSize())
+                .getResultList();
+
+        long total = em.createQuery("""
+                        SELECT COUNT(c.id)
+                        FROM Comment c
+                        WHERE c.author.userId = :uid AND c.deleted = false
+                        """, Long.class)
+                .setParameter("uid", userId)
+                .getSingleResult();
+
+        return new PageImpl<>(list, pageable, total);
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/mypage/service/MyPageService.java b/backend/src/main/java/com/mysite/knitly/domain/mypage/service/MyPageService.java
new file mode 100644
index 0000000..2333043
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/mypage/service/MyPageService.java
@@ -0,0 +1,96 @@
+package com.mysite.knitly.domain.mypage.service;
+
+import com.mysite.knitly.domain.mypage.dto.*;
+import com.mysite.knitly.domain.mypage.repository.MyPageQueryRepository;
+import com.mysite.knitly.domain.product.like.entity.ProductLike;
+import com.mysite.knitly.domain.product.like.repository.ProductLikeRepository;
+import com.mysite.knitly.domain.product.review.entity.Review;
+import com.mysite.knitly.domain.product.review.repository.ReviewRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageImpl;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.List;
+
+@Service
+@RequiredArgsConstructor
+public class MyPageService {
+
+    private final MyPageQueryRepository repo;
+    private final ReviewRepository reviewRepository;
+    private final ProductLikeRepository productLikeRepository;
+
+    // 주문 내역 조회
+    @Transactional(readOnly = true)
+    public Page<OrderCardResponse> getOrderCards(Long userId, Pageable pageable) {
+        return repo.findOrderCards(userId, pageable);
+    }
+
+    // 내가 쓴 글 조회
+    @Transactional(readOnly = true)
+    public Page<MyPostListItemResponse> getMyPosts(Long userId, String query, Pageable pageable) {
+        return repo.findMyPosts(userId, query, pageable);
+    }
+
+    // 내가 쓴 댓글 조회
+    @Transactional(readOnly = true)
+    public Page<MyCommentListItem> getMyComments(Long userId, String query, Pageable pageable) {
+        return repo.findMyComments(userId, query, pageable);
+    }
+
+    // 내가 찜한 상품 조회
+    @Transactional(readOnly = true)
+    public Page<FavoriteProductItem> getMyFavorites(Long userId, Pageable pageable) {
+        return productLikeRepository.findByUser_UserId(userId, pageable)
+                .map(this::convertToDto);
+    }
+
+    private FavoriteProductItem convertToDto(ProductLike pl) {
+        var p = pl.getProduct();
+
+        String thumbnailUrl = p.getProductImages().isEmpty()
+                ? null
+                : p.getProductImages().get(0).getProductImageUrl(); // 첫 번째 이미지
+
+        return new FavoriteProductItem(
+                p.getProductId(),
+                p.getTitle(),
+                p.getUser().getName(),
+                thumbnailUrl
+        );
+    }
+
+    // 사용자가 작성한 리뷰 조회
+    @Transactional(readOnly = true)
+    public Page<ReviewListItem> getMyReviewsV2(Long userId, Pageable pageable) {
+        List<Review> reviews = reviewRepository.findByUser_UserIdAndIsDeletedFalse(userId, pageable);
+
+        List<ReviewListItem> list = reviews.stream().map(r -> {
+            var product = r.getProduct();
+            String productThumbnail = product.getProductImages().isEmpty() ? null :
+                    product.getProductImages().get(0).getProductImageUrl();
+
+            List<String> reviewImages = r.getReviewImages().stream()
+                    .map(ri -> ri.getReviewImageUrl())
+                    .toList();
+
+            return new ReviewListItem(
+                    r.getReviewId(),
+                    product.getProductId(),
+                    product.getTitle(),
+                    productThumbnail,
+                    r.getRating(),
+                    r.getContent(),
+                    reviewImages,
+                    r.getCreatedAt().toLocalDate()
+            );
+        }).toList();
+
+        long total = reviewRepository.countByUser_UserIdAndIsDeletedFalse(userId);
+
+        return new PageImpl<>(list, pageable, total);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/order/controller/OrderController.java b/backend/src/main/java/com/mysite/knitly/domain/order/controller/OrderController.java
new file mode 100644
index 0000000..9cabb38
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/order/controller/OrderController.java
@@ -0,0 +1,31 @@
+package com.mysite.knitly.domain.order.controller;
+
+import com.mysite.knitly.domain.order.dto.OrderCreateRequest;
+import com.mysite.knitly.domain.order.dto.OrderCreateResponse;
+import com.mysite.knitly.domain.order.service.OrderFacade;
+import com.mysite.knitly.domain.order.service.OrderService;
+import com.mysite.knitly.domain.user.entity.User;
+import jakarta.validation.Valid;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.UUID;
+
+@RestController
+@RequiredArgsConstructor
+@RequestMapping("/orders")
+public class OrderController {
+
+    private final OrderFacade orderFacade;
+    @PostMapping
+    public ResponseEntity<OrderCreateResponse> createOrder(
+            @AuthenticationPrincipal User user,
+            @RequestBody @Valid OrderCreateRequest request
+    ) {
+        // Facade의 메서드를 호출하도록 변경
+        OrderCreateResponse response = orderFacade.createOrderWithLock(user, request);
+        return ResponseEntity.ok(response);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/order/dto/EmailNotificationDto.java b/backend/src/main/java/com/mysite/knitly/domain/order/dto/EmailNotificationDto.java
new file mode 100644
index 0000000..080049f
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/order/dto/EmailNotificationDto.java
@@ -0,0 +1,8 @@
+package com.mysite.knitly.domain.order.dto;
+
+public record EmailNotificationDto(
+        Long orderId,
+        Long userId,
+        String userEmail
+) {
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/order/dto/OrderCreateRequest.java b/backend/src/main/java/com/mysite/knitly/domain/order/dto/OrderCreateRequest.java
new file mode 100644
index 0000000..d12c66e
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/order/dto/OrderCreateRequest.java
@@ -0,0 +1,8 @@
+package com.mysite.knitly.domain.order.dto;
+
+import java.util.List;
+
+public record OrderCreateRequest(
+   List<Long> productIds
+) {
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/order/dto/OrderCreateResponse.java b/backend/src/main/java/com/mysite/knitly/domain/order/dto/OrderCreateResponse.java
new file mode 100644
index 0000000..61813e1
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/order/dto/OrderCreateResponse.java
@@ -0,0 +1,43 @@
+package com.mysite.knitly.domain.order.dto;
+
+import com.mysite.knitly.domain.order.entity.Order;
+import java.time.LocalDateTime;
+import java.util.List;
+import java.util.stream.Collectors;
+
+public record OrderCreateResponse(
+        Long orderId,
+        String tossOrderId,  // 토스페이먼츠용 주문번호 추가
+        LocalDateTime orderDate,
+        Double totalPrice,
+        List<OrderItemInfo> orderItems
+) {
+    public static OrderCreateResponse from(Order order) {
+        List<OrderItemInfo> itemInfos = order.getOrderItems().stream()
+                .map(OrderItemInfo::from)
+                .collect(Collectors.toList());
+
+        return new OrderCreateResponse(
+                order.getOrderId(),
+                order.getTossOrderId(),
+                order.getCreatedAt(),
+                order.getTotalPrice(),
+                itemInfos
+        );
+    }
+
+    // 주문에 포함된 개별 상품 정보를 담을 내부 레코드
+    public record OrderItemInfo(
+            Long productId,
+            String title,
+            Double orderPrice
+    ) {
+        public static OrderItemInfo from(com.mysite.knitly.domain.order.entity.OrderItem orderItem) {
+            return new OrderItemInfo(
+                    orderItem.getProduct().getProductId(),
+                    orderItem.getProduct().getTitle(),
+                    orderItem.getOrderPrice()
+            );
+        }
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/order/entity/Order.java b/backend/src/main/java/com/mysite/knitly/domain/order/entity/Order.java
new file mode 100644
index 0000000..b60c314
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/order/entity/Order.java
@@ -0,0 +1,106 @@
+package com.mysite.knitly.domain.order.entity;
+
+import com.mysite.knitly.domain.user.entity.User;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import org.springframework.data.annotation.CreatedDate;
+import org.springframework.data.jpa.domain.support.AuditingEntityListener;
+
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.UUID;
+
+@Entity
+@Getter
+@NoArgsConstructor
+@Table(name = "orders")
+@AllArgsConstructor
+@Builder
+@EntityListeners(AuditingEntityListener.class)
+public class Order {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long orderId;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "user_id")
+    private User user; // 구매자
+
+    @CreatedDate
+    @Column(nullable = false, updatable = false)
+    private LocalDateTime createdAt;
+
+    @Column(nullable = false)
+    private Double totalPrice;
+
+    // 토스페이먼츠 orderId (영문 대소문자, 숫자, -, _ 만 허용, 6자 이상 64자 이하)
+    @Column(nullable = false, unique = true, length = 64)
+    private String tossOrderId;
+
+    // Order가 저장될 때 OrderItem도 함께 저장되도록 Cascade 설정
+    // ophanRemoval : OrderItem이 Order에서 제거되면 DB에서도 삭제
+    @Builder.Default
+    @OneToMany(mappedBy = "order", cascade = CascadeType.ALL, orphanRemoval = true)
+    private List<OrderItem> orderItems = new ArrayList<>();
+
+    @Builder
+    public Order(User user, Double totalPrice, String tossOrderId) {
+        this.user = user;
+        this.totalPrice = totalPrice;
+        this.tossOrderId = tossOrderId;
+    }
+
+    //== 생성 메서드 ==//
+    public static Order create(User user, List<OrderItem> orderItems) {
+        Order order = new Order();
+        order.user = user; // 사용자 정보 설정
+
+        // 토스페이먼츠 orderId 생성 (UUID 기반)
+        order.tossOrderId = generateTossOrderId();
+
+        // 모든 주문 상품을 추가하고 총액 계산
+        double totalPrice = 0.0;
+        for (OrderItem orderItem : orderItems) {
+            order.addOrderItem(orderItem);
+            totalPrice += orderItem.getOrderPrice();
+        }
+        order.totalPrice = totalPrice;
+
+        return order;
+    }
+
+    //== 연관관계 편의 메서드 ==//
+    public void addOrderItem(OrderItem orderItem) {
+        orderItems.add(orderItem);
+        orderItem.setOrder(this); // 양방향 관계 설정
+    }
+
+    /**
+     * 토스페이먼츠 orderId 생성
+     * 규칙: 영문 대소문자, 숫자, 특수문자 -, _ 로 이루어진 6자 이상 64자 이하
+     * UUID 기반으로 생성하여 고유성 보장
+     */
+    private static String generateTossOrderId() {
+        // UUID 생성 (하이픈 포함 36자, 토스페이먼츠 orderId 규칙에 부합)
+        String uuid = UUID.randomUUID().toString();
+        return uuid;
+    }
+}
+
+/*
+CREATE TABLE `orders` (
+    `order_id`      BIGINT          NOT NULL    AUTO_INCREMENT,
+    `user_id`       BINARY(16)      NOT NULL,
+    `created_at`    DATETIME        NOT NULL    DEFAULT CURRENT_TIMESTAMP,
+    `total_price`   DECIMAL(10, 2)  NOT NULL,  -- 주문 총액
+    `toss_order_id` VARCHAR(64)     NOT NULL    UNIQUE,  -- 토스페이먼츠 주문번호
+    PRIMARY KEY (`order_id`)
+    INDEX idx_toss_order_id (`toss_order_id`)
+
+);
+*/
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/order/entity/OrderItem.java b/backend/src/main/java/com/mysite/knitly/domain/order/entity/OrderItem.java
new file mode 100644
index 0000000..5556925
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/order/entity/OrderItem.java
@@ -0,0 +1,59 @@
+package com.mysite.knitly.domain.order.entity;
+
+import com.mysite.knitly.domain.product.product.entity.Product;
+import jakarta.persistence.*;
+import lombok.AccessLevel;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+
+@Entity
+@Getter
+@NoArgsConstructor(access = AccessLevel.PROTECTED)
+@Table(name = "order_items")
+public class OrderItem {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long orderItemId;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "order_id")
+    private Order order;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "product_id")
+    private Product product;
+
+    @Column(nullable = false)
+    private Double orderPrice; // 주문 당시의 상품 가격
+
+    @Column(nullable = false)
+    private int quantity; // 수량 (항상 1)
+
+    @Builder
+    public OrderItem(Order order, Product product, Double orderPrice, int quantity) {
+        this.order = order;
+        this.product = product;
+        this.orderPrice = orderPrice;
+        this.quantity = quantity;
+    }
+
+    //== 연관관계 편의 메서드용 Setter ==//
+    public void setOrder(Order order) {
+        this.order = order;
+    }
+}
+
+/*
+CREATE TABLE `order_items` (
+        `order_item_id` BIGINT          NOT NULL    AUTO_INCREMENT,
+    `order_id`      BIGINT          NOT NULL,
+        `product_id`    BIGINT          NOT NULL,
+        `order_price`   DECIMAL(10, 2)  NOT NULL,  -- 주문 당시의 개별 상품 가격
+    `quantity`      INT             NOT NULL,  -- 주문 수량 (항상 1)
+PRIMARY KEY (`order_item_id`),
+FOREIGN KEY (`order_id`) REFERENCES `orders` (`order_id`),
+FOREIGN KEY (`product_id`) REFERENCES `products` (`product_id`)
+);
+*/
diff --git a/backend/src/main/java/com/mysite/knitly/domain/order/repository/OrderItemRepository.java b/backend/src/main/java/com/mysite/knitly/domain/order/repository/OrderItemRepository.java
new file mode 100644
index 0000000..2eb53e3
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/order/repository/OrderItemRepository.java
@@ -0,0 +1,9 @@
+package com.mysite.knitly.domain.order.repository;
+
+import com.mysite.knitly.domain.order.entity.OrderItem;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.Optional;
+
+public interface OrderItemRepository extends JpaRepository<OrderItem, Long> {
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/order/repository/OrderRepository.java b/backend/src/main/java/com/mysite/knitly/domain/order/repository/OrderRepository.java
new file mode 100644
index 0000000..44b5ac9
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/order/repository/OrderRepository.java
@@ -0,0 +1,23 @@
+package com.mysite.knitly.domain.order.repository;
+
+import com.mysite.knitly.domain.order.entity.Order;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+
+import java.util.Optional;
+
+public interface OrderRepository extends JpaRepository<Order, Long> {
+
+    // ✅ 추가: 이메일 발송 시 사용할 상세 정보 조회 쿼리
+    @Query("SELECT o FROM Order o " +
+            "JOIN FETCH o.user u " +
+            "JOIN FETCH o.orderItems oi " +
+            "JOIN FETCH oi.product p " +
+            "JOIN FETCH p.design d " +
+            "WHERE o.orderId = :orderId")
+    Optional<Order> findOrderWithDetailsById(@Param("orderId") Long orderId);
+
+    // tossOrderId로 주문 조회 (결제 승인 시 사용)
+    Optional<Order> findByTossOrderId(String tossOrderId);
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/order/service/OrderFacade.java b/backend/src/main/java/com/mysite/knitly/domain/order/service/OrderFacade.java
new file mode 100644
index 0000000..642cbc7
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/order/service/OrderFacade.java
@@ -0,0 +1,61 @@
+package com.mysite.knitly.domain.order.service;
+
+import com.mysite.knitly.domain.order.dto.OrderCreateRequest;
+import com.mysite.knitly.domain.order.dto.OrderCreateResponse;
+import com.mysite.knitly.domain.order.entity.Order;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.global.lock.RedisLockService;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Component;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+@Component
+@RequiredArgsConstructor
+public class OrderFacade {
+
+    private final RedisLockService redisLockService;
+    private final OrderService orderService;
+
+    public OrderCreateResponse createOrderWithLock(User user, OrderCreateRequest request) {
+        // 락 키는 첫 번째 상품 ID를 기준으로 단순하게 생성 (혹은 모든 ID 조합)
+        String lockKey = generateCompositeLockKey(request.productIds());
+
+        long startTime = System.currentTimeMillis();
+        long waitTimeMillis = 2000; // 최대 2초 대기
+
+        while (!redisLockService.tryLock(lockKey)) {
+            // 현재 시간과 시작 시간을 비교하여 대기 시간을 초과했는지 확인
+            if (System.currentTimeMillis() - startTime > waitTimeMillis) {
+                // 대기 시간을 초과하면 예외를 발생시켜 실패 처리합니다.
+                throw new RuntimeException("Lock acquisition timed out for key: " + lockKey);
+            }
+            try {
+                Thread.sleep(100);
+            } catch (InterruptedException e) {
+                Thread.currentThread().interrupt();
+                throw new RuntimeException("락 대기 중 인터럽트 발생", e);
+            }
+        }
+
+        try {
+            Order createdOrder = orderService.createOrder(user, request.productIds());
+            return OrderCreateResponse.from(createdOrder);
+        } finally {
+            redisLockService.unlock(lockKey);
+        }
+    }
+
+    /**
+     * 상품 ID 리스트를 정렬하여 복합 락 키를 생성합니다.
+     * 정렬하는 이유: [A, B]와 [B, A]에 대해 동일한 락 키를 보장하여 데드락을 방지합니다.
+     */
+    private String generateCompositeLockKey(List<Long> productIds) {
+        String sortedIds = productIds.stream()
+                .sorted()
+                .map(String::valueOf)
+                .collect(Collectors.joining(":"));
+        return "order_lock:" + sortedIds;
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/order/service/OrderService.java b/backend/src/main/java/com/mysite/knitly/domain/order/service/OrderService.java
new file mode 100644
index 0000000..4bb29d9
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/order/service/OrderService.java
@@ -0,0 +1,52 @@
+package com.mysite.knitly.domain.order.service;
+
+import com.mysite.knitly.domain.order.entity.Order;
+import com.mysite.knitly.domain.order.entity.OrderItem;
+import com.mysite.knitly.domain.order.repository.OrderRepository;
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.repository.ProductRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import jakarta.persistence.EntityNotFoundException;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+
+@Service
+@RequiredArgsConstructor
+public class OrderService {
+
+    private final ProductRepository productRepository;
+    private final OrderRepository orderRepository;
+
+    // Facade에서만 호출될 핵심 비즈니스 로직
+    @Transactional
+    public Order createOrder(User user, List<Long> productIds) {
+// 1. 요청된 상품 ID 리스트로 모든 Product 엔티티를 조회
+        List<Product> products = productRepository.findAllById(productIds);
+        if (products.size() != productIds.size()) {
+            throw new EntityNotFoundException("일부 상품을 찾을 수 없습니다.");
+        }
+
+        // 2. 각 Product에 대해 OrderItem을 빌더로 생성하고, 재고를 직접 감소시킴
+        List<OrderItem> orderItems = products.stream()
+                .map(product -> {
+                    product.decreaseStock(1); // 재고 감소 (수량은 1로 가정)
+                    return OrderItem.builder()
+                            .product(product)
+                            .orderPrice(product.getPrice())
+                            .quantity(1)
+                            .build();
+                })
+                .collect(Collectors.toList());
+
+        // 3. Order 엔티티 생성
+        Order order = Order.create(user, orderItems);
+
+        // 4. Order 저장 (OrderItem은 CascadeType.ALL에 의해 함께 저장됨)
+        return orderRepository.save(order);
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/payment/controller/PaymentController.java b/backend/src/main/java/com/mysite/knitly/domain/payment/controller/PaymentController.java
new file mode 100644
index 0000000..da54ba4
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/payment/controller/PaymentController.java
@@ -0,0 +1,37 @@
+package com.mysite.knitly.domain.payment.controller;
+
+import com.mysite.knitly.domain.payment.dto.PaymentCancelRequest;
+import com.mysite.knitly.domain.payment.dto.PaymentCancelResponse;
+import com.mysite.knitly.domain.payment.dto.PaymentConfirmRequest;
+import com.mysite.knitly.domain.payment.dto.PaymentConfirmResponse;
+import com.mysite.knitly.domain.payment.service.PaymentService;
+import jakarta.validation.Valid;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+@RestController
+@RequiredArgsConstructor
+@RequestMapping("/payments")
+public class PaymentController {
+    private final PaymentService paymentService;
+
+    //토스페이먼츠 결제 승인
+    @PostMapping("/confirm")
+    public ResponseEntity<PaymentConfirmResponse> confirmPayment(
+            @RequestBody @Valid PaymentConfirmRequest request
+    ) {
+        PaymentConfirmResponse response = paymentService.confirmPayment(request);
+        return ResponseEntity.ok(response);
+    }
+
+    // 결제 취소
+    @PostMapping("/{paymentId}/cancel")
+    public ResponseEntity<PaymentCancelResponse> cancelPayment(
+            @PathVariable Long paymentId,
+            @RequestBody @Valid PaymentCancelRequest request
+    ) {
+        PaymentCancelResponse response = paymentService.cancelPayment(paymentId, request);
+        return ResponseEntity.ok(response);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentCancelRequest.java b/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentCancelRequest.java
new file mode 100644
index 0000000..fb559da
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentCancelRequest.java
@@ -0,0 +1,9 @@
+package com.mysite.knitly.domain.payment.dto;
+
+import jakarta.validation.constraints.NotBlank;
+
+public record PaymentCancelRequest(
+        @NotBlank(message = "취소 사유는 필수입니다.")
+        String cancelReason
+) {
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentCancelResponse.java b/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentCancelResponse.java
new file mode 100644
index 0000000..20dda2f
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentCancelResponse.java
@@ -0,0 +1,20 @@
+package com.mysite.knitly.domain.payment.dto;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+import com.mysite.knitly.domain.payment.entity.PaymentStatus;
+import lombok.Builder;
+
+import java.time.LocalDateTime;
+
+@Builder
+@JsonInclude(JsonInclude.Include.NON_NULL)
+public record PaymentCancelResponse(
+        Long paymentId,
+        String paymentKey,
+        String orderId,
+        PaymentStatus status,
+        Long cancelAmount,
+        String cancelReason,
+        LocalDateTime canceledAt
+) {
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentConfirmRequest.java b/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentConfirmRequest.java
new file mode 100644
index 0000000..58ec1aa
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentConfirmRequest.java
@@ -0,0 +1,14 @@
+package com.mysite.knitly.domain.payment.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.NotNull;
+
+public record PaymentConfirmRequest (
+    @NotBlank(message = "paymentKey는 필수입니다.")
+    String paymentKey,
+    @NotBlank(message = "orderId는 필수입니다.")
+    String orderId,
+    @NotNull(message = "amount는 필수입니다.")
+    Long amount
+) {
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentConfirmResponse.java b/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentConfirmResponse.java
new file mode 100644
index 0000000..89717b6
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentConfirmResponse.java
@@ -0,0 +1,68 @@
+package com.mysite.knitly.domain.payment.dto;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+import com.mysite.knitly.domain.payment.entity.Payment;
+import com.mysite.knitly.domain.payment.entity.PaymentMethod;
+import com.mysite.knitly.domain.payment.entity.PaymentStatus;
+import lombok.Builder;
+
+import java.time.LocalDateTime;
+
+@Builder
+@JsonInclude(JsonInclude.Include.NON_NULL)
+public record PaymentConfirmResponse(
+        Long paymentId,
+        String paymentKey,
+        String orderId,
+        String orderName,
+        PaymentMethod method,
+        Long totalAmount,
+        PaymentStatus status,
+        LocalDateTime requestedAt,
+        LocalDateTime approvedAt,
+        String mid,
+        CardInfo card,
+        VirtualAccountInfo virtualAccount,
+        EasyPayInfo easyPay
+) {
+
+    @Builder
+    public record CardInfo(
+            String company,
+            String number,
+            String installmentPlanMonths,
+            String approveNo,
+            String ownerType
+    ) {}
+
+    @Builder
+    public record VirtualAccountInfo(
+            String accountNumber,
+            String bankCode,
+            String customerName,
+            LocalDateTime dueDate
+    ) {}
+
+    @Builder
+    public record EasyPayInfo(
+            String provider,
+            Long amount
+    ) {}
+
+    /**
+     * Payment 엔티티로부터 Response 생성
+     */
+    public static PaymentConfirmResponse from(Payment payment) {
+        return PaymentConfirmResponse.builder()
+                .paymentId(payment.getPaymentId())
+                .paymentKey(payment.getTossPaymentKey())
+                .orderId(payment.getTossOrderId())
+                .method(payment.getPaymentMethod())
+                .totalAmount(payment.getTotalAmount())
+                .status(payment.getPaymentStatus())
+                .requestedAt(payment.getRequestedAt())
+                .approvedAt(payment.getApprovedAt())
+                .mid(payment.getMid())
+                .build();
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentDetailResponse.java b/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentDetailResponse.java
new file mode 100644
index 0000000..d828172
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/payment/dto/PaymentDetailResponse.java
@@ -0,0 +1,48 @@
+package com.mysite.knitly.domain.payment.dto;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+import com.mysite.knitly.domain.payment.entity.Payment;
+import com.mysite.knitly.domain.payment.entity.PaymentMethod;
+import com.mysite.knitly.domain.payment.entity.PaymentStatus;
+import lombok.Builder;
+
+import java.time.LocalDateTime;
+
+@Builder
+@JsonInclude(JsonInclude.Include.NON_NULL)
+public record PaymentDetailResponse(
+        Long paymentId,
+        String paymentKey,
+        String orderId,
+        String orderName,
+        String mid,
+        PaymentMethod method,
+        Long totalAmount,
+        PaymentStatus status,
+        LocalDateTime requestedAt,
+        LocalDateTime approvedAt,
+        LocalDateTime canceledAt,
+        String cancelReason,
+        Long buyerId,
+        String buyerName
+) {
+
+    // Payment 엔티티로부터 기본 정보 생성
+    public static PaymentDetailResponse from(Payment payment) {
+        return PaymentDetailResponse.builder()
+                .paymentId(payment.getPaymentId())
+                .paymentKey(payment.getTossPaymentKey())
+                .orderId(payment.getTossOrderId())
+                .mid(payment.getMid())
+                .method(payment.getPaymentMethod())
+                .totalAmount(payment.getTotalAmount())
+                .status(payment.getPaymentStatus())
+                .requestedAt(payment.getRequestedAt())
+                .approvedAt(payment.getApprovedAt())
+                .canceledAt(payment.getCanceledAt())
+                .cancelReason(payment.getCancelReason())
+                .buyerId(payment.getBuyer().getUserId())
+                .buyerName(payment.getBuyer().getName())
+                .build();
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/payment/entity/Payment.java b/backend/src/main/java/com/mysite/knitly/domain/payment/entity/Payment.java
new file mode 100644
index 0000000..33583b2
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/payment/entity/Payment.java
@@ -0,0 +1,102 @@
+package com.mysite.knitly.domain.payment.entity;
+
+import com.mysite.knitly.domain.order.entity.Order;
+import com.mysite.knitly.domain.user.entity.User;
+import jakarta.persistence.*;
+import lombok.*;
+import org.springframework.data.annotation.CreatedDate;
+import org.springframework.data.jpa.domain.support.AuditingEntityListener;
+
+import java.time.LocalDateTime;
+
+@Entity
+@Getter
+@Setter
+@Builder
+@Table(name = "payments")
+@NoArgsConstructor(access = AccessLevel.PROTECTED)
+@AllArgsConstructor(access = AccessLevel.PROTECTED)
+@EntityListeners(AuditingEntityListener.class)
+public class Payment {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long paymentId;
+
+    @Column(nullable = false, unique = true)
+    private String tossPaymentKey; // 결제 고유 키
+
+    @Column(nullable = false)
+    private String tossOrderId; // 토스에서 관리하는 주문 번호
+
+    @Column(length=100)
+    private String mid; // 상점 id
+
+    @OneToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name= "order_id", nullable=false)
+    private Order order;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "user_id", nullable = false)
+    private User buyer; // 구매자 = Order.user
+
+    @Column(nullable = false)
+    private Long totalAmount; // 총 결제 금액
+
+    @Enumerated(value = EnumType.STRING)
+    @Column(nullable = false)
+    private PaymentMethod paymentMethod; // 결제 수단
+
+    @Enumerated(value = EnumType.STRING)
+    @Column(nullable = false)
+    private PaymentStatus paymentStatus; // 결제 상태
+
+    @CreatedDate
+    @Column(nullable = false, updatable = false)
+    private LocalDateTime requestedAt; // 결제 요청 시간
+
+    @Column
+    private LocalDateTime approvedAt; // 결제 승인 시간
+
+    @Column
+    private LocalDateTime canceledAt; // 결제 취소 시간
+
+    @Column(length = 500)
+    private String cancelReason; // 취소 사유 (취소 API에서 사용)
+
+
+    // 결제 승인 처리
+    public void approve(LocalDateTime approvedAt) {
+        this.paymentStatus = PaymentStatus.DONE;
+        this.approvedAt = approvedAt;
+    }
+
+    // 결제 취소 처리
+    public void cancel(String cancelReason) {
+        if (!this.isCancelable()) {
+            throw new IllegalStateException("취소할 수 없는 결제 상태입니다: " + this.paymentStatus);
+        }
+        this.paymentStatus = PaymentStatus.CANCELED;
+        this.canceledAt = LocalDateTime.now();
+        this.cancelReason = cancelReason;
+    }
+
+    // 결제 실패 처리
+    public void fail(String failureReason) {
+        this.paymentStatus = PaymentStatus.FAILED;
+    }
+
+    // 가상계좌 입금 대기 상태로 변경
+    public void waitingForDeposit() {
+        this.paymentStatus = PaymentStatus.WAITING_FOR_DEPOSIT;
+    }
+
+    // 결제 완료 여부 확인
+    public boolean isCompleted() {
+        return this.paymentStatus == PaymentStatus.DONE;
+    }
+
+    // 취소 가능 여부 확인
+    public boolean isCancelable() {
+        return this.paymentStatus.isCancelable();
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/payment/entity/PaymentMethod.java b/backend/src/main/java/com/mysite/knitly/domain/payment/entity/PaymentMethod.java
new file mode 100644
index 0000000..a29ff02
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/payment/entity/PaymentMethod.java
@@ -0,0 +1,20 @@
+package com.mysite.knitly.domain.payment.entity;
+
+public enum PaymentMethod {
+    // 카드, 가상계좌, 간편결제
+    CARD, VIRTUAL_ACCOUNT, EASY_PAY;
+
+    // 토스페이먼츠 API 응답의 method 값으로부터 enum 변환
+    public static PaymentMethod fromString(String method) {
+        if (method == null) {
+            throw new IllegalArgumentException("결제수단 정보가 없습니다.");
+        }
+
+        return switch (method.toUpperCase()) {
+            case "CARD", "카드" -> CARD;
+            case "VIRTUALACCOUNT", "VIRTUAL_ACCOUNT", "가상계좌" -> VIRTUAL_ACCOUNT;
+            case "EASYPAY", "EASY_PAY", "간편결제" -> EASY_PAY;
+            default -> throw new IllegalArgumentException("지원하지 않는 결제수단입니다: " + method);
+        };
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/payment/entity/PaymentStatus.java b/backend/src/main/java/com/mysite/knitly/domain/payment/entity/PaymentStatus.java
new file mode 100644
index 0000000..a6abccd
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/payment/entity/PaymentStatus.java
@@ -0,0 +1,39 @@
+package com.mysite.knitly.domain.payment.entity;
+
+public enum PaymentStatus {
+    // 결제 준비(승인 전), 결제 진행 중(인증 후 승인 API 호출 전), 입금 대기 중(가상계좌), 결제 완료, 결제 취소, 결제 승인 실패
+    READY, IN_PROGRESS, WAITING_FOR_DEPOSIT, DONE, CANCELED, FAILED;
+
+    // 토스페이먼츠 API 응답의 status 값으로부터 enum 변환
+    public static PaymentStatus fromString(String status) {
+        if (status == null) {
+            throw new IllegalArgumentException("결제 상태 정보가 없습니다.");
+        }
+
+        return switch (status.toUpperCase()) {
+            case "READY" -> READY;
+            case "IN_PROGRESS" -> IN_PROGRESS;
+            case "WAITING_FOR_DEPOSIT" -> WAITING_FOR_DEPOSIT;
+            case "DONE" -> DONE;
+            case "CANCELED", "PARTIAL_CANCELED" -> CANCELED; // 부분취소도 취소로 통합
+            case "ABORTED", "EXPIRED" -> FAILED; // 중단/만료도 실패로 통합
+            case "FAILED" -> FAILED;
+            default -> throw new IllegalArgumentException("지원하지 않는 결제 상태입니다: " + status);
+        };
+    }
+
+    // 결제가 완료된 상태인지 확인
+    public boolean isCompleted() {
+        return this == DONE;
+    }
+
+    // 결제를 취소할 수 있는 상태인지 확인
+    public boolean isCancelable() {
+        return this == DONE;
+    }
+
+    // 결제가 진행 중인 상태인지 확인
+    public boolean isInProgress() {
+        return this == IN_PROGRESS || this == WAITING_FOR_DEPOSIT;
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/payment/repository/PaymentRepository.java b/backend/src/main/java/com/mysite/knitly/domain/payment/repository/PaymentRepository.java
new file mode 100644
index 0000000..7848030
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/payment/repository/PaymentRepository.java
@@ -0,0 +1,12 @@
+package com.mysite.knitly.domain.payment.repository;
+
+import com.mysite.knitly.domain.payment.entity.Payment;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.Optional;
+
+public interface PaymentRepository extends JpaRepository<Payment, Long> {
+
+    Optional<Payment> findByOrder_OrderId(Long orderId);
+    Optional<Payment> findByTossPaymentKey(String tossPaymentKey);
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/payment/service/PaymentService.java b/backend/src/main/java/com/mysite/knitly/domain/payment/service/PaymentService.java
new file mode 100644
index 0000000..342055e
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/payment/service/PaymentService.java
@@ -0,0 +1,294 @@
+package com.mysite.knitly.domain.payment.service;
+
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.mysite.knitly.domain.order.entity.Order;
+import com.mysite.knitly.domain.order.repository.OrderRepository;
+import com.mysite.knitly.domain.payment.dto.*;
+import com.mysite.knitly.domain.payment.entity.Payment;
+import com.mysite.knitly.domain.payment.entity.PaymentMethod;
+import com.mysite.knitly.domain.payment.entity.PaymentStatus;
+import com.mysite.knitly.domain.payment.repository.PaymentRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.OutputStream;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.nio.charset.StandardCharsets;
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+import java.util.Base64;
+import java.util.HashMap;
+import java.util.Map;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class PaymentService {
+
+    private final OrderRepository orderRepository;
+    private final PaymentRepository paymentRepository;
+    private final ObjectMapper objectMapper;
+
+    @Value("${payment.toss.secret-key}")
+    private String tossSecretKey;
+
+    private static final String TOSS_PAYMENT_CONFIRM_URL = "https://api.tosspayments.com/v1/payments/confirm";
+    private static final String TOSS_PAYMENT_CANCEL_URL = "https://api.tosspayments.com/v1/payments/%s/cancel";
+
+    // 결제 승인
+    @Transactional
+    public PaymentConfirmResponse confirmPayment(PaymentConfirmRequest request) {
+        // 1. 주문 정보 조회 및 검증 (tossOrderId로 조회)
+        Order order = orderRepository.findByTossOrderId(request.orderId())
+                .orElseThrow(() -> new ServiceException(ErrorCode.ORDER_NOT_FOUND));
+
+        // 2. 주문 금액 검증
+        long orderAmount = order.getTotalPrice().longValue();
+        if (orderAmount != request.amount()) {
+            throw new ServiceException(ErrorCode.PAYMENT_AMOUNT_MISMATCH);
+        }
+
+        // 3. 중복 결제 방지
+        if (paymentRepository.findByOrder_OrderId(order.getOrderId()).isPresent()) {
+            throw new ServiceException(ErrorCode.PAYMENT_ALREADY_EXISTS);
+        }
+
+        // 4. 토스페이먼츠 결제 승인 API 호출
+        try {
+            JsonNode tossResponse = callTossPaymentConfirmApi(request);
+
+            // 5. Payment 엔티티 생성 및 저장
+            Payment payment = createPaymentFromTossResponse(order, tossResponse);
+            Payment savedPayment = paymentRepository.save(payment);
+
+            // 6. 응답 데이터 생성
+            PaymentConfirmResponse response = buildPaymentConfirmResponse(savedPayment, tossResponse);
+
+            log.info("결제 승인 성공 - orderId: {}, paymentKey: {}, amount: {}",
+                    request.orderId(), response.paymentKey(), response.totalAmount());
+
+            return response;
+
+        } catch (IOException e) {
+            log.error("토스페이먼츠 API 호출 실패", e);
+            throw new ServiceException(ErrorCode.PAYMENT_API_CALL_FAILED);
+        } catch (Exception e) {
+            log.error("결제 승인 처리 중 오류 발생", e);
+            throw new ServiceException(ErrorCode.PAYMENT_CONFIRM_FAILED);
+        }
+    }
+
+    // 결제 취소
+    @Transactional
+    public PaymentCancelResponse cancelPayment(Long paymentId, PaymentCancelRequest request) {
+        // 1. 결제 정보 조회
+        Payment payment = paymentRepository.findById(paymentId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.PAYMENT_NOT_FOUND));
+
+        // 2. 취소 가능 여부 확인
+        if (!payment.isCancelable()) {
+            throw new ServiceException(ErrorCode.PAYMENT_NOT_CANCELABLE);
+        }
+
+        // 3. 토스페이먼츠 결제 취소 API 호출
+        try {
+            callTossPaymentCancelApi(payment.getTossPaymentKey(), request.cancelReason());
+
+            // 4. 취소 처리
+            payment.cancel(request.cancelReason());
+            paymentRepository.save(payment);
+
+            // 5. 응답 생성
+            PaymentCancelResponse response = PaymentCancelResponse.builder()
+                    .paymentId(payment.getPaymentId())
+                    .paymentKey(payment.getTossPaymentKey())
+                    .orderId(payment.getTossOrderId())
+                    .status(payment.getPaymentStatus())
+                    .cancelAmount(payment.getTotalAmount())
+                    .cancelReason(request.cancelReason())
+                    .canceledAt(payment.getCanceledAt())
+                    .build();
+
+            log.info("결제 취소 성공 - paymentId: {}, amount: {}", paymentId, payment.getTotalAmount());
+
+            return response;
+
+        } catch (IOException e) {
+            log.error("토스페이먼츠 취소 API 호출 실패", e);
+            throw new ServiceException(ErrorCode.PAYMENT_CANCEL_API_FAILED);
+        }
+    }
+
+    // 토스페이먼츠 결제 승인 API 호출
+    private JsonNode callTossPaymentConfirmApi(PaymentConfirmRequest request) throws IOException {
+        String authorization = createBasicAuthHeader(tossSecretKey);
+        String requestBody = objectMapper.writeValueAsString(request);
+
+        URL url = new URL(TOSS_PAYMENT_CONFIRM_URL);
+        HttpURLConnection connection = (HttpURLConnection) url.openConnection();
+        connection.setRequestProperty("Authorization", authorization);
+        connection.setRequestProperty("Content-Type", "application/json");
+        connection.setRequestMethod("POST");
+        connection.setDoOutput(true);
+
+        try (OutputStream os = connection.getOutputStream()) {
+            os.write(requestBody.getBytes(StandardCharsets.UTF_8));
+        }
+
+        return handleTossApiResponse(connection);
+    }
+
+    // 토스페이먼츠 결제 취소 API 호출
+    private JsonNode callTossPaymentCancelApi(String paymentKey, String cancelReason) throws IOException {
+        String authorization = createBasicAuthHeader(tossSecretKey);
+
+        Map<String, String> requestBody = new HashMap<>();
+        requestBody.put("cancelReason", cancelReason);
+        String requestBodyJson = objectMapper.writeValueAsString(requestBody);
+
+        URL url = new URL(String.format(TOSS_PAYMENT_CANCEL_URL, paymentKey));
+        HttpURLConnection connection = (HttpURLConnection) url.openConnection();
+        connection.setRequestProperty("Authorization", authorization);
+        connection.setRequestProperty("Content-Type", "application/json");
+        connection.setRequestMethod("POST");
+        connection.setDoOutput(true);
+
+        try (OutputStream os = connection.getOutputStream()) {
+            os.write(requestBodyJson.getBytes(StandardCharsets.UTF_8));
+        }
+
+        return handleTossApiResponse(connection);
+    }
+
+    // 토스 API 응답 처리
+    private JsonNode handleTossApiResponse(HttpURLConnection connection) throws IOException {
+        int responseCode = connection.getResponseCode();
+        boolean isSuccess = responseCode == 200;
+
+        try (InputStream is = isSuccess ? connection.getInputStream() : connection.getErrorStream()) {
+            JsonNode responseJson = objectMapper.readTree(is);
+
+            if (!isSuccess) {
+                String errorCode = responseJson.has("code") ? responseJson.get("code").asText() : "UNKNOWN";
+                String errorMessage = responseJson.has("message") ? responseJson.get("message").asText() : "API 호출 실패";
+                log.error("토스페이먼츠 API 실패 - code: {}, message: {}", errorCode, errorMessage);
+                throw new ServiceException(ErrorCode.PAYMENT_API_CALL_FAILED);
+            }
+
+            return responseJson;
+        }
+    }
+
+    // Basic 인증 헤더 생성
+    private String createBasicAuthHeader(String secretKey) {
+        String credentials = secretKey + ":";
+        String encodedCredentials = Base64.getEncoder()
+                .encodeToString(credentials.getBytes(StandardCharsets.UTF_8));
+        return "Basic " + encodedCredentials;
+    }
+
+    // 토스 응답으로부터 Payment 엔티티 생성
+    private Payment createPaymentFromTossResponse(Order order, JsonNode tossResponse) {
+        String method = tossResponse.get("method").asText();
+        String status = tossResponse.get("status").asText();
+
+        Payment payment = Payment.builder()
+                .tossPaymentKey(tossResponse.get("paymentKey").asText())
+                .tossOrderId(tossResponse.get("orderId").asText())
+                .mid(tossResponse.has("mId") ? tossResponse.get("mId").asText() : null)
+                .order(order)
+                .buyer(order.getUser())
+                .totalAmount(tossResponse.get("totalAmount").asLong())
+                .paymentMethod(PaymentMethod.fromString(method))
+                .paymentStatus(PaymentStatus.fromString(status))
+                .build();
+
+        if (tossResponse.has("approvedAt")) {
+            String approvedAtStr = tossResponse.get("approvedAt").asText();
+            LocalDateTime approvedAt = LocalDateTime.parse(approvedAtStr, DateTimeFormatter.ISO_DATE_TIME);
+            payment.approve(approvedAt);
+        }
+
+        return payment;
+    }
+
+    // PaymentConfirmResponse 생성
+    private PaymentConfirmResponse buildPaymentConfirmResponse(Payment payment, JsonNode tossResponse) {
+        PaymentConfirmResponse.PaymentConfirmResponseBuilder builder = PaymentConfirmResponse.builder()
+                .paymentId(payment.getPaymentId())
+                .paymentKey(payment.getTossPaymentKey())
+                .orderId(payment.getTossOrderId())
+                .orderName(tossResponse.has("orderName") ? tossResponse.get("orderName").asText() : null)
+                .method(payment.getPaymentMethod())
+                .totalAmount(payment.getTotalAmount())
+                .status(payment.getPaymentStatus())
+                .requestedAt(payment.getRequestedAt())
+                .approvedAt(payment.getApprovedAt())
+                .mid(tossResponse.has("mId") ? tossResponse.get("mId").asText() : null);
+
+        // 카드 결제 정보
+        if (tossResponse.has("card")) {
+            JsonNode card = tossResponse.get("card");
+            builder.card(PaymentConfirmResponse.CardInfo.builder()
+                    .company(card.has("company") ? card.get("company").asText() : null)
+                    .number(card.has("number") ? card.get("number").asText() : null)
+                    .installmentPlanMonths(card.has("installmentPlanMonths") ?
+                            card.get("installmentPlanMonths").asText() : null)
+                    .approveNo(card.has("approveNo") ? card.get("approveNo").asText() : null)
+                    .ownerType(card.has("ownerType") ? card.get("ownerType").asText() : null)
+                    .build());
+        }
+
+        // 가상계좌 정보
+        if (tossResponse.has("virtualAccount")) {
+            JsonNode va = tossResponse.get("virtualAccount");
+            PaymentConfirmResponse.VirtualAccountInfo.VirtualAccountInfoBuilder vaBuilder =
+                    PaymentConfirmResponse.VirtualAccountInfo.builder()
+                            .accountNumber(va.has("accountNumber") ? va.get("accountNumber").asText() : null)
+                            .bankCode(va.has("bankCode") ? va.get("bankCode").asText() : null)
+                            .customerName(va.has("customerName") ? va.get("customerName").asText() : null);
+
+            if (va.has("dueDate")) {
+                String dueDateStr = va.get("dueDate").asText();
+                vaBuilder.dueDate(LocalDateTime.parse(dueDateStr, DateTimeFormatter.ISO_DATE_TIME));
+            }
+
+            builder.virtualAccount(vaBuilder.build());
+        }
+
+        // 간편결제 정보
+        if (tossResponse.has("easyPay")) {
+            JsonNode easyPay = tossResponse.get("easyPay");
+            builder.easyPay(PaymentConfirmResponse.EasyPayInfo.builder()
+                    .provider(easyPay.has("provider") ? easyPay.get("provider").asText() : null)
+                    .amount(easyPay.has("amount") ? easyPay.get("amount").asLong() : null)
+                    .build());
+        }
+
+        return builder.build();
+    }
+
+    // 마이페이지에서 주문의 결제 내역 단건 조회
+
+    @Transactional(readOnly = true)
+    public PaymentDetailResponse getPaymentDetailByOrder(User user, Long orderId) {
+        Payment payment = paymentRepository.findByOrder_OrderId(orderId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.PAYMENT_NOT_FOUND));
+
+        // 본인 결제 내역인지 확인
+        if (!payment.getBuyer().getUserId().equals(user.getUserId())) {
+            throw new ServiceException(ErrorCode.PAYMENT_UNAUTHORIZED_ACCESS);
+        }
+        return PaymentDetailResponse.from(payment);
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/like/consumer/LikeEventConsumer.java b/backend/src/main/java/com/mysite/knitly/domain/product/like/consumer/LikeEventConsumer.java
new file mode 100644
index 0000000..4dc727c
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/like/consumer/LikeEventConsumer.java
@@ -0,0 +1,100 @@
+package com.mysite.knitly.domain.product.like.consumer;
+
+import com.mysite.knitly.domain.product.like.dto.LikeEventRequest;
+import com.mysite.knitly.domain.product.like.entity.ProductLike;
+import com.mysite.knitly.domain.product.like.entity.ProductLikeId;
+import com.mysite.knitly.domain.product.like.repository.ProductLikeRepository;
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.repository.ProductRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.amqp.AmqpRejectAndDontRequeueException;
+import org.springframework.data.redis.core.RedisTemplate;
+import org.springframework.stereotype.Component;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.amqp.rabbit.annotation.RabbitListener;
+
+@Slf4j
+@Component
+@RequiredArgsConstructor
+public class LikeEventConsumer {
+
+    private final ProductLikeRepository productLikeRepository;
+    private final UserRepository userRepository;
+    private final ProductRepository productRepository;
+    private final RedisTemplate<String, String> redisTemplate;
+
+    private static final String LIKE_QUEUE_NAME = "like.add.queue";
+    private static final String DISLIKE_QUEUE_NAME = "like.delete.queue";
+
+    @Transactional
+    @RabbitListener(queues = LIKE_QUEUE_NAME)
+    public void handleLikeEvent(LikeEventRequest eventDto) {
+        String redisKey = "likes:product:" + eventDto.productId();
+        String userKey = eventDto.userId().toString();
+
+        try {
+            User user = userRepository.findById(eventDto.userId())
+                    .orElseThrow(() -> new ServiceException(ErrorCode.USER_NOT_FOUND));
+
+            Product product = productRepository.findById(eventDto.productId())
+                    .orElseThrow(() -> new ServiceException(ErrorCode.PRODUCT_NOT_FOUND));
+
+            ProductLikeId productLikeId = new ProductLikeId(user.getUserId(), product.getProductId());
+
+            if (productLikeRepository.existsById(productLikeId)) {
+                log.info("Like already exists in DB. Skipping: {}", productLikeId);
+                return;
+            }
+
+            ProductLike productLike = ProductLike.builder()
+                    .user(user)
+                    .product(product)
+                    .build();
+
+            product.increaseLikeCount();
+
+            // 5. DB 저장
+            productLikeRepository.save(productLike);
+            log.info("Successfully saved like to DB: {}", productLikeId);
+
+        } catch (Exception e) {
+            log.error("Failed to save like to DB. Rolling back Redis cache for {}.", redisKey, e);
+
+            redisTemplate.opsForSet().remove(redisKey, userKey);
+
+            throw new AmqpRejectAndDontRequeueException("DB save failed, cache rolled back.", e);
+        }
+    }
+
+    @Transactional
+    @RabbitListener(queues = DISLIKE_QUEUE_NAME)
+    public void handleDislikeEvent(LikeEventRequest eventDto) {
+        log.info("[handleDislikeEvent] received event: {}", eventDto);
+        ProductLikeId productLikeId = new ProductLikeId(eventDto.userId(), eventDto.productId());
+
+        try {
+            if (productLikeRepository.existsById(productLikeId)) {
+
+                Product product = productRepository.findById(eventDto.productId())
+                        .orElseThrow(() -> new ServiceException(ErrorCode.PRODUCT_NOT_FOUND));
+
+                product.decreaseLikeCount();
+
+                productLikeRepository.deleteById(productLikeId);
+
+                log.info("[handleDislikeEvent] ProductLike deleted and count decremented: {}", productLikeId);
+
+            } else {
+                log.warn("[handleDislikeEvent] ProductLike not found in DB, skipping: {}", productLikeId);
+            }
+        } catch (Exception e) {
+            log.error("[handleDislikeEvent] Error processing dislike event: {}", eventDto, e);
+            throw new AmqpRejectAndDontRequeueException("DB operation failed during dislike.", e);
+        }
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/like/controller/ProductLikeController.java b/backend/src/main/java/com/mysite/knitly/domain/product/like/controller/ProductLikeController.java
new file mode 100644
index 0000000..86d63c3
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/like/controller/ProductLikeController.java
@@ -0,0 +1,39 @@
+package com.mysite.knitly.domain.product.like.controller;
+
+import com.mysite.knitly.domain.product.like.service.ProductLikeService;
+import com.mysite.knitly.domain.user.entity.User;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.UUID;
+
+@RequiredArgsConstructor
+@RestController
+@RequestMapping("/products/{productId}/like")
+public class ProductLikeController {
+    private final ProductLikeService productLikeService;
+
+    @PostMapping
+    public ResponseEntity<Void> addLike(
+            @AuthenticationPrincipal User user,
+            @PathVariable Long productId) {
+
+        Long currentUserId = user.getUserId();
+        productLikeService.addLike(currentUserId, productId);
+
+        return ResponseEntity.ok().build();
+    }
+
+    @DeleteMapping
+    public ResponseEntity<Void> deleteLike(
+            @AuthenticationPrincipal User user,
+            @PathVariable Long productId) {
+
+        Long currentUserId = user.getUserId();
+        productLikeService.deleteLike(currentUserId, productId);
+
+        return ResponseEntity.ok().build();
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/like/dto/LikeEventRequest.java b/backend/src/main/java/com/mysite/knitly/domain/product/like/dto/LikeEventRequest.java
new file mode 100644
index 0000000..4887c80
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/like/dto/LikeEventRequest.java
@@ -0,0 +1,5 @@
+package com.mysite.knitly.domain.product.like.dto;
+
+import java.io.Serializable;
+
+public record LikeEventRequest(Long userId, Long productId) implements Serializable {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/like/entity/ProductLike.java b/backend/src/main/java/com/mysite/knitly/domain/product/like/entity/ProductLike.java
new file mode 100644
index 0000000..506593f
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/like/entity/ProductLike.java
@@ -0,0 +1,26 @@
+package com.mysite.knitly.domain.product.like.entity;
+
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.user.entity.User;
+import jakarta.persistence.*;
+import lombok.*;
+
+@Entity
+@Getter
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+@Table(name = "product_likes")
+@IdClass(ProductLikeId.class) // 복합 키 클래스
+public class ProductLike {
+
+    @Id
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "user_id")
+    private User user;
+
+    @Id
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "product_id")
+    private Product product;
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/like/entity/ProductLikeId.java b/backend/src/main/java/com/mysite/knitly/domain/product/like/entity/ProductLikeId.java
new file mode 100644
index 0000000..5263006
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/like/entity/ProductLikeId.java
@@ -0,0 +1,18 @@
+package com.mysite.knitly.domain.product.like.entity;
+
+import lombok.AllArgsConstructor;
+import lombok.EqualsAndHashCode;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+
+import java.io.Serializable;
+import java.util.UUID;
+
+@Getter
+@NoArgsConstructor
+@AllArgsConstructor
+@EqualsAndHashCode
+public class ProductLikeId implements Serializable {
+    private Long user;
+    private Long product;
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/like/repository/ProductLikeRepository.java b/backend/src/main/java/com/mysite/knitly/domain/product/like/repository/ProductLikeRepository.java
new file mode 100644
index 0000000..9fbeff2
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/like/repository/ProductLikeRepository.java
@@ -0,0 +1,30 @@
+package com.mysite.knitly.domain.product.like.repository;
+
+import com.mysite.knitly.domain.product.like.entity.ProductLike;
+import com.mysite.knitly.domain.product.like.entity.ProductLikeId;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.CrudRepository;
+import org.springframework.data.repository.query.Param;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Set;
+
+@Repository
+public interface ProductLikeRepository extends JpaRepository<ProductLike, ProductLikeId> {
+    Page<ProductLike> findByUser_UserId(Long userId, Pageable pageable);
+
+    default void deleteByUserIdAndProductId(Long userId, Long productId) {
+        ProductLikeId id = new ProductLikeId(userId, productId);
+        deleteById(id);
+    }
+
+    @Query("SELECT pl.product.productId FROM ProductLike pl WHERE pl.user.userId = :userId AND pl.product.productId IN :productIds")
+    Set<Long> findLikedProductIdsByUserId(@Param("userId") Long userId, @Param("productIds") List<Long> productIds);
+
+    boolean existsByUser_UserIdAndProduct_ProductId(Long userId, Long productId);
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/like/service/ProductLikeService.java b/backend/src/main/java/com/mysite/knitly/domain/product/like/service/ProductLikeService.java
new file mode 100644
index 0000000..717869c
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/like/service/ProductLikeService.java
@@ -0,0 +1,48 @@
+package com.mysite.knitly.domain.product.like.service;
+
+import com.mysite.knitly.domain.product.like.dto.LikeEventRequest;
+import com.mysite.knitly.domain.product.like.repository.ProductLikeRepository;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.amqp.rabbit.core.RabbitTemplate;
+import org.springframework.data.redis.core.RedisTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class ProductLikeService {
+    private final RedisTemplate<String, String> redisTemplate;
+    private final RabbitTemplate rabbitTemplate;
+    private final ProductLikeRepository productLikeRepository;
+
+    private static final String EXCHANGE_NAME = "like.exchange";
+
+    private static final String LIKE_ROUTING_KEY = "like.add.routingkey";
+    private static final String DISLIKE_ROUTING_KEY = "like.delete.routingkey";
+
+    public void addLike(Long userId, Long productId) {
+        String redisKey = "likes:product:" + productId;
+        String userKey = userId.toString();
+
+        redisTemplate.opsForSet().add(redisKey, userKey);
+        LikeEventRequest eventDto = new LikeEventRequest(userId, productId);
+        rabbitTemplate.convertAndSend(EXCHANGE_NAME, LIKE_ROUTING_KEY, eventDto);
+    }
+
+    @Transactional
+    public void deleteLike(Long userId, Long productId) {
+        String redisKey = "likes:product:" + productId;
+        String userKey = userId.toString();
+
+        // Redis에서 제거
+        redisTemplate.opsForSet().remove(redisKey, userKey);
+
+        // DB 삭제는 항상 수행
+        LikeEventRequest eventDto = new LikeEventRequest(userId, productId);
+        rabbitTemplate.convertAndSend(EXCHANGE_NAME, DISLIKE_ROUTING_KEY, eventDto);
+
+        log.info("[deleteLike] Deleted like for userId={}, productId={}", userId, productId);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/controller/ProductController.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/controller/ProductController.java
new file mode 100644
index 0000000..1779924
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/controller/ProductController.java
@@ -0,0 +1,64 @@
+package com.mysite.knitly.domain.product.product.controller;
+
+
+import com.mysite.knitly.domain.product.product.dto.ProductModifyRequest;
+import com.mysite.knitly.domain.product.product.dto.ProductModifyResponse;
+import com.mysite.knitly.domain.product.product.dto.ProductRegisterRequest;
+import com.mysite.knitly.domain.product.product.dto.ProductRegisterResponse;
+import com.mysite.knitly.domain.product.product.service.ProductService;
+import com.mysite.knitly.domain.user.entity.User;
+import jakarta.validation.Valid;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.UUID;
+
+@RestController
+@RequiredArgsConstructor
+@RequestMapping("/my/products")
+public class ProductController {
+
+    private final ProductService productService;
+
+    // 판매 등록
+    @PostMapping("/{designId}/sale")
+    public ResponseEntity<ProductRegisterResponse> registerProduct(
+            @AuthenticationPrincipal User user,
+            @PathVariable Long designId,
+            @ModelAttribute @Valid ProductRegisterRequest request
+    ) {
+        ProductRegisterResponse response = productService.registerProduct(user, designId, request);
+        return ResponseEntity.ok(response);
+    }
+
+    @PatchMapping("/{productId}/modify")
+    public ResponseEntity<ProductModifyResponse> modifyProduct(
+            @AuthenticationPrincipal User user,
+            @PathVariable Long productId,
+            @ModelAttribute @Valid ProductModifyRequest request
+    ) {
+        ProductModifyResponse response = productService.modifyProduct(user, productId, request);
+        return ResponseEntity.ok(response);
+    }
+
+    @DeleteMapping("/{productId}")
+    public ResponseEntity<Void> deleteProduct(
+            @AuthenticationPrincipal User user,
+            @PathVariable Long productId
+    ) {
+        productService.deleteProduct(user, productId);
+        return ResponseEntity.noContent().build();
+    }
+
+    //재판매
+    @PostMapping("/{productId}/relist")
+    public ResponseEntity<Void> relistProduct(
+            @AuthenticationPrincipal User user,
+            @PathVariable Long productId
+    ) {
+        productService.relistProduct(user, productId);
+        return ResponseEntity.ok().build();
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/controller/ProductListController.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/controller/ProductListController.java
new file mode 100644
index 0000000..5feee3f
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/controller/ProductListController.java
@@ -0,0 +1,48 @@
+package com.mysite.knitly.domain.product.product.controller;
+
+import com.mysite.knitly.domain.product.product.dto.ProductDetailResponse;
+import com.mysite.knitly.domain.product.product.dto.ProductListResponse;
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+import com.mysite.knitly.domain.product.product.entity.ProductFilterType;
+import com.mysite.knitly.domain.product.product.entity.ProductSortType;
+import com.mysite.knitly.domain.product.product.service.ProductService;
+import com.mysite.knitly.domain.user.entity.User;
+import lombok.Getter;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.web.PageableDefault;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@RequiredArgsConstructor
+@RequestMapping("/products")
+public class ProductListController {
+    private final ProductService productService;
+
+    // 상품 목록 조회
+    @GetMapping
+    public ResponseEntity<Page<ProductListResponse>> getProducts(
+            @AuthenticationPrincipal User user,
+            @RequestParam(required = false) ProductCategory category,
+            @RequestParam(required = false, defaultValue = "ALL") ProductFilterType filter,
+            @RequestParam(required = false, defaultValue = "LATEST") ProductSortType sort,
+            @PageableDefault(size = 20) Pageable pageable
+    ) {
+        Page<ProductListResponse> response = productService.getProducts(user, category, filter, sort, pageable);
+        return ResponseEntity.ok(response);
+    }
+
+    @GetMapping("/{productId}")
+    public ResponseEntity<ProductDetailResponse> getProductDetail(
+            @AuthenticationPrincipal User user,
+            @PathVariable Long productId
+    ) {
+        ProductDetailResponse response = productService.getProductDetail(user, productId);
+        return ResponseEntity.ok(response);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductDetailResponse.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductDetailResponse.java
new file mode 100644
index 0000000..74407dc
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductDetailResponse.java
@@ -0,0 +1,44 @@
+package com.mysite.knitly.domain.product.product.dto;
+
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+
+import java.util.List;
+
+public record ProductDetailResponse(
+        Long productId,
+        String title,
+        String description,
+        ProductCategory productCategory,
+        String sizeInfo,
+        Double price,
+        String createdAt,
+        Integer stockQuantity,
+
+        Integer likeCount,
+
+        boolean isLikedByUser,
+        //Long designId
+        Double avgReviewRating,
+        List<String> productImageUrls,
+        Integer reviewCount
+) {
+    public static ProductDetailResponse from(Product product, List<String> imageUrls, boolean isLikedByUser) {
+        return new ProductDetailResponse(
+                product.getProductId(),
+                product.getTitle(),
+                product.getDescription(),
+                product.getProductCategory(),
+                product.getSizeInfo(),
+                product.getPrice(),
+                product.getCreatedAt().toString(),
+                product.getStockQuantity(),
+                product.getLikeCount(),
+                isLikedByUser,
+                //product.getDesign().getDesignId()
+                product.getAvgReviewRating(),
+                imageUrls,
+                product.getReviewCount() != null ? product.getReviewCount() : 0 // null 방지
+        );
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductListResponse.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductListResponse.java
new file mode 100644
index 0000000..c65d1db
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductListResponse.java
@@ -0,0 +1,56 @@
+package com.mysite.knitly.domain.product.product.dto;
+
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+
+import java.time.LocalDateTime;
+
+public record ProductListResponse(
+        Long productId,
+        String title,
+        ProductCategory productCategory,
+        Double price,
+        Integer purchaseCount,
+        Integer likeCount,
+        boolean isLikedByUser,
+        Integer stockQuantity,
+        Double avgReviewRating,
+        LocalDateTime createdAt,
+        String thumbnailUrl,// 대표 이미지 URL (sortOrder = 1)
+        String sellerName,
+        Boolean isFree,     // 무료 여부
+        Boolean isLimited,  // 한정판매 여부
+        Boolean isSoldOut   // 품절 여부 (stockQuantity = 0)
+) {
+    public static ProductListResponse from(Product product, boolean isLikedByUser) {
+        // Product의 첫 번째 이미지를 thumbnailUrl로 사용
+        String thumbnailUrl = null;
+        if (product.getProductImages() != null && !product.getProductImages().isEmpty()) {
+            // sortOrder가 1인 이미지를 찾거나, 없으면 첫 번째 이미지 사용
+            thumbnailUrl = product.getProductImages().stream()
+                    .filter(img -> img.getSortOrder() != null && img.getSortOrder() == 1L)
+                    .findFirst()
+                    .map(img -> img.getProductImageUrl())
+                    .orElseGet(() -> product.getProductImages().get(0).getProductImageUrl());
+        }
+
+        // record는 생성자를 통해 필드를 초기화합니다.
+        return new ProductListResponse(
+                product.getProductId(),
+                product.getTitle(),
+                product.getProductCategory(),
+                product.getPrice(),
+                product.getPurchaseCount(),
+                product.getLikeCount(),
+                isLikedByUser,
+                product.getStockQuantity(),
+                product.getAvgReviewRating(),
+                product.getCreatedAt(),
+                thumbnailUrl, // 🔥 수정: Product의 첫 번째 이미지 URL
+                product.getUser() !=null? product.getUser().getName() : "알 수 없음",
+                product.getPrice() == 0.0,
+                product.getStockQuantity() != null,
+                product.getStockQuantity() != null && product.getStockQuantity() == 0
+        );
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductModifyRequest.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductModifyRequest.java
new file mode 100644
index 0000000..203fcd9
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductModifyRequest.java
@@ -0,0 +1,28 @@
+package com.mysite.knitly.domain.product.product.dto;
+
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+import jakarta.validation.constraints.NotNull;
+import jakarta.validation.constraints.Pattern;
+import jakarta.validation.constraints.Size;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.util.List;
+
+public record ProductModifyRequest(
+        @Pattern(regexp = "^[a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣\\s~!@#$%^&*()_+\\-=\\[\\]{}|;:'\",.<>/?]+$", message = "사이즈 정보에는 한글, 영어, 숫자, 일부 특수문자만 사용할 수 있습니다.")
+        String description,
+
+        @NotNull(message = "상품 카테고리는 필수입니다.")
+        ProductCategory productCategory,
+
+        @Pattern(regexp = "^[a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣\\s~!@#$%^&*()_+\\-=\\[\\]{}|;:'\",.<>/?]+$", message = "사이즈 정보에는 한글, 영어, 숫자, 일부 특수문자만 사용할 수 있습니다.")
+        String sizeInfo,
+
+        @Size(max = 10, message = "상품 이미지는 최대 10개까지 등록할 수 있습니다.")
+        List<MultipartFile> productImageUrls,
+
+        List<String> existingImageUrls,
+
+        Integer stockQuantity
+){
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductModifyResponse.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductModifyResponse.java
new file mode 100644
index 0000000..c7d92ac
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductModifyResponse.java
@@ -0,0 +1,29 @@
+package com.mysite.knitly.domain.product.product.dto;
+
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+
+import java.util.List;
+
+public record ProductModifyResponse (
+        Long productId,
+        String title,
+        String description,
+        ProductCategory productCategory,
+        String sizeInfo,
+        Integer stockQuantity,
+        List<String> productImageUrls
+
+){
+    public static ProductModifyResponse from(Product product, List<String> imageUrls) {
+        return new ProductModifyResponse(
+                product.getProductId(),
+                product.getTitle(),
+                product.getDescription(),
+                product.getProductCategory(),
+                product.getSizeInfo(),
+                product.getStockQuantity(),
+                imageUrls
+        );
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductRegisterRequest.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductRegisterRequest.java
new file mode 100644
index 0000000..6e6e6b5
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductRegisterRequest.java
@@ -0,0 +1,33 @@
+package com.mysite.knitly.domain.product.product.dto;
+
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+import jakarta.validation.constraints.Min;
+import jakarta.validation.constraints.NotNull;
+import jakarta.validation.constraints.Pattern;
+import jakarta.validation.constraints.Size;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.util.List;
+
+public record ProductRegisterRequest(
+        @Pattern(regexp = "^[a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣\\s~!@#$%^&*()_+\\-=\\[\\]{}|;:'\",.<>/?]+$", message = "상품 이름에는 한글, 영어, 숫자, 일부 특수문자만 사용할 수 있습니다.")
+        String title,
+
+        @Pattern(regexp = "^[a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣\\s~!@#$%^&*()_+\\-=\\[\\]{}|;:'\",.<>/?]+$", message = "상품 이름에는 한글, 영어, 숫자, 일부 특수문자만 사용할 수 있습니다.")
+        String description,
+
+        @NotNull(message = "상품 카테고리는 필수입니다.")
+        ProductCategory productCategory,
+
+        @Pattern(regexp = "^[a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣\\s~!@#$%^&*()_+\\-=\\[\\]{}|;:'\",.<>/?]+$", message = "사이즈 정보에는 한글, 영어, 숫자, 일부 특수문자만 사용할 수 있습니다.")
+        String sizeInfo,
+
+        @Min(value = 0, message = "가격은 반드시 0원 이상이어야 합니다.")
+        Double price,
+
+        @Size(max = 10, message = "상품 이미지는 최대 10개까지 등록할 수 있습니다.")
+        List<MultipartFile> productImageUrls,
+
+        Integer stockQuantity
+) {
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductRegisterResponse.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductRegisterResponse.java
new file mode 100644
index 0000000..c8203b1
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductRegisterResponse.java
@@ -0,0 +1,55 @@
+package com.mysite.knitly.domain.product.product.dto;
+
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+
+import java.util.List;
+
+public record ProductRegisterResponse (
+        Long productId,
+        String title,
+        String description,
+        ProductCategory productCategory,
+        String sizeInfo,
+        Double price,
+        String createdAt,
+        //Integer purchaseCount,
+        Integer stockQuantity,
+        //Integer likeCount,
+        Long designId,
+        List<String> productImageUrls
+) {
+    public static ProductRegisterResponse from(Product product, List<String> imageUrls) {
+        return new ProductRegisterResponse(
+                product.getProductId(),
+                product.getTitle(),
+                product.getDescription(),
+                product.getProductCategory(),
+                product.getSizeInfo(),
+                product.getPrice(),
+                product.getCreatedAt().toString(),
+                //product.getPurchaseCount(),
+                product.getStockQuantity(),
+                //product.getLikeCount(),
+                product.getDesign().getDesignId(),
+                imageUrls
+        );
+    }
+}
+
+//CREATE TABLE `products` (
+//        `product_id`	BIGINT	NOT NULL	DEFAULT AUTO_INCREMENT,
+//        `title`	VARCHAR(30)	NOT NULL,
+//	`description`	TEXT	NOT NULL,
+//        `product_category`	ENUM('TOP', 'BOTTOM', 'OUTER', 'BAG', 'ETC')	NOT NULL	COMMENT '상의, 하의, 아우터, 가방, 기타',
+//        `size_info`	VARCHAR(255)	NOT NULL,
+//	`price`	DECIMAL(10,2)	NOT NULL	COMMENT '무료 구분',
+//        `created_at`	DATETIME	NOT NULL	DEFAULT CURRENT_TIMESTAMP,
+//        `user_id`	BINARY(16)	NOT NULL,
+//	`purchase_count`	INT	NOT NULL	DEFAULT 0	COMMENT '누적수 분리?',
+//        `is_deleted`	BOOLEAN	NOT NULL	DEFAULT FALSE	COMMENT '소프트 딜리트',
+//        `stock_quantity`	INT	NULL	COMMENT 'null 이면 상시 판매 / 0~숫자 는 한정판매',
+//        `like_count`	INT	NOT NULL	DEFAULT 0,
+//        `design_id`	BIGINT	NOT NULL	DEFAULT AUTO_INCREMENT,
+//        `avg_review_rating`	DECIMAL(3,2)	NULL
+//);
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductWithThumbnailDto.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductWithThumbnailDto.java
new file mode 100644
index 0000000..fc416d4
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/dto/ProductWithThumbnailDto.java
@@ -0,0 +1,49 @@
+package com.mysite.knitly.domain.product.product.dto;
+
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+
+import java.time.LocalDateTime;
+
+/**
+ * 상품 목록 조회용 DTO (대표 이미지 포함)
+ * Native Query의 결과를 매핑
+ */
+public record ProductWithThumbnailDto (Long productId,
+                                       String title,
+                                       ProductCategory productCategory,
+                                       Double price,
+                                       Integer purchaseCount,
+                                       Integer likeCount,
+                                       Integer stockQuantity,
+                                       Double avgReviewRating,
+                                       LocalDateTime createdAt,
+                                       String thumbnailUrl){
+
+
+
+    /**
+     * ProductListResponse로 변환
+     */
+    public ProductListResponse toResponse(boolean isLikedByUser, String sellerName) {
+        return new ProductListResponse(
+                this.productId,
+                this.title,
+                this.productCategory,
+                this.price,
+                this.purchaseCount,
+                this.likeCount,
+                isLikedByUser,
+                this.stockQuantity,
+                this.avgReviewRating,
+                this.createdAt,
+                this.thumbnailUrl, // thumbnailUrl
+                sellerName,
+                // 추가로 계산된 Boolean 필드들
+                this.price == 0.0, // isFree
+                this.stockQuantity != null, // isLimited
+                this.stockQuantity != null && this.stockQuantity == 0 // isSoldOut
+        );
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/Product.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/Product.java
new file mode 100644
index 0000000..6fa59cd
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/Product.java
@@ -0,0 +1,169 @@
+package com.mysite.knitly.domain.product.product.entity;
+
+import com.mysite.knitly.domain.design.entity.Design;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import org.springframework.data.annotation.CreatedDate;
+import org.springframework.data.jpa.domain.support.AuditingEntityListener;
+
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
+
+@Entity
+@Getter
+@NoArgsConstructor
+@Table(name = "products")
+@AllArgsConstructor
+@Builder
+@EntityListeners(AuditingEntityListener.class)
+public class Product {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long productId;
+
+    @Column(nullable = false, length = 30)
+    private String title;
+
+    @Column(nullable = false, columnDefinition = "TEXT")
+    private String description;
+
+
+    @Enumerated(EnumType.STRING)
+    @Column(nullable = false)
+    private ProductCategory productCategory; // 'TOP', 'BOTTOM', 'OUTER', 'BAG', 'ETC'
+
+    @Column(nullable = false)
+    private String sizeInfo;
+
+    @Column(nullable = false, columnDefinition = "DECIMAL(10,2)")
+    private Double price; // DECIMAL(10,2)
+
+    @Column(nullable = false)
+    @CreatedDate
+    private LocalDateTime createdAt; // DATETIME
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    //Cascade 안하는 이유 : User 삭제시 Product도 삭제되면 안됨
+    @JoinColumn(name = "user_id", nullable = false)
+    private User user; // 판매자
+
+    @Column(nullable = false)
+    private Integer purchaseCount; // 누적수
+
+    @Column(nullable = false)
+    private Boolean isDeleted; // 소프트 딜리트
+
+    @Column
+    private Integer stockQuantity; // null 이면 상시 판매 / 0~숫자 는 한정판매
+
+    @Column(nullable = false)
+    private Integer likeCount;
+
+    @OneToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "design_id", nullable = false)
+    //Cascade 안하는 이유 : Design 삭제시 Product도 삭제되면 안됨
+    private Design design;
+
+    @OneToMany(mappedBy = "product", cascade = CascadeType.ALL, orphanRemoval = true)
+    @Builder.Default
+    private List<ProductImage> productImages = new ArrayList<>();
+
+    @Column
+    private Double avgReviewRating; // DECIMAL(3,2)
+
+    @Column
+    private Integer reviewCount;
+
+    //상품 수정하는 로직 추가
+    public void update(String description, ProductCategory productCategory, String sizeInfo, Integer stockQuantity) {
+        this.description = description;
+        this.productCategory = productCategory;
+        this.sizeInfo = sizeInfo;
+        this.stockQuantity = stockQuantity;
+    }
+
+    //소프트 딜리트 로직 추가
+    public void softDelete() {
+        this.isDeleted = true;
+    }
+
+    //재판매를 위한 메서드 (isDeleted 를 false 로 변경)
+    public void relist() {
+        if (!this.isDeleted) {
+            throw new ServiceException(ErrorCode.DESIGN_NOT_STOPPED);
+        }
+        this.isDeleted = false;
+    }
+
+    //재고 수량 감소 메서드 추가
+    public void decreaseStock(int quantity) {
+        // 1. 상시 판매 상품(재고가 null)인 경우는 로직을 실행하지 않음
+        if (this.stockQuantity == null) {
+            return;
+        }
+
+        // 2. 남은 재고보다 많은 수량을 주문하면 예외 발생
+        int restStock = this.stockQuantity - quantity;
+        if (restStock < 0) {
+            throw new ServiceException(ErrorCode.PRODUCT_STOCK_INSUFFICIENT);
+        }
+
+        // 3. 재고 차감
+        this.stockQuantity = restStock;
+    }
+
+    // 상품 이미지 설정 메서드
+    public void addProductImages(List<ProductImage> images) {
+        this.productImages.clear();
+        if (images != null) {
+            this.productImages.addAll(images);
+            images.forEach(image -> image.setProduct(this)); // 양방향 연관관계 설정
+        }
+    }
+
+    public void increaseLikeCount() {
+        if (this.likeCount == null) {
+            this.likeCount = 0;
+        }
+        this.likeCount += 1;
+    }
+
+    public void decreaseLikeCount() {
+        if (this.likeCount == null || this.likeCount <= 0) {
+            this.likeCount = 0;
+        } else {
+            this.likeCount -= 1;
+        }
+    }
+
+    // 리뷰 개수 설정 메서드
+    public void setReviewCount(Integer reviewCount) {
+        this.reviewCount = reviewCount;
+    }
+
+}
+
+//CREATE TABLE `products` (
+//        `product_id`	BIGINT	NOT NULL	DEFAULT AUTO_INCREMENT,
+//        `title`	VARCHAR(30)	NOT NULL,
+//	`description`	TEXT	NOT NULL,
+//        `product_category`	ENUM('TOP', 'BOTTOM', 'OUTER', 'BAG', 'ETC')	NOT NULL	COMMENT '상의, 하의, 아우터, 가방, 기타',
+//        `size_info`	VARCHAR(255)	NOT NULL,
+//	`price`	DECIMAL(10,2)	NOT NULL	COMMENT '무료 구분',
+//        `created_at`	DATETIME	NOT NULL	DEFAULT CURRENT_TIMESTAMP,
+//        `user_id`	BIGINT	NOT NULL,
+//        `purchase_count`	INT	NOT NULL	DEFAULT 0	COMMENT '누적수 분리?',
+//        `is_deleted`	BOOLEAN	NOT NULL	DEFAULT FALSE	COMMENT '소프트 딜리트',
+//        `stock_quantity`	INT	NULL	COMMENT 'null 이면 상시 판매 / 0~숫자 는 한정판매',
+//        `like_count`	INT	NOT NULL	DEFAULT 0,
+//        `design_id`	BIGINT	NOT NULL	DEFAULT AUTO_INCREMENT,
+//        `avg_review_rating`	DECIMAL(3,2)	NULL
+//);
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductCategory.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductCategory.java
new file mode 100644
index 0000000..4ccd5f6
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductCategory.java
@@ -0,0 +1,5 @@
+package com.mysite.knitly.domain.product.product.entity;
+
+public enum ProductCategory {
+    TOP, BOTTOM, OUTER, BAG, ETC
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductFilterType.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductFilterType.java
new file mode 100644
index 0000000..a43f270
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductFilterType.java
@@ -0,0 +1,5 @@
+package com.mysite.knitly.domain.product.product.entity;
+
+public enum ProductFilterType {
+    ALL, FREE, LIMITED // 전체 무료 한정판매
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductImage.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductImage.java
new file mode 100644
index 0000000..7e27846
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductImage.java
@@ -0,0 +1,34 @@
+package com.mysite.knitly.domain.product.product.entity;
+
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import org.springframework.data.jpa.domain.support.AuditingEntityListener;
+
+@Entity
+@Getter
+@NoArgsConstructor
+@Table(name = "product_images")
+@AllArgsConstructor
+@Builder
+@EntityListeners(AuditingEntityListener.class)
+public class ProductImage {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long productImageId;
+
+    private String productImageUrl;
+
+    private Long sortOrder;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "product_id", nullable = false)
+    private Product product;
+
+    public void setProduct(Product product) {
+        this.product = product;
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductSortType.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductSortType.java
new file mode 100644
index 0000000..718984d
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductSortType.java
@@ -0,0 +1,5 @@
+package com.mysite.knitly.domain.product.product.entity;
+
+public enum ProductSortType {
+    POPULAR, LATEST, PRICE_ASC, PRICE_DESC
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/repository/ProductImageRepository.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/repository/ProductImageRepository.java
new file mode 100644
index 0000000..bbe698e
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/repository/ProductImageRepository.java
@@ -0,0 +1,7 @@
+package com.mysite.knitly.domain.product.product.repository;
+
+import com.mysite.knitly.domain.product.product.entity.ProductImage;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface ProductImageRepository extends JpaRepository<ProductImage, Long> {
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/repository/ProductRepository.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/repository/ProductRepository.java
new file mode 100644
index 0000000..d88dec4
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/repository/ProductRepository.java
@@ -0,0 +1,122 @@
+package com.mysite.knitly.domain.product.product.repository;
+import org.springframework.data.repository.query.Param;
+
+import com.mysite.knitly.domain.product.product.dto.ProductWithThumbnailDto;
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Optional;
+
+@Repository
+public interface ProductRepository extends JpaRepository<Product, Long> {
+    //n+1 문제 해결을 위한 fetch join
+    @Query("SELECT p FROM Product p JOIN FETCH p.user WHERE p.productId = :productId")
+    Optional<Product> findByIdWithUser(Long productId);
+
+    // 전체 상품 조회 (삭제되지 않은 것만)
+    Page<Product> findByIsDeletedFalse(Pageable pageable);
+
+    // 카테고리별 조회
+    Page<Product> findByProductCategoryAndIsDeletedFalse(
+            ProductCategory category, Pageable pageable);
+
+    // 무료 상품 조회 (price = 0)
+    Page<Product> findByPriceAndIsDeletedFalse(Double price, Pageable pageable);
+
+    // 한정판매 조회 (stockQuantity != null)
+    Page<Product> findByStockQuantityIsNotNullAndIsDeletedFalse(Pageable pageable);
+
+    // productId로 여러 개 조회 (인기순용 - Redis에서 받은 ID로 조회)
+    List<Product> findByProductIdInAndIsDeletedFalse(List<Long> productIds);
+
+    // User + Design + ProductImages fetch join으로 상품 상세 조회
+    @Query("SELECT p FROM Product p " +
+            "JOIN FETCH p.user " +
+            "JOIN FETCH p.design " +
+            "LEFT JOIN FETCH p.productImages " + // 이미지가 없을 수도 있으므로 LEFT JOIN
+            "WHERE p.productId = :productId AND p.isDeleted = false")
+    Optional<Product> findProductDetailById(Long productId);
+
+    /**
+     * userId로 판매 상품 조회 (대표 이미지 포함)
+     *
+     * sortOrder = 1인 대표 이미지만 LEFT JOIN
+     * DTO 프로젝션으로 한 번의 쿼리로 조회
+     */
+    @Query("""
+            SELECT new com.mysite.knitly.domain.product.product.dto.ProductWithThumbnailDto(
+                p.productId,
+                p.title,
+                p.productCategory,
+                p.price,
+                p.purchaseCount,
+                p.likeCount,
+                p.stockQuantity,
+                p.avgReviewRating,
+                p.createdAt,
+                pi.productImageUrl
+            )
+            FROM Product p
+            LEFT JOIN ProductImage pi ON pi.product.productId = p.productId 
+                AND pi.sortOrder = 1
+            WHERE p.user.userId = :userId
+            AND p.isDeleted = false
+            ORDER BY p.createdAt DESC
+            """)
+    Page<ProductWithThumbnailDto> findByUserIdWithThumbnail(@Param("userId") Long userId, Pageable pageable);
+
+    /**
+     * 전체 상품 조회 (이미지 포함, N+1 방지)
+     */
+    @Query("SELECT DISTINCT p FROM Product p " +
+            "LEFT JOIN FETCH p.productImages " +
+            "WHERE p.isDeleted = false")
+    Page<Product> findAllWithImagesAndNotDeleted(Pageable pageable);
+
+    /**
+     * 카테고리별 조회 (이미지 포함, N+1 방지)
+     */
+    @Query("SELECT DISTINCT p FROM Product p " +
+            "LEFT JOIN FETCH p.productImages " +
+            "WHERE p.productCategory = :category AND p.isDeleted = false")
+    Page<Product> findByCategoryWithImagesAndNotDeleted(
+            @Param("category") ProductCategory category,
+            Pageable pageable
+    );
+
+    /**
+     * 무료 상품 조회 (이미지 포함, N+1 방지)
+     */
+    @Query("SELECT DISTINCT p FROM Product p " +
+            "LEFT JOIN FETCH p.productImages " +
+            "WHERE p.price = :price AND p.isDeleted = false")
+    Page<Product> findByPriceWithImagesAndNotDeleted(
+            @Param("price") Double price,
+            Pageable pageable
+    );
+
+    /**
+     * 한정판매 조회 (이미지 포함, N+1 방지)
+     */
+    @Query("SELECT DISTINCT p FROM Product p " +
+            "LEFT JOIN FETCH p.productImages " +
+            "WHERE p.stockQuantity IS NOT NULL AND p.isDeleted = false")
+    Page<Product> findLimitedWithImagesAndNotDeleted(Pageable pageable);
+
+    /**
+     * productId 리스트로 여러 개 조회 (이미지 포함, N+1 방지)
+     */
+    @Query("SELECT DISTINCT p FROM Product p " +
+            "LEFT JOIN FETCH p.productImages " +
+            "WHERE p.productId IN :productIds AND p.isDeleted = false")
+    List<Product> findByProductIdInWithImagesAndNotDeleted(
+            @Param("productIds") List<Long> productIds
+    );
+
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/service/ProductService.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/service/ProductService.java
new file mode 100644
index 0000000..ec62b2f
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/service/ProductService.java
@@ -0,0 +1,415 @@
+package com.mysite.knitly.domain.product.product.service;
+
+import com.mysite.knitly.domain.design.entity.Design;
+import com.mysite.knitly.domain.design.repository.DesignRepository;
+import com.mysite.knitly.domain.product.like.repository.ProductLikeRepository;
+import com.mysite.knitly.domain.product.product.dto.*;
+import com.mysite.knitly.domain.product.product.entity.*;
+import com.mysite.knitly.domain.product.product.repository.ProductRepository;
+import com.mysite.knitly.domain.product.review.repository.ReviewRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import com.mysite.knitly.global.util.FileStorageService;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.*;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.util.*;
+import java.util.stream.Collectors;
+
+@Service
+@Transactional
+@RequiredArgsConstructor
+public class ProductService {
+
+    private final ProductRepository productRepository;
+    private final DesignRepository designRepository;
+    private final RedisProductService redisProductService;
+    private final FileStorageService fileStorageService;
+    private final ProductLikeRepository productLikeRepository;
+    private final ReviewRepository reviewRepository;
+    private final UserRepository userRepository;
+
+    @Transactional
+    public ProductRegisterResponse registerProduct(User seller, Long designId, ProductRegisterRequest request) {
+
+        Design design = designRepository.findById(designId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.DESIGN_NOT_FOUND));
+
+        // 도안 등록시 [판매 중] 상태로 변경
+        design.startSale();
+
+        Product product = Product.builder()
+                .title(request.title())
+                .description(request.description())
+                .productCategory(request.productCategory())
+                .sizeInfo(request.sizeInfo())
+                .price(request.price())
+                .stockQuantity(request.stockQuantity())
+                .user(seller) // 판매자 정보 연결
+                .design(design) // 도안 정보 연결
+                .isDeleted(false) // 초기 상태: 판매 중
+                .purchaseCount(0) // 초기값 설정
+                .likeCount(0) // 초기값 설정
+                .build();
+
+        List<ProductImage> productImages = saveProductImages(request.productImageUrls());
+        product.addProductImages(productImages);
+
+        Product savedProduct = productRepository.save(product);
+
+        List<String> imageUrls = savedProduct.getProductImages().stream()
+                .map(ProductImage::getProductImageUrl)
+                .collect(Collectors.toList());
+
+        return ProductRegisterResponse.from(savedProduct, imageUrls);
+    }
+
+    @Transactional
+    public ProductModifyResponse modifyProduct(User currentUser, Long productId, ProductModifyRequest request) {
+        Product product = findProductById(productId);
+
+        if (product.getIsDeleted()) {
+            throw new ServiceException(ErrorCode.PRODUCT_ALREADY_DELETED);
+        }
+
+        if (!product.getUser().getUserId().equals(currentUser.getUserId())) {
+            throw new ServiceException(ErrorCode.PRODUCT_MODIFY_UNAUTHORIZED);
+        }
+
+        product.update(
+                request.description(),
+                request.productCategory(),
+                request.sizeInfo(),
+                request.stockQuantity()
+        );
+
+// 1. 기존 이미지 URL 전체
+        List<String> oldImageUrls = product.getProductImages().stream()
+                .map(ProductImage::getProductImageUrl)
+                .collect(Collectors.toList());
+
+// 2. 유지할 기존 이미지 URL 목록 (프론트에서 전달된 값)
+        List<String> existingImageUrls = request.existingImageUrls() != null
+                ? request.existingImageUrls()
+                : new ArrayList<>();
+
+// 3. 삭제할 이미지 = oldImageUrls - existingImageUrls
+        List<String> deletedImageUrls = oldImageUrls.stream()
+                .filter(url -> !existingImageUrls.contains(url))
+                .collect(Collectors.toList());
+
+// 4. 새로운 이미지 파일을 저장
+        List<ProductImage> newProductImages = saveProductImages(request.productImageUrls());
+
+// 5. 유지할 기존 이미지 + 새 이미지 합치기
+        List<ProductImage> mergedImages = new ArrayList<>();
+
+// 기존 이미지 중 유지 대상만 다시 추가
+        for (ProductImage oldImg : product.getProductImages()) {
+            if (existingImageUrls.contains(oldImg.getProductImageUrl())) {
+                mergedImages.add(oldImg);
+            }
+        }
+
+// 새 이미지 추가
+        mergedImages.addAll(newProductImages);
+
+// 6. 엔티티 반영 (기존 이미지 중 유지 대상은 그대로, 삭제 대상은 orphanRemoval로 DB에서 제거)
+        product.addProductImages(mergedImages);
+
+// 7. 삭제할 이미지 파일 실제 삭제 (S3, 로컬 등)
+        deletedImageUrls.forEach(fileStorageService::deleteFile);
+
+
+        List<String> currentImageUrls = product.getProductImages().stream()
+                .map(ProductImage::getProductImageUrl)
+                .collect(Collectors.toList());
+
+        return ProductModifyResponse.from(product, currentImageUrls);
+    }
+
+    @Transactional
+    public void deleteProduct(User currentUser, Long productId) {
+        Product product = findProductById(productId);
+
+        if (!product.getUser().getUserId().equals(currentUser.getUserId())) {
+            throw new ServiceException(ErrorCode.PRODUCT_DELETE_UNAUTHORIZED);
+        }
+
+        // 소프트 딜리트 처리 (isDeleted = true)
+        product.softDelete();
+
+        // [판매중] 도안을 [판매 중지]로 변경
+        product.getDesign().stopSale();
+    }
+
+    @Transactional
+    public void relistProduct(User currentUser, Long productId) {
+        Product product = findProductById(productId);
+
+        if (!product.getUser().getUserId().equals(currentUser.getUserId())) {
+            throw new ServiceException(ErrorCode.PRODUCT_MODIFY_UNAUTHORIZED); // 수정 권한 에러 재사용
+        }
+
+        // 3. Product와 Design 상태를 '판매 중'으로 원복
+        product.relist(); // Product의 isDeleted를 false로 변경
+        product.getDesign().relist(); // Design의 designState를 ON_SALE으로 변경
+    }
+
+    private List<ProductImage> saveProductImages(List<MultipartFile> imageFiles) {
+        if (imageFiles == null || imageFiles.isEmpty()) {
+            return new ArrayList<>();
+        }
+
+        List<ProductImage> productImages = new ArrayList<>();
+        for (MultipartFile file : imageFiles) {
+            if (file.isEmpty()) continue;
+
+            // FileStorageService에게 "product" 도메인의 파일 저장을 위임하고 URL만 받음
+            String url = fileStorageService.storeFile(file, "product");
+
+            ProductImage productImage = ProductImage.builder()
+                    .productImageUrl(url)
+                    .build();
+            productImages.add(productImage);
+        }
+        return productImages;
+    }
+
+    private Product findProductById(Long productId){
+        return productRepository.findByIdWithUser(productId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.PRODUCT_NOT_FOUND));
+    }
+
+    // 상품 목록 조회
+    @Transactional(readOnly = true)
+    public Page<ProductListResponse> getProducts(
+            User user, // 컨트롤러에서 받은 User 객체
+            ProductCategory category,
+            ProductFilterType filterType,
+            ProductSortType sortType,
+            Pageable pageable) {
+
+        ProductFilterType effectiveFilter = (filterType == null) ? ProductFilterType.ALL : filterType;
+
+        ProductCategory effectiveCategory =
+                (effectiveFilter == ProductFilterType.ALL) ? category : null;
+
+        Page<Product> productPage;
+
+        if (sortType == ProductSortType.POPULAR) {
+            productPage = getProductsByPopular(effectiveCategory, effectiveFilter, pageable);
+        } else {
+            Pageable sortedPageable = createPageable(pageable, sortType);
+            productPage = getFilteredProducts(effectiveCategory, effectiveFilter, sortedPageable);
+        }
+
+        // '좋아요' 누른 상품 ID 목록을 한 번에 조회
+        Set<Long> likedProductIds = getLikedProductIds(user, productPage.getContent());
+
+        // DTO의 from(Product, boolean) 메서드를 사용하여 변환
+        return productPage.map(product ->
+                ProductListResponse.from(
+                        product,
+                        likedProductIds.contains(product.getProductId())
+                )
+        );
+    }
+
+    private Set<Long> getLikedProductIds(User user, List<Product> products) {
+        // 1. 비로그인 사용자이거나 상품 목록이 비어있으면 빈 Set 반환
+        if (user == null || products.isEmpty()) {
+            return Collections.emptySet();
+        }
+
+        // 2. 상품 ID 목록 추출
+        List<Long> productIds = products.stream()
+                .map(Product::getProductId)
+                .toList();
+
+        // 3. [수정] 제공된 레포지토리의 메서드명과 User의 ID 필드명(userId)을 사용
+        //    (user.getId() -> user.getUserId()로 가정)
+        return productLikeRepository.findLikedProductIdsByUserId(
+                user.getUserId(), // user.userId 필드에 접근
+                productIds
+        );
+    }
+
+
+    // 인기순 - Redis 활용
+    /**
+     * 인기순 상품 조회 (이미지 포함)
+     */
+    private Page<Product> getProductsByPopular(
+            ProductCategory category,
+            ProductFilterType filterType,
+            Pageable pageable) {
+
+        // Redis에서 인기 상품 ID 목록 가져오기
+        List<Long> topIds = redisProductService.getTopNPopularProducts(100);
+
+        List<Product> products;
+
+        if (topIds.isEmpty()) {
+            // Redis에 데이터가 없으면 DB에서 직접 조회 (이미지 포함)
+            Pageable top100 = PageRequest.of(0, 100, Sort.by("purchaseCount").descending());
+            products = productRepository.findAllWithImagesAndNotDeleted(top100).getContent();
+        } else {
+            // Redis에서 가져온 ID로 상품 조회 (이미지 포함)
+            List<Product> unordered = productRepository.findByProductIdInWithImagesAndNotDeleted(topIds);
+
+            // Redis의 순서대로 정렬
+            Map<Long, Product> productMap = unordered.stream()
+                    .collect(Collectors.toMap(Product::getProductId, p -> p));
+
+            products = topIds.stream()
+                    .map(productMap::get)
+                    .filter(Objects::nonNull)
+                    .toList();
+        }
+
+        // 필터링 적용
+        products = products.stream()
+                .filter(p -> matchesCondition(p, category, filterType))
+                .toList();
+
+        // 페이징 처리
+        return convertToPage(products, pageable);
+    }
+
+
+    /**
+     * 조건별 상품 조회 (이미지 포함)
+     *
+     * 1. 카테고리 조회: 특정 카테고리의 상품들
+     * 2. 무료 상품 조회: 모든 카테고리의 무료 상품
+     * 3. 한정판매 조회: 모든 카테고리의 한정판매 상품
+     * 4. 전체 조회: 모든 상품
+     */
+    private Page<Product> getFilteredProducts(
+            ProductCategory category,
+            ProductFilterType filterType,
+            Pageable pageable
+    ) {
+
+        // 1. 카테고리 조회 (ALL)
+        if (category != null) {
+            return productRepository.findByCategoryWithImagesAndNotDeleted(category, pageable);
+        }
+
+        // 2. 무료 상품 조회 (카테고리 무관)
+        if (filterType == ProductFilterType.FREE) {
+            return productRepository.findByPriceWithImagesAndNotDeleted(0.0, pageable);
+        }
+
+        // 3. 한정판매 조회 (카테고리 무관)
+        if (filterType == ProductFilterType.LIMITED) {
+            return productRepository.findLimitedWithImagesAndNotDeleted(pageable);
+        }
+
+        // 4. 전체 조회
+        return productRepository.findAllWithImagesAndNotDeleted(pageable);
+    }
+
+    /**
+     * 특정 유저의 판매 상품 목록 조회 (대표 이미지 포함)
+     *
+     * @param userId 판매자 ID
+     * @param pageable 페이지네이션 정보
+     * @return 상품 목록 (대표 이미지 포함)
+     */
+    public Page<ProductListResponse> findProductsByUserId(Long userId, Pageable pageable) {
+        User user = userRepository.findById(userId).orElseThrow(() -> new ServiceException(ErrorCode.USER_NOT_FOUND));
+        String sellerName= user.getName();
+        // Repository에서 DTO로 조회
+        Page<ProductWithThumbnailDto> dtoPage = productRepository.findByUserIdWithThumbnail(userId, pageable);
+
+        // DTO -> Response 변환
+        Page<ProductListResponse> responsePage = dtoPage.map(
+                dto -> dto.toResponse(true, sellerName) // 찜한 목록이므로 isLikedByUser = true
+        );
+
+        return responsePage;
+    }
+
+    // 정렬 조건 생성
+    private Pageable createPageable(Pageable pageable, ProductSortType sortType) {
+        Sort sort = switch (sortType) {
+            case LATEST -> Sort.by("createdAt").descending();
+            case PRICE_ASC -> Sort.by("price").ascending();
+            case PRICE_DESC -> Sort.by("price").descending();
+            default -> Sort.unsorted();
+        };
+
+        return PageRequest.of(pageable.getPageNumber(), pageable.getPageSize(), sort);
+    }
+
+    // 상품이 조회 조건이 맞는지 확인
+    private boolean matchesCondition(Product product, ProductCategory category, ProductFilterType filterType) {
+        // 카테고리 조회
+        if (category != null) {
+            return product.getProductCategory().equals(category);
+        }
+
+        // 무료 상품 조회
+        if (filterType == ProductFilterType.FREE) {
+            return product.getPrice() == 0.0;
+        }
+
+        // 한정판매 조회
+        if (filterType == ProductFilterType.LIMITED) {
+            return product.getStockQuantity() != null;
+        }
+
+        // 전체 조회
+        return true;
+    }
+
+    // 페이징 처리
+    private Page<Product> convertToPage(List<Product> products, Pageable pageable) {
+        int start = (int) pageable.getOffset();
+        int end = Math.min(start + pageable.getPageSize(), products.size());
+
+        if (start > products.size()) {
+            return new PageImpl<>(Collections.emptyList(), pageable, products.size());
+        }
+
+        List<Product> pageContent = products.subList(start, end);
+
+        return new PageImpl<>(pageContent, pageable, products.size());
+    }
+
+    // 상품 상세 조회 로직 추가
+    @Transactional(readOnly = true) // 데이터를 읽기만 하므로 readOnly=true로 성능 최적화
+    public ProductDetailResponse getProductDetail(User user, Long productId) {
+        // N+1 방지를 위해 User, Design 등 연관 정보를 함께 가져오는 것이 좋음
+        Product product = productRepository.findProductDetailById(productId) // 예시 메서드
+                .orElseThrow(() -> new ServiceException(ErrorCode.PRODUCT_NOT_FOUND));
+
+        // 판매 중지된 상품은 조회 불가
+        if (product.getIsDeleted()) {
+            throw new ServiceException(ErrorCode.PRODUCT_NOT_FOUND);
+        }
+
+        List<String> imageUrls = product.getProductImages().stream()
+                .map(ProductImage::getProductImageUrl)
+                .collect(Collectors.toList());
+
+        boolean isLiked = false;
+        if (user != null) {
+            Long userId = user.getUserId();
+
+            isLiked = productLikeRepository.existsByUser_UserIdAndProduct_ProductId(userId, productId);
+        }
+
+        long reviewCount = reviewRepository.countByProductAndIsDeletedFalse(product);
+        product.setReviewCount((int) reviewCount);
+
+        return ProductDetailResponse.from(product, imageUrls, isLiked);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/product/service/RedisProductService.java b/backend/src/main/java/com/mysite/knitly/domain/product/product/service/RedisProductService.java
new file mode 100644
index 0000000..a4ff1f8
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/product/service/RedisProductService.java
@@ -0,0 +1,48 @@
+package com.mysite.knitly.domain.product.product.service;
+
+import com.mysite.knitly.domain.product.product.entity.Product;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.data.redis.core.RedisTemplate;
+import org.springframework.data.redis.core.StringRedisTemplate;
+import org.springframework.stereotype.Service;
+
+import java.util.Collections;
+import java.util.List;
+import java.util.Set;
+import java.util.stream.Collectors;
+
+@Service
+@RequiredArgsConstructor
+@Slf4j
+public class RedisProductService {
+
+    private final StringRedisTemplate redisTemplate;
+    private static final String POPULAR_KEY = "product:popular";
+
+
+    // 상품 구매시 인기도 증가
+    public void incrementPurchaseCount(Long productId) {
+        redisTemplate.opsForZSet().incrementScore(POPULAR_KEY, productId.toString(), 1);
+        log.debug("Redis 인기도 증가: productId={}", productId);
+    }
+
+    // 인기순 Top N 상품 조회
+    public List<Long> getTopNPopularProducts(int n) {
+        Set<String> top = redisTemplate.opsForZSet().reverseRange(POPULAR_KEY, 0, n - 1);
+        if (top == null || top.isEmpty()) return Collections.emptyList();
+        return top.stream().map(Long::valueOf).toList();
+    }
+
+    // DB의 purchaseCount를 Redis에 동기화
+    public void syncFromDatabase(List<Product> products) {
+        products.forEach(product -> {
+            redisTemplate.opsForZSet().add(
+                    POPULAR_KEY,
+                    product.getProductId().toString(),
+                    product.getPurchaseCount()
+            );
+        });
+        log.info("Redis 동기화 완료: {} 개 상품", products.size());
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/review/controller/ReviewController.java b/backend/src/main/java/com/mysite/knitly/domain/product/review/controller/ReviewController.java
new file mode 100644
index 0000000..2a57686
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/review/controller/ReviewController.java
@@ -0,0 +1,83 @@
+package com.mysite.knitly.domain.product.review.controller;
+
+import com.mysite.knitly.domain.product.review.dto.ReviewCreateRequest;
+import com.mysite.knitly.domain.product.review.dto.ReviewCreateResponse;
+import com.mysite.knitly.domain.product.review.dto.ReviewDeleteRequest;
+import com.mysite.knitly.domain.product.review.dto.ReviewListResponse;
+import com.mysite.knitly.domain.product.review.service.ReviewService;
+import com.mysite.knitly.domain.user.entity.User;
+import jakarta.validation.Valid;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.util.List;
+
+
+@RestController
+@RequiredArgsConstructor
+@RequestMapping
+public class ReviewController {
+    private final ReviewService reviewService;
+
+    @GetMapping("/reviews/form")
+    public ResponseEntity<ReviewCreateResponse> getReviewInfo(@RequestParam Long orderItemId) {
+        ReviewCreateResponse response = reviewService.getReviewFormInfo(orderItemId);
+        return ResponseEntity.ok(response);
+    }
+    // ▲▲▲ [수정 1] ▲▲▲
+
+    // ▼▼▼ [수정 2] 리뷰 등록 엔드포인트 변경 ▼▼▼
+    // (기존) @PostMapping("products/{productId}/reviews")
+    @PostMapping("/reviews")
+    public ResponseEntity<Void> createReview(
+            @AuthenticationPrincipal User user,
+            @RequestParam Long orderItemId,
+            @Valid @ModelAttribute ReviewCreateRequest request
+    ) {
+        reviewService.createReview(orderItemId, user, request);
+        return ResponseEntity.ok().build();
+    }
+
+//    // 1. 리뷰 작성 폼용 상품 정보 조회
+//    @GetMapping("products/{productId}/review")
+//    public ResponseEntity<ReviewCreateResponse> getReviewInfo(@PathVariable Long productId) {
+//        ReviewCreateResponse response = reviewService.getReviewFormInfo(productId);
+//        return ResponseEntity.ok(response);
+//    }
+//
+//    // 1. 리뷰 등록
+//    @PostMapping("products/{productId}/reviews")
+//    public ResponseEntity<Void> createReview(
+//            @AuthenticationPrincipal User user,
+//            @PathVariable Long productId,
+//            @Valid @ModelAttribute ReviewCreateRequest request
+//    ) {
+//        reviewService.createReview(productId, user, request);
+//        return ResponseEntity.ok().build();
+//    }
+
+    // 2️. 리뷰 소프트 삭제(마이 페이지에서)
+    @DeleteMapping("/reviews/{reviewId}")
+    public ResponseEntity<Void> deleteReview(
+            @AuthenticationPrincipal User user,
+            @PathVariable Long reviewId
+    ) {
+        reviewService.deleteReview(reviewId, user);
+        return ResponseEntity.noContent().build();
+    }
+
+    // 3. 특정 상품 리뷰 목록 조회
+    @GetMapping("/products/{productId}/reviews")
+    public ResponseEntity<Page<ReviewListResponse>> getReviewsByProduct(
+            @PathVariable Long productId,
+            @RequestParam(defaultValue = "0") int page,
+            @RequestParam(defaultValue = "10") int size
+    ) {
+        Page<ReviewListResponse> reviews = reviewService.getReviewsByProduct(productId, page, size);
+        return ResponseEntity.ok(reviews);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewCreateRequest.java b/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewCreateRequest.java
new file mode 100644
index 0000000..d9b9655
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewCreateRequest.java
@@ -0,0 +1,22 @@
+package com.mysite.knitly.domain.product.review.dto;
+
+import jakarta.validation.constraints.Max;
+import jakarta.validation.constraints.Min;
+import jakarta.validation.constraints.NotNull;
+import jakarta.validation.constraints.Size;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.util.List;
+
+public record ReviewCreateRequest(
+        @NotNull(message = "리뷰 점수는 필수입니다.")
+        @Min(value = 1, message = "평점은 1~5 사이여야 합니다.")
+        @Max(value = 5, message = "평점은 1~5 사이여야 합니다.")
+        Integer rating,
+
+        @NotNull(message = "리뷰 내용은 필수입니다.")
+        String content,
+
+        @Size(max = 10, message = "리뷰 이미지는 최대 10개까지 등록할 수 있습니다.")
+        List<MultipartFile> reviewImageUrls
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewCreateResponse.java b/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewCreateResponse.java
new file mode 100644
index 0000000..77b0b6a
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewCreateResponse.java
@@ -0,0 +1,6 @@
+package com.mysite.knitly.domain.product.review.dto;
+
+public record ReviewCreateResponse(
+        String productTitle,
+        String productThumbnailUrl
+) {}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewDeleteRequest.java b/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewDeleteRequest.java
new file mode 100644
index 0000000..388422c
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewDeleteRequest.java
@@ -0,0 +1,5 @@
+package com.mysite.knitly.domain.product.review.dto;
+
+public record ReviewDeleteRequest(
+        Long userId
+) {}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewListResponse.java b/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewListResponse.java
new file mode 100644
index 0000000..25e1f8e
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/review/dto/ReviewListResponse.java
@@ -0,0 +1,26 @@
+package com.mysite.knitly.domain.product.review.dto;
+
+import com.mysite.knitly.domain.product.review.entity.Review;
+
+import java.time.LocalDateTime;
+import java.util.List;
+
+public record ReviewListResponse(
+        Long reviewId,
+        Integer rating,
+        String content,
+        LocalDateTime createdAt,
+        String userName,
+        List<String> reviewImageUrls
+) {
+    public static ReviewListResponse from(Review review, List<String> imageUrls) {
+        return new ReviewListResponse(
+                review.getReviewId(),
+                review.getRating(),
+                review.getContent(),
+                review.getCreatedAt(),
+                review.getUser().getName(),
+                imageUrls
+        );
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/review/entity/Review.java b/backend/src/main/java/com/mysite/knitly/domain/product/review/entity/Review.java
new file mode 100644
index 0000000..10d93c9
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/review/entity/Review.java
@@ -0,0 +1,71 @@
+package com.mysite.knitly.domain.product.review.entity;
+
+import com.mysite.knitly.domain.order.entity.OrderItem;
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.user.entity.User;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import org.springframework.data.annotation.CreatedDate;
+import org.springframework.data.jpa.domain.support.AuditingEntityListener;
+
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
+
+@Entity
+@Getter
+@NoArgsConstructor
+@Table(name = "reviews")
+@AllArgsConstructor
+@Builder
+@EntityListeners(AuditingEntityListener.class)
+public class Review {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long reviewId;
+
+    @Column(nullable = false)
+    private Integer rating; // TINYINT, 1~5 범위
+
+    @Column(nullable = false, length = 300)
+    private String content;
+
+    @CreatedDate
+    @Column(nullable = false, updatable = false)
+    private LocalDateTime createdAt;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "order_item_id", nullable = false)
+    private OrderItem orderItem;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "product_id", nullable = false)
+    private Product product;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "user_id", nullable = false)
+    private User user;
+
+    @Column(nullable = false)
+    @Builder.Default
+    private Boolean isDeleted = false;
+
+    @OneToMany(mappedBy = "review", cascade = CascadeType.ALL, orphanRemoval = true)
+    @Builder.Default
+    private List<ReviewImage> reviewImages = new ArrayList<>();
+
+    public void setIsDeleted(boolean isDeleted) {
+        this.isDeleted = isDeleted;
+    }
+
+    public void addReviewImages(List<ReviewImage> images) {
+        this.reviewImages.clear();
+        if (images != null) {
+            this.reviewImages.addAll(images);
+            images.forEach(image -> image.setReview(this)); // 양방향 연관관계 설정
+        }
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/review/entity/ReviewImage.java b/backend/src/main/java/com/mysite/knitly/domain/product/review/entity/ReviewImage.java
new file mode 100644
index 0000000..4eb49f3
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/review/entity/ReviewImage.java
@@ -0,0 +1,46 @@
+package com.mysite.knitly.domain.product.review.entity;
+
+import com.mysite.knitly.domain.user.entity.User;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import org.springframework.data.annotation.CreatedDate;
+import org.springframework.data.jpa.domain.support.AuditingEntityListener;
+
+import java.util.UUID;
+
+@Entity
+@Getter
+@NoArgsConstructor
+@Table(name = "review_images")
+@AllArgsConstructor
+@Builder
+@EntityListeners(AuditingEntityListener.class)
+public class ReviewImage {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long reviewImageId;
+
+    private String reviewImageUrl;
+
+    @Builder.Default
+    private Integer sortOrder = 0;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "review_id", nullable = false)
+    private Review review;
+
+    public void setReview(Review review) {
+        this.review = review;
+    }
+}
+
+//CREATE TABLE `review_images` (
+//        `review_image_id`	BIGINT	NOT NULL	DEFAULT AUTO_INCREMENT,
+//        `review_image_url`	VARCHAR(255)	NULL,
+//	      `sort_order`	INT	NULL	DEFAULT 0,
+//        `review_id`	BIGINT	NOT NULL	DEFAULT AUTO_INCREMENT
+//);
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/review/repository/ReviewImageRepository.java b/backend/src/main/java/com/mysite/knitly/domain/product/review/repository/ReviewImageRepository.java
new file mode 100644
index 0000000..8ca23a3
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/review/repository/ReviewImageRepository.java
@@ -0,0 +1,9 @@
+package com.mysite.knitly.domain.product.review.repository;
+
+import com.mysite.knitly.domain.product.review.entity.ReviewImage;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.List;
+
+public interface ReviewImageRepository extends JpaRepository<ReviewImage, Long> {
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/review/repository/ReviewRepository.java b/backend/src/main/java/com/mysite/knitly/domain/product/review/repository/ReviewRepository.java
new file mode 100644
index 0000000..3702131
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/review/repository/ReviewRepository.java
@@ -0,0 +1,31 @@
+package com.mysite.knitly.domain.product.review.repository;
+
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.review.entity.Review;
+import jakarta.persistence.Entity;
+import org.springframework.data.domain.Page;
+import org.springframework.data.jpa.repository.EntityGraph;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+import org.springframework.data.domain.Pageable;
+
+import java.util.List;
+
+@Repository
+public interface ReviewRepository extends JpaRepository<Review, Long> {
+    @EntityGraph(attributePaths = {"user", "reviewImages"})
+    List<Review> findByProduct_ProductIdAndIsDeletedFalse(Long productId);
+    // 추후 페이징용
+
+    @EntityGraph(attributePaths = {"user", "reviewImages"})
+    Page<Review> findByProduct_ProductIdAndIsDeletedFalse(Long productId, Pageable pageable);
+
+    //마이페이지 리뷰 조회
+    @EntityGraph(attributePaths = {"product", "reviewImages"})
+    List<Review> findByUser_UserIdAndIsDeletedFalse(Long userId, Pageable pageable);
+
+    long countByUser_UserIdAndIsDeletedFalse(Long userId);
+
+    long countByProductAndIsDeletedFalse(Product product);
+
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/product/review/service/ReviewService.java b/backend/src/main/java/com/mysite/knitly/domain/product/review/service/ReviewService.java
new file mode 100644
index 0000000..1514b20
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/product/review/service/ReviewService.java
@@ -0,0 +1,148 @@
+package com.mysite.knitly.domain.product.review.service;
+
+import com.mysite.knitly.domain.order.entity.OrderItem;
+import com.mysite.knitly.domain.order.repository.OrderItemRepository;
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.repository.ProductRepository;
+import com.mysite.knitly.domain.product.review.dto.ReviewCreateRequest;
+import com.mysite.knitly.domain.product.review.dto.ReviewCreateResponse;
+import com.mysite.knitly.domain.product.review.dto.ReviewDeleteRequest;
+import com.mysite.knitly.domain.product.review.dto.ReviewListResponse;
+import com.mysite.knitly.domain.product.review.entity.Review;
+import com.mysite.knitly.domain.product.review.entity.ReviewImage;
+import com.mysite.knitly.domain.product.review.repository.ReviewRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import com.mysite.knitly.global.util.FileNameUtils;
+import com.mysite.knitly.global.util.ImageValidator;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.Sort;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.multipart.MultipartFile;
+import org.springframework.beans.factory.annotation.Value;
+
+import java.io.File;
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.UUID;
+
+@Service
+@RequiredArgsConstructor
+public class ReviewService {
+
+    private final ReviewRepository reviewRepository;
+    private final ProductRepository productRepository;
+    private final UserRepository userRepository;
+    private final OrderItemRepository orderItemRepository;
+
+    String uploadDir = System.getProperty("user.dir") + "/uploads/review/";
+    String urlPrefix = "/review/";
+
+
+    public ReviewCreateResponse getReviewFormInfo(Long orderItemId) {
+        OrderItem orderItem = orderItemRepository.findById(orderItemId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.ORDER_ITEM_NOT_FOUND)); // (ErrorCode 추가 필요)
+
+        Product product = orderItem.getProduct();
+
+        String thumbnailUrl = null;
+        if (product.getProductImages() != null && !product.getProductImages().isEmpty()) {
+            thumbnailUrl = product.getProductImages().get(0).getProductImageUrl();
+        }
+
+        return new ReviewCreateResponse(product.getTitle(), thumbnailUrl);
+    }
+
+    // 1. 리뷰 등록
+    @Transactional
+    public void createReview(Long orderItemId, User user, ReviewCreateRequest request) {
+        // 1. orderItemId로 OrderItem을 찾습니다.
+        OrderItem orderItem = orderItemRepository.findById(orderItemId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.ORDER_ITEM_NOT_FOUND));
+
+        // 2. OrderItem에서 Product를 가져옵니다.
+        Product product = orderItem.getProduct();
+
+        Review review = Review.builder()
+                .user(user)
+                .product(product)
+                .orderItem(orderItem)
+                .rating(request.rating())
+                .content(request.content())
+                .build();
+
+        List<ReviewImage> reviewImages = new ArrayList<>();
+
+        if (request.reviewImageUrls() != null && !request.reviewImageUrls().isEmpty()) {
+            new File(uploadDir).mkdirs();
+
+            List<MultipartFile> imageFiles = request.reviewImageUrls();
+
+            for (int i = 0; i < imageFiles.size(); i++) {
+                MultipartFile file = imageFiles.get(i);
+                if (file.isEmpty()) continue;
+
+                String originalFilename = file.getOriginalFilename();
+                try {
+                    String filename = UUID.randomUUID() + "_" + originalFilename;
+                    Path path = Path.of(uploadDir, filename);
+                    Files.write(path, file.getBytes());
+
+                    String url = urlPrefix + filename;
+
+                    ReviewImage reviewImage = ReviewImage.builder()
+                            .review(review)          // ✅ 반드시 review 설정
+                            .reviewImageUrl(url)
+                            .sortOrder(i)
+                            .build();
+                    reviewImages.add(reviewImage);
+
+                } catch (IOException e) {
+                    throw new ServiceException(ErrorCode.REVIEW_IMAGE_SAVE_FAILED);
+                }
+            }
+        }
+
+        review.addReviewImages(reviewImages);
+        reviewRepository.save(review);
+    }
+
+
+    // 2. 리뷰 소프트 삭제 (본인 리뷰만)
+    @Transactional
+    public void deleteReview(Long reviewId, User user) {
+        Review review = reviewRepository.findById(reviewId)
+                .orElseThrow(() -> new ServiceException(ErrorCode.REVIEW_NOT_FOUND));
+
+        if (!review.getUser().getUserId().equals(user.getUserId())) {
+            throw new ServiceException(ErrorCode.REVIEW_NOT_AUTHORIZED);
+        }
+
+        review.setIsDeleted(true);
+    }
+
+    // 3️. 특정 상품 리뷰 목록 조회
+    @Transactional(readOnly = true)
+    public Page<ReviewListResponse> getReviewsByProduct(Long productId, int page, int size) {
+        Pageable pageable = PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "createdAt"));
+
+        Page<Review> reviews = reviewRepository.findByProduct_ProductIdAndIsDeletedFalse(productId, pageable);
+
+        return reviews.map(review -> {
+            List<String> imageUrls = review.getReviewImages().stream()
+                    .map(ReviewImage::getReviewImageUrl)
+                    .toList();
+            return ReviewListResponse.from(review, imageUrls);
+        });
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/user/controller/UserController.java b/backend/src/main/java/com/mysite/knitly/domain/user/controller/UserController.java
new file mode 100644
index 0000000..bf17195
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/user/controller/UserController.java
@@ -0,0 +1,203 @@
+// UserController.java의 로그아웃과 회원탈퇴 메서드 수정
+
+package com.mysite.knitly.domain.user.controller;
+
+import com.mysite.knitly.domain.product.product.dto.ProductListResponse;
+import com.mysite.knitly.domain.product.product.service.ProductService;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.service.UserService;
+import com.mysite.knitly.utility.auth.service.AuthService;
+import com.mysite.knitly.utility.cookie.CookieUtil;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.media.Content;
+import io.swagger.v3.oas.annotations.media.ExampleObject;
+import io.swagger.v3.oas.annotations.responses.ApiResponse;
+import io.swagger.v3.oas.annotations.responses.ApiResponses;
+import io.swagger.v3.oas.annotations.security.SecurityRequirement;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.servlet.http.HttpServletResponse;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.web.PageableDefault;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.HashMap;
+import java.util.Map;
+
+@Tag(name = "User", description = "사용자 관리 API")
+@Slf4j
+@RestController
+@RequestMapping("/users")
+@RequiredArgsConstructor
+public class UserController {
+
+    private final AuthService authService;
+    private final ProductService productService;
+    private final CookieUtil cookieUtil;  // 추가!
+
+    private static final String REFRESH_TOKEN_COOKIE_NAME = "refreshToken";  // 추가!
+    private final UserService userService;
+
+    /**
+     * 현재 로그인한 사용자 정보 조회 (JWT 인증 필요)
+     * GET /users/me
+     */
+    @Operation(
+            summary = "내 정보 조회",
+            description = "현재 로그인한 사용자의 정보를 조회합니다. JWT 토큰이 필요합니다."
+    )
+    @ApiResponses({
+            @ApiResponse(
+                    responseCode = "200",
+                    description = "조회 성공",
+                    content = @Content(
+                            mediaType = "application/json",
+                            examples = @ExampleObject(value = """
+                    {
+                        "userId": "1",
+                        "email": "user@example.com",
+                        "name": "홍길동",
+                        "provider": "GOOGLE",
+                        "createdAt": "2025-01-20T15:52:58"
+                    }
+                    """)
+                    )
+            ),
+            @ApiResponse(responseCode = "401", description = "인증 실패 - 토큰 없음 또는 만료")
+    })
+    @SecurityRequirement(name = "Bearer Authentication")
+    @GetMapping("/me")
+    public ResponseEntity<Map<String, Object>> getCurrentUser(@AuthenticationPrincipal User user) {
+
+        if (user == null) {
+            log.warn("User is null in /api/user/me");
+            return ResponseEntity.status(401).build();
+        }
+
+        log.info("User info requested - userId: {}", user.getUserId());
+
+        Map<String, Object> response = new HashMap<>();
+        response.put("userId", user.getUserId());
+        response.put("email", user.getEmail());
+        response.put("name", user.getName());
+        response.put("provider", user.getProvider());
+        response.put("createdAt", user.getCreatedAt());
+
+        return ResponseEntity.ok(response);
+    }
+
+    /**
+     * 로그아웃 (개선됨)
+     * POST /users/logout
+     *
+     * Redis에서 Refresh Token 삭제 + HTTP-only 쿠키 삭제
+     */
+    @Operation(
+            summary = "로그아웃",
+            description = "로그아웃하고 Redis에 저장된 Refresh Token과 HTTP-only 쿠키를 삭제합니다. JWT 토큰이 필요합니다."
+    )
+    @ApiResponses({
+            @ApiResponse(
+                    responseCode = "200",
+                    description = "로그아웃 성공",
+                    content = @Content(
+                            mediaType = "text/plain",
+                            examples = @ExampleObject(value = "로그아웃되었습니다.")
+                    )
+            ),
+            @ApiResponse(responseCode = "401", description = "인증 실패")
+    })
+    @SecurityRequirement(name = "Bearer Authentication")
+    @PostMapping("/logout")
+    public ResponseEntity<String> logout(
+            @AuthenticationPrincipal User user,
+            HttpServletResponse response) {  // HttpServletResponse 추가!
+
+        if (user == null) {
+            return ResponseEntity.status(401).body("인증이 필요합니다.");
+        }
+
+        log.info("Logout requested - userId: {}", user.getUserId());
+
+        // 1. Redis에서 Refresh Token 삭제
+        authService.logout(user.getUserId());
+        log.info("Refresh Token deleted from Redis - userId: {}", user.getUserId());
+
+        // 2. HTTP-only 쿠키 삭제
+        cookieUtil.deleteCookie(response, REFRESH_TOKEN_COOKIE_NAME);
+        log.info("Refresh Token cookie deleted");
+
+        return ResponseEntity.ok("로그아웃되었습니다.");
+    }
+
+    /**
+     * 회원탈퇴 (개선됨)
+     * DELETE /users/me
+     *
+     * DB에서 사용자 정보 삭제 + Redis에서 Refresh Token 삭제 + HTTP-only 쿠키 삭제
+     */
+    @Operation(
+            summary = "회원탈퇴",
+            description = "회원탈퇴하고 DB와 Redis에서 모든 사용자 데이터를 삭제하며, HTTP-only 쿠키도 삭제합니다. JWT 토큰이 필요합니다."
+    )
+    @ApiResponses({
+            @ApiResponse(
+                    responseCode = "200",
+                    description = "탈퇴 성공",
+                    content = @Content(
+                            mediaType = "text/plain",
+                            examples = @ExampleObject(value = "회원탈퇴가 완료되었습니다.")
+                    )
+            ),
+            @ApiResponse(responseCode = "401", description = "인증 실패")
+    })
+    @SecurityRequirement(name = "Bearer Authentication")
+    @DeleteMapping("/me")
+    public ResponseEntity<String> deleteAccount(
+            @AuthenticationPrincipal User user,
+            HttpServletResponse response) {  // HttpServletResponse 추가!
+
+        if (user == null) {
+            log.warn("User is null in DELETE /user/me");
+            return ResponseEntity.status(401).body("인증이 필요합니다.");
+        }
+
+        log.info("Account deletion requested - userId: {}, email: {}", user.getUserId(), user.getEmail());
+
+        // 1. DB에서 사용자 삭제 + Redis에서 Refresh Token 삭제
+        authService.deleteAccount(user.getUserId());
+        log.info("User account deleted from DB and Redis - userId: {}", user.getUserId());
+
+        // 2. HTTP-only 쿠키 삭제
+        cookieUtil.deleteCookie(response, REFRESH_TOKEN_COOKIE_NAME);
+        log.info("Refresh Token cookie deleted");
+
+        return ResponseEntity.ok("회원탈퇴가 완료되었습니다.");
+    }
+
+    /**
+     * 유저가 판매하는 상품 조회 (AT 불필요)
+     * GET user/{userId}/products
+     */
+    @Operation(
+            summary = "판매자 상품 조회",
+            description = "해당 유저가 판매중인 상품 목록을 가져옵니다."
+    )
+    @GetMapping("/{userId}/products")
+    @ResponseBody
+    public ResponseEntity<Page<ProductListResponse>> getProductsWithUserId(
+            @PathVariable Long userId,
+            @PageableDefault(size = 20) Pageable pageable
+    ){
+        Page<ProductListResponse> response = productService.findProductsByUserId(userId, pageable);
+        log.info("getProductsWithUserId response: {}", response);
+        return ResponseEntity.ok(response);
+    }
+
+
+
+}
\ No newline at end of file
diff --git a/src/main/java/com/mysite/knitly/domain/user/entity/UserEntity.java b/backend/src/main/java/com/mysite/knitly/domain/user/entity/Provider.java
similarity index 54%
rename from src/main/java/com/mysite/knitly/domain/user/entity/UserEntity.java
rename to backend/src/main/java/com/mysite/knitly/domain/user/entity/Provider.java
index 8f2c1f3..e0fd3e7 100644
--- a/src/main/java/com/mysite/knitly/domain/user/entity/UserEntity.java
+++ b/backend/src/main/java/com/mysite/knitly/domain/user/entity/Provider.java
@@ -1,4 +1,5 @@
 package com.mysite.knitly.domain.user.entity;
 
-public class UserEntity {
+public enum Provider {
+    KAKAO, GOOGLE
 }
diff --git a/backend/src/main/java/com/mysite/knitly/domain/user/entity/User.java b/backend/src/main/java/com/mysite/knitly/domain/user/entity/User.java
new file mode 100644
index 0000000..6419bd0
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/user/entity/User.java
@@ -0,0 +1,68 @@
+package com.mysite.knitly.domain.user.entity;
+
+import com.mysite.knitly.domain.userstore.entity.UserStore;
+import com.mysite.knitly.global.jpa.BaseTimeEntity;
+import jakarta.persistence.*;
+import lombok.*;
+import org.springframework.data.jpa.domain.support.AuditingEntityListener;
+
+@Entity
+@Table(name = "users")
+@Getter
+@NoArgsConstructor(access = AccessLevel.PROTECTED)
+@AllArgsConstructor
+@Builder
+@EntityListeners(AuditingEntityListener.class)
+public class User extends BaseTimeEntity {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "user_id")
+    private Long userId; // knitly 서비스 내에서의 키값
+
+    @Column(nullable = false, unique = true)
+    private String socialId; // 구글의 고유 ID (sub)
+
+    @Column(nullable = false)
+    private String email; // 구글 이메일
+
+    @Column(nullable = false, length = 50)
+    private String name; // 구글에서 받아온 이름
+
+    // UserStore와 1:1 양방향 관계
+    @OneToOne(mappedBy = "user", cascade = CascadeType.ALL, orphanRemoval = true)
+    private UserStore userStore;
+
+    @Enumerated(EnumType.STRING)
+    @Column(nullable = false, length = 10)
+    private Provider provider; // GOOGLE
+
+    // 정적 팩토리 메서드
+    public static User createGoogleUser(String socialId, String email, String name) {
+        return User.builder()
+                .socialId(socialId)
+                .email(email)
+                .name(name)
+                .provider(Provider.GOOGLE)
+                .build();
+    }
+
+    // UserStore 초기화 메서드
+    @PostPersist
+    public void initializeUserStore() {
+        if (this.userStore == null) {
+            this.userStore = UserStore.builder()
+                    .user(this)
+                    .storeDetail("안녕하세요! 제 스토어에 오신 것을 환영합니다.")
+                    .build();
+        }
+    }
+}
+
+//CREATE TABLE `users` (
+//        `user_id`	BIGINT	NOT NULL,
+//        `social_id`	VARCHAR(255)	NOT NULL,
+//	`name`	VARCHAR(50)	NOT NULL,
+//	`provider`	ENUM('KAKAO', 'GOOGLE')	NOT NULL,
+//	`created_at`	DATETIME	NOT NULL	DEFAULT CURRENT_TIMESTAMP
+//);
diff --git a/backend/src/main/java/com/mysite/knitly/domain/user/repository/UserRepository.java b/backend/src/main/java/com/mysite/knitly/domain/user/repository/UserRepository.java
new file mode 100644
index 0000000..9555e2d
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/user/repository/UserRepository.java
@@ -0,0 +1,26 @@
+package com.mysite.knitly.domain.user.repository;
+
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.entity.Provider;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.Optional;
+
+@Repository
+public interface UserRepository extends JpaRepository<User, Long> {
+
+    /**
+     * socialId와 provider로 사용자 조회
+     * 예: Google의 sub 값과 GOOGLE로 검색
+     */
+    Optional<User> findBySocialIdAndProvider(String socialId, Provider provider);
+
+    /**
+     * 이메일로 사용자 존재 여부 확인 --> 추후 이메일중복 가입 방지 기능으로 확장가능
+     */
+    boolean existsByEmail(String email);
+
+    Optional<User> findById(Long userId);
+    Optional<User> findBySocialId(String socialId);
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/user/service/UserService.java b/backend/src/main/java/com/mysite/knitly/domain/user/service/UserService.java
new file mode 100644
index 0000000..55b3901
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/user/service/UserService.java
@@ -0,0 +1,72 @@
+package com.mysite.knitly.domain.user.service;
+
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.entity.Provider;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.domain.userstore.entity.UserStore;
+import com.mysite.knitly.domain.userstore.repository.UserStoreRepository;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+@Transactional(readOnly = true)
+public class UserService {
+
+    private final UserRepository userRepository;
+    private final UserStoreRepository userStoreRepository;
+    /**
+     * Google OAuth로 로그인한 사용자 처리
+     * - 신규 사용자: 회원가입 처리
+     * - 기존 사용자: 정보 조회
+     */
+    @Transactional
+    public User processGoogleUser(String socialId, String email, String name) {
+        // 1. 이미 가입된 사용자인지 확인
+        return userRepository.findBySocialIdAndProvider(socialId, Provider.GOOGLE)
+                .orElseGet(() -> {
+                    // 2. 신규 사용자면 회원가입
+                    log.info("신규 Google 사용자 가입: email={}, name={}", email, name);
+
+                    User newUser = User.createGoogleUser(socialId, email, name);
+                    User savedUser = userRepository.save(newUser);
+
+                    log.info("회원가입 완료: userId={}", savedUser.getUserId());
+                    return savedUser;
+                });
+    }
+
+    @Transactional
+    public void ensureUserStore(User user) {
+        if (!userStoreRepository.existsByUser(user)) {
+            log.info("유저 스토어 생성: userId={}", user.getUserId());
+            userStoreRepository.save(
+                    new UserStore(user,"안녕하세요! 제 스토어에 오신 것을 환영합니다.")
+            );
+        } else {
+            log.info("기존 스토어 존재: userId={}", user.getUserId());
+        }
+    }
+
+    /**
+     * userId로 사용자 조회
+     */
+    public User findById(Long userId) {
+        return userRepository.findById(userId)
+                .orElseThrow(() -> new IllegalArgumentException("사용자를 찾을 수 없습니다: " + userId));
+    }
+
+    /**
+     * 회원탈퇴
+     */
+    @Transactional
+    public void deleteUser(Long userId) {
+        User user = findById(userId);
+        userRepository.delete(user);
+        log.info("회원탈퇴 완료 - userId: {}, email: {}", userId, user.getEmail());
+    }
+
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/userstore/controller/UserStoreController.java b/backend/src/main/java/com/mysite/knitly/domain/userstore/controller/UserStoreController.java
new file mode 100644
index 0000000..31cf29f
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/userstore/controller/UserStoreController.java
@@ -0,0 +1,139 @@
+package com.mysite.knitly.domain.userstore.controller;
+
+
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.service.UserService;
+import com.mysite.knitly.domain.userstore.dto.StoreDescriptionRequest;
+import com.mysite.knitly.domain.userstore.service.UserStoreService;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.media.Content;
+import io.swagger.v3.oas.annotations.media.ExampleObject;
+import io.swagger.v3.oas.annotations.responses.ApiResponse;
+import io.swagger.v3.oas.annotations.responses.ApiResponses;
+import io.swagger.v3.oas.annotations.security.SecurityRequirement;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.HashMap;
+import java.util.Map;
+
+@Tag(name = "Store", description = "판매자 스토어 API")
+@Slf4j
+@RestController
+@RequestMapping("/userstore")
+@Controller
+@RequiredArgsConstructor
+public class UserStoreController {
+
+    private final UserService userService;
+    private final UserStoreService userStoreService;
+
+    /**
+     * 스토어 설명 조회
+     * GET /userstore/{userId}/description
+     */
+    @Operation(
+            summary = "스토어 설명 조회",
+            description = "판매자 스토어의 설명을 조회합니다."
+    )
+    @ApiResponses({
+            @ApiResponse(
+                    responseCode = "200",
+                    description = "조회 성공",
+                    content = @Content(
+                            mediaType = "application/json",
+                            examples = @ExampleObject(value = """
+                                    {
+                                        "description": "안녕하세요! 제 스토어에 오신 것을 환영합니다."
+                                    }
+                                    """)
+                    )
+            ),
+            @ApiResponse(responseCode = "404", description = "스토어를 찾을 수 없음")
+    })
+    @GetMapping("/{userId}/description")
+    public ResponseEntity<Map<String, String>> getStoreDescription(
+            @PathVariable Long userId) {
+
+        log.info("Fetching store description for userId: {}", userId);
+
+        try {
+            String description = userStoreService.getStoreDetail(userId);
+
+            Map<String, String> response = new HashMap<>();
+            response.put("description", description);
+
+            return ResponseEntity.ok(response);
+        } catch (IllegalArgumentException e) {
+            log.error("Store not found for userId: {}", userId);
+            return ResponseEntity.status(404)
+                    .body(Map.of("error", "스토어를 찾을 수 없습니다."));
+        }
+    }
+
+    /**
+     * 스토어 설명 업데이트
+     * PUT /userstore/{userId}/description
+     */
+    @Operation(
+            summary = "스토어 설명 업데이트",
+            description = "판매자 스토어의 설명을 업데이트합니다. 본인의 스토어만 수정 가능합니다."
+    )
+    @ApiResponses({
+            @ApiResponse(
+                    responseCode = "200",
+                    description = "업데이트 성공",
+                    content = @Content(
+                            mediaType = "application/json",
+                            examples = @ExampleObject(value = """
+                                    {
+                                        "message": "스토어 설명이 업데이트되었습니다."
+                                    }
+                                    """)
+                    )
+            ),
+            @ApiResponse(
+                    responseCode = "403",
+                    description = "권한 없음 - 본인의 스토어만 수정 가능"
+            ),
+            @ApiResponse(
+                    responseCode = "404",
+                    description = "스토어를 찾을 수 없음"
+            ),
+            @ApiResponse(
+                    responseCode = "401",
+                    description = "인증 실패 - 로그인 필요"
+            )
+    })
+    @SecurityRequirement(name = "Bearer Authentication")
+    @PutMapping("/{userId}/description")
+    public ResponseEntity<?> updateStoreDescription(
+            @PathVariable Long userId,
+            @RequestBody StoreDescriptionRequest request,
+            @AuthenticationPrincipal User currentUser) {
+
+        // 🔥 권한 검증: 본인만 수정 가능
+        if (!userId.equals(currentUser.getUserId())) {
+            log.warn("Unauthorized store description update attempt - userId: {}, requestUserId: {}",
+                    currentUser.getUserId(), userId);
+            return ResponseEntity.status(403)
+                    .body(Map.of("error", "본인의 스토어만 수정할 수 있습니다."));
+        }
+
+        log.info("Updating store description for userId: {}", userId);
+
+        try {
+            userStoreService.updateStoreDetail(userId, request.getDescription());
+            return ResponseEntity.ok(Map.of("message", "스토어 설명이 업데이트되었습니다."));
+        } catch (IllegalArgumentException e) {
+            log.error("Store not found for userId: {}", userId);
+            return ResponseEntity.status(404)
+                    .body(Map.of("error", "스토어를 찾을 수 없습니다."));
+        }
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/domain/userstore/dto/StoreDescriptionRequest.java b/backend/src/main/java/com/mysite/knitly/domain/userstore/dto/StoreDescriptionRequest.java
new file mode 100644
index 0000000..dbb06b3
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/userstore/dto/StoreDescriptionRequest.java
@@ -0,0 +1,12 @@
+package com.mysite.knitly.domain.userstore.dto;
+
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.AllArgsConstructor;
+
+@Getter
+@NoArgsConstructor
+@AllArgsConstructor
+public class StoreDescriptionRequest {
+    private String description;
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/userstore/entity/UserStore.java b/backend/src/main/java/com/mysite/knitly/domain/userstore/entity/UserStore.java
new file mode 100644
index 0000000..6cde250
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/userstore/entity/UserStore.java
@@ -0,0 +1,40 @@
+package com.mysite.knitly.domain.userstore.entity;
+
+import com.mysite.knitly.domain.user.entity.User;
+import jakarta.persistence.*;
+import lombok.*;
+
+@Entity
+@Table(name = "user_stores")
+@Getter
+@NoArgsConstructor(access = AccessLevel.PROTECTED)
+@AllArgsConstructor
+@Builder
+public class UserStore {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "store_id", nullable = false)
+    private Long storeId;
+
+    // store_detail - TEXT, NULL
+    @Lob
+    @Column(name = "store_detail")
+    private String storeDetail;
+
+    // 1:1 관계 매핑: user_id 컬럼을 통해 User 엔티티와 연결
+    // UserStore가 관계의 주인(Owning Side)이 됩니다.
+    @OneToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "user_id", nullable = false)
+    private User user;
+
+    // 업데이트 메서드 추가
+    public void updateStoreDetail(String storeDetail) {
+        this.storeDetail = storeDetail;
+    }
+
+    public UserStore(User user, String storeDetail) {
+        this.user = user;
+        this.storeDetail = storeDetail;
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/userstore/repository/UserStoreRepository.java b/backend/src/main/java/com/mysite/knitly/domain/userstore/repository/UserStoreRepository.java
new file mode 100644
index 0000000..b6b77be
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/userstore/repository/UserStoreRepository.java
@@ -0,0 +1,17 @@
+package com.mysite.knitly.domain.userstore.repository;
+
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.userstore.entity.UserStore;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.Optional;
+
+public interface UserStoreRepository extends JpaRepository<UserStore, Long> {
+
+    /**
+     * userId로 UserStore 조회
+     */
+    Optional<UserStore> findByUser_UserId(Long userId);
+
+    boolean existsByUser(User user);
+}
diff --git a/backend/src/main/java/com/mysite/knitly/domain/userstore/service/UserStoreService.java b/backend/src/main/java/com/mysite/knitly/domain/userstore/service/UserStoreService.java
new file mode 100644
index 0000000..2f8e9f1
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/domain/userstore/service/UserStoreService.java
@@ -0,0 +1,50 @@
+package com.mysite.knitly.domain.userstore.service;
+
+import com.mysite.knitly.domain.userstore.entity.UserStore;
+import com.mysite.knitly.domain.userstore.repository.UserStoreRepository;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+@Transactional(readOnly = true)
+public class UserStoreService {
+
+    private final UserStoreRepository userStoreRepository;
+
+    /**
+     * 스토어 설명 조회
+     *
+     * @param userId 사용자 ID
+     * @return 스토어 설명
+     */
+    public String getStoreDetail(Long userId) {
+        UserStore userStore = userStoreRepository.findByUser_UserId(userId)
+                .orElseThrow(() -> new IllegalArgumentException("스토어를 찾을 수 없습니다."));
+
+        return userStore.getStoreDetail() != null
+                ? userStore.getStoreDetail()
+                : "안녕하세요! 제 스토어에 오신 것을 환영합니다.";  // 기본값
+    }
+
+    /**
+     * 스토어 설명 업데이트
+     *
+     * @param userId 사용자 ID
+     * @param storeDetail 스토어 설명
+     */
+    @Transactional
+    public void updateStoreDetail(Long userId, String storeDetail) {
+        log.info("Updating store detail for userId: {}", userId);
+
+        UserStore userStore = userStoreRepository.findByUser_UserId(userId)
+                .orElseThrow(() -> new IllegalArgumentException("스토어를 찾을 수 없습니다."));
+
+        userStore.updateStoreDetail(storeDetail);
+
+        log.info("Store detail updated successfully for userId: {}", userId);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/config/FileStorageConfig.java b/backend/src/main/java/com/mysite/knitly/global/config/FileStorageConfig.java
new file mode 100644
index 0000000..ebd5ec5
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/config/FileStorageConfig.java
@@ -0,0 +1,29 @@
+package com.mysite.knitly.global.config;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+import java.nio.file.Path;
+import java.nio.file.Paths;
+
+@Configuration
+public class FileStorageConfig implements WebMvcConfigurer {
+    @Value("${file.upload-dir:uploads/designs}")
+    private String uploadDir;
+
+    @Value("${file.public-prefix:/files}")
+    private String publicPrefix;
+
+    //로컬에 저장된 파일을 HTTP로 접근 가능하게 설정
+    @Override
+    public void addResourceHandlers(ResourceHandlerRegistry registry) {
+        Path base = Paths.get(uploadDir).toAbsolutePath().normalize();
+        String location = "file:" + base.toString() + "/";
+        String pattern = publicPrefix.endsWith("/**") ? publicPrefix : publicPrefix + "/**";
+
+        registry.addResourceHandler(pattern)
+                .addResourceLocations(location);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/config/RabbitMQConfig.java b/backend/src/main/java/com/mysite/knitly/global/config/RabbitMQConfig.java
new file mode 100644
index 0000000..219e717
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/config/RabbitMQConfig.java
@@ -0,0 +1,128 @@
+package com.mysite.knitly.global.config;
+
+import org.springframework.amqp.core.*;
+import org.springframework.amqp.rabbit.connection.ConnectionFactory;
+import org.springframework.amqp.rabbit.core.RabbitTemplate;
+import org.springframework.amqp.support.converter.Jackson2JsonMessageConverter;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration
+public class RabbitMQConfig {
+
+    // --- Like 관련 상수 ---
+    public static final String LIKE_ADD_QUEUE = "like.add.queue";
+    public static final String LIKE_DELETE_QUEUE = "like.delete.queue";
+    public static final String LIKE_ADD_DLQ = "like.add.dlq";
+    public static final String LIKE_DELETE_DLQ = "like.delete.dlq";
+
+    public static final String LIKE_EXCHANGE = "like.exchange";
+    public static final String LIKE_ADD_ROUTING_KEY = "like.add.routingkey";
+    public static final String LIKE_DELETE_ROUTING_KEY = "like.delete.routingkey";
+
+    public static final String DEAD_LETTER_EXCHANGE = "dead-letter.exchange";
+    public static final String DEAD_LETTER_ROUTING_KEY_PREFIX = "dead."; // 라우팅 키 접두사
+
+    @Bean
+    public DirectExchange deadLetterExchange() {
+        return new DirectExchange(DEAD_LETTER_EXCHANGE);
+    }
+
+    @Bean
+    public TopicExchange likeExchange() {
+        return new TopicExchange(LIKE_EXCHANGE);
+    }
+
+    @Bean
+    public Queue likeAddQueue() {
+        return QueueBuilder.durable(LIKE_ADD_QUEUE)
+                .withArgument("x-dead-letter-exchange", DEAD_LETTER_EXCHANGE)
+                .withArgument("x-dead-letter-routing-key", DEAD_LETTER_ROUTING_KEY_PREFIX + LIKE_ADD_QUEUE)
+                .build();
+    }
+
+    @Bean
+    public Queue likeDeleteQueue() {
+        return QueueBuilder.durable(LIKE_DELETE_QUEUE)
+                .withArgument("x-dead-letter-exchange", DEAD_LETTER_EXCHANGE)
+                .withArgument("x-dead-letter-routing-key", DEAD_LETTER_ROUTING_KEY_PREFIX + LIKE_DELETE_QUEUE)
+                .build();
+    }
+
+    @Bean
+    public Queue likeAddDeadLetterQueue() {
+        return QueueBuilder.durable(LIKE_ADD_DLQ).build();
+    }
+
+    @Bean
+    public Queue likeDeleteDeadLetterQueue() {
+        return QueueBuilder.durable(LIKE_DELETE_DLQ).build();
+    }
+
+    // Binding
+    @Bean
+    public Binding likeAddBinding(Queue likeAddQueue, TopicExchange likeExchange) {
+        return BindingBuilder.bind(likeAddQueue).to(likeExchange).with(LIKE_ADD_ROUTING_KEY);
+    }
+
+    @Bean
+    public Binding likeDeleteBinding(Queue likeDeleteQueue, TopicExchange likeExchange) {
+        return BindingBuilder.bind(likeDeleteQueue).to(likeExchange).with(LIKE_DELETE_ROUTING_KEY);
+    }
+
+    // DLQ Binding
+    @Bean
+    public Binding likeAddDlqBinding(Queue likeAddDeadLetterQueue, DirectExchange deadLetterExchange) {
+        return BindingBuilder.bind(likeAddDeadLetterQueue).to(deadLetterExchange).with(DEAD_LETTER_ROUTING_KEY_PREFIX + LIKE_ADD_QUEUE);
+    }
+
+    @Bean
+    public Binding likeDeleteDlqBinding(Queue likeDeleteDeadLetterQueue, DirectExchange deadLetterExchange) {
+        return BindingBuilder.bind(likeDeleteDeadLetterQueue).to(deadLetterExchange).with(DEAD_LETTER_ROUTING_KEY_PREFIX + LIKE_DELETE_QUEUE);
+    }
+
+
+    @Bean
+    public TopicExchange orderExchange() {
+        return new TopicExchange("order.exchange");
+    }
+
+    @Bean
+    public Queue orderEmailQueue() {
+        return QueueBuilder.durable("order.email.queue")
+                .withArgument("x-dead-letter-exchange", DEAD_LETTER_EXCHANGE)
+                .withArgument("x-dead-letter-routing-key", DEAD_LETTER_ROUTING_KEY_PREFIX + "order.email.queue")
+                .build();
+    }
+
+    @Bean
+    public Queue orderEmailDeadLetterQueue() {
+        return QueueBuilder.durable("order.email.queue.dlq").build();
+    }
+
+    @Bean
+    public Binding orderEmailBinding(Queue orderEmailQueue, TopicExchange orderExchange) {
+        return BindingBuilder.bind(orderEmailQueue).to(orderExchange).with("order.completed");
+    }
+
+    @Bean
+    public Binding orderEmailDlqBinding(Queue orderEmailDeadLetterQueue, DirectExchange deadLetterExchange) {
+        return BindingBuilder.bind(orderEmailDeadLetterQueue).to(deadLetterExchange).with(DEAD_LETTER_ROUTING_KEY_PREFIX + "order.email.queue");
+    }
+
+    // JSON 메시지 컨버터
+    @Bean
+    public Jackson2JsonMessageConverter jackson2JsonMessageConverter() {
+        return new Jackson2JsonMessageConverter();
+    }
+
+    // RabbitTemplate에 JSON 컨버터 적용
+    @Bean
+    public RabbitTemplate rabbitTemplate(ConnectionFactory connectionFactory,
+                                         Jackson2JsonMessageConverter converter) {
+        RabbitTemplate template = new RabbitTemplate(connectionFactory);
+        template.setMessageConverter(converter);
+        return template;
+    }
+
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/global/config/WebConfig.java b/backend/src/main/java/com/mysite/knitly/global/config/WebConfig.java
new file mode 100644
index 0000000..af8d9ec
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/config/WebConfig.java
@@ -0,0 +1,16 @@
+package com.mysite.knitly.global.config;
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+public class WebConfig implements WebMvcConfigurer {
+
+    @Override
+    public void addResourceHandlers(ResourceHandlerRegistry registry) {
+        String uploadPath = System.getProperty("user.dir") + "/uploads/review/";
+        registry.addResourceHandler("/review/**")
+                .addResourceLocations("file:" + uploadPath);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/email/EmailNotificationConsumer.java b/backend/src/main/java/com/mysite/knitly/global/email/EmailNotificationConsumer.java
new file mode 100644
index 0000000..5d10c99
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/email/EmailNotificationConsumer.java
@@ -0,0 +1,28 @@
+package com.mysite.knitly.global.email;
+
+import com.mysite.knitly.domain.order.dto.EmailNotificationDto;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.amqp.rabbit.annotation.RabbitListener;
+import org.springframework.stereotype.Component;
+
+@Slf4j
+@Component
+@RequiredArgsConstructor
+public class EmailNotificationConsumer {
+
+    private final EmailService emailService;
+
+    @RabbitListener(queues = "order.email.queue")
+    public void receiveOrderCompletionMessage(EmailNotificationDto emailDto) {
+        log.info("Received message for order: {}", emailDto.orderId());
+        try {
+            emailService.sendOrderConfirmationEmail(emailDto);
+            log.info("Successfully sent email for order: {}", emailDto.orderId());
+        } catch (Exception e) {
+            log.error("Failed to send email for order: {}. Error: {}", emailDto.orderId(), e.getMessage());
+            // 🚨 예외를 다시 던져서 RabbitMQ가 재시도하거나 DLQ로 보내도록 함
+            throw new RuntimeException("Email sending failed after processing.", e);
+        }
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/email/EmailService.java b/backend/src/main/java/com/mysite/knitly/global/email/EmailService.java
new file mode 100644
index 0000000..85e320b
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/email/EmailService.java
@@ -0,0 +1,67 @@
+package com.mysite.knitly.global.email;
+
+import com.mysite.knitly.domain.order.dto.EmailNotificationDto;
+import com.mysite.knitly.domain.order.entity.Order;
+import com.mysite.knitly.domain.order.entity.OrderItem;
+import com.mysite.knitly.domain.order.repository.OrderRepository;
+import com.mysite.knitly.global.util.FileStorageService;
+import jakarta.mail.MessagingException;
+import jakarta.mail.internet.MimeMessage;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.core.io.ByteArrayResource;
+import org.springframework.mail.javamail.JavaMailSender;
+import org.springframework.mail.javamail.MimeMessageHelper;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.io.IOException;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class EmailService {
+
+    private final JavaMailSender javaMailSender;
+    private final OrderRepository orderRepository;
+    private final FileStorageService fileStorageService; // PDF 파일을 읽기 위해 주입
+
+    @Transactional(readOnly = true) // 이메일 발송은 DB를 변경하지 않으므로 readOnly
+    public void sendOrderConfirmationEmail(EmailNotificationDto emailDto) {
+        // 1. DTO의 정보로 DB에서 전체 주문 정보를 다시 조회 (OrderItem, Product, Design까지 모두)
+        Order order = orderRepository.findOrderWithDetailsById(emailDto.orderId())
+                .orElseThrow(() -> new IllegalArgumentException("Order not found: " + emailDto.orderId()));
+
+        MimeMessage mimeMessage = javaMailSender.createMimeMessage();
+
+        try {
+            MimeMessageHelper mimeMessageHelper = new MimeMessageHelper(mimeMessage, true, "UTF-8"); // true: multipart
+            mimeMessageHelper.setTo(emailDto.userEmail());
+            mimeMessageHelper.setSubject("[Knitly] 주문하신 도안이 도착했습니다.");
+
+            // 2. TODO: Thymeleaf 같은 템플릿 엔진을 사용하여 HTML 이메일 본문 생성
+            String emailContent = String.format("<h1>%s님, 주문해주셔서 감사합니다.</h1><p>주문 번호: %d</p>",
+                    order.getUser().getName(), order.getOrderId());
+            mimeMessageHelper.setText(emailContent, true); // true: HTML
+
+            // 3. 주문된 모든 상품의 PDF를 첨부
+            for (OrderItem item : order.getOrderItems()) {
+                String pdfUrl = item.getProduct().getDesign().getPdfUrl();
+                try {
+                    byte[] pdfBytes = fileStorageService.loadFileAsBytes(pdfUrl); // FileStorageService에 파일 읽기 기능 추가
+                    mimeMessageHelper.addAttachment(item.getProduct().getTitle() + ".pdf", new ByteArrayResource(pdfBytes));
+                } catch (IOException e) {
+                    log.error("PDF 파일 첨부 실패: url={}", pdfUrl, e);
+                    // 하나의 PDF 실패가 전체 이메일 발송을 막을지, 아니면 그냥 보낼지 정책 결정 필요
+                }
+            }
+
+            // 4. 이메일 발송
+            javaMailSender.send(mimeMessage);
+
+        } catch (MessagingException e) {
+            // Consumer가 이 예외를 받아서 재시도/DLQ 처리
+            throw new RuntimeException("MimeMessage 생성 또는 발송에 실패했습니다.", e);
+        }
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/global/exception/ErrorCode.java b/backend/src/main/java/com/mysite/knitly/global/exception/ErrorCode.java
new file mode 100644
index 0000000..ad8ef68
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/exception/ErrorCode.java
@@ -0,0 +1,125 @@
+package com.mysite.knitly.global.exception;
+
+import lombok.Getter;
+import org.springframework.http.HttpStatus;
+
+@Getter
+public enum ErrorCode {
+    // Common 0
+    BAD_REQUEST("001", HttpStatus.BAD_REQUEST, "잘못된 요청입니다."), // 에시, 삭제가능
+
+    // User 1000
+    USER_NOT_FOUND("1001", HttpStatus.NOT_FOUND, "유저를 찾을 수 없습니다."),
+
+    // Product 2000
+    PRODUCT_NOT_FOUND("2001", HttpStatus.NOT_FOUND, "상품을 찾을 수 없습니다."),
+    PRODUCT_MODIFY_UNAUTHORIZED("2002", HttpStatus.FORBIDDEN, "상품 수정 권한이 없습니다."),
+    PRODUCT_DELETE_UNAUTHORIZED("2003", HttpStatus.FORBIDDEN, "상품 삭제 권한이 없습니다."),
+    PRODUCT_ALREADY_DELETED("2004", HttpStatus.BAD_REQUEST, "이미 삭제된 상품입니다."),
+    PRODUCT_STOCK_INSUFFICIENT("2005", HttpStatus.BAD_REQUEST, "상품 재고보다 많은 수량을 주문할 수 없습니다. 남은 재고를 확인해주세요."),
+    LIKE_ALREADY_EXISTS("2401", HttpStatus.CONFLICT, "이미 찜한 상품입니다."),
+    LIKE_NOT_FOUND("2402", HttpStatus.NOT_FOUND, "삭제할 찜을 찾을 수 없습니다."),
+
+    // Order 3000
+    OUT_OF_STOCK("3001", HttpStatus.BAD_REQUEST, "품절된 상품입니다."),
+    ORDER_NOT_FOUND("3002", HttpStatus.NOT_FOUND, "주문을 찾을 수 없습니다."),
+    ORDER_ITEM_NOT_FOUND("3003", HttpStatus.NOT_FOUND, "주문 상품을 찾을 수 없습니다."),
+
+    // Post 4000
+    POST_NOT_FOUND("4001", HttpStatus.NOT_FOUND, "게시글을 찾을 수 없습니다."),
+    POST_UNAUTHORIZED("4002", HttpStatus.UNAUTHORIZED, "로그인이 필요한 요청입니다."),
+    POST_UPDATE_FORBIDDEN("4003", HttpStatus.FORBIDDEN, "게시글 수정 권한이 없습니다."),
+    POST_DELETE_FORBIDDEN("4004", HttpStatus.FORBIDDEN, "게시글 삭제 권한이 없습니다."),
+    POST_ALREADY_DELETED("4005", HttpStatus.BAD_REQUEST, "이미 삭제된 게시글입니다."),
+    POST_CONTENT_TOO_SHORT("4006", HttpStatus.BAD_REQUEST, "게시글 내용은 최소 길이 요건을 충족해야 합니다."),
+    POST_IMAGE_EXTENSION_INVALID("4007", HttpStatus.BAD_REQUEST, "지원하지 않는 이미지 형식입니다. JPG, JPEG, PNG만 가능합니다."),
+    POST_TITLE_LENGTH_INVALID("4008", HttpStatus.BAD_REQUEST, "게시글 제목은 1자 이상 100자 이하로 작성해야 합니다."),
+    POST_IMAGE_COUNT_EXCEEDED("4009", HttpStatus.BAD_REQUEST, "이미지는 최대 5개까지만 업로드할 수 있습니다."),
+    VALIDATION_ERROR("4010", HttpStatus.BAD_REQUEST, "요청 값이 올바르지 않습니다."),
+
+    // Comment 4050
+    COMMENT_NOT_FOUND("4051", HttpStatus.NOT_FOUND, "댓글을 찾을 수 없습니다."),
+    COMMENT_UNAUTHORIZED("4052", HttpStatus.UNAUTHORIZED, "로그인이 필요한 요청입니다."),
+    COMMENT_UPDATE_FORBIDDEN("4053", HttpStatus.FORBIDDEN, "댓글 수정 권한이 없습니다."),
+    COMMENT_DELETE_FORBIDDEN("4054", HttpStatus.FORBIDDEN, "댓글 삭제 권한이 없습니다."),
+    COMMENT_ALREADY_DELETED("4055", HttpStatus.BAD_REQUEST, "이미 삭제된 댓글입니다."),
+    COMMENT_CONTENT_TOO_SHORT("4056", HttpStatus.BAD_REQUEST, "댓글은 1자 이상 300자 이하로 입력해 주세요."),
+
+    // MyPage 4100
+    MP_UNAUTHORIZED("4101", HttpStatus.UNAUTHORIZED, "로그인이 필요한 요청입니다."),
+    MP_FORBIDDEN("4102", HttpStatus.FORBIDDEN, "접근 권한이 없습니다."),
+    MP_PROFILE_NOT_FOUND("4103", HttpStatus.NOT_FOUND, "프로필 정보를 찾을 수 없습니다."),
+    MP_ORDER_NOT_FOUND("4104", HttpStatus.NOT_FOUND, "주문 내역을 찾을 수 없습니다."),
+    MP_ORDER_LIST_EMPTY("4105", HttpStatus.NO_CONTENT, "주문 내역이 비어 있습니다."),
+    MP_MY_POSTS_EMPTY("4106", HttpStatus.NO_CONTENT, "작성한 게시글이 없습니다."),
+    MP_MY_POSTS_QUERY_TOO_SHORT("4107", HttpStatus.BAD_REQUEST, "검색어가 너무 짧습니다."),
+    MP_MY_COMMENTS_EMPTY("4108", HttpStatus.NO_CONTENT, "작성한 댓글이 없습니다."),
+    MP_MY_COMMENTS_QUERY_TOO_SHORT("4109", HttpStatus.BAD_REQUEST, "검색어가 너무 짧습니다."),
+    MP_FAVORITES_EMPTY("4110", HttpStatus.NO_CONTENT, "찜한 상품이 없습니다."),
+    MP_REVIEWS_EMPTY("4111", HttpStatus.NO_CONTENT, "작성한 리뷰가 없습니다."),
+    MP_INVALID_PAGE_PARAM("4112", HttpStatus.BAD_REQUEST, "page 파라미터가 올바르지 않습니다."),
+    MP_INVALID_SIZE_PARAM("4113", HttpStatus.BAD_REQUEST, "size 파라미터가 올바르지 않습니다."),
+    MP_INVALID_SORT_PARAM("4114", HttpStatus.BAD_REQUEST, "정렬 파라미터가 올바르지 않습니다."),
+
+
+    // Review 5000
+
+    REVIEW_NOT_FOUND("5001", HttpStatus.NOT_FOUND, "리뷰를 찾을 수 없습니다."),
+    REVIEW_NOT_AUTHORIZED("5002", HttpStatus.FORBIDDEN, "리뷰 삭제 권한이 없습니다."),
+
+    // Design 6000
+    DESIGN_NOT_FOUND("2001", HttpStatus.NOT_FOUND, "도안을 찾을 수 없습니다."),
+    DESIGN_DELETION_NOT_ALLOWED("2002", HttpStatus.BAD_REQUEST, "판매 전 상태의 도안만 삭제할 수 있습니다."),
+    DESIGN_UNAUTHORIZED("2003", HttpStatus.FORBIDDEN, "본인의 도안만 접근할 수 있습니다."),
+    DESIGN_INVALID_GRID_SIZE("2004", HttpStatus.BAD_REQUEST, "도안은 10x10 크기여야 합니다."),
+    DESIGN_PDF_GENERATION_FAILED("2005", HttpStatus.INTERNAL_SERVER_ERROR, "PDF 생성에 실패했습니다."),
+    DESIGN_FILE_SAVE_FAILED("2006", HttpStatus.INTERNAL_SERVER_ERROR, "PDF 파일 저장에 실패했습니다."),   // Image 7000
+    DESIGN_UNAUTHORIZED_DELETE("2007", HttpStatus.FORBIDDEN, "본인의 도안만 삭제할 수 있습니다."),
+    DESIGN_NOT_DELETABLE("2008", HttpStatus.BAD_REQUEST, "해당 상태의 도안은 삭제할 수 없습니다."),
+    DESIGN_FILE_EMPTY("2009", HttpStatus.BAD_REQUEST, "업로드할 파일이 없습니다."),
+    DESIGN_FILE_INVALID_TYPE("2010", HttpStatus.BAD_REQUEST, "PDF 파일만 업로드 가능합니다."),
+    DESIGN_FILE_SIZE_EXCEEDED("2011", HttpStatus.BAD_REQUEST, "파일 크기는 10MB를 초과할 수 없습니다."),
+    DESIGN_FILE_NAME_INVALID("2012", HttpStatus.BAD_REQUEST, "파일명이 유효하지 않습니다."),
+    DESIGN_NOT_ON_SALE("2013", HttpStatus.BAD_REQUEST, "판매중이 아닌 도안입니다."),
+    DESIGN_ALREADY_ON_SALE("2014", HttpStatus.BAD_REQUEST, "이미 판매중인 도안입니다."),
+    DESIGN_NOT_STOPPED("2015", HttpStatus.BAD_REQUEST, "이미 판매중지된 도안입니다."),
+    DESIGN_UNAUTHORIZED_ACCESS("2016", HttpStatus.FORBIDDEN, "본인의 도안만 접근할 수 있습니다."),
+    DESIGN_FILE_NOT_FOUND("2017", HttpStatus.NOT_FOUND, "도안 파일을 찾을 수 없습니다."),
+
+    // Event 6000
+
+    // Image 7000
+    IMAGE_FORMAT_NOT_SUPPORTED("7501", HttpStatus.BAD_REQUEST, "지원하지 않는 이미지 형식입니다. JPG, JPEG, PNG만 가능합니다."),
+    REVIEW_IMAGE_SAVE_FAILED("7502", HttpStatus.INTERNAL_SERVER_ERROR, "리뷰 이미지 저장에 실패했습니다."),
+    PRODUCT_IMAGE_SAVE_FAILED("7503", HttpStatus.INTERNAL_SERVER_ERROR, "상품 이미지 저장에 실패했습니다."),
+
+
+    // File 7000
+
+    // File 7000
+    FILE_STORAGE_FAILED("7601", HttpStatus.INTERNAL_SERVER_ERROR, "파일 저장에 실패했습니다."),
+
+    // Payment 8000
+    PAYMENT_NOT_FOUND("8001", HttpStatus.NOT_FOUND, "결제 정보를 찾을 수 없습니다."),
+    PAYMENT_AMOUNT_MISMATCH("8002", HttpStatus.BAD_REQUEST, "결제 금액이 일치하지 않습니다."),
+    PAYMENT_API_CALL_FAILED("8003", HttpStatus.INTERNAL_SERVER_ERROR, "결제 API 호출에 실패했습니다."),
+    PAYMENT_CONFIRM_FAILED("8004", HttpStatus.INTERNAL_SERVER_ERROR, "결제 승인에 실패했습니다."),
+    PAYMENT_ALREADY_EXISTS("8005", HttpStatus.CONFLICT, "이미 결제가 완료된 주문입니다."),
+    PAYMENT_NOT_CANCELABLE("8006", HttpStatus.BAD_REQUEST, "취소할 수 없는 결제 상태입니다."),
+    PAYMENT_CANCEL_API_FAILED("8007", HttpStatus.INTERNAL_SERVER_ERROR, "결제 취소 API 호출에 실패했습니다."),
+    PAYMENT_CANCEL_FAILED("8008", HttpStatus.INTERNAL_SERVER_ERROR, "결제 취소에 실패했습니다."),
+    PAYMENT_UNAUTHORIZED_ACCESS("8009", HttpStatus.FORBIDDEN, "결제 정보에 접근할 권한이 없습니다."),
+    // System 9000
+
+    LOCK_ACQUISITION_FAILED("9001", HttpStatus.INTERNAL_SERVER_ERROR, "락 획득에 실패했습니다. 잠시 후 다시 시도해주세요.");
+
+    private final String code;
+    private final HttpStatus status;
+    private final String message;
+
+    ErrorCode(String code, HttpStatus status, String message) {
+        this.code = code;
+        this.status = status;
+        this.message = message;
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/exception/ErrorResponse.java b/backend/src/main/java/com/mysite/knitly/global/exception/ErrorResponse.java
new file mode 100644
index 0000000..a3505f8
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/exception/ErrorResponse.java
@@ -0,0 +1,39 @@
+package com.mysite.knitly.global.exception;
+
+import lombok.Builder;
+import lombok.Getter;
+import org.springframework.http.HttpStatus;
+import org.springframework.validation.BindingResult;
+
+@Getter
+@Builder
+public class ErrorResponse {
+    private final ErrorBody error;
+
+    @Getter
+    @Builder
+    public static class ErrorBody{
+        private final String code;
+        private final String status;
+        private final String message;
+    }
+
+    public static ErrorResponse errorResponse(ErrorCode errorCode) {
+        return ErrorResponse.builder()
+                .error(ErrorBody.builder()
+                        .code(errorCode.name())
+                        .status(String.valueOf(errorCode.getStatus().value()))
+                        .message(errorCode.getMessage())
+                        .build())
+                .build();
+    }
+    public static ErrorResponse validationError(BindingResult bindingResult) {
+        return ErrorResponse.builder()
+                .error(ErrorBody.builder()
+                        .code(ErrorCode.VALIDATION_ERROR.name())
+                        .status(String.valueOf(HttpStatus.BAD_REQUEST.value()))
+                        .message("요청 값이 올바르지 않습니다.")
+                        .build())
+                .build();
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/exception/GlobalExceptionHandler.java b/backend/src/main/java/com/mysite/knitly/global/exception/GlobalExceptionHandler.java
new file mode 100644
index 0000000..a50cdc8
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/exception/GlobalExceptionHandler.java
@@ -0,0 +1,30 @@
+package com.mysite.knitly.global.exception;
+
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.ExceptionHandler;
+import org.springframework.web.bind.annotation.RestControllerAdvice;
+import org.springframework.core.Ordered;
+import org.springframework.core.annotation.Order;
+import org.springframework.validation.BindingResult;
+import org.springframework.web.bind.MethodArgumentNotValidException;
+
+@RestControllerAdvice
+@Order(Ordered.HIGHEST_PRECEDENCE)
+public class GlobalExceptionHandler {
+
+    @ExceptionHandler(ServiceException.class)
+    public ResponseEntity<ErrorResponse> handleServiceException(ServiceException e) {
+        ErrorCode errorCode = e.getErrorCode();
+        return ResponseEntity
+                .status(errorCode.getStatus())
+                .body(ErrorResponse.errorResponse(errorCode));
+    }
+    @ExceptionHandler(MethodArgumentNotValidException.class)
+    public ResponseEntity<ErrorResponse> handleMethodArgumentNotValid(MethodArgumentNotValidException e) {
+        BindingResult bindingResult = e.getBindingResult();
+        return ResponseEntity
+                .status(HttpStatus.BAD_REQUEST)
+                .body(ErrorResponse.validationError(bindingResult));
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/exception/ServiceException.java b/backend/src/main/java/com/mysite/knitly/global/exception/ServiceException.java
new file mode 100644
index 0000000..d4546ba
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/exception/ServiceException.java
@@ -0,0 +1,16 @@
+package com.mysite.knitly.global.exception;
+
+import lombok.Getter;
+
+@Getter
+public class ServiceException extends RuntimeException {
+    private final ErrorCode errorCode;
+
+    public ServiceException(ErrorCode errorCode) {
+        super(errorCode.getMessage());
+        this.errorCode = errorCode;
+    }
+    public ErrorCode getErrorCode() {
+        return errorCode;
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/jpa/BaseTimeEntity.java b/backend/src/main/java/com/mysite/knitly/global/jpa/BaseTimeEntity.java
new file mode 100644
index 0000000..c834d98
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/jpa/BaseTimeEntity.java
@@ -0,0 +1,25 @@
+package com.mysite.knitly.global.jpa;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.EntityListeners;
+import jakarta.persistence.MappedSuperclass;
+import lombok.Getter;
+import org.springframework.data.annotation.CreatedDate;
+import org.springframework.data.annotation.LastModifiedDate;
+import org.springframework.data.jpa.domain.support.AuditingEntityListener;
+
+import java.time.LocalDateTime;
+
+@Getter
+@MappedSuperclass
+@EntityListeners(AuditingEntityListener.class)
+public abstract class BaseTimeEntity {
+
+    @CreatedDate
+    @Column(name = "created_at", nullable = false, updatable = false)
+    private LocalDateTime createdAt;
+
+    @LastModifiedDate
+    @Column(name = "updated_at", nullable = false)
+    private LocalDateTime updatedAt;
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/jpa/converter/UUIDBinaryConverter.java b/backend/src/main/java/com/mysite/knitly/global/jpa/converter/UUIDBinaryConverter.java
new file mode 100644
index 0000000..d52a5a1
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/jpa/converter/UUIDBinaryConverter.java
@@ -0,0 +1,30 @@
+package com.mysite.knitly.global.jpa.converter;
+
+import jakarta.persistence.AttributeConverter;
+import jakarta.persistence.Converter;
+
+import java.nio.ByteBuffer;
+import java.util.UUID;
+
+// UUID <-> BINARY(16)
+@Converter(autoApply = false) // 필요한 필드에 @Convert 사용
+public class UUIDBinaryConverter implements AttributeConverter<UUID, byte[]> {
+
+    @Override
+    public byte[] convertToDatabaseColumn(UUID attribute) {
+        if (attribute == null) return null;
+        ByteBuffer bb = ByteBuffer.allocate(16);
+        bb.putLong(attribute.getMostSignificantBits());
+        bb.putLong(attribute.getLeastSignificantBits());
+        return bb.array();
+    }
+
+    @Override
+    public UUID convertToEntityAttribute(byte[] dbData) {
+        if (dbData == null) return null;
+        ByteBuffer bb = ByteBuffer.wrap(dbData);
+        long most = bb.getLong();
+        long least = bb.getLong();
+        return new UUID(most, least);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/lock/RedisLockService.java b/backend/src/main/java/com/mysite/knitly/global/lock/RedisLockService.java
new file mode 100644
index 0000000..fe8800c
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/lock/RedisLockService.java
@@ -0,0 +1,32 @@
+package com.mysite.knitly.global.lock;
+
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.redis.core.StringRedisTemplate;
+import org.springframework.stereotype.Component;
+
+import java.time.Duration;
+
+@Component
+@RequiredArgsConstructor
+public class RedisLockService {
+
+    private final StringRedisTemplate redisTemplate;
+
+    /**
+     * 락 획득 시도 (3초간 유효)
+     * @return 락 획득 성공 여부
+     */
+    public boolean tryLock(String key) {
+        // SET key "locked" NX PX 3000
+        return Boolean.TRUE.equals(
+                redisTemplate.opsForValue().setIfAbsent(key, "locked", Duration.ofSeconds(3))
+        );
+    }
+
+    /**
+     * 락 해제
+     */
+    public void unlock(String key) {
+        redisTemplate.delete(key);
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/global/util/Anonymizer.java b/backend/src/main/java/com/mysite/knitly/global/util/Anonymizer.java
new file mode 100644
index 0000000..2e47717
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/util/Anonymizer.java
@@ -0,0 +1,17 @@
+package com.mysite.knitly.global.util;
+
+import java.util.Locale;
+
+// 같은 사용자(UUID)면 언제나 같은 별칭을 얻도록 하는 유틸.
+// 익명의 털실-1234 형식 (댓글의 순번 규칙은 서비스 로직에서 처리)
+public final class Anonymizer {
+    private static final String PREFIX = "익명의 털실-";
+
+    private Anonymizer() {}
+
+    public static String yarn(Long userId) {
+        if (userId == null) return PREFIX + "0000";
+        int hash = Math.abs(userId.toString().toLowerCase(Locale.ROOT).hashCode());
+        return PREFIX + String.format("%04d", hash % 10000);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/util/FileNameUtils.java b/backend/src/main/java/com/mysite/knitly/global/util/FileNameUtils.java
new file mode 100644
index 0000000..094bd6f
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/util/FileNameUtils.java
@@ -0,0 +1,12 @@
+package com.mysite.knitly.global.util;
+
+public class FileNameUtils {
+    public static String sanitize(String input) {
+        if (input == null || input.isBlank()) return "design";
+        String s = input.trim()
+                .replaceAll("[\\\\/:*?\"<>|]", "_")
+                .replaceAll("\\s+", " ");
+        if (!s.toLowerCase().endsWith(".pdf")) s += ".pdf";
+        return s.length() > 80 ? s.substring(0, 80) : s;
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/global/util/FileStorageService.java b/backend/src/main/java/com/mysite/knitly/global/util/FileStorageService.java
new file mode 100644
index 0000000..98ddffc
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/util/FileStorageService.java
@@ -0,0 +1,94 @@
+package com.mysite.knitly.global.util;
+
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.io.File;
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.util.UUID;
+
+@Slf4j
+@Service
+public class FileStorageService {
+
+    private final String uploadDir = "resources/static/";
+    private final String urlPrefix = "/resources/static/";
+
+    /**
+     * 파일을 저장하고 접근 URL을 반환합니다.
+     * @param file 저장할 MultipartFile
+     * @param domain 'product', 'review' 등 파일이 속한 도메인
+     * @return 파일에 접근할 수 있는 URL
+     */
+    public String storeFile(MultipartFile file, String domain) {
+        String originalFilename = file.getOriginalFilename();
+        if (!ImageValidator.isAllowedImageUrl(originalFilename)) {
+            throw new ServiceException(ErrorCode.IMAGE_FORMAT_NOT_SUPPORTED);
+        }
+
+        try {
+            String domainUploadDir = uploadDir + domain + "/";
+            new File(domainUploadDir).mkdirs(); // 도메인별 디렉토리 생성
+
+            String filename = UUID.randomUUID() + "_" + FileNameUtils.sanitize(originalFilename);
+            Path path = Paths.get(domainUploadDir, filename);
+            Files.write(path, file.getBytes());
+
+            return urlPrefix + domain + "/" + filename;
+
+        } catch (IOException e) {
+            log.error("파일 저장에 실패했습니다. filename={}", originalFilename, e);
+            throw new ServiceException(ErrorCode.FILE_STORAGE_FAILED);
+        }
+    }
+
+    /**
+     * 파일 URL을 기반으로 실제 파일을 삭제합니다.
+     * @param fileUrl 삭제할 파일의 URL
+     */
+    public void deleteFile(String fileUrl) {
+        if (fileUrl == null || fileUrl.isEmpty()) {
+            return;
+        }
+
+        try {
+            // URL에서 실제 파일 시스템 경로를 추출
+            // 예: /resources/static/product/abc.jpg -> resources/static/product/abc.jpg
+            String filePath = fileUrl.replaceFirst(urlPrefix, uploadDir);
+            Path path = Paths.get(filePath);
+
+            Files.deleteIfExists(path);
+            log.info("파일 삭제 성공: {}", filePath);
+
+        } catch (IOException e) {
+            log.error("파일 삭제에 실패했습니다. fileUrl={}", fileUrl, e);
+            // 파일 삭제 실패가 전체 트랜잭션을 롤백시킬 필요는 없으므로, 여기서는 예외를 다시 던지지 않고 로그만 남깁니다.
+        }
+    }
+
+    /**
+     * 파일 URL을 기반으로 실제 파일 내용을 byte 배열로 읽어옵니다.
+     * @param fileUrl 읽어올 파일의 URL
+     * @return 파일의 byte[]
+     * @throws IOException 파일 읽기 실패 시
+     */
+    public byte[] loadFileAsBytes(String fileUrl) throws IOException {
+        if (fileUrl == null || fileUrl.isEmpty()) {
+            throw new IOException("유효하지 않은 파일 URL입니다.");
+        }
+        try {
+            String filePath = fileUrl.replaceFirst(urlPrefix, uploadDir);
+            Path path = Paths.get(filePath);
+            return Files.readAllBytes(path);
+        } catch (IOException e) {
+            log.error("파일을 읽는 데 실패했습니다. fileUrl={}", fileUrl, e);
+            throw e; // 예외를 상위로 던져서 Consumer가 처리하도록 함
+        }
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/global/util/ImageValidator.java b/backend/src/main/java/com/mysite/knitly/global/util/ImageValidator.java
new file mode 100644
index 0000000..e5ed0ce
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/global/util/ImageValidator.java
@@ -0,0 +1,15 @@
+package com.mysite.knitly.global.util;
+
+import java.util.regex.Pattern;
+
+public final class ImageValidator {
+    private static final Pattern ALLOWED
+            = Pattern.compile("(?i).+\\.(png|jpg|jpeg)(\\?.*)?$");
+
+    private ImageValidator() {}
+
+    public static boolean isAllowedImageUrl(String url) {
+        if (url == null || url.isBlank()) return true; // 이미지 미첨부는 통과
+        return ALLOWED.matcher(url).matches();
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/auth/controller/AuthController.java b/backend/src/main/java/com/mysite/knitly/utility/auth/controller/AuthController.java
new file mode 100644
index 0000000..2882076
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/auth/controller/AuthController.java
@@ -0,0 +1,139 @@
+package com.mysite.knitly.utility.auth.controller;
+
+import com.mysite.knitly.utility.auth.dto.TokenRefreshResponse;
+import com.mysite.knitly.utility.auth.service.AuthService;
+import com.mysite.knitly.utility.cookie.CookieUtil;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.media.Content;
+import io.swagger.v3.oas.annotations.media.ExampleObject;
+import io.swagger.v3.oas.annotations.responses.ApiResponse;
+import io.swagger.v3.oas.annotations.responses.ApiResponses;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+@Tag(name = "Auth", description = "인증 관련 API")
+@Slf4j
+@RestController
+@RequestMapping("/auth")
+@RequiredArgsConstructor
+public class AuthController {
+
+    private final AuthService authService;
+    private final CookieUtil cookieUtil;
+
+    @Value("${custom.jwt.refreshTokenExpireSeconds}")
+    private int refreshTokenExpireSeconds;
+
+    private static final String REFRESH_TOKEN_COOKIE_NAME = "refreshToken";
+
+    /**
+     * Access Token 갱신 API
+     * POST /api/auth/refresh
+     *
+     * 쿠키에서 Refresh Token을 읽어 새로운 Access Token과 Refresh Token을 발급
+     */
+    @Operation(
+            summary = "토큰 갱신",
+            description = "HTTP-only 쿠키의 Refresh Token을 사용하여 새로운 Access Token과 Refresh Token을 발급받습니다."
+    )
+    @ApiResponses({
+            @ApiResponse(
+                    responseCode = "200",
+                    description = "갱신 성공",
+                    content = @Content(
+                            mediaType = "application/json",
+                            examples = @ExampleObject(value = """
+                    {
+                        "accessToken": "eyJhbGciOiJIUzI1NiJ9...",
+                        "refreshToken": "eyJhbGciOiJIUzI1NiJ9...",
+                        "tokenType": "Bearer",
+                        "expiresIn": 1800
+                    }
+                    """)
+                    )
+            ),
+            @ApiResponse(
+                    responseCode = "400",
+                    description = "Refresh Token이 없거나 유효하지 않음"
+            ),
+            @ApiResponse(
+                    responseCode = "401",
+                    description = "만료되었거나 유효하지 않은 토큰"
+            )
+    })
+    @PostMapping("/refresh")
+    public ResponseEntity<TokenRefreshResponse> refreshToken(
+            HttpServletRequest request,
+            HttpServletResponse response) {
+
+        log.info("Token refresh API called");
+
+        // 1. 쿠키에서 Refresh Token 가져오기
+        String refreshToken = cookieUtil.getCookie(request, REFRESH_TOKEN_COOKIE_NAME)
+                .orElse(null);
+
+        if (refreshToken == null) {
+            log.error("Refresh Token not found in cookie");
+            return ResponseEntity.badRequest().build();
+        }
+
+        log.debug("Refresh Token found in cookie: {}...", refreshToken.substring(0, 20));
+
+        try {
+            // 2. 새로운 토큰 발급
+            TokenRefreshResponse tokenResponse = authService.refreshAccessToken(refreshToken);
+
+            log.info("New tokens created successfully");
+            log.debug("New Access Token: {}", tokenResponse.getAccessToken());
+            log.debug("New Refresh Token: {}", tokenResponse.getRefreshToken());
+
+            // 3. 새로운 Refresh Token을 쿠키에 저장
+            cookieUtil.addCookie(
+                    response,
+                    REFRESH_TOKEN_COOKIE_NAME,
+                    tokenResponse.getRefreshToken(),
+                    refreshTokenExpireSeconds
+            );
+
+            log.info("New Refresh Token saved to cookie");
+
+            return ResponseEntity.ok(tokenResponse);
+
+        } catch (IllegalArgumentException e) {
+            log.error("Token refresh failed: {}", e.getMessage());
+
+            // 실패 시 쿠키 삭제
+            cookieUtil.deleteCookie(response, REFRESH_TOKEN_COOKIE_NAME);
+            log.info("Invalid Refresh Token removed from cookie");
+
+            return ResponseEntity.status(401).build();
+        }
+    }
+
+    /**
+     * 테스트용 엔드포인트
+     * GET /api/auth/test
+     */
+    @Operation(
+            summary = "API 테스트",
+            description = "Auth API가 정상 작동하는지 확인하는 테스트 엔드포인트입니다."
+    )
+    @ApiResponse(
+            responseCode = "200",
+            description = "성공",
+            content = @Content(
+                    mediaType = "text/plain",
+                    examples = @ExampleObject(value = "Auth API is working!")
+            )
+    )
+    @GetMapping("/test")
+    public ResponseEntity<String> test() {
+        return ResponseEntity.ok("Auth API is working!");
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/utility/auth/dto/TokenRefreshRequest.java b/backend/src/main/java/com/mysite/knitly/utility/auth/dto/TokenRefreshRequest.java
new file mode 100644
index 0000000..6316cf4
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/auth/dto/TokenRefreshRequest.java
@@ -0,0 +1,13 @@
+package com.mysite.knitly.utility.auth.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+
+@Getter
+@NoArgsConstructor
+@AllArgsConstructor
+public class TokenRefreshRequest {
+
+    private String refreshToken;
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/auth/dto/TokenRefreshResponse.java b/backend/src/main/java/com/mysite/knitly/utility/auth/dto/TokenRefreshResponse.java
new file mode 100644
index 0000000..cb377d7
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/auth/dto/TokenRefreshResponse.java
@@ -0,0 +1,25 @@
+package com.mysite.knitly.utility.auth.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Getter;
+
+@Getter
+@Builder
+@AllArgsConstructor
+public class TokenRefreshResponse {
+
+    private String accessToken;
+    private String refreshToken;
+    private String tokenType;
+    private long expiresIn;
+
+    public static TokenRefreshResponse of(String accessToken, String refreshToken, long expiresIn) {
+        return TokenRefreshResponse.builder()
+                .accessToken(accessToken)
+                .refreshToken(refreshToken)
+                .tokenType("Bearer")
+                .expiresIn(expiresIn)
+                .build();
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/auth/service/AuthService.java b/backend/src/main/java/com/mysite/knitly/utility/auth/service/AuthService.java
new file mode 100644
index 0000000..0231b45
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/auth/service/AuthService.java
@@ -0,0 +1,83 @@
+package com.mysite.knitly.utility.auth.service;
+
+import com.mysite.knitly.domain.user.service.UserService;
+import com.mysite.knitly.utility.auth.dto.TokenRefreshResponse;
+import com.mysite.knitly.utility.jwt.JwtProperties;
+import com.mysite.knitly.utility.jwt.JwtProvider;
+import com.mysite.knitly.utility.redis.RefreshTokenService;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class AuthService {
+
+    private final JwtProvider jwtProvider;
+    private final RefreshTokenService refreshTokenService;
+    private final JwtProperties jwtProperties;
+    private final UserService userService;
+
+    /**
+     * Refresh Token으로 Access Token 갱신
+     */
+    public TokenRefreshResponse refreshAccessToken(String refreshToken) {
+        // 1. Refresh Token 유효성 검증
+        if (!jwtProvider.validateToken(refreshToken)) {
+            log.info("유효하지 않은 Refresh Token입니다.");
+            throw new IllegalArgumentException("유효하지 않은 Refresh Token입니다.");
+        }
+
+        // 2. Refresh Token에서 userId 추출
+        Long userId = jwtProvider.getUserIdFromToken(refreshToken);
+        log.info("Token refresh requested - userId: {}", userId);
+
+        // 3. Redis에 저장된 Refresh Token과 비교
+        if (!refreshTokenService.validateRefreshToken(userId, refreshToken)) {
+            throw new IllegalArgumentException("Refresh Token이 일치하지 않습니다.");
+        }
+
+        // 4. 새로운 Access Token 생성
+        String newAccessToken = jwtProvider.createAccessToken(userId);
+
+        // 5. 새로운 Refresh Token 생성 (RTR - Refresh Token Rotation)
+        String newRefreshToken = jwtProvider.createRefreshToken(userId);
+
+        // 6. 새로운 Refresh Token을 Redis에 저장 (기존 토큰 덮어쓰기)
+        refreshTokenService.saveRefreshToken(userId, newRefreshToken);
+
+        log.info("Token refreshed successfully - userId: {}", userId);
+
+        return TokenRefreshResponse.of(
+                newAccessToken,
+                newRefreshToken,
+                jwtProperties.getAccessTokenExpireSeconds()
+        );
+    }
+
+    /**
+     * 로그아웃
+     */
+    public void logout(Long userId) {
+        refreshTokenService.deleteRefreshToken(userId);
+        log.info("User logged out - userId: {}", userId);
+    }
+
+    /**
+     * 회원탈퇴
+     * 1. Refresh Token 삭제 (Redis)
+     * 2. User 삭제 (DB)
+     */
+    @Transactional
+    public void deleteAccount(Long userId) {
+        // 1. Redis에서 Refresh Token 삭제
+        refreshTokenService.deleteRefreshToken(userId);
+
+        // 2. DB에서 사용자 삭제
+        userService.deleteUser(userId);
+
+        log.info("Account deleted - userId: {}", userId);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/config/JsonAccessDeniedHandler.java b/backend/src/main/java/com/mysite/knitly/utility/config/JsonAccessDeniedHandler.java
new file mode 100644
index 0000000..1bce52b
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/config/JsonAccessDeniedHandler.java
@@ -0,0 +1,20 @@
+package com.mysite.knitly.utility.config;
+
+import jakarta.servlet.http.*;
+import org.springframework.security.access.AccessDeniedException;
+import org.springframework.security.web.access.AccessDeniedHandler;
+import org.springframework.stereotype.Component;
+import java.io.IOException;
+
+@Component
+public class JsonAccessDeniedHandler implements AccessDeniedHandler {
+    @Override
+    public void handle(HttpServletRequest req, HttpServletResponse res,
+                       AccessDeniedException ex) throws IOException {
+        res.setStatus(HttpServletResponse.SC_FORBIDDEN); // 403
+        res.setContentType("application/json;charset=UTF-8");
+        res.getWriter().write("""
+        {"error":{"code":"AUTH_FORBIDDEN","status":403,"message":"접근 권한이 없습니다."}}
+        """);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/config/JsonAuthEntryPoint.java b/backend/src/main/java/com/mysite/knitly/utility/config/JsonAuthEntryPoint.java
new file mode 100644
index 0000000..52e4f2d
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/config/JsonAuthEntryPoint.java
@@ -0,0 +1,20 @@
+package com.mysite.knitly.utility.config;
+
+import jakarta.servlet.http.*;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.web.AuthenticationEntryPoint;
+import org.springframework.stereotype.Component;
+import java.io.IOException;
+
+@Component
+public class JsonAuthEntryPoint implements AuthenticationEntryPoint {
+    @Override
+    public void commence(HttpServletRequest req, HttpServletResponse res,
+                         AuthenticationException ex) throws IOException {
+        res.setStatus(HttpServletResponse.SC_UNAUTHORIZED); // 401
+        res.setContentType("application/json;charset=UTF-8");
+        res.getWriter().write("""
+        {"error":{"code":"AUTH_UNAUTHORIZED","status":401,"message":"로그인이 필요합니다."}}
+        """);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/config/SecurityConfig.java b/backend/src/main/java/com/mysite/knitly/utility/config/SecurityConfig.java
new file mode 100644
index 0000000..2cdd9a2
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/config/SecurityConfig.java
@@ -0,0 +1,152 @@
+package com.mysite.knitly.utility.config;
+
+import com.mysite.knitly.utility.handler.OAuth2FailureHandler;
+import com.mysite.knitly.utility.handler.OAuth2SuccessHandler;
+import com.mysite.knitly.utility.jwt.JwtAuthenticationFilter;
+import com.mysite.knitly.utility.oauth.CustomOAuth2UserService;
+import lombok.RequiredArgsConstructor;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.http.HttpMethod;
+import org.springframework.security.config.annotation.web.builders.HttpSecurity;
+import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.config.http.SessionCreationPolicy;
+import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
+import org.springframework.web.cors.CorsConfiguration;
+import org.springframework.web.cors.CorsConfigurationSource;
+import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
+import com.mysite.knitly.utility.config.JsonAuthEntryPoint;        // 401 JSON
+import com.mysite.knitly.utility.config.JsonAccessDeniedHandler;   // 403 JSON
+
+import java.util.Arrays;
+
+@Configuration
+@EnableWebSecurity
+@org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity
+@RequiredArgsConstructor
+public class SecurityConfig {
+
+    private final CustomOAuth2UserService customOAuth2UserService;
+    private final OAuth2SuccessHandler oAuth2SuccessHandler;
+    private final OAuth2FailureHandler oAuth2FailureHandler;
+    private final JwtAuthenticationFilter jwtAuthenticationFilter;
+    // 401/403을 JSON으로 내려주기 위한 핸들러
+    private final JsonAuthEntryPoint jsonAuthEntryPoint;
+    private final JsonAccessDeniedHandler jsonAccessDeniedHandler;
+
+    /**
+     * CORS 설정
+     * 프론트엔드(localhost:3000)와 백엔드(localhost:8080) 간 통신 허용
+     */
+    @Bean
+    public CorsConfigurationSource corsConfigurationSource() {
+        CorsConfiguration configuration = new CorsConfiguration();
+
+        // 🔥 허용할 출처 (프론트엔드 URL)
+        configuration.setAllowedOrigins(Arrays.asList(
+                "http://localhost:3000",     // 개발 환경
+                "http://localhost:3001",     // 개발 환경 (추가 포트)
+                "https://www.myapp.com"      // 프로덕션 환경 (추후 변경)
+        ));
+
+        // 허용할 HTTP 메서드
+        configuration.setAllowedMethods(Arrays.asList(
+                "GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"
+        ));
+
+        // 허용할 헤더
+        configuration.setAllowedHeaders(Arrays.asList("*"));
+
+        // 🔥 쿠키 포함 허용 (매우 중요!)
+        configuration.setAllowCredentials(true);
+
+        // 노출할 헤더 (프론트엔드에서 접근 가능)
+        configuration.setExposedHeaders(Arrays.asList(
+                "Authorization",
+                "Set-Cookie"
+        ));
+
+        // Preflight 요청 캐시 시간 (1시간)
+        configuration.setMaxAge(3600L);
+
+        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
+        source.registerCorsConfiguration("/**", configuration);
+
+        return source;
+    }
+
+    @Bean
+    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
+        http
+                // CORS 설정 적용
+                .cors(cors -> cors.configurationSource(corsConfigurationSource()))
+
+                // CSRF 비활성화 (JWT 사용)
+                .csrf(csrf -> csrf.disable())
+
+                // 세션 사용 안함 (Stateless)
+                .sessionManagement(session ->
+                        session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)
+                )
+
+                // 401/403 을 JSON 응답으로 고정
+                .exceptionHandling(eh -> eh
+                        .authenticationEntryPoint(jsonAuthEntryPoint)      // 401
+                        .accessDeniedHandler(jsonAccessDeniedHandler)      // 403
+                )
+
+                // URL 별 권한 설정
+                .authorizeHttpRequests(auth -> auth
+                        // 커뮤니티 게시글 목록/상세 조회는 로그인 없이 허용
+                        .requestMatchers(HttpMethod.GET, "/community/posts/**").permitAll()
+                        .requestMatchers(HttpMethod.GET, "/community/comments/**").permitAll()
+                        // 댓글 조회(게시글 하위 경로) 공개: 목록 & count 모두 포함
+                        .requestMatchers(HttpMethod.GET, "/community/posts/*/comments").permitAll()
+                        .requestMatchers(HttpMethod.GET, "/community/posts/*/comments/**").permitAll()
+
+                        // 커뮤니티 "쓰기/수정/삭제"는 인증 필요
+                        .requestMatchers(HttpMethod.POST,   "/community/**").authenticated()
+                        .requestMatchers(HttpMethod.PUT,    "/community/**").authenticated()
+                        .requestMatchers(HttpMethod.PATCH,  "/community/**").authenticated()
+                        .requestMatchers(HttpMethod.DELETE, "/community/**").authenticated()
+
+                        // 마이페이지는 전부 인증 필요
+                        .requestMatchers("/mypage/**").authenticated()
+
+                        .requestMatchers(HttpMethod.GET, "/products", "/products/**", "/users/*/products").permitAll() // 상품 목록 API 공개
+                        .requestMatchers(HttpMethod.GET, "/home/**").permitAll() // 홈 화면 API 공개
+
+                        // 인증 불필요
+                        .requestMatchers("/", "/login/**", "/oauth2/**", "/auth/refresh", "/auth/test").permitAll()
+
+                        // JWT 인증 필요
+                        .requestMatchers("/users/**").authenticated()
+
+                        // Swagger 사용
+                        .requestMatchers("/swagger-ui/**", "/v3/api-docs/**", "/swagger-ui.html").permitAll()
+
+                        // 업로드한 리뷰 이미지 조회
+                        .requestMatchers("/review/**").permitAll()
+
+                        // 나머지 모두 인증 필요
+                        .anyRequest().authenticated()
+                )
+
+                // OAuth2 로그인 설정
+                .oauth2Login(oauth2 -> oauth2
+                        .userInfoEndpoint(userInfo ->
+                                userInfo.userService(customOAuth2UserService)
+                        )
+                        .successHandler(oAuth2SuccessHandler)
+                        .failureHandler(oAuth2FailureHandler)
+                )
+
+                // JWT 인증 필터 추가
+                .addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class);
+
+        return http.build();
+    }
+
+
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/utility/config/SwaggerConfig.java b/backend/src/main/java/com/mysite/knitly/utility/config/SwaggerConfig.java
new file mode 100644
index 0000000..7c21e52
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/config/SwaggerConfig.java
@@ -0,0 +1,35 @@
+package com.mysite.knitly.utility.config;
+
+import io.swagger.v3.oas.models.Components;
+import io.swagger.v3.oas.models.OpenAPI;
+import io.swagger.v3.oas.models.info.Info;
+import io.swagger.v3.oas.models.info.Contact;
+import io.swagger.v3.oas.models.security.SecurityRequirement;
+import io.swagger.v3.oas.models.security.SecurityScheme;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration
+public class SwaggerConfig {
+
+    @Bean
+    public OpenAPI openAPI() {
+        return new OpenAPI()
+                .info(new Info()
+                        .title("Knitly API Documentation")
+                        .description("Google OAuth 2.0 소셜 로그인 API")
+                        .version("v1.0.0")
+                        .contact(new Contact()
+                                .name("Team Knitly")
+                                .email("team@knitly.com")))
+                .addSecurityItem(new SecurityRequirement().addList("Bearer Authentication"))
+                .components(new Components()
+                        .addSecuritySchemes("Bearer Authentication",
+                                new SecurityScheme()
+                                        .type(SecurityScheme.Type.HTTP)
+                                        .scheme("bearer")
+                                        .bearerFormat("JWT")
+                                        .description("JWT 토큰을 입력하세요 (Bearer 제외)")
+                        ));
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/utility/cookie/CookieUtil.java b/backend/src/main/java/com/mysite/knitly/utility/cookie/CookieUtil.java
new file mode 100644
index 0000000..0dc1b62
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/cookie/CookieUtil.java
@@ -0,0 +1,100 @@
+package com.mysite.knitly.utility.cookie;
+
+import jakarta.servlet.http.Cookie;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Component;
+
+import java.util.Arrays;
+import java.util.Optional;
+
+/**
+ * HTTP Cookie 유틸리티 클래스
+ * - HTTP-only 쿠키 생성, 조회, 삭제 기능 제공
+ */
+@Slf4j
+@Component
+public class CookieUtil {
+
+    /**
+     * HTTP-only 쿠키 생성
+     *
+     * @param name 쿠키 이름
+     * @param value 쿠키 값
+     * @param maxAge 만료 시간 (초 단위)
+     * @return Cookie 객체
+     */
+    public Cookie createCookie(String name, String value, int maxAge) {
+        Cookie cookie = new Cookie(name, value);
+        cookie.setHttpOnly(true);  // JavaScript 접근 차단
+        cookie.setPath("/");       // 모든 경로에서 접근 가능
+        cookie.setMaxAge(maxAge);  // 만료 시간 설정
+
+        // HTTPS 환경에서만 전송 (개발 환경에서는 false)
+        // 프로덕션에서는 true로 변경 필요
+        cookie.setSecure(false);
+
+        // TODO : 지금은 알아만 둘 것 (지금 중요한 내용은 아님)
+        // 안전한 요청에만 쿠키 전송 (개발 환경 권장)
+        // None: 모든 크로스 도메인 요청에 쿠키 전송 (Secure=true 필수)
+        // 참고: Cookie 객체는 SameSite를 직접 지원하지 않으므로
+        // ResponseCookie를 사용하거나 Set-Cookie 헤더를 직접 작성해야 함
+        // 예시)
+
+        log.debug("Cookie created - name: {}, maxAge: {} seconds", name, maxAge);
+        return cookie;
+    }
+
+    /**
+     * HTTP-only 쿠키를 응답에 추가
+     *
+     * @param response HttpServletResponse
+     * @param name 쿠키 이름
+     * @param value 쿠키 값
+     * @param maxAge 만료 시간 (초 단위)
+     */
+    public void addCookie(HttpServletResponse response, String name, String value, int maxAge) {
+        Cookie cookie = createCookie(name, value, maxAge);
+        response.addCookie(cookie);
+        log.info("Cookie added to response - name: {}", name);
+    }
+
+    /**
+     * 요청에서 특정 쿠키 값 조회
+     *
+     * @param request HttpServletRequest
+     * @param name 쿠키 이름
+     * @return Optional<String> 쿠키 값 (없으면 empty)
+     */
+    public Optional<String> getCookie(HttpServletRequest request, String name) {
+        Cookie[] cookies = request.getCookies();
+
+        if (cookies == null) {
+            log.debug("No cookies found in request");
+            return Optional.empty();
+        }
+
+        return Arrays.stream(cookies)
+                .filter(cookie -> name.equals(cookie.getName()))
+                .map(Cookie::getValue)
+                .findFirst();
+    }
+
+    /**
+     * 쿠키 삭제 (MaxAge를 0으로 설정)
+     *
+     * @param response HttpServletResponse
+     * @param name 삭제할 쿠키 이름
+     */
+    public void deleteCookie(HttpServletResponse response, String name) {
+        Cookie cookie = new Cookie(name, null);
+        cookie.setHttpOnly(true);
+        cookie.setPath("/");
+        cookie.setMaxAge(0);  // 즉시 만료
+        cookie.setSecure(false);
+
+        response.addCookie(cookie);
+        log.info("Cookie deleted - name: {}", name);
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/utility/handler/OAuth2FailureHandler.java b/backend/src/main/java/com/mysite/knitly/utility/handler/OAuth2FailureHandler.java
new file mode 100644
index 0000000..438e5d2
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/handler/OAuth2FailureHandler.java
@@ -0,0 +1,63 @@
+package com.mysite.knitly.utility.handler;
+
+import jakarta.servlet.ServletException;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.oauth2.core.OAuth2AuthenticationException;
+import org.springframework.security.oauth2.core.OAuth2Error;
+import org.springframework.security.web.authentication.SimpleUrlAuthenticationFailureHandler;
+import org.springframework.stereotype.Component;
+
+import java.io.IOException;
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
+
+@Slf4j
+@Component
+public class OAuth2FailureHandler extends SimpleUrlAuthenticationFailureHandler {
+
+    @Value("${frontend.url}")
+    private String frontendUrl;
+
+    @Override
+    public void onAuthenticationFailure(HttpServletRequest request,
+                                        HttpServletResponse response,
+                                        AuthenticationException exception) throws IOException, ServletException {
+
+        log.error("=== OAuth2 Login Failed ===");
+        log.error("Exception Type: {}", exception.getClass().getName());
+        log.error("Error Message: {}", exception.getMessage());
+
+        String errorMessage = "로그인에 실패했습니다.";
+
+        // OAuth2 관련 에러인 경우 상세 정보 출력
+        if (exception instanceof OAuth2AuthenticationException) {
+            OAuth2AuthenticationException oauth2Exception = (OAuth2AuthenticationException) exception;
+            OAuth2Error error = oauth2Exception.getError();
+
+            log.error("OAuth2 Error Code: {}", error.getErrorCode());
+            log.error("OAuth2 Error Description: {}", error.getDescription());
+
+            errorMessage = error.getDescription() != null ? error.getDescription() : errorMessage;
+        }
+
+        // 스택 트레이스 출력 (개발 환경용)
+        log.error("Stack Trace: ", exception);
+
+        // TODO : 프론트페이지로 리다이랙트할것(수정해야함)
+        // 에러 페이지로 리다이렉트
+        String encodedMessage = URLEncoder.encode(errorMessage, StandardCharsets.UTF_8);
+        //String targetUrl = "http://localhost:8080/login/error?message=" + encodedMessage;
+
+        // 프론트엔드로 리다이렉트 (에러 파라미터 포함)
+        //String targetUrl = String.format("%s/?error=%s", frontendUrl, encodedMessage);
+
+        // 프론트 메인으로 리디랙션
+        String targetUrl = frontendUrl + "/?loginError=true";
+
+        getRedirectStrategy().sendRedirect(request, response, targetUrl);
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/handler/OAuth2SuccessHandler.java b/backend/src/main/java/com/mysite/knitly/utility/handler/OAuth2SuccessHandler.java
new file mode 100644
index 0000000..ff1590d
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/handler/OAuth2SuccessHandler.java
@@ -0,0 +1,120 @@
+package com.mysite.knitly.utility.handler;
+
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.service.UserService;
+import com.mysite.knitly.utility.cookie.CookieUtil;
+import com.mysite.knitly.utility.jwt.JwtProvider;
+import com.mysite.knitly.utility.jwt.TokenResponse;
+import com.mysite.knitly.utility.oauth.OAuth2UserInfo;
+import com.mysite.knitly.utility.redis.RefreshTokenService;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.oauth2.core.user.OAuth2User;
+import org.springframework.security.web.authentication.SimpleUrlAuthenticationSuccessHandler;
+import org.springframework.stereotype.Component;
+
+import java.io.IOException;
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
+import java.util.Map;
+
+@Slf4j
+@Component
+@RequiredArgsConstructor
+public class OAuth2SuccessHandler extends SimpleUrlAuthenticationSuccessHandler {
+
+    private final UserService userService;
+    private final JwtProvider jwtProvider;
+    private final RefreshTokenService refreshTokenService;
+    private final CookieUtil cookieUtil;
+
+    // TODO : yml 파일, env 파일 수정할것
+    // 프론트엔드 URL 설정 (환경변수로 관리 권장)
+    @Value("${frontend.url}")  // 기본값: localhost:3000
+    private String frontendUrl;
+
+    @Value("${custom.jwt.refreshTokenExpireSeconds}")
+    private int refreshTokenExpireSeconds;
+
+    // Refresh Token 쿠키 이름 상수
+    private static final String REFRESH_TOKEN_COOKIE_NAME = "refreshToken";
+
+    @Override
+    public void onAuthenticationSuccess(HttpServletRequest request,
+                                        HttpServletResponse response,
+                                        Authentication authentication) throws IOException, ServletException {
+
+        // 1. OAuth2User 정보 가져오기
+        OAuth2User oAuth2User = (OAuth2User) authentication.getPrincipal();
+        Map<String, Object> attributes = oAuth2User.getAttributes();
+
+        // 2. 사용자 정보 추출
+        OAuth2UserInfo userInfo = OAuth2UserInfo.of("google", attributes);
+
+        log.info("=== OAuth2 Login Success ===");
+        log.info("Email: {}", userInfo.getEmail());
+        log.info("Name: {}", userInfo.getName());
+        log.info("Provider ID: {}", userInfo.getProviderId());
+
+        // 3. 사용자 저장 또는 조회
+        User user = userService.processGoogleUser(
+                userInfo.getProviderId(),
+                userInfo.getEmail(),
+                userInfo.getName()
+        );
+
+        log.info("User processed - userId: {}", user.getUserId());
+
+        // 스토어 중복 생성 방지
+        userService.ensureUserStore(user);
+
+        // 4. JWT 토큰 발급
+        TokenResponse tokens = jwtProvider.createTokens(user.getUserId());
+
+        log.info("=== JWT Tokens Created ===");
+        log.info("Access Token: {}", tokens.getAccessToken());
+        log.info("Refresh Token: {}", tokens.getRefreshToken());
+        log.info("Expires In: {} seconds", tokens.getExpiresIn());
+
+        // 5. Refresh Token을 Redis에 저장
+        refreshTokenService.saveRefreshToken(user.getUserId(), tokens.getRefreshToken());
+        log.info("Refresh Token saved to Redis");
+
+        // 6. Refresh Token을 HTTP-only 쿠키에 저장
+        cookieUtil.addCookie(
+                response,
+                REFRESH_TOKEN_COOKIE_NAME,
+                tokens.getRefreshToken(),
+                refreshTokenExpireSeconds
+        );
+        log.info("Refresh Token saved to HTTP-only cookie");
+
+//        // 7. 임시 리다이렉트 (테스트용) - Access Token만 URL로 전달
+//        String targetUrl = String.format(
+//                "http://localhost:8080/login/success?userId=%s&email=%s&name=%s&accessToken=%s",
+//                user.getUserId(),
+//                URLEncoder.encode(user.getEmail(), StandardCharsets.UTF_8),
+//                URLEncoder.encode(user.getName(), StandardCharsets.UTF_8),
+//                tokens.getAccessToken()
+//        );
+
+        // 7. 프론트엔드로 리다이렉트 (Access Token 포함)
+        // 변경: localhost:8080 → frontend.url (localhost:3000)
+        String targetUrl = String.format(
+                "%s?userId=%s&email=%s&name=%s&accessToken=%s",
+                frontendUrl,
+                user.getUserId(),
+                URLEncoder.encode(user.getEmail(), StandardCharsets.UTF_8),
+                URLEncoder.encode(user.getName(), StandardCharsets.UTF_8),
+                tokens.getAccessToken()
+        );
+
+        log.info("Redirecting to: {}", targetUrl);
+        getRedirectStrategy().sendRedirect(request, response, targetUrl);
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/utility/jwt/JwtAuthenticationFilter.java b/backend/src/main/java/com/mysite/knitly/utility/jwt/JwtAuthenticationFilter.java
new file mode 100644
index 0000000..8f906c9
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/jwt/JwtAuthenticationFilter.java
@@ -0,0 +1,90 @@
+package com.mysite.knitly.utility.jwt;
+
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.service.UserService;
+import jakarta.servlet.FilterChain;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.web.authentication.WebAuthenticationDetailsSource;
+import org.springframework.stereotype.Component;
+import org.springframework.util.StringUtils;
+import org.springframework.web.filter.OncePerRequestFilter;
+
+import java.io.IOException;
+import java.util.Collections;
+
+@Slf4j
+@Component
+@RequiredArgsConstructor
+public class JwtAuthenticationFilter extends OncePerRequestFilter {
+
+    private final JwtProvider jwtProvider;
+    private final UserService userService;
+
+    @Override
+    protected void doFilterInternal(HttpServletRequest request,
+                                    HttpServletResponse response,
+                                    FilterChain filterChain) throws ServletException, IOException {
+
+        try {
+            // 1. 요청 헤더에서 JWT 토큰 추출
+            String token = extractTokenFromRequest(request);
+
+            log.info("===> JWT Filter: token = {}", token != null ? "EXISTS" : "NULL");
+
+            if (token != null && jwtProvider.validateToken(token)) {
+                log.info("===> JWT Valid!");
+                // 2. 토큰에서 userId 추출
+                Long userId = jwtProvider.getUserIdFromToken(token);
+
+                // 3. userId로 사용자 조회
+                User user = userService.findById(userId);
+
+                // 4. Spring Security 인증 객체 생성
+                UsernamePasswordAuthenticationToken authentication =
+                        new UsernamePasswordAuthenticationToken(
+                                user,                    // principal
+                                null,                    // credentials
+                                Collections.emptyList()  // authorities
+                        );
+
+                authentication.setDetails(
+                        new WebAuthenticationDetailsSource().buildDetails(request)
+                );
+
+                // 5. SecurityContext에 인증 정보 저장
+                SecurityContextHolder.getContext().setAuthentication(authentication);
+
+                log.debug("JWT authenticated - userId: {}", userId);
+            } else {
+                log.warn("===> JWT Invalid or null!");
+            }
+
+        } catch (Exception e) {
+            log.error("JWT authentication failed: {}", e.getMessage());
+            // 인증 실패해도 다음 필터로 진행 (Spring Security가 처리)
+        }
+
+        // 다음 필터로 진행
+        filterChain.doFilter(request, response);
+    }
+
+    /**
+     * 요청 헤더에서 Bearer 토큰 추출
+     * Authorization: Bearer {token}
+     */
+    private String extractTokenFromRequest(HttpServletRequest request) {
+        String bearerToken = request.getHeader("Authorization");
+
+        if (StringUtils.hasText(bearerToken) && bearerToken.startsWith("Bearer ")) {
+            return bearerToken.substring(7); // "Bearer " 제거
+        }
+
+        return null;
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/jwt/JwtProperties.java b/backend/src/main/java/com/mysite/knitly/utility/jwt/JwtProperties.java
new file mode 100644
index 0000000..7112a5c
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/jwt/JwtProperties.java
@@ -0,0 +1,17 @@
+package com.mysite.knitly.utility.jwt;
+
+import lombok.Getter;
+import lombok.Setter;
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.stereotype.Component;
+
+@Getter
+@Setter
+@Component
+@ConfigurationProperties(prefix = "custom.jwt")
+public class JwtProperties {
+
+    private String secretKey;
+    private long accessTokenExpireSeconds;
+    private long refreshTokenExpireSeconds;
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/jwt/JwtProvider.java b/backend/src/main/java/com/mysite/knitly/utility/jwt/JwtProvider.java
new file mode 100644
index 0000000..cff7aa3
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/jwt/JwtProvider.java
@@ -0,0 +1,107 @@
+package com.mysite.knitly.utility.jwt;
+
+import io.jsonwebtoken.*;
+import io.jsonwebtoken.security.Keys;
+import io.jsonwebtoken.security.SignatureException;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Component;
+
+import javax.crypto.SecretKey;
+import java.nio.charset.StandardCharsets;
+import java.util.Date;
+
+@Slf4j
+@Component
+@RequiredArgsConstructor
+public class JwtProvider {
+
+    private final JwtProperties jwtProperties;
+
+    /**
+     * SecretKey 생성
+     */
+    private SecretKey getSigningKey() {
+        byte[] keyBytes = jwtProperties.getSecretKey().getBytes(StandardCharsets.UTF_8);
+        return Keys.hmacShaKeyFor(keyBytes);
+    }
+
+    /**
+     * Access Token 생성
+     */
+    public String createAccessToken(Long userId) {
+        Date now = new Date();
+        Date expiryDate = new Date(now.getTime() + jwtProperties.getAccessTokenExpireSeconds() * 1000);
+
+        return Jwts.builder()
+                .subject(userId.toString())
+                .issuedAt(now)
+                .expiration(expiryDate)
+                .signWith(getSigningKey())
+                .compact();
+    }
+
+    /**
+     * Refresh Token 생성
+     */
+    public String createRefreshToken(Long userId) {
+        Date now = new Date();
+        Date expiryDate = new Date(now.getTime() + jwtProperties.getRefreshTokenExpireSeconds() * 1000);
+
+        return Jwts.builder()
+                .subject(userId.toString())
+                .issuedAt(now)
+                .expiration(expiryDate)
+                .signWith(getSigningKey())
+                .compact();
+    }
+
+    /**
+     * 토큰에서 userId 추출
+     */
+    public Long getUserIdFromToken(String token) {
+        Claims claims = Jwts.parser()
+                .verifyWith(getSigningKey())
+                .build()
+                .parseSignedClaims(token)
+                .getPayload();
+
+        return Long.parseLong(claims.getSubject());
+    }
+
+    /**
+     * 토큰 유효성 검증
+     */
+    public boolean validateToken(String token) {
+        try {
+            Jwts.parser()
+                    .verifyWith(getSigningKey())
+                    .build()
+                    .parseSignedClaims(token);
+            return true;
+        } catch (SignatureException | MalformedJwtException e) {
+            log.error("잘못된 JWT 서명입니다.");
+        } catch (ExpiredJwtException e) {
+            log.error("만료된 JWT 토큰입니다.");
+        } catch (UnsupportedJwtException e) {
+            log.error("지원되지 않는 JWT 토큰입니다.");
+        } catch (IllegalArgumentException e) {
+            log.error("JWT 토큰이 잘못되었습니다.");
+        }
+        return false;
+    }
+
+    /**
+     * Access Token과 Refresh Token을 함께 생성
+     */
+    public TokenResponse createTokens(Long userId) {
+        String accessToken = createAccessToken(userId);
+        String refreshToken = createRefreshToken(userId);
+
+        return TokenResponse.of(
+                accessToken,
+                refreshToken,
+                jwtProperties.getAccessTokenExpireSeconds()
+        );
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/mysite/knitly/utility/jwt/TokenResponse.java b/backend/src/main/java/com/mysite/knitly/utility/jwt/TokenResponse.java
new file mode 100644
index 0000000..a7868ae
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/jwt/TokenResponse.java
@@ -0,0 +1,25 @@
+package com.mysite.knitly.utility.jwt;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Getter;
+
+@Getter
+@Builder
+@AllArgsConstructor
+public class TokenResponse {
+
+    private String accessToken;
+    private String refreshToken;
+    private String tokenType;
+    private long expiresIn; // Access Token 만료 시간 (초)
+
+    public static TokenResponse of(String accessToken, String refreshToken, long expiresIn) {
+        return TokenResponse.builder()
+                .accessToken(accessToken)
+                .refreshToken(refreshToken)
+                .tokenType("Bearer")
+                .expiresIn(expiresIn)
+                .build();
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/oauth/CustomOAuth2UserService.java b/backend/src/main/java/com/mysite/knitly/utility/oauth/CustomOAuth2UserService.java
new file mode 100644
index 0000000..6c9d1cc
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/oauth/CustomOAuth2UserService.java
@@ -0,0 +1,38 @@
+package com.mysite.knitly.utility.oauth;
+
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.security.oauth2.client.userinfo.OAuth2UserRequest;
+import org.springframework.security.oauth2.core.OAuth2AuthenticationException;
+import org.springframework.security.oauth2.core.user.OAuth2User;
+import org.springframework.stereotype.Service;
+import org.springframework.security.oauth2.client.userinfo.DefaultOAuth2UserService;
+
+
+import java.util.Map;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class CustomOAuth2UserService extends DefaultOAuth2UserService {
+    @Override
+    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
+        // 1. Google로부터 사용자 정보 받아오기
+        OAuth2User oAuth2User = super.loadUser(userRequest);
+
+        // 2. 어떤 OAuth 제공자인지 확인 (google)
+        String registrationId = userRequest.getClientRegistration().getRegistrationId();
+
+        // 3. 사용자 정보 추출
+        Map<String, Object> attributes = oAuth2User.getAttributes();
+        OAuth2UserInfo userInfo = OAuth2UserInfo.of(registrationId, attributes);
+
+        // 로그로 확인
+        log.info("OAuth2 Login - Provider: {}", registrationId);
+        log.info("OAuth2 Login - Email: {}", userInfo.getEmail());
+        log.info("OAuth2 Login - Name: {}", userInfo.getName());
+
+        // 4. OAuth2User 반환 (다음 단계 SuccessHandler로 전달됨)
+        return oAuth2User;
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/oauth/OAuth2UserInfo.java b/backend/src/main/java/com/mysite/knitly/utility/oauth/OAuth2UserInfo.java
new file mode 100644
index 0000000..d8311fb
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/oauth/OAuth2UserInfo.java
@@ -0,0 +1,44 @@
+package com.mysite.knitly.utility.oauth;
+
+import lombok.Builder;
+import lombok.Getter;
+
+import java.util.Map;
+
+@Getter
+@Builder
+public class OAuth2UserInfo {
+    private String email;
+    private String name;
+    private String providerId;  // Google의 고유 ID
+
+    /**
+     * Google OAuth2 응답에서 사용자 정보 추출
+     */
+    public static OAuth2UserInfo of(String registrationId, Map<String, Object> attributes) {
+        // Google OAuth2 응답 처리
+        if ("google".equals(registrationId)) {
+            return ofGoogle(attributes);
+        }
+
+        throw new IllegalArgumentException("Unsupported provider: " + registrationId);
+    }
+
+    /**
+     * Google 응답 파싱
+     * Google 응답 예시:
+     * {
+     *   "sub": "1234567890",
+     *   "name": "홍길동",
+     *   "email": "user@gmail.com",
+     *   "picture": "https://..."
+     * }
+     */
+    private static OAuth2UserInfo ofGoogle(Map<String, Object> attributes) {
+        return OAuth2UserInfo.builder()
+                .providerId((String) attributes.get("sub"))
+                .email((String) attributes.get("email"))
+                .name((String) attributes.get("name"))
+                .build();
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/redis/RedisConfig.java b/backend/src/main/java/com/mysite/knitly/utility/redis/RedisConfig.java
new file mode 100644
index 0000000..a23c24d
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/redis/RedisConfig.java
@@ -0,0 +1,25 @@
+package com.mysite.knitly.utility.redis;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.data.redis.connection.RedisConnectionFactory;
+import org.springframework.data.redis.core.RedisTemplate;
+import org.springframework.data.redis.serializer.StringRedisSerializer;
+
+@Configuration
+public class RedisConfig {
+
+    @Bean
+    public RedisTemplate<String, String> redisTemplate(RedisConnectionFactory connectionFactory) {
+        RedisTemplate<String, String> template = new RedisTemplate<>();
+        template.setConnectionFactory(connectionFactory);
+
+        // Key와 Value 모두 String으로 직렬화
+        template.setKeySerializer(new StringRedisSerializer());
+        template.setValueSerializer(new StringRedisSerializer());
+        template.setHashKeySerializer(new StringRedisSerializer());
+        template.setHashValueSerializer(new StringRedisSerializer());
+
+        return template;
+    }
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/redis/RefreshTokenService.java b/backend/src/main/java/com/mysite/knitly/utility/redis/RefreshTokenService.java
new file mode 100644
index 0000000..c8aa53d
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/redis/RefreshTokenService.java
@@ -0,0 +1,91 @@
+package com.mysite.knitly.utility.redis;
+
+import com.mysite.knitly.utility.jwt.JwtProperties;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.data.redis.core.RedisTemplate;
+import org.springframework.stereotype.Service;
+
+import java.util.concurrent.TimeUnit;
+
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class RefreshTokenService {
+
+    private final RedisTemplate<String, String> redisTemplate;
+    private final JwtProperties jwtProperties;
+
+    private static final String REFRESH_TOKEN_PREFIX = "RT:";
+
+    /**
+     * Refresh Token을 Redis에 저장
+     * Key: RT:{userId}
+     * Value: refreshToken
+     * TTL: 7일
+     */
+    public void saveRefreshToken(Long userId, String refreshToken) {
+        String key = REFRESH_TOKEN_PREFIX + userId.toString();
+
+        redisTemplate.opsForValue().set(
+                key,
+                refreshToken,
+                jwtProperties.getRefreshTokenExpireSeconds(),
+                TimeUnit.SECONDS
+        );
+
+        log.info("==> Refresh Token saved to Redis - userId: {}", userId);
+        log.info("==> Refresh Token saved to Redis - refreshToken: {}", refreshToken);
+    }
+
+    /**
+     * Redis에서 Refresh Token 조회
+     */
+    public String getRefreshToken(Long userId) {
+        String key = REFRESH_TOKEN_PREFIX + userId.toString();
+        String refreshToken = redisTemplate.opsForValue().get(key);
+
+        if (refreshToken == null) {
+            log.warn("Refresh Token not found in Redis - userId: {}", userId);
+        }
+
+        return refreshToken;
+    }
+
+    /**
+     * Refresh Token 검증
+     * - Redis에 저장된 토큰과 일치하는지 확인
+     */
+    public boolean validateRefreshToken(Long userId, String refreshToken) {
+        String storedToken = getRefreshToken(userId);
+
+        if (storedToken == null) {
+            log.warn("No stored refresh token for userId: {}", userId);
+            return false;
+        }
+
+        boolean isValid = storedToken.equals(refreshToken);
+
+        if (!isValid) {
+            log.warn("Refresh token mismatch for userId: {}", userId);
+        }
+
+        return isValid;
+    }
+
+    /**
+     * Refresh Token 삭제 (로그아웃 시 사용)
+     */
+    public void deleteRefreshToken(Long userId) {
+        String key = REFRESH_TOKEN_PREFIX + userId.toString();
+        Boolean deleted = redisTemplate.delete(key);
+
+        if (Boolean.TRUE.equals(deleted)) {
+            log.info("Refresh Token deleted from Redis - userId: {}", userId);
+        } else {
+            log.warn("Refresh Token not found for deletion - userId: {}", userId);
+        }
+    }
+
+
+}
diff --git a/backend/src/main/java/com/mysite/knitly/utility/test/controller/TestController.java b/backend/src/main/java/com/mysite/knitly/utility/test/controller/TestController.java
new file mode 100644
index 0000000..25cbae4
--- /dev/null
+++ b/backend/src/main/java/com/mysite/knitly/utility/test/controller/TestController.java
@@ -0,0 +1,231 @@
+package com.mysite.knitly.utility.test.controller;
+
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.net.URLDecoder;
+import java.nio.charset.StandardCharsets;
+
+@RestController
+public class TestController {
+
+    @GetMapping("/")
+    public String home() {
+        return """
+                <h1>Google OAuth2 Test</h1>
+                <a href="/oauth2/authorization/google">Google 로그인</a>
+                """;
+    }
+
+    @GetMapping("/login/success")
+    public String loginSuccess(@RequestParam String userId,
+                               @RequestParam String email,
+                               @RequestParam String name,
+                               @RequestParam String accessToken) {
+        String decodedEmail = URLDecoder.decode(email, StandardCharsets.UTF_8);
+        String decodedName = URLDecoder.decode(name, StandardCharsets.UTF_8);
+
+        return String.format("""
+                <html>
+                <head>
+                    <meta charset="UTF-8">
+                    <style>
+                        body { 
+                            font-family: Arial; 
+                            padding: 20px;
+                            max-width: 800px;
+                            margin: 0 auto;
+                        }
+                        .token { 
+                            background: #f5f5f5; 
+                            padding: 10px; 
+                            border-radius: 5px;
+                            word-break: break-all;
+                            margin: 10px 0;
+                            font-size: 12px;
+                        }
+                        .info {
+                            background: #e3f2fd;
+                            padding: 15px;
+                            border-radius: 5px;
+                            margin: 20px 0;
+                        }
+                        .btn {
+                            background: #007bff;
+                            color: white;
+                            border: none;
+                            padding: 10px 20px;
+                            border-radius: 5px;
+                            cursor: pointer;
+                            margin: 5px;
+                        }
+                        .btn:hover {
+                            background: #0056b3;
+                        }
+                        .success {
+                            background: #d4edda;
+                            border: 1px solid #c3e6cb;
+                            color: #155724;
+                            padding: 10px;
+                            border-radius: 5px;
+                            margin: 10px 0;
+                        }
+                        .error {
+                            background: #f8d7da;
+                            border: 1px solid #f5c6cb;
+                            color: #721c24;
+                            padding: 10px;
+                            border-radius: 5px;
+                            margin: 10px 0;
+                        }
+                    </style>
+                </head>
+                <body>
+                    <h1>🎉 로그인 성공!</h1>
+                    <p><strong>User ID:</strong> %s</p>
+                    <p><strong>이메일:</strong> %s</p>
+                    <p><strong>이름:</strong> %s</p>
+                    
+                    <div class="info">
+                        <h3>💡 Access Token (메모리 저장됨)</h3>
+                        <p>이 토큰은 JavaScript 변수에 저장되어 있습니다.</p>
+                        <p>개발자도구 Console에서 <code>window.accessToken</code>으로 확인할 수 있습니다.</p>
+                    </div>
+                    
+                    <h2>🔑 Access Token</h2>
+                    <div class="token" id="tokenDisplay">%s</div>
+                    
+                    <div>
+                        <button class="btn" onclick="copyToken()">📋 토큰 복사</button>
+                        <button class="btn" onclick="testGetUserInfo()">👤 내 정보 조회 (AT 사용)</button>
+                        <button class="btn" onclick="testRefreshToken()">🔄 토큰 갱신 (RT 쿠키 사용)</button>
+                        <button class="btn" onclick="checkTokenInConsole()">🔍 Console에서 AT 확인</button>
+                    </div>
+                    
+                    <div id="result"></div>
+                    
+                    <h3>🍪 Refresh Token (쿠키 저장됨)</h3>
+                    <p>개발자도구 > Application > Cookies에서 <code>refreshToken</code> 확인 가능</p>
+                    
+                    <hr>
+                    <a href="/">홈으로 돌아가기</a>
+                    
+                    <script>
+                        // Access Token을 전역 변수(메모리)에 저장
+                        window.accessToken = "%s";
+                        
+                        console.log("✅ Access Token이 메모리에 저장되었습니다!");
+                        console.log("👉 window.accessToken으로 확인하세요");
+                        
+                        function copyToken() {
+                            navigator.clipboard.writeText(window.accessToken);
+                            showResult('✅ 토큰이 클립보드에 복사되었습니다!', 'success');
+                        }
+                        
+                        function checkTokenInConsole() {
+                            console.log("=== Access Token (메모리) ===");
+                            console.log(window.accessToken);
+                            showResult('✅ Console을 확인하세요! (F12)', 'success');
+                        }
+                        
+                        async function testGetUserInfo() {
+                            try {
+                                const response = await fetch('http://localhost:8080/users/me', {
+                                    method: 'GET',
+                                    headers: {
+                                        'Authorization': 'Bearer ' + window.accessToken
+                                    }
+                                });
+                                
+                                if (response.ok) {
+                                    const data = await response.json();
+                                    showResult('✅ 내 정보 조회 성공!<br>' + JSON.stringify(data, null, 2), 'success');
+                                    console.log("User Info:", data);
+                                } else {
+                                    showResult('❌ 조회 실패: ' + response.status, 'error');
+                                }
+                            } catch (error) {
+                                showResult('❌ 에러: ' + error.message, 'error');
+                            }
+                        }
+                        
+                        async function testRefreshToken() {
+                            try {
+                                const response = await fetch('http://localhost:8080/auth/refresh', {
+                                    method: 'POST',
+                                    credentials: 'include'  // 쿠키 포함
+                                });
+                                
+                                if (response.ok) {
+                                    const data = await response.json();
+                                    // 새로운 Access Token으로 업데이트
+                                    window.accessToken = data.accessToken;
+                                    document.getElementById('tokenDisplay').textContent = data.accessToken;
+                                    
+                                    showResult('✅ 토큰 갱신 성공!<br>새로운 AT가 메모리에 저장되었습니다.', 'success');
+                                    console.log("New Access Token:", data.accessToken);
+                                } else {
+                                    showResult('❌ 갱신 실패: ' + response.status, 'error');
+                                }
+                            } catch (error) {
+                                showResult('❌ 에러: ' + error.message, 'error');
+                            }
+                        }
+                        
+                        function showResult(message, type) {
+                            const resultDiv = document.getElementById('result');
+                            resultDiv.innerHTML = '<div class="' + type + '">' + message + '</div>';
+                        }
+                    </script>
+                </body>
+                </html>
+                """, userId, decodedEmail, decodedName, accessToken, accessToken);
+    }
+
+    @GetMapping("/login/error")
+    public String loginError(@RequestParam(required = false) String message) {
+        String errorMessage = message != null ?
+                URLDecoder.decode(message, StandardCharsets.UTF_8) :
+                "알 수 없는 오류가 발생했습니다.";
+
+        return String.format("""
+                <html>
+                <head>
+                    <meta charset="UTF-8">
+                    <style>
+                        body { 
+                            font-family: Arial; 
+                            padding: 20px; 
+                            text-align: center;
+                        }
+                        .error-box {
+                            background: #fee;
+                            border: 1px solid #fcc;
+                            padding: 20px;
+                            border-radius: 5px;
+                            margin: 20px auto;
+                            max-width: 600px;
+                        }
+                        .btn {
+                            display: inline-block;
+                            margin-top: 20px;
+                            padding: 10px 20px;
+                            background: #007bff;
+                            color: white;
+                            text-decoration: none;
+                            border-radius: 5px;
+                        }
+                    </style>
+                </head>
+                <body>
+                    <h1>❌ 로그인 실패</h1>
+                    <div class="error-box">
+                        <p><strong>오류:</strong> %s</p>
+                    </div>
+                    <a href="/" class="btn">다시 시도하기</a>
+                </body>
+                </html>
+                """, errorMessage);
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/resources/application-dev.yml b/backend/src/main/resources/application-dev.yml
new file mode 100644
index 0000000..e3099dc
--- /dev/null
+++ b/backend/src/main/resources/application-dev.yml
@@ -0,0 +1,14 @@
+spring:
+  datasource:
+    driver-class-name: com.mysql.cj.jdbc.Driver
+    url: ${DB_URL}
+    username: ${DB_USER}
+    password: ${DB_PW}
+
+  jpa:
+    hibernate:
+      ddl-auto: update
+    properties:
+      hibernate:
+        dialect: org.hibernate.dialect.MySQL8Dialect
+    show-sql: true
diff --git a/backend/src/main/resources/application-test.yml b/backend/src/main/resources/application-test.yml
new file mode 100644
index 0000000..41937cd
--- /dev/null
+++ b/backend/src/main/resources/application-test.yml
@@ -0,0 +1,52 @@
+spring:
+  datasource:
+    url: jdbc:h2:mem:knitly;MODE=MySQL;DATABASE_TO_LOWER=TRUE;CASE_INSENSITIVE_IDENTIFIERS=TRUE
+    driver-class-name: org.h2.Driver
+    username: sa
+    password:
+  jpa:
+    hibernate:
+      ddl-auto: update
+    show-sql: true
+    properties:
+      hibernate:
+        format_sql: true
+        dialect: org.hibernate.dialect.H2Dialect
+  sql:
+    init:
+      mode: never
+
+logging:
+  level:
+    org.hibernate.SQL: debug
+    org.hibernate.orm.jdbc.bind: trace
+
+#spring:
+#  datasource:
+#    url: jdbc:h2:mem:knitly;MODE=MySQL;DATABASE_TO_LOWER=TRUE;CASE_INSENSITIVE_IDENTIFIERS=TRUE
+#    driver-class-name: org.h2.Driver
+#    username: sa
+#    password:
+#  jpa:
+#    hibernate:
+#      ddl-auto: create
+#    #show-sql: true
+#    show-sql: false
+#    properties:
+#      hibernate:
+#        format_sql: true
+#        dialect: org.hibernate.dialect.H2Dialect
+#  sql:
+#    init:
+#      mode: never
+#
+#logging:
+#  level:
+#    root: INFO
+#    com.mysite.knitly: DEBUG
+#    org.hibernate.SQL: INFO
+#    org.springframework.transaction.interceptor: INFO
+##    org.hibernate.orm.jdbc.bind: trace
+#
+#frontend:
+#  url: http://localhost:3000
\ No newline at end of file
diff --git a/backend/src/main/resources/application.yml b/backend/src/main/resources/application.yml
new file mode 100644
index 0000000..b207494
--- /dev/null
+++ b/backend/src/main/resources/application.yml
@@ -0,0 +1,133 @@
+spring:
+  config:
+    import: optional:file:.env.properties
+  profiles:
+    active: dev
+  output:
+    ansi:
+      enabled: always
+
+  # --- Datasource / JPA ---
+  datasource:
+    hikari:
+      auto-commit: false
+
+  jpa:
+    hibernate:
+      ddl-auto: update
+    properties:
+      hibernate:
+        format_sql: true
+        highlight_sql: true
+        use_sql_comments: true
+        dialect: org.hibernate.dialect.MySQL8Dialect
+    show-sql: true
+
+  # --- Web / MVC ---
+  mvc:
+    hiddenmethod:
+      filter:
+        enabled: true
+  web:
+    resources:
+      static-locations:
+        - classpath:/static/
+  servlet:
+    multipart:
+      max-file-size: 10MB
+      max-request-size: 10MB
+
+  # OAuth 2.0 설정 추가
+  security:
+    oauth2:
+      client:
+        registration:
+          google:
+            client-id: ${GOOGLE_CLIENT_ID}
+            client-secret: ${GOOGLE_CLIENT_SECRET}
+            scope:
+              - profile
+              - email
+            redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}"
+        provider:
+          google:
+            authorization-uri: https://accounts.google.com/o/oauth2/v2/auth
+            token-uri: https://oauth2.googleapis.com/token
+            user-info-uri: https://www.googleapis.com/oauth2/v3/userinfo
+            user-name-attribute: sub
+
+  # Redis 설정 추가
+  data:
+    redis:
+      host: localhost
+      port: 6379
+      # password: ${REDIS_PASSWORD}  # 비밀번호 설정 시 사용
+
+  # --- RabbitMQ 설정 추가 ---
+  rabbitmq:
+    host: localhost
+    port: 5672
+    username: guest
+    password: guest
+
+    listener:
+      simple:
+        acknowledge-mode: auto
+        default-requeue-rejected: false
+        retry:
+          enabled: true
+          max-attempts: 3
+          initial-interval: 1000
+          multiplier: 2.0
+          max-interval: 10000
+      template:
+        mandatory: true
+  mail:
+    host: smtp.gmail.com
+    port: 587
+    username: dpwls8972@gmail.com
+    password: lyis nhtm nxsw snha #메일서버 연결
+    properties:
+      mail:
+        smtp:
+          auth: true
+          starttls:
+            enable: true
+
+# --- 파일 업로드 ---
+file:
+  upload-dir: uploads/designs
+  public-prefix: /files
+
+# --- Springdoc ---
+springdoc:
+  default-produces-media-type: application/json
+
+# --- Logging ---
+logging:
+  level:
+    org.hibernate.orm.jdbc.bind: TRACE
+    org.hibernate.orm.jdbc.extract: TRACE
+    org.springframework.transaction.interceptor: TRACE
+    com.rest1: DEBUG
+
+    org.springframework.security: DEBUG
+    org.springframework.security.oauth2: TRACE
+    org.springframework.web: DEBUG
+
+# --- Custom JWT 설정 ---
+custom:
+  jwt:
+    # Refresh Token 만료 시간 추가
+    accessTokenExpireSeconds: 1800 #{30 * 60} 30분
+    refreshTokenExpireSeconds: 604800 #{7 * 24 * 60 * 60} 7일
+    secretKey: ${JWT_SECRET_KEY}  # 환경 변수로 관리
+
+# --- 프론트엔드 URL 설정 ---
+frontend:
+  url: ${FRONT_URL} # 개발 환경
+  # url: https://www.myapp.com  # 프로덕션 환경
+# --- toss 연동 ---
+payment:
+  toss:
+    secret-key: test_gsk_docs_OaPz8L5KdmQXkzRz3y47BMw6
\ No newline at end of file
diff --git a/backend/src/main/resources/fonts/NanumGothic-Regular.ttf b/backend/src/main/resources/fonts/NanumGothic-Regular.ttf
new file mode 100644
index 0000000..e3c67f4
Binary files /dev/null and b/backend/src/main/resources/fonts/NanumGothic-Regular.ttf differ
diff --git a/backend/src/main/resources/static/post/example.jpg b/backend/src/main/resources/static/post/example.jpg
new file mode 100644
index 0000000..de7af19
Binary files /dev/null and b/backend/src/main/resources/static/post/example.jpg differ
diff --git a/backend/src/main/resources/static/review/img1.jpg b/backend/src/main/resources/static/review/img1.jpg
new file mode 100644
index 0000000..12b764f
Binary files /dev/null and b/backend/src/main/resources/static/review/img1.jpg differ
diff --git a/backend/src/main/resources/static/review/img2.jpg b/backend/src/main/resources/static/review/img2.jpg
new file mode 100644
index 0000000..7c0bf0f
Binary files /dev/null and b/backend/src/main/resources/static/review/img2.jpg differ
diff --git a/backend/src/main/resources/static/review/wrongimg1.txt b/backend/src/main/resources/static/review/wrongimg1.txt
new file mode 100644
index 0000000..5b074c6
--- /dev/null
+++ b/backend/src/main/resources/static/review/wrongimg1.txt
@@ -0,0 +1 @@
+잘못된 리뷰 이미지 파일 예시
\ No newline at end of file
diff --git a/src/test/java/com/mysite/knitly/KnitlyApplicationTests.java b/backend/src/test/java/com/mysite/knitly/KnitlyApplicationTests.java
similarity index 100%
rename from src/test/java/com/mysite/knitly/KnitlyApplicationTests.java
rename to backend/src/test/java/com/mysite/knitly/KnitlyApplicationTests.java
diff --git a/backend/src/test/java/com/mysite/knitly/domain/community/comment/controller/CommentControllerValidationTest.java b/backend/src/test/java/com/mysite/knitly/domain/community/comment/controller/CommentControllerValidationTest.java
new file mode 100644
index 0000000..2d3d1f7
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/community/comment/controller/CommentControllerValidationTest.java
@@ -0,0 +1,147 @@
+package com.mysite.knitly.domain.community.comment.controller;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import com.mysite.knitly.domain.community.post.repository.PostRepository;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.entity.Provider;
+import com.mysite.knitly.domain.community.post.entity.Post;
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.http.MediaType;
+import org.springframework.test.context.ActiveProfiles;
+import org.springframework.test.web.servlet.MockMvc;
+import org.springframework.test.web.servlet.request.RequestPostProcessor;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.context.SecurityContextHolder;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.header;
+import static org.hamcrest.Matchers.startsWith;
+
+@SpringBootTest
+@AutoConfigureMockMvc(addFilters = false) // 보안 필터는 필요하면 나중에, SecurityContext는 수동 주입
+@ActiveProfiles("test")
+class CommentControllerValidationTest {
+
+    @Autowired MockMvc mvc;
+    @Autowired ObjectMapper om;
+    @Autowired
+    UserRepository userRepository;
+    @Autowired PostRepository postRepository;
+
+    private Long postId;
+    private Long authorId;
+    private com.mysite.knitly.domain.user.entity.User author;
+
+    @BeforeEach
+    void setUp() {
+
+        // 테스트 사용자 (email 필수)
+        author = com.mysite.knitly.domain.user.entity.User.builder()
+                .socialId("cval-auth-" + java.util.UUID.randomUUID())
+                .email("author@test.com")
+                .name("Author")
+                .provider(com.mysite.knitly.domain.user.entity.Provider.GOOGLE)
+                .build();
+        authorId = userRepository.save(author).getUserId();
+
+        // 게시글 생성
+        var post = com.mysite.knitly.domain.community.post.entity.Post.builder()
+                .category(com.mysite.knitly.domain.community.post.entity.PostCategory.FREE)
+                .title("댓글 검증용 글")
+                .content("본문")
+                .imageUrls(java.util.List.of())
+                .author(author)
+                .build();
+        postId = postRepository.save(post).getId();
+    }
+
+        // SecurityContext에 @AuthenticationPrincipal(User) 세팅
+        private RequestPostProcessor withAuth(User u) {
+            return request -> {
+                var auth = new UsernamePasswordAuthenticationToken(u, null, List.of());
+                SecurityContextHolder.getContext().setAuthentication(auth);
+                return request;
+            };
+    }
+
+    @Test
+    void create_comment_blank_or_too_long_returns_400() throws Exception {
+        // 빈 댓글 -> 400
+        var bodyBlank = om.writeValueAsString(Map.of(
+                "postId", postId, "content", "   "
+        ));
+        mvc.perform(post("/community/posts/{postId}/comments", postId)
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(bodyBlank)
+                        .with(withAuth(author)))
+                .andExpect(status().isBadRequest());
+
+        // 301자 -> 400
+        var longText = "가".repeat(301);
+        var bodyLong = om.writeValueAsString(Map.of(
+                "postId", postId, "content", longText
+        ));
+        mvc.perform(post("/community/posts/{postId}/comments", postId)
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(bodyLong)
+                        .with(withAuth(author)))
+                .andExpect(status().isBadRequest());
+    }
+
+    @Test
+    void create_comment_ok_returns_201() throws Exception {
+        var body = om.writeValueAsString(Map.of(
+                "postId", postId, "content", "정상 댓글"
+        ));
+        mvc.perform(post("/community/posts/{postId}/comments", postId)
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(body)
+                        .with(withAuth(author)))
+                .andExpect(status().isCreated())
+                .andExpect(header().string("Location", startsWith("/community/posts/" + postId + "/comments/")))
+                .andExpect(jsonPath("$.content").value("정상 댓글"));
+    }
+
+    @Test
+    void create_reply_ok_returns_201() throws Exception {
+        // 루트 댓글 생성
+        var root = new HashMap<String, Object>();
+        root.put("postId", postId);
+        root.put("content", "루트");
+        var rootRes = mvc.perform(post("/community/posts/{postId}/comments", postId)
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(om.writeValueAsString(root))
+                        .with(withAuth(author)))
+                .andExpect(status().isCreated())
+                .andExpect(header().string("Location", startsWith("/community/posts/" + postId + "/comments/")))
+                .andReturn();
+
+        long rootId = om.readTree(rootRes.getResponse().getContentAsString()).get("id").asLong();
+
+        // 대댓글 생성 parentId 포함 됨.
+        var reply = new HashMap<String, Object>();
+        reply.put("postId", postId);
+        reply.put("parentId", rootId);
+        reply.put("content", "대댓글");
+        mvc.perform(post("/community/posts/{postId}/comments", postId)
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(om.writeValueAsString(reply))
+                        .with(withAuth(author)))
+                .andExpect(status().isCreated())
+                .andExpect(header().string("Location", startsWith("/community/posts/" + postId + "/comments/")))
+                .andExpect(jsonPath("$.content").value("대댓글"));
+    }
+}
diff --git a/backend/src/test/java/com/mysite/knitly/domain/community/comment/service/CommentServiceTest.java b/backend/src/test/java/com/mysite/knitly/domain/community/comment/service/CommentServiceTest.java
new file mode 100644
index 0000000..0b8b04e
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/community/comment/service/CommentServiceTest.java
@@ -0,0 +1,188 @@
+package com.mysite.knitly.domain.community.comment.service;
+
+import com.mysite.knitly.domain.community.comment.dto.CommentCreateRequest;
+import com.mysite.knitly.domain.community.comment.dto.CommentResponse;
+import com.mysite.knitly.domain.community.comment.dto.CommentTreeResponse;
+import com.mysite.knitly.domain.community.comment.dto.CommentUpdateRequest;
+import com.mysite.knitly.domain.community.comment.repository.CommentRepository;
+import com.mysite.knitly.domain.community.post.entity.Post;
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import com.mysite.knitly.domain.community.post.repository.PostRepository;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.entity.Provider;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import org.junit.jupiter.api.*;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.test.context.ActiveProfiles;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.List;
+
+import static org.assertj.core.api.Assertions.*;
+
+@SpringBootTest
+@ActiveProfiles("test")
+@Transactional
+class CommentServiceTest {
+
+    @Autowired
+    private CommentService commentService;
+
+    @Autowired
+    private CommentRepository commentRepository;
+
+    @Autowired
+    private PostRepository postRepository;
+
+    @Autowired
+    private UserRepository userRepository;
+
+    private User author1;
+    private User author2;
+    private Long postId;
+
+    @BeforeEach
+    void setUp() {
+        // 유저
+        author1 = userRepository.save(User.builder()
+                .socialId("s1")
+                .email("u1@test.com")
+                .name("U1")
+                .provider(Provider.GOOGLE)
+                .build());
+        author2 = userRepository.save(User.builder()
+                .socialId("s2")
+                .email("u2@test.com")
+                .name("U2")
+                .provider(Provider.KAKAO)
+                .build());
+
+
+        // 게시글
+        Post post = Post.builder()
+                .category(PostCategory.FREE)
+                .title("댓글 테스트용 글")
+                .content("본문")
+                .imageUrls(List.of("https://ex.com/a.jpg"))
+                .author(author1)
+                .build();
+        postId = postRepository.save(post).getId();
+    }
+
+    @Test
+    void create_success() {
+        CommentCreateRequest req = new CommentCreateRequest(postId, null, "첫 댓글!");
+        CommentResponse res = commentService.create(req, author1);
+
+        assertThat(res.id()).isNotNull();
+        assertThat(res.content()).isEqualTo("첫 댓글!");
+        assertThat(res.authorId()).isEqualTo(author1.getUserId());
+        assertThat(res.authorDisplay()).isEqualTo("익명의 털실 1"); // 첫 등장 사용자 = 1번
+        assertThat(res.mine()).isTrue();
+    }
+
+    @Test
+    void update_forbidden_when_not_author() {
+        CommentResponse created = commentService.create(new CommentCreateRequest(postId, null, "원본"), author1);
+        assertThatThrownBy(() ->
+                commentService.update(created.id(), new CommentUpdateRequest("수정"), author2)
+        )
+                .isInstanceOf(ServiceException.class)
+                .hasMessageContaining(ErrorCode.COMMENT_UPDATE_FORBIDDEN.getMessage());
+    }
+
+    @Test
+    void delete_forbidden_when_not_author() {
+        CommentResponse created = commentService.create(new CommentCreateRequest(postId, null, "삭제대상"), author1);
+        assertThatThrownBy(() ->
+                commentService.delete(created.id(), author2)
+        )
+                .isInstanceOf(ServiceException.class)
+                .hasMessageContaining(ErrorCode.COMMENT_DELETE_FORBIDDEN.getMessage());
+    }
+
+    @Test
+    void list_sorting_and_count_and_anonymous_numbering() throws Exception {
+        // 루트 댓글 3개로
+        commentService.create(new CommentCreateRequest(postId, null, "c1"), author1);
+        Thread.sleep(5);
+        commentService.create(new CommentCreateRequest(postId, null, "c2"), author2);
+        Thread.sleep(5);
+        commentService.create(new CommentCreateRequest(postId, null, "c3"), author1);
+
+        // 등록순 (루트 페이징)
+        var asc = commentService.getComments(postId, "asc", 0, 10, author1);
+        assertThat(asc.getTotalElements()).isEqualTo(3);
+        assertThat(asc.getContent().get(0).content()).isEqualTo("c1");
+        assertThat(asc.getContent().get(2).content()).isEqualTo("c3");
+
+        // 최신순
+        var desc = commentService.getComments(postId, "desc", 0, 10, author1);
+        assertThat(desc.getContent().get(0).content()).isEqualTo("c3");
+        assertThat(desc.getContent().get(2).content()).isEqualTo("c1");
+
+        // 개수
+        long cnt = commentService.count(postId);
+        assertThat(cnt).isEqualTo(3);
+
+        // 익명 번호 매핑
+        assertThat(asc.getContent().get(0).authorDisplay()).isEqualTo("익명의 털실 1");
+        assertThat(asc.getContent().get(1).authorDisplay()).isEqualTo("익명의 털실 2");
+        assertThat(asc.getContent().get(2).authorDisplay()).isEqualTo("익명의 털실 1");
+    }
+
+    @Test
+    void reply_tree_is_returned_under_root() {
+        // 루트 댓글
+        var root = commentService.create(new CommentCreateRequest(postId, null, "root"), author1);
+
+        // 대댓글 2개로
+        commentService.create(new CommentCreateRequest(postId, root.id(), "re-1"), author2);
+        commentService.create(new CommentCreateRequest(postId, root.id(), "re-2"), author1);
+
+        var page = commentService.getComments(postId, "asc", 0, 10, author1);
+        assertThat(page.getTotalElements()).isEqualTo(1);
+
+        CommentTreeResponse first = page.getContent().get(0);
+        assertThat(first.content()).isEqualTo("root");
+        assertThat(first.children()).hasSize(2);
+        assertThat(first.children().get(0).content()).isEqualTo("re-1");
+        assertThat(first.children().get(1).content()).isEqualTo("re-2");
+        assertThat(first.children().get(0).parentId()).isEqualTo(root.id());
+    }
+
+    @Test
+    void reply_with_parent_from_other_post_throws_bad_request() {
+        // 다른 게시글일 경우
+        User owner = userRepository.findById(author1.getUserId()).orElseThrow();
+        Post otherPost = Post.builder()
+                .category(PostCategory.FREE)
+                .title("다른 글")
+                .content("x")
+                .imageUrls(List.of())
+                .author(owner)
+                .build();
+        Long otherPostId = postRepository.save(otherPost).getId();
+
+        // 다른 글의 루트 댓글
+        var otherRoot = commentService.create(new CommentCreateRequest(otherPostId, null, "other-root"), author1);
+
+        // 현재 글에 '다른 글의 부모'로 대댓글 시도 -> BAD_REQUEST
+        assertThatThrownBy(() ->
+                commentService.create(new CommentCreateRequest(postId, otherRoot.id(), "invalid"), author2)
+        )
+                .isInstanceOf(ServiceException.class)
+                .hasMessageContaining(ErrorCode.BAD_REQUEST.getMessage());
+    }
+
+    @Test
+    void get_comments_on_missing_post_throws() {
+        assertThatThrownBy(() -> commentService.getComments(999_999L, "asc", 0, 10, author1))
+                .isInstanceOf(ServiceException.class)
+                .hasMessageContaining(ErrorCode.POST_NOT_FOUND.getMessage());
+    }
+}
+
diff --git a/backend/src/test/java/com/mysite/knitly/domain/community/post/controller/PostControllerValidationTest.java b/backend/src/test/java/com/mysite/knitly/domain/community/post/controller/PostControllerValidationTest.java
new file mode 100644
index 0000000..db5dfb9
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/community/post/controller/PostControllerValidationTest.java
@@ -0,0 +1,160 @@
+package com.mysite.knitly.domain.community.post.controller;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import com.mysite.knitly.domain.user.entity.Provider;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import org.apiguardian.api.API;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.http.MediaType;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.test.context.ActiveProfiles;
+import org.springframework.test.web.servlet.MockMvc;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.List;
+import java.util.Map;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+
+// 게시글 작성 API 입력값 검증 및 권한 테스트
+@SpringBootTest
+@ActiveProfiles("test")
+@AutoConfigureMockMvc(addFilters = false)
+@Transactional
+class PostControllerValidationTest {
+
+    @Autowired
+    private MockMvc mockMvc;
+
+    @Autowired
+    private ObjectMapper objectMapper;
+
+    @Autowired
+    private UserRepository userRepository;
+
+    // 전역 테스트 필드
+    private User author;
+    private Long authorId;
+    private User other;
+    private Long otherId;
+
+    @BeforeEach
+    void setUp() {
+        // 작성자
+        author = User.builder()
+                .socialId("s1")
+                .email("author@test.com")
+                .name("Author")
+                .provider(Provider.GOOGLE)
+                .build();
+        authorId = userRepository.save(author).getUserId();
+
+        // 다른 사용자
+        other = User.builder()
+                .socialId("s2")
+                .email("other@test.com")
+                .name("Other")
+                .provider(Provider.KAKAO)
+                .build();
+        otherId = userRepository.save(other).getUserId();
+
+        // 인증 유저를 SecurityContext에 주입 (MockMvc가 @AuthenticationPrincipal로 읽을 수 있게)
+        SecurityContextHolder.getContext().setAuthentication(
+                new UsernamePasswordAuthenticationToken(author, null, List.of())
+        );
+    }
+
+
+    // 제목이 100자 초과 시 validation 실패 테스트
+    @Test
+    void createPost_titleTooLong_returnsBadRequest() throws Exception {
+        String longTitle = "a".repeat(101);
+        Map<String, Object> request = Map.of(
+                "category", PostCategory.FREE.name(),
+                "title", longTitle,
+                "content", "내용",
+                "imageUrls", List.of("https://example.com/a.jpg")
+        );
+
+        mockMvc.perform(post("/community/posts")
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(objectMapper.writeValueAsString(request)))
+                .andExpect(status().isBadRequest())
+                .andExpect(jsonPath("$.error.code").value("POST_TITLE_LENGTH_INVALID"));
+    }
+
+
+    // 이미지 6개 이상이면 validation 실패 테스트
+    @Test
+    void createPost_tooManyImages_returnsBadRequest() throws Exception {
+        List<String> sixImages = List.of(
+                "https://example.com/1.jpg",
+                "https://example.com/2.jpg",
+                "https://example.com/3.jpg",
+                "https://example.com/4.jpg",
+                "https://example.com/5.jpg",
+                "https://example.com/6.jpg"
+        );
+        Map<String, Object> request = Map.of(
+                "category", PostCategory.TIP.name(),
+                "title", "제목",
+                "content", "내용",
+                "imageUrls", sixImages
+        );
+
+        mockMvc.perform(post("/community/posts")
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(objectMapper.writeValueAsString(request)))
+                .andExpect(status().isBadRequest())
+                .andExpect(jsonPath("$.error.code").value("POST_IMAGE_COUNT_EXCEEDED"));
+    }
+
+
+     //필수값 누락 시 validation 실패 테스트
+    @Test
+    void createPost_missingFields_returnsBadRequest() throws Exception {
+        Map<String, Object> request = Map.of(
+                "category", PostCategory.FREE.name(),
+                "title", "",
+                "content", ""
+        );
+
+        mockMvc.perform(post("/community/posts")
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(objectMapper.writeValueAsString(request)))
+                .andExpect(status().isBadRequest())
+                .andExpect(jsonPath("$.error.code").value("VALIDATION_ERROR"));
+    }
+
+
+     // 정상 요청 시 201 Created 반환 테스트
+    @Test
+    void createPost_success_returnsCreated() throws Exception {
+        Map<String, Object> request = Map.of(
+                "category", PostCategory.QUESTION.name(),
+                "title", "첫 글",
+                "content", "내용",
+                "imageUrls", List.of("https://example.com/ok.jpg")
+        );
+
+        mockMvc.perform(post("/community/posts")
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(objectMapper.writeValueAsString(request)))
+                .andExpect(status().isCreated())
+                .andExpect(jsonPath("$.title").value("첫 글"))
+                .andExpect(jsonPath("$.authorId").value(authorId));
+
+        assertThat(userRepository.findById(authorId)).isPresent();
+    }
+}
diff --git a/backend/src/test/java/com/mysite/knitly/domain/community/post/service/PostServiceTest.java b/backend/src/test/java/com/mysite/knitly/domain/community/post/service/PostServiceTest.java
new file mode 100644
index 0000000..a397dec
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/community/post/service/PostServiceTest.java
@@ -0,0 +1,150 @@
+package com.mysite.knitly.domain.community.post.service;
+
+import com.mysite.knitly.domain.community.post.dto.*;
+import com.mysite.knitly.domain.community.post.entity.PostCategory;
+import com.mysite.knitly.domain.community.post.repository.PostRepository;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.entity.Provider;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import org.junit.jupiter.api.*;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.test.context.ActiveProfiles;
+import org.springframework.transaction.annotation.Transactional;
+import java.util.List;
+
+import static org.assertj.core.api.Assertions.*;
+
+@SpringBootTest
+@ActiveProfiles("test")
+@Transactional
+class PostServiceTest {
+
+    @Autowired
+    private PostService postService;
+
+    @Autowired
+    private UserRepository userRepository; // 유지
+
+    @Autowired
+    private PostRepository postRepository;
+
+    private User author;
+    private User other;
+
+    @BeforeEach
+    void setUp() {
+        // author
+        author = User.builder()
+                .socialId("social-author")
+                .email("author@test.com")
+                .name("Author")
+                .provider(Provider.GOOGLE)
+                .build();
+        author = userRepository.save(author);
+
+        // other user
+        other = User.builder()
+                .socialId("social-other")
+                .email("other@test.com")
+                .name("Other")
+                .provider(Provider.KAKAO)
+                .build();
+        other = userRepository.save(other);
+    }
+
+    @Test
+    void create_success() {
+        PostCreateRequest req = new PostCreateRequest(
+                PostCategory.FREE, "첫 글", "내용",
+                List.of("https://example.com/a.jpg")
+        );
+
+        PostResponse res = postService.create(req, author);
+
+        assertThat(res.id()).isNotNull();
+        assertThat(res.title()).isEqualTo("첫 글");
+        assertThat(res.authorId()).isEqualTo(author.getUserId());
+        assertThat(res.mine()).isTrue();
+        assertThat(res.imageUrls()).hasSize(1).containsExactly("https://example.com/a.jpg");
+    }
+
+    @Test
+    void create_invalid_image_extension_throws() {
+        PostCreateRequest req = new PostCreateRequest(
+                PostCategory.FREE, "이미지 확장자 실패", "내용",
+                List.of("http://x/evil.gif")
+        );
+
+        assertThatThrownBy(() -> postService.create(req, author))
+                .isInstanceOf(ServiceException.class)
+                .hasMessageContaining(ErrorCode.POST_IMAGE_EXTENSION_INVALID.getMessage());
+    }
+
+    @Test
+    void getPost_not_found_throws() {
+        assertThatThrownBy(() -> postService.getPost(99999L, author))
+                .isInstanceOf(ServiceException.class)
+                .hasMessageContaining(ErrorCode.POST_NOT_FOUND.getMessage());
+    }
+
+    @Test
+    void update_forbidden_when_not_author() {
+        // given
+        PostCreateRequest req = new PostCreateRequest(
+                PostCategory.TIP, "원본", "내용",
+                List.of("https://example.com/tip.jpg")
+        );
+        PostResponse created = postService.create(req, author);
+
+        PostUpdateRequest update = new PostUpdateRequest(
+                PostCategory.TIP, "수정제목", "수정내용",
+                List.of("https://example.com/new.jpg")
+        );
+        // when + then
+        assertThatThrownBy(() -> postService.update(created.id(), update, other))
+                .isInstanceOf(ServiceException.class)
+                .hasMessageContaining(ErrorCode.POST_UPDATE_FORBIDDEN.getMessage());
+    }
+
+    @Test
+    void delete_forbidden_when_not_author() {
+        // given
+        PostCreateRequest req = new PostCreateRequest(
+                PostCategory.QUESTION, "질문", "질문내용",
+                List.of("https://example.com/q.jpg")
+        );
+
+        PostResponse created = postService.create(req, author);
+
+        // when + then
+        assertThatThrownBy(() -> postService.delete(created.id(), other))
+                .isInstanceOf(ServiceException.class)
+                .hasMessageContaining(ErrorCode.POST_DELETE_FORBIDDEN.getMessage());
+    }
+
+    @Test
+    void list_paging_and_filter() {
+        // given: FREE 2건, TIP 1건
+        for (int i = 0; i < 2; i++) {
+            postService.create(new PostCreateRequest(
+                    PostCategory.FREE, "free-" + i, "c",
+                    List.of("https://example.com/i.jpg")
+            ), author);
+        }
+        postService.create(new PostCreateRequest(
+                PostCategory.TIP, "tip", "c",
+                List.of("https://example.com/i.jpg")
+        ), author);
+
+        // when
+        var page0 = postService.getPostList(PostCategory.FREE, null, 0, 10);
+        var all = postService.getPostList(null, null, 0, 10);
+        // then
+        assertThat(page0.getTotalElements()).isEqualTo(2);
+        assertThat(all.getTotalElements()).isEqualTo(3);
+
+    }
+}
\ No newline at end of file
diff --git a/backend/src/test/java/com/mysite/knitly/domain/design/service/DesignServiceTest.java b/backend/src/test/java/com/mysite/knitly/domain/design/service/DesignServiceTest.java
new file mode 100644
index 0000000..ada73dd
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/design/service/DesignServiceTest.java
@@ -0,0 +1,339 @@
+package com.mysite.knitly.domain.design.service;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.mysite.knitly.domain.design.dto.DesignListResponse;
+import com.mysite.knitly.domain.design.dto.DesignRequest;
+import com.mysite.knitly.domain.design.dto.DesignResponse;
+import com.mysite.knitly.domain.design.dto.DesignUploadRequest;
+import com.mysite.knitly.domain.design.entity.Design;
+import com.mysite.knitly.domain.design.entity.DesignState;
+import com.mysite.knitly.domain.design.repository.DesignRepository;
+import com.mysite.knitly.domain.design.util.FileValidator;
+import com.mysite.knitly.domain.design.util.LocalFileStorage;
+import com.mysite.knitly.domain.design.util.PdfGenerator;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InjectMocks;
+import org.mockito.Mock;
+import org.mockito.Spy;
+import org.mockito.junit.jupiter.MockitoExtension;
+import org.springframework.mock.web.MockMultipartFile;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.io.IOException;
+import java.util.List;
+import java.util.Optional;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.eq;
+import static org.mockito.Mockito.*;
+
+@ExtendWith(MockitoExtension.class)
+public class DesignServiceTest {
+
+    @Mock
+    DesignRepository designRepository;
+    @Mock
+    PdfGenerator pdfGenerator;
+    @Mock
+    LocalFileStorage localFileStorage;
+    @Mock
+    FileValidator fileValidator;
+    @Spy
+    ObjectMapper objectMapper = new ObjectMapper();
+    @InjectMocks
+    DesignService designService;
+
+
+    @Test
+    @DisplayName("도안 생성 - 정상")
+    void createDesign_ok() {
+        User user = User.builder().userId(1L).build();
+
+        DesignRequest req = new DesignRequest(
+                "하트 패턴",
+                fake10x10(),
+                "하트패턴_샘플"
+        );
+
+        byte[] pdf = new byte[]{1,2,3};
+        when(pdfGenerator.generate(eq("하트 패턴"), any())).thenReturn(pdf);
+        when(localFileStorage.savePdfFile(eq(pdf), anyString()))
+                .thenReturn("/files/2025/10/17/uuid_하트패턴.pdf");
+
+        Design saved = Design.builder()
+                .designId(10L)
+                .user(user)
+                .designName("하트 패턴")
+                .pdfUrl("/files/2025/10/17/uuid_하트패턴.pdf")
+                .gridData("[]")
+                .designState(DesignState.BEFORE_SALE)
+                .build();
+
+        when(designRepository.save(any(Design.class))).thenReturn(saved);
+
+        DesignResponse res = designService.createDesign(user, req);
+
+        assertThat(res).isNotNull();
+        assertThat(res.designId()).isEqualTo(10L);
+        verify(pdfGenerator).generate(eq("하트 패턴"), any());
+        verify(localFileStorage).savePdfFile(eq(pdf), anyString());
+        verify(designRepository).save(any(Design.class));
+    }
+
+    @Test
+    @DisplayName("도안 생성 - 그리드 크기 불일치 시 실패")
+    void createDesign_invalidGrid() {
+        User user = User.builder().userId(1L).build();
+
+        DesignRequest req = new DesignRequest(
+                "x",
+                List.of(List.of("A")),
+                null
+        );
+
+        assertThatThrownBy(() -> designService.createDesign(user, req))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode").isEqualTo(ErrorCode.DESIGN_INVALID_GRID_SIZE);
+        verifyNoInteractions(pdfGenerator, localFileStorage, designRepository);
+    }
+
+    private List<List<String>> fake10x10() {
+        return java.util.stream.IntStream.range(0,10)
+                .mapToObj(r -> java.util.Collections.nCopies(10, "◯"))
+                .toList();
+    }
+
+
+    @Test
+    @DisplayName("본인 도안 조회 - 정상")
+    void getMyDesigns_ok() {
+        User user = User.builder().userId(1L).build();
+
+        Design design1 = Design.builder()
+                .designId(1L)
+                .user(user)
+                .designName("도안1")
+                .pdfUrl("/files/1.pdf")
+                .designState(DesignState.BEFORE_SALE)
+                .build();
+
+        Design design2 = Design.builder()
+                .designId(2L)
+                .user(user)
+                .designName("도안2")
+                .pdfUrl("/files/2.pdf")
+                .designState(DesignState.ON_SALE)
+                .build();
+
+        when(designRepository.findByUser(user)).thenReturn(List.of(design1, design2));
+
+        List<DesignListResponse> list = designService.getMyDesigns(user);
+
+        assertThat(list).hasSize(2);
+        assertThat(list.get(0).designId()).isEqualTo(1L);
+        assertThat(list.get(0).designName()).isEqualTo("도안1");
+        assertThat(list.get(1).designId()).isEqualTo(2L);
+
+    }
+
+    @Test
+    @DisplayName("도안 삭제 - 본인 소유 + BEFORE_SALE → 파일 삭제 시도 후 DB 하드 삭제")
+    void deleteDesign_ok_beforeSale() throws Exception {
+        User user = User.builder().userId(1L).name("유저1").build();
+
+        Design design = Design.builder()
+                .designId(1L)
+                .user(user)
+                .designName("도안1")
+                .pdfUrl("/files/1.pdf")
+                .designState(DesignState.BEFORE_SALE)
+                .build();
+
+        when(designRepository.findById(1L)).thenReturn(Optional.of(design));
+        designService.deleteDesign(user, 1L);
+
+        verify(localFileStorage, times(1)).deleteFile("/files/1.pdf");
+        verify(designRepository, times(1)).delete(design);
+    }
+
+    @Test
+    @DisplayName("도안 삭제 - 파일 삭제 실패해도 DB 삭제는 진행")
+    void deleteDesign_fileDeleteFails_butStillDeletesDb() throws Exception {
+        User user = User.builder().userId(1L).build();
+
+        Design design = Design.builder()
+                .designId(1L)
+                .user(user)
+                .designName("도안1")
+                .pdfUrl("/files/1.pdf")
+                .designState(DesignState.BEFORE_SALE)
+                .build();
+
+        when(designRepository.findById(1L)).thenReturn(Optional.of(design));
+        doThrow(new IOException("io-실패")).when(localFileStorage).deleteFile("/files/1.pdf");
+
+        designService.deleteDesign(user, 1L);
+
+        verify(localFileStorage, times(1)).deleteFile("/files/1.pdf");
+        verify(designRepository, times(1)).delete(design);
+    }
+
+    @Test
+    @DisplayName("도안 삭제 - 본인 아님 → DESIGN_UNAUTHORIZED_DELETE")
+    void deleteDesign_notOwner() {
+        User owner = User.builder().userId(1L).name("유저1").build();
+        User other = User.builder().userId(2L).name("유저2").build();
+
+        Design design = Design.builder()
+                .designId(1L)
+                .user(owner)
+                .designName("도안1")
+                .pdfUrl("/files/1.pdf")
+                .designState(DesignState.BEFORE_SALE)
+                .build();
+        when(designRepository.findById(1L)).thenReturn(Optional.of(design));
+
+        assertThatThrownBy(() -> designService.deleteDesign(other, 1L))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode").isEqualTo(ErrorCode.DESIGN_UNAUTHORIZED_DELETE);
+
+        verify(designRepository, never()).delete(any());
+        verifyNoInteractions(localFileStorage);
+    }
+
+    @Test
+    @DisplayName("도안 삭제 - 상태가 ON_SALE/STOPPED → DESIGN_NOT_DELETABLE")
+    void deleteDesign_notDeletable_whenOnSaleOrStopped() {
+        User user = User.builder().userId(1L).build();
+
+        Design design = Design.builder()
+                .designId(2L)
+                .user(user)
+                .designName("도안1")
+                .pdfUrl("/files/1.pdf")
+                .designState(DesignState.ON_SALE)
+                .build();
+        when(designRepository.findById(2L)).thenReturn(Optional.of(design));
+
+        assertThatThrownBy(() -> designService.deleteDesign(user, 2L))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode").isEqualTo(ErrorCode.DESIGN_NOT_DELETABLE);
+
+        verify(designRepository, never()).delete(any());
+        verifyNoInteractions(localFileStorage);
+    }
+
+    @Test
+    @DisplayName("기존 PDF 업로드 - 정상")
+    void uploadPdfDesign_ok() {
+        User user = User.builder().userId(1L).build();
+
+        // validator 통과
+        doNothing().when(fileValidator).validatePdfFile(any());
+
+        byte[] bytes = "PDF BYTES".getBytes();
+        MultipartFile file = new MockMultipartFile("file", "sample.pdf", "application/pdf", bytes);
+
+        when(localFileStorage.savePdfFile(any(byte[].class), eq("샘플도안.pdf")))
+                .thenReturn("/files/2025/10/21/abcd1234_sample.pdf");
+
+        Design saved = Design.builder()
+                .designId(100L)
+                .user(user)
+                .designName("샘플도안")
+                .pdfUrl("/files/2025/10/21/abcd1234_sample.pdf")
+                .designState(DesignState.BEFORE_SALE)
+                .build();
+        when(designRepository.save(any(Design.class))).thenReturn(saved);
+
+        DesignUploadRequest req = new DesignUploadRequest("샘플도안", file);
+        DesignResponse res = designService.uploadPdfDesign(user, req);
+
+        assertThat(res).isNotNull();
+        assertThat(res.designId()).isEqualTo(100L);
+        assertThat(res.pdfUrl()).isEqualTo("/files/2025/10/21/abcd1234_sample.pdf");
+
+        verify(fileValidator).validatePdfFile(file);
+        verify(localFileStorage).savePdfFile(any(byte[].class), eq("샘플도안.pdf"));
+        verify(designRepository).save(any(Design.class));
+    }
+
+    @Test
+    @DisplayName("기존 PDF 업로드 - 파일 유효성 실패 → DESIGN_FILE_INVALID_TYPE")
+    void uploadPdfDesign_invalidFile() {
+        User user = User.builder().userId(1L).build();
+
+        MultipartFile file = new MockMultipartFile("file", "origin-name.pdf", "application/pdf", new byte[]{1, 2, 3});
+        doThrow(new ServiceException(ErrorCode.DESIGN_FILE_INVALID_TYPE))
+                .when(fileValidator).validatePdfFile(any());
+
+        DesignUploadRequest req = new DesignUploadRequest("도안", file);
+
+        assertThatThrownBy(() -> designService.uploadPdfDesign(user, req))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode").isEqualTo(ErrorCode.DESIGN_FILE_INVALID_TYPE);
+
+        verifyNoInteractions(localFileStorage, designRepository);
+    }
+
+    @Test
+    @DisplayName("기존 PDF 업로드 - 파일 읽기 실패(getBytes) → DESIGN_FILE_SAVE_FAILED")
+    void uploadPdfDesign_ioOnGetBytes() throws Exception {
+        User user = User.builder().userId(1L).build();
+
+        doNothing().when(fileValidator).validatePdfFile(any());
+
+        MultipartFile file = mock(MultipartFile.class);
+        when(file.getOriginalFilename()).thenReturn("sample.pdf");
+        when(file.getBytes()).thenThrow(new IOException("boom"));
+
+        DesignUploadRequest req = new DesignUploadRequest("도안", file);
+
+        assertThatThrownBy(() -> designService.uploadPdfDesign(user, req))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode").isEqualTo(ErrorCode.DESIGN_FILE_SAVE_FAILED);
+
+        verifyNoInteractions(localFileStorage, designRepository);
+    }
+
+    @Test
+    @DisplayName("기존 PDF 업로드 - 도안명 공백 → 원본 파일명 기반 저장")
+    void uploadPdfDesign_blankName() {
+        User user = User.builder().userId(1L).build();
+
+        doNothing().when(fileValidator).validatePdfFile(any());
+
+        MultipartFile file = new MockMultipartFile("file", "origin-name.pdf", "application/pdf", new byte[]{1, 2, 3});
+        when(localFileStorage.savePdfFile(any(byte[].class), eq("origin-name.pdf")))
+                .thenReturn("/files/2025/10/21/zzzz_origin-name.pdf");
+
+        when(designRepository.save(any(Design.class))).thenAnswer(inv -> {
+            Design d = inv.getArgument(0);
+            return Design.builder()
+                    .designId(11L)
+                    .user(d.getUser())
+                    .designName(d.getDesignName())
+                    .pdfUrl(d.getPdfUrl())
+                    .designState(d.getDesignState())
+                    .build();
+        });
+
+        DesignUploadRequest req = new DesignUploadRequest("   ", file);
+
+        DesignResponse res = designService.uploadPdfDesign(user, req);
+
+        assertThat(res).isNotNull();
+        assertThat(res.designId()).isEqualTo(11L);
+        verify(localFileStorage).savePdfFile(any(byte[].class), eq("origin-name.pdf"));
+    }
+
+}
+
diff --git a/backend/src/test/java/com/mysite/knitly/domain/design/util/LocalFileStorageTest.java b/backend/src/test/java/com/mysite/knitly/domain/design/util/LocalFileStorageTest.java
new file mode 100644
index 0000000..2937df6
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/design/util/LocalFileStorageTest.java
@@ -0,0 +1,41 @@
+package com.mysite.knitly.domain.design.util;
+
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.io.TempDir;
+
+import java.lang.reflect.Field;
+import java.nio.file.Files;
+import java.nio.file.Path;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+public class LocalFileStorageTest {
+    @TempDir
+    Path tempDir;
+
+    @Test
+    @DisplayName("로컬 저장 - URL 반환 및 URL → 실경로 복원 성공")
+    void savePdfFile_and_resolve_ok() throws Exception {
+        LocalFileStorage storage = new LocalFileStorage();
+        setField(storage, "uploadDir", tempDir.toString());
+        setField(storage, "publicPrefix", "/files");
+
+        byte[] pdfBytes = new byte[]{1,2,3};
+
+        String url = storage.savePdfFile(pdfBytes, "testFile");
+
+        assertThat(url).startsWith("/files/");
+
+        // URL -> 실제 경로 복원
+        Path abs = storage.toAbsolutePathFromUrl(url);
+        assertThat(Files.exists(abs)).isTrue();
+        assertThat(Files.size(abs)).isEqualTo(3);
+    }
+
+    private static void setField(Object target, String name, Object value) throws Exception {
+        Field f = target.getClass().getDeclaredField(name);
+        f.setAccessible(true);
+        f.set(target, value);
+    }
+}
diff --git a/backend/src/test/java/com/mysite/knitly/domain/design/util/PdfGeneratorTest.java b/backend/src/test/java/com/mysite/knitly/domain/design/util/PdfGeneratorTest.java
new file mode 100644
index 0000000..ce47017
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/design/util/PdfGeneratorTest.java
@@ -0,0 +1,42 @@
+package com.mysite.knitly.domain.design.util;
+
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+
+import java.util.List;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+
+public class PdfGeneratorTest {
+    private final PdfGenerator generator = new PdfGenerator();
+
+    @Test
+    @DisplayName("PDF 생성 - 정상")
+    void generate_ok_returnsPdfBytes() {
+        byte[] pdf = generator.generate("테스트 도안", fake10x10());
+
+        // PDF 시그니처 %PDF 확인
+        assertThat(pdf).isNotEmpty();
+        assertThat(new String(pdf, 0, 4)).isEqualTo("%PDF");
+        // 사이즈 대략 체크
+        assertThat(pdf.length).isGreaterThan(100);
+    }
+
+    @Test
+    @DisplayName("PDF 생성 실패 - 10x10 격자 형식 지키지 않은 경우")
+    void generate_invalidGrid_throwsServiceException() {
+        assertThatThrownBy(() -> generator.generate("깨진 도안", List.of(List.of("A"))))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.DESIGN_PDF_GENERATION_FAILED);
+    }
+
+    private static List<List<String>> fake10x10() {
+        return java.util.stream.IntStream.range(0, 10)
+                .mapToObj(r -> java.util.Collections.nCopies(10, "◯"))
+                .toList();
+    }
+}
diff --git a/backend/src/test/java/com/mysite/knitly/domain/home/service/HomeSectionServiceTest.java b/backend/src/test/java/com/mysite/knitly/domain/home/service/HomeSectionServiceTest.java
new file mode 100644
index 0000000..36e408f
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/home/service/HomeSectionServiceTest.java
@@ -0,0 +1,184 @@
+package com.mysite.knitly.domain.home.service;
+
+import com.mysite.knitly.domain.home.dto.HomeSummaryResponse;
+import com.mysite.knitly.domain.home.dto.LatestPostItem;
+import com.mysite.knitly.domain.home.dto.LatestReviewItem;
+import com.mysite.knitly.domain.home.repository.HomeQueryRepository;
+import com.mysite.knitly.domain.product.product.dto.ProductListResponse;
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+import com.mysite.knitly.domain.product.product.repository.ProductRepository;
+import com.mysite.knitly.domain.product.product.service.RedisProductService;
+import org.junit.jupiter.api.*;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InjectMocks;
+import org.mockito.Mock;
+import org.mockito.*;
+import org.mockito.junit.jupiter.MockitoExtension;
+import org.springframework.data.domain.*;
+
+import java.time.LocalDateTime;
+import java.time.LocalDate;
+import java.util.Arrays;
+import java.util.List;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.BDDMockito.given;
+import static org.mockito.Mockito.verify;
+
+@ExtendWith(MockitoExtension.class)
+class HomeSectionServiceTest {
+
+    @Mock
+    private RedisProductService redisProductService;
+    @InjectMocks
+    private HomeSectionService homeSectionService;
+    @Mock
+    private ProductRepository productRepository;
+    @Mock
+    private HomeQueryRepository homeQueryRepository;
+
+    private Product product1; // id=1
+    private Product product2; // id=2
+    private Product product3; // id=3
+
+    @BeforeEach
+    void setUp() {
+        LocalDateTime now = LocalDateTime.now();
+
+        product1 = Product.builder()
+                .productId(1L)
+                .title("상의 패턴 1")
+                .productCategory(ProductCategory.TOP)
+                .price(10000.0)
+                .purchaseCount(100)
+                .likeCount(50)
+                .isDeleted(false)
+                .createdAt(now.minusDays(1))
+                .build();
+
+        product2 = Product.builder()
+                .productId(2L)
+                .title("무료 패턴")
+                .productCategory(ProductCategory.BOTTOM)
+                .price(0.0)
+                .purchaseCount(200)
+                .likeCount(80)
+                .isDeleted(false)
+                .createdAt(now.minusDays(2))
+                .build();
+
+        product3 = Product.builder()
+                .productId(3L)
+                .title("한정판매 패턴")
+                .productCategory(ProductCategory.OUTER)
+                .price(15000.0)
+                .stockQuantity(10)
+                .purchaseCount(150)
+                .likeCount(60)
+                .isDeleted(false)
+                .createdAt(now.minusDays(3))
+                .build();
+    }
+
+    @Test
+    @DisplayName("인기 Top5 조회 - Redis 데이터 있음")
+    void getTop5Products_WithRedis() {
+        List<Long> top5Ids = Arrays.asList(2L, 3L, 1L);
+        given(redisProductService.getTopNPopularProducts(5)).willReturn(top5Ids);
+        given(productRepository.findByProductIdInAndIsDeletedFalse(top5Ids))
+                .willReturn(Arrays.asList(product2, product3, product1));
+
+        List<ProductListResponse> result = homeSectionService.getPopularTop5();
+
+        assertThat(result).hasSize(3);
+        assertThat(result).extracting(ProductListResponse::productId)
+                .containsExactly(2L, 3L, 1L); // edis ZSET 순서 보존 검증
+        verify(redisProductService).getTopNPopularProducts(5);
+        verify(productRepository).findByProductIdInAndIsDeletedFalse(top5Ids);
+    }
+
+    @Test
+    @DisplayName("인기 Top5 조회 - Redis 데이터 없음 (DB 조회)")
+    void getTop5Products_WithoutRedis() {
+        given(redisProductService.getTopNPopularProducts(5)).willReturn(List.of());
+        Page<Product> top5Page = new PageImpl<>(Arrays.asList(product2, product3, product1));
+        given(productRepository.findByIsDeletedFalse(any(Pageable.class))).willReturn(top5Page);
+
+        List<ProductListResponse> result = homeSectionService.getPopularTop5();
+
+        assertThat(result).hasSize(3);
+        assertThat(result).extracting(ProductListResponse::productId)
+                .containsExactly(2L, 3L, 1L);
+        verify(productRepository).findByIsDeletedFalse(PageRequest.of(0, 5, Sort.by("purchaseCount").descending()));
+    }
+
+    @Test
+    @DisplayName("최신 리뷰 3개 조회 - Repository 결과 반환")
+    void getLatestReviews_ReturnsTop3() {
+        var r1 = new LatestReviewItem(101L, 10L, "니트 스웨터", null, 5, "아주 좋아요", LocalDate.now());
+        var r2 = new LatestReviewItem(102L, 11L, "울 머플러", null, 4, "따뜻합니다", LocalDate.now().minusDays(1));
+        var r3 = new LatestReviewItem(103L, 12L, "가디건", null, 5, "부드러워요", LocalDate.now().minusDays(2));
+
+        given(homeQueryRepository.findLatestReviews(3)).willReturn(List.of(r1, r2, r3));
+
+        var result = homeSectionService.getLatestReviews(3);
+
+        assertThat(result).hasSize(3);
+        assertThat(result.get(0).reviewId()).isEqualTo(101L);
+        assertThat(result.get(1).productTitle()).isEqualTo("울 머플러");
+        verify(homeQueryRepository).findLatestReviews(3);
+    }
+    @Test
+    @DisplayName("최신 커뮤니티 글 3개 조회 - Repository 결과 반환")
+    void getLatestPosts_ReturnsTop3() {
+        var p1 = new LatestPostItem(201L, "첫 글", "FREE", null, LocalDateTime.now());
+        var p2 = new LatestPostItem(202L, "둘째 글", "QUESTION", null, LocalDateTime.now().minusHours(1));
+        var p3 = new LatestPostItem(203L, "셋째 글", "TIP", null, LocalDateTime.now().minusDays(1));
+
+        given(homeQueryRepository.findLatestPosts(3)).willReturn(List.of(p1, p2, p3));
+
+        var result = homeSectionService.getLatestPosts(3);
+
+        assertThat(result).hasSize(3);
+        assertThat(result.get(0).postId()).isEqualTo(201L);
+        assertThat(result.get(2).category()).isEqualTo("TIP");
+        verify(homeQueryRepository).findLatestPosts(3);
+    }
+    @Test
+    @DisplayName("홈 요약 조회 - 인기 Top5 + 최신 리뷰 3 + 최신 글 3을 모아서 반환")
+    void getHomeSummary_AggregatesAllSections() {
+        // popular
+        List<Long> ids = Arrays.asList(2L, 3L, 1L);
+        given(redisProductService.getTopNPopularProducts(5)).willReturn(ids);
+        given(productRepository.findByProductIdInAndIsDeletedFalse(ids))
+                .willReturn(Arrays.asList(product2, product3, product1));
+
+        // latest reviews
+        var r1 = new LatestReviewItem(101L, 10L, "니트 스웨터", null, 5, "굿", LocalDate.now());
+        var r2 = new LatestReviewItem(102L, 11L, "울 머플러", null, 4, "따뜻", LocalDate.now());
+        var r3 = new LatestReviewItem(103L, 12L, "가디건", null, 5, "부드러움", LocalDate.now());
+        given(homeQueryRepository.findLatestReviews(3)).willReturn(List.of(r1, r2, r3));
+
+        // latest posts
+        var p1 = new LatestPostItem(201L, "첫 글", "FREE", null, LocalDateTime.now());
+        var p2 = new LatestPostItem(202L, "둘째 글", "QUESTION", null, LocalDateTime.now());
+        var p3 = new LatestPostItem(203L, "셋째 글", "TIP", null, LocalDateTime.now());
+        given(homeQueryRepository.findLatestPosts(3)).willReturn(List.of(p1, p2, p3));
+
+        HomeSummaryResponse response = homeSectionService.getHomeSummary();
+
+        assertThat(response.popularProducts()).hasSize(3);
+        assertThat(response.latestReviews()).hasSize(3);
+        assertThat(response.latestPosts()).hasSize(3);
+        assertThat(response.popularProducts()).extracting(ProductListResponse::productId)
+                .containsExactly(2L, 3L, 1L);
+
+        assertThat(response.latestReviews().get(0).rating()).isEqualTo(5);
+        assertThat(response.latestPosts().get(1).category()).isEqualTo("QUESTION");
+    }
+}
\ No newline at end of file
diff --git a/backend/src/test/java/com/mysite/knitly/domain/mypage/Service/MyPageServiceTest.java b/backend/src/test/java/com/mysite/knitly/domain/mypage/Service/MyPageServiceTest.java
new file mode 100644
index 0000000..e1e5ca3
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/mypage/Service/MyPageServiceTest.java
@@ -0,0 +1,119 @@
+package com.mysite.knitly.domain.mypage.Service;
+
+import com.mysite.knitly.domain.mypage.dto.*;
+import com.mysite.knitly.domain.mypage.repository.MyPageQueryRepository;
+import com.mysite.knitly.domain.mypage.service.MyPageService;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InjectMocks;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+import org.springframework.data.domain.PageImpl;
+import org.springframework.data.domain.PageRequest;
+
+import java.math.BigDecimal;
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+import java.util.List;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.eq;
+import static org.mockito.BDDMockito.given;
+
+@ExtendWith(MockitoExtension.class)
+class MyPageServiceTest {
+
+    @Mock
+    MyPageQueryRepository repo;
+
+    @InjectMocks
+    MyPageService service;
+
+    @Test
+    @DisplayName("주문 카드 조회 - Repository 위임 확인")
+    void getOrderCards() {
+        var card = OrderCardResponse.of(1L, LocalDateTime.now(), 10000.0);
+        var page = new PageImpl<>(List.of(card), PageRequest.of(0, 3), 1);
+
+        given(repo.findOrderCards(eq(10L), any())).willReturn(page);
+
+        var result = service.getOrderCards(10L, PageRequest.of(0, 3));
+
+        assertThat(result.getTotalElements()).isEqualTo(1);
+        assertThat(result.getContent()).hasSize(1);
+        assertThat(result.getContent().get(0).orderId()).isEqualTo(1L);
+    }
+
+    @Test
+    @DisplayName("내가 쓴 글 조회 - 검색어 포함")
+    void getMyPosts() {
+        var dto = new MyPostListItemResponse(100L, "제목", "요약", "thumb.jpg",
+                LocalDateTime.of(2025,1,1,10,0));
+        var page = new PageImpl<>(List.of(dto), PageRequest.of(0, 10), 1);
+
+        given(repo.findMyPosts(eq(10L), eq("키워드"), any())).willReturn(page);
+
+        var result = service.getMyPosts(10L, "키워드", PageRequest.of(0, 10));
+
+        assertThat(result.getContent()).hasSize(1);
+        assertThat(result.getContent().get(0).id()).isEqualTo(100L);
+        assertThat(result.getContent().get(0).title()).isEqualTo("제목");
+    }
+
+    @Test
+    @DisplayName("내가 쓴 댓글 조회 - 검색어 포함")
+    void getMyComments() {
+        var c = new MyCommentListItem(7L, 100L, LocalDate.of(2025,1,2), "미리보기");
+        var page = new PageImpl<>(List.of(c), PageRequest.of(0, 10), 1);
+
+        given(repo.findMyComments(eq(10L), eq("단어"), any())).willReturn(page);
+
+        var result = service.getMyComments(10L, "단어", PageRequest.of(0, 10));
+
+        assertThat(result.getContent()).hasSize(1);
+        assertThat(result.getContent().get(0).commentId()).isEqualTo(7L);
+        assertThat(result.getContent().get(0).postId()).isEqualTo(100L);
+    }
+
+    @Test
+    @DisplayName("내가 찜한 상품 조회")
+    void getMyFavorites() {
+        var f = new FavoriteProductItem(9001L, "인기 도안", "t.jpg", 9900.0, 4.2, LocalDate.of(2025,1,3));
+        var page = new PageImpl<>(List.of(f), PageRequest.of(0, 10), 1);
+
+        given(repo.findMyFavoriteProducts(eq(10L), any())).willReturn(page);
+
+        var result = service.getMyFavorites(10L, PageRequest.of(0, 10));
+
+        assertThat(result.getContent()).hasSize(1);
+        assertThat(result.getContent().get(0).productId()).isEqualTo(9001L);
+        assertThat(result.getContent().get(0).averageRating()).isEqualTo(4.2);
+    }
+
+    @Test
+    @DisplayName("내가 남긴 리뷰 조회")
+    void getMyReviews() {
+        var r = new ReviewListItem(
+                301L,
+                9001L,
+                "인기 도안",
+                "t.jpg",
+                5,
+                "좋아요",
+                List.of("r1.jpg"),
+                LocalDate.of(2025,1,4),
+                LocalDate.of(2025,1,2)
+        );
+                var page = new PageImpl<>(List.of(r), PageRequest.of(0, 10), 1);
+
+        given(repo.findMyReviews(eq(10L), any())).willReturn(page);
+
+        var result = service.getMyReviews(10L, PageRequest.of(0, 10));
+
+        assertThat(result.getTotalElements()).isEqualTo(1);
+        assertThat(result.getContent().get(0).rating()).isEqualTo(5);
+        assertThat(result.getContent().get(0).productId()).isEqualTo(9001L);
+    }
+}
diff --git a/backend/src/test/java/com/mysite/knitly/domain/mypage/controller/MyPageControllerTest.java b/backend/src/test/java/com/mysite/knitly/domain/mypage/controller/MyPageControllerTest.java
new file mode 100644
index 0000000..b6acdac
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/mypage/controller/MyPageControllerTest.java
@@ -0,0 +1,180 @@
+package com.mysite.knitly.domain.mypage.controller;
+
+import com.mysite.knitly.domain.mypage.dto.*;
+import com.mysite.knitly.domain.mypage.service.MyPageService;
+import com.mysite.knitly.domain.payment.service.PaymentService;
+import com.mysite.knitly.domain.user.entity.User;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.mockito.Mockito;
+import org.springframework.data.domain.PageImpl;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
+import org.springframework.test.web.servlet.MockMvc;
+import org.springframework.test.web.servlet.setup.MockMvcBuilders;
+import org.springframework.web.method.support.HandlerMethodArgumentResolver;
+
+import java.math.BigDecimal;
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+import java.util.List;
+
+import static org.hamcrest.Matchers.contains;
+import static org.hamcrest.Matchers.hasSize;
+import static org.mockito.ArgumentMatchers.eq;
+import static org.mockito.BDDMockito.given;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+class MyPageControllerTest {
+
+    private MockMvc mvc;
+    private MyPageService service;
+    private User principal;
+    private PaymentService paymentService;
+
+    @BeforeEach
+    void setUp() {
+        service = Mockito.mock(MyPageService.class);
+        MyPageController controller = new MyPageController(service, paymentService);
+
+        HandlerMethodArgumentResolver forceUserResolver = new HandlerMethodArgumentResolver() {
+            @Override
+            public boolean supportsParameter(org.springframework.core.MethodParameter parameter) {
+                return parameter.hasParameterAnnotation(org.springframework.security.core.annotation.AuthenticationPrincipal.class)
+                        && parameter.getParameterType().isAssignableFrom(User.class);
+            }
+
+            @Override
+            public Object resolveArgument(org.springframework.core.MethodParameter parameter,
+                                          org.springframework.web.method.support.ModelAndViewContainer mavContainer,
+                                          org.springframework.web.context.request.NativeWebRequest webRequest,
+                                          org.springframework.web.bind.support.WebDataBinderFactory binderFactory) {
+                return principal;
+            }
+        };
+
+        mvc = MockMvcBuilders.standaloneSetup(controller)
+                .setCustomArgumentResolvers(forceUserResolver)
+                .build();
+
+        principal = Mockito.mock(User.class);
+        given(principal.getUserId()).willReturn(1L);
+        given(principal.getName()).willReturn("홍길동");
+        given(principal.getEmail()).willReturn("hong@example.com");
+    }
+
+    @Test
+    @DisplayName("GET /api/mypage/profile → 이름/이메일 반환")
+    void profile() throws Exception {
+        mvc.perform(get("/mypage/profile"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.name").value("홍길동"))
+                .andExpect(jsonPath("$.email").value("hong@example.com"));
+    }
+
+    @Test
+    @DisplayName("GET /api/mypage/orders → 주문 카드 페이지")
+    void orders() throws Exception {
+        OrderCardResponse card1 = OrderCardResponse.of(101L, LocalDateTime.of(2025, 1, 2, 10, 0), 30000.0);
+        card1.items().add(new OrderLine(11L, "도안 A", 1, 10000.0));
+        card1.items().add(new OrderLine(12L, "도안 B", 2, 20000.0));
+
+        var page = new PageImpl<>(List.of(card1), PageRequest.of(0, 3), 1);
+        given(service.getOrderCards(eq(1L), Mockito.<Pageable>any())).willReturn(page);
+
+        mvc.perform(get("/mypage/orders").param("page", "0").param("size", "3"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.page").value(0))
+                .andExpect(jsonPath("$.size").value(3))
+                .andExpect(jsonPath("$.totalElements").value(1))
+                .andExpect(jsonPath("$.content", hasSize(1)))
+                .andExpect(jsonPath("$.content[0].orderId").value(101))
+                .andExpect(jsonPath("$.content[0].items", hasSize(2)))
+                .andExpect(jsonPath("$.content[0].items[0].productTitle").value("도안 A"));
+    }
+
+    @Test
+    @DisplayName("GET /api/mypage/posts?query=키워드 → 내가 쓴 글 페이지")
+    void myPosts() throws Exception {
+        var dto = new MyPostListItemResponse(
+                501L, "제목1", "요약1", "thumb1.jpg", LocalDateTime.of(2025, 1, 3, 9, 0)
+        );
+        var page = new PageImpl<>(List.of(dto), PageRequest.of(0, 10), 1);
+        given(service.getMyPosts(eq(1L), eq("키워드"), Mockito.<Pageable>any())).willReturn(page);
+
+        mvc.perform(get("/mypage/posts")
+                        .param("query", "키워드")
+                        .param("page", "0")
+                        .param("size", "10"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.content[0].id").value(501))
+                .andExpect(jsonPath("$.content[0].title").value("제목1"))
+                .andExpect(jsonPath("$.page").value(0))
+                .andExpect(jsonPath("$.size").value(10));
+    }
+
+    @Test
+    @DisplayName("GET /api/mypage/comments?query=단어 → 내가 쓴 댓글 페이지")
+    void myComments() throws Exception {
+        var c1 = new MyCommentListItem(701L, 501L, LocalDate.of(2025, 1, 4), "내용 미리보기");
+        var page = new PageImpl<>(List.of(c1), PageRequest.of(0, 10), 1);
+        given(service.getMyComments(eq(1L), eq("단어"), Mockito.<Pageable>any())).willReturn(page);
+
+        mvc.perform(get("/mypage/comments")
+                        .param("query", "단어")
+                        .param("page", "0")
+                        .param("size", "10"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.content[0].commentId").value(701))
+                .andExpect(jsonPath("$.content[0].postId").value(501))
+                .andExpect(jsonPath("$.content[0].preview").value("내용 미리보기"));
+    }
+
+    @Test
+    @DisplayName("GET /api/mypage/favorites → 내가 찜한 상품 페이지")
+    void myFavorites() throws Exception {
+        var f1 = new FavoriteProductItem(9001L, "인기 도안", "t.jpg", 9900.0, 4.5, LocalDate.of(2025, 1, 5));
+        var page = new PageImpl<>(List.of(f1), PageRequest.of(0, 10), 1);
+        given(service.getMyFavorites(eq(1L), Mockito.<Pageable>any())).willReturn(page);
+
+        mvc.perform(get("/mypage/favorites")
+                        .param("page", "0")
+                        .param("size", "10"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.content[0].productId").value(9001))
+                .andExpect(jsonPath("$.content[0].productTitle").value("인기 도안"))
+                .andExpect(jsonPath("$.content[0].averageRating").value(4.5));
+    }
+
+    @Test
+    @DisplayName("GET /api/mypage/reviews → 내가 남긴 리뷰 페이지")
+    void myReviews() throws Exception {
+        var r1 = new ReviewListItem(
+                301L,
+                9001L,
+                "인기 도안",
+                "t.jpg",
+                5,
+                "아주 좋아요",
+                List.of("r1.jpg", "r2.jpg"),
+                LocalDate.of(2025, 1, 6),
+                LocalDate.of(2025, 1, 2)
+        );
+        var page = new PageImpl<>(List.of(r1), PageRequest.of(0, 10), 1);
+        given(service.getMyReviews(eq(1L), Mockito.<Pageable>any())).willReturn(page);
+
+        mvc.perform(get("/mypage/reviews")
+                        .param("page", "0")
+                        .param("size", "10"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.content[0].reviewId").value(301))
+                .andExpect(jsonPath("$.content[0].rating").value(5))
+                .andExpect(jsonPath("$.content[0].content").value("아주 좋아요"))
+                .andExpect(jsonPath("$.content[0].reviewImageUrls", hasSize(2)))
+                .andExpect(jsonPath("$.content[0].purchasedDate", contains(2025, 1, 2)));
+    }
+}
+
diff --git a/backend/src/test/java/com/mysite/knitly/domain/order/service/OrderServiceTest.java b/backend/src/test/java/com/mysite/knitly/domain/order/service/OrderServiceTest.java
new file mode 100644
index 0000000..7a77e27
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/order/service/OrderServiceTest.java
@@ -0,0 +1,261 @@
+package com.mysite.knitly.domain.order.service;
+
+import com.mysite.knitly.domain.design.entity.Design;
+import com.mysite.knitly.domain.design.entity.DesignState;
+import com.mysite.knitly.domain.design.repository.DesignRepository;
+import com.mysite.knitly.domain.order.dto.OrderCreateRequest;
+import com.mysite.knitly.domain.order.dto.OrderCreateResponse;
+import com.mysite.knitly.domain.order.repository.OrderRepository;
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+import com.mysite.knitly.domain.product.product.repository.ProductRepository;
+import com.mysite.knitly.domain.user.entity.Provider;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import jakarta.transaction.Transactional;
+import org.junit.jupiter.api.AfterEach;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import java.util.List;
+import java.util.concurrent.*;
+import java.util.concurrent.atomic.AtomicInteger;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+@SpringBootTest(properties = "spring.profiles.active=test")
+class OrderServiceTest {
+
+    private static final Logger log = LoggerFactory.getLogger(OrderServiceTest.class);
+
+    @Autowired
+    private OrderService orderService;
+
+    @Autowired
+    private ProductRepository productRepository;
+
+    @Autowired
+    private OrderRepository orderRepository;
+
+    @Autowired
+    private UserRepository userRepository;
+
+    @Autowired
+    private DesignRepository designRepository;
+
+    @Autowired
+    private OrderFacade orderFacade;
+
+    private Product testProduct;
+
+    private Product testProduct2;
+    private User testUser;
+
+    @BeforeEach
+    void setUp() {
+        orderRepository.deleteAll();
+        productRepository.deleteAll();
+        designRepository.deleteAll();
+        userRepository.deleteAll();
+
+        testUser = userRepository.save(
+                User.builder()
+                        .email("test@knitly.com")
+                        .name("concurrentUser")
+                        .socialId("concurrentSocialId")
+                        .provider(Provider.GOOGLE)
+                        .build()
+        );
+
+        Design testDesign = designRepository.save(
+                Design.builder()
+                        .user(testUser)
+                        .designName("하트 패턴")
+                        .pdfUrl("/files/2025/10/17/uuid_하트패턴.pdf")
+                        .gridData("[]")
+                        .designState(DesignState.ON_SALE)
+                        .build()
+        );
+
+        testProduct = productRepository.save(
+                Product.builder()
+                        .title("한정판 니트")
+                        .design(testDesign)
+                        .user(testUser)
+                        .description("한정판으로 제작된 특별한 니트입니다.")
+                        .sizeInfo("Free")
+                        .productCategory(ProductCategory.TOP)
+                        .price(10000.0)
+                        .purchaseCount(0)
+                        .likeCount(50)
+                        .stockQuantity(10)
+                        .isDeleted(false)
+                        .build()
+        );
+
+        Design testDesign2 = designRepository.save(
+                Design.builder()
+                        .user(testUser)
+                        .designName("별 패턴")
+                        .pdfUrl("/files/2025/10/17/uuid_별패턴.pdf")
+                        .gridData("[]")
+                        .designState(DesignState.ON_SALE)
+                        .build()
+        );
+
+        testProduct2 = productRepository.save(
+                Product.builder()
+                        .title("한정판 코스터")
+                        .design(testDesign2)
+                        .user(testUser)
+                        .description("한정판으로 제작된 특별한 코스터입니다.")
+                        .sizeInfo("Free")
+                        .productCategory(ProductCategory.ETC)
+                        .price(5000.0)
+                        .purchaseCount(0)
+                        .likeCount(50)
+                        .stockQuantity(3)
+                        .isDeleted(false)
+                        .build()
+        );
+    }
+
+    @Test
+    @DisplayName("동시에 100개의 주문 요청이 들어와도 실제 주문은 10개만 생성된다.")
+    void concurrent_order_creation_test() throws InterruptedException {
+        // given
+        int threadCount = 100;
+        ExecutorService executorService = Executors.newFixedThreadPool(32);
+        CountDownLatch latch = new CountDownLatch(threadCount);
+        AtomicInteger successCount = new AtomicInteger(0); // 성공/실패 추적용
+        AtomicInteger failCount = new AtomicInteger(0); // 실패 횟수도 추적
+
+        // when
+        for (int i = 0; i < threadCount; i++) {
+            executorService.submit(() -> {
+                try {
+                    OrderCreateRequest request = new OrderCreateRequest(
+                            List.of(testProduct.getProductId())
+                    );
+                    // Facade를 통해 주문 생성 로직 호출
+                    orderFacade.createOrderWithLock(testUser, request);
+                    successCount.incrementAndGet();
+                } catch (Exception e) {
+                    // 락 획득 실패, 재고 부족 등의 예외는 의도된 실패이므로 무시
+                    // 실패시 카운트 증가
+                    failCount.incrementAndGet();
+                    // 실패 로그는 DEBUG 레벨로 남겨서 평소엔 안 보이게 처리
+                    log.debug("Order failed as expected: {}", e.getMessage());
+                } finally {
+                    latch.countDown();
+                }
+            });
+        }
+
+        latch.await(10, TimeUnit.SECONDS); //시간 3으로 하면 무조건 실패하고, 10으로 하면 성공함. 3~10 사이의 값 넣어보면서 테스트 가능
+        executorService.shutdown();
+
+        // then
+        Product updatedProduct = productRepository.findById(testProduct.getProductId()).orElseThrow();
+        long dbOrderCount = orderRepository.count();
+
+        log.info("""
+                
+                ===========================================================
+                [Test Summary] : {}
+                -----------------------------------------------------------
+                - 총 요청 수 : {}
+                - 초기 재고  : {}
+                -----------------------------------------------------------
+                - 성공 (Atomic): {}
+                - 실패 (Atomic): {}
+                - DB에 생성된 주문 수: {}
+                - 남은 최종 재고: {}
+                ===========================================================
+                """,
+                "100 requests for 10 stocks",
+                threadCount,
+                10,
+                successCount.get(),
+                failCount.get(),
+                dbOrderCount,
+                updatedProduct.getStockQuantity()
+        );
+
+        // 검증: 재고는 0, DB에 저장된 주문은 10개, 성공 카운트도 10개
+        assertThat(updatedProduct.getStockQuantity()).isEqualTo(0);
+        assertThat(orderRepository.count()).isEqualTo(10);
+        assertThat(successCount.get()).isEqualTo(10);
+    }
+
+    @Test
+    @DisplayName("동시에 200개의 주문 요청이 들어와도 실제 주문은 3개만 생성된다.")
+    void concurrent_order_creation_test2() throws InterruptedException {
+        // given
+        int threadCount = 200;
+        ExecutorService executorService = Executors.newFixedThreadPool(32);
+        CountDownLatch latch = new CountDownLatch(threadCount);
+        AtomicInteger successCount = new AtomicInteger(0); // 성공/실패 추적용
+        AtomicInteger failCount = new AtomicInteger(0); // 실패 횟수도 추적
+
+        // when
+        for (int i = 0; i < threadCount; i++) {
+            executorService.submit(() -> {
+                try {
+                    OrderCreateRequest request = new OrderCreateRequest(
+                            List.of(testProduct2.getProductId())
+                    );
+                    // Facade를 통해 주문 생성 로직 호출
+                    orderFacade.createOrderWithLock(testUser, request);
+                    successCount.incrementAndGet();
+                } catch (Exception e) {
+                    // 락 획득 실패, 재고 부족 등의 예외는 의도된 실패이므로 무시
+                    // 실패시 카운트 증가
+                    failCount.incrementAndGet();
+                    log.debug("Order failed as expected: {}", e.getMessage());
+                } finally {
+                    latch.countDown();
+                }
+            });
+        }
+
+        latch.await(10, TimeUnit.SECONDS);
+        executorService.shutdown();
+
+        // then
+        Product updatedProduct = productRepository.findById(testProduct2.getProductId()).orElseThrow();
+        long dbOrderCount = orderRepository.count();
+
+        log.info("""
+                
+                ===========================================================
+                [Test Summary] : {}
+                -----------------------------------------------------------
+                - 총 요청 수 : {}
+                - 초기 재고  : {}
+                -----------------------------------------------------------
+                - 성공 (Atomic): {}
+                - 실패 (Atomic): {}
+                - DB에 생성된 주문 수: {}
+                - 남은 최종 재고: {}
+                ===========================================================
+                """,
+                "200 requests for 3 stocks",
+                threadCount,
+                3,
+                successCount.get(),
+                failCount.get(),
+                dbOrderCount,
+                updatedProduct.getStockQuantity()
+        );
+
+        // 검증: 재고는 0, DB에 저장된 주문은 3개, 성공 카운트도 3개
+        assertThat(updatedProduct.getStockQuantity()).isEqualTo(0);
+        assertThat(orderRepository.count()).isEqualTo(3);
+        assertThat(successCount.get()).isEqualTo(3);
+    }
+}
\ No newline at end of file
diff --git a/backend/src/test/java/com/mysite/knitly/domain/payment/PaymentServiceTest.java b/backend/src/test/java/com/mysite/knitly/domain/payment/PaymentServiceTest.java
new file mode 100644
index 0000000..1aab2f9
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/payment/PaymentServiceTest.java
@@ -0,0 +1,176 @@
+package com.mysite.knitly.domain.payment;
+
+import com.mysite.knitly.domain.order.entity.Order;
+import com.mysite.knitly.domain.order.repository.OrderRepository;
+import com.mysite.knitly.domain.payment.dto.PaymentCancelRequest;
+import com.mysite.knitly.domain.payment.dto.PaymentConfirmRequest;
+import com.mysite.knitly.domain.payment.dto.PaymentDetailResponse;
+import com.mysite.knitly.domain.payment.entity.Payment;
+import com.mysite.knitly.domain.payment.entity.PaymentMethod;
+import com.mysite.knitly.domain.payment.entity.PaymentStatus;
+import com.mysite.knitly.domain.payment.repository.PaymentRepository;
+import com.mysite.knitly.domain.payment.service.PaymentService;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InjectMocks;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+
+import java.time.LocalDateTime;
+import java.util.Optional;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+
+@ExtendWith(MockitoExtension.class)
+public class PaymentServiceTest {
+    @Mock
+    PaymentRepository paymentRepository;
+
+    @InjectMocks
+    PaymentService paymentService;
+
+    @Mock
+    OrderRepository orderRepository;
+
+    @Test
+    @DisplayName("마이페이지 결제내역 단건 조회 - 성공(본인 주문)")
+    void success() {
+        User buyer = User.builder().userId(10L).name("홍길동").build();
+
+        Payment payment = Payment.builder()
+                .paymentId(100L)
+                .buyer(buyer)
+                .paymentMethod(PaymentMethod.CARD)
+                .paymentStatus(PaymentStatus.DONE)
+                .totalAmount(15000L)
+                .requestedAt(LocalDateTime.now().minusMinutes(5))
+                .approvedAt(LocalDateTime.now().minusMinutes(4))
+                .tossPaymentKey("pk_123")
+                .tossOrderId("order-1")
+                .mid("MID001")
+                .build();
+
+        when(paymentRepository.findByOrder_OrderId(1L)).thenReturn(Optional.of(payment));
+
+        PaymentDetailResponse res = paymentService.getPaymentDetailByOrder(buyer, 1L);
+
+        assertThat(res.paymentId()).isEqualTo(100L);
+        assertThat(res.buyerId()).isEqualTo(10L);
+        assertThat(res.method()).isEqualTo(PaymentMethod.CARD);
+        assertThat(res.status()).isEqualTo(PaymentStatus.DONE);
+        verify(paymentRepository).findByOrder_OrderId(1L);
+    }
+
+    @Test
+    @DisplayName("마이페이지 결제내역 단건 조회 - 결제 없음")
+    void notFound() {
+        User buyer = User.builder().userId(10L).name("홍길동").build();
+
+        when(paymentRepository.findByOrder_OrderId(1L)).thenReturn(Optional.empty());
+
+        assertThatThrownBy(() -> paymentService.getPaymentDetailByOrder(buyer, 1L))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.PAYMENT_NOT_FOUND);
+    }
+
+    @Test
+    @DisplayName("마이페이지 결제내역 단건 조회 - 소유권 불일치(권한없음)")
+    void unauthorized() {
+        User buyer = User.builder().userId(10L).name("홍길동").build();
+        User other = User.builder().userId(20L).name("김땡떙").build();
+
+        Payment payment = Payment.builder()
+                .paymentId(100L)
+                .buyer(other) // 다른 사람 결제
+                .paymentMethod(PaymentMethod.CARD)
+                .paymentStatus(PaymentStatus.DONE)
+                .totalAmount(1000L)
+                .build();
+
+        when(paymentRepository.findByOrder_OrderId(1L)).thenReturn(Optional.of(payment));
+
+        assertThatThrownBy(() -> paymentService.getPaymentDetailByOrder(buyer, 1L))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.PAYMENT_UNAUTHORIZED_ACCESS); // 네 코드에 맞춰 사용
+    }
+
+    @Test
+    @DisplayName("결제 승인 실패 - 주문 없음")
+    void confirm_orderNotFound() {
+        PaymentConfirmRequest req = new PaymentConfirmRequest("pk1", "1", 1000L);
+        when(orderRepository.findById(1L)).thenReturn(Optional.empty());
+
+        assertThatThrownBy(() -> paymentService.confirmPayment(req))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.ORDER_NOT_FOUND);
+    }
+
+    @Test
+    @DisplayName("결제 승인 실패 - 금액 불일치")
+    void confirm_amountMismatch() {
+        PaymentConfirmRequest req = new PaymentConfirmRequest("pk1", "1", 2000L);
+        Order order = Order.builder().orderId(1L).totalPrice(10000.0).build();
+
+        when(orderRepository.findById(1L)).thenReturn(Optional.of(order));
+
+        assertThatThrownBy(() -> paymentService.confirmPayment(req))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.PAYMENT_AMOUNT_MISMATCH);
+    }
+
+    @Test
+    @DisplayName("결제 승인 실패 - 중복 결제")
+    void confirm_duplicate() {
+        PaymentConfirmRequest req = new PaymentConfirmRequest("pk1", "1", 1000L);
+        Order order = Order.builder().orderId(1L).totalPrice(1000.0).build();
+        Payment payment = Payment.builder().build();
+
+        when(orderRepository.findById(1L)).thenReturn(Optional.of(order));
+        when(paymentRepository.findByOrder_OrderId(1L)).thenReturn(Optional.of(payment));
+
+        assertThatThrownBy(() -> paymentService.confirmPayment(req))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.PAYMENT_ALREADY_EXISTS);
+    }
+
+    @Test
+    @DisplayName("결제 취소 실패 - 결제 없음")
+    void cancel_notFound() {
+        when(paymentRepository.findById(99L)).thenReturn(Optional.empty());
+
+        assertThatThrownBy(() -> paymentService.cancelPayment(99L, new PaymentCancelRequest("사유")))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.PAYMENT_NOT_FOUND);
+    }
+
+    @Test
+    @DisplayName("결제 취소 실패 - 취소 불가 상태")
+    void cancel_notCancelable() {
+        Payment p = Payment.builder()
+                .paymentId(1L)
+                .paymentMethod(PaymentMethod.CARD)
+                .paymentStatus(PaymentStatus.FAILED) // 취소 불가
+                .totalAmount(1000L)
+                .build();
+
+        when(paymentRepository.findById(1L)).thenReturn(Optional.of(p));
+
+        assertThatThrownBy(() -> paymentService.cancelPayment(1L, new PaymentCancelRequest("사유")))
+                .isInstanceOf(ServiceException.class)
+                .extracting("errorCode")
+                .isEqualTo(ErrorCode.PAYMENT_NOT_CANCELABLE);
+    }
+}
diff --git a/backend/src/test/java/com/mysite/knitly/domain/product/like/consumer/LikeEventConsumerTest.java b/backend/src/test/java/com/mysite/knitly/domain/product/like/consumer/LikeEventConsumerTest.java
new file mode 100644
index 0000000..06746ed
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/product/like/consumer/LikeEventConsumerTest.java
@@ -0,0 +1,97 @@
+package com.mysite.knitly.domain.product.like.consumer;
+
+import com.mysite.knitly.domain.product.like.dto.LikeEventRequest;
+import com.mysite.knitly.domain.product.like.entity.ProductLike;
+import com.mysite.knitly.domain.product.like.entity.ProductLikeId;
+import com.mysite.knitly.domain.product.like.repository.ProductLikeRepository;
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.repository.ProductRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.global.exception.ServiceException;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InjectMocks;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+
+import java.util.Optional;
+
+import static org.junit.jupiter.api.Assertions.assertThrows;
+import static org.mockito.Mockito.*;
+
+@ExtendWith(MockitoExtension.class)
+class LikeEventConsumerTest {
+
+    @Mock
+    private ProductLikeRepository productLikeRepository;
+    @Mock
+    private UserRepository userRepository;
+    @Mock
+    private ProductRepository productRepository;
+
+    @InjectMocks
+    private LikeEventConsumer likeEventConsumer;
+
+    @Test
+    @DisplayName("찜하기: 정상")
+    void handleLikeEvent_Success() {
+        LikeEventRequest request = new LikeEventRequest(3L, 1L);
+        User user = User.builder().userId(request.userId()).build();
+        Product product = Product.builder().productId(request.productId()).build();
+
+        when(userRepository.findById(request.userId())).thenReturn(Optional.of(user));
+        when(productRepository.findById(request.productId())).thenReturn(Optional.of(product));
+        when(productLikeRepository.existsById(any(ProductLikeId.class))).thenReturn(false);
+
+        likeEventConsumer.handleLikeEvent(request);
+
+        verify(productLikeRepository).save(any(ProductLike.class));
+    }
+
+    @Test
+    @DisplayName("찜하기: 이미 찜한 상품일 경우 예외 발생")
+    void handleLikeEvent_AlreadyExists_ThrowsException() {
+        LikeEventRequest request = new LikeEventRequest(3L, 1L);
+        User user = User.builder().userId(request.userId()).build();
+        Product product = Product.builder().productId(request.productId()).build();
+
+        when(userRepository.findById(request.userId())).thenReturn(Optional.of(user));
+        when(productRepository.findById(request.productId())).thenReturn(Optional.of(product));
+        when(productLikeRepository.existsById(any(ProductLikeId.class))).thenReturn(true);
+
+        assertThrows(ServiceException.class, () -> likeEventConsumer.handleLikeEvent(request));
+        verify(productLikeRepository, never()).save(any());
+    }
+
+    @Test
+    @DisplayName("찜 삭제: 정상")
+    void handleDislikeEvent_Success() {
+        LikeEventRequest request = new LikeEventRequest(3L, 1L);
+        ProductLikeId id = new ProductLikeId(request.userId(), request.productId());
+        ProductLike like = ProductLike.builder().build();
+
+        when(userRepository.existsById(request.userId())).thenReturn(true);
+        when(productRepository.existsById(request.productId())).thenReturn(true);
+        when(productLikeRepository.findById(id)).thenReturn(Optional.of(like));
+
+        likeEventConsumer.handleDislikeEvent(request);
+
+        verify(productLikeRepository).delete(like);
+    }
+
+    @Test
+    @DisplayName("찜 삭제: 삭제할 찜이 없을 경우 예외 발생")
+    void handleDislikeEvent_NotFound_ThrowsException() {
+        LikeEventRequest request = new LikeEventRequest(3L, 1L);
+        ProductLikeId id = new ProductLikeId(request.userId(), request.productId());
+
+        when(userRepository.existsById(request.userId())).thenReturn(true);
+        when(productRepository.existsById(request.productId())).thenReturn(true);
+        when(productLikeRepository.findById(id)).thenReturn(Optional.empty());
+
+        assertThrows(ServiceException.class, () -> likeEventConsumer.handleDislikeEvent(request));
+        verify(productLikeRepository, never()).delete(any());
+    }
+}
\ No newline at end of file
diff --git a/backend/src/test/java/com/mysite/knitly/domain/product/like/service/ProductLikeServiceTest.java b/backend/src/test/java/com/mysite/knitly/domain/product/like/service/ProductLikeServiceTest.java
new file mode 100644
index 0000000..98c637a
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/product/like/service/ProductLikeServiceTest.java
@@ -0,0 +1,67 @@
+package com.mysite.knitly.domain.product.like.service;
+
+import com.mysite.knitly.domain.product.like.dto.LikeEventRequest;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InjectMocks;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+import org.springframework.amqp.rabbit.core.RabbitTemplate;
+import org.springframework.data.redis.core.RedisTemplate;
+import org.springframework.data.redis.core.SetOperations;
+
+import static org.mockito.Mockito.*;
+
+@ExtendWith(MockitoExtension.class)
+class ProductLikeServiceTest {
+
+    @Mock
+    private RedisTemplate<String, String> redisTemplate;
+
+    @Mock
+    private RabbitTemplate rabbitTemplate;
+
+    @Mock
+    private SetOperations<String, String> setOperations;
+
+    @InjectMocks
+    private ProductLikeService productLikeService;
+
+    @BeforeEach
+    void setUp() {
+        when(redisTemplate.opsForSet()).thenReturn(setOperations);
+    }
+
+    @Test
+    @DisplayName("찜하기: Redis에 추가하고 RabbitMQ에 메시지 발행")
+    void addLike_ShouldAddToRedisAndPublishMessage() {
+        Long userId = 3L;
+        Long productId = 1L;
+        String redisKey = "likes:product:" + productId;
+        LikeEventRequest eventDto = new LikeEventRequest(userId, productId);
+
+        productLikeService.addLike(userId, productId);
+
+        verify(setOperations).add(redisKey, userId.toString());
+        verify(rabbitTemplate).convertAndSend("like.exchange", "like.add.routingkey", eventDto);
+    }
+
+    @Test
+    @DisplayName("찜 삭제: Redis에서 제거하고 RabbitMQ에 메시지 발행")
+    void deleteLike_ShouldRemoveFromRedisAndPublishMessage() {
+        Long userId = 3L;
+        Long productId = 1L;
+        String redisKey = "likes:product:" + productId;
+        LikeEventRequest eventDto = new LikeEventRequest(userId, productId);
+
+        when(redisTemplate.opsForSet()).thenReturn(setOperations);
+        when(setOperations.isMember(redisKey, userId.toString())).thenReturn(true);
+
+        productLikeService.deleteLike(userId, productId);
+
+        verify(setOperations).remove(redisKey, userId.toString());
+        verify(rabbitTemplate).convertAndSend("like.exchange", "like.delete.routingkey", eventDto);
+    }
+}
\ No newline at end of file
diff --git a/backend/src/test/java/com/mysite/knitly/domain/product/review/controller/ReviewControllerTest.java b/backend/src/test/java/com/mysite/knitly/domain/product/review/controller/ReviewControllerTest.java
new file mode 100644
index 0000000..51bf54b
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/product/review/controller/ReviewControllerTest.java
@@ -0,0 +1,171 @@
+package com.mysite.knitly.domain.product.review.controller;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.mysite.knitly.domain.design.entity.Design;
+import com.mysite.knitly.domain.design.entity.DesignState;
+import com.mysite.knitly.domain.design.repository.DesignRepository;
+import com.mysite.knitly.domain.product.product.entity.ProductCategory;
+import com.mysite.knitly.domain.user.entity.Provider;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.repository.ProductRepository;
+import com.mysite.knitly.domain.product.review.entity.Review;
+import com.mysite.knitly.domain.product.review.repository.ReviewRepository;
+import com.mysite.knitly.utility.jwt.JwtProvider;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.http.MediaType;
+import org.springframework.test.web.servlet.MockMvc;
+import org.springframework.test.web.servlet.ResultActions;
+import org.springframework.transaction.annotation.Transactional;
+
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.*;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;
+
+@SpringBootTest
+@AutoConfigureMockMvc
+@Transactional // 각 테스트 후 DB 롤백
+class ReviewControllerTest {
+
+    @Autowired
+    private MockMvc mockMvc;
+
+    @Autowired
+    private ObjectMapper objectMapper;
+
+    @Autowired
+    private UserRepository userRepository;
+    @Autowired
+    private ProductRepository productRepository;
+    @Autowired
+    private DesignRepository designRepository;
+    @Autowired
+    private ReviewRepository reviewRepository;
+    @Autowired
+    private JwtProvider jwtProvider;
+
+    private User testUser;
+    private User otherUser;
+    private Product testProduct;
+    private Design testDesign;
+    private String testUserToken;
+    private String otherUserToken;
+
+    @BeforeEach
+    void setUp() {
+        // 1. 테스트용 User 생성
+        testUser = userRepository.save(User.builder()
+                .socialId("google_123456789")
+                .email("test@test.com")
+                .name("testUser")
+                .provider(Provider.GOOGLE)
+                .build());
+
+        otherUser = userRepository.save(User.builder()
+                .socialId("google_987654321")
+                .email("other@test.com")
+                .name("otherUser")
+                .provider(Provider.GOOGLE)
+                .build());
+
+        // 2. 테스트용 Design 생성 (User에 의존)
+        testDesign = designRepository.save(Design.builder()
+                .user(testUser)
+                .designName("테스트 도안")
+                .designState(DesignState.BEFORE_SALE)
+                .gridData("{}")
+                .build());
+
+        // 3. 테스트용 Product 생성 (User와 Design에 의존)
+        testProduct = productRepository.save(Product.builder()
+                .title("테스트 상품")
+                .description("이것은 테스트 상품입니다.")
+                .productCategory(ProductCategory.TOP)
+                .sizeInfo("Free")
+                .price(10000.0)
+                .user(testUser)
+                .purchaseCount(0)
+                .isDeleted(false)
+                .stockQuantity(100)
+                .likeCount(0)
+                .design(testDesign)
+                .build());
+
+        // 4. 각 유저에 대한 JWT 토큰 생성
+        testUserToken = jwtProvider.createAccessToken(testUser.getUserId());
+        otherUserToken = jwtProvider.createAccessToken(otherUser.getUserId());
+    }
+
+    @Test
+    @DisplayName("리뷰 등록: 성공")
+    void createReview_Success() throws Exception {
+        String content = "리뷰 내용입니다.";
+        int rating = 5;
+
+        ResultActions actions = mockMvc.perform(post("/products/" + testProduct.getProductId() + "/reviews")
+                .header("Authorization", "Bearer " + testUserToken)
+                .contentType(MediaType.MULTIPART_FORM_DATA)
+                .param("content", content)
+                .param("rating", String.valueOf(rating)));
+
+        actions
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.content").value(content))
+                .andExpect(jsonPath("$.rating").value(rating))
+                .andExpect(jsonPath("$.userName").value(testUser.getName()))
+                .andExpect(jsonPath("$.reviewId").isNumber())
+                .andExpect(jsonPath("$.createdAt").exists())
+                .andExpect(jsonPath("$.reviewImageUrls").isArray());
+    }
+
+    @Test
+    @DisplayName("리뷰 등록: 인증 실패 (토큰 없음)")
+    void createReview_Fail_NoToken() throws Exception {
+        ResultActions actions = mockMvc.perform(post("/products/" + testProduct.getProductId() + "/reviews")
+                .contentType(MediaType.MULTIPART_FORM_DATA)
+                .param("content", "내용")
+                .param("rating", "5"));
+
+        actions.andExpect(status().isFound()); // 302 Redirect
+    }
+
+    @Test
+    @DisplayName("리뷰 삭제: 성공")
+    void deleteReview_Success() throws Exception {
+        // testUser가 작성한 리뷰를 미리 저장
+        Review review = reviewRepository.save(Review.builder()
+                .user(testUser)
+                .product(testProduct)
+                .content("삭제될 리뷰")
+                .rating(5)
+                .build());
+
+        ResultActions actions = mockMvc.perform(delete("/reviews/" + review.getReviewId())
+                .header("Authorization", "Bearer " + testUserToken));
+
+        actions.andExpect(status().isNoContent());
+    }
+
+    @Test
+    @DisplayName("리뷰 삭제: 인가 실패 (권한 없는 사용자)")
+    void deleteReview_Fail_NotOwner() throws Exception {
+        // testUser가 작성한 리뷰
+        Review review = reviewRepository.save(Review.builder()
+                .user(testUser)
+                .product(testProduct)
+                .content("삭제될 리뷰")
+                .rating(5)
+                .build());
+
+        // otherUser의 토큰으로 testUser의 리뷰 삭제 시도
+        ResultActions actions = mockMvc.perform(delete("/reviews/" + review.getReviewId())
+                .header("Authorization", "Bearer " + otherUserToken));
+
+        actions.andExpect(status().isForbidden());
+    }
+}
\ No newline at end of file
diff --git a/backend/src/test/java/com/mysite/knitly/domain/product/review/service/ReviewServiceTest.java b/backend/src/test/java/com/mysite/knitly/domain/product/review/service/ReviewServiceTest.java
new file mode 100644
index 0000000..a925703
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/product/review/service/ReviewServiceTest.java
@@ -0,0 +1,237 @@
+package com.mysite.knitly.domain.product.review.service;
+
+import com.mysite.knitly.domain.product.product.entity.Product;
+import com.mysite.knitly.domain.product.product.repository.ProductRepository;
+import com.mysite.knitly.domain.product.review.dto.ReviewCreateRequest;
+import com.mysite.knitly.domain.product.review.dto.ReviewDeleteRequest;
+import com.mysite.knitly.domain.product.review.dto.ReviewListResponse;
+import com.mysite.knitly.domain.product.review.entity.Review;
+import com.mysite.knitly.domain.product.review.entity.ReviewImage;
+import com.mysite.knitly.domain.product.review.repository.ReviewRepository;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.domain.user.repository.UserRepository;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.io.TempDir;
+import org.mockito.InjectMocks;
+import org.mockito.Mock;
+import org.mockito.MockitoAnnotations;
+import org.springframework.data.domain.Pageable;
+import org.springframework.mock.web.MockMultipartFile;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.nio.file.Path;
+import java.util.Collections;
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+import static org.mockito.ArgumentMatchers.any;
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.junit.jupiter.api.Assertions.assertThrows;
+import static org.mockito.ArgumentMatchers.eq;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+
+class ReviewServiceTest {
+
+    @Mock
+    private ReviewRepository reviewRepository;
+
+    @Mock
+    private ProductRepository productRepository;
+
+    @Mock
+    private UserRepository userRepository;
+
+    @InjectMocks
+    private ReviewService reviewService;
+
+    @TempDir
+    Path tempDir;
+
+    @BeforeEach
+    void setUp() {
+        MockitoAnnotations.openMocks(this);
+
+        // @TempDir을 사용하도록 uploadDir 설정 변경
+        reviewService.uploadDir = tempDir.toString();
+        reviewService.urlPrefix = "/resources/static/review/";
+    }
+
+//    @Test
+//    @DisplayName("리뷰 등록: 정상")
+//    void createReview_ValidInput_ShouldReturnResponse() {
+//        Long productId = 1L;
+//        Long userId = 3L;
+//        ReviewCreateRequest request = new ReviewCreateRequest((int) 5, "좋아요", Collections.emptyList());
+//
+//        User user = User.builder().userId(userId).name("홍길동").build();
+//        Product product = Product.builder().productId(productId).build();
+//
+//        when(userRepository.findById(userId)).thenReturn(Optional.of(user));
+//        when(productRepository.findById(productId)).thenReturn(Optional.of(product));
+//        when(reviewRepository.save(any(Review.class))).thenAnswer(invocation -> {
+//            Review reviewToSave = invocation.getArgument(0);
+//            return Review.builder()
+//                    .reviewId(1L)
+//                    .user(reviewToSave.getUser())
+//                    .product(reviewToSave.getProduct())
+//                    .rating(reviewToSave.getRating())
+//                    .content(reviewToSave.getContent())
+//                    .build();
+//        });
+//
+//        ReviewListResponse response = reviewService.createReview(productId, user, request);
+//
+//        assertThat(response).isNotNull();
+//        assertThat(response.reviewId()).isEqualTo(1L);
+//        assertThat(response.content()).isEqualTo("좋아요");
+//        assertThat(response.userName()).isEqualTo("홍길동");
+//        verify(reviewRepository).save(any(Review.class));
+//    }
+
+    @Test
+    @DisplayName("리뷰 삭제: 정상")
+    void deleteReview_ValidUser_ShouldSetDeleted() {
+        Long userId = 3L;
+        Long reviewId = 1L;
+
+        User user = User.builder().userId(userId).build();
+        Review review = Review.builder().reviewId(reviewId).user(user).isDeleted(false).build();
+
+        when(reviewRepository.findById(reviewId)).thenReturn(Optional.of(review));
+
+        reviewService.deleteReview(reviewId, user);
+
+        assertThat(review.getIsDeleted()).isTrue();
+    }
+
+    @Test
+    @DisplayName("리뷰 삭제: 권한 없는 유저가 요청시 실패")
+    void deleteReview_NotOwner_ShouldThrowException() {
+        Long requesterId = 3L;
+        Long ownerId = 9L;
+        Long reviewId = 1L;
+
+        User owner = User.builder().userId(ownerId).build();
+        Review review = Review.builder().reviewId(reviewId).user(owner).build();
+        User requester = User.builder().userId(requesterId).build();
+
+        when(reviewRepository.findById(reviewId)).thenReturn(Optional.of(review));
+
+        ServiceException ex = assertThrows(ServiceException.class,
+                () -> reviewService.deleteReview(reviewId, requester));
+
+        assertThat(ex.getErrorCode()).isEqualTo(ErrorCode.REVIEW_NOT_AUTHORIZED);
+    }
+
+//    @Test
+//    @DisplayName("리뷰 목록 조회: 삭제되지 않은 리뷰만 반환")
+//    void getReviewsByProduct_ShouldReturnOnlyNonDeletedReviews() {
+//        Long productId = 1L;
+//        Long userId = 3L;
+//        User user = User.builder().userId(userId).name("사용자1").build();
+//
+//        Review review1 = Review.builder()
+//                .reviewId(1L)
+//                .content("좋아요")
+//                .rating(5)
+//                .user(user)
+//                .product(Product.builder().productId(productId).build())
+//                .isDeleted(false)
+//                .build();
+//
+//        when(reviewRepository.findByProduct_ProductIdAndIsDeletedFalse(eq(productId), any(Pageable.class)))
+//                .thenReturn(List.of(review1));
+//
+//        List<ReviewListResponse> responses = reviewService.getReviewsByProduct(productId, 0, 10);
+//
+//        assertThat(responses).hasSize(1);
+//        assertThat(responses.get(0).reviewId()).isEqualTo(1L);
+//        assertThat(responses.get(0).content()).isEqualTo("좋아요");
+//    }
+
+//    @Test
+//    @DisplayName("리뷰 등록: 이미지 URL까지 포함해서 ReviewListResponse 반환")
+//    void createReview_WithImages_ShouldReturnResponseWithUrls() throws Exception {
+//        Long productId = 1L;
+//        Long userId = 3L;
+//
+//        MultipartFile mockFile = new MockMultipartFile("file", "image.jpg", "image/jpeg", new byte[]{1, 2, 3});
+//        ReviewCreateRequest request = new ReviewCreateRequest(5, "이미지 리뷰", List.of(mockFile));
+//
+//        User user = User.builder().userId(userId).name("홍길동").build();
+//        Product product = Product.builder().productId(productId).build();
+//
+//        when(userRepository.findById(userId)).thenReturn(Optional.of(user));
+//        when(productRepository.findById(productId)).thenReturn(Optional.of(product));
+//        when(reviewRepository.save(any(Review.class))).thenAnswer(invocation -> invocation.getArgument(0));
+//
+//        ReviewListResponse response = reviewService.createReview(productId, user, request);
+//
+//        assertThat(response).isNotNull();
+//        assertThat(response.content()).isEqualTo("이미지 리뷰");
+//        assertThat(response.reviewImageUrls()).hasSize(1);
+//        assertThat(response.reviewImageUrls().get(0))
+//                .startsWith("/resources/static/review/")
+//                .contains("image.jpg");
+//    }
+
+//    @Test
+//    @DisplayName("리뷰 목록 조회: 삭제되지 않은 리뷰와 이미지 URL 반환")
+//    void getReviewsByProduct_ShouldReturnOnlyNonDeletedReviewsWithImages() {
+//        Long productId = 1L;
+//        Long userId = 3L;
+//        User user = User.builder().userId(userId).name("홍길동").build();
+//
+//        Review review = Review.builder()
+//                .reviewId(1L)
+//                .content("좋아요")
+//                .rating(5)
+//                .user(user)
+//                .isDeleted(false)
+//                .build();
+//
+//        ReviewImage image1 = ReviewImage.builder().reviewImageUrl("/static/review/img1.jpg").build();
+//        ReviewImage image2 = ReviewImage.builder().reviewImageUrl("/static/review/img2.png").build();
+//        review.addReviewImages(List.of(image1, image2));
+//
+//        when(reviewRepository.findByProduct_ProductIdAndIsDeletedFalse(eq(productId), any(Pageable.class)))
+//                .thenReturn(List.of(review));
+//        // when
+//        List<ReviewListResponse> responses = reviewService.getReviewsByProduct(productId, 0, 10);
+//
+//        // then
+//        assertThat(responses).hasSize(1);
+//        ReviewListResponse r = responses.get(0);
+//        assertThat(r.reviewId()).isEqualTo(1L);
+//
+//        assertThat(r.reviewImageUrls())
+//                .containsExactly("/static/review/img1.jpg", "/static/review/img2.png");
+//    }
+
+    @Test
+    @DisplayName("리뷰 등록: 지원하지 않는 이미지 형식")
+    void createReview_InvalidImageFormat_ShouldThrowException() throws Exception {
+        Long productId = 1L;
+        Long userId = 3L;
+
+        MultipartFile invalidFile = new MockMultipartFile("file", "document.txt", "text/plain", new byte[]{1, 2, 3});
+        ReviewCreateRequest request = new ReviewCreateRequest(5, "좋아요", List.of(invalidFile));
+
+        User user = User.builder().userId(userId).name("홍길동").build();
+        Product product = Product.builder().productId(productId).build();
+
+        when(userRepository.findById(userId)).thenReturn(Optional.of(user));
+        when(productRepository.findById(productId)).thenReturn(Optional.of(product));
+
+        ServiceException ex = assertThrows(ServiceException.class,
+                () -> reviewService.createReview(productId, user, request));
+
+        assertThat(ex.getErrorCode()).isEqualTo(ErrorCode.IMAGE_FORMAT_NOT_SUPPORTED);
+    }
+}
diff --git a/backend/src/test/java/com/mysite/knitly/domain/product/service/ProductServiceTest.java b/backend/src/test/java/com/mysite/knitly/domain/product/service/ProductServiceTest.java
new file mode 100644
index 0000000..c53246f
--- /dev/null
+++ b/backend/src/test/java/com/mysite/knitly/domain/product/service/ProductServiceTest.java
@@ -0,0 +1,437 @@
+package com.mysite.knitly.domain.product.service;
+
+import com.mysite.knitly.domain.design.entity.Design;
+import com.mysite.knitly.domain.design.entity.DesignState;
+import com.mysite.knitly.domain.design.repository.DesignRepository;
+import com.mysite.knitly.domain.product.product.dto.ProductDetailResponse;
+import com.mysite.knitly.domain.product.product.dto.ProductListResponse;
+import com.mysite.knitly.domain.product.product.dto.ProductModifyRequest;
+import com.mysite.knitly.domain.product.product.dto.ProductRegisterRequest;
+import com.mysite.knitly.domain.product.product.entity.*;
+import com.mysite.knitly.domain.product.product.repository.ProductRepository;
+import com.mysite.knitly.domain.product.product.service.ProductService;
+import com.mysite.knitly.domain.product.product.service.RedisProductService;
+import com.mysite.knitly.domain.user.entity.User;
+import com.mysite.knitly.global.exception.ErrorCode;
+import com.mysite.knitly.global.exception.ServiceException;
+import com.mysite.knitly.global.util.FileStorageService;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InjectMocks;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+import org.springframework.data.domain.*;
+import org.springframework.mock.web.MockMultipartFile;
+
+import java.time.LocalDateTime;
+import java.util.*;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.junit.jupiter.api.Assertions.assertThrows;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.eq;
+import static org.mockito.BDDMockito.given;
+import static org.mockito.Mockito.*;
+
+@ExtendWith(MockitoExtension.class)
+class ProductServiceTest {
+
+    @Mock
+    private ProductRepository productRepository;
+
+    @Mock
+    private RedisProductService redisProductService;
+
+    @Mock
+    private DesignRepository designRepository;
+
+    @Mock
+    private FileStorageService fileStorageService;
+    @InjectMocks
+    private ProductService productService;
+
+    private User seller;
+    private Design design;
+    private Product product1;
+    private Product product2;
+    private Product product3;
+    private Pageable pageable;
+
+    @BeforeEach
+    void setUp() {
+        pageable = PageRequest.of(0, 20, Sort.by("createdAt").descending());
+
+        product1 = Product.builder()
+                .productId(1L)
+                .title("상의 패턴 1")
+                .productCategory(ProductCategory.TOP)
+                .price(10000.0)
+                .purchaseCount(100)
+                .likeCount(50)
+                .isDeleted(false)
+                .build();
+
+        product2 = Product.builder()
+                .productId(2L)
+                .title("무료 패턴")
+                .productCategory(ProductCategory.BOTTOM)
+                .price(0.0)
+                .purchaseCount(200)
+                .likeCount(80)
+                .isDeleted(false)
+                .build();
+
+        product3 = Product.builder()
+                .productId(3L)
+                .title("한정판매 패턴")
+                .productCategory(ProductCategory.OUTER)
+                .price(15000.0)
+                .stockQuantity(10)
+                .purchaseCount(150)
+                .likeCount(60)
+                .isDeleted(false)
+                .build();
+
+        seller = User.builder()
+                .userId(1L)
+                .build();
+
+        design = Design.builder()
+                .designId(1L)
+                .user(seller)
+                .designState(DesignState.BEFORE_SALE)
+                .build();
+    }
+
+//    @Test
+//    @DisplayName("전체 상품 조회 - 최신순")
+//    void getProducts_All_Latest() {
+//        Page<Product> productPage = new PageImpl<>(Arrays.asList(product1, product2, product3));
+//        given(productRepository.findByIsDeletedFalse(any(Pageable.class)))
+//                .willReturn(productPage);
+//
+//        Page<ProductListResponse> result = productService.getProducts(
+//                null, ProductFilterType.ALL, ProductSortType.LATEST, pageable);
+//
+//        assertThat(result.getContent()).hasSize(3);
+//        assertThat(result.getTotalElements()).isEqualTo(3);
+//        verify(productRepository).findByIsDeletedFalse(any(Pageable.class));
+//    }
+
+//    @Test
+//    @DisplayName("카테고리별 조회 - 상의만")
+//    void getProducts_Category_Top() {
+//        Page<Product> productPage = new PageImpl<>(List.of(product1));
+//        given(productRepository.findByProductCategoryAndIsDeletedFalse(
+//                eq(ProductCategory.TOP), any(Pageable.class)))
+//                .willReturn(productPage);
+//
+//        Page<ProductListResponse> result = productService.getProducts(
+//                ProductCategory.TOP, ProductFilterType.ALL, ProductSortType.LATEST, pageable);
+//
+//        assertThat(result.getContent()).hasSize(1);
+//        assertThat(result.getContent().get(0).productCategory()).isEqualTo(ProductCategory.TOP);
+//        verify(productRepository).findByProductCategoryAndIsDeletedFalse(
+//                eq(ProductCategory.TOP), any(Pageable.class));
+//    }
+
+//    @Test
+//    @DisplayName("무료 상품만 조회")
+//    void getProducts_Free() {
+//        Page<Product> productPage = new PageImpl<>(List.of(product2));
+//        given(productRepository.findByPriceAndIsDeletedFalse(eq(0.0), any(Pageable.class)))
+//                .willReturn(productPage);
+//
+//        Page<ProductListResponse> result = productService.getProducts(
+//                null, ProductFilterType.FREE, ProductSortType.LATEST, pageable);
+//
+//        assertThat(result.getContent()).hasSize(1);
+//        assertThat(result.getContent().get(0).price()).isEqualTo(0.0);
+//        assertThat(result.getContent().get(0).isFree()).isTrue();
+//        verify(productRepository).findByPriceAndIsDeletedFalse(eq(0.0), any(Pageable.class));
+//    }
+
+//    @Test
+//    @DisplayName("한정판매 상품만 조회")
+//    void getProducts_Limited() {
+//        Page<Product> productPage = new PageImpl<>(List.of(product3));
+//        given(productRepository.findByStockQuantityIsNotNullAndIsDeletedFalse(any(Pageable.class)))
+//                .willReturn(productPage);
+//
+//        Page<ProductListResponse> result = productService.getProducts(
+//                null, ProductFilterType.LIMITED, ProductSortType.LATEST, pageable);
+//
+//        assertThat(result.getContent()).hasSize(1);
+//        assertThat(result.getContent().get(0).stockQuantity()).isNotNull();
+//        assertThat(result.getContent().get(0).isLimited()).isTrue();
+//        verify(productRepository).findByStockQuantityIsNotNullAndIsDeletedFalse(any(Pageable.class));
+//    }
+
+//    @Test
+//    @DisplayName("인기순 조회 - Redis 데이터 있음")
+//    void getProducts_Popular_WithRedis() {
+//        List<Long> popularIds = Arrays.asList(2L, 1L, 3L); // 인기순
+//        given(redisProductService.getTopNPopularProducts(1000)).willReturn(popularIds);
+//        given(productRepository.findByProductIdInAndIsDeletedFalse(popularIds))
+//                .willReturn(Arrays.asList(product2, product1, product3));
+//
+//        Page<ProductListResponse> result = productService.getProducts(
+//                null, ProductFilterType.ALL, ProductSortType.POPULAR, pageable);
+//
+//        assertThat(result.getContent()).hasSize(3);
+//        assertThat(result.getContent().get(0).productId()).isEqualTo(2L); // 가장 인기있는 상품
+//        verify(redisProductService).getTopNPopularProducts(1000);
+//    }
+
+
+//    @Test
+//    @DisplayName("가격 낮은순 정렬")
+//    void getProducts_SortByPrice_Asc() {
+//        Page<Product> productPage = new PageImpl<>(Arrays.asList(product2, product1, product3));
+//        given(productRepository.findByIsDeletedFalse(any(Pageable.class)))
+//                .willReturn(productPage);
+//
+//        Page<ProductListResponse> result = productService.getProducts(
+//                null, ProductFilterType.ALL, ProductSortType.PRICE_ASC, pageable);
+//
+//        assertThat(result.getContent()).hasSize(3);
+//        verify(productRepository).findByIsDeletedFalse(any(Pageable.class));
+//    }
+
+//    @Test
+//    @DisplayName("filter=FREE이면 카테고리 무시하고 무료 전체에서 조회")
+//    void freeFilter_ignoresCategory() {
+//        Pageable pageable = PageRequest.of(0, 20);
+//        // popular 분기 안 타는 케이스로 최신 정렬 가정
+//        given(productRepository.findByPriceAndIsDeletedFalse(eq(0.0), any(Pageable.class)))
+//                .willReturn(new PageImpl<>(List.of(product2))); // product2: price 0.0
+//
+//        Page<ProductListResponse> result = productService.getProducts(
+//                ProductCategory.TOP, ProductFilterType.FREE, ProductSortType.LATEST, pageable);
+//
+//        assertThat(result.getContent()).hasSize(1);
+//        assertThat(result.getContent().get(0).isFree()).isTrue();
+//        // TOP로 제한되지 않음을 간접 확인(리포 호출 검증)
+//        verify(productRepository).findByPriceAndIsDeletedFalse(eq(0.0), any(Pageable.class));
+//    }
+
+
+    @Test
+    @DisplayName("상품 등록 성공 - 이미지 포함")
+    void registerProduct_Success_WithImages() {
+        // given
+        MockMultipartFile image1 = new MockMultipartFile("images", "image1.jpg", "image/jpeg", "image1_content".getBytes());
+        ProductRegisterRequest request = new ProductRegisterRequest("새 상품", "설명", ProductCategory.TOP, "M", 10000.0, List.of(image1), 10);
+
+        given(designRepository.findById(1L)).willReturn(Optional.of(design));
+        given(productRepository.save(any(Product.class))).willAnswer(invocation -> {
+            Product productToSave = invocation.getArgument(0);
+            return Product.builder()
+                    .productId(1L) // 테스트용 임의 ID
+                    .user(productToSave.getUser())
+                    .design(productToSave.getDesign())
+                    .title(productToSave.getTitle())
+                    .createdAt(LocalDateTime.now())
+                    .productImages(productToSave.getProductImages())
+                    .build();
+        });
+        given(fileStorageService.storeFile(any(MockMultipartFile.class), eq("product"))).willReturn("/static/product/mock-image.jpg");
+
+        // when
+        productService.registerProduct(seller, 1L, request);
+
+        // then
+        verify(designRepository).findById(1L);
+        verify(productRepository).save(any(Product.class));
+        verify(fileStorageService, times(1)).storeFile(any(MockMultipartFile.class), eq("product"));
+        assertThat(design.getDesignState()).isEqualTo(DesignState.ON_SALE); // Design 상태 변경 확인
+    }
+
+    @Test
+    @DisplayName("상품 등록 실패(예외) - 이미 판매중인 도안으로 등록 시도")
+    void registerProduct_Fail_DesignAlreadyOnSale() {
+        // given
+        design.startSale(); // 도안 상태를 ON_SALE으로 미리 변경
+        ProductRegisterRequest request = new ProductRegisterRequest("새 상품", "설명", ProductCategory.TOP, "M", 10000.0, Collections.emptyList(), 10);
+
+        given(designRepository.findById(1L)).willReturn(Optional.of(design));
+
+        // when & then
+        ServiceException exception = assertThrows(ServiceException.class, () -> {
+            productService.registerProduct(seller, 1L, request);
+        });
+
+        assertThat(exception.getErrorCode()).isEqualTo(ErrorCode.DESIGN_ALREADY_ON_SALE);
+    }
+
+    @Test
+    @DisplayName("상품 수정 성공 - 이미지 교체")
+    void modifyProduct_Success_ImageUpdate() {
+        // given
+        Product existingProduct = spy(Product.builder()
+                .productId(1L)
+                .user(seller)
+                .isDeleted(false)
+                .productImages(new ArrayList<>(List.of(ProductImage.builder().productImageUrl("/static/product/old-image.jpg").build())))
+                .build());
+
+        MockMultipartFile newImage = new MockMultipartFile("images", "new.jpg", "image/jpeg", "new_content".getBytes());
+        ProductModifyRequest request = new ProductModifyRequest("수정된 설명", ProductCategory.BOTTOM, "L", List.of(newImage), 20);
+
+        given(productRepository.findByIdWithUser(1L)).willReturn(Optional.of(existingProduct));
+        given(fileStorageService.storeFile(any(MockMultipartFile.class), eq("product"))).willReturn("/static/product/new-image.jpg");
+
+        // when
+        productService.modifyProduct(seller, 1L, request);
+
+        // then
+        verify(existingProduct).update("수정된 설명", ProductCategory.BOTTOM, "L", 20); // 정보 업데이트 확인
+        verify(fileStorageService).storeFile(any(MockMultipartFile.class), eq("product")); // 새 파일 저장 확인
+        verify(fileStorageService).deleteFile("/static/product/old-image.jpg"); // 기존 파일 삭제 확인
+    }
+
+    @Test
+    @DisplayName("상품 수정 실패(예외) - 다른 사람의 상품 수정 시도")
+    void modifyProduct_Fail_Unauthorized() {
+        // given
+        User attacker = User.builder().userId(999L).build();
+        Product targetProduct = Product.builder().productId(1L).user(seller).isDeleted(false).build();
+        ProductModifyRequest request = new ProductModifyRequest("해킹", ProductCategory.ETC, "S", List.of(), 0);
+
+        given(productRepository.findByIdWithUser(1L)).willReturn(Optional.of(targetProduct));
+
+        // when & then
+        ServiceException exception = assertThrows(ServiceException.class, () -> {
+            productService.modifyProduct(attacker, 1L, request);
+        });
+        assertThat(exception.getErrorCode()).isEqualTo(ErrorCode.PRODUCT_MODIFY_UNAUTHORIZED);
+    }
+
+    @Test
+    @DisplayName("소프트 삭제 성공")
+    void deleteProduct_Success() {
+        // given
+        Design designToStop = spy(design);
+        designToStop.startSale(); // ON_SALE 상태로 변경
+        Product productToDelete = spy(Product.builder().productId(1L).user(seller).design(designToStop).isDeleted(false).build());
+
+        given(productRepository.findByIdWithUser(1L)).willReturn(Optional.of(productToDelete));
+
+        // when
+        productService.deleteProduct(seller, 1L);
+
+        // then
+        verify(productToDelete).softDelete(); // Product.isDeleted = true 확인
+        verify(designToStop).stopSale(); // Design.designState = STOPPED 확인
+    }
+
+    @Test
+    @DisplayName("재판매 성공")
+    void relistProduct_Success() {
+        // given
+        Design designToRelist = spy(design);
+        designToRelist.startSale();
+        designToRelist.stopSale(); // STOPPED 상태로 변경
+        Product productToRelist = spy(Product.builder().productId(1L).user(seller).design(designToRelist).isDeleted(true).build());
+
+        given(productRepository.findByIdWithUser(1L)).willReturn(Optional.of(productToRelist));
+
+        // when
+        productService.relistProduct(seller, 1L);
+
+        // then
+        verify(productToRelist).relist(); // Product.isDeleted = false 확인
+        verify(designToRelist).relist(); // Design.designState = ON_SALE 확인
+    }
+
+    @Test
+    @DisplayName("재판매 실패(예외) - 이미 판매 중인 상품을 재판매 시도")
+    void relistProduct_Fail_AlreadyOnSale() {
+        // given
+        Product productOnSale = Product.builder().productId(1L).user(seller).isDeleted(false).build();
+
+        given(productRepository.findByIdWithUser(1L)).willReturn(Optional.of(productOnSale));
+
+        // when & then
+        // Product.relist() 내부에서 던지는 예외를 검증
+        assertThrows(ServiceException.class, () -> {
+            productService.relistProduct(seller, 1L);
+        });
+    }
+
+//    @Test
+//    @DisplayName("상품 상세 조회 성공")
+//    void getProductDetail_Success() {
+//        // given
+//        Long productId = 1L;
+//        // 테스트에 사용할 상세 정보가 포함된 Product 객체 생성
+//        Product detailedProduct = Product.builder()
+//                .productId(productId)
+//                .title("테스트 상품")
+//                .description("상세 설명입니다.")
+//                .price(20000.0)
+//                .isDeleted(false)
+//                .user(seller) // setUp()에서 생성된 공통 User 객체 사용
+//                .design(design) // setUp()에서 생성된 공통 Design 객체 사용
+//                .productImages(List.of(
+//                        ProductImage.builder().productImageUrl("/static/img1.jpg").build(),
+//                        ProductImage.builder().productImageUrl("/static/img2.jpg").build()
+//                ))
+//                .build();
+//
+//        // Repository가 findProductDetailById 호출 시 위에서 만든 객체를 반환하도록 설정
+//        given(productRepository.findProductDetailById(productId)).willReturn(Optional.of(detailedProduct));
+//
+//        // when
+//        ProductDetailResponse response = productService.getProductDetail(productId);
+//
+//        // then
+//        assertThat(response).isNotNull();
+//        assertThat(response.title()).isEqualTo("테스트 상품");
+//        assertThat(response.description()).isEqualTo("상세 설명입니다.");
+//        assertThat(response.productImageUrls()).hasSize(2);
+//        assertThat(response.productImageUrls()).contains("/static/img1.jpg", "/static/img2.jpg");
+//    }
+
+//    @Test
+//    @DisplayName("상품 상세 조회 실패 - 존재하지 않는 상품 ID")
+//    void getProductDetail_Fail_NotFound() {
+//        // given
+//        Long nonExistentProductId = 999L;
+//        // Repository가 어떤 Long 값을 받더라도 Optional.empty()를 반환하도록 설정
+//        given(productRepository.findProductDetailById(nonExistentProductId)).willReturn(Optional.empty());
+//
+//        // when & then
+//        ServiceException exception = assertThrows(ServiceException.class, () -> {
+//            productService.getProductDetail(nonExistentProductId);
+//        });
+//
+//        assertThat(exception.getErrorCode()).isEqualTo(ErrorCode.PRODUCT_NOT_FOUND);
+//    }
+
+//    @Test
+//    @DisplayName("상품 상세 조회 실패 - 이미 삭제(판매 중지)된 상품")
+//    void getProductDetail_Fail_IsDeleted() {
+//        // given
+//        Long productId = 1L;
+//        Product deletedProduct = Product.builder()
+//                .productId(productId)
+//                .isDeleted(true) // ⚠️ 삭제된 상태의 상품
+//                .user(seller)
+//                .design(design)
+//                .build();
+//
+//        // Repository는 일단 DB에서 데이터를 찾았다고 가정 (서비스 로직의 방어 코드를 테스트하기 위함)
+//        given(productRepository.findProductDetailById(productId)).willReturn(Optional.of(deletedProduct));
+//
+//        // when & then
+//        // Service의 if (product.getIsDeleted()) 분기에서 예외가 발생하는지 검증
+//        ServiceException exception = assertThrows(ServiceException.class, () -> {
+//            productService.getProductDetail(productId);
+//        });
+//
+//        assertThat(exception.getErrorCode()).isEqualTo(ErrorCode.PRODUCT_NOT_FOUND);
+//    }
+}
\ No newline at end of file
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..5ef6a52
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..e215bc4
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
new file mode 100644
index 0000000..719cea2
--- /dev/null
+++ b/frontend/eslint.config.mjs
@@ -0,0 +1,25 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
new file mode 100644
index 0000000..e9ffa30
--- /dev/null
+++ b/frontend/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
new file mode 100644
index 0000000..c52df95
--- /dev/null
+++ b/frontend/package-lock.json
@@ -0,0 +1,6296 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "frontend",
+      "version": "0.1.0",
+      "dependencies": {
+        "@tosspayments/tosspayments-sdk": "^2.4.0",
+        "axios": "^1.12.2",
+        "next": "15.5.6",
+        "react": "19.1.0",
+        "react-dom": "19.1.0",
+        "react-router-dom": "^7.9.4",
+        "zustand": "^5.0.8"
+      },
+      "devDependencies": {
+        "@eslint/eslintrc": "^3",
+        "@tailwindcss/postcss": "^4",
+        "@types/node": "^20",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "@types/react-router-dom": "^5.3.3",
+        "eslint": "^9",
+        "eslint-config-next": "15.5.6",
+        "tailwindcss": "^4",
+        "typescript": "^5"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
+      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
+      "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.1.tgz",
+      "integrity": "sha512-csZAzkNhsgwb0I/UAV6/RGFTbiakPCf0ZrGmrIxQpYvGZ00PhTkSnyKNolphgIvmnJeGw6rcGVEXfTzUnFuEvw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.16.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.16.0.tgz",
+      "integrity": "sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.38.0.tgz",
+      "integrity": "sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.0.tgz",
+      "integrity": "sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.16.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.4.tgz",
+      "integrity": "sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.4.tgz",
+      "integrity": "sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.3.tgz",
+      "integrity": "sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.3.tgz",
+      "integrity": "sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.3.tgz",
+      "integrity": "sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.3.tgz",
+      "integrity": "sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.3.tgz",
+      "integrity": "sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.3.tgz",
+      "integrity": "sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.3.tgz",
+      "integrity": "sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.4.tgz",
+      "integrity": "sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.4.tgz",
+      "integrity": "sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.4.tgz",
+      "integrity": "sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.4.tgz",
+      "integrity": "sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.4.tgz",
+      "integrity": "sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.4.tgz",
+      "integrity": "sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.4.tgz",
+      "integrity": "sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.4.tgz",
+      "integrity": "sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.5.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.4.tgz",
+      "integrity": "sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.4.tgz",
+      "integrity": "sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.4.tgz",
+      "integrity": "sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.6.tgz",
+      "integrity": "sha512-3qBGRW+sCGzgbpc5TS1a0p7eNxnOarGVQhZxfvTdnV0gFI61lX7QNtQ4V1TSREctXzYn5NetbUsLvyqwLFJM6Q==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.5.6.tgz",
+      "integrity": "sha512-YxDvsT2fwy1j5gMqk3ppXlsgDopHnkM4BoxSVASbvvgh5zgsK8lvWerDzPip8k3WVzsTZ1O7A7si1KNfN4OZfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "3.3.1"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.6.tgz",
+      "integrity": "sha512-ES3nRz7N+L5Umz4KoGfZ4XX6gwHplwPhioVRc25+QNsDa7RtUF/z8wJcbuQ2Tffm5RZwuN2A063eapoJ1u4nPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.6.tgz",
+      "integrity": "sha512-JIGcytAyk9LQp2/nuVZPAtj8uaJ/zZhsKOASTjxDug0SPU9LAM3wy6nPU735M1OqacR4U20LHVF5v5Wnl9ptTA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.6.tgz",
+      "integrity": "sha512-qvz4SVKQ0P3/Im9zcS2RmfFL/UCQnsJKJwQSkissbngnB/12c6bZTCB0gHTexz1s6d/mD0+egPKXAIRFVS7hQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.6.tgz",
+      "integrity": "sha512-FsbGVw3SJz1hZlvnWD+T6GFgV9/NYDeLTNQB2MXoPN5u9VA9OEDy6fJEfePfsUKAhJufFbZLgp0cPxMuV6SV0w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.6.tgz",
+      "integrity": "sha512-3QnHGFWlnvAgyxFxt2Ny8PTpXtQD7kVEeaFat5oPAHHI192WKYB+VIKZijtHLGdBBvc16tiAkPTDmQNOQ0dyrA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.6.tgz",
+      "integrity": "sha512-OsGX148sL+TqMK9YFaPFPoIaJKbFJJxFzkXZljIgA9hjMjdruKht6xDCEv1HLtlLNfkx3c5w2GLKhj7veBQizQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.6.tgz",
+      "integrity": "sha512-ONOMrqWxdzXDJNh2n60H6gGyKed42Ieu6UTVPZteXpuKbLZTH4G4eBMsr5qWgOBA+s7F+uB4OJbZnrkEDnZ5Fg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.6.tgz",
+      "integrity": "sha512-pxK4VIjFRx1MY92UycLOOw7dTdvccWsNETQ0kDHkBlcFH1GrTLUjSiHU1ohrznnux6TqRHgv5oflhfIWZwVROQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.14.0.tgz",
+      "integrity": "sha512-WJFej426qe4RWOm9MMtP4V3CV4AucXolQty+GRgAWLgQXmpCuwzs7hEpxxhSc/znXUSxum9d/P/32MW0FlAAlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.14.tgz",
+      "integrity": "sha512-hpz+8vFk3Ic2xssIA3e01R6jkmsAhvkQdXlEbRTk6S10xDAtiQiM3FyvZVGsucefq764euO/b8WUW9ysLdThHw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.0",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.19",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.14"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.14.tgz",
+      "integrity": "sha512-23yx+VUbBwCg2x5XWdB8+1lkPajzLmALEfMb51zZUBYaYVPDQvBSD/WYDqiVyBIo2BZFa3yw1Rpy3G2Jp+K0dw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.5.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.14",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.14",
+        "@tailwindcss/oxide-darwin-x64": "4.1.14",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.14",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.14",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.14",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.14",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.14",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.14",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.14",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.14",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.14"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.14.tgz",
+      "integrity": "sha512-a94ifZrGwMvbdeAxWoSuGcIl6/DOP5cdxagid7xJv6bwFp3oebp7y2ImYsnZBMTwjn5Ev5xESvS3FFYUGgPODQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.14.tgz",
+      "integrity": "sha512-HkFP/CqfSh09xCnrPJA7jud7hij5ahKyWomrC3oiO2U9i0UjP17o9pJbxUN0IJ471GTQQmzwhp0DEcpbp4MZTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.14.tgz",
+      "integrity": "sha512-eVNaWmCgdLf5iv6Qd3s7JI5SEFBFRtfm6W0mphJYXgvnDEAZ5sZzqmI06bK6xo0IErDHdTA5/t7d4eTfWbWOFw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.14.tgz",
+      "integrity": "sha512-QWLoRXNikEuqtNb0dhQN6wsSVVjX6dmUFzuuiL09ZeXju25dsei2uIPl71y2Ic6QbNBsB4scwBoFnlBfabHkEw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.14.tgz",
+      "integrity": "sha512-VB4gjQni9+F0VCASU+L8zSIyjrLLsy03sjcR3bM0V2g4SNamo0FakZFKyUQ96ZVwGK4CaJsc9zd/obQy74o0Fw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.14.tgz",
+      "integrity": "sha512-qaEy0dIZ6d9vyLnmeg24yzA8XuEAD9WjpM5nIM1sUgQ/Zv7cVkharPDQcmm/t/TvXoKo/0knI3me3AGfdx6w1w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.14.tgz",
+      "integrity": "sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.14.tgz",
+      "integrity": "sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.14.tgz",
+      "integrity": "sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.14.tgz",
+      "integrity": "sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.5",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.14.tgz",
+      "integrity": "sha512-Az0RnnkcvRqsuoLH2Z4n3JfAef0wElgzHD5Aky/e+0tBUxUhIeIqFBTMNQvmMRSP15fWwmvjBxZ3Q8RhsDnxAA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.14.tgz",
+      "integrity": "sha512-ttblVGHgf68kEE4om1n/n44I0yGPkCPbLsqzjvybhpwa6mKKtgFfAzy6btc3HRmuW7nHe0OOrSeNP9sQmmH9XA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.14.tgz",
+      "integrity": "sha512-BdMjIxy7HUNThK87C7BC8I1rE8BVUsfNQSI5siQ4JK3iIa3w0XyVvVL9SXLWO//CtYTcp1v7zci0fYwJOjB+Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.14",
+        "@tailwindcss/oxide": "4.1.14",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.14"
+      }
+    },
+    "node_modules/@tosspayments/tosspayments-sdk": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tosspayments/tosspayments-sdk/-/tosspayments-sdk-2.4.0.tgz",
+      "integrity": "sha512-Ljs9QCl45+mehyykPcWN2kh562Uo5a4kQIqentKvdv+YQ+yz6L2F2Kgph1vJcoQKk8vZKHckBezlmFW6MGl8Ww==",
+      "license": "MIT"
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.22",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.22.tgz",
+      "integrity": "sha512-hRnu+5qggKDSyWHlnmThnUqg62l29Aj/6vcYgUaSFL9oc7DVjeWEQN3PRgdSc6F8d9QRMWkf36CLMch1Do/+RQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
+      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
+      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.46.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.1.tgz",
+      "integrity": "sha512-rUsLh8PXmBjdiPY+Emjz9NX2yHvhS11v0SR6xNJkm5GM1MO9ea/1GoDKlHHZGrOJclL/cZ2i/vRUYVtjRhrHVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.46.1",
+        "@typescript-eslint/type-utils": "8.46.1",
+        "@typescript-eslint/utils": "8.46.1",
+        "@typescript-eslint/visitor-keys": "8.46.1",
+        "graphemer": "^1.4.0",
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.46.1",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.46.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.1.tgz",
+      "integrity": "sha512-6JSSaBZmsKvEkbRUkf7Zj7dru/8ZCrJxAqArcLaVMee5907JdtEbKGsZ7zNiIm/UAkpGUkaSMZEXShnN2D1HZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.46.1",
+        "@typescript-eslint/types": "8.46.1",
+        "@typescript-eslint/typescript-estree": "8.46.1",
+        "@typescript-eslint/visitor-keys": "8.46.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.46.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.1.tgz",
+      "integrity": "sha512-FOIaFVMHzRskXr5J4Jp8lFVV0gz5ngv3RHmn+E4HYxSJ3DgDzU7fVI1/M7Ijh1zf6S7HIoaIOtln1H5y8V+9Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.46.1",
+        "@typescript-eslint/types": "^8.46.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.46.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.1.tgz",
+      "integrity": "sha512-weL9Gg3/5F0pVQKiF8eOXFZp8emqWzZsOJuWRUNtHT+UNV2xSJegmpCNQHy37aEQIbToTq7RHKhWvOsmbM680A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.46.1",
+        "@typescript-eslint/visitor-keys": "8.46.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.46.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.1.tgz",
+      "integrity": "sha512-X88+J/CwFvlJB+mK09VFqx5FE4H5cXD+H/Bdza2aEWkSb8hnWIQorNcscRl4IEo1Cz9VI/+/r/jnGWkbWPx54g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.46.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.46.1.tgz",
+      "integrity": "sha512-+BlmiHIiqufBxkVnOtFwjah/vrkF4MtKKvpXrKSPLCkCtAp8H01/VV43sfqA98Od7nJpDcFnkwgyfQbOG0AMvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.46.1",
+        "@typescript-eslint/typescript-estree": "8.46.1",
+        "@typescript-eslint/utils": "8.46.1",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.46.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.1.tgz",
+      "integrity": "sha512-C+soprGBHwWBdkDpbaRC4paGBrkIXxVlNohadL5o0kfhsXqOC6GYH2S/Obmig+I0HTDl8wMaRySwrfrXVP8/pQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.46.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.1.tgz",
+      "integrity": "sha512-uIifjT4s8cQKFQ8ZBXXyoUODtRoAd7F7+G8MKmtzj17+1UbdzFl52AzRyZRyKqPHhgzvXunnSckVu36flGy8cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.46.1",
+        "@typescript-eslint/tsconfig-utils": "8.46.1",
+        "@typescript-eslint/types": "8.46.1",
+        "@typescript-eslint/visitor-keys": "8.46.1",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.46.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.46.1.tgz",
+      "integrity": "sha512-vkYUy6LdZS7q1v/Gxb2Zs7zziuXN0wxqsetJdeZdRe/f5dwJFglmuvZBfTUivCtjH725C1jWCDfpadadD95EDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.46.1",
+        "@typescript-eslint/types": "8.46.1",
+        "@typescript-eslint/typescript-estree": "8.46.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.46.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.1.tgz",
+      "integrity": "sha512-ptkmIf2iDkNUjdeu2bQqhFPV1m6qTnFFjg7PPDjxKWaMaP0Z6I9l30Jr3g5QqbZGdw8YdYvLp+XnqnWWZOg/NA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.46.1",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+      "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+      "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz",
+      "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axios": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001751",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001751.tgz",
+      "integrity": "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
+      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.6",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.38.0.tgz",
+      "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.1",
+        "@eslint/core": "^0.16.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.38.0",
+        "@eslint/plugin-kit": "^0.4.0",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.5.6.tgz",
+      "integrity": "sha512-cGr3VQlPsZBEv8rtYp4BpG1KNXDqGvPo9VC1iaCgIA11OfziC/vczng+TnAS3WpRIR3Q5ye/6yl+CRUuZ1fPGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "15.5.6",
+        "@rushstack/eslint-patch": "^1.10.3",
+        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.0",
+        "eslint-plugin-react-hooks": "^5.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0 || ^9.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.12.0.tgz",
+      "integrity": "sha512-LScr2aNr2FbjAjZh2C6X6BxRx1/x+aTDExct/xyq2XKbYOiG5c0aK7pMsSuyc0brz3ibr/lbQiHD9jzt4lccJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.19",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
+      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/next": {
+      "version": "15.5.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.6.tgz",
+      "integrity": "sha512-zTxsnI3LQo3c9HSdSf91O1jMNsEzIXDShXd4wVdg9y5shwLqBXi4ZtUUJyB86KGVSJLZx0PFONvO54aheGX8QQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.5.6",
+        "@swc/helpers": "0.5.15",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.5.6",
+        "@next/swc-darwin-x64": "15.5.6",
+        "@next/swc-linux-arm64-gnu": "15.5.6",
+        "@next/swc-linux-arm64-musl": "15.5.6",
+        "@next/swc-linux-x64-gnu": "15.5.6",
+        "@next/swc-linux-x64-musl": "15.5.6",
+        "@next/swc-win32-arm64-msvc": "15.5.6",
+        "@next/swc-win32-x64-msvc": "15.5.6",
+        "sharp": "^0.34.3"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/react-router": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
+      "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.4.tgz",
+      "integrity": "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==",
+      "dependencies": {
+        "react-router": "7.9.4"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "devOptional": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.4.tgz",
+      "integrity": "sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.0",
+        "semver": "^7.7.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.4",
+        "@img/sharp-darwin-x64": "0.34.4",
+        "@img/sharp-libvips-darwin-arm64": "1.2.3",
+        "@img/sharp-libvips-darwin-x64": "1.2.3",
+        "@img/sharp-libvips-linux-arm": "1.2.3",
+        "@img/sharp-libvips-linux-arm64": "1.2.3",
+        "@img/sharp-libvips-linux-ppc64": "1.2.3",
+        "@img/sharp-libvips-linux-s390x": "1.2.3",
+        "@img/sharp-libvips-linux-x64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3",
+        "@img/sharp-linux-arm": "0.34.4",
+        "@img/sharp-linux-arm64": "0.34.4",
+        "@img/sharp-linux-ppc64": "0.34.4",
+        "@img/sharp-linux-s390x": "0.34.4",
+        "@img/sharp-linux-x64": "0.34.4",
+        "@img/sharp-linuxmusl-arm64": "0.34.4",
+        "@img/sharp-linuxmusl-x64": "0.34.4",
+        "@img/sharp-wasm32": "0.34.4",
+        "@img/sharp-win32-arm64": "0.34.4",
+        "@img/sharp-win32-ia32": "0.34.4",
+        "@img/sharp-win32-x64": "0.34.4"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",
+      "integrity": "sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tar": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
+      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unrs-resolver": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
+      "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.11.1",
+        "@unrs/resolver-binding-android-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-x64": "1.11.1",
+        "@unrs/resolver-binding-freebsd-x64": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-musl": "1.11.1",
+        "@unrs/resolver-binding-wasm32-wasi": "1.11.1",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz",
+      "integrity": "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..1fb6e07
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@tosspayments/tosspayments-sdk": "^2.4.0",
+    "axios": "^1.12.2",
+    "next": "15.5.6",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-router-dom": "^7.9.4",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/react-router-dom": "^5.3.3",
+    "eslint": "^9",
+    "eslint-config-next": "15.5.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}
diff --git a/frontend/postcss.config.mjs b/frontend/postcss.config.mjs
new file mode 100644
index 0000000..c7bcb4b
--- /dev/null
+++ b/frontend/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
diff --git a/frontend/public/file.svg b/frontend/public/file.svg
new file mode 100644
index 0000000..004145c
--- /dev/null
+++ b/frontend/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/frontend/public/globe.svg b/frontend/public/globe.svg
new file mode 100644
index 0000000..567f17b
--- /dev/null
+++ b/frontend/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/frontend/public/logo.png b/frontend/public/logo.png
new file mode 100644
index 0000000..e59db1e
Binary files /dev/null and b/frontend/public/logo.png differ
diff --git a/frontend/public/mocks/data/likes.json b/frontend/public/mocks/data/likes.json
new file mode 100644
index 0000000..b697c17
--- /dev/null
+++ b/frontend/public/mocks/data/likes.json
@@ -0,0 +1,35 @@
+[
+    {
+      "productId": 101,
+      "productTitle": "따뜻한 겨울 스웨터",
+      "thumbnailUrl": "https://placehold.co/300x300/925C4C/fff?text=Product1",
+      "price": 15000,
+      "averageRating": 4.8,
+      "likedAt": "2023-10-12"
+    },
+    {
+      "productId": 102,
+      "productTitle": "포근한 가을 니트",
+      "thumbnailUrl": "https://placehold.co/300x300/EAD9D5/fff?text=Product2",
+      "price": 22000,
+      "averageRating": 4.5,
+      "likedAt": "2023-10-15"
+    },
+    {
+      "productId": 103,
+      "productTitle": "심플 캐시미어 머플러",
+      "thumbnailUrl": "https://placehold.co/300x300/D5E0EA/fff?text=Product3",
+      "price": 18000,
+      "averageRating": 4.2,
+      "likedAt": "2023-10-18"
+    },
+    {
+      "productId": 104,
+      "productTitle": "핸드메이드 울 장갑",
+      "thumbnailUrl": "https://placehold.co/300x300/925C4C/fff?text=Product4",
+      "price": 12000,
+      "averageRating": 4.7,
+      "likedAt": "2023-10-20"
+    }
+  ]
+  
\ No newline at end of file
diff --git a/frontend/public/mocks/data/productReviews.json b/frontend/public/mocks/data/productReviews.json
new file mode 100644
index 0000000..9430612
--- /dev/null
+++ b/frontend/public/mocks/data/productReviews.json
@@ -0,0 +1,44 @@
+[
+    {
+      "reviewId": 201,
+      "rating": 5,
+      "content": "정말 부드럽고 따뜻합니다. 겨울 내내 잘 입을 것 같아요!",
+      "createdAt": "2025-10-15T10:30:00",
+      "userName": "홍길동",
+      "reviewImageUrls": [
+        "https://placehold.co/150x150/925C4C/ffffff?text=Review+1",
+        "https://placehold.co/150x150/EAD9D5/333333?text=Review+2"
+      ]
+    },
+    {
+      "reviewId": 202,
+      "rating": 4,
+      "content": "촉감이 부드럽지만 생각보다 얇아요. 봄/가을에 좋습니다.",
+      "createdAt": "2025-10-14T14:12:00",
+      "userName": "김철수",
+      "reviewImageUrls": [
+        "https://placehold.co/150x150/BDC3C7/333333?text=Review+1"
+      ]
+    },
+    {
+      "reviewId": 203,
+      "rating": 5,
+      "content": "선물용으로 샀는데 아주 좋아했어요. 포장도 꼼꼼합니다.",
+      "createdAt": "2025-10-13T09:45:00",
+      "userName": "이영희",
+      "reviewImageUrls": []
+    },
+    {
+      "reviewId": 204,
+      "rating": 3,
+      "content": "디자인은 마음에 드는데, 배송이 조금 늦었습니다.",
+      "createdAt": "2025-10-12T17:20:00",
+      "userName": "박민수",
+      "reviewImageUrls": [
+        "https://placehold.co/150x150/34495E/ffffff?text=Review+1",
+        "https://placehold.co/150x150/F3E5AB/333333?text=Review+2",
+        "https://placehold.co/150x150/BDC3C7/333333?text=Review+3"
+      ]
+    }
+  ]
+  
\ No newline at end of file
diff --git a/frontend/public/mocks/data/reviews.json b/frontend/public/mocks/data/reviews.json
new file mode 100644
index 0000000..abb0550
--- /dev/null
+++ b/frontend/public/mocks/data/reviews.json
@@ -0,0 +1,59 @@
+[
+  {
+    "userId": 1,
+    "reviewId": 101,
+    "productId": 1,
+    "productTitle": "포근한 울 스웨터 (네이비)",
+    "productThumbnailUrl": "https://placehold.co/100x100/34495e/ffffff?text=Knitly",
+    "rating": 5,
+    "content": "너무 따뜻하고 색상도 마음에 듭니다. 겨울 내내 잘 입을 것 같아요! 배송도 빨랐습니다. 추천합니다.",
+    "createdDate": "2025-10-15",
+    "purchasedDate": "2025-10-10",
+    "reviewImageUrls": [
+      "https://placehold.co/200x200/34495e/ffffff?text=Image1",
+      "https://placehold.co/200x200/34495e/ffffff?text=Image2"
+    ]
+  },
+  {
+    "userId": 1,
+    "reviewId": 102,
+    "productId": 3,
+    "productTitle": "코튼 니트 비니 (베이지)",
+    "productThumbnailUrl": "https://placehold.co/100x100/f3e5ab/333333?text=Knitly",
+    "rating": 4,
+    "content": "촉감이 부드러워요. 다만 생각보다 얇아서 한겨울에는 추울 수도 있겠네요. 봄가을에 쓰기 좋습니다.",
+    "createdDate": "2025-10-15",
+    "purchasedDate": "2025-10-12",
+    "reviewImageUrls": [
+      "https://placehold.co/200x200/f3e5ab/333333?text=Image1"
+    ]
+  },
+  {
+    "userId": 1,
+    "reviewId": 103,
+    "productId": 5,
+    "productTitle": "캐시미어 머플러 (그레이)",
+    "productThumbnailUrl": "https://placehold.co/100x100/bdc3c7/333333?text=Knitly",
+    "rating": 5,
+    "content": "선물용으로 샀는데 받는 분이 아주 좋아하셨습니다. 포장도 꼼꼼하고 재질도 고급스러워요.",
+    "createdDate": "2025-10-20",
+    "purchasedDate": "2025-10-18",
+    "reviewImageUrls": [
+      "https://placehold.co/200x200/bdc3c7/333333?text=Image1",
+      "https://placehold.co/200x200/bdc3c7/333333?text=Image2",
+      "https://placehold.co/200x200/bdc3c7/333333?text=Image3"
+    ]
+  },
+  {
+    "userId": 1,
+    "reviewId": 104,
+    "productId": 5,
+    "productTitle": "캐시미어 머플러 (블랙)",
+    "productThumbnailUrl": "https://placehold.co/100x100/333333/ffffff?text=Knitly",
+    "rating": 5,
+    "content": "선물용으로 샀는데 받는 분이 아주 좋아하셨습니다. 포장도 꼼꼼하고 재질도 고급스러워요.",
+    "createdDate": "2025-10-20",
+    "purchasedDate": "2025-10-18",
+    "reviewImageUrls": []
+  }
+]
diff --git a/frontend/public/next.svg b/frontend/public/next.svg
new file mode 100644
index 0000000..5174b28
--- /dev/null
+++ b/frontend/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/vercel.svg b/frontend/public/vercel.svg
new file mode 100644
index 0000000..7705396
--- /dev/null
+++ b/frontend/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/frontend/public/window.svg b/frontend/public/window.svg
new file mode 100644
index 0000000..b2b2a44
--- /dev/null
+++ b/frontend/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/frontend/src/app/cart/page.tsx b/frontend/src/app/cart/page.tsx
new file mode 100644
index 0000000..8c39e5d
--- /dev/null
+++ b/frontend/src/app/cart/page.tsx
@@ -0,0 +1,228 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/lib/store/authStore';
+import { useCartStore, CartStoreItem } from '@/lib/store/cartStore';
+
+export default function CartPage() {
+  const router = useRouter();
+  const { user, isAuthenticated, isLoading: isAuthLoading } = useAuthStore();
+
+  // Zustand 스토어에서 상태와 함수 가져오기
+  const cartItems = useCartStore((state) => state.items);
+  const removeFromCart = useCartStore((state) => state.removeFromCart);
+  const clearCart = useCartStore((state) => state.clearCart);
+
+  // 상태 관리
+  const [selectedItems, setSelectedItems] = useState<Set<number>>(new Set());
+  const [error, setError] = useState<string | null>(null);
+  const [isProcessingOrder, setIsProcessingOrder] = useState(false);
+
+  // 페이지 로드/cartItems 변경 시 모든 아이템 선택
+  useEffect(() => {
+    const allProductIds = new Set(cartItems.map((item) => item.productId));
+    setSelectedItems(allProductIds);
+  }, [cartItems]);
+
+  // 계산 로직
+  const selectedCartItems = cartItems.filter((item) =>
+    selectedItems.has(item.productId)
+  );
+  const totalAmount = selectedCartItems.reduce(
+    (sum, item) => sum + item.price,
+    0
+  );
+
+  // 이벤트 핸들러
+  const handleCheckboxChange = (productId: number) => {
+    setSelectedItems((prevSelected) => {
+      const newSelected = new Set(prevSelected);
+      if (newSelected.has(productId)) {
+        newSelected.delete(productId);
+      } else {
+        newSelected.add(productId);
+      }
+      return newSelected;
+    });
+  };
+
+  const handleSelectAll = () => {
+    if (selectedItems.size === cartItems.length) {
+      setSelectedItems(new Set());
+    } else {
+      const allProductIds = new Set(cartItems.map((item) => item.productId));
+      setSelectedItems(allProductIds);
+    }
+  };
+
+  const handleDeleteItem = (productIdToDelete: number) => {
+    removeFromCart(productIdToDelete);
+  };
+
+  // ✨ 결제하기 핸들러 - 토스페이먼츠 결제 페이지로 이동
+  const handleCheckout = () => {
+    if (selectedItems.size === 0) {
+      alert('결제할 상품을 선택해주세요.');
+      return;
+    }
+
+    if (!isAuthenticated) {
+      alert('로그인이 필요합니다.');
+      return;
+    }
+
+    // 선택된 아이템 정보를 결제 페이지로 전달
+    const selectedItemsData = selectedCartItems.map(item => ({
+      productId: item.productId,
+      title: item.title,
+      price: item.price,
+      imageUrl: item.imageUrl,
+    }));
+
+    // 쿼리 파라미터로 인코딩하여 전달
+    const itemsParam = encodeURIComponent(JSON.stringify(selectedItemsData));
+    router.push(`/checkout?items=${itemsParam}`);
+  };
+
+  // 렌더링 로직
+  if (isAuthLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[60vh]">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated && !isAuthLoading) {
+    return (
+      <div className="max-w-4xl mx-auto p-4 md:p-8">
+        <h1 className="text-3xl font-bold mb-6">장바구니</h1>
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg">
+          <p>오류: 장바구니를 보려면 로그인이 필요합니다.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto p-4 md:p-8">
+      <h1 className="text-3xl font-bold mb-8">장바구니</h1>
+      
+      {cartItems.length === 0 ? (
+        <div className="bg-white shadow-lg rounded-lg p-10 text-center text-gray-500">
+          장바구니가 비어 있습니다.
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* 장바구니 목록 (왼쪽) */}
+          <div className="lg:col-span-2 space-y-4">
+            <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border">
+              <label className="flex items-center space-x-3 cursor-pointer">
+                <input
+                  type="checkbox"
+                  className="form-checkbox h-5 w-5 text-[#925C4C] rounded border-gray-300 focus:ring-[#925C4C]"
+                  checked={selectedItems.size === cartItems.length && cartItems.length > 0}
+                  onChange={handleSelectAll}
+                />
+                <span className="font-medium">
+                  전체 선택 ({selectedItems.size}/{cartItems.length})
+                </span>
+              </label>
+            </div>
+
+            {cartItems.map((item) => (
+              <div
+                key={item.productId}
+                className="flex items-center p-4 bg-white shadow rounded-lg border border-gray-200"
+              >
+                <input
+                  type="checkbox"
+                  className="form-checkbox h-5 w-5 text-[#925C4C] rounded border-gray-300 focus:ring-[#925C4C] mr-4"
+                  checked={selectedItems.has(item.productId)}
+                  onChange={() => handleCheckboxChange(item.productId)}
+                />
+                {item.imageUrl && (
+                  <img
+                    src={item.imageUrl}
+                    alt={item.title}
+                    className="w-16 h-16 object-cover rounded mr-4"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).src = 
+                        `https://placehold.co/100x100/CCCCCC/FFFFFF?text=No+Image`;
+                    }}
+                  />
+                )}
+                <div className="flex-1">
+                  <p className="font-medium text-gray-800">{item.title}</p>
+                  <p className="text-lg font-semibold text-gray-900">
+                    {item.price.toLocaleString()}원
+                  </p>
+                </div>
+                <button
+                  onClick={() => handleDeleteItem(item.productId)}
+                  className="text-gray-400 hover:text-red-600 transition-colors ml-4 p-2"
+                  aria-label={`${item.title} 삭제`}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={1.5}
+                    stroke="currentColor"
+                    className="w-5 h-5"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M6 18 18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+            ))}
+          </div>
+
+          {/* 주문 요약 (오른쪽) */}
+          <div className="lg:col-span-1">
+            <div className="sticky top-8 bg-white shadow-lg rounded-lg border border-gray-200 p-6">
+              <h2 className="text-xl font-semibold mb-4 border-b pb-3">주문 요약</h2>
+              <div className="space-y-2 mb-4 max-h-60 overflow-y-auto pr-2">
+                {selectedCartItems.length === 0 ? (
+                  <p className="text-gray-500 text-sm">선택된 상품이 없습니다.</p>
+                ) : (
+                  selectedCartItems.map((item) => (
+                    <div key={item.productId} className="flex justify-between text-sm">
+                      <span className="text-gray-700 truncate mr-2">{item.title}</span>
+                      <span className="font-medium text-gray-900 whitespace-nowrap">
+                        {item.price.toLocaleString()}원
+                      </span>
+                    </div>
+                  ))
+                )}
+              </div>
+              <div className="border-t pt-4">
+                <div className="flex justify-between items-baseline mb-4">
+                  <span className="text-lg font-semibold text-gray-800">총 주문 금액</span>
+                  <span className="text-2xl font-bold text-[#925C4C]">
+                    {totalAmount.toLocaleString()}원
+                  </span>
+                </div>
+                <button
+                  onClick={handleCheckout}
+                  disabled={selectedItems.size === 0 || isProcessingOrder}
+                  className="w-full bg-[#925C4C] hover:bg-[#7a4c3e] text-white font-bold py-3 px-6 rounded-lg transition-colors text-lg disabled:bg-gray-400 disabled:cursor-not-allowed"
+                >
+                  {isProcessingOrder ? '처리 중...' : '결제하기'}
+                </button>
+                {error && !isProcessingOrder && (
+                  <p className="text-red-600 text-sm mt-3 text-center">{error}</p>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/checkout/fail/page.tsx b/frontend/src/app/checkout/fail/page.tsx
new file mode 100644
index 0000000..d788a45
--- /dev/null
+++ b/frontend/src/app/checkout/fail/page.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+
+export default function PaymentFailPage() {
+  const searchParams = useSearchParams();
+  
+  const errorCode = searchParams.get('code');
+  const errorMessage = searchParams.get('message');
+  const orderId = searchParams.get('orderId');
+
+  // 에러 메시지 매핑
+  const getErrorDisplayMessage = (code: string | null) => {
+    if (!code) return errorMessage || '알 수 없는 오류가 발생했습니다.';
+
+    const errorMessages: { [key: string]: string } = {
+      'PAY_PROCESS_CANCELED': '사용자가 결제를 취소했습니다.',
+      'PAY_PROCESS_ABORTED': '결제 진행 중 오류가 발생했습니다.',
+      'REJECT_CARD_COMPANY': '카드사에서 승인을 거부했습니다.',
+      'EXCEED_MAX_CARD_INSTALLMENT_PLAN': '설정 가능한 최대 할부 개월수를 초과했습니다.',
+      'INVALID_CARD_EXPIRATION': '유효하지 않은 카드 유효기간입니다.',
+      'NOT_SUPPORTED_CARD': '지원하지 않는 카드입니다.',
+      'INCORRECT_BASIC_AUTH_FORMAT': '잘못된 인증 정보입니다.',
+      'NOT_FOUND_PAYMENT': '존재하지 않는 결제 정보입니다.',
+      'NOT_FOUND_PAYMENT_SESSION': '결제 시간이 만료되었습니다.',
+      'FAILED_PAYMENT_INTERNAL_SYSTEM_PROCESSING': '결제가 완료되지 않았습니다.',
+    };
+
+    return errorMessages[code] || errorMessage || '결제 처리 중 오류가 발생했습니다.';
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4">
+      <div className="max-w-md w-full bg-white shadow-lg rounded-lg p-8">
+        {/* 실패 아이콘 */}
+        <div className="text-center mb-6">
+          <div className="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <svg
+              className="w-10 h-10 text-red-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </div>
+          <h1 className="text-3xl font-bold text-gray-800 mb-2">결제 실패</h1>
+          <p className="text-gray-600 mb-4">
+            {getErrorDisplayMessage(errorCode)}
+          </p>
+        </div>
+
+        {/* 에러 상세 정보 */}
+        {(errorCode || orderId) && (
+          <div className="bg-gray-50 rounded-lg p-4 mb-6 space-y-2 text-sm">
+            {orderId && (
+              <div className="flex justify-between">
+                <span className="text-gray-600">주문번호</span>
+                <span className="font-medium text-gray-800">{orderId}</span>
+              </div>
+            )}
+            {errorCode && (
+              <div className="flex justify-between">
+                <span className="text-gray-600">에러 코드</span>
+                <span className="font-medium text-gray-800">{errorCode}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 안내 메시지 */}
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
+          <p className="text-sm text-yellow-800">
+            💡 결제가 진행되지 않았으며, 금액이 청구되지 않았습니다.
+          </p>
+        </div>
+
+        {/* 버튼 영역 */}
+        <div className="space-y-3">
+          <Link
+            href="/cart"
+            className="block w-full bg-[#925C4C] text-white py-3 rounded-lg hover:bg-[#7a4c3e] transition-colors font-medium text-center"
+          >
+            장바구니로 돌아가기
+          </Link>
+          <Link
+            href="/"
+            className="block w-full bg-gray-200 text-gray-700 py-3 rounded-lg hover:bg-gray-300 transition-colors font-medium text-center"
+          >
+            홈으로 가기
+          </Link>
+        </div>
+
+        {/* 고객센터 안내 */}
+        <div className="mt-6 pt-6 border-t text-center">
+          <p className="text-sm text-gray-600">
+            문제가 계속 발생하시나요?
+          </p>
+          <p className="text-sm text-gray-800 font-medium mt-1">
+            고객센터: 1234-5678
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/checkout/page.tsx b/frontend/src/app/checkout/page.tsx
new file mode 100644
index 0000000..0d7035b
--- /dev/null
+++ b/frontend/src/app/checkout/page.tsx
@@ -0,0 +1,216 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { loadTossPayments } from '@tosspayments/tosspayments-sdk';
+import { useAuthStore } from '@/lib/store/authStore';
+
+// 환경 변수
+const clientKey = process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY;
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+// 장바구니에서 전달받는 아이템 타입
+interface CheckoutItem {
+  productId: number;
+  title: string;
+  price: number;
+  imageUrl?: string;
+}
+
+export default function CheckoutPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { user, isAuthenticated } = useAuthStore();
+  
+  const [ready, setReady] = useState(false);
+  const [items, setItems] = useState<CheckoutItem[]>([]);
+  const [tossOrderId, setTossOrderId] = useState<string>(''); // tossOrderId로 변경
+  const paymentWidgetRef = useRef<any>(null);
+
+  // 1. 인증 확인
+  useEffect(() => {
+    if (!isAuthenticated) {
+      alert('로그인이 필요합니다.');
+      router.push('/');
+    }
+  }, [isAuthenticated, router]);
+
+  // 2. 장바구니 아이템 로드
+  useEffect(() => {
+    const itemsParam = searchParams.get('items');
+    if (itemsParam) {
+      try {
+        const parsedItems = JSON.parse(decodeURIComponent(itemsParam));
+        setItems(parsedItems);
+      } catch (error) {
+        console.error('아이템 파싱 실패:', error);
+        alert('잘못된 결제 정보입니다.');
+        router.push('/cart');
+      }
+    } else {
+      alert('결제할 상품이 없습니다.');
+      router.push('/cart');
+    }
+  }, [searchParams, router]);
+
+  // 3. 주문 생성 및 토스페이먼츠 위젯 초기화
+  useEffect(() => {
+    if (!user || items.length === 0) return;
+
+    const initializePayment = async () => {
+      try {
+        // 3-1. 주문 생성 (백엔드에서 tossOrderId 자동 생성)
+        const accessToken = localStorage.getItem('accessToken');
+        const productIds = items.map(item => item.productId);
+        
+        const orderResponse = await fetch(`${API_URL}/orders`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${accessToken}`,
+          },
+          body: JSON.stringify({ productIds }),
+        });
+
+        if (!orderResponse.ok) {
+          throw new Error('주문 생성에 실패했습니다.');
+        }
+
+        const orderData = await orderResponse.json();
+        
+        // ✅ 백엔드에서 생성된 tossOrderId를 사용
+        const generatedTossOrderId = orderData.tossOrderId;
+        if (!generatedTossOrderId) {
+          throw new Error('주문 번호(tossOrderId)를 받지 못했습니다.');
+        }
+        
+        setTossOrderId(generatedTossOrderId);
+        console.log('생성된 tossOrderId:', generatedTossOrderId);
+
+        // 3-2. 토스페이먼츠 SDK 로드 및 위젯 초기화
+        const tossPayments = await loadTossPayments(clientKey);
+        
+        const totalAmount = items.reduce((sum, item) => sum + item.price, 0);
+        const orderName = items.length > 1 
+          ? `${items[0].title} 외 ${items.length - 1}건`
+          : items[0].title;
+
+        // 결제위젯 렌더링
+        const paymentWidget = tossPayments.widgets({
+          customerKey: `customer_${user.userId}`,
+        });
+
+        await paymentWidget.setAmount({
+          currency: 'KRW',
+          value: totalAmount,
+        });
+
+        await Promise.all([
+          // 결제 UI 렌더링
+          paymentWidget.renderPaymentMethods({
+            selector: '#payment-method',
+            variantKey: 'DEFAULT',
+          }),
+          // 이용약관 UI 렌더링
+          paymentWidget.renderAgreement({
+            selector: '#agreement',
+            variantKey: 'AGREEMENT',
+          }),
+        ]);
+
+        paymentWidgetRef.current = paymentWidget;
+        setReady(true);
+
+      } catch (error) {
+        console.error('결제 초기화 실패:', error);
+        alert('결제 준비 중 오류가 발생했습니다.');
+        router.push('/cart');
+      }
+    };
+
+    initializePayment();
+  }, [user, items, router]);
+
+  // 4. 결제 요청
+  const handlePayment = async () => {
+    if (!paymentWidgetRef.current || !tossOrderId) {
+      alert('결제 준비가 완료되지 않았습니다.');
+      return;
+    }
+
+    try {
+      const totalAmount = items.reduce((sum, item) => sum + item.price, 0);
+      const orderName = items.length > 1 
+        ? `${items[0].title} 외 ${items.length - 1}건`
+        : items[0].title;
+
+      // ✅ 백엔드에서 받은 tossOrderId를 사용
+      console.log('결제 요청 - tossOrderId:', tossOrderId);
+      
+      await paymentWidgetRef.current.requestPayment({
+        orderId: tossOrderId, // ✅ 백엔드에서 생성된 올바른 형식의 tossOrderId
+        orderName: orderName,
+        successUrl: `${window.location.origin}/checkout/success`,
+        failUrl: `${window.location.origin}/checkout/fail`,
+        customerEmail: user?.email,
+        customerName: user?.username || user?.name,
+      });
+    } catch (error) {
+      console.error('결제 요청 실패:', error);
+      alert('결제 요청 중 오류가 발생했습니다.');
+    }
+  };
+
+  // 로딩 중
+  if (!isAuthenticated || items.length === 0) {
+    return (
+      <div className="flex justify-center items-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <h1 className="text-2xl font-bold mb-6">결제하기</h1>
+      
+      {/* 주문 상품 목록 */}
+      <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
+        <h2 className="text-lg font-semibold mb-4">주문 상품</h2>
+        {items.map((item, index) => (
+          <div key={index} className="flex justify-between items-center py-2">
+            <span>{item.title}</span>
+            <span className="font-medium">{item.price.toLocaleString()}원</span>
+          </div>
+        ))}
+        <div className="border-t mt-4 pt-4">
+          <div className="flex justify-between items-center font-bold text-lg">
+            <span>총 결제금액</span>
+            <span className="text-[#925C4C]">
+              {items.reduce((sum, item) => sum + item.price, 0).toLocaleString()}원
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* 토스페이먼츠 결제 UI */}
+      <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
+        <div id="payment-method" />
+        <div id="agreement" className="mt-4" />
+      </div>
+
+      {/* 결제하기 버튼 */}
+      <button
+        onClick={handlePayment}
+        disabled={!ready}
+        className={`w-full py-4 rounded-lg font-semibold text-lg transition-colors ${
+          ready
+            ? 'bg-[#925C4C] text-white hover:bg-[#7a4c3e] cursor-pointer'
+            : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+        }`}
+      >
+        {ready ? '결제하기' : '결제 준비 중...'}
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/app/checkout/success/page.tsx b/frontend/src/app/checkout/success/page.tsx
new file mode 100644
index 0000000..f7c0a69
--- /dev/null
+++ b/frontend/src/app/checkout/success/page.tsx
@@ -0,0 +1,204 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080/api/v1';
+
+export default function PaymentSuccessPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [isProcessing, setIsProcessing] = useState(true);
+  const [paymentInfo, setPaymentInfo] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const confirmPayment = async () => {
+      // URL 쿼리 파라미터에서 결제 정보 추출
+      const paymentKey = searchParams.get('paymentKey');
+      const orderId = searchParams.get('orderId');
+      const amount = searchParams.get('amount');
+
+      if (!paymentKey || !orderId || !amount) {
+        setError('결제 정보가 올바르지 않습니다.');
+        setIsProcessing(false);
+        return;
+      }
+
+      try {
+        // 백엔드 결제 승인 API 호출
+        const response = await fetch(`${API_URL}/payments/confirm`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${localStorage.getItem('accessToken')}`,
+          },
+          body: JSON.stringify({
+            paymentKey,
+            orderId,
+            amount: parseInt(amount),
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.message || '결제 승인에 실패했습니다.');
+        }
+
+        const data = await response.json();
+        setPaymentInfo(data);
+        setIsProcessing(false);
+
+        // 장바구니에서 결제된 아이템 제거 (선택사항)
+        // localStorage에서 장바구니 관리하는 경우
+        // 실제 구현에서는 백엔드에서 처리하는 것이 좋습니다.
+
+      } catch (error: any) {
+        console.error('결제 승인 실패:', error);
+        setError(error.message || '결제 승인 중 오류가 발생했습니다.');
+        setIsProcessing(false);
+      }
+    };
+
+    confirmPayment();
+  }, [searchParams]);
+
+  // 로딩 중
+  if (isProcessing) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-[#925C4C] mx-auto mb-4"></div>
+          <p className="text-lg text-gray-600">결제를 처리하고 있습니다...</p>
+          <p className="text-sm text-gray-500 mt-2">잠시만 기다려주세요.</p>
+        </div>
+      </div>
+    );
+  }
+
+  // 에러 발생
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center px-4">
+        <div className="max-w-md w-full bg-white shadow-lg rounded-lg p-8 text-center">
+          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <svg
+              className="w-8 h-8 text-red-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </div>
+          <h1 className="text-2xl font-bold text-gray-800 mb-2">결제 실패</h1>
+          <p className="text-gray-600 mb-6">{error}</p>
+          <div className="flex gap-3">
+            <Link
+              href="/cart"
+              className="flex-1 bg-gray-200 text-gray-700 py-3 rounded-lg hover:bg-gray-300 transition-colors font-medium"
+            >
+              장바구니로
+            </Link>
+            <Link
+              href="/"
+              className="flex-1 bg-[#925C4C] text-white py-3 rounded-lg hover:bg-[#7a4c3e] transition-colors font-medium"
+            >
+              홈으로
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // 결제 성공
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4">
+      <div className="max-w-2xl w-full bg-white shadow-lg rounded-lg p-8">
+        {/* 성공 아이콘 */}
+        <div className="text-center mb-6">
+          <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <svg
+              className="w-10 h-10 text-green-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          </div>
+          <h1 className="text-3xl font-bold text-gray-800 mb-2">결제가 완료되었습니다!</h1>
+          <p className="text-gray-600">주문이 정상적으로 처리되었습니다.</p>
+        </div>
+
+        {/* 결제 정보 */}
+        {paymentInfo && (
+          <div className="bg-gray-50 rounded-lg p-6 mb-6 space-y-3">
+            <div className="flex justify-between">
+              <span className="text-gray-600">주문번호</span>
+              <span className="font-medium">{paymentInfo.orderId}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-600">결제금액</span>
+              <span className="font-bold text-lg text-[#925C4C]">
+                {paymentInfo.totalAmount?.toLocaleString()}원
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-600">결제수단</span>
+              <span className="font-medium">
+                {paymentInfo.method === 'CARD' ? '카드' : 
+                 paymentInfo.method === 'TRANSFER' ? '계좌이체' :
+                 paymentInfo.method === 'VIRTUAL_ACCOUNT' ? '가상계좌' :
+                 paymentInfo.method}
+              </span>
+            </div>
+            {paymentInfo.approvedAt && (
+              <div className="flex justify-between">
+                <span className="text-gray-600">승인시간</span>
+                <span className="font-medium">
+                  {new Date(paymentInfo.approvedAt).toLocaleString('ko-KR')}
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 안내 메시지 */}
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+          <p className="text-sm text-blue-800">
+            💡 주문 내역은 마이페이지에서 확인하실 수 있습니다.
+          </p>
+        </div>
+
+        {/* 버튼 영역 */}
+        <div className="flex gap-3">
+          <Link
+            href="/mypage/order"
+            className="flex-1 bg-gray-200 text-gray-700 py-3 rounded-lg hover:bg-gray-300 transition-colors font-medium text-center"
+          >
+            주문 내역 보기
+          </Link>
+          <Link
+            href="/"
+            className="flex-1 bg-[#925C4C] text-white py-3 rounded-lg hover:bg-[#7a4c3e] transition-colors font-medium text-center"
+          >
+            쇼핑 계속하기
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/community/free/page.tsx b/frontend/src/app/community/free/page.tsx
new file mode 100644
index 0000000..32b0e65
--- /dev/null
+++ b/frontend/src/app/community/free/page.tsx
@@ -0,0 +1,213 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { getPosts } from '@/lib/api/community.api';
+import { PostListItem, CATEGORY_LABELS } from '@/types/community.types';
+
+export default function FreePage() {
+  const router = useRouter();
+  
+  const [posts, setPosts] = useState<PostListItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [isLastPage, setIsLastPage] = useState(false);
+  
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchInput, setSearchInput] = useState('');
+
+  const fetchPosts = async (page: number = 0, query?: string) => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const response = await getPosts('FREE', query, page, 10);
+      
+      setPosts(response.content);
+      setCurrentPage(response.page);
+      setTotalPages(response.totalPages);
+      setIsLastPage(response.last);
+    } catch (err: any) {
+      console.error('게시글 목록 조회 실패:', err);
+      setError(err.response?.data?.message || '게시글 목록을 불러오는데 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchPosts(0, searchQuery);
+  }, [searchQuery]);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setCurrentPage(0);
+    setSearchQuery(searchInput);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    fetchPosts(page, searchQuery);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handlePostClick = (postId: number) => {
+    router.push(`/community/posts/${postId}`);
+  };
+
+  const handleWriteClick = () => {
+    router.push('/community/posts/write');
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm">
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex justify-between items-center mb-4">
+          <h1 className="text-2xl font-bold text-gray-900">자유 게시판</h1>
+          <button
+            onClick={handleWriteClick}
+            className="px-4 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+          >
+            새 글쓰기
+          </button>
+        </div>
+
+        <form onSubmit={handleSearch} className="flex gap-2">
+          <input
+            type="text"
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            placeholder="검색어를 입력하세요"
+            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#925C4C]"
+          />
+          <button
+            type="submit"
+            className="px-6 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+          >
+            검색
+          </button>
+        </form>
+      </div>
+
+      <div className="p-6">
+        {isLoading && posts.length === 0 ? (
+          <div className="flex justify-center items-center py-12">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+          </div>
+        ) : error ? (
+          <div className="text-center py-12">
+            <p className="text-red-600">{error}</p>
+            <button
+              onClick={() => fetchPosts(0, searchQuery)}
+              className="mt-4 px-4 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+            >
+              다시 시도
+            </button>
+          </div>
+        ) : posts.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-gray-500">게시글이 없습니다.</p>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-4">
+              {posts.map((post) => (
+                <div
+                  key={post.id}
+                  onClick={() => handlePostClick(post.id)}
+                  className="border border-gray-200 rounded-lg p-4 hover:border-[#925C4C] cursor-pointer transition-colors"
+                >
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-32 h-32 bg-gray-100 rounded-lg overflow-hidden">
+                      {post.thumbnailUrl ? (
+                        <img
+                          src={post.thumbnailUrl}
+                          alt={post.title}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center text-gray-400">
+                          이미지
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="mb-2">
+                        <span className="inline-block px-2 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded">
+                          {CATEGORY_LABELS[post.category]}
+                        </span>
+                      </div>
+
+                      <h3 className="text-lg font-bold text-gray-900 mb-2 line-clamp-1">
+                        {post.title}
+                      </h3>
+
+                      <p className="text-gray-600 text-sm mb-3 line-clamp-2">
+                        {post.excerpt}
+                      </p>
+
+                      <div className="flex items-center gap-4 text-sm text-gray-500">
+                        <span>작성자 {post.authorDisplay}</span>
+                        <span>{new Date(post.createdAt).toLocaleDateString('ko-KR', {
+                          year: 'numeric',
+                          month: '2-digit',
+                          day: '2-digit',
+                          hour: '2-digit',
+                          minute: '2-digit'
+                        })}</span>
+                        <span>댓글수 {post.commentCount}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {totalPages > 1 && (
+              <div className="flex justify-center items-center gap-2 mt-8">
+                <button
+                  onClick={() => handlePageChange(currentPage - 1)}
+                  disabled={currentPage === 0}
+                  className="px-3 py-1 rounded border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                >
+                  이전
+                </button>
+
+                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                  const startPage = Math.max(0, Math.min(currentPage - 2, totalPages - 5));
+                  const page = startPage + i;
+                  
+                  return (
+                    <button
+                      key={page}
+                      onClick={() => handlePageChange(page)}
+                      className={`px-3 py-1 rounded ${
+                        currentPage === page
+                          ? 'bg-[#925C4C] text-white'
+                          : 'border border-gray-300 hover:bg-gray-50'
+                      }`}
+                    >
+                      {page + 1}
+                    </button>
+                  );
+                })}
+
+                <button
+                  onClick={() => handlePageChange(currentPage + 1)}
+                  disabled={isLastPage}
+                  className="px-3 py-1 rounded border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                >
+                  다음
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/community/layout.tsx b/frontend/src/app/community/layout.tsx
new file mode 100644
index 0000000..1431b9f
--- /dev/null
+++ b/frontend/src/app/community/layout.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { ReactNode } from 'react';
+
+interface CommunityLayoutProps {
+  children: ReactNode;
+}
+
+const menuItems = [
+  { label: '전체', href: '/community' },
+  { label: '자유', href: '/community/free' },
+  { label: '질문', href: '/community/question' },
+  { label: '팁', href: '/community/tip' },
+];
+
+export default function CommunityLayout({ children }: CommunityLayoutProps) {
+  const pathname = usePathname();
+
+  const isActive = (href: string) => {
+    return pathname === href;
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="flex gap-8">
+        {/* 왼쪽 사이드바 */}
+        <aside className="w-48 flex-shrink-0">
+          <nav className="sticky top-8">
+            <ul className="space-y-1">
+              {menuItems.map((item) => (
+                <li key={item.href}>
+                  <Link
+                    href={item.href}
+                    className={`block px-4 py-2 rounded-lg transition-colors ${
+                      isActive(item.href)
+                        ? 'bg-[#925C4C] text-white font-semibold'
+                        : 'text-gray-700 hover:bg-gray-100'
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </aside>
+
+        {/* 메인 컨텐츠 */}
+        <main className="flex-1 min-w-0">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/community/page.tsx b/frontend/src/app/community/page.tsx
new file mode 100644
index 0000000..bcbbf5a
--- /dev/null
+++ b/frontend/src/app/community/page.tsx
@@ -0,0 +1,230 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { getPosts } from '@/lib/api/community.api';
+import { PostListItem, CATEGORY_LABELS } from '@/types/community.types';
+
+export default function CommunityPage() {
+  const router = useRouter();
+  
+  const [posts, setPosts] = useState<PostListItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  // 페이지네이션
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [isLastPage, setIsLastPage] = useState(false);
+  
+  // 검색
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchInput, setSearchInput] = useState('');
+
+  // 게시글 목록 조회 (전체)
+  const fetchPosts = async (page: number = 0, query?: string) => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const response = await getPosts(null, query, page, 10);
+      
+      setPosts(response.content);
+      setCurrentPage(response.page);
+      setTotalPages(response.totalPages);
+      setIsLastPage(response.last);
+    } catch (err: any) {
+      console.error('게시글 목록 조회 실패:', err);
+      setError(err.response?.data?.message || '게시글 목록을 불러오는데 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchPosts(0, searchQuery);
+  }, [searchQuery]);
+
+  // 검색 처리
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setCurrentPage(0);
+    setSearchQuery(searchInput);
+  };
+
+  // 페이지 변경
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    fetchPosts(page, searchQuery);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  // 게시글 상세로 이동
+  const handlePostClick = (postId: number) => {
+    router.push(`/community/posts/${postId}`);
+  };
+
+  // 글쓰기 버튼
+  const handleWriteClick = () => {
+    router.push('/community/posts/write');
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm">
+      {/* 헤더 */}
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex justify-between items-center mb-4">
+          <h1 className="text-2xl font-bold text-gray-900">커뮤니티</h1>
+          <button
+            onClick={handleWriteClick}
+            className="px-4 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+          >
+            새 글쓰기
+          </button>
+        </div>
+
+        {/* 검색 */}
+        <form onSubmit={handleSearch} className="flex gap-2">
+          <input
+            type="text"
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            placeholder="검색어를 입력하세요"
+            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#925C4C]"
+          />
+          <button
+            type="submit"
+            className="px-6 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+          >
+            검색
+          </button>
+        </form>
+      </div>
+
+      {/* 게시글 목록 */}
+      <div className="p-6">
+        {isLoading && posts.length === 0 ? (
+          <div className="flex justify-center items-center py-12">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+          </div>
+        ) : error ? (
+          <div className="text-center py-12">
+            <p className="text-red-600">{error}</p>
+            <button
+              onClick={() => fetchPosts(0, searchQuery)}
+              className="mt-4 px-4 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+            >
+              다시 시도
+            </button>
+          </div>
+        ) : posts.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-gray-500">게시글이 없습니다.</p>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-4">
+              {posts.map((post) => (
+                <div
+                  key={post.id}
+                  onClick={() => handlePostClick(post.id)}
+                  className="border border-gray-200 rounded-lg p-4 hover:border-[#925C4C] cursor-pointer transition-colors"
+                >
+                  <div className="flex gap-4">
+                    {/* 썸네일 */}
+                    <div className="flex-shrink-0 w-32 h-32 bg-gray-100 rounded-lg overflow-hidden">
+                      {post.thumbnailUrl ? (
+                        <img
+                          src={post.thumbnailUrl}
+                          alt={post.title}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center text-gray-400">
+                          이미지
+                        </div>
+                      )}
+                    </div>
+
+                    {/* 내용 */}
+                    <div className="flex-1 min-w-0">
+                      {/* 카테고리 */}
+                      <div className="mb-2">
+                        <span className="inline-block px-2 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded">
+                          {CATEGORY_LABELS[post.category]}
+                        </span>
+                      </div>
+
+                      {/* 제목 */}
+                      <h3 className="text-lg font-bold text-gray-900 mb-2 line-clamp-1">
+                        {post.title}
+                      </h3>
+
+                      {/* 내용 미리보기 */}
+                      <p className="text-gray-600 text-sm mb-3 line-clamp-2">
+                        {post.excerpt}
+                      </p>
+
+                      {/* 메타 정보 */}
+                      <div className="flex items-center gap-4 text-sm text-gray-500">
+                        <span>작성자 {post.authorDisplay}</span>
+                        <span>{new Date(post.createdAt).toLocaleDateString('ko-KR', {
+                          year: 'numeric',
+                          month: '2-digit',
+                          day: '2-digit',
+                          hour: '2-digit',
+                          minute: '2-digit'
+                        })}</span>
+                        <span>댓글수 {post.commentCount}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* 페이지네이션 */}
+            {totalPages > 1 && (
+              <div className="flex justify-center items-center gap-2 mt-8">
+                <button
+                  onClick={() => handlePageChange(currentPage - 1)}
+                  disabled={currentPage === 0}
+                  className="px-3 py-1 rounded border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                >
+                  이전
+                </button>
+
+                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                  const startPage = Math.max(0, Math.min(currentPage - 2, totalPages - 5));
+                  const page = startPage + i;
+                  
+                  return (
+                    <button
+                      key={page}
+                      onClick={() => handlePageChange(page)}
+                      className={`px-3 py-1 rounded ${
+                        currentPage === page
+                          ? 'bg-[#925C4C] text-white'
+                          : 'border border-gray-300 hover:bg-gray-50'
+                      }`}
+                    >
+                      {page + 1}
+                    </button>
+                  );
+                })}
+
+                <button
+                  onClick={() => handlePageChange(currentPage + 1)}
+                  disabled={isLastPage}
+                  className="px-3 py-1 rounded border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                >
+                  다음
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/community/question/page.tsx b/frontend/src/app/community/question/page.tsx
new file mode 100644
index 0000000..3c1dfec
--- /dev/null
+++ b/frontend/src/app/community/question/page.tsx
@@ -0,0 +1,213 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { getPosts } from '@/lib/api/community.api';
+import { PostListItem, CATEGORY_LABELS } from '@/types/community.types';
+
+export default function QuestionPage() {
+  const router = useRouter();
+  
+  const [posts, setPosts] = useState<PostListItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [isLastPage, setIsLastPage] = useState(false);
+  
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchInput, setSearchInput] = useState('');
+
+  const fetchPosts = async (page: number = 0, query?: string) => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const response = await getPosts('QUESTION', query, page, 10);
+      
+      setPosts(response.content);
+      setCurrentPage(response.page);
+      setTotalPages(response.totalPages);
+      setIsLastPage(response.last);
+    } catch (err: any) {
+      console.error('게시글 목록 조회 실패:', err);
+      setError(err.response?.data?.message || '게시글 목록을 불러오는데 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchPosts(0, searchQuery);
+  }, [searchQuery]);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setCurrentPage(0);
+    setSearchQuery(searchInput);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    fetchPosts(page, searchQuery);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handlePostClick = (postId: number) => {
+    router.push(`/community/posts/${postId}`);
+  };
+
+  const handleWriteClick = () => {
+    router.push('/community/posts/write');
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm">
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex justify-between items-center mb-4">
+          <h1 className="text-2xl font-bold text-gray-900">질문 게시판</h1>
+          <button
+            onClick={handleWriteClick}
+            className="px-4 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+          >
+            새 글쓰기
+          </button>
+        </div>
+
+        <form onSubmit={handleSearch} className="flex gap-2">
+          <input
+            type="text"
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            placeholder="검색어를 입력하세요"
+            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#925C4C]"
+          />
+          <button
+            type="submit"
+            className="px-6 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+          >
+            검색
+          </button>
+        </form>
+      </div>
+
+      <div className="p-6">
+        {isLoading && posts.length === 0 ? (
+          <div className="flex justify-center items-center py-12">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+          </div>
+        ) : error ? (
+          <div className="text-center py-12">
+            <p className="text-red-600">{error}</p>
+            <button
+              onClick={() => fetchPosts(0, searchQuery)}
+              className="mt-4 px-4 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+            >
+              다시 시도
+            </button>
+          </div>
+        ) : posts.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-gray-500">게시글이 없습니다.</p>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-4">
+              {posts.map((post) => (
+                <div
+                  key={post.id}
+                  onClick={() => handlePostClick(post.id)}
+                  className="border border-gray-200 rounded-lg p-4 hover:border-[#925C4C] cursor-pointer transition-colors"
+                >
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-32 h-32 bg-gray-100 rounded-lg overflow-hidden">
+                      {post.thumbnailUrl ? (
+                        <img
+                          src={post.thumbnailUrl}
+                          alt={post.title}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center text-gray-400">
+                          이미지
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="mb-2">
+                        <span className="inline-block px-2 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded">
+                          {CATEGORY_LABELS[post.category]}
+                        </span>
+                      </div>
+
+                      <h3 className="text-lg font-bold text-gray-900 mb-2 line-clamp-1">
+                        {post.title}
+                      </h3>
+
+                      <p className="text-gray-600 text-sm mb-3 line-clamp-2">
+                        {post.excerpt}
+                      </p>
+
+                      <div className="flex items-center gap-4 text-sm text-gray-500">
+                        <span>작성자 {post.authorDisplay}</span>
+                        <span>{new Date(post.createdAt).toLocaleDateString('ko-KR', {
+                          year: 'numeric',
+                          month: '2-digit',
+                          day: '2-digit',
+                          hour: '2-digit',
+                          minute: '2-digit'
+                        })}</span>
+                        <span>댓글수 {post.commentCount}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {totalPages > 1 && (
+              <div className="flex justify-center items-center gap-2 mt-8">
+                <button
+                  onClick={() => handlePageChange(currentPage - 1)}
+                  disabled={currentPage === 0}
+                  className="px-3 py-1 rounded border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                >
+                  이전
+                </button>
+
+                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                  const startPage = Math.max(0, Math.min(currentPage - 2, totalPages - 5));
+                  const page = startPage + i;
+                  
+                  return (
+                    <button
+                      key={page}
+                      onClick={() => handlePageChange(page)}
+                      className={`px-3 py-1 rounded ${
+                        currentPage === page
+                          ? 'bg-[#925C4C] text-white'
+                          : 'border border-gray-300 hover:bg-gray-50'
+                      }`}
+                    >
+                      {page + 1}
+                    </button>
+                  );
+                })}
+
+                <button
+                  onClick={() => handlePageChange(currentPage + 1)}
+                  disabled={isLastPage}
+                  className="px-3 py-1 rounded border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                >
+                  다음
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/community/tip/page.tsx b/frontend/src/app/community/tip/page.tsx
new file mode 100644
index 0000000..ffed6b9
--- /dev/null
+++ b/frontend/src/app/community/tip/page.tsx
@@ -0,0 +1,213 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { getPosts } from '@/lib/api/community.api';
+import { PostListItem, CATEGORY_LABELS } from '@/types/community.types';
+
+export default function TipPage() {
+  const router = useRouter();
+  
+  const [posts, setPosts] = useState<PostListItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [isLastPage, setIsLastPage] = useState(false);
+  
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchInput, setSearchInput] = useState('');
+
+  const fetchPosts = async (page: number = 0, query?: string) => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const response = await getPosts('TIP', query, page, 10);
+      
+      setPosts(response.content);
+      setCurrentPage(response.page);
+      setTotalPages(response.totalPages);
+      setIsLastPage(response.last);
+    } catch (err: any) {
+      console.error('게시글 목록 조회 실패:', err);
+      setError(err.response?.data?.message || '게시글 목록을 불러오는데 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchPosts(0, searchQuery);
+  }, [searchQuery]);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setCurrentPage(0);
+    setSearchQuery(searchInput);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    fetchPosts(page, searchQuery);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handlePostClick = (postId: number) => {
+    router.push(`/community/posts/${postId}`);
+  };
+
+  const handleWriteClick = () => {
+    router.push('/community/posts/write');
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm">
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex justify-between items-center mb-4">
+          <h1 className="text-2xl font-bold text-gray-900">팁 게시판</h1>
+          <button
+            onClick={handleWriteClick}
+            className="px-4 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+          >
+            새 글쓰기
+          </button>
+        </div>
+
+        <form onSubmit={handleSearch} className="flex gap-2">
+          <input
+            type="text"
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            placeholder="검색어를 입력하세요"
+            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#925C4C]"
+          />
+          <button
+            type="submit"
+            className="px-6 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+          >
+            검색
+          </button>
+        </form>
+      </div>
+
+      <div className="p-6">
+        {isLoading && posts.length === 0 ? (
+          <div className="flex justify-center items-center py-12">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+          </div>
+        ) : error ? (
+          <div className="text-center py-12">
+            <p className="text-red-600">{error}</p>
+            <button
+              onClick={() => fetchPosts(0, searchQuery)}
+              className="mt-4 px-4 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+            >
+              다시 시도
+            </button>
+          </div>
+        ) : posts.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-gray-500">게시글이 없습니다.</p>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-4">
+              {posts.map((post) => (
+                <div
+                  key={post.id}
+                  onClick={() => handlePostClick(post.id)}
+                  className="border border-gray-200 rounded-lg p-4 hover:border-[#925C4C] cursor-pointer transition-colors"
+                >
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-32 h-32 bg-gray-100 rounded-lg overflow-hidden">
+                      {post.thumbnailUrl ? (
+                        <img
+                          src={post.thumbnailUrl}
+                          alt={post.title}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center text-gray-400">
+                          이미지
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="mb-2">
+                        <span className="inline-block px-2 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded">
+                          {CATEGORY_LABELS[post.category]}
+                        </span>
+                      </div>
+
+                      <h3 className="text-lg font-bold text-gray-900 mb-2 line-clamp-1">
+                        {post.title}
+                      </h3>
+
+                      <p className="text-gray-600 text-sm mb-3 line-clamp-2">
+                        {post.excerpt}
+                      </p>
+
+                      <div className="flex items-center gap-4 text-sm text-gray-500">
+                        <span>작성자 {post.authorDisplay}</span>
+                        <span>{new Date(post.createdAt).toLocaleDateString('ko-KR', {
+                          year: 'numeric',
+                          month: '2-digit',
+                          day: '2-digit',
+                          hour: '2-digit',
+                          minute: '2-digit'
+                        })}</span>
+                        <span>댓글수 {post.commentCount}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {totalPages > 1 && (
+              <div className="flex justify-center items-center gap-2 mt-8">
+                <button
+                  onClick={() => handlePageChange(currentPage - 1)}
+                  disabled={currentPage === 0}
+                  className="px-3 py-1 rounded border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                >
+                  이전
+                </button>
+
+                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                  const startPage = Math.max(0, Math.min(currentPage - 2, totalPages - 5));
+                  const page = startPage + i;
+                  
+                  return (
+                    <button
+                      key={page}
+                      onClick={() => handlePageChange(page)}
+                      className={`px-3 py-1 rounded ${
+                        currentPage === page
+                          ? 'bg-[#925C4C] text-white'
+                          : 'border border-gray-300 hover:bg-gray-50'
+                      }`}
+                    >
+                      {page + 1}
+                    </button>
+                  );
+                })}
+
+                <button
+                  onClick={() => handlePageChange(currentPage + 1)}
+                  disabled={isLastPage}
+                  className="px-3 py-1 rounded border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                >
+                  다음
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/CommunityLayout.tsx b/frontend/src/app/components/CommunityLayout.tsx
new file mode 100644
index 0000000..bee0bd9
--- /dev/null
+++ b/frontend/src/app/components/CommunityLayout.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { ReactNode } from 'react';
+
+interface MyPageLayoutProps {
+  children: ReactNode;
+}
+
+const menuItems = [
+  { label: '전체', href: '/community', exact: true },
+  { label: '자유', href: '/community?category=FREE', category: 'FREE' },
+  { label: '질문', href: '/community?category=QUESTION', category: 'QUESTION' },
+  { label: '팁', href: '/community?category=TIP', category: 'TIP' },
+];
+
+export default function MyPageLayout({ children }: MyPageLayoutProps) {
+  const pathname = usePathname();
+
+  const isActive = (href: string, exact?: boolean) => {
+    if (exact) {
+      return pathname === href;
+    }
+    return pathname.startsWith(href);
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="flex gap-8">
+        {/* 왼쪽 사이드바 */}
+        <aside className="w-48 flex-shrink-0">
+          <nav className="sticky top-8">
+            <ul className="space-y-1">
+              {menuItems.map((item) => (
+                <li key={item.href}>
+                  <Link
+                    href={item.href}
+                    className={`block px-4 py-2 rounded-lg transition-colors ${
+                      isActive(item.href, item.exact)
+                        ? 'bg-[#925C4C] text-white font-semibold'
+                        : 'text-gray-700 hover:bg-gray-100'
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </aside>
+
+        {/* 메인 컨텐츠 */}
+        <main className="flex-1 min-w-0">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/DesignForm.tsx b/frontend/src/app/components/DesignForm.tsx
new file mode 100644
index 0000000..388da0f
--- /dev/null
+++ b/frontend/src/app/components/DesignForm.tsx
@@ -0,0 +1,522 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import api from '@/lib/api/axios';
+import { ProductRegisterResponse, ProductModifyResponse } from '@/types/product.types';
+
+// 1. 폼 데이터 타입
+export interface DesignSalesData {
+  id: string; // 상품 ID (productId)
+  name: string; // 상품 이름 (사용자가 입력/수정 가능)
+  registeredAt?: string; // (수정) 등록일은 이제 필수가 아님 (수정 시에만 표시)
+  images: string[]; // 기존 샘플 이미지 URL 목록
+  category: '상의' | '하의' | '아우터' | '가방' | '기타' | ''; // (수정) '가방' 추가
+  price: number;
+  isFree: boolean;
+  isLimited: boolean;
+  stock: number;
+  description: string;
+  designType: string; // 구분
+  size: string; // 사이즈
+}
+
+// (가정) '판매 등록' 시 받아올 *기본* 도안 정보 타입
+// (수정) 등록일(registeredAt) 제거 - 이제 필요 없음
+export interface BaseDesignData {
+  id: string; // 도안 ID (designId)
+  name: string; // 원본 도안 PDF 이름 (참고용, 수정 불가)
+}
+
+// 2. 컴포넌트 Props 정의
+interface DesignFormProps {
+  isEditMode: boolean; // true: 수정 모드, false: 등록 모드
+  initialData?: Partial<DesignSalesData> | Partial<BaseDesignData>; // 타입은 그대로 유지
+  entityId: string; // 등록 시: designId, 수정 시: productId
+}
+
+const mapCategoryToEnum = (
+  category: DesignSalesData['category']
+): string => {
+  switch (category) {
+    case '상의':
+      return 'TOP';
+    case '하의':
+      return 'BOTTOM';
+    case '아우터':
+      return 'OUTER';
+    case '가방':
+      return 'BAG';
+    case '기타':
+      return 'ETC';
+    default:
+      return ''; // 혹은 오류 처리
+  }
+};
+
+// 3. 컴포넌트 함수 이름
+export default function DesignForm({
+  isEditMode,
+  initialData,
+  entityId,
+}: DesignFormProps) {
+  const router = useRouter();
+
+  // 4. 폼 상태 관리
+  const [name, setName] = useState('');
+  const [originalDesignName, setOriginalDesignName] = useState('');
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [imagePreviews, setImagePreviews] = useState<string[]>([]);
+  const [existingImages, setExistingImages] = useState<string[]>([]);
+  const [category, setCategory] = useState<DesignSalesData['category']>('');
+  const [price, setPrice] = useState<number | string>('');
+  const [isFree, setIsFree] = useState(false);
+  const [isLimited, setIsLimited] = useState(false);
+  const [stock, setStock] = useState<number | string>('');
+  const [description, setDescription] = useState('');
+  const [designType, setDesignType] = useState('');
+  const [size, setSize] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // 5. 초기 데이터 설정 (수정)
+  useEffect(() => {
+    if (initialData) {
+      // 등록 모드: 원본 PDF 이름만 참고용으로 저장
+      if (!isEditMode) {
+        setOriginalDesignName(initialData.name || '원본 이름 로드 실패');
+        // 상품 이름은 빈 칸으로 시작
+        setName('');
+      }
+      // 수정 모드: 모든 데이터 채우기 (상품 이름 포함)
+      else if ('price' in initialData) {
+        const data = initialData as DesignSalesData;
+        setName(data.name || ''); // 수정 시에는 기존 상품 이름 로드
+        setOriginalDesignName(data.name || ''); // 수정 시 참고용 이름도 일단 상품명으로
+        setExistingImages(data.images || []);
+        setCategory(data.category || '');
+        setPrice(data.price || 0);
+        setIsFree(data.isFree || false);
+        setIsLimited(data.isLimited || false);
+        setStock(data.stock || 0);
+        setDescription(data.description || '');
+        setDesignType(data.designType || '');
+        setSize(data.size || '');
+      }
+    }
+  }, [initialData, isEditMode]);
+
+  // 6. 이미지 파일 핸들러 (이하 동일)
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const files = Array.from(e.target.files);
+      if (files.length + existingImages.length > 10) {
+        alert('샘플 이미지는 최대 10개까지 등록할 수 있습니다.');
+        return;
+      }
+      const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
+      const invalidFiles = files.filter(
+        (file) => !allowedTypes.includes(file.type)
+      );
+      if (invalidFiles.length > 0) {
+        alert('png, jpg, jpeg 파일 형식만 등록할 수 있습니다.');
+        return;
+      }
+      setSelectedFiles(files);
+      const previews = files.map((file) => URL.createObjectURL(file));
+      setImagePreviews(previews);
+    }
+  };
+
+  const handleRemoveExistingImage = (index: number) => {
+    const updated = [...existingImages];
+    updated.splice(index, 1);
+    setExistingImages(updated);
+  };
+  
+
+  // 7. '무료' 체크박스 핸들러
+  const handleFreeCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const checked = e.target.checked;
+    setIsFree(checked);
+    if (checked) setPrice(0);
+  };
+
+  // 8. '한정' 체크박스 핸들러
+  const handleLimitedCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const checked = e.target.checked;
+    setIsLimited(checked);
+    if (checked) {
+      setStock(''); // 한정 체크 시 재고 입력칸을 빈칸으로 초기화
+    } else {
+      setStock(''); // 한정 해제 시 재고값 초기화 (0으로 고정 X)
+    }
+  };
+
+  console.log('카테고리 값:', category);
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!name.trim() && isEditMode) {
+      alert('상품 이름을 입력해주세요.');
+      return;
+    }
+    if (!category) {
+      alert('카테고리를 선택해주세요.');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    // ▼▼▼ [수정] Access Token을 localStorage에서 가져오는 로직 추가 ▼▼▼
+    const accessToken = localStorage.getItem('accessToken'); 
+        
+    // 1. 토큰 유효성 검사 (없으면 인증 실패 처리)
+    if (!accessToken) {
+        setError('로그인이 필요합니다.');
+        setIsLoading(false);
+        return;
+    }
+
+
+    const formData = new FormData();
+    let endpoint = '';
+    let method = '';
+    
+    // --- 백엔드 ProductRegisterRequest DTO와 필드명 일치 ---
+
+    // 1. DTO의 'title' 필드
+    formData.append('title', name.trim());
+    
+    // 2. DTO의 'description' 필드
+    formData.append('description', description);
+    
+    // 3. DTO의 'productCategory' 필드 (Enum 값으로 매핑)
+    formData.append('productCategory', mapCategoryToEnum(category));
+    
+    // 4. DTO의 'sizeInfo' 필드
+    formData.append('sizeInfo', size); 
+    
+    // 5. DTO의 'price' 필드
+    formData.append('price', String(isFree ? 0 : price));
+    
+    // 6. DTO의 'stockQuantity' 필드 (한정 판매일 때만 전송)
+    if (isLimited) {
+      formData.append('stockQuantity', String(stock));
+    }
+    
+    // 7. DTO의 'productImageUrls' 필드 (List<MultipartFile>)
+    selectedFiles.forEach((file) => {
+      formData.append('productImageUrls', file);
+    });
+
+    try {
+      if (isEditMode) {
+        const endpoint = `http://localhost:8080/my/products/${entityId}/modify`;
+
+        existingImages.forEach((url) => {
+          formData.append('existingImageUrls', url);
+        });
+
+        const res = await fetch(endpoint, {
+          method: 'PATCH',
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+          body: formData, // DTO: ProductModifyRequest
+        });
+      
+        if (!res.ok) throw new Error('상품 수정 실패');
+        const responseData: ProductModifyResponse = await res.json();
+        alert(`상품(ID: ${responseData.productId}) 수정이 완료되었습니다.`);
+        router.push('/mypage/design');
+        return;
+      }
+      
+
+
+      const endpoint = `http://localhost:8080/my/products/${entityId}/sale`;
+
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          // fetch API에서 FormData를 사용할 때 Content-Type은 명시하지 않습니다.
+          // 브라우저가 자동으로 'multipart/form-data; boundary=...'를 설정합니다.
+          'Authorization': `Bearer ${accessToken}`, // 👈 인증 헤더만 명시적으로 삽입
+        },
+        body: formData, // FormData 객체를 body에 직접 넣습니다.
+      });
+
+      if (!res.ok) {
+          if (res.status === 401) {
+              throw new Error('인증에 실패했습니다. 다시 로그인해주세요.');
+          }
+          // 백엔드에서 JSON 에러 응답을 주지 않을 수 있으므로 안전하게 처리
+          const errorText = await res.text();
+          try {
+             const errorData = JSON.parse(errorText);
+             throw new Error(errorData.message || `요청 실패 (Status: ${res.status})`);
+          } catch {
+             // JSON 파싱 실패 시 기본 메시지 사용
+             throw new Error(`요청 실패 (Status: ${res.status})`);
+          }
+      }
+      
+      // 성공 시 응답을 JSON으로 파싱
+      const responseData: ProductRegisterResponse = await res.json();
+
+      alert(`상품(ID: ${responseData.productId})이 등록되었습니다.`);
+      router.push('/mypage/design'); // (가정) 등록 후 내 도안 목록으로 이동
+
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message || '요청 처리에 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 폼 UI 렌더링
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="bg-white shadow-lg rounded-lg p-8 space-y-6"
+    >
+      {/* (수정) 도안 이름 -> 상품 이름으로 변경, 입력 가능하도록 수정 */}
+      <FormRow label="상품 이름">
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="판매할 상품의 이름을 입력하세요"
+          required // 이름은 필수 입력
+          className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#925C4C] focus:border-transparent transition-colors"
+        />
+        {/* (추가) 원본 PDF 이름 참고용 표시 (등록 시에만) */}
+        {!isEditMode && originalDesignName && (
+           <p className="text-sm text-gray-500 mt-1">
+             (원본 도안 파일명: {originalDesignName})
+           </p>
+        )}
+      </FormRow>
+
+      {/* 샘플 이미지 등록 */}
+      <FormRow label="샘플 이미지">
+        <input
+          type="file"
+          multiple
+          accept=".png,.jpg,.jpeg"
+          onChange={handleImageChange}
+          className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#925C4C] focus:border-transparent transition-colors"
+        />
+        <p className="text-sm text-gray-500 mt-1">
+          최대 10개, png/jpg/jpeg 형식만 가능합니다.
+        </p>
+
+        {/* ✅ 기존 이미지 미리보기 + 삭제 버튼 */}
+        <div className="flex flex-wrap gap-2 mt-2">
+        {existingImages?.length > 0 && (
+          <div className="flex flex-wrap gap-2 mt-2">
+            {existingImages.map((imgUrl, index) => (
+              <div key={`exist-${index}`} className="relative">
+                <img
+                  src={imgUrl}
+                  alt="기존 이미지"
+                  className="w-24 h-24 object-cover rounded"
+                />
+                <button
+                  type="button"
+                  onClick={() => handleRemoveExistingImage(index)}
+                  className="absolute top-0 right-0 bg-black bg-opacity-50 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-opacity-70"
+                >
+                  ✕
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+
+          {/* ✅ 새로 첨부한 이미지 */}
+          {imagePreviews.map((previewUrl, index) => (
+            <div key={`new-${index}`} className="relative">
+              <img
+                src={previewUrl}
+                alt="새 이미지"
+                className="w-24 h-24 object-cover rounded"
+              />
+            </div>
+          ))}
+        </div>
+      </FormRow>
+
+
+      {/* 카테고리 (수정: '가방' 추가) */}
+      <FormRow label="카테고리">
+        <select
+          value={category}
+          onChange={(e) =>
+            setCategory(e.target.value as DesignSalesData['category'])
+          }
+          required
+          className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#925C4C] focus:border-transparent transition-colors"
+        >
+          <option value="">선택하세요</option>
+          <option value="상의">상의</option>
+          <option value="하의">하의</option>
+          <option value="아우터">아우터</option>
+          <option value="가방">가방</option> {/* 추가됨 */}
+          <option value="기타">기타</option>
+        </select>
+      </FormRow>
+
+
+      {/* 가격 */}
+      <FormRow label="가격">
+        <div className="flex items-center gap-4">
+          <input
+            type="number"
+            value={isFree ? '' : price === 0 ? '' : price}
+            onChange={(e) => {
+              const value = e.target.value;
+              if (value === '') setPrice('');
+              else setPrice(Number(value));
+            }}
+            placeholder="가격을 입력하세요"
+            required={!isFree}
+            min="0"
+            disabled={isFree || isEditMode} // ✅ 수정 모드/무료일 때 모두 비활성화
+            className={
+              isFree || isEditMode
+                ? 'w-32 p-2 border border-gray-300 rounded-md bg-gray-100 text-gray-500 cursor-not-allowed'
+                : 'w-32 p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#925C4C] focus:border-transparent transition-colors'
+            }
+          />
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={isFree}
+              onChange={(e) => setIsFree(e.target.checked)}
+              disabled={isEditMode} // ✅ 수정 모드에서는 무료 체크박스도 비활성화
+              className="w-5 h-5 text-[#925C4C] rounded border-gray-300 focus:ring-[#925C4C]"
+            />
+            무료
+          </label>
+        </div>
+
+        {/* 안내 문구 처리 */}
+        {isEditMode ? (
+          <p className="text-sm text-gray-500 mt-1">
+            등록된 상품의 가격은 수정할 수 없습니다.
+          </p>
+        ) : isFree ? (
+          <p className="text-sm text-gray-500 mt-1">
+            무료 상품은 가격을 입력할 수 없습니다.
+          </p>
+        ) : null}
+      </FormRow>
+
+
+
+      {/* 한정 여부 */}
+      <FormRow label="한정 여부">
+        <div className="flex items-center gap-4">
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={isLimited}
+              onChange={handleLimitedCheck}
+              className="w-5 h-5 text-[#925C4C] rounded border-gray-300 focus:ring-[#925C4C]"
+            />
+            한정
+          </label>
+
+          {isLimited && (
+            <input
+              type="number"
+              value={stock === 0 ? '' : stock} // 0일 경우 빈 문자열로 표시
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value === '') setStock(''); // 사용자가 모두 지우면 빈 문자열로 유지
+                else setStock(Number(value));   // 숫자 입력 시 변환
+              }}
+              placeholder="재고 입력"
+              required={isLimited}
+              min="0"
+              className="w-32 p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#925C4C] focus:border-transparent transition-colors"
+            />
+          )}
+        </div>
+      </FormRow>
+
+
+      {/* 도안 설명 */}
+      <FormRow label="도안 설명">
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          rows={5}
+          className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#925C4C] focus:border-transparent transition-colors"
+          placeholder="도안에 대해 설명해주세요."
+        />
+      </FormRow>
+
+      {/* 구분 */}
+      <FormRow label="구분">
+        <input
+          type="text"
+          value={designType}
+          onChange={(e) => setDesignType(e.target.value)}
+          className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#925C4C] focus:border-transparent transition-colors"
+          placeholder="예: 코바늘, 대바늘"
+        />
+      </FormRow>
+
+      {/* 사이즈 */}
+      <FormRow label="사이즈">
+        <input
+          type="text"
+          value={size}
+          onChange={(e) => setSize(e.target.value)}
+          className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#925C4C] focus:border-transparent transition-colors"
+          placeholder="예: S, M, L 또는 가슴단면 50cm"
+        />
+      </FormRow>
+
+      {/* 에러 메시지 */}
+      {error && <p className="text-red-600 text-sm">{error}</p>}
+
+      {/* 제출 버튼 */}
+      <div className="flex justify-end pt-4">
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="bg-[#925C4C] text-white px-6 py-2 rounded-lg hover:bg-[#7a4c3e] transition-colors font-semibold disabled:bg-gray-400"
+        >
+          {isLoading
+            ? '처리 중...'
+            : isEditMode
+            ? '수정하기'
+            : '판매 등록'}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+// 폼 레이아웃을 위한 공용 컴포넌트
+const FormRow = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) => (
+  <div>
+    <label className="block text-lg font-semibold text-gray-800 mb-2">
+      {label}
+    </label>
+    {children}
+  </div>
+);
\ No newline at end of file
diff --git a/frontend/src/app/event/page.tsx b/frontend/src/app/event/page.tsx
new file mode 100644
index 0000000..ac2ec83
--- /dev/null
+++ b/frontend/src/app/event/page.tsx
@@ -0,0 +1,15 @@
+"use client"; 
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+
+export default function EventPage() {
+    const router = useRouter();
+  
+    useEffect(() => {
+      alert("아직 구현되되지 않은 페이지 입니다.");
+      router.back(); 
+    }, [router]); 
+    return null;
+  }
\ No newline at end of file
diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/frontend/src/app/favicon.ico differ
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
new file mode 100644
index 0000000..a2dc41e
--- /dev/null
+++ b/frontend/src/app/globals.css
@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
new file mode 100644
index 0000000..7cc489c
--- /dev/null
+++ b/frontend/src/app/layout.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import "./globals.css";
+import Image from "next/image";
+import Link from "next/link";
+import { useAuthStore } from "@/lib/store/authStore";
+import { useEffect, useState } from "react";
+import LoginModal from "@/components/common/LoginModal/LoginModal";
+
+export default function RootLayout({
+                                       children,
+                                   }: {
+    children: React.ReactNode;
+}) {
+    const { user, logout, initAuth, isLoading } = useAuthStore();
+    const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+    const [isClient, setIsClient] = useState(false);
+
+    // 클라이언트 사이드에서만 실행
+    useEffect(() => {
+        setIsClient(true);
+        initAuth(); // 초기 로그인 상태 확인
+    }, [initAuth]);
+
+    const handleLogout = async () => {
+        if (confirm('로그아웃 하시겠습니까?')) {
+            await logout();
+            window.location.href = '/'; // 홈으로 리다이렉트
+        }
+    };
+
+    // 서버 사이드 렌더링 중에는 로그인 상태를 표시하지 않음
+    const userStatus = isClient && user ? 1 : 0;
+
+    return (
+        <html lang="ko">
+        <body className="antialiased">
+        {/* Header */}
+        <header className="flex items-center justify-between px-8 h-16 border-b border-gray-200">
+            {/* 왼쪽 로고 */}
+            <div className="flex-shrink-0">
+                <Link href="/">
+                    <Image src="/logo.png" alt="Logo" width={120} height={40} />
+                </Link>
+            </div>
+
+            {/* 가운데 메뉴 */}
+            <nav className="flex-1 flex justify-between max-w-lg mx-auto">
+                <Link href="/product" className="hover:text-[#925C4C] transition-colors">
+                    도안구매
+                </Link>
+                <Link href="/mypage/design/create-design" className="hover:text-[#925C4C] transition-colors">
+                    도안제작
+                </Link>
+                <Link href="/community" className="hover:text-[#925C4C] transition-colors">
+                    커뮤니티
+                </Link>
+                <Link href="/event" className="hover:text-[#925C4C] transition-colors">
+                    이벤트
+                </Link>
+            </nav>
+
+            {/* 오른쪽 로그인/로그아웃 버튼 */}
+            <nav className="flex items-center gap-4">
+                {userStatus === 1 && (
+                    <Link
+                        href="/cart"
+                        className="text-[#925C4C] hover:text-[#7a4a3d] transition-colors"
+                    >
+                        장바구니
+                    </Link>
+                )}
+
+                <div className="flex items-center gap-2">
+                    {userStatus === 1 ? (
+                        <>
+                            <Link
+                                href="/mypage"
+                                className="px-4 py-2 text-[#925C4C] hover:text-[#7a4a3d] transition-colors"
+                            >
+                                마이페이지
+                            </Link>
+                            <button
+                                onClick={handleLogout}
+                                className="px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors"
+                            >
+                                로그아웃
+                            </button>
+                        </>
+                    ) : (
+                        <button
+                            onClick={() => setIsLoginModalOpen(true)}
+                            className="px-4 py-2 text-[#925C4C] hover:text-[#7a4a3d] transition-colors font-medium"
+                        >
+                            로그인/회원가입
+                        </button>
+                    )}
+                </div>
+            </nav>
+        </header>
+
+        <main className="p-10 px-20 py-20">{children}</main>
+
+        {/* 로그인 모달 */}
+        <LoginModal
+            isOpen={isLoginModalOpen}
+            onClose={() => setIsLoginModalOpen(false)}
+        />
+        </body>
+        </html>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/app/mypage/comment/page.tsx b/frontend/src/app/mypage/comment/page.tsx
new file mode 100644
index 0000000..d4fc854
--- /dev/null
+++ b/frontend/src/app/mypage/comment/page.tsx
@@ -0,0 +1,278 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/lib/store/authStore';
+import { getMyComments, deleteComment } from '@/lib/api/mypage.api';
+import { MyCommentListItem } from '@/types/mypage.types';
+
+export default function MyCommentPage() {
+  const router = useRouter();
+  const { user, isAuthenticated, isLoading: authLoading } = useAuthStore();
+
+  const [comments, setComments] = useState<MyCommentListItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchInput, setSearchInput] = useState('');
+  
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [isLastPage, setIsLastPage] = useState(false);
+
+  const [selectedComments, setSelectedComments] = useState<Set<number>>(new Set());
+
+  // 비로그인 상태 체크
+  useEffect(() => {
+    if (!authLoading && !isAuthenticated) {
+      alert('로그인이 필요합니다.');
+      router.push('/');
+    }
+  }, [isAuthenticated, authLoading, router]);
+
+  // 댓글 목록 조회
+  const fetchComments = async (page: number = 0, query?: string) => {
+    if (!user || !isAuthenticated) return;
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const response = await getMyComments(query, page, 10);
+      
+      setComments(response.content);
+      setCurrentPage(response.page);
+      setTotalPages(response.totalPages);
+      setIsLastPage(response.last);
+    } catch (err: any) {
+      console.error('댓글 목록 조회 실패:', err);
+      setError(err.response?.data?.message || '댓글 목록을 불러오는데 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (user && isAuthenticated && !authLoading) {
+      fetchComments(0, searchQuery);
+    }
+  }, [user, isAuthenticated, authLoading, searchQuery]);
+
+  // 검색
+  const handleSearch = () => {
+    setSearchQuery(searchInput);
+    setCurrentPage(0);
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  // 체크박스 토글
+  const handleCheckboxToggle = (commentId: number) => {
+    setSelectedComments(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(commentId)) {
+        newSet.delete(commentId);
+      } else {
+        newSet.add(commentId);
+      }
+      return newSet;
+    });
+  };
+
+  // 전체 선택/해제
+  const handleSelectAll = () => {
+    if (selectedComments.size === comments.length) {
+      setSelectedComments(new Set());
+    } else {
+      setSelectedComments(new Set(comments.map(c => c.id)));
+    }
+  };
+
+  // 선택 항목 삭제
+  const handleBatchDelete = async () => {
+    if (selectedComments.size === 0) {
+      alert('삭제할 댓글을 선택해주세요.');
+      return;
+    }
+
+    if (!confirm(`선택한 ${selectedComments.size}개의 댓글을 삭제하시겠습니까?`)) {
+      return;
+    }
+
+    try {
+      // 선택된 댓글들을 순차적으로 삭제
+      await Promise.all(
+        Array.from(selectedComments).map(id => deleteComment(id))
+      );
+
+      alert('선택한 댓글이 삭제되었습니다.');
+      setSelectedComments(new Set());
+      fetchComments(currentPage, searchQuery);
+    } catch (err: any) {
+      console.error('댓글 삭제 실패:', err);
+      alert(err.response?.data?.message || '댓글 삭제에 실패했습니다.');
+    }
+  };
+
+  // 페이지네이션
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    fetchComments(page, searchQuery);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  // 로딩 중
+  if (authLoading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="flex justify-center items-center min-h-[60vh]">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+        </div>
+      </div>
+    );
+  }
+
+  // 비로그인 상태
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="bg-white rounded-lg shadow-sm">
+        {/* 헤더 */}
+        <div className="bg-gray-100 py-8 px-6 text-center rounded-t-lg">
+          <h1 className="text-3xl font-bold text-gray-900">내가 작성한 댓글 조회</h1>
+        </div>
+
+        {/* 검색 바 */}
+        <div className="p-6 bg-gray-50 border-b">
+          <div className="flex gap-2 max-w-2xl mx-auto">
+            <input
+              type="text"
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              onKeyPress={handleKeyPress}
+              placeholder="댓글 내용으로 검색"
+              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#925C4C]"
+            />
+            <button
+              onClick={handleSearch}
+              className="px-6 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+            >
+              검색
+            </button>
+          </div>
+        </div>
+
+        {/* 에러 메시지 */}
+        {error && (
+          <div className="m-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
+            {error}
+          </div>
+        )}
+
+        {/* 댓글 목록 */}
+        <div className="p-6">
+          {isLoading && comments.length === 0 ? (
+            <div className="flex justify-center items-center py-12">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+            </div>
+          ) : comments.length === 0 ? (
+            <div className="text-center py-12 text-gray-500">
+              <p className="text-lg">작성한 댓글이 없습니다.</p>
+            </div>
+          ) : (
+            <>
+              {/* 전체 선택 및 일괄 삭제 */}
+              <div className="flex justify-between items-center mb-4">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={selectedComments.size === comments.length && comments.length > 0}
+                    onChange={handleSelectAll}
+                    className="w-5 h-5 text-[#925C4C] border-gray-300 rounded focus:ring-[#925C4C]"
+                  />
+                  <span className="text-sm font-medium text-gray-700">전체 선택</span>
+                </label>
+                <button
+                  onClick={handleBatchDelete}
+                  disabled={selectedComments.size === 0}
+                  className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                    selectedComments.size === 0
+                      ? 'bg-gray-200 text-gray-500 cursor-not-allowed'
+                      : 'bg-red-500 text-white hover:bg-red-600'
+                  }`}
+                >
+                  선택 항목 삭제
+                </button>
+              </div>
+
+              {/* 댓글 아이템 */}
+              <div className="space-y-3">
+                {comments.map((comment) => (
+                  <div
+                    key={comment.id}
+                    className="flex items-start gap-4 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+                  >
+                    {/* 체크박스 */}
+                    <input
+                      type="checkbox"
+                      checked={selectedComments.has(comment.id)}
+                      onChange={() => handleCheckboxToggle(comment.id)}
+                      className="mt-1 w-5 h-5 text-[#925C4C] border-gray-300 rounded focus:ring-[#925C4C]"
+                    />
+
+                    {/* 댓글 정보 */}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-3 mb-2">
+                        <span className="text-sm font-medium text-gray-500">작성일</span>
+                        <span className="text-sm text-gray-700">{comment.createdAt}</span>
+                      </div>
+                      <div className="mb-3">
+                        <h3 className="font-semibold text-gray-900 mb-1">제목</h3>
+                        <p className="text-gray-700">{comment.content}</p>
+                      </div>
+                    </div>
+
+                    {/* 게시글로 이동 버튼 */}
+                    <button
+                      onClick={() => router.push(`/community/tip/${comment.postId}`)}
+                      className="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors whitespace-nowrap"
+                    >
+                      게시글 보기
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              {/* 페이지네이션 */}
+              {totalPages > 1 && (
+                <div className="mt-8 flex justify-center items-center gap-2">
+                  {Array.from({ length: totalPages }, (_, i) => (
+                    <button
+                      key={i}
+                      onClick={() => handlePageChange(i)}
+                      className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                        currentPage === i
+                          ? 'bg-[#925C4C] text-white'
+                          : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                      }`}
+                    >
+                      {i + 1}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/mypage/design/create-design/page.tsx b/frontend/src/app/mypage/design/create-design/page.tsx
new file mode 100644
index 0000000..81be641
--- /dev/null
+++ b/frontend/src/app/mypage/design/create-design/page.tsx
@@ -0,0 +1,311 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/lib/store/authStore';
+import { createDesign } from '@/lib/api/design.api';
+import type { KnittingSymbol } from '@/lib/api/design.api';
+
+// 격자 셀 컴포넌트
+interface GridCellProps {
+  symbol: KnittingSymbol | null;
+  onClick: () => void;
+  isSelected: boolean;
+}
+
+function GridCell({ symbol, onClick, isSelected }: GridCellProps) {
+  const renderSymbol = () => {
+    switch (symbol) {
+      case 'empty':
+        return <div className="w-4 h-4 border border-gray-400 rounded-full"></div>;
+      case 'filled':
+        return <div className="w-4 h-4 bg-black rounded-full"></div>;
+      case 'x':
+        return <span className="text-lg font-bold">×</span>;
+      case 'v':
+        return <span className="text-sm font-bold">(V)</span>;
+      case 't':
+        return <span className="text-lg font-bold">T</span>;
+      case 'plus':
+        return <span className="text-lg font-bold">+</span>;
+      case 'a':
+        return <span className="text-sm font-bold">(A)</span>;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        w-8 h-8 border border-gray-300 flex items-center justify-center
+        hover:bg-gray-100 transition-colors
+        ${isSelected ? 'bg-[#925C4C] bg-opacity-10 border-[#925C4C]' : ''}
+      `}
+    >
+      {renderSymbol()}
+    </button>
+  );
+}
+
+// 뜨개질 기호 버튼 컴포넌트
+interface SymbolButtonProps {
+  symbol: KnittingSymbol;
+  label: string;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+function SymbolButton({ symbol, label, isSelected, onClick }: SymbolButtonProps) {
+  const renderSymbol = () => {
+    switch (symbol) {
+      case 'empty':
+        return <div className="w-6 h-6 border border-gray-400 rounded-full"></div>;
+      case 'filled':
+        return <div className="w-6 h-6 bg-black rounded-full"></div>;
+      case 'x':
+        return <span className="text-xl font-bold">×</span>;
+      case 'v':
+        return <span className="text-sm font-bold">(V)</span>;
+      case 't':
+        return <span className="text-xl font-bold">T</span>;
+      case 'plus':
+        return <span className="text-xl font-bold">+</span>;
+      case 'a':
+        return <span className="text-sm font-bold">(A)</span>;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        w-12 h-12 border border-gray-300 flex items-center justify-center
+        hover:bg-gray-100 transition-colors rounded
+        ${isSelected ? 'bg-[#925C4C] bg-opacity-10 border-[#925C4C]' : ''}
+      `}
+      title={label}
+    >
+      {renderSymbol()}
+    </button>
+  );
+}
+
+export default function CreateDesignPage() {
+  const router = useRouter();
+  const { isAuthenticated, isLoading } = useAuthStore(); // 인증 상태 가져오기
+  
+  const [grid, setGrid] = useState<(KnittingSymbol | null)[][]>(
+    Array(10).fill(null).map(() => Array(10).fill(null))
+  );
+  const [selectedSymbol, setSelectedSymbol] = useState<KnittingSymbol>('empty');
+  const [designName, setDesignName] = useState('');
+  const [showNotification, setShowNotification] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  // 🔥 인증 체크 - 비로그인 시 홈으로 리다이렉트
+  useEffect(() => {
+    if (isLoading) {
+      return; // 로딩 중이면 기다림
+    }
+
+    if (!isAuthenticated) {
+      alert('로그인이 필요한 서비스입니다.');
+      router.replace('/');
+    }
+  }, [isLoading, isAuthenticated, router]);
+
+  // 로딩 중일 때
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+      </div>
+    );
+  }
+
+  // 비인증 상태일 때 (리다이렉트 처리 중)
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  // 격자 셀 클릭 핸들러
+  const handleCellClick = (row: number, col: number) => {
+    const newGrid = [...grid];
+    newGrid[row][col] = selectedSymbol;
+    setGrid(newGrid);
+  };
+
+  // gridData를 백엔드 형식으로 변환 (null -> 빈 문자열)
+  const convertGridDataForBackend = (): string[][] => {
+    return grid.map(row => 
+      row.map(cell => cell === null ? '' : cell)
+    );
+  };
+
+  // PDF 저장 핸들러 - axios API 호출
+  const handleSaveAsPDF = async () => {
+    if (!designName.trim()) {
+      alert('도안명을 입력해주세요.');
+      return;
+    }
+
+    setIsSaving(true);
+    setErrorMessage(null);
+
+    try {
+      const gridDataForBackend = convertGridDataForBackend();
+
+      const result = await createDesign({
+        designName: designName.trim(),
+        gridData: gridDataForBackend,
+        fileName: designName.trim(),
+      });
+
+      console.log('도안 저장 성공:', result);
+
+      // 저장 성공 알림 표시
+      setShowNotification(true);
+      
+      // 2초 후 알림 숨기고 페이지 이동
+      setTimeout(() => {
+        setShowNotification(false);
+        router.push('/mypage/design');
+      }, 2000);
+
+    } catch (error: any) {
+      console.error('도안 저장 실패:', error);
+      
+      // axios 에러 처리
+      const errorMsg = error.response?.data?.message || 
+                       error.message || 
+                       '도안 저장 중 오류가 발생했습니다.';
+      setErrorMessage(errorMsg);
+      
+      // 3초 후 에러 메시지 제거
+      setTimeout(() => setErrorMessage(null), 3000);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // 뜨개질 기호 목록
+  const symbols: { symbol: KnittingSymbol; label: string }[] = [
+    { symbol: 'empty', label: '빈 원' },
+    { symbol: 'filled', label: '채워진 원' },
+    { symbol: 'x', label: 'X' },
+    { symbol: 'v', label: '(V)' },
+    { symbol: 't', label: 'T' },
+    { symbol: 'plus', label: '+' },
+    { symbol: 'a', label: '(A)' },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* 성공 알림창 */}
+      {showNotification && (
+        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50">
+          <div className="bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg">
+            도안이 성공적으로 저장되었습니다!
+          </div>
+        </div>
+      )}
+
+      {/* 에러 메시지 */}
+      {errorMessage && (
+        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50">
+          <div className="bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg">
+            {errorMessage}
+          </div>
+        </div>
+      )}
+
+      <div className="max-w-7xl mx-auto px-4 py-4">
+        {/* 메인 콘텐츠 */}
+        <div className="flex gap-6">
+          {/* 도안 제작 영역 */}
+          <div className="flex-1">
+            <h2 className="text-2xl font-bold mb-6">나만의 도안 제작하기</h2>
+            
+            {/* 10x10 격자 */}
+            <div className="p-6 rounded-lg border border-gray-200">
+              <div className="relative">
+                {/* 격자 */}
+                <div className="grid grid-cols-10 gap-0 border border-gray-300 w-fit">
+                  {grid.map((row, rowIndex) =>
+                    row.map((cell, colIndex) => (
+                      <GridCell
+                        key={`${rowIndex}-${colIndex}`}
+                        symbol={cell}
+                        onClick={() => handleCellClick(rowIndex, colIndex)}
+                        isSelected={false}
+                      />
+                    ))
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 오른쪽 도구 영역 */}
+          <div className="w-80">
+            <div className="p-6 rounded-lg border border-gray-200">
+              {/* 사이즈 정보 */}
+              <div className="mb-6">
+                <h3 className="text-lg font-semibold mb-2">사이즈</h3>
+                <div className="text-gray-600">10 x 10 (고정)</div>
+              </div>
+
+              {/* 뜨개질 기호들 */}
+              <div className="mb-6">
+                <h3 className="text-lg font-semibold mb-4">뜨개질 기호</h3>
+                <div className="grid grid-cols-3 gap-3">
+                  {symbols.map(({ symbol, label }) => (
+                    <SymbolButton
+                      key={symbol}
+                      symbol={symbol}
+                      label={label}
+                      isSelected={selectedSymbol === symbol}
+                      onClick={() => setSelectedSymbol(symbol)}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              {/* 도안명 입력 */}
+              <div className="mb-6">
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  도안 이름 입력 창(필수)
+                </label>
+                <input
+                  type="text"
+                  value={designName}
+                  onChange={(e) => setDesignName(e.target.value)}
+                  placeholder="도안명을 입력하세요"
+                  maxLength={30}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#925C4C]"
+                />
+                <p className="text-xs text-gray-500 mt-1">
+                  {designName.length}/30
+                </p>
+              </div>
+
+              {/* PDF 저장 버튼 */}
+              <button
+                onClick={handleSaveAsPDF}
+                disabled={isSaving}
+                className="w-full bg-[#925C4C] text-white py-3 px-4 rounded-md hover:bg-[#7a4a3d] transition-colors font-medium disabled:bg-gray-400 disabled:cursor-not-allowed"
+              >
+                {isSaving ? '저장 중...' : 'PDF로 저장하기'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/mypage/design/modify/[productId]/page.tsx b/frontend/src/app/mypage/design/modify/[productId]/page.tsx
new file mode 100644
index 0000000..a4262d3
--- /dev/null
+++ b/frontend/src/app/mypage/design/modify/[productId]/page.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+// 공통 폼 컴포넌트 임포트 (경로와 이름 확인)
+import DesignForm, {
+  DesignSalesData, // '판매 수정'이므로 전체 데이터 타입인 DesignSalesData를 임포트
+} from '@/app/components/DesignForm';
+//import { ProductCategory } from '@/types/product.types'; // (가정) ProductCategory 타입이 정의된 경로
+import api from '@/lib/api/axios';
+
+
+export default function ModifyDesignPage() { // 함수 이름 변경 (선택 사항)
+  const params = useParams();
+  const productId = params.productId as string;
+
+  // '판매 수정'이므로 DesignSalesData 타입을 사용
+  const [initialData, setInitialData] =
+    useState<DesignSalesData | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // ModifyDesignPage.tsx 내부 useEffect 수정
+  useEffect(() => {
+    if (productId) {
+      setIsLoading(true);
+      setError(null);
+
+      fetch(`http://localhost:8080/products/${productId}`, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+        },
+      })
+        .then((res) => {
+          if (!res.ok) throw new Error('기존 판매 정보를 불러오는데 실패했습니다.');
+          return res.json();
+        })
+        .then((data) => {
+          // ✅ ProductDetailResponse를 DesignSalesData로 매핑
+          const mappedData: DesignSalesData = {
+            id: String(data.productId),
+            name: data.title,
+            images: data.productImageUrls || [],
+            category:
+              data.productCategory === 'TOP'
+                ? '상의'
+                : data.productCategory === 'BOTTOM'
+                ? '하의'
+                : data.productCategory === 'OUTER'
+                ? '아우터'
+                : data.productCategory === 'BAG'
+                ? '가방'
+                : '기타',
+            price: data.price,
+            isFree: data.price === 0,
+            isLimited: data.stockQuantity !== null,
+            stock: data.stockQuantity ?? 0,
+            description: data.description,
+            designType: '',
+            size: data.sizeInfo,
+          };
+          setInitialData(mappedData);
+        })
+        .catch((err) => setError(err.message))
+        .finally(() => setIsLoading(false));
+    }
+  }, [productId]);
+
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[60vh]">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg">
+        <p>오류: {error}</p>
+      </div>
+    );
+  }
+
+  if (!initialData) {
+    return (
+      <div className="bg-white shadow-lg rounded-lg p-10 text-center text-gray-500">
+        판매 정보를 찾을 수 없습니다.
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-6">도안 판매 수정</h1>
+      {/*
+        공통 폼 컴포넌트 사용
+        - isEditMode={true} : '판매 수정' 모드
+        - initialData : API로 불러온 *기존 판매 정보* 전체
+        - entityId : 현재 '상품 ID' (productId) 전달
+      */}
+      <DesignForm
+        isEditMode={true}
+        initialData={initialData}
+        entityId={productId}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/app/mypage/design/page.tsx b/frontend/src/app/mypage/design/page.tsx
new file mode 100644
index 0000000..45ba85c
--- /dev/null
+++ b/frontend/src/app/mypage/design/page.tsx
@@ -0,0 +1,506 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useState, useRef, useEffect } from 'react';
+import { 
+  getMyDesigns, 
+  uploadDesignPdf, 
+  deleteDesign,
+  stopDesignSale,
+  relistDesign,
+  viewDesignPdf,
+  downloadDesignPdf
+} from '@/lib/api/design.api';
+import type { DesignListResponse, DesignState } from '@/lib/api/design.api';
+
+// 도안 카드 컴포넌트
+interface DesignCardProps {
+  design: DesignListResponse;
+  onStopSale: (id: number) => void;
+  onDelete: (id: number) => void;
+  onRegisterSale: (id: number) => void;
+  onResumeSale: (id: number) => void;
+}
+
+function DesignCard({ design, onStopSale, onDelete, onRegisterSale, onResumeSale }: DesignCardProps) {
+  const router = useRouter();
+
+  // 상태에 따른 배지 렌더링
+  const getStateBadge = () => {
+    switch (design.designState) {
+      case 'ON_SALE':
+        return <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded">판매중</span>;
+      case 'STOPPED':
+        return <span className="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded">판매중지</span>;
+      case 'BEFORE_SALE':
+        return <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded">판매 전</span>;
+      default:
+        return null;
+    }
+  };
+
+  // 하단 우측 버튼 렌더링
+  const getBottomRightButton = () => {
+    switch (design.designState) {
+      case 'ON_SALE':
+        return (
+          <div className="flex gap-2">
+            <button
+              onClick={() => router.push(`/mypage/design/modify/${design.designId}`)}
+              className="px-3 py-1 text-sm bg-[#925C4C] text-white rounded hover:bg-[#7a4a3d]"
+            >
+              수정
+            </button>
+            <button
+              onClick={() => onStopSale(design.designId)}
+              className="px-3 py-1 text-sm bg-gray-500 text-white rounded hover:bg-gray-600"
+            >
+              판매 중지
+            </button>
+          </div>
+        );
+      case 'STOPPED':
+        return (
+          <div className="flex gap-2">
+            <button
+              onClick={() => onResumeSale(design.designId)}
+              className="px-3 py-1 text-sm bg-[#925C4C] text-white rounded hover:bg-[#7a4a3d]"
+            >
+              다시 판매하기
+            </button>
+            <button
+              onClick={() => onDelete(design.designId)}
+              className="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600"
+            >
+              삭제
+            </button>
+          </div>
+        );
+      case 'BEFORE_SALE':
+        return (
+          <div className="flex gap-2">
+            <button
+              onClick={() => onRegisterSale(design.designId)}
+              className="px-3 py-1 text-sm bg-[#925C4C] text-white rounded hover:bg-[#7a4a3d]"
+            >
+              판매 등록
+            </button>
+            <button
+              onClick={() => onDelete(design.designId)}
+              className="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600"
+            >
+              삭제
+            </button>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  // PDF 보기 핸들러 (새 창)
+  const handlePdfView = async () => {
+    try {
+      await viewDesignPdf(design.designId);
+    } catch (error) {
+      alert('PDF를 불러오는데 실패했습니다.');
+    }
+  };
+
+  // PDF 다운로드 핸들러
+  const handlePdfDownload = async () => {
+    try {
+      await downloadDesignPdf(design.designId, design.designName);
+    } catch (error) {
+      alert('PDF 다운로드에 실패했습니다.');
+    }
+  };
+
+  return (
+    <div className="border rounded-lg p-4 hover:shadow-md transition-shadow flex flex-col h-full">
+      {/* 상단: 상태 배지 */}
+      <div className="flex justify-between items-center mb-3">
+        {getStateBadge()}
+        <div className="flex gap-2">
+          <button
+            onClick={handlePdfView}
+            className="text-sm text-[#925C4C] hover:underline"
+          >
+            PDF 보기
+          </button>
+          <button
+            onClick={handlePdfDownload}
+            className="text-sm text-gray-600 hover:underline"
+          >
+            다운로드
+          </button>
+        </div>
+      </div>
+
+      {/* 중단: 도안 정보 */}
+      <div className="flex-1 mb-3">
+        <div className="font-semibold text-lg mb-2">{design.designName}</div>
+        <div className="text-xs text-gray-500">
+          생성일: {new Date(design.createdAt).toLocaleDateString()}
+        </div>
+      </div>
+
+      {/* 하단 버튼 */}
+      <div className="flex justify-end mt-auto">
+        {getBottomRightButton()}
+      </div>
+    </div>
+  );
+}
+
+export default function DesignListPage() {
+  const router = useRouter();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isAddMenuOpen, setIsAddMenuOpen] = useState(false);
+  const [showUploadModal, setShowUploadModal] = useState(false);
+  const [showStopSaleModal, setShowStopSaleModal] = useState(false);
+  const [selectedDesignId, setSelectedDesignId] = useState<number | null>(null);
+  
+  // 도안 목록 상태
+  const [designs, setDesigns] = useState<DesignListResponse[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  // 업로드 관련 상태
+  const [uploadDesignName, setUploadDesignName] = useState('');
+  const [isUploading, setIsUploading] = useState(false);
+
+  // 도안 목록 조회
+  const fetchDesigns = async () => {
+    setIsLoading(true);
+    setErrorMessage(null);
+    
+    try {
+      const data = await getMyDesigns();
+      setDesigns(data);
+    } catch (error: any) {
+      console.error('도안 목록 조회 실패:', error);
+      
+      const errorMsg = error.response?.data?.message || 
+                       error.message || 
+                       '도안 목록을 불러올 수 없습니다.';
+      setErrorMessage(errorMsg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 컴포넌트 마운트 시 도안 목록 조회
+  useEffect(() => {
+    fetchDesigns();
+  }, []);
+
+  // + 버튼 토글
+  const toggleAddMenu = () => {
+    setIsAddMenuOpen(!isAddMenuOpen);
+  };
+
+  // 새 도안 만들기
+  const handleCreateNewDesign = () => {
+    router.push('/mypage/design/create-design');
+  };
+
+  // 기존 도안 업로드 모달 열기
+  const handleUploadExistingDesign = () => {
+    setShowUploadModal(true);
+    setIsAddMenuOpen(false);
+  };
+
+  // 파일 업로드 처리
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // PDF 파일 검증
+    if (!file.type.includes('pdf')) {
+      alert('PDF 파일만 업로드 가능합니다.');
+      return;
+    }
+
+    setIsUploading(true);
+    setErrorMessage(null);
+
+    try {
+      const result = await uploadDesignPdf(
+        file, 
+        uploadDesignName.trim() || undefined
+      );
+      
+      console.log('업로드 성공:', result);
+
+      // 목록 새로고침
+      await fetchDesigns();
+      
+      // 모달 닫기
+      setShowUploadModal(false);
+      setUploadDesignName('');
+      
+      // 파일 입력 초기화
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+
+    } catch (error: any) {
+      console.error('파일 업로드 실패:', error);
+      
+      const errorMsg = error.response?.data?.message || 
+                       error.message || 
+                       '파일 업로드 중 오류가 발생했습니다.';
+      setErrorMessage(errorMsg);
+      
+      // 3초 후 에러 메시지 제거
+      setTimeout(() => setErrorMessage(null), 3000);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  // 판매 중지
+  const handleStopSale = (id: number) => {
+    setSelectedDesignId(id);
+    setShowStopSaleModal(true);
+  };
+
+  // 판매 중지 확인 - API 호출
+  const confirmStopSale = async () => {
+    if (!selectedDesignId) return;
+
+    try {
+      await stopDesignSale(selectedDesignId);
+      
+      // 로컬 상태 업데이트
+      setDesigns(prev => prev.map(design => 
+        design.designId === selectedDesignId 
+          ? { ...design, designState: 'STOPPED' as DesignState }
+          : design
+      ));
+      
+      setShowStopSaleModal(false);
+      setSelectedDesignId(null);
+    } catch (error: any) {
+      console.error('판매 중지 실패:', error);
+      
+      const errorMsg = error.response?.data?.message || 
+                       error.message || 
+                       '판매 중지에 실패했습니다.';
+      setErrorMessage(errorMsg);
+      setTimeout(() => setErrorMessage(null), 3000);
+    }
+  };
+
+  // 삭제
+  const handleDelete = async (id: number) => {
+    if (!confirm('정말로 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.')) {
+      return;
+    }
+
+    try {
+      await deleteDesign(id);
+      
+      // 목록에서 제거
+      setDesigns(prev => prev.filter(design => design.designId !== id));
+      
+    } catch (error: any) {
+      console.error('삭제 실패:', error);
+      
+      const errorMsg = error.response?.data?.message || 
+                       error.message || 
+                       '도안 삭제 중 오류가 발생했습니다.';
+      setErrorMessage(errorMsg);
+      setTimeout(() => setErrorMessage(null), 3000);
+    }
+  };
+
+  // 판매 등록
+  const handleRegisterSale = (id: number) => {
+    router.push(`/mypage/design/register/${id}`);
+  };
+
+  // 다시 판매하기 (판매중지 -> 판매중) - API 호출
+  const handleResumeSale = async (id: number) => {
+    try {
+      await relistDesign(id);
+      
+      // 로컬 상태 업데이트
+      setDesigns(prev => prev.map(design => 
+        design.designId === id 
+          ? { ...design, designState: 'ON_SALE' as DesignState }
+          : design
+      ));
+    } catch (error: any) {
+      console.error('재판매 실패:', error);
+      
+      const errorMsg = error.response?.data?.message || 
+                       error.message || 
+                       '재판매 처리에 실패했습니다.';
+      setErrorMessage(errorMsg);
+      setTimeout(() => setErrorMessage(null), 3000);
+    }
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      {/* 헤더 */}
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-3xl font-bold">내 도안</h1>
+        
+        {/* + 버튼과 드롭다운 메뉴 */}
+        <div className="relative">
+          <button
+            onClick={toggleAddMenu}
+            className="w-12 h-12 bg-[#925C4C] text-white rounded-full flex items-center justify-center text-2xl hover:bg-[#7a4a3d] transition-colors"
+          >
+            +
+          </button>
+          
+          {/* 드롭다운 메뉴 */}
+          {isAddMenuOpen && (
+            <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-10">
+              <button
+                onClick={handleCreateNewDesign}
+                className="w-full text-left px-4 py-3 hover:bg-gray-50 transition-colors border-b border-gray-100"
+              >
+                새 도안 만들기
+              </button>
+              <button
+                onClick={handleUploadExistingDesign}
+                className="w-full text-left px-4 py-3 hover:bg-gray-50 transition-colors"
+              >
+                기존 도안 업로드
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 에러 메시지 */}
+      {errorMessage && (
+        <div className="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+          {errorMessage}
+        </div>
+      )}
+
+      {/* 로딩 상태 */}
+      {isLoading ? (
+        <div className="flex justify-center items-center py-20">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+        </div>
+      ) : designs.length === 0 ? (
+        /* 도안 없을 때 */
+        <div className="text-center py-20">
+          <p className="text-gray-500 mb-4">아직 등록된 도안이 없습니다.</p>
+          <button
+            onClick={handleCreateNewDesign}
+            className="px-6 py-2 bg-[#925C4C] text-white rounded-md hover:bg-[#7a4a3d]"
+          >
+            첫 도안 만들기
+          </button>
+        </div>
+      ) : (
+        /* 도안 목록 그리드 */
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {designs.map((design) => (
+            <DesignCard
+              key={design.designId}
+              design={design}
+              onStopSale={handleStopSale}
+              onDelete={handleDelete}
+              onRegisterSale={handleRegisterSale}
+              onResumeSale={handleResumeSale}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* 파일 업로드 숨겨진 input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".pdf"
+        onChange={handleFileUpload}
+        className="hidden"
+      />
+
+      {/* 업로드 모달 */}
+      {showUploadModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h2 className="text-xl font-bold mb-4">기존 도안 업로드</h2>
+            
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                도안 이름 (선택사항)
+              </label>
+              <input
+                type="text"
+                value={uploadDesignName}
+                onChange={(e) => setUploadDesignName(e.target.value)}
+                placeholder="입력하지 않으면 파일명이 사용됩니다"
+                maxLength={30}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#925C4C]"
+                disabled={isUploading}
+              />
+            </div>
+
+            <div className="mb-6">
+              <button
+                onClick={() => fileInputRef.current?.click()}
+                disabled={isUploading}
+                className="w-full px-4 py-2 border-2 border-dashed border-gray-300 rounded-md hover:border-[#925C4C] transition-colors disabled:opacity-50"
+              >
+                {isUploading ? '업로드 중...' : 'PDF 파일 선택'}
+              </button>
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={() => {
+                  setShowUploadModal(false);
+                  setUploadDesignName('');
+                }}
+                disabled={isUploading}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
+              >
+                취소
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 판매 중지 확인 모달 */}
+      {showStopSaleModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h2 className="text-xl font-bold mb-4">판매 중지</h2>
+            <p className="text-gray-600 mb-6">
+              정말로 이 도안의 판매를 중지하시겠습니까?
+            </p>
+            <div className="flex gap-3">
+              <button
+                onClick={() => {
+                  setShowStopSaleModal(false);
+                  setSelectedDesignId(null);
+                }}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50"
+              >
+                취소
+              </button>
+              <button
+                onClick={confirmStopSale}
+                className="flex-1 px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
+              >
+                중지
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/app/mypage/design/register/[designId]/page.tsx b/frontend/src/app/mypage/design/register/[designId]/page.tsx
new file mode 100644
index 0000000..0cd4f26
--- /dev/null
+++ b/frontend/src/app/mypage/design/register/[designId]/page.tsx
@@ -0,0 +1,66 @@
+// src/app/mypage/design/register/[designId]/page.tsx
+
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import DesignForm, { DesignSalesData } from '@/app/components/DesignForm';
+
+export default function RegisterDesignPage() {
+  const params = useParams();
+  const designId = params.designId as string;
+  const [initialData, setInitialData] = useState<DesignSalesData>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!designId) return;
+
+    const token = typeof window !== 'undefined' ? localStorage.getItem('accessToken') : null;
+    if (!token) {
+      setError('로그인이 필요합니다.');
+      setIsLoading(false);
+      return;
+    }
+
+    fetch('http://localhost:8080/designs/my', {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error('도안 목록 조회 실패');
+        return res.json();
+      })
+      .then((data) => {
+        const target = data.find((d: any) => String(d.designId) === String(designId));
+        if (!target) throw new Error('도안을 찾을 수 없습니다.');
+
+        const mapped: DesignSalesData = {
+          id: String(target.designId),
+          name: target.designName,
+          images: [],
+          category: '상의',
+          price: 0,
+          isFree: false,
+          isLimited: false,
+          stock: 0,
+          description: '',
+          designType: '',
+          size: 'Free',
+        };
+        setInitialData(mapped);
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setIsLoading(false));
+  }, [designId]);
+
+  if (isLoading) return <div>로딩중...</div>;
+  if (error) return <div>에러: {error}</div>;
+
+  return (
+    <DesignForm
+      isEditMode={false}
+      initialData={initialData}
+      entityId={designId} // ✅ 중요
+    />
+  );
+}
diff --git a/frontend/src/app/mypage/layout.tsx b/frontend/src/app/mypage/layout.tsx
new file mode 100644
index 0000000..7371ed7
--- /dev/null
+++ b/frontend/src/app/mypage/layout.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React from "react";
+import { useAuthStore } from "@/lib/store/authStore";  // 🔥 추가
+
+const renderLinks = (
+    links: { name: string; href: string; disabled?: boolean }[],
+    currentPathname: string
+) => {
+    return links.map((link) => {
+        const isActive = currentPathname === link.href;
+
+        // 🔥 비활성화된 링크 처리
+        if (link.disabled) {
+            return (
+                <li key={link.name}>
+          <span className="text-gray-400 cursor-not-allowed">
+            {link.name}
+          </span>
+                </li>
+            );
+        }
+
+        return (
+            <li key={link.name}>
+                <Link
+                    href={link.href}
+                    className={
+                        isActive
+                            ? "text-[#925C4C] font-bold"
+                            : "text-black hover:text-[#925C4C]"
+                    }
+                >
+                    {link.name}
+                </Link>
+            </li>
+        );
+    });
+};
+
+export default function ProductLayout({
+                                          children,
+                                      }: {
+    children: React.ReactNode;
+}) {
+    const pathname = usePathname();
+    const { user } = useAuthStore();  // 🔥 현재 로그인 유저
+
+    // 🔥 categoryLinks를 컴포넌트 내부로 이동 (userId 사용)
+    const categoryLinks = [
+        { name: "내 정보", href: "/mypage" },
+        { name: "주문 내역", href: "/mypage/order" },
+        {
+            name: "판매자 스토어",
+            href: user?.userId ? `/mypage/store/${user.userId}` : '/mypage',  // 🔥 수정!
+            disabled: !user?.userId  // 🔥 비로그인 시 비활성화
+        },
+        { name: "도안 목록", href: "/mypage/design" },
+        { name: "찜 목록", href: "/mypage/like" },
+        { name: "리뷰 목록", href: "/mypage/review" },
+        { name: "내 글", href: "/mypage/post" },
+        { name: "내 댓글", href: "/mypage/comment" },
+    ];
+
+    return (
+        <div style={{ display: "flex" }}>
+            <aside style={{ width: "250px", padding: "20px" }}>
+                <nav>
+                    <ul className="space-y-4">
+                        {renderLinks(categoryLinks, pathname)}
+                    </ul>
+                </nav>
+            </aside>
+
+            <main style={{ flex: 1, padding: "20px" }}>
+                {children}
+            </main>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/app/mypage/like/page.tsx b/frontend/src/app/mypage/like/page.tsx
new file mode 100644
index 0000000..0417ec5
--- /dev/null
+++ b/frontend/src/app/mypage/like/page.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { getMyFavorites, removeFavorite } from '@/lib/api/like.api';
+import { FavoriteProductItem } from '@/types/like.types';
+
+export default function LikesPage() {
+  const router = useRouter();
+  const [products, setProducts] = useState<FavoriteProductItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+
+  useEffect(() => {
+    const fetchFavorites = async () => {
+      setLoading(true);
+      try {
+        const data = await getMyFavorites(page, 12);
+        setProducts(data.content);
+        setTotalPages(data.totalPages);
+      } catch (err) {
+        console.error('찜 목록 로딩 실패:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchFavorites();
+  }, [page]);
+
+  const handleCardClick = (productId: number) => {
+    router.push(`/product/${productId}`);
+  };
+
+  // 찜 해제
+  const handleUnlike = async (productId: number) => {
+    try {
+      await removeFavorite(productId);
+      setProducts(prev => prev.filter(p => p.productId !== productId));
+    } catch (error) {
+      console.error('찜 해제 실패:', error);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <h2 className="text-[#925C4C] text-2xl font-bold mb-3">내 찜</h2>
+
+        {loading ? (
+          <div className="flex justify-center items-center h-64">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]" />
+          </div>
+        ) : products.length === 0 ? (
+          <div className="text-center text-gray-500 py-20">
+            찜한 상품이 없습니다.
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+              {products.map((product) => (
+                <div
+                  key={product.productId}
+                  className="relative bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
+                >
+                  <div onClick={() => handleCardClick(product.productId)}>
+                    <div className="aspect-square bg-gray-100 flex items-center justify-center">
+                      {product.thumbnailUrl ? (
+                        <img
+                          src={product.thumbnailUrl}
+                          alt={product.productTitle}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="text-gray-400 text-sm">이미지 없음</div>
+                      )}
+                    </div>
+
+                    <div className="p-4">
+                      <h3 className="font-medium text-gray-900 text-sm line-clamp-2 mb-1">
+                        {product.productTitle}
+                      </h3>
+                      <p className="text-xs text-gray-500">{product.sellerName}</p>
+                    </div>
+                  </div>
+
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleUnlike(product.productId);
+                    }}
+                    className="absolute bottom-2 right-2"
+                  >
+                    <svg
+                      className="w-6 h-6 text-[#925C4C] fill-current"
+                      viewBox="0 0 24 24"
+                      fill="currentColor"
+                    >
+                      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 
+                        3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 
+                        14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 
+                        6.86-8.55 11.54L12 21.35z" />
+                    </svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+
+            <div className="flex justify-center mt-8">
+              <button
+                disabled={page <= 0}
+                onClick={() => setPage(page - 1)}
+                className="px-4 py-2 text-sm border rounded disabled:text-gray-300 disabled:border-gray-200"
+              >
+                이전
+              </button>
+              <span className="px-4 py-2 text-sm">
+                {page + 1} / {totalPages}
+              </span>
+              <button
+                disabled={page >= totalPages - 1}
+                onClick={() => setPage(page + 1)}
+                className="px-4 py-2 text-sm border rounded disabled:text-gray-300 disabled:border-gray-200"
+              >
+                다음
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/mypage/order/page.tsx b/frontend/src/app/mypage/order/page.tsx
new file mode 100644
index 0000000..ae03945
--- /dev/null
+++ b/frontend/src/app/mypage/order/page.tsx
@@ -0,0 +1,253 @@
+//주문내역 페이지
+
+'use client';
+
+import { useAuthStore } from '@/lib/store/authStore';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+
+// --- 백엔드 주니어님께 ---
+// 1. 실제 페이징 API 응답에 맞춘 최종 타입 정의
+// 보내주신 GET /mypage/orders 의 응답을 기반으로 타입을 확정했습니다.
+
+/** 개별 주문 상품 정보 타입 ('OrderLine' DTO 기준) */
+interface OrderItem {
+  orderItemId: number;
+  productId: number;
+  productTitle: string;
+  quantity: number;
+  orderPrice: number;
+  isReviewed: boolean;
+  // --- 질문 1 (여전히 유효) ---
+  // key prop 및 리뷰 기능의 정확성을 위해, 각 주문 상품을 구분할 고유 ID가 필요합니다.
+  // 예를 들어 DB의 'order_item_id' 같은 값입니다. 이 값을 API 응답에 추가해주실 수 있을까요?
+  // (예: "orderItemId": 101)
+  // 우선은 productId와 반복문의 index를 조합하여 임시 key를 사용하겠습니다.
+}
+
+/** 주문 1건에 대한 타입 ('OrderCardResponse' DTO 기준) */
+interface Order {
+  orderId: number;
+  orderedAt: string; // "2025-10-24T23:26:38.067534"와 같은 ISO 8601 형식
+  totalPrice: number;
+  items: OrderItem[];
+}
+
+// --- 여기까지 타입을 확정했습니다. ---
+
+export default function OrderHistoryPage() {
+  const router = useRouter();
+  const { user, isAuthenticated, isLoading } = useAuthStore();
+  
+  // API로부터 받아온 주문 목록을 저장할 state
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  
+  const [isFetching, setIsFetching] = useState(true);
+
+  // 2. 페이징 처리를 위한 상태 추가
+  // API가 페이징을 지원하므로, 관련 상태들을 추가했습니다.
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [isLastPage, setIsLastPage] = useState(false);
+  // ---
+
+  // 비로그인 상태면 리다이렉트
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      console.log('로그인이 필요하여 메인 페이지로 이동합니다.');
+      router.push('/');
+    }
+  }, [isAuthenticated, isLoading, router]);
+
+  // 실제 데이터 페칭(Fetching) 로직
+  useEffect(() => {
+    if (isAuthenticated && user) {
+      const fetchOrders = async () => {
+        // ▼▼▼ [수정 2] setIsLoading -> setIsFetching 으로 변경 ▼▼▼
+        setIsFetching(true);
+        setError(null);
+
+        // 1. localStorage에서 Access Token 가져오기
+        const accessToken = localStorage.getItem('accessToken');
+
+        // 2. 토큰이 없으면 로그인 페이지로 보내는 등의 처리가 필요합니다.
+        if (!accessToken) {
+          setError("로그인이 필요합니다.");
+          setIsFetching(false);
+          // router.push('/login'); // 필요에 따라 로그인 페이지로 리다이렉트
+          return;
+        }
+
+        try {
+          // 3. fetch 요청 시 Authorization 헤더에 토큰을 담아 보냅니다.
+          const response = await fetch(`http://localhost:8080/mypage/orders?page=${currentPage}&size=3`, {
+            method: 'GET',
+            headers: {
+              'Authorization': `Bearer ${accessToken}`,
+              'Content-Type': 'application/json',
+            },
+            // credentials: 'include' 옵션은 이제 필요 없습니다.
+          });
+
+          if (!response.ok) {
+            // 401 Unauthorized 와 같은 에러 처리를 위해 응답 상태 코드를 확인합니다.
+            if (response.status === 401) {
+              throw new Error('인증에 실패했습니다. 다시 로그인해주세요.');
+            }
+            throw new Error('주문 내역을 불러오는데 실패했습니다.');
+          }
+
+          const data = await response.json();
+
+          if (currentPage === 0) {
+            // 첫 페이지일 경우, 기존 목록을 완전히 교체합니다.
+            setOrders(data.content);
+          } else {
+            // "더보기"로 불러온 다음 페이지부터는 기존 목록에 덧붙입니다.
+            setOrders(prevOrders => [...prevOrders, ...data.content]);
+          }
+          setTotalPages(data.totalPages);
+          setIsLastPage(data.last);
+
+        } catch (err) {
+          if (err instanceof Error) {
+            setError(err.message);
+          } else {
+            setError('알 수 없는 오류가 발생했습니다.');
+          }
+          console.error(err);
+        } finally {
+          setIsFetching(false);
+        }
+      };
+
+      fetchOrders();
+    }
+  }, [isAuthenticated, user, currentPage]); // currentPage가 바뀔 때마다 데이터를 추가로 불러옵니다.
+
+  // 날짜 형식을 'YYYY.MM.DD'로 변환하는 헬퍼 함수
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}.${month}.${day}`;
+  };
+  
+  // "더보기" 버튼 핸들러
+  const handleLoadMore = () => {
+    if (!isLastPage) {
+      setCurrentPage(prevPage => prevPage + 1);
+    }
+  };
+
+  if (isLoading || (orders.length === 0 && isFetching)) {
+    return (
+      <div className="flex justify-center items-center min-h-[60vh]">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+  
+  if (error) {
+    return (
+      <div className="bg-white shadow-lg rounded-lg p-10 text-center text-red-500">
+        {error}
+      </div>
+    );
+  }
+
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-6">주문 내역</h1>
+
+      <div className="space-y-6">
+        {orders.length === 0 ? (
+          <div className="bg-white shadow-lg rounded-lg p-10 text-center text-gray-500">
+            주문 내역이 없습니다.
+          </div>
+        ) : (
+          orders.map((order) => (
+            <div
+              key={order.orderId}
+              className="bg-white shadow-lg rounded-lg p-6"
+            >
+              <div className="flex justify-between items-center mb-4 border-b border-gray-200 pb-3">
+                <h2 className="text-lg font-semibold text-gray-800">
+                  {/* API의 orderId를 주문번호로 사용합니다. */}
+                  주문번호: {order.orderId}
+                </h2>
+                {/* API의 orderedAt 필드를 사용합니다. */}
+                <p className="text-sm text-gray-500">{formatDate(order.orderedAt)}</p>
+              </div>
+
+              <div className="space-y-4">
+                {order.items.map((item) => (
+                  <div
+                    // 질문 1에 따라 임시로 key를 생성합니다.
+                    key={item.orderItemId}
+                    className="flex justify-between items-center"
+                  >
+                    <div>
+                      {/* API 응답에 맞춰 productTitle, orderPrice로 변경합니다. */}
+                      <p className="font-medium text-gray-700">
+                        {item.productTitle}
+                      </p>
+                      <p className="text-lg font-semibold text-gray-900">
+                        {item.orderPrice.toLocaleString()}원
+                      </p>
+                    </div>
+
+                    {item.isReviewed ? (
+                      // 리뷰가 작성된 경우: 비활성화된 "리뷰 완료" 버튼
+                      <button
+                        className="bg-gray-300 text-gray-500 px-4 py-2 rounded-lg cursor-not-allowed text-sm font-medium"
+                        disabled
+                      >
+                        리뷰 완료
+                      </button>
+                    ) : (
+                      // 리뷰가 작성되지 않은 경우: 기존 "리뷰하기" 버튼
+                      <Link
+                        href={`/mypage/review/write?orderItemId=${item.orderItemId}`}
+                        className="bg-[#925C4C] text-white px-4 py-2 rounded-lg hover:bg-[#7a4c3e] transition-colors text-sm font-medium"
+                      >
+                        리뷰하기
+                      </Link>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* --- 백엔드 주니어님께 ---
+          4. 페이징 UI ("더보기" 버튼)
+          - API가 페이징을 지원하므로, 가장 간단한 방식인 "더보기" 버튼을 우선 구현했습니다.
+          - 마지막 페이지가 아닐 경우에만 이 버튼이 보입니다.
+          - 버튼을 누르면 다음 페이지의 데이터를 불러와 기존 목록 아래에 추가합니다.
+          - UX 정책에 따라 페이지 번호(Pagination) UI로 변경할 수도 있습니다.
+      --- */}
+      {!isLastPage && orders.length > 0 && (
+        <div className="mt-8 text-center">
+          <button
+            onClick={handleLoadMore}
+            className="bg-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-300 transition-colors font-semibold"
+          >
+            더보기
+          </button>
+        </div>
+      )}
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/mypage/page.tsx b/frontend/src/app/mypage/page.tsx
new file mode 100644
index 0000000..c7810b8
--- /dev/null
+++ b/frontend/src/app/mypage/page.tsx
@@ -0,0 +1,72 @@
+'use client';
+import Link from 'next/link';
+
+import { useAuthStore } from '@/lib/store/authStore';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function MyPage() {
+    const router = useRouter();
+    const { user, isAuthenticated, isLoading } = useAuthStore();
+
+    // 비로그인 상태면 로그인 페이지로 리다이렉트
+    useEffect(() => {
+        if (!isLoading && !isAuthenticated) {
+            alert('로그인이 필요합니다.');
+            router.push('/');
+        }
+    }, [isAuthenticated, isLoading, router]);
+
+    // 로딩 중
+    if (isLoading) {
+        return (
+            <div className="flex justify-center items-center min-h-[60vh]">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+            </div>
+        );
+    }
+
+    // 비로그인 상태 (리다이렉트 전)
+    if (!user) {
+        return null;
+    }
+
+    // 마이페이지 메인
+    return (
+        <div>
+            <h1 className="text-3xl font-bold mb-6">마이페이지</h1>
+
+            {/* 사용자 정보 카드 */}
+            <div className="bg-white shadow-lg rounded-lg p-6 mb-6">
+                <div className="flex items-center gap-4 mb-4">
+                    <div className="w-16 h-16 bg-[#925C4C] rounded-full flex items-center justify-center text-white text-2xl font-bold">
+                        {user.name.charAt(0)}
+                    </div>
+                    <div>
+                        <h2 className="text-2xl font-semibold">{user.name}</h2>
+                        <p className="text-gray-600">{user.email}</p>
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4 mt-6">
+                    <div className="bg-gray-50 p-4 rounded-lg">
+                        <p className="text-sm text-gray-600">로그인 방식</p>
+                        <p className="text-lg font-semibold">{user.provider}</p>
+                    </div>
+                </div>
+            </div>
+
+            {/* 메뉴 */}
+            <div className="grid grid-cols-2 gap-4">
+                <button className="bg-white shadow-md rounded-lg p-6 hover:shadow-lg transition-shadow">
+                    <h3 className="font-semibold text-lg mb-2">구매 내역</h3>
+                    <p className="text-sm text-gray-600">구매한 도안을 확인하세요</p>
+                </button>
+                <button className="bg-white shadow-md rounded-lg p-6 hover:shadow-lg transition-shadow">
+                    <h3 className="font-semibold text-lg mb-2">내 도안</h3>
+                    <p className="text-sm text-gray-600">제작한 도안을 관리하세요</p>
+                </button>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/app/mypage/post/page.tsx b/frontend/src/app/mypage/post/page.tsx
new file mode 100644
index 0000000..d326536
--- /dev/null
+++ b/frontend/src/app/mypage/post/page.tsx
@@ -0,0 +1,288 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/lib/store/authStore';
+import { getMyPosts, deletePost } from '@/lib/api/mypage.api';
+import { MyPostListItemResponse } from '@/types/mypage.types';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
+
+export default function MyPostPage() {
+  const router = useRouter();
+  const { user, isAuthenticated, isLoading: authLoading } = useAuthStore();
+
+  const [posts, setPosts] = useState<MyPostListItemResponse[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchInput, setSearchInput] = useState('');
+  
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [isLastPage, setIsLastPage] = useState(false);
+
+  const [selectedPosts, setSelectedPosts] = useState<Set<number>>(new Set());
+
+  // 비로그인 상태 체크
+  useEffect(() => {
+    if (!authLoading && !isAuthenticated) {
+      alert('로그인이 필요합니다.');
+      router.push('/');
+    }
+  }, [isAuthenticated, authLoading, router]);
+
+  // 글 목록 조회
+  const fetchPosts = async (page: number = 0, query?: string) => {
+    if (!user || !isAuthenticated) return;
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const response = await getMyPosts(query, page, 10);
+      
+      setPosts(response.content);
+      setCurrentPage(response.page);
+      setTotalPages(response.totalPages);
+      setIsLastPage(response.last);
+    } catch (err: any) {
+      console.error('글 목록 조회 실패:', err);
+      setError(err.response?.data?.message || '글 목록을 불러오는데 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (user && isAuthenticated && !authLoading) {
+      fetchPosts(0, searchQuery);
+    }
+  }, [user, isAuthenticated, authLoading, searchQuery]);
+
+  // 검색
+  const handleSearch = () => {
+    setSearchQuery(searchInput);
+    setCurrentPage(0);
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  // 체크박스 토글
+  const handleCheckboxToggle = (postId: number) => {
+    setSelectedPosts(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(postId)) {
+        newSet.delete(postId);
+      } else {
+        newSet.add(postId);
+      }
+      return newSet;
+    });
+  };
+
+  // 전체 선택/해제
+  const handleSelectAll = () => {
+    if (selectedPosts.size === posts.length) {
+      setSelectedPosts(new Set());
+    } else {
+      setSelectedPosts(new Set(posts.map(p => p.id)));
+    }
+  };
+
+  // 선택 항목 삭제
+  const handleBatchDelete = async () => {
+    if (selectedPosts.size === 0) {
+      alert('삭제할 글을 선택해주세요.');
+      return;
+    }
+
+    if (!confirm(`선택한 ${selectedPosts.size}개의 글을 삭제하시겠습니까?`)) {
+      return;
+    }
+
+    try {
+      // 선택된 글들을 순차적으로 삭제
+      await Promise.all(
+        Array.from(selectedPosts).map(id => deletePost(id))
+      );
+
+      alert('선택한 글이 삭제되었습니다.');
+      setSelectedPosts(new Set());
+      fetchPosts(currentPage, searchQuery);
+    } catch (err: any) {
+      console.error('글 삭제 실패:', err);
+      alert(err.response?.data?.message || '글 삭제에 실패했습니다.');
+    }
+  };
+
+  // 페이지네이션
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    fetchPosts(page, searchQuery);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  // 로딩 중
+  if (authLoading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="flex justify-center items-center min-h-[60vh]">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+        </div>
+      </div>
+    );
+  }
+
+  // 비로그인 상태
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="bg-white rounded-lg shadow-sm">
+        {/* 헤더 */}
+        <div className="bg-gray-100 py-8 px-6 text-center rounded-t-lg">
+          <h1 className="text-3xl font-bold text-gray-900">내가 작성한 글 조회</h1>
+        </div>
+
+        {/* 검색 바 */}
+        <div className="p-6 bg-gray-50 border-b">
+          <div className="flex gap-2 max-w-2xl mx-auto">
+            <input
+              type="text"
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              onKeyPress={handleKeyPress}
+              placeholder="제목으로 검색"
+              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#925C4C]"
+            />
+            <button
+              onClick={handleSearch}
+              className="px-6 py-2 bg-[#925C4C] text-white rounded-lg hover:bg-[#7a4a3d] transition-colors"
+            >
+              검색
+            </button>
+          </div>
+        </div>
+
+        {/* 에러 메시지 */}
+        {error && (
+          <div className="m-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
+            {error}
+          </div>
+        )}
+
+        {/* 글 목록 */}
+        <div className="p-6">
+          {isLoading && posts.length === 0 ? (
+            <div className="flex justify-center items-center py-12">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+            </div>
+          ) : posts.length === 0 ? (
+            <div className="text-center py-12 text-gray-500">
+              <p className="text-lg">작성한 글이 없습니다.</p>
+            </div>
+          ) : (
+            <>
+              {/* 전체 선택 및 일괄 삭제 */}
+              <div className="flex justify-between items-center mb-4">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={selectedPosts.size === posts.length && posts.length > 0}
+                    onChange={handleSelectAll}
+                    className="w-5 h-5 text-[#925C4C] border-gray-300 rounded focus:ring-[#925C4C]"
+                  />
+                  <span className="text-sm font-medium text-gray-700">전체 선택</span>
+                </label>
+                <button
+                  onClick={handleBatchDelete}
+                  disabled={selectedPosts.size === 0}
+                  className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                    selectedPosts.size === 0
+                      ? 'bg-gray-200 text-gray-500 cursor-not-allowed'
+                      : 'bg-red-500 text-white hover:bg-red-600'
+                  }`}
+                >
+                  선택 항목 삭제
+                </button>
+              </div>
+
+              {/* 글 아이템 */}
+              <div className="space-y-3">
+                {posts.map((post) => (
+                  <div
+                    key={post.id}
+                    className="flex items-start gap-4 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+                  >
+                    {/* 체크박스 */}
+                    <input
+                      type="checkbox"
+                      checked={selectedPosts.has(post.id)}
+                      onChange={() => handleCheckboxToggle(post.id)}
+                      className="mt-1 w-5 h-5 text-[#925C4C] border-gray-300 rounded focus:ring-[#925C4C]"
+                    />
+
+                    {/* 글 정보 */}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-3 mb-2">
+                        <span className="text-sm font-medium text-gray-500">자유</span>
+                      </div>
+                      <h3 className="font-semibold text-lg text-gray-900 mb-2">{post.title}</h3>
+                      <div className="mb-3">
+                        <p className="text-gray-600">{post.content || '내용없음'}</p>
+                      </div>
+                      <div className="text-sm text-gray-500">
+                        작성시간: {new Date(post.createdAt).toLocaleDateString('ko-KR')}
+                      </div>
+                    </div>
+
+                    {/* 이미지 */}
+                    {post.thumbnailUrl && (
+                      <div className="flex-shrink-0 w-24 h-24 bg-gray-200 rounded-lg overflow-hidden">
+                        <img
+                          src={`${API_URL}${post.thumbnailUrl}`}
+                          alt="썸네일"
+                          className="w-full h-full object-cover"
+                          onError={(e) => {
+                            (e.target as HTMLImageElement).src = 'https://placehold.co/200x200/CCCCCC/FFFFFF?text=No+Image';
+                          }}
+                        />
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+
+              {/* 페이지네이션 */}
+              {totalPages > 1 && (
+                <div className="mt-8 flex justify-center items-center gap-2">
+                  {Array.from({ length: totalPages }, (_, i) => (
+                    <button
+                      key={i}
+                      onClick={() => handlePageChange(i)}
+                      className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                        currentPage === i
+                          ? 'bg-[#925C4C] text-white'
+                          : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                      }`}
+                    >
+                      {i + 1}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/mypage/review/page.tsx b/frontend/src/app/mypage/review/page.tsx
new file mode 100644
index 0000000..e72853e
--- /dev/null
+++ b/frontend/src/app/mypage/review/page.tsx
@@ -0,0 +1,249 @@
+'use client';
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { getMyReviews, deleteReview } from "@/lib/api/review.api";
+import { ReviewListItem, PageResponse } from "@/types/review.types";
+
+export default function MyReviewsPage() {
+
+  
+  const router = useRouter();
+
+  const [reviews, setReviews] = useState<ReviewListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [openIds, setOpenIds] = useState<number[]>([]);
+  const [currentImageIndex, setCurrentImageIndex] = useState<Record<number, number>>({});
+
+  const fetchReviews = async (pageNumber: number) => {
+    try {
+      setLoading(true);
+      const data = await getMyReviews(pageNumber, 10);
+      setReviews(data.content);
+      setTotalPages(data.totalPages);
+      setPage(pageNumber);
+    } catch (error) {
+      console.error("리뷰 불러오기 실패:", error);
+      alert("리뷰를 불러오는데 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchReviews(0);
+  }, []);
+
+  const handleDelete = async (reviewId: number) => {
+    if (!confirm("정말 삭제하시겠습니까?")) return;
+    try {
+      await deleteReview(reviewId);
+      alert("리뷰가 삭제되었습니다.");
+      fetchReviews(page);
+    } catch (error) {
+      console.error("리뷰 삭제 실패:", error);
+      alert("리뷰 삭제에 실패했습니다.");
+    }
+  };
+
+  const toggleDetail = (id: number) => {
+    setOpenIds(prev =>
+      prev.includes(id) ? prev.filter(v => v !== id) : [...prev, id]
+    );
+  };
+
+  const prevImage = (reviewId: number, maxIndex: number) => {
+    setCurrentImageIndex(prev => ({
+      ...prev,
+      [reviewId]: prev[reviewId] === undefined ? 0 : (prev[reviewId] - 1 + maxIndex + 1) % (maxIndex + 1),
+    }));
+  };
+
+  const nextImage = (reviewId: number, maxIndex: number) => {
+    setCurrentImageIndex(prev => ({
+      ...prev,
+      [reviewId]: prev[reviewId] === undefined ? 0 : (prev[reviewId] + 1) % (maxIndex + 1),
+    }));
+  };
+
+  // ✅ 날짜별로 리뷰 묶기
+  const groupedReviews = reviews.reduce<Record<string, ReviewListItem[]>>((acc, review) => {
+    const date = review.createdDate; // LocalDate 형태 (e.g. '2025-10-23')
+    if (!acc[date]) acc[date] = [];
+    acc[date].push(review);
+    return acc;
+  }, {});
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-[60vh]">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="font-sans p-4">
+      <h2 className="text-[#925C4C] text-2xl font-bold mb-3">작성한 리뷰</h2>
+
+      {reviews.length === 0 && (
+        <div className="text-center text-gray-500 py-20">작성한 리뷰가 없습니다.</div>
+      )}
+
+      {/* ✅ 리뷰일별 그룹 렌더링 */}
+      {Object.keys(groupedReviews)
+  .sort((a, b) => (a < b ? 1 : -1)) // 최신 날짜가 위로
+  .map(date => (
+    <div key={date} className="mb-6">
+      {/* ✅ 리뷰 작성일 헤더 (디자인 수정됨) */}
+      <div className="text-gray-400 text-sm mb-2">{date}</div>
+
+      {/* 해당 날짜 리뷰들 */}
+      {groupedReviews[date].map(review => {
+        const isOpen = openIds.includes(review.reviewId);
+        const images = review.reviewImageUrls || [];
+        const idx = currentImageIndex[review.reviewId] || 0;
+
+        return (
+          <div
+            key={review.reviewId}
+            className="border border-gray-200 rounded-lg mb-2 p-3 bg-white shadow-sm relative"
+          >
+            <div className="flex justify-between items-start">
+              <div className="flex items-center">
+                <img
+                  src={review.productThumbnailUrl}
+                  alt="상품 썸네일"
+                  className="w-16 h-16 rounded-lg object-cover mr-3"
+                />
+                <div>
+                  <div className="font-medium">{review.productTitle}</div>
+                </div>
+              </div>
+
+              <div className="flex flex-col mt-2 items-end gap-1">
+                <div className="flex items-center gap-4 mb-1">
+                  <div className="flex items-center gap-1">
+                    <span className="text-yellow-500 text-sm mt-1">★</span>
+                    <span className="text-black text-sm">{review.rating.toFixed(1)}</span>
+                  </div>
+
+                  <button
+                    onClick={() => handleDelete(review.reviewId)}
+                    className="bg-[#925C4C] text-white rounded-md px-3 py-1 cursor-pointer w-fit"
+                  >
+                    삭제
+                  </button>
+                </div>
+
+                <div
+                  onClick={() => toggleDetail(review.reviewId)}
+                  className="flex items-center gap-1 text-sm text-gray-400 cursor-pointer select-none w-fit"
+                >
+                  <span>{isOpen ? "접기" : "펼쳐보기"}</span>
+                  <span
+                    className={`inline-block text-base transform transition-transform ${
+                      isOpen ? "rotate-180 -mt-0.5" : "rotate-0"
+                    }`}
+                  >
+                    ⌃
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* 상세 영역 */}
+            {isOpen && (
+              <div className="mt-3">
+                <div className="text-xs text-gray-400 mb-1 ml-0">리뷰사진</div>
+                <div className="flex items-start gap-4">
+                  {(() => {
+                    const BACKEND_URL = "http://localhost:8080";
+                    const hasImages = images.length > 0;
+                    const fullImageUrl = hasImages ? `${BACKEND_URL}${images[idx]}` : null;
+
+                    return (
+                      <div className="relative w-24 h-24 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center">
+                        {hasImages ? (
+                          <>
+                            <img
+                              src={fullImageUrl ?? ""}
+                              alt={`review-${review.reviewId}-${idx}`}
+                              className="w-full h-full object-cover"
+                            />
+
+                            {images.length > 1 && (
+                              <>
+                                <button
+                                  onClick={() => prevImage(review.reviewId, images.length - 1)}
+                                  className="absolute left-0 top-1/2 -translate-y-1/2 bg-black bg-opacity-40 text-white px-1 py-0.5 rounded-r hover:bg-black"
+                                >
+                                  ‹
+                                </button>
+                                <button
+                                  onClick={() => nextImage(review.reviewId, images.length - 1)}
+                                  className="absolute right-0 top-1/2 -translate-y-1/2 bg-black bg-opacity-40 text-white px-1 py-0.5 rounded-l hover:bg-black"
+                                >
+                                  ›
+                                </button>
+                              </>
+                            )}
+                          </>
+                        ) : (
+                          <span className="text-sm text-gray-500">사진 없음</span>
+                        )}
+                      </div>
+                    );
+                  })()}
+                  <div className="flex-1 text-sm leading-6 whitespace-pre-line">{review.content}</div>
+                </div>
+              </div>
+            )}
+
+
+
+          </div>
+        );
+      })}
+    </div>
+  ))}
+
+      {/* 페이지네이션 */}
+      {totalPages > 1 && (
+        <div className="flex justify-center gap-2 mt-6">
+          <button
+            onClick={() => fetchReviews(Math.max(0, page - 1))}
+            disabled={page === 0}
+            className="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            이전
+          </button>
+
+          {Array.from({ length: totalPages }, (_, i) => (
+            <button
+              key={i}
+              onClick={() => fetchReviews(i)}
+              className={`px-4 py-2 rounded ${
+                i === page
+                  ? "bg-[#925C4C] text-white"
+                  : "bg-gray-200 hover:bg-gray-300"
+              }`}
+            >
+              {i + 1}
+            </button>
+          ))}
+
+          <button
+            onClick={() => fetchReviews(Math.min(totalPages - 1, page + 1))}
+            disabled={page === totalPages - 1}
+            className="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            다음
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/app/mypage/review/write/page.tsx b/frontend/src/app/mypage/review/write/page.tsx
new file mode 100644
index 0000000..b63cb8c
--- /dev/null
+++ b/frontend/src/app/mypage/review/write/page.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { useSearchParams, useRouter } from 'next/navigation';
+import { useEffect, useState, ChangeEvent } from 'react';
+import { ReviewCreateResponse } from '@/types/review.types';
+import { createReview } from '@/lib/api/review.api';
+import api from '@/lib/api/axios';
+
+export default function ReviewWritePage() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const orderItemId = searchParams.get('orderItemId');
+  const [item, setItem] = useState<ReviewCreateResponse | null>(null);
+  const [rating, setRating] = useState(0);
+  const [content, setContent] = useState('');
+  const [images, setImages] = useState<File[]>([]);
+
+  // GET 상품 정보 (리뷰 폼용)
+  useEffect(() => {
+    if (!orderItemId) return;
+    const fetchProduct = async () => {
+      try {
+        const response = await api.get<ReviewCreateResponse>(
+          `/reviews/form?orderItemId=${orderItemId}`
+        );
+        setItem(response.data);
+      } catch (error) {
+        console.error('상품 정보 로딩 실패', error);
+      }
+    };
+    fetchProduct();
+  }, [orderItemId]);
+
+  if (!orderItemId) return <div className="p-6 text-center text-gray-500">상품 정보가 없습니다.</div>;
+  if (!item) return <div className="p-6 text-center text-gray-500">상품 정보를 불러오는 중입니다...</div>;
+
+  const handleRatingChange = (value: number) => setRating(value);
+  const handleContentChange = (e: ChangeEvent<HTMLTextAreaElement>) => setContent(e.target.value);
+  const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) return;
+    const newFiles = Array.from(e.target.files);
+    setImages(prev => [...prev, ...newFiles].slice(0, 10));
+  };
+  const handleImageRemove = (index: number) => setImages(prev => prev.filter((_, i) => i !== index));
+
+  const handleSubmit = async () => {
+    if (!orderItemId) return;
+    try {
+      const formData = new FormData();
+      formData.append('rating', String(rating));
+      formData.append('content', content);
+      images.forEach((file) => {
+        formData.append('reviewImageUrls', file);
+      });
+
+      // 백엔드 ReviewController의 createReview 엔드포인트 호출
+      await api.post(`/reviews?orderItemId=${orderItemId}`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      
+      
+      alert('리뷰가 등록되었습니다.');
+      router.push('/mypage/review');
+    } catch (error) {
+      console.error('리뷰 등록 실패', error);
+      alert('리뷰 등록에 실패했습니다.');
+    }
+  };
+
+  return (
+    <div className="font-sans p-4 min-h-screen">
+      <h2 className="text-[#925C4C] text-2xl font-bold mb-6">리뷰 작성하기</h2>
+
+      {/* 상품 정보 */}
+      <div className="flex items-center gap-8 mb-6">
+        <img
+          src={item.productThumbnailUrl}
+          alt={item.productTitle}
+          className="w-24 h-24 object-cover rounded-lg"
+        />
+        <div>
+          <div className="font-medium text-lg mb-1">{item.productTitle}</div>
+        </div>
+      </div>
+
+      {/* 이미지 업로드 + 별점 + 리뷰 작성 */}
+      <div className="bg-white p-4 rounded-lg flex flex-col gap-4">
+        <div className="flex gap-4">
+          <label className="w-24 h-24 bg-gray-100 flex items-center justify-center text-sm text-gray-500 rounded-lg cursor-pointer">
+            이미지 추가
+            <input type="file" multiple className="hidden" onChange={handleImageChange} />
+          </label>
+
+          <div className="flex flex-wrap gap-2">
+            {images.map((file, idx) => (
+              <div key={idx} className="w-24 h-24 relative">
+                <img
+                  src={URL.createObjectURL(file)}
+                  alt={`preview-${idx}`}
+                  className="w-full h-full object-cover rounded-lg"
+                />
+                <button
+                  onClick={() => handleImageRemove(idx)}
+                  className="absolute top-0 right-0 w-6 h-6 bg-black bg-opacity-50 text-white text-xs rounded-full flex items-center justify-center hover:bg-red-600"
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1 text-2xl mt-2">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <svg
+              key={i}
+              onClick={() => handleRatingChange(i)}
+              className={`w-6 h-6 cursor-pointer ${i <= rating ? 'text-yellow-400' : 'text-gray-300'}`}
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.946a1 1 0 00.95.69h4.15c.969 0 1.371 1.24.588 1.81l-3.36 2.44a1 1 0 00-.364 1.118l1.287 3.945c.3.921-.755 1.688-1.54 1.118l-3.36-2.44a1 1 0 00-1.175 0l-3.36 2.44c-.784.57-1.838-.197-1.539-1.118l1.286-3.945a1 1 0 00-.364-1.118L2.075 9.373c-.783-.57-.38-1.81.588-1.81h4.15a1 1 0 00.95-.69l1.286-3.946z" />
+            </svg>
+          ))}
+        </div>
+
+        <textarea
+          className="w-full h-32 p-2 resize-none focus:outline-none focus:ring-1 focus:ring-[#925C4C]"
+          placeholder="리뷰를 작성해 주세요."
+          value={content}
+          onChange={handleContentChange}
+        />
+
+        <div className="flex justify-end">
+          <button
+            onClick={handleSubmit}
+            className="bg-[#925C4C] text-white px-6 py-2 rounded-md hover:bg-[#7a483a]"
+          >
+            리뷰 등록
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/mypage/store/[userId]/page.tsx b/frontend/src/app/mypage/store/[userId]/page.tsx
new file mode 100644
index 0000000..3e3935a
--- /dev/null
+++ b/frontend/src/app/mypage/store/[userId]/page.tsx
@@ -0,0 +1,384 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useAuthStore } from '@/lib/store/authStore';
+import { getSellerProducts, getStoreDescription, updateStoreDescription } from '@/lib/api/product.api';
+import { ProductListResponse } from '@/types/product.types';
+
+export default function SellerStorePage() {
+    // 🔥 모든 Hook을 최상단에 선언 (early return 이전)
+    const params = useParams<{ userId: string }>();
+    const router = useRouter();
+    const { user, isAuthenticated } = useAuthStore();
+
+    // State
+    const [products, setProducts] = useState<ProductListResponse[]>([]);
+    const [page, setPage] = useState(0);
+    const [totalPages, setTotalPages] = useState(0);
+    const [totalElements, setTotalElements] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [storeDescription, setStoreDescription] = useState('');
+    const [isEditingDescription, setIsEditingDescription] = useState(false);
+    const [tempDescription, setTempDescription] = useState('');
+    const [descriptionLoading, setDescriptionLoading] = useState(false);
+
+    // URL에서 판매자 ID 가져오기
+    const storeOwnerId = params?.userId;
+
+    // 본인 스토어 여부 판단
+    const isMyStore = isAuthenticated && user?.userId === storeOwnerId;
+
+    // 🔥 디버깅 (개발 중에만 사용)
+    useEffect(() => {
+        console.log('📍 Current params:', params);
+        console.log('📍 Store Owner ID:', storeOwnerId);
+        console.log('📍 Current User ID:', user?.userId);
+    }, [params, storeOwnerId, user]);
+
+    // 🔥 storeOwnerId 없으면 에러 처리 (useEffect로)
+    useEffect(() => {
+        if (!storeOwnerId) {
+            alert('잘못된 접근입니다.');
+            router.push('/mypage');
+        }
+    }, [storeOwnerId, router]);
+
+    // 🔥 스토어 설명 조회
+    useEffect(() => {
+        const fetchDescription = async () => {
+            if (!storeOwnerId) return;
+
+            try {
+                const description = await getStoreDescription(storeOwnerId);
+                setStoreDescription(description);
+            } catch (error) {
+                console.error('스토어 설명 조회 실패:', error);
+                setStoreDescription('안녕하세요! 제 스토어에 오신 것을 환영합니다.');
+            }
+        };
+
+        fetchDescription();
+    }, [storeOwnerId]);
+
+    // 상품 목록 조회
+    useEffect(() => {
+        const fetchProducts = async () => {
+            if (!storeOwnerId) return;
+
+            try {
+                setLoading(true);
+                const response = await getSellerProducts(storeOwnerId, page, 20);
+                setProducts(response.content);
+                setTotalPages(response.totalPages);
+                setTotalElements(response.totalElements);
+            } catch (error) {
+                console.error('상품 조회 실패:', error);
+                alert('상품을 불러오는데 실패했습니다.');
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchProducts();
+    }, [storeOwnerId, page]);
+
+    // 설명 수정 시작
+    const handleEditDescription = () => {
+        setTempDescription(storeDescription);
+        setIsEditingDescription(true);
+    };
+
+    // 🔥 설명 저장 (API 호출)
+    const handleSaveDescription = async () => {
+        if (!storeOwnerId) return;
+
+        // 빈 내용 체크
+        if (!tempDescription.trim()) {
+            alert('스토어 설명을 입력해주세요.');
+            return;
+        }
+
+        try {
+            setDescriptionLoading(true);
+
+            // 🔥 백엔드 API 호출
+            await updateStoreDescription(storeOwnerId, tempDescription);
+
+            // 성공 시 상태 업데이트
+            setStoreDescription(tempDescription);
+            setIsEditingDescription(false);
+            alert('스토어 설명이 저장되었습니다.');
+
+        } catch (error: any) {
+            console.error('스토어 설명 저장 실패:', error);
+
+            // 에러 처리
+            if (error.response?.status === 403) {
+                alert('본인의 스토어만 수정할 수 있습니다.');
+            } else if (error.response?.status === 404) {
+                alert('스토어를 찾을 수 없습니다.');
+            } else {
+                alert('저장에 실패했습니다. 다시 시도해주세요.');
+            }
+        } finally {
+            setDescriptionLoading(false);
+        }
+    };
+
+    // 설명 취소
+    const handleCancelEdit = () => {
+        setIsEditingDescription(false);
+        setTempDescription('');
+    };
+
+    // 로딩 중 (storeOwnerId 없으면 표시 안함)
+    if (!storeOwnerId) {
+        return null; // 또는 로딩 표시
+    }
+
+    if (loading && page === 0) {
+        return (
+            <div className="flex justify-center items-center min-h-[60vh]">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="container mx-auto px-4 py-8">
+            {/* 🔥 스토어 헤더 (설명 포함) */}
+            <div className="bg-white rounded-lg shadow-md p-6 mb-8">
+                <div className="flex justify-between items-start mb-4">
+                    <div>
+                        <h1 className="text-3xl font-bold mb-2">
+                            {isMyStore ? '내 스토어' : '판매자 스토어'}
+                        </h1>
+                        <p className="text-gray-600">
+                            총 {totalElements}개의 도안
+                        </p>
+                    </div>
+                </div>
+
+                {/* 스토어 설명 */}
+                <div className="mt-4">
+                    {isEditingDescription ? (
+                        // 🔥 수정 모드 (본인만)
+                        <div>
+              <textarea
+                  value={tempDescription}
+                  onChange={(e) => setTempDescription(e.target.value)}
+                  className="w-full border rounded-lg p-3 focus:ring-2 focus:ring-[#925C4C] focus:border-transparent"
+                  rows={4}
+                  placeholder="스토어 설명을 입력하세요..."
+              />
+                            <div className="flex gap-2 mt-2">
+                                <button
+                                    onClick={handleSaveDescription}
+                                    disabled={descriptionLoading}
+                                    className="bg-[#925C4C] text-white px-4 py-2 rounded hover:bg-[#7a4a3d] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                >
+                                    {descriptionLoading ? '저장 중...' : '저장'}
+                                </button>
+                                <button
+                                    onClick={handleCancelEdit}
+                                    disabled={descriptionLoading}
+                                    className="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 transition-colors disabled:opacity-50"
+                                >
+                                    취소
+                                </button>
+                            </div>
+                        </div>
+                    ) : (
+                        // 읽기 모드
+                        <div className="flex justify-between items-start">
+                            <p className="text-gray-700 whitespace-pre-wrap flex-1">
+                                {storeDescription}
+                            </p>
+
+                            {/* 🔥 본인만 수정 버튼 표시 */}
+                            {isMyStore && (
+                                <button
+                                    onClick={handleEditDescription}
+                                    className="ml-4 text-[#925C4C] hover:text-[#7a4a3d] transition-colors"
+                                >
+                                    ✏️ 수정
+                                </button>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* 상품 목록 */}
+            {products.length === 0 ? (
+                <div className="text-center py-20 bg-white rounded-lg shadow-md">
+                    <p className="text-gray-500 text-lg">등록된 상품이 없습니다.</p>
+                </div>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                    {products.map((product) => (
+                        <ProductCard
+                            key={product.productId}
+                            product={product}
+                            isMyStore={isMyStore}  // 🔥 본인 스토어 여부 전달
+                        />
+                    ))}
+                </div>
+            )}
+
+            {/* 페이지네이션 */}
+            {totalPages > 1 && (
+                <div className="flex gap-2 items-center justify-center mt-6">
+                    <button
+                        onClick={() => setPage(p => Math.max(0, p - 1))}
+                        disabled={page === 0}
+                        className="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        이전
+                    </button>
+
+                    {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                        // 현재 페이지를 중심으로 페이지 번호 계산
+                        let pageNum;
+                        if (totalPages <= 5) {
+                            // 전체 페이지가 5개 이하면 그대로 표시
+                            pageNum = i;
+                        } else if (page < 2) {
+                            // 처음 부분 (0, 1 페이지)
+                            pageNum = i;
+                        } else if (page > totalPages - 3) {
+                            // 마지막 부분
+                            pageNum = totalPages - 5 + i;
+                        } else {
+                            // 중간 부분 (현재 페이지를 중심으로)
+                            pageNum = page - 2 + i;
+                        }
+
+                        // 유효하지 않은 페이지 번호는 렌더링하지 않음
+                        if (pageNum < 0 || pageNum >= totalPages) return null;
+
+                        return (
+                            <button
+                                key={pageNum}
+                                onClick={() => setPage(pageNum)}
+                                className={`px-4 py-2 rounded ${
+                                    page === pageNum
+                                        ? 'bg-[#925C4C] text-white'
+                                        : 'bg-gray-200 hover:bg-gray-300'
+                                }`}
+                            >
+                                {pageNum + 1}
+                            </button>
+                        );
+                    })}
+
+                    <button
+                        onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}
+                        disabled={page === totalPages - 1}
+                        className="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        다음
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+// 🔥 상품 카드 컴포넌트
+interface ProductCardProps {
+    product: ProductListResponse;
+    isMyStore: boolean;
+}
+
+function ProductCard({ product, isMyStore }: ProductCardProps) {
+    const router = useRouter();
+
+    const handleEdit = () => {
+        // 🔥 상품 수정 페이지로 이동
+        router.push(`/mypage/product/edit/${product.productId}`);
+    };
+
+    const handleViewDetail = () => {
+        // 상품 상세 페이지로 이동
+        router.push(`/product/${product.productId}`);
+    };
+
+    return (
+        <div
+            className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
+            onClick={handleViewDetail}
+        >
+            {/* 이미지 */}
+            <div className="relative aspect-square w-full bg-gray-200">
+                {product.thumbnailUrl ? (
+                    <img
+                        src={product.thumbnailUrl}
+                        alt={product.title}
+                        className="w-full h-full object-cover"
+                    />
+                ) : (
+                    <div className="flex items-center justify-center h-full text-gray-400">
+                        No Image
+                    </div>
+                )}
+
+                {/* 뱃지 */}
+                <div className="absolute top-2 left-2 flex gap-2">
+                    {product.isFree && (
+                        <span className="bg-green-500 text-white px-2 py-1 text-xs rounded">
+              무료
+            </span>
+                    )}
+                    {product.isSoldOut && (
+                        <span className="bg-red-500 text-white px-2 py-1 text-xs rounded">
+              품절
+            </span>
+                    )}
+                    {product.isLimited && !product.isSoldOut && (
+                        <span className="bg-orange-500 text-white px-2 py-1 text-xs rounded">
+              한정수량
+            </span>
+                    )}
+                </div>
+            </div>
+
+            {/* 정보 */}
+            <div className="p-4">
+                <h3 className="font-semibold text-lg mb-2 truncate">
+                    {product.title}
+                </h3>
+
+                <div className="flex justify-between items-center mb-3">
+          <span className="text-xl font-bold text-[#925C4C]">
+            {product.isFree ? '무료' : `${product.price.toLocaleString()}원`}
+          </span>
+                    <div className="text-sm text-gray-600">
+                        ⭐ {product.avgReviewRating.toFixed(1)}
+                    </div>
+                </div>
+
+                <div className="flex gap-4 text-sm text-gray-600 mb-4 justify-between">
+                    <span>❤️ {product.likeCount}</span>
+                    {isMyStore && (
+                    <span> 구매 횟수: {product.purchaseCount}</span>
+                        )}
+                </div>
+
+                {/* 🔥 본인 스토어일 때만 수정 버튼 표시 */}
+                {isMyStore && (
+                    <button
+                        onClick={(e) => {
+                            e.stopPropagation(); // 카드 클릭 이벤트 방지
+                            handleEdit();
+                        }}
+                        className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition-colors"
+                    >
+                        ✏️ 수정
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
new file mode 100644
index 0000000..4e4836e
--- /dev/null
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,270 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getHomeSummary } from '@/lib/api/home.api';
+import { ProductListResponse } from '@/types/product.types';
+import { LatestReviewItem, LatestPostItem } from '@/types/home.types';
+import ProductCard from '@/components/product/ProductCard';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useAuthStore } from '@/lib/store/authStore';
+import { User } from '@/types/auth.types';
+
+
+export default function HomePage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { user, login } = useAuthStore();
+  const [isProcessingLogin, setIsProcessingLogin] = useState(false);
+  const [popularProducts, setPopularProducts] = useState<ProductListResponse[]>([]);
+  const [latestReviews, setLatestReviews] = useState<LatestReviewItem[]>([]);
+  const [latestPosts, setLatestPosts] = useState<LatestPostItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchHomeData();
+  }, []);
+
+  const fetchHomeData = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const data = await getHomeSummary();
+      setPopularProducts(data.popularProducts);
+      setLatestReviews(data.latestReviews);
+      setLatestPosts(data.latestPosts);
+    } catch (err: any) {
+      console.error('홈 화면 데이터 조회 실패:', err);
+      setError('데이터를 불러오는데 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleLikeToggle = async (productId: number) => {
+    // TODO: 찜하기 API 연동
+    console.log('찜하기:', productId);
+  };
+
+  // 카테고리 한글 변환
+  const getCategoryKorean = (category: string) => {
+    const categoryMap: { [key: string]: string } = {
+      'QUESTION': '질문',
+      'SHARE': '공유',
+      'FREE': '자유',
+      'REVIEW': '후기',
+    };
+    return categoryMap[category] || category;
+  };
+// OAuth2 로그인 성공 처리
+useEffect(() => {
+  const accessToken = searchParams.get('accessToken');
+  const userId = searchParams.get('userId');
+  const email = searchParams.get('email');
+  const name = searchParams.get('name');
+  const loginError = searchParams.get('loginError');
+
+  if (loginError) {
+      alert('로그인에 실패했습니다. 다시 시도해주세요.');
+      router.replace('/'); // URL 파라미터 제거
+      return;
+  }
+
+  // 로그인 성공 처리
+  if (accessToken && userId && email && name) {
+      setIsProcessingLogin(true);
+
+      const userData: User = {
+          userId,
+          email: decodeURIComponent(email),
+          name: decodeURIComponent(name),
+          provider: 'GOOGLE',
+      };
+
+      // 토큰 및 사용자 정보 저장
+      login(accessToken, userData);
+
+      // URL에서 파라미터 제거 (깔끔하게)
+      router.replace('/');
+
+      // 로그인 성공 알림
+      setTimeout(() => {
+          setIsProcessingLogin(false);
+          alert(`환영합니다, ${userData.name}님!`);
+      }, 300);
+  }
+}, [searchParams, router, login]);
+
+// 로그인 처리 중 로딩
+if (isProcessingLogin) {
+  return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+          <div className="text-center">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C] mx-auto mb-4"></div>
+              <h2 className="text-xl font-semibold text-gray-700">
+                  로그인 처리 중...
+              </h2>
+          </div>
+      </div>
+  );
+}
+  // 로딩 중
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[400px]">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+      </div>
+    );
+  }
+
+  // 에러 발생
+  if (error) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg">
+          <p>{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      {/* 인기 상품 섹션 */}
+      <section className="mb-16">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-2xl font-bold text-gray-900">인기 상품 랭킹 TOP 5</h2>
+          <button
+            onClick={() => router.push('/product')}
+            className="text-sm text-gray-600 hover:text-[#925C4C] transition-colors"
+          >
+            더보기 →
+          </button>
+        </div>
+        
+        {popularProducts.length === 0 ? (
+          <div className="text-center py-12 text-gray-500">
+            <p>인기 상품이 없습니다.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-5 gap-4">
+            {popularProducts.map((product, index) => (
+              <div key={product.productId} className="relative">
+                {/* 랭킹 배지 */}
+                <div className="absolute top-2 left-2 z-10">
+                  <span className="bg-[#925C4C] text-white text-sm font-bold px-3 py-1 rounded-full shadow-md">
+                    #{index + 1}
+                  </span>
+                </div>
+                
+                {/* 기존 ProductCard 컴포넌트 재사용 */}
+                <ProductCard 
+                  product={product} 
+                  onLikeToggle={handleLikeToggle}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* 최신 리뷰 섹션 */}
+      <section className="mb-16">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-2xl font-bold text-gray-900">최신 리뷰</h2>
+        </div>
+        
+        {latestReviews.length === 0 ? (
+          <div className="text-center py-12 text-gray-500">
+            <p>최신 리뷰가 없습니다.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {latestReviews.map((review) => (
+              <div
+                key={review.reviewId}
+                className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow"
+              >
+                {/* 별점 */}
+                <div className="flex items-center mb-3">
+                  <div className="flex text-yellow-400">
+                    {[...Array(5)].map((_, i) => (
+                      <svg
+                        key={i}
+                        className={`w-5 h-5 ${i < review.rating ? 'fill-current' : 'fill-gray-200'}`}
+                        viewBox="0 0 20 20"
+                      >
+                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                      </svg>
+                    ))}
+                  </div>
+                  <span className="ml-2 text-sm text-gray-600">{review.rating}.0</span>
+                </div>
+
+                {/* 리뷰 내용 */}
+                <p className="text-gray-700 mb-3 line-clamp-3">
+                  {review.content}
+                </p>
+
+                {/* 상품 정보 */}
+                <div className="pt-3 border-t border-gray-100">
+                  <p className="text-sm text-gray-600 line-clamp-1">
+                    {review.productTitle}
+                  </p>
+                  <p className="text-xs text-gray-400 mt-1">
+                    {new Date(review.createdDate).toLocaleDateString('ko-KR')}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* 커뮤니티 글 섹션 */}
+      <section className="mb-16">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-2xl font-bold text-gray-900">커뮤니티 최신 글</h2>
+          <button
+            onClick={() => router.push('/community/posts')}
+            className="text-sm text-gray-600 hover:text-[#925C4C] transition-colors"
+          >
+            더보기 →
+          </button>
+        </div>
+        
+        {latestPosts.length === 0 ? (
+          <div className="text-center py-12 text-gray-500">
+            <p>최신 글이 없습니다.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {latestPosts.map((post) => (
+              <div
+                key={post.postId}
+                className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow"
+              >
+                {/* 카테고리 배지 */}
+                <div className="mb-3">
+                  <span className="inline-block bg-[#925C4C] text-white text-xs font-medium px-3 py-1 rounded-full">
+                    {getCategoryKorean(post.category)}
+                  </span>
+                </div>
+
+                {/* 제목 */}
+                <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">
+                  {post.title}
+                </h3>
+
+                {/* 작성일 */}
+                <p className="text-sm text-gray-500">
+                  {new Date(post.createdAt).toLocaleDateString('ko-KR')}
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/frontend/src/app/product/[productId]/page.tsx b/frontend/src/app/product/[productId]/page.tsx
new file mode 100644
index 0000000..aca828b
--- /dev/null
+++ b/frontend/src/app/product/[productId]/page.tsx
@@ -0,0 +1,704 @@
+'use client';
+
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState, useRef } from 'react';
+import Link from 'next/link';
+// (가정) 로그인 상태 및 토큰 관리를 위한 store 또는 context
+// import { useAuthStore } from '@/lib/store/authStore';
+
+import { addLike, removeFavorite } from '@/lib/api/like.api';
+import { useCartStore } from '@/lib/store/cartStore';
+
+import { getProductReviews } from '@/lib/api/review.api';
+import { ProductReviewItem } from '@/types/review.types';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
+
+// --- 백엔드 연동 ---
+// 1. 수정된 ProductDetails 타입 (ProductDetailResponse.java 기반)
+interface ProductDetails {
+  productId: number;
+  title: string;
+  description: string;
+  productCategory: string; // 백엔드 Enum ('TOP', 'BOTTOM', 'OUTER', 'BAG', 'ETC')
+  sizeInfo: string;
+  price: number;
+  createdAt: string; // 백엔드에서 String으로 변환됨
+  stockQuantity: number | null; // null이면 상시 판매
+  likeCount: number;
+  avgReviewRating: number | null;
+  reviewCount: number;
+  productImageUrls: string[];
+  isLikedByUser: boolean;
+}
+
+/**
+ * 찜(하트) 버튼 아이콘 SVG 컴포넌트
+ */
+const HeartIcon = ({ filled }: { filled: boolean }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill={filled ? '#925C4C' : 'none'}
+    stroke={filled ? '#925C4C' : 'currentColor'}
+    strokeWidth="2"
+    className="w-6 h-6"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+    />
+  </svg>
+);
+
+/**
+ * 이미지 캐러셀 화살표 아이콘 (왼쪽)
+ */
+const ChevronLeftIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+  </svg>
+);
+
+/**
+ * 이미지 캐러셀 화살표 아이콘 (오른쪽)
+ */
+const ChevronRightIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+    <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+  </svg>
+);
+
+const StarIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#FFC107" // 노란색 채우기
+    className="w-5 h-5" 
+  >
+    <path
+      fillRule="evenodd"
+      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354l-4.597 2.917c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434L10.788 3.21z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+//리뷰 탭 내부에서 사용할 별점 아이콘
+const ReviewStarIcon = ({ filled }: { filled: boolean }) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill={filled ? '#FFC107' : 'none'} // 👈 채우기/비우기
+      stroke={filled ? '#FFC107' : 'currentColor'}
+      strokeWidth={1.5}
+      className="w-5 h-5 text-gray-400"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.31h5.404a.563.563 0 01.31.956l-4.118 3.523a.563.563 0 00-.18.51l1.257 5.273a.563.563 0 01-.815.61l-4.596-2.919a.563.563 0 00-.58 0l-4.596 2.919a.563.563 0 01-.815-.61l1.257-5.273a.563.563 0 00-.18-.51l-4.118-3.523a.563.563 0 01.31-.956h5.404a.563.563 0 00.475.31l2.125-5.111z"
+      />
+    </svg>
+  );
+
+
+/**
+ * 탭 버튼 컴포넌트
+ */
+const TabButton = ({
+  children,
+  active,
+  onClick,
+}: {
+  children: React.ReactNode;
+  active: boolean;
+  onClick: () => void;
+}) => (
+  <button
+    onClick={onClick}
+    className={`flex-1 py-3 px-4 font-semibold text-center transition-colors ${
+      active
+        ? 'border-b-2 border-[#925C4C] text-[#925C4C]'
+        : 'text-gray-500 hover:text-gray-800'
+    }`}
+  >
+    {children}
+  </button>
+);
+
+/**
+ * '정보' 탭 내부의 행 컴포넌트
+ */
+const InfoRow = ({ label, value }: { label: string; value: React.ReactNode }) => (
+  <div className="flex border-b border-gray-200 py-3">
+    <dt className="w-1/3 text-gray-500 font-medium">{label}</dt>
+    <dd className="w-2/3 text-gray-900">{value}</dd>
+  </div>
+);
+
+const ReviewItem = ({ review }: { review: ProductReviewItem }) => {
+  // 1. 이미지 캐러셀 상태
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  // 2. 캐러셀 핸들러
+  const handleNextImage = (e: React.MouseEvent) => {
+    e.stopPropagation(); // 상위 div 클릭 이벤트 전파 방지
+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % review.reviewImageUrls.length);
+  };
+  const handlePrevImage = (e: React.MouseEvent) => {
+    e.stopPropagation(); // 상위 div 클릭 이벤트 전파 방지
+    setCurrentImageIndex((prevIndex) => (prevIndex - 1 + review.reviewImageUrls.length) % review.reviewImageUrls.length);
+  };
+
+  // 3. 유저명 마스킹 (요청: 김**)
+  const maskUserName = (name: string) => {
+    if (!name) return "***";
+    if (name.length === 1) return name + "**";
+    return name[0] + "*".repeat(name.length - 1);
+  };
+
+  const hasImages = review.reviewImageUrls && review.reviewImageUrls.length > 0;
+
+  return (
+    <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 border-b border-gray-200 py-6">
+      
+      {/* 1. 왼쪽: 이미지 캐러셀 (이미지가 있을 경우) */}
+      {hasImages && (
+        <div className="relative w-full sm:w-28 sm:h-28 md:w-32 md:h-32 aspect-square sm:aspect-auto flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden shadow">
+          <img
+            src={`${API_URL}${review.reviewImageUrls[currentImageIndex]}`}
+            alt={`리뷰 이미지 ${currentImageIndex + 1}`}
+            className="w-full h-full object-cover"
+            onError={(e) => { 
+              (e.target as HTMLImageElement).src = 'https://placehold.co/400x400/CCCCCC/FFFFFF?text=Load+Error';
+            }}
+          />
+          {/* 캐러셀 버튼 */}
+          {review.reviewImageUrls.length > 1 && (
+            <>
+              <button
+                onClick={handlePrevImage}
+                className="absolute top-1/2 left-1 transform -translate-y-1/2 bg-white/70 hover:bg-white rounded-full p-1 transition-colors shadow"
+                aria-label="이전 이미지"
+              >
+                <ChevronLeftIcon />
+              </button>
+              <button
+                onClick={handleNextImage}
+                className="absolute top-1/2 right-1 transform -translate-y-1/2 bg-white/70 hover:bg-white rounded-full p-1 transition-colors shadow"
+                aria-label="다음 이미지"
+              >
+                <ChevronRightIcon />
+              </button>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* 2. 오른쪽: 리뷰 내용 */}
+      <div className={`flex-1 min-w-0 ${!hasImages ? 'w-full' : ''}`}> {/* 이미지가 없으면 전체 너비 사용 */}
+        {/* 상단: 작성자, 날짜, 별점 */}
+        <div className="flex flex-wrap items-center justify-between mb-2 gap-2"> {/* flex-wrap과 gap 추가 */}
+          <div className="flex items-center space-x-3">
+            {/* 작성자 */}
+            <span className="text-gray-800 font-semibold truncate">{maskUserName(review.userName)}</span>
+            {/* 날짜 */}
+            <span className="text-gray-500 text-sm flex-shrink-0">
+              {new Date(review.createdAt).toLocaleDateString()}
+            </span>
+          </div>
+          
+          {/* 별점 */}
+          <div className="flex items-center flex-shrink-0"> {/* ml-4 제거 */}
+            {[...Array(5)].map((_, i) => (
+              <ReviewStarIcon key={i} filled={i < review.rating} />
+            ))}
+          </div>
+        </div>
+
+        {/* 하단: 리뷰 내용 */}
+        <p className="text-gray-800 whitespace-pre-wrap break-words text-left">
+          {review.content}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+// --- 제품 상세 페이지 메인 컴포넌트 ---
+export default function ProductDetailPage() {
+  const router = useRouter();
+  const params = useParams();
+  const productId = params.productId as string; // URL에서 상품 ID 추출 (string)
+
+  // --- 3. 상태 관리 ---
+  const [product, setProduct] = useState<ProductDetails | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 이미지 캐러셀 상태
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  
+  // 찜(Wistlist) 상태
+  // (수정) 초기값은 Mock 또는 API 응답으로 설정
+  const [isWished, setIsWished] = useState(false);
+  const [wishCount, setWishCount] = useState(0);
+
+  // 탭 상태
+  const [activeTab, setActiveTab] = useState<'info' | 'size' | 'review'>('info');
+  // ---
+  
+  const reviewTabRef = useRef<HTMLDivElement>(null);
+  const [isWishLoading, setIsWishLoading] = useState(false);
+  
+  const addToCart = useCartStore((state) => state.addToCart);
+  const cartItems = useCartStore((state) => state.items);
+
+  const [reviews, setReviews] = useState<ProductReviewItem[]>([]);
+  const [isReviewLoading, setIsReviewLoading] = useState(false);
+  const [hasFetchedReviews, setHasFetchedReviews] = useState(false);
+
+  // --- 4. 데이터 페칭 (실제 API 호출) ---
+  useEffect(() => {
+    if (productId) {
+      setIsLoading(true);
+      setError(null);
+
+      // (가정) Access Token 가져오기 (실제 구현 필요)
+      const accessToken = localStorage.getItem('accessToken'); // 예시
+
+      // 실제 API 호출 (GET /products/{productId})
+      fetch(`http://localhost:8080/products/${productId}`, {
+        method: 'GET',
+        headers: {
+          // 로그인이 필요한 API이므로 Authorization 헤더 추가
+          'Authorization': `Bearer ${accessToken}`,
+          'Content-Type': 'application/json'
+        }
+      })
+      .then(async res => { // async 추가
+        if (!res.ok) {
+          // 백엔드에서 JSON 에러 응답을 줄 경우를 대비
+          let errorMsg = '상품 정보를 불러오는데 실패했습니다.';
+          try {
+            const errorData = await res.json();
+            errorMsg = errorData.message || errorMsg;
+          } catch (e) {
+            // JSON 파싱 실패 시 기본 메시지 사용
+          }
+          throw new Error(errorMsg);
+        }
+        return res.json();
+      })
+      .then((data: ProductDetails) => { // 받아온 데이터 타입 명시
+        setProduct(data);
+      })
+      .catch((err: any) => {
+        console.error(err);
+        setError(err.message);
+      })
+      .finally(() => setIsLoading(false));
+    } 
+  }, [productId]); // productId가 변경될 때마다 재호출
+
+  useEffect(() => {
+    if (product) {
+      setIsWished(product.isLikedByUser);
+      setWishCount(product.likeCount);
+    }
+  }, [product]);
+
+  useEffect(() => {
+    setReviews([]);
+    setHasFetchedReviews(false);
+    setIsReviewLoading(false); // 혹시 모를 로딩 상태도 리셋
+  }, [productId]);
+
+  useEffect(() => {
+    if (activeTab !== 'review' || isReviewLoading || hasFetchedReviews) {
+      return;
+    }
+
+    const fetchReviews = async () => {
+      if (!productId) return; 
+      setIsReviewLoading(true);
+      setHasFetchedReviews(true);
+      try {
+        const data = await getProductReviews(Number(productId), 0, 10);
+        setReviews(data.content);
+      } catch (err) {
+        console.error("리뷰를 불러오는데 실패했습니다.", err);
+        setHasFetchedReviews(false);
+      } finally {
+        setIsReviewLoading(false);
+      }
+    };
+    fetchReviews();
+  }, [activeTab, productId, isReviewLoading, hasFetchedReviews]);
+
+  // ▼▼▼ [수정] isAlreadyInCart 계산 위치 및 방식 변경 ▼▼▼
+  // 컴포넌트 렌더링 로직 내에서 계산합니다.
+  const isAlreadyInCart = product
+    ? cartItems.some(item => item.productId === product.productId)
+    : false;
+  // ▲▲▲ [수정] isAlreadyInCart 계산 위치 및 방식 변경 ▲▲▲
+  
+  // --- 5. 이벤트 핸들러 ---
+
+  // 이미지 캐러셀 핸들러
+  const handleNextImage = () => {
+    if (!product) return;
+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % product.productImageUrls.length); // 필드명 변경
+  };
+  const handlePrevImage = () => {
+    if (!product) return;
+    setCurrentImageIndex((prevIndex) => (prevIndex - 1 + product.productImageUrls.length) % product.productImageUrls.length); // 필드명 변경
+  };
+
+  // 찜 버튼 핸들러
+  const handleWishClick = async () => {
+    // (가정) 로그인 상태 확인
+    const accessToken = localStorage.getItem('accessToken');
+    if (!accessToken) { alert("로그인이 필요합니다."); return; }
+    if (!product || isWishLoading) return; // 상품 정보 없거나 로딩 중이면 중단
+
+    setIsWishLoading(true); // 찜 처리 시작 (버튼 비활성화)
+    const originalIsWished = isWished; // 롤백을 위한 원래 상태 저장
+    const productIdNum = product.productId; // API 호출에 사용할 숫자 ID
+
+    // 낙관적 업데이트: UI 먼저 변경
+    setIsWished((prev) => !prev);
+    setWishCount((prevCount) => (originalIsWished ? prevCount - 1 : prevCount + 1));
+
+    try {
+      if (originalIsWished) {
+        // 찜 취소 API 호출
+        await removeFavorite(productIdNum); // 팀원이 만든 API 함수 사용
+      } else {
+        // 찜 등록 API 호출
+        await addLike(productIdNum); // 팀원이 만든 API 함수 사용
+      }
+      // 성공 시 별도 처리 없음 (이미 UI는 업데이트됨)
+      // 필요하다면 여기서 최신 찜 카운트를 다시 받아오는 API 호출 가능
+    } catch (error) {
+      console.error('찜 처리 실패:', error);
+      alert('찜 상태 변경에 실패했습니다. 다시 시도해 주세요.');
+
+      // 실패 시 UI 롤백
+      setIsWished(originalIsWished);
+      setWishCount((prevCount) => (originalIsWished ? prevCount + 1 : prevCount - 1));
+    } finally {
+      setIsWishLoading(false); // 찜 처리 완료 (버튼 활성화)
+    }
+  };
+  
+
+// ▼▼▼ [수정] 장바구니 버튼 핸들러 (내부 로직 변경 없음) ▼▼▼
+const handleAddToCart = () => {
+  if (!product) return;
+
+  // isAlreadyInCart 값은 위에서 계산된 것을 사용합니다.
+  if (isAlreadyInCart) {
+    alert('이미 장바구니에 담긴 상품입니다.');
+    return;
+  }
+
+  addToCart({
+    productId: product.productId,
+    title: product.title,
+    price: product.price,
+    imageUrl: product.productImageUrls?.[0] || undefined,
+  });
+
+  alert(`${product.title} 상품이 장바구니에 담겼습니다.`);
+};
+// ▲▲▲ [수정] 장바구니 버튼 핸들러 ▲▲▲
+  
+// 수정된 버전
+const handleBuyNow = () => {
+  if (!product) return;
+
+  // 이미 장바구니에 있는지 확인
+  const isAlreadyInCart = cartItems.some(
+    (item) => item.productId === product.productId
+  );
+
+  // 없으면 장바구니에 추가
+  if (!isAlreadyInCart) {
+    addToCart({
+      productId: product.productId,
+      title: product.title,
+      price: product.price,
+      imageUrl: product.productImageUrls?.[0] || undefined,
+    });
+  }
+
+  // 장바구니 페이지로 이동
+  router.push('/cart');
+};
+
+
+  const handleReviewClick = () => {
+    setActiveTab('review'); // 탭을 '리뷰'로 활성화
+    if (reviewTabRef.current) {
+      // '리뷰' 탭 섹션으로 부드럽게 스크롤
+      reviewTabRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+
+  // --- 6. 렌더링 로직 ---
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[60vh]">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="max-w-6xl mx-auto p-4 md:p-8">
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg">
+          <p>오류: {error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!product) {
+    return (
+      <div className="max-w-6xl mx-auto p-4 md:p-8">
+        <div className="bg-white shadow-lg rounded-lg p-10 text-center text-gray-500">
+          상품 정보를 찾을 수 없습니다.
+        </div>
+      </div>
+    );
+  }
+
+  // 한정 판매 여부 판단 (isLimited 대신 사용)
+  const isProductLimited = product.stockQuantity !== null;
+
+  // --- 메인 UI 렌더링 ---
+  return (
+    <div className="max-w-6xl mx-auto p-4 md:p-8">
+      {/* 상단 섹션: 이미지 + 정보 */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
+        
+        {/* 1. 이미지 캐러셀 */}
+        <div className="w-full">
+          {/* 카테고리 (이미지 위로 이동) */}
+          <div className="mb-2">
+            <span className="bg-[#925C4C] text-white text-xs font-semibold px-3 py-1 rounded-full">
+              {product.productCategory} {/* 필드명 변경 */}
+            </span>
+          </div>
+
+          {/* 이미지 캐러셀 컨테이너 */}
+          <div className="relative aspect-square bg-gray-100 rounded-lg overflow-hidden shadow-lg">
+            {/* 대표 이미지 */}
+            {product.productImageUrls.length > 0 ? (
+              <img
+                src={product.productImageUrls[currentImageIndex]}
+                alt={`${product.title} 이미지 ${currentImageIndex + 1}`} // 필드명 변경
+                className="w-full h-full object-cover transition-opacity duration-300"
+                onError={(e) => { // 이미지 로드 실패 처리
+                  (e.target as HTMLImageElement).src = 'https://placehold.co/600x600/CCCCCC/FFFFFF?text=Load+Error';
+                }}
+              />
+            ) : (
+              <div className="flex justify-center items-center h-full">
+                <p className="text-gray-500">이미지가 없습니다.</p>
+              </div>
+            )}
+            
+            {/* 좌/우 화살표 (이미지가 2개 이상일 때만 표시) */}
+            {product.productImageUrls.length > 1 && (
+              <>
+                <button
+                  onClick={handlePrevImage}
+                  className="absolute top-1/2 left-2 md:left-4 transform -translate-y-1/2 bg-white/70 hover:bg-white rounded-full p-2 transition-colors shadow-md"
+                  aria-label="이전 이미지"
+                >
+                  <ChevronLeftIcon />
+                </button>
+                <button
+                  onClick={handleNextImage}
+                  className="absolute top-1/2 right-2 md:right-4 transform -translate-y-1/2 bg-white/70 hover:bg-white rounded-full p-2 transition-colors shadow-md"
+                  aria-label="다음 이미지"
+                >
+                  <ChevronRightIcon />
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* 2. 상품 정보 및 버튼 */}
+        <div className="flex flex-col justify-center">
+
+          {/* ▼▼▼ [수정] 별점 영역에 flex items-center 추가 ▼▼▼ */}
+          {product.avgReviewRating !== null && (
+            <button
+              onClick={handleReviewClick}
+              // items-center 클래스를 추가하여 수직 중앙 정렬
+              className="flex items-center space-x-1 mb-2 self-start p-1 rounded-md hover:bg-gray-100 transition-colors cursor-pointer"
+              aria-label={`평균 별점 ${product.avgReviewRating.toFixed(1)}점`}
+            >
+              <StarIcon />
+              <span className="font-semibold text-gray-700 text-base"> {/* pt-0.5 제거 */}
+                {product.avgReviewRating.toFixed(1)}
+              </span>
+              <span className="text-gray-500 text-sm">
+                리뷰 {product.reviewCount ?? 0}개
+              </span>
+            </button>
+          )}
+          {/* ▲▲▲ [수정] 별점 영역 ▲▲▲ */}
+
+          <h1 className="text-3xl font-bold text-gray-900 mb-3">{product.title}</h1>
+          
+          <p className="text-3xl font-semibold text-gray-800 mb-4">
+            {product.price.toLocaleString()}원
+          </p>
+          
+          {/* 한정 상품일 경우 재고 표시 */}
+          {isProductLimited && (
+            <p className="text-lg text-red-600 font-medium mb-4">
+              [한정 수량] 남은 재고: {product.stockQuantity}개
+            </p>
+          )}
+
+          <div className="border-t border-b border-gray-200 py-6 my-4 space-y-4">
+            {/* 장바구니 / 찜 버튼 */}
+            <div className="flex items-center space-x-4">
+              {/* ▼▼▼ [수정] 장바구니 버튼 상태 반영 (isAlreadyInCart 사용) ▼▼▼ */}
+              <button
+                onClick={handleAddToCart}
+                // isAlreadyInCart 값에 따라 버튼 비활성화/스타일 변경
+                disabled={isAlreadyInCart}
+                className={`flex-1 font-bold py-3 px-6 rounded-lg transition-colors ${
+                  isAlreadyInCart
+                    ? 'bg-gray-400 text-gray-700 cursor-not-allowed'
+                    : 'bg-gray-200 hover:bg-gray-300 text-gray-800'
+                }`}
+              >
+                {isAlreadyInCart ? '장바구니에 담김' : '장바구니'}
+              </button>
+              {/* ▲▲▲ [수정] 장바구니 버튼 상태 반영 ▲▲▲ */}
+
+              {/* 찜 버튼 영역 (별점은 위로 이동) */}
+              <div className="flex flex-col items-center">
+                {/* ▼▼▼ [수정] 찜 버튼에 disabled 속성 추가 ▼▼▼ */}
+                <button
+                  onClick={handleWishClick}
+                  className="p-3 rounded-full hover:bg-gray-100 transition-colors"
+                  aria-label="찜하기"
+                  disabled={isWishLoading}
+                >
+                  <HeartIcon filled={isWished} />
+                </button>
+                {/* ▲▲▲ [수정] 찜 버튼 ▲▲▲ */}
+                <span className="text-sm text-gray-600">{wishCount.toLocaleString()}</span>
+              </div>
+            </div>
+            {/* 구매하기 버튼 */}
+            <button
+              onClick={handleBuyNow}
+              className="w-full bg-[#925C4C] hover:bg-[#7a4c3e] text-white font-bold py-3 px-6 rounded-lg transition-colors text-lg"
+            >
+              구매하기
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 고지 사항 */}
+      <div className="text-center text-sm text-gray-600 bg-gray-50 p-4 rounded-lg my-8 shadow-sm">
+        PDF 상품 특성상 교환/환불 불가, Knitly는 중복 구매에 대한 책임을 지지 않습니다.
+      </div>
+      
+      {/* 탭 섹션 */}
+      <div className="w-full mt-12">
+        {/* 탭 헤더 */}
+        <div className="flex border-b border-gray-300">
+          <TabButton active={activeTab === 'info'} onClick={() => setActiveTab('info')}>
+            정보
+          </TabButton>
+          <TabButton active={activeTab === 'size'} onClick={() => setActiveTab('size')}>
+            사이즈
+          </TabButton>
+          <TabButton active={activeTab === 'review'} onClick={() => setActiveTab('review')}>
+            리뷰
+          </TabButton>
+        </div>
+        
+        {/* 탭 컨텐츠 */}
+        <div className="py-8 px-2">
+          {/* 정보 탭 */}
+          {activeTab === 'info' && (
+            <dl className="divide-y divide-gray-200">
+              <InfoRow label="상품명" value={product.title} />
+              <InfoRow label="카테고리" value={product.productCategory} />
+              <InfoRow label="가격" value={`${product.price.toLocaleString()}원`} />
+              <InfoRow label="등록일" value={new Date(product.createdAt).toLocaleDateString()} />
+              <InfoRow
+                label="상품 설명"
+                value={
+                  <p className="whitespace-pre-wrap">{product.description}</p>
+                }
+              />
+            </dl>
+          )}
+          
+          {/* 사이즈 탭 */}
+          {activeTab === 'size' && (
+            <div>
+              <dl>
+                <InfoRow
+                  label="사이즈 정보"
+                  value={
+                    <p className="whitespace-pre-wrap">{product.sizeInfo}</p>
+                  }
+                />
+              </dl>
+            </div>
+          )}
+          
+          {/* ▼▼▼ [수정] 리뷰 탭에 ref 연결 ▼▼▼ */}
+          {activeTab === 'review' && (
+            <div ref={reviewTabRef} className="text-center py-10 text-gray-500"> {/* ref 연결 */}
+              {/* 1. 로딩 중 */}
+              {isReviewLoading && reviews.length === 0 && (
+                <div className="flex justify-center items-center py-10">
+                  <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-[#925C4C]"></div>
+                </div>
+              )}
+
+              {/* 2. 리뷰 없음 */}
+              {!isReviewLoading && reviews.length === 0 && (
+                <div className="text-center py-10 text-gray-500">
+                  <p>작성된 리뷰가 없습니다.</p>
+                </div>
+              )}
+
+              {/* 3. 리뷰 목록 */}
+              {reviews.length > 0 && (
+                <div className="divide-y divide-gray-200">
+                  {reviews.map((review) => (
+                    <ReviewItem key={review.reviewId} review={review} />
+                  ))}
+                </div>
+              )}
+
+             </div>
+          )}
+          {/* ▲▲▲ [수정] 리뷰 탭 ▲▲▲ */}
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/frontend/src/app/product/bag/page.tsx b/frontend/src/app/product/bag/page.tsx
new file mode 100644
index 0000000..d5fafb8
--- /dev/null
+++ b/frontend/src/app/product/bag/page.tsx
@@ -0,0 +1,11 @@
+import { ProductList } from '@/components/product';
+
+export default function BagProductListPage() {
+  return (
+    <ProductList 
+      title="가방 상품"
+      category="BAG"
+      basePath="/product/bag"
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/product/bottom/page.tsx b/frontend/src/app/product/bottom/page.tsx
new file mode 100644
index 0000000..9b54b37
--- /dev/null
+++ b/frontend/src/app/product/bottom/page.tsx
@@ -0,0 +1,11 @@
+import { ProductList } from '@/components/product';
+
+export default function BottomProductListPage() {
+  return (
+    <ProductList 
+      title="하의 상품"
+      category="BOTTOM"
+      basePath="/product/bottom"
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/product/etc/page.tsx b/frontend/src/app/product/etc/page.tsx
new file mode 100644
index 0000000..1ab18ed
--- /dev/null
+++ b/frontend/src/app/product/etc/page.tsx
@@ -0,0 +1,11 @@
+import { ProductList } from '@/components/product';
+
+export default function EtcProductListPage() {
+  return (
+    <ProductList 
+      title="기타 상품"
+      category="ETC"
+      basePath="/product/etc"
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/product/free/page.tsx b/frontend/src/app/product/free/page.tsx
new file mode 100644
index 0000000..d434dfa
--- /dev/null
+++ b/frontend/src/app/product/free/page.tsx
@@ -0,0 +1,11 @@
+import { ProductList } from '@/components/product';
+
+export default function FreeProductListPage() {
+  return (
+    <ProductList 
+      title="무료 상품"
+      filter="FREE"
+      basePath="/product/free"
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/product/layout.tsx b/frontend/src/app/product/layout.tsx
new file mode 100644
index 0000000..462dd61
--- /dev/null
+++ b/frontend/src/app/product/layout.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+const categoryLinks = [
+  { name: "전체", href: "/product" },
+  { name: "상의", href: "/product/top" },
+  { name: "하의", href: "/product/bottom" },
+  { name: "아우터", href: "/product/outwear" },
+  { name: "가방", href: "/product/bag" },
+  { name: "기타", href: "/product/etc" },
+];
+
+const specialLinks = [
+  { name: "무료", href: "/product/free" },
+  { name: "한정판매", href: "/product/limited" },
+];
+
+const renderLinks = (
+  links: { name: string; href: string }[],
+  currentPathname: string
+) => {
+  return links.map((link) => {
+    const isActive = currentPathname === link.href;
+
+    return (
+      <li key={link.name}>
+        <Link
+          href={link.href}
+          className={
+            isActive
+              ? "text-[#925C4C] font-bold"
+              : "text-black hover:text-[#925C4C]"
+          }
+        >
+          {link.name}
+        </Link>
+      </li>
+    );
+  });
+};
+
+export default function ProductLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+
+  return (
+    <div style={{ display: "flex" }}>
+      <aside style={{ width: "250px", padding: "20px" }}>
+        <nav>
+          <ul className="space-y-4">
+            {renderLinks(categoryLinks, pathname)}
+          </ul>
+          <ul className="space-y-4 mt-8">
+            {renderLinks(specialLinks, pathname)}
+          </ul>
+        </nav>
+      </aside>
+      
+      <main style={{ flex: 1, padding: "20px" }}>
+        {children}
+      </main>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/product/limited/page.tsx b/frontend/src/app/product/limited/page.tsx
new file mode 100644
index 0000000..2d95913
--- /dev/null
+++ b/frontend/src/app/product/limited/page.tsx
@@ -0,0 +1,11 @@
+import { ProductList } from '@/components/product';
+
+export default function LimitedProductListPage() {
+  return (
+    <ProductList 
+      title="한정판매 상품"
+      filter="LIMITED"
+      basePath="/product/limited"
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/product/outwear/page.tsx b/frontend/src/app/product/outwear/page.tsx
new file mode 100644
index 0000000..769597f
--- /dev/null
+++ b/frontend/src/app/product/outwear/page.tsx
@@ -0,0 +1,11 @@
+import { ProductList } from '@/components/product';
+
+export default function OutwearProductListPage() {
+  return (
+    <ProductList 
+      title="아우터 상품"
+      category="OUTER"
+      basePath="/product/outwear"
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/product/page.tsx b/frontend/src/app/product/page.tsx
new file mode 100644
index 0000000..9ce5be3
--- /dev/null
+++ b/frontend/src/app/product/page.tsx
@@ -0,0 +1,10 @@
+import { ProductList } from '@/components/product';
+
+export default function ProductListPage() {
+  return (
+    <ProductList 
+      title="전체 상품"
+      basePath="/product"
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/product/top/page.tsx b/frontend/src/app/product/top/page.tsx
new file mode 100644
index 0000000..f8dd96a
--- /dev/null
+++ b/frontend/src/app/product/top/page.tsx
@@ -0,0 +1,11 @@
+import { ProductList } from '@/components/product';
+
+export default function TopProductListPage() {
+  return (
+    <ProductList 
+      title="상의 상품"
+      category="TOP"
+      basePath="/product/top"
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/PdfViewerModal.tsx b/frontend/src/components/PdfViewerModal.tsx
new file mode 100644
index 0000000..9a67c67
--- /dev/null
+++ b/frontend/src/components/PdfViewerModal.tsx
@@ -0,0 +1,78 @@
+import { useState, useEffect } from 'react';
+import api from '@/lib/api/axios';
+
+interface PdfViewerModalProps {
+  designId: number;
+  designName: string;
+  onClose: () => void;
+}
+
+export function PdfViewerModal({ designId, designName, onClose }: PdfViewerModalProps) {
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchPdf = async () => {
+      try {
+        const response = await api.get(`/designs/${designId}/pdf`, {
+          responseType: 'blob',
+        });
+
+        const blob = new Blob([response.data], { type: 'application/pdf' });
+        const url = window.URL.createObjectURL(blob);
+        setPdfUrl(url);
+        setIsLoading(false);
+      } catch (err: any) {
+        console.error('PDF 로드 실패:', err);
+        setError('PDF를 불러오는데 실패했습니다.');
+        setIsLoading(false);
+      }
+    };
+
+    fetchPdf();
+
+    // cleanup
+    return () => {
+      if (pdfUrl) {
+        window.URL.revokeObjectURL(pdfUrl);
+      }
+    };
+  }, [designId]);
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg w-11/12 h-5/6 flex flex-col">
+        {/* 헤더 */}
+        <div className="flex justify-between items-center p-4 border-b">
+          <h2 className="text-xl font-bold">{designName}</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700 text-2xl"
+          >
+            ×
+          </button>
+        </div>
+
+        {/* PDF 뷰어 */}
+        <div className="flex-1 p-4">
+          {isLoading ? (
+            <div className="flex justify-center items-center h-full">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+            </div>
+          ) : error ? (
+            <div className="flex justify-center items-center h-full">
+              <p className="text-red-500">{error}</p>
+            </div>
+          ) : (
+            <iframe
+              src={pdfUrl || ''}
+              className="w-full h-full border-0"
+              title={designName}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/common/LoginModal/LoginModal.tsx b/frontend/src/components/common/LoginModal/LoginModal.tsx
new file mode 100644
index 0000000..b683159
--- /dev/null
+++ b/frontend/src/components/common/LoginModal/LoginModal.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import { useEffect } from 'react';
+
+interface LoginModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export default function LoginModal({ isOpen, onClose }: LoginModalProps) {
+    const handleGoogleLogin = () => {
+        const backendUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
+        const loginUrl = `${backendUrl}/oauth2/authorization/google`;
+
+        console.log('Google 로그인 시작:', loginUrl);
+        window.location.href = loginUrl;
+    };
+
+    // ESC 키로 모달 닫기
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && isOpen) {
+                onClose();
+            }
+        };
+
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, onClose]);
+
+    // 모달이 열릴 때 스크롤 방지
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = 'unset';
+        }
+        return () => {
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen]);
+
+    if (!isOpen) return null;
+
+    return (
+        <>
+            {/* 배경 오버레이 */}
+            <div
+                className="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity"
+                onClick={onClose}
+            />
+
+            {/* 모달 컨텐츠 */}
+            <div className="fixed inset-0 flex items-center justify-center z-50 p-4">
+                <div
+                    className="bg-white rounded-lg shadow-xl max-w-md w-full p-8 relative animate-fadeIn"
+                    onClick={(e) => e.stopPropagation()} // 모달 내부 클릭 시 닫히지 않도록
+                >
+                    {/* 닫기 버튼 */}
+                    <button
+                        onClick={onClose}
+                        className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors"
+                        aria-label="닫기"
+                    >
+                        <svg
+                            className="w-6 h-6"
+                            fill="none"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path d="M6 18L18 6M6 6l12 12"></path>
+                        </svg>
+                    </button>
+
+                    {/* 모달 헤더 */}
+                    <div className="text-center mb-8">
+                        <h2 className="text-2xl font-bold text-gray-800 mb-2">
+                            로그인
+                        </h2>
+                        <p className="text-gray-600 text-sm">
+                            Knitly에 오신 것을 환영합니다
+                        </p>
+                    </div>
+
+                    {/* 로그인 버튼 */}
+                    <div className="space-y-4">
+                        <button
+                            onClick={handleGoogleLogin}
+                            className="w-full flex items-center justify-center gap-3 bg-white border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 transition-all hover:border-gray-400 font-medium"
+                        >
+                            {/* Google 아이콘 */}
+                            <svg className="w-6 h-6" viewBox="0 0 24 24">
+                                <path
+                                    fill="#4285F4"
+                                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                                />
+                                <path
+                                    fill="#34A853"
+                                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                                />
+                                <path
+                                    fill="#FBBC05"
+                                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                                />
+                                <path
+                                    fill="#EA4335"
+                                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                                />
+                            </svg>
+                            Google로 로그인
+                        </button>
+                    </div>
+
+                    {/* 약관 동의 문구 */}
+                    <p className="text-center text-xs text-gray-500 mt-6">
+                        로그인하면 서비스 이용약관 및 개인정보 처리방침에 <br />
+                        동의하는 것으로 간주됩니다.
+                    </p>
+                </div>
+            </div>
+
+            {/* 애니메이션을 위한 CSS */}
+            <style jsx>{`
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+        .animate-fadeIn {
+          animation: fadeIn 0.2s ease-out;
+        }
+      `}</style>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/components/product/ProductCard.tsx b/frontend/src/components/product/ProductCard.tsx
new file mode 100644
index 0000000..b57c25d
--- /dev/null
+++ b/frontend/src/components/product/ProductCard.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { ProductListResponse } from '@/types/product.types';
+
+interface ProductCardProps {
+  product: ProductListResponse;
+  onLikeToggle: (productId: number) => void;
+}
+
+export default function ProductCard({ product, onLikeToggle }: ProductCardProps) {
+  const router = useRouter();
+  const API_URL = process.env.NEXT_PUBLIC_API_URL || '';
+
+  const handleCardClick = () => {
+    router.push(`/product/${product.productId}`);
+  };
+
+  const handleAuthorClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // TODO: 판매자 스토어 페이지로 이동 (아직 구현 전)
+    alert('판매자 스토어 페이지로 이동합니다. (구현 예정)');
+  };
+
+  const handleLikeClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onLikeToggle(product.productId);
+  };
+
+  return (
+    <div 
+      onClick={handleCardClick}
+      className="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
+    >
+      {/* 상품 이미지 */}
+      <div className="aspect-square bg-gray-100 flex items-center justify-center">
+        {product.thumbnailUrl ? (
+          <img 
+            src={`${API_URL}${product.thumbnailUrl}`}
+            alt={product.title}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div className="text-gray-400 text-sm">이미지</div>
+        )}
+      </div>
+      
+      {/* 상품 정보 */}
+      <div className="p-4 flex justify-between items-end">
+        {/* 좌측: 상품명, 작가명, 가격 */}
+        <div className="flex-1">
+          <h3 className="font-medium text-gray-900 text-sm line-clamp-2 mb-1">
+            {product.title}
+          </h3>
+          <button
+            onClick={handleAuthorClick}
+            className="text-xs text-gray-600 hover:text-[#925C4C] transition-colors block mb-2"
+          >
+            {product.sellerName}
+          </button>
+          {/* 🔥 가격 스타일 수정: 갈색(브랜드컬러) + 볼드 처리 */}
+          <div className="text-base font-bold text-[#925C4C]">
+            {product.isFree ? '무료' : `${product.price.toLocaleString()}원`}
+          </div>
+        </div>
+        
+        {/* 우측: 찜 버튼 + 찜 개수 (세로 배치) */}
+        <div className="flex flex-col items-center gap-1 ml-4">
+          <button
+            onClick={handleLikeClick}
+            className="flex-shrink-0"
+          >
+            <svg
+              className="w-5 h-5 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+              />
+            </svg>
+          </button>
+          <div className="text-xs text-gray-500">
+            {product.likeCount}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/product/ProductList.tsx b/frontend/src/components/product/ProductList.tsx
new file mode 100644
index 0000000..96466fa
--- /dev/null
+++ b/frontend/src/components/product/ProductList.tsx
@@ -0,0 +1,226 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ProductListResponse, PageResponse } from '@/types/product.types';
+import { getProductList, toggleProductLike, ProductListParams } from '@/lib/api/product.api';
+import ProductCard from './ProductCard';
+
+interface ProductListProps {
+  title: string;
+  category?: 'TOP' | 'BOTTOM' | 'OUTER' | 'BAG' | 'ETC';
+  filter?: 'FREE' | 'LIMITED';
+  basePath: string;
+}
+
+export default function ProductList({ title, category, filter, basePath }: ProductListProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  
+  // 상태 관리
+  const [products, setProducts] = useState<ProductListResponse[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [totalElements, setTotalElements] = useState(0);
+  
+  // 정렬 상태
+  const [selectedSort, setSelectedSort] = useState<'POPULAR' | 'LATEST' | 'PRICE_ASC' | 'PRICE_DESC'>('LATEST');
+
+  // URL 파라미터에서 초기값 설정
+  useEffect(() => {
+    const sort = searchParams.get('sort') as 'POPULAR' | 'LATEST' | 'PRICE_ASC' | 'PRICE_DESC' || 'LATEST';
+    const page = parseInt(searchParams.get('page') || '0');
+
+    setSelectedSort(sort);
+    setCurrentPage(page);
+  }, [searchParams]);
+
+  // 상품 목록 조회
+  const fetchProducts = async () => {
+    setLoading(true);
+    try {
+      const params: ProductListParams = {
+        page: currentPage,
+        size: 20,
+        sort: selectedSort,
+      };
+
+      if (category) {
+        params.category = category;
+      }
+      
+      if (filter) {
+        params.filter = filter;
+      }
+
+      const response: PageResponse<ProductListResponse> = await getProductList(params);
+      
+      setProducts(response.content);
+      setTotalPages(response.totalPages);
+      setTotalElements(response.totalElements);
+    } catch (error) {
+      console.error('상품 목록 조회 실패:', error);
+      // 에러 발생 시 빈 배열로 설정
+      setProducts([]);
+      setTotalPages(0);
+      setTotalElements(0);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, [currentPage, selectedSort, category, filter]);
+
+  // 정렬 변경
+  const handleSortChange = (sort: 'POPULAR' | 'LATEST' | 'PRICE_ASC' | 'PRICE_DESC') => {
+    setSelectedSort(sort);
+    setCurrentPage(0);
+    updateURL({ sort, page: 0 });
+  };
+
+  // 페이지 변경
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    updateURL({ page });
+  };
+
+  // URL 업데이트
+  const updateURL = (params: { sort?: string; page?: number }) => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    
+    if (params.sort !== undefined) {
+      newSearchParams.set('sort', params.sort);
+    }
+    
+    if (params.page !== undefined) {
+      if (params.page === 0) {
+        newSearchParams.delete('page');
+      } else {
+        newSearchParams.set('page', params.page.toString());
+      }
+    }
+
+    router.push(`${basePath}?${newSearchParams.toString()}`);
+  };
+
+  // 찜 토글
+  const handleLikeToggle = async (productId: number) => {
+    try {
+      await toggleProductLike(productId);
+      
+      // 성공 시 로컬 상태 업데이트 (찜 개수 증가/감소)
+      setProducts(prev => prev.map(product => 
+        product.productId === productId 
+          ? { 
+              ...product, 
+              likeCount: product.likeCount + 1 // 백엔드에서 실제 찜 상태를 반환하지 않으므로 단순히 증가
+            }
+          : product
+      ));
+    } catch (error) {
+      console.error('찜 토글 실패:', error);
+      // 에러 처리 (예: 토스트 메시지 표시)
+    }
+  };
+
+  // 정렬 옵션
+  const sortOptions = [
+    { value: 'POPULAR', label: '인기순' },
+    { value: 'LATEST', label: '최신순' },
+    { value: 'PRICE_DESC', label: '가격 높은순' },
+    { value: 'PRICE_ASC', label: '가격 낮은순' },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white">
+      <div className="max-w-7xl mx-auto px-4 py-4">
+        {/* 메인 콘텐츠 */}
+        <div>
+          {/* 정렬 옵션 */}
+          <div className="flex justify-between items-center mb-6">
+            <h2 className="text-2xl font-bold">{title}</h2>
+            
+            <div className="flex items-center gap-2">
+              <select
+                value={selectedSort}
+                onChange={(e) => handleSortChange(e.target.value as 'POPULAR' | 'LATEST' | 'PRICE_ASC' | 'PRICE_DESC')}
+                className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#925C4C]"
+              >
+                {sortOptions.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* 상품 그리드 */}
+          {loading ? (
+            <div className="flex justify-center items-center h-64">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#925C4C]"></div>
+            </div>
+          ) : (
+            <>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8">
+                {products.map((product) => (
+                  <ProductCard
+                    key={product.productId}
+                    product={product}
+                    onLikeToggle={handleLikeToggle}
+                  />
+                ))}
+              </div>
+
+              {/* 페이징 */}
+              {totalPages > 1 && (
+                <div className="flex justify-center items-center gap-2">
+                  <button
+                    onClick={() => handlePageChange(currentPage - 1)}
+                    disabled={currentPage === 0}
+                    className="px-3 py-2 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                  >
+                    이전
+                  </button>
+                  
+                  {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                    const pageNum = Math.max(0, Math.min(totalPages - 5, currentPage - 2)) + i;
+                    return (
+                      <button
+                        key={pageNum}
+                        onClick={() => handlePageChange(pageNum)}
+                        className={`px-3 py-2 border rounded-md ${
+                          currentPage === pageNum
+                            ? 'bg-[#925C4C] text-white border-[#925C4C]'
+                            : 'border-gray-300 hover:bg-gray-50'
+                        }`}
+                      >
+                        {pageNum + 1}
+                      </button>
+                    );
+                  })}
+                  
+                  <button
+                    onClick={() => handlePageChange(currentPage + 1)}
+                    disabled={currentPage === totalPages - 1}
+                    className="px-3 py-2 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                  >
+                    다음
+                  </button>
+                </div>
+              )}
+
+              {/* 결과 정보 */}
+              <div className="text-center text-sm text-gray-600 mt-4">
+                총 {totalElements.toLocaleString()}개의 상품
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/product/index.ts b/frontend/src/components/product/index.ts
new file mode 100644
index 0000000..882a137
--- /dev/null
+++ b/frontend/src/components/product/index.ts
@@ -0,0 +1,2 @@
+export { default as ProductCard } from './ProductCard';
+export { default as ProductList } from './ProductList';
diff --git a/frontend/src/lib/api/auth.api.ts b/frontend/src/lib/api/auth.api.ts
new file mode 100644
index 0000000..70a1a8f
--- /dev/null
+++ b/frontend/src/lib/api/auth.api.ts
@@ -0,0 +1 @@
+//인증 api
\ No newline at end of file
diff --git a/frontend/src/lib/api/axios.ts b/frontend/src/lib/api/axios.ts
new file mode 100644
index 0000000..9ff9592
--- /dev/null
+++ b/frontend/src/lib/api/axios.ts
@@ -0,0 +1,84 @@
+//axios 설정
+import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
+import { useAuthStore } from '@/lib/store/authStore';
+
+const api = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080',
+    withCredentials: true, // 쿠키 포함
+    timeout: 10000,
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+// Request Interceptor: Access Token 자동 추가
+api.interceptors.request.use(
+    (config: InternalAxiosRequestConfig) => {
+        const token = localStorage.getItem('accessToken');
+
+        if (token && config.headers) {
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+
+        return config;
+    },
+    (error: AxiosError) => {
+        return Promise.reject(error);
+    }
+);
+
+// Response Interceptor: Token Refresh 처리
+api.interceptors.response.use(
+    (response) => response,
+    async (error: AxiosError) => {
+        const originalRequest = error.config as InternalAxiosRequestConfig & {
+            _retry?: boolean;
+        };
+
+        // Access Token 만료 시 자동 갱신
+        if (error.response?.status === 401 && !originalRequest._retry) {
+            originalRequest._retry = true;
+
+            try {
+                console.log('🔄 Access Token 갱신 시도...');
+
+                // Refresh Token으로 새 토큰 발급
+                const { data } = await axios.post(
+                    `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080'}/auth/refresh`,
+                    {},
+                    { withCredentials: true } // RT 쿠키 포함
+                );
+
+                const newAccessToken = data.accessToken;
+
+                // 새 토큰 저장
+                useAuthStore.getState().setAccessToken(newAccessToken);
+
+                // 실패한 요청 재시도
+                if (originalRequest.headers) {
+                    originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+                }
+
+                console.log('✅ Token 갱신 성공');
+                return api(originalRequest);
+
+            } catch (refreshError) {
+                console.error('❌ Token 갱신 실패:', refreshError);
+
+                // Refresh Token도 만료 → 로그아웃
+                useAuthStore.getState().logout();
+
+                // 로그인 페이지로 리다이렉트
+                if (typeof window !== 'undefined') {
+                    window.location.href = '/login';
+                }
+
+                return Promise.reject(refreshError);
+            }
+        }
+
+        return Promise.reject(error);
+    }
+);
+
+export default api;
\ No newline at end of file
diff --git a/frontend/src/lib/api/community.api.ts b/frontend/src/lib/api/community.api.ts
new file mode 100644
index 0000000..e343f66
--- /dev/null
+++ b/frontend/src/lib/api/community.api.ts
@@ -0,0 +1,20 @@
+import api from '@/lib/api/axios';
+import { PostListResponse, PostCategory } from '@//types/community.types';
+
+// 게시글 목록 조회
+export const getPosts = async (
+  category?: PostCategory | null,
+  query?: string,
+  page: number = 0,
+  size: number = 10
+): Promise<PostListResponse> => {
+  const params = new URLSearchParams();
+  
+  if (category) params.append('category', category);
+  if (query) params.append('query', query);
+  params.append('page', page.toString());
+  params.append('size', size.toString());
+
+  const response = await api.get(`/community/posts?${params}`);
+  return response.data;
+};
diff --git a/frontend/src/lib/api/design.api.ts b/frontend/src/lib/api/design.api.ts
new file mode 100644
index 0000000..c87a05c
--- /dev/null
+++ b/frontend/src/lib/api/design.api.ts
@@ -0,0 +1,198 @@
+import api from './axios';
+
+/**
+ * 도안 상태 타입
+ */
+export type DesignState = 'BEFORE_SALE' | 'ON_SALE' | 'STOPPED';
+
+/**
+ * 뜨개질 기호 타입
+ */
+export type KnittingSymbol = 'empty' | 'filled' | 'x' | 'v' | 't' | 'plus' | 'a';
+
+/**
+ * 도안 생성 요청
+ */
+export interface DesignCreateRequest {
+    designName: string;        // 필수, 최대 30자
+    gridData: string[][];      // 필수, 10x10 배열
+    fileName?: string;         // 선택, 최대 80자
+}
+
+/**
+ * 도안 응답
+ */
+export interface DesignResponse {
+    designId: number;
+    designName: string;
+    pdfUrl: string;
+    designState: DesignState;
+    createdAt: string;
+}
+
+/**
+ * 도안 목록 응답
+ */
+export interface DesignListResponse {
+    designId: number;
+    designName: string;
+    pdfUrl: string;
+    designState: DesignState;
+    createdAt: string;
+}
+
+/**
+ * 도안 생성 (격자 기반)
+ * POST /designs
+ * 
+ * @description 10x10 격자 데이터를 전송하면 백엔드에서 PDF를 생성합니다.
+ * @param request - 도안명과 gridData
+ * @returns DesignResponse
+ */
+export const createDesign = async (
+    request: DesignCreateRequest
+): Promise<DesignResponse> => {
+    const response = await api.post('/designs', request);
+    return response.data;
+};
+
+/**
+ * 기존 PDF 업로드
+ * POST /designs/upload
+ * 
+ * @description PDF 파일을 업로드하여 도안을 등록합니다.
+ * @param file - PDF 파일
+ * @param designName - 도안명 (선택)
+ * @returns DesignResponse
+ */
+export const uploadDesignPdf = async (
+    file: File,
+    designName?: string
+): Promise<DesignResponse> => {
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    if (designName) {
+        formData.append('designName', designName);
+    }
+
+    const response = await api.post('/designs/upload', formData, {
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+    });
+    
+    return response.data;
+};
+
+/**
+ * 내 도안 목록 조회
+ * GET /designs/my
+ * 
+ * @description 로그인한 사용자의 도안 목록을 조회합니다.
+ * @returns DesignListResponse[]
+ */
+export const getMyDesigns = async (): Promise<DesignListResponse[]> => {
+    const response = await api.get('/designs/my');
+    return response.data;
+};
+
+/**
+ * 도안 삭제
+ * DELETE /designs/{designId}
+ * 
+ * @description BEFORE_SALE 상태의 도안만 삭제 가능합니다.
+ * @param designId - 도안 ID
+ */
+export const deleteDesign = async (designId: number): Promise<void> => {
+    await api.delete(`/designs/${designId}`);
+};
+
+/**
+ * 판매 중지
+ * PATCH /designs/{designId}/stop
+ * 
+ * @description ON_SALE 상태의 도안을 STOPPED 상태로 변경합니다.
+ * @param designId - 도안 ID
+ */
+export const stopDesignSale = async (designId: number): Promise<void> => {
+    await api.patch(`/designs/${designId}/stop`);
+};
+
+/**
+ * 판매 재개
+ * PATCH /designs/{designId}/relist
+ * 
+ * @description STOPPED 상태의 도안을 ON_SALE 상태로 변경합니다.
+ * @param designId - 도안 ID
+ */
+export const relistDesign = async (designId: number): Promise<void> => {
+    await api.patch(`/designs/${designId}/relist`);
+};
+
+/**
+ * PDF 보기 (Blob 방식 - 인증 유지)
+ * GET /designs/{designId}/pdf
+ * 
+ * @description axios가 자동으로 Authorization 헤더를 추가하여 인증된 상태로 PDF를 가져옵니다.
+ * @param designId - 도안 ID
+ */
+export const viewDesignPdf = async (designId: number): Promise<void> => {
+    try {
+        const response = await api.get(`/designs/${designId}/pdf`, {
+            responseType: 'blob', // 중요! PDF를 Blob으로 받기
+        });
+
+        // Blob URL 생성
+        const blob = new Blob([response.data], { type: 'application/pdf' });
+        const blobUrl = window.URL.createObjectURL(blob);
+
+        // 새 창에서 열기
+        window.open(blobUrl, '_blank');
+
+        // 메모리 정리 (5초 후)
+        setTimeout(() => {
+            window.URL.revokeObjectURL(blobUrl);
+        }, 5000);
+    } catch (error: any) {
+        console.error('PDF 로드 실패:', error);
+        throw error;
+    }
+};
+
+/**
+ * PDF 다운로드
+ * GET /designs/{designId}/pdf
+ * 
+ * @description PDF 파일을 다운로드합니다.
+ * @param designId - 도안 ID
+ * @param designName - 도안명 (파일명으로 사용)
+ */
+export const downloadDesignPdf = async (
+    designId: number, 
+    designName: string
+): Promise<void> => {
+    try {
+        const response = await api.get(`/designs/${designId}/pdf`, {
+            responseType: 'blob',
+        });
+
+        // Blob 생성
+        const blob = new Blob([response.data], { type: 'application/pdf' });
+        const url = window.URL.createObjectURL(blob);
+
+        // 다운로드 링크 생성 및 클릭
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${designName}.pdf`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+
+        // 메모리 정리
+        window.URL.revokeObjectURL(url);
+    } catch (error: any) {
+        console.error('PDF 다운로드 실패:', error);
+        throw error;
+    }
+};
diff --git a/frontend/src/lib/api/home.api.ts b/frontend/src/lib/api/home.api.ts
new file mode 100644
index 0000000..42b39e6
--- /dev/null
+++ b/frontend/src/lib/api/home.api.ts
@@ -0,0 +1,39 @@
+import api from './axios';
+import { ProductListResponse } from '@/types/product.types';
+import { LatestReviewItem, LatestPostItem, HomeSummaryResponse } from '@/types/home.types';
+
+/**
+ * 홈 화면 인기 상품 TOP5 조회
+ * GET /home/popular/top5
+ */
+export const getPopularTop5 = async (): Promise<ProductListResponse[]> => {
+    const response = await api.get('/home/popular/top5');
+    return response.data;
+};
+
+/**
+ * 최신 리뷰 조회
+ * GET /home/latest/reviews
+ */
+export const getLatestReviews = async (): Promise<LatestReviewItem[]> => {
+    const response = await api.get('/home/latest/reviews');
+    return response.data;
+};
+
+/**
+ * 최신 커뮤니티 글 조회
+ * GET /home/latest/posts
+ */
+export const getLatestPosts = async (): Promise<LatestPostItem[]> => {
+    const response = await api.get('/home/latest/posts');
+    return response.data;
+};
+
+/**
+ * 홈 요약 정보 (인기 상품 + 최신 리뷰 + 최신 글) 한번에 조회
+ * GET /home/summary
+ */
+export const getHomeSummary = async (): Promise<HomeSummaryResponse> => {
+    const response = await api.get('/home/summary');
+    return response.data;
+};
diff --git a/frontend/src/lib/api/like.api.ts b/frontend/src/lib/api/like.api.ts
new file mode 100644
index 0000000..76a97b3
--- /dev/null
+++ b/frontend/src/lib/api/like.api.ts
@@ -0,0 +1,21 @@
+import api from './axios';
+import { FavoriteProductItem, PageResponse } from '@/types/like.types';
+
+// 내가 찜한 상품 목록 조회
+export const getMyFavorites = async (
+  page = 0,
+  size = 12
+): Promise<PageResponse<FavoriteProductItem>> => {
+  const res = await api.get('/mypage/favorites', { params: { page, size } });
+  return res.data;
+};
+
+// 찜 해제
+export const removeFavorite = async (productId: number): Promise<void> => {
+  await api.delete(`/products/${productId}/like`);
+};
+
+//찜 등록록
+export const addLike = async (productId: number): Promise<void> => {
+  await api.post(`/products/${productId}/like`);
+};
\ No newline at end of file
diff --git a/frontend/src/lib/api/mypage.api.ts b/frontend/src/lib/api/mypage.api.ts
new file mode 100644
index 0000000..2a284d6
--- /dev/null
+++ b/frontend/src/lib/api/mypage.api.ts
@@ -0,0 +1,58 @@
+import api from './axios';
+import { MyCommentListItem, MyPostListItemResponse, PageResponse } from '@/types/mypage.types';
+
+/**
+ * 내가 쓴 댓글 조회
+ */
+export const getMyComments = async (
+  query?: string,
+  page: number = 0,
+  size: number = 10
+): Promise<PageResponse<MyCommentListItem>> => {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    size: size.toString(),
+  });
+
+  if (query && query.trim()) {
+    params.append('query', query.trim());
+  }
+
+  const response = await api.get(`/mypage/comments?${params}`);
+  return response.data;
+};
+
+/**
+ * 내가 쓴 글 조회
+ */
+export const getMyPosts = async (
+  query?: string,
+  page: number = 0,
+  size: number = 10
+): Promise<PageResponse<MyPostListItemResponse>> => {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    size: size.toString(),
+  });
+
+  if (query && query.trim()) {
+    params.append('query', query.trim());
+  }
+
+  const response = await api.get(`/mypage/posts?${params}`);
+  return response.data;
+};
+
+/**
+ * 댓글 삭제
+ */
+export const deleteComment = async (commentId: number): Promise<void> => {
+  await api.delete(`/community/comments/${commentId}`);
+};
+
+/**
+ * 게시글 삭제
+ */
+export const deletePost = async (postId: number): Promise<void> => {
+  await api.delete(`/community/posts/${postId}`);
+};
diff --git a/frontend/src/lib/api/product.api.ts b/frontend/src/lib/api/product.api.ts
new file mode 100644
index 0000000..5a54fd1
--- /dev/null
+++ b/frontend/src/lib/api/product.api.ts
@@ -0,0 +1,141 @@
+import api from './axios';
+import { ProductListResponse, PageResponse } from '@/types/product.types';
+
+/**
+ * 판매자의 상품 목록 조회
+ */
+export const getSellerProducts = async (
+    userId: string,
+    page: number = 0,
+    size: number = 20,
+    sort?: string
+): Promise<PageResponse<ProductListResponse>> => {
+    const params = new URLSearchParams({
+        page: page.toString(),
+        size: size.toString(),
+    });
+
+    if (sort) {
+        params.append('sort', sort);
+    }
+
+    const response = await api.get(`/users/${userId}/products?${params}`);
+    return response.data;
+};
+
+/**
+ * 상품 수정
+ */
+export const updateProduct = async (productId: number, data: any) => {
+    const response = await api.put(`/products/${productId}`, data);
+    return response.data;
+};
+
+/**
+ * 상품 삭제
+ */
+export const deleteProduct = async (productId: number) => {
+    const response = await api.delete(`/products/${productId}`);
+    return response.data;
+};
+
+/**
+ * 스토어 설명 조회
+ */
+export const getStoreDescription = async (userId: string): Promise<string> => {
+    const response = await api.get(`/userstore/${userId}/description`);
+    return response.data.description;
+};
+
+/**
+ * 스토어 설명 업데이트
+ */
+export const updateStoreDescription = async (
+    userId: string,
+    description: string
+): Promise<void> => {
+    await api.put(`/userstore/${userId}/description`, { description });
+};
+
+
+// 상품 목록 조회 
+/**
+ * 상품 카테고리 타입
+ */
+export type ProductCategory = 'TOP' | 'BOTTOM' | 'OUTER' | 'BAG' | 'ETC';
+
+/**
+ * 상품 필터 타입
+ */
+export type ProductFilterType = 'ALL' | 'FREE' | 'LIMITED';
+
+/**
+ * 상품 정렬 타입
+ */
+export type ProductSortType = 'POPULAR' | 'LATEST' | 'PRICE_ASC' | 'PRICE_DESC';
+
+/**
+ * 상품 목록 조회 파라미터
+ */
+export interface ProductListParams {
+    category?: ProductCategory;
+    filter?: ProductFilterType;
+    sort?: ProductSortType;
+    page?: number;
+    size?: number;
+}
+
+/**
+ * 상품 상세 정보
+ */
+export interface ProductDetail {
+    productId: number;
+    title: string;
+    description: string;
+    productCategory: ProductCategory;
+    sizeInfo: string;
+    price: number;
+    stockQuantity: number | null;
+    likeCount: number;
+    isLikedByUser: boolean;
+    avgReviewRating: number | null;
+    productImageUrls: string[];
+}
+
+/**
+ * 전체 상품 목록 조회 (카테고리/필터/정렬 지원)
+ * GET /products
+ */
+export const getProductList = async (
+    params: ProductListParams = {}
+): Promise<PageResponse<ProductListResponse>> => {
+    const queryParams = new URLSearchParams();
+    
+    if (params.category) queryParams.append('category', params.category);
+    if (params.filter) queryParams.append('filter', params.filter);
+    if (params.sort) queryParams.append('sort', params.sort);
+    if (params.page !== undefined) queryParams.append('page', params.page.toString());
+    if (params.size !== undefined) queryParams.append('size', params.size.toString());
+
+    const response = await api.get(`/products?${queryParams.toString()}`);
+    return response.data;
+};
+
+/**
+ * 상품 상세 조회
+ * GET /products/{productId}
+ */
+export const getProductDetail = async (productId: number): Promise<ProductDetail> => {
+    const response = await api.get(`/products/${productId}`);
+    return response.data;
+};
+
+/**
+ * 상품 찜하기/취소
+ * POST /products/{productId}/like
+ * 
+ * @description 로그인이 필요한 기능입니다. axios 인터셉터에서 자동으로 토큰을 추가합니다.
+ */
+export const toggleProductLike = async (productId: number): Promise<void> => {
+    await api.post(`/products/${productId}/like`);
+};
diff --git a/frontend/src/lib/api/review.api.ts b/frontend/src/lib/api/review.api.ts
new file mode 100644
index 0000000..e58a4ac
--- /dev/null
+++ b/frontend/src/lib/api/review.api.ts
@@ -0,0 +1,43 @@
+// lib/api/review.api.ts
+import api from './axios';
+import { PageResponse, ReviewListItem, ProductReviewItem } from '@/types/review.types';
+
+  //내가 쓴 리뷰 조회
+  export const getMyReviews = async (page = 0, size = 10): Promise<PageResponse<ReviewListItem>> => {
+    const response = await api.get(`/mypage/reviews`, { params: { page, size } });
+    return response.data;
+  };
+  
+  //리뷰 삭제
+  export const deleteReview = async (reviewId: number) => {
+    await api.delete(`/reviews/${reviewId}`);
+  };
+
+  //리뷰 등록
+export const createReview = async (productId: number, data: { rating: number; content: string; images?: File[] }) => {
+  const formData = new FormData();
+  formData.append('rating', String(data.rating));
+  formData.append('content', data.content);
+
+  if (data.images && data.images.length > 0) {
+    data.images.forEach(file => formData.append('reviewImageUrls', file));
+  }
+
+  const response = await api.post(`/products/${productId}/reviews`, formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+
+  return response.data;
+};
+
+//특정 상품 리뷰 목록 조회
+export const getProductReviews = async (
+  productId: number,
+  page = 0,
+  size = 10
+): Promise<PageResponse<ProductReviewItem>> => {
+  const response = await api.get(`/products/${productId}/reviews`, {
+    params: { page, size },
+  });
+  return response.data;
+};
diff --git a/src/main/java/com/mysite/knitly/domain/community/comment/controller/.gitkeep b/frontend/src/lib/api/user.api.ts
similarity index 100%
rename from src/main/java/com/mysite/knitly/domain/community/comment/controller/.gitkeep
rename to frontend/src/lib/api/user.api.ts
diff --git a/src/main/java/com/mysite/knitly/domain/community/comment/dto/.gitkeep b/frontend/src/lib/hooks/useAuth.ts
similarity index 100%
rename from src/main/java/com/mysite/knitly/domain/community/comment/dto/.gitkeep
rename to frontend/src/lib/hooks/useAuth.ts
diff --git a/frontend/src/lib/store/authStore.ts b/frontend/src/lib/store/authStore.ts
new file mode 100644
index 0000000..134a4ec
--- /dev/null
+++ b/frontend/src/lib/store/authStore.ts
@@ -0,0 +1,89 @@
+// 리액트 애플리케이션을 위한 상태 관리 라이브러리
+// 매우 가볍고 빠르며, 복잡하지 않은 API를 사용하여 전역 상태(Global State)를 관리할 수 있게 해줌
+
+import { create } from 'zustand';
+import { AuthStore, User } from '@/types/auth.types';
+import api from '@/lib/api/axios';
+
+export const useAuthStore = create<AuthStore>((set, get) => ({
+    // State
+    user: null,
+    accessToken: null,
+    isLoading: true,
+    isAuthenticated: false,
+
+    // Actions
+    login: (accessToken: string, user: User) => {
+        // localStorage에 저장
+        localStorage.setItem('accessToken', accessToken);
+        localStorage.setItem('user', JSON.stringify(user));
+
+        set({
+            user,
+            accessToken,
+            isAuthenticated: true,
+            isLoading: false,
+        });
+
+        console.log('✅ 로그인 완료:', user);
+    },
+
+    logout: async () => {
+        try {
+            // 백엔드 로그아웃 API 호출
+            await api.post('/users/logout');
+        } catch (error) {
+            console.error('로그아웃 API 에러:', error);
+        } finally {
+            // 로컬 상태 초기화
+            localStorage.removeItem('accessToken');
+            localStorage.removeItem('user');
+
+            set({
+                user: null,
+                accessToken: null,
+                isAuthenticated: false,
+                isLoading: false,
+            });
+
+            console.log('✅ 로그아웃 완료');
+        }
+    },
+
+    setUser: (user: User | null) => {
+        set({ user });
+    },
+
+    setAccessToken: (token: string | null) => {
+        if (token) {
+            localStorage.setItem('accessToken', token);
+        } else {
+            localStorage.removeItem('accessToken');
+        }
+        set({ accessToken: token });
+    },
+
+    // 초기 인증 상태 확인
+    initAuth: () => {
+        try {
+            const token = localStorage.getItem('accessToken');
+            const userStr = localStorage.getItem('user');
+
+            if (token && userStr) {
+                const user: User = JSON.parse(userStr);
+                set({
+                    user,
+                    accessToken: token,
+                    isAuthenticated: true,
+                    isLoading: false,
+                });
+                console.log('✅ 기존 로그인 세션 복구:', user);
+            } else {
+                set({ isLoading: false });
+            }
+        } catch (error) {
+            console.error('인증 초기화 에러:', error);
+            set({ isLoading: false });
+        }
+    },
+}));
\ No newline at end of file
diff --git a/frontend/src/lib/store/cartStore.ts b/frontend/src/lib/store/cartStore.ts
new file mode 100644
index 0000000..4f2eadf
--- /dev/null
+++ b/frontend/src/lib/store/cartStore.ts
@@ -0,0 +1,56 @@
+import { create } from 'zustand';
+
+// 장바구니 아이템 타입 (quantity 없음)
+export interface CartStoreItem {
+  productId: number;
+  title: string;
+  price: number;
+  imageUrl?: string;
+}
+
+// CartState 타입 (clearCart 추가)
+interface CartState {
+  items: CartStoreItem[];
+  addToCart: (item: CartStoreItem) => void;
+  removeFromCart: (productId: number) => void;
+  isInCart: (productId: number) => boolean;
+  clearCart: () => void; // 장바구니 비우기 함수 추가
+}
+
+export const useCartStore = create<CartState>((set, get) => ({
+  items: [],
+
+  // addToCart 함수 (중복 방지)
+  addToCart: (newItem) => set((state) => {
+    const existingItem = state.items.find(
+      (item) => item.productId === newItem.productId
+    );
+    if (existingItem) {
+      console.log('이미 장바구니에 있는 상품입니다:', newItem.title);
+      return {}; // 상태 변경 없음
+    } else {
+      const updatedItems = [...state.items, newItem];
+      console.log('장바구니에 새 상품 추가:', updatedItems);
+      return { items: updatedItems };
+    }
+  }),
+
+  // removeFromCart 함수 (productId 기준)
+  removeFromCart: (productIdToRemove) => set((state) => {
+      console.log('장바구니에서 상품 제거:', productIdToRemove);
+      return {
+          items: state.items.filter((item) => item.productId !== productIdToRemove),
+      };
+  }),
+
+
+  // isInCart 함수
+  isInCart: (productId) => {
+    const state = get();
+    return state.items.some(item => item.productId === productId);
+  },
+
+  // clearCart 함수 추가
+  clearCart: () => set({ items: [] }), // items 배열을 빈 배열로 설정
+
+}));
\ No newline at end of file
diff --git a/frontend/src/lib/types/payment.ts b/frontend/src/lib/types/payment.ts
new file mode 100644
index 0000000..7e3a6e3
--- /dev/null
+++ b/frontend/src/lib/types/payment.ts
@@ -0,0 +1,59 @@
+// 결제 관련 타입 정의
+
+export interface CartItem {
+    id: string;
+    productId: string;
+    productName: string;
+    price: number;
+    imageUrl: string;
+  }
+  
+  export interface PaymentConfirmRequest {
+    paymentKey: string;
+    orderId: string;
+    amount: number;
+  }
+  
+  export interface PaymentConfirmResponse {
+    paymentId: number;
+    paymentKey: string;
+    orderId: string;
+    orderName?: string;
+    method: PaymentMethod;
+    totalAmount: number;
+    status: PaymentStatus;
+    requestedAt: string;
+    approvedAt?: string;
+    mid?: string;
+  }
+  
+  export enum PaymentMethod {
+    CARD = 'CARD',
+    TRANSFER = 'TRANSFER',
+    VIRTUAL_ACCOUNT = 'VIRTUAL_ACCOUNT',
+    MOBILE_PHONE = 'MOBILE_PHONE',
+    CULTURE_GIFT_CERTIFICATE = 'CULTURE_GIFT_CERTIFICATE',
+    BOOK_CULTURE_GIFT_CERTIFICATE = 'BOOK_CULTURE_GIFT_CERTIFICATE',
+    GAME_CULTURE_GIFT_CERTIFICATE = 'GAME_CULTURE_GIFT_CERTIFICATE',
+  }
+  
+  export enum PaymentStatus {
+    READY = 'READY',
+    IN_PROGRESS = 'IN_PROGRESS',
+    WAITING_FOR_DEPOSIT = 'WAITING_FOR_DEPOSIT',
+    DONE = 'DONE',
+    CANCELED = 'CANCELED',
+    FAILED = 'FAILED',
+  }
+  
+  export interface OrderCreateRequest {
+    cartItemIds: string[];
+  }
+  
+  export interface OrderCreateResponse {
+    orderId: number;
+    orderNumber: string;
+    totalPrice: number;
+    orderStatus: string;
+    createdAt: string;
+  }
\ No newline at end of file
diff --git a/src/main/java/com/mysite/knitly/domain/community/comment/entity/.gitkeep b/frontend/src/lib/utils/constants.js
similarity index 100%
rename from src/main/java/com/mysite/knitly/domain/community/comment/entity/.gitkeep
rename to frontend/src/lib/utils/constants.js
diff --git a/src/main/java/com/mysite/knitly/domain/community/comment/repository/.gitkeep b/frontend/src/lib/utils/storage.js
similarity index 100%
rename from src/main/java/com/mysite/knitly/domain/community/comment/repository/.gitkeep
rename to frontend/src/lib/utils/storage.js
diff --git a/src/main/java/com/mysite/knitly/domain/community/comment/service/.gitkeep b/frontend/src/types/api.types.ts
similarity index 100%
rename from src/main/java/com/mysite/knitly/domain/community/comment/service/.gitkeep
rename to frontend/src/types/api.types.ts
diff --git a/frontend/src/types/auth.types.ts b/frontend/src/types/auth.types.ts
new file mode 100644
index 0000000..e16a225
--- /dev/null
+++ b/frontend/src/types/auth.types.ts
@@ -0,0 +1,41 @@
+// 사용자 정보
+export interface User {
+    userId: string;
+    email: string;
+    name: string;
+    provider?: 'GOOGLE';
+    createdAt?: string;
+}
+
+// 토큰 응답
+export interface TokenResponse {
+    accessToken: string;
+    refreshToken: string;
+    tokenType: string;
+    expiresIn: number;
+}
+
+// 토큰 갱신 요청
+export interface TokenRefreshRequest {
+    refreshToken: string;
+}
+
+// 로그인 상태
+export interface AuthState {
+    user: User | null;
+    accessToken: string | null;
+    isLoading: boolean;
+    isAuthenticated: boolean;
+}
+
+// 로그인 함수 타입
+export interface AuthActions {
+    login: (accessToken: string, user: User) => void;
+    logout: () => Promise<void>;
+    setUser: (user: User | null) => void;
+    setAccessToken: (token: string | null) => void;
+    initAuth: () => void;
+}
+
+// Auth Store 전체 타입
+export type AuthStore = AuthState & AuthActions;
\ No newline at end of file
diff --git a/frontend/src/types/community.types.ts b/frontend/src/types/community.types.ts
new file mode 100644
index 0000000..3a30fd7
--- /dev/null
+++ b/frontend/src/types/community.types.ts
@@ -0,0 +1,38 @@
+// 게시글 카테고리
+export type PostCategory = 'FREE' | 'QUESTION' | 'TIP';
+
+// 게시글 목록 아이템
+export interface PostListItem {
+  id: number;
+  category: PostCategory;
+  title: string;
+  excerpt: string;
+  authorDisplay: string;
+  createdAt: string;
+  commentCount: number;
+  thumbnailUrl: string | null;
+}
+
+// 페이지 응답
+export interface PostListResponse {
+  content: PostListItem[];
+  page: number;
+  size: number;
+  totalPages: number;
+  totalElements: number;
+  first: boolean;
+  last: boolean;
+}
+
+// 카테고리 라벨
+export const CATEGORY_LABELS: Record<PostCategory, string> = {
+  FREE: '자유',
+  QUESTION: '질문',
+  TIP: '팁'
+};
+
+
+
+
+
+
diff --git a/frontend/src/types/home.types.ts b/frontend/src/types/home.types.ts
new file mode 100644
index 0000000..5dc63f7
--- /dev/null
+++ b/frontend/src/types/home.types.ts
@@ -0,0 +1,35 @@
+// 홈 화면용 타입 정의
+
+/**
+ * 최신 리뷰 아이템
+ */
+export interface LatestReviewItem {
+    reviewId: number;
+    productId: number;
+    productTitle: string;
+    productThumbnailUrl: string | null;
+    rating: number;
+    content: string;
+    createdDate: string; // LocalDate
+  }
+  
+  /**
+   * 최신 커뮤니티 글 아이템
+   */
+  export interface LatestPostItem {
+    postId: number;
+    title: string;
+    category: string;
+    thumbnailUrl: string | null;
+    createdAt: string; // LocalDateTime
+  }
+  
+  /**
+   * 홈 요약 응답 (한번에 모든 데이터)
+   */
+  export interface HomeSummaryResponse {
+    popularProducts: any[]; // ProductListResponse[]
+    latestReviews: LatestReviewItem[];
+    latestPosts: LatestPostItem[];
+  }
+  
\ No newline at end of file
diff --git a/frontend/src/types/like.types.ts b/frontend/src/types/like.types.ts
new file mode 100644
index 0000000..5e63914
--- /dev/null
+++ b/frontend/src/types/like.types.ts
@@ -0,0 +1,14 @@
+export interface FavoriteProductItem {
+    productId: number;
+    productTitle: string;
+    sellerName: string;
+    thumbnailUrl: string;
+  }
+  
+  export interface PageResponse<T> {
+    content: T[];
+    totalPages: number;
+    totalElements: number;
+    size: number;
+    number: number;
+  }
\ No newline at end of file
diff --git a/frontend/src/types/mypage.types.ts b/frontend/src/types/mypage.types.ts
new file mode 100644
index 0000000..b87166e
--- /dev/null
+++ b/frontend/src/types/mypage.types.ts
@@ -0,0 +1,33 @@
+// 마이페이지 - 내가 쓴 댓글
+export interface MyCommentListItem {
+    id: number; // 댓글 ID
+    postId: number; // 게시글 ID
+    createdAt: string; // 작성일 (DATE 형식)
+    content: string; // 댓글 내용 요약 (최대 30자)
+  }
+  
+  // 마이페이지 - 내가 쓴 글
+  export interface MyPostListItemResponse {
+    id: number; // 게시글 ID
+    title: string; // 제목
+    content: string; // 내용 요약 (최대 10자)
+    thumbnailUrl: string | null; // 대표 이미지 URL
+    createdAt: string; // 작성일
+  }
+  
+  // 페이지 응답 공통 타입
+  export interface PageResponse<T> {
+    content: T[];
+    page: number;
+    size: number;
+    totalElements: number;
+    totalPages: number;
+    last: boolean;
+  }
+  
+  
+  
+  
+  
+  
+  
\ No newline at end of file
diff --git a/frontend/src/types/product.types.ts b/frontend/src/types/product.types.ts
new file mode 100644
index 0000000..de75f67
--- /dev/null
+++ b/frontend/src/types/product.types.ts
@@ -0,0 +1,52 @@
+/**
+ * 상품 목록 조회 응답 (백엔드 ProductListResponse와 매핑)
+ */
+export interface ProductListResponse {
+    productId: number;
+    title: string;
+    productCategory: 'TOP' | 'BOTTOM' | 'OUTER' | 'BAG' | 'ETC';
+    price: number;
+    purchaseCount: number;
+    likeCount: number;
+    isLikedByUser: boolean;
+    stockQuantity: number | null;
+    avgReviewRating: number | null;
+    createdAt: string;
+    thumbnailUrl: string | null;
+    sellerName: string; // 🔥 판매자 이름 추가
+    isFree: boolean;
+    isLimited: boolean;
+    isSoldOut: boolean;
+}
+
+/**
+ * 페이지네이션 응답
+ */
+export interface PageResponse<T> {
+    content: T[];
+    pageable: {
+        pageNumber: number;
+        pageSize: number;
+        sort: {
+            empty: boolean;
+            sorted: boolean;
+            unsorted: boolean;
+        };
+        offset: number;
+        paged: boolean;
+        unpaged: boolean;
+    };
+    totalPages: number;
+    totalElements: number;
+    last: boolean;
+    size: number;
+    number: number;
+    sort: {
+        empty: boolean;
+        sorted: boolean;
+        unsorted: boolean;
+    };
+    numberOfElements: number;
+    first: boolean;
+    empty: boolean;
+}
diff --git a/frontend/src/types/review.types.ts b/frontend/src/types/review.types.ts
new file mode 100644
index 0000000..ee172ff
--- /dev/null
+++ b/frontend/src/types/review.types.ts
@@ -0,0 +1,42 @@
+// types/review.types.ts
+export interface ReviewListItem {
+    reviewId: number;
+    productId: number;
+    productTitle: string;
+    productThumbnailUrl: string;
+    rating: number;
+    content: string;
+    reviewImageUrls?: string[];
+    createdDate: string;
+    purchasedDate?: string;
+  }
+
+  export interface ReviewCreateRequest {
+    rating: number;
+    content: string;
+    images?: File[];
+  }
+
+  // 리뷰 작성 폼용 상품 정보
+export interface ReviewCreateResponse {
+  productTitle: string;
+  productThumbnailUrl: string;
+}
+  
+  export interface PageResponse<T> {
+    content: T[];
+    totalPages: number;
+    totalElements: number;
+    size: number;
+    number: number;
+  }
+ // 특정 상품의 리뷰 목록을 위한 타입
+  export interface ProductReviewItem {
+    reviewId: number;
+    rating: number;
+    content: string;
+    createdAt: string; // LocalDateTime은 JSON에서 string으로 변환됨
+    userName: string;
+    reviewImageUrls: string[];
+  }
+  
\ No newline at end of file
diff --git a/src/main/java/com/mysite/knitly/domain/community/post/controller/.gitkeep b/frontend/src/types/user.types.ts
similarity index 100%
rename from src/main/java/com/mysite/knitly/domain/community/post/controller/.gitkeep
rename to frontend/src/types/user.types.ts
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..c133409
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..2cbd8c8
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "NBE7-9-2-Team02",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/resources/static/product/00cf313a-22c6-4cfd-9609-b01d03db870a_IMG_2964.PNG.pdf b/resources/static/product/00cf313a-22c6-4cfd-9609-b01d03db870a_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/00cf313a-22c6-4cfd-9609-b01d03db870a_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/012e4063-ca21-462f-b86d-14ab8337e41d_IMG_2964.PNG.pdf b/resources/static/product/012e4063-ca21-462f-b86d-14ab8337e41d_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/012e4063-ca21-462f-b86d-14ab8337e41d_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/09b4af99-cc6c-4909-8cff-24617da25ef6_IMG_2964.PNG.pdf b/resources/static/product/09b4af99-cc6c-4909-8cff-24617da25ef6_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/09b4af99-cc6c-4909-8cff-24617da25ef6_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/0a2432b5-c677-4f91-91d5-0f973926bd1d_IMG_2964.PNG.pdf b/resources/static/product/0a2432b5-c677-4f91-91d5-0f973926bd1d_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/0a2432b5-c677-4f91-91d5-0f973926bd1d_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/0fb4251f-b79b-44cf-8047-66b375c3cc9e_IMG_2964.PNG.pdf b/resources/static/product/0fb4251f-b79b-44cf-8047-66b375c3cc9e_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/0fb4251f-b79b-44cf-8047-66b375c3cc9e_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/19f1b5af-14cc-417c-abd9-0027ab246f46_IMG_2964.PNG.pdf b/resources/static/product/19f1b5af-14cc-417c-abd9-0027ab246f46_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/19f1b5af-14cc-417c-abd9-0027ab246f46_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/1e87ad88-811f-472f-845e-f1c88dc50bd6_IMG_2964.PNG.pdf b/resources/static/product/1e87ad88-811f-472f-845e-f1c88dc50bd6_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/1e87ad88-811f-472f-845e-f1c88dc50bd6_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/21594139-2f2e-44ea-bbb3-79f6d6a440e1_IMG_2964.PNG.pdf b/resources/static/product/21594139-2f2e-44ea-bbb3-79f6d6a440e1_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/21594139-2f2e-44ea-bbb3-79f6d6a440e1_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/29752165-68dd-4ff4-8644-1629534ede7f_IMG_2964.PNG.pdf b/resources/static/product/29752165-68dd-4ff4-8644-1629534ede7f_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/29752165-68dd-4ff4-8644-1629534ede7f_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/2d69940e-9357-4ad4-83bc-399c908bc72b_IMG_2964.PNG.pdf b/resources/static/product/2d69940e-9357-4ad4-83bc-399c908bc72b_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/2d69940e-9357-4ad4-83bc-399c908bc72b_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/2f6e51a9-4d42-4689-9eba-52ea728dd67f_IMG_2964.PNG.pdf b/resources/static/product/2f6e51a9-4d42-4689-9eba-52ea728dd67f_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/2f6e51a9-4d42-4689-9eba-52ea728dd67f_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/35f3dad7-827f-4486-97e3-f86d827c1d9c_IMG_2964.PNG.pdf b/resources/static/product/35f3dad7-827f-4486-97e3-f86d827c1d9c_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/35f3dad7-827f-4486-97e3-f86d827c1d9c_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/3a8e9f5e-0c0b-44eb-b83b-d253a625c3c2_IMG_2964.PNG.pdf b/resources/static/product/3a8e9f5e-0c0b-44eb-b83b-d253a625c3c2_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/3a8e9f5e-0c0b-44eb-b83b-d253a625c3c2_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/4a2b48f4-2a4a-41b7-bd17-2e7a855a2d4c_IMG_2964.PNG.pdf b/resources/static/product/4a2b48f4-2a4a-41b7-bd17-2e7a855a2d4c_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/4a2b48f4-2a4a-41b7-bd17-2e7a855a2d4c_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/5a9e53a8-451c-43e0-9f68-7e3fe5a0d8e8_IMG_2964.PNG.pdf b/resources/static/product/5a9e53a8-451c-43e0-9f68-7e3fe5a0d8e8_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/5a9e53a8-451c-43e0-9f68-7e3fe5a0d8e8_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/5eb9e692-1956-4d80-be08-5e175dd4942b_IMG_2964.PNG.pdf b/resources/static/product/5eb9e692-1956-4d80-be08-5e175dd4942b_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/5eb9e692-1956-4d80-be08-5e175dd4942b_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/6e7e17f1-4f15-4660-998c-2e36f7d241c1_IMG_2964.PNG.pdf b/resources/static/product/6e7e17f1-4f15-4660-998c-2e36f7d241c1_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/6e7e17f1-4f15-4660-998c-2e36f7d241c1_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/7e0241c7-b908-42d8-b956-10be053ad2d4_IMG_2964.PNG.pdf b/resources/static/product/7e0241c7-b908-42d8-b956-10be053ad2d4_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/7e0241c7-b908-42d8-b956-10be053ad2d4_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/8a347560-2cad-4956-9a91-8d4d1152c3cc_IMG_2964.PNG.pdf b/resources/static/product/8a347560-2cad-4956-9a91-8d4d1152c3cc_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/8a347560-2cad-4956-9a91-8d4d1152c3cc_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/93c2abb6-a35a-46fb-a45e-c2b3af494af2_IMG_2964.PNG.pdf b/resources/static/product/93c2abb6-a35a-46fb-a45e-c2b3af494af2_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/93c2abb6-a35a-46fb-a45e-c2b3af494af2_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/99a023c2-3d1e-449d-8951-9ebcd60bfa21_IMG_2964.PNG.pdf b/resources/static/product/99a023c2-3d1e-449d-8951-9ebcd60bfa21_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/99a023c2-3d1e-449d-8951-9ebcd60bfa21_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/99b40f54-1e21-41ce-b025-4cf57ea4f51a_IMG_2964.PNG.pdf b/resources/static/product/99b40f54-1e21-41ce-b025-4cf57ea4f51a_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/99b40f54-1e21-41ce-b025-4cf57ea4f51a_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/a1050139-b66e-49df-b410-34fa576e47a5_IMG_2964.PNG.pdf b/resources/static/product/a1050139-b66e-49df-b410-34fa576e47a5_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/a1050139-b66e-49df-b410-34fa576e47a5_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/b83e4c61-a5c2-478f-83d5-d5507d0f2c7c_IMG_2964.PNG.pdf b/resources/static/product/b83e4c61-a5c2-478f-83d5-d5507d0f2c7c_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/b83e4c61-a5c2-478f-83d5-d5507d0f2c7c_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/ca75cbf8-911e-4f97-a0c0-4aaff71305f6_IMG_2964.PNG.pdf b/resources/static/product/ca75cbf8-911e-4f97-a0c0-4aaff71305f6_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/ca75cbf8-911e-4f97-a0c0-4aaff71305f6_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/cd647219-c6d9-4abf-a38d-3482355bbcd4_IMG_2964.PNG.pdf b/resources/static/product/cd647219-c6d9-4abf-a38d-3482355bbcd4_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/cd647219-c6d9-4abf-a38d-3482355bbcd4_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/cf185985-860e-4c7d-b2ad-542f2c8025fc_IMG_2964.PNG.pdf b/resources/static/product/cf185985-860e-4c7d-b2ad-542f2c8025fc_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/cf185985-860e-4c7d-b2ad-542f2c8025fc_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/e34f8260-95d5-4d26-ba95-566732ffd82b_IMG_2964.PNG.pdf b/resources/static/product/e34f8260-95d5-4d26-ba95-566732ffd82b_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/e34f8260-95d5-4d26-ba95-566732ffd82b_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/f40174d9-c1c1-4019-98f3-50b000ae357e_IMG_2964.PNG.pdf b/resources/static/product/f40174d9-c1c1-4019-98f3-50b000ae357e_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/f40174d9-c1c1-4019-98f3-50b000ae357e_IMG_2964.PNG.pdf differ
diff --git a/resources/static/product/fe5399c0-69ad-4f73-b610-d0d0c4932b52_IMG_2964.PNG.pdf b/resources/static/product/fe5399c0-69ad-4f73-b610-d0d0c4932b52_IMG_2964.PNG.pdf
new file mode 100644
index 0000000..97107a7
Binary files /dev/null and b/resources/static/product/fe5399c0-69ad-4f73-b610-d0d0c4932b52_IMG_2964.PNG.pdf differ
diff --git a/src/main/java/com/mysite/knitly/KnitlyApplication.java b/src/main/java/com/mysite/knitly/KnitlyApplication.java
deleted file mode 100644
index 03f434e..0000000
--- a/src/main/java/com/mysite/knitly/KnitlyApplication.java
+++ /dev/null
@@ -1,13 +0,0 @@
-package com.mysite.knitly;
-
-import org.springframework.boot.SpringApplication;
-import org.springframework.boot.autoconfigure.SpringBootApplication;
-
-@SpringBootApplication
-public class KnitlyApplication {
-
-    public static void main(String[] args) {
-        SpringApplication.run(KnitlyApplication.class, args);
-    }
-
-}
diff --git a/src/main/java/com/mysite/knitly/domain/community/post/dto/.gitkeep b/src/main/java/com/mysite/knitly/domain/community/post/dto/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/community/post/entity/.gitkeep b/src/main/java/com/mysite/knitly/domain/community/post/entity/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/community/post/repository/.gitkeep b/src/main/java/com/mysite/knitly/domain/community/post/repository/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/community/post/service/.gitkeep b/src/main/java/com/mysite/knitly/domain/community/post/service/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/event/controller/.gitkeep b/src/main/java/com/mysite/knitly/domain/event/controller/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/event/dto/.gitkeep b/src/main/java/com/mysite/knitly/domain/event/dto/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/event/entity/.gitkeep b/src/main/java/com/mysite/knitly/domain/event/entity/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/event/repository/.gitkeep b/src/main/java/com/mysite/knitly/domain/event/repository/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/event/service/.gitkeep b/src/main/java/com/mysite/knitly/domain/event/service/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/mypage/controller/.gitkeep b/src/main/java/com/mysite/knitly/domain/mypage/controller/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/mypage/dto/.gitkeep b/src/main/java/com/mysite/knitly/domain/mypage/dto/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/mypage/entity/.gitkeep b/src/main/java/com/mysite/knitly/domain/mypage/entity/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/mypage/repository/.gitkeep b/src/main/java/com/mysite/knitly/domain/mypage/repository/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/mypage/service/.gitkeep b/src/main/java/com/mysite/knitly/domain/mypage/service/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/design/controller/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/design/controller/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/design/dto/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/design/dto/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/design/entity/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/design/entity/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/design/repository/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/design/repository/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/design/service/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/design/service/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/product/controller/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/product/controller/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/product/dto/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/product/dto/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductEntity.java b/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductEntity.java
deleted file mode 100644
index 5ce9855..0000000
--- a/src/main/java/com/mysite/knitly/domain/product/product/entity/ProductEntity.java
+++ /dev/null
@@ -1,4 +0,0 @@
-package com.mysite.knitly.domain.product.product.entity;
-
-public class ProductEntity {
-}
diff --git a/src/main/java/com/mysite/knitly/domain/product/product/repository/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/product/repository/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/product/service/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/product/service/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/review/controller/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/review/controller/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/review/dto/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/review/dto/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/review/entity/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/review/entity/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/review/repository/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/review/repository/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/product/review/service/.gitkeep b/src/main/java/com/mysite/knitly/domain/product/review/service/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/user/controller/.gitkeep b/src/main/java/com/mysite/knitly/domain/user/controller/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/user/dto/.gitkeep b/src/main/java/com/mysite/knitly/domain/user/dto/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/user/repository/.gitkeep b/src/main/java/com/mysite/knitly/domain/user/repository/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/domain/user/service/.gitkeep b/src/main/java/com/mysite/knitly/domain/user/service/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/java/com/mysite/knitly/global/exception/.gitkeep b/src/main/java/com/mysite/knitly/global/exception/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
deleted file mode 100644
index 69638ba..0000000
--- a/src/main/resources/application.properties
+++ /dev/null
@@ -1 +0,0 @@
-spring.application.name=knitly