diff --git a/keyword/chapter08/keyword08.md b/keyword/chapter08/keyword08.md
new file mode 100644
index 00000000..0b160ada
--- /dev/null
+++ b/keyword/chapter08/keyword08.md
@@ -0,0 +1,495 @@
+- **`Debounce`** 구글링 후 개념 정리 및 코드 작성해보기 🍠
+  - **`Debounce`** 개념 정리 🍠
+      <aside>
+      💡
+      
+      **Debounce**는 이벤트가 연속으로 발생할 때, **마지막 이벤트가 끝난 뒤 일정 시간이 지난 후에 한 번만 실행**되도록 하는 기법!
+      
+      즉, 사용자가 계속 입력 중이면 함수 실행을 미루고, 입력이 멈췄을 때만 실행한다.
+      
+      </aside>
+      
+      ### 사용 예시
+      
+      검색창에 글자를 입력할 때마다 API 요청을 보내면 비효율적이다.
+      
+      ```
+      ㄱ 입력 → API 요청
+      기 입력 → API 요청
+      김 입력 → API 요청
+      김철 입력 → API 요청
+      ```
+      
+      Debounce를 적용하면 사용자가 입력을 멈춘 뒤 한 번만 요청한다.
+      
+      ```
+      김철수 입력 완료
+      0.5초 동안 추가 입력 없음
+      → API 요청 1번 실행
+      ```
+      
+      ### 핵심 특징
+      
+      - 연속된 이벤트 중 **마지막 이벤트만 처리**
+      - 불필요한 API 요청, 렌더링, 함수 실행을 줄일 수 있음
+      - 검색창, 자동완성, 창 크기 조절, 버튼 중복 클릭 방지 등에 사용됨
+
+  - **`Debounce`** 코드 작성 🍠
+
+    ### **기본 코드**
+
+    ```tsx
+    function debounce(callback, delay) {
+      let timerId;
+
+      return function (...args) {
+        clearTimeout(timerId);
+
+        timerId = setTimeout(() => {
+          callback(...args);
+        }, delay);
+      };
+    }
+    ```
+
+    - `function debounce(callback, delay)`
+      ```tsx
+      functiondebounce(callback,delay) {
+      ```
+      `debounce`라는 함수를 만들고 여기서 매개변수는 2개!
+      - `callback` → 나중에 실제로 실행하고 싶은 함수
+        예시) 검색 함수
+        ```tsx
+        functionsearch(keyword) {
+        console.log(keyword);
+        }
+        ```
+      - `delay` → 몇 초 기다렸다가 실행할지 정하는 시간 값
+        단위는 **ms, 밀리초**
+        ```
+        500 -> 0.5초
+        ```
+    - `let timerId;`
+      - `lettimerId` → 타이머 번호를 저장하는 변수
+        `setTimeout`을 실행하면 자바스크립트가 타이머 ID를 하나 줌
+
+        ```tsx
+        timerId=setTimeout(...)
+        // 나중에 타이머를 취소하기 위해 위와 같이 저장함
+
+        clearTimeout(timerId);
+        // 이렇게 취소 가능
+        ```
+
+    - `return function (...args)`
+      `debounce` 함수는 바로 `callback`을 실행하는 게 아니라, **새로운 함수 하나를 만들어서 반환함**
+      **예시**
+
+      ```tsx
+      constdebouncedSearch=debounce(search,500);
+
+      // 이렇게 하면 debouncedSearch 안에는 이 함수가 들어가게 돼.
+
+      function (...args) {
+      clearTimeout(timerId);
+
+      timerId=setTimeout(() => {
+      callback(...args);
+        },delay);
+      }
+
+      // 즉, 사용자가 실제로 호출하는 것은 debounce가 아니라 debounce가 만들어준 함수임
+      ```
+
+    - `...args` → 함수에 들어오는 모든 인자를 배열처럼 받아주는 문법
+      **예시**
+
+      ```tsx
+      debouncedSearch('apple');
+
+      // 그러면:
+      args = ['apple'];
+      // 만약 이렇게 부르면:
+      debouncedSearch('apple', 1, true);
+      // 그러면:
+      args = ['apple', 1, true];
+      // 이렇게 저장돼.
+      // 나중에 원래 함수에 그대로 넘기려고 쓰는 거야.
+      callback(...args);
+      ```
+
+    - `clearTimeout(timerId);` → 기존에 예약되어 있던 타이머 취소하는 코드
+      **Debounce**의 핵심
+      **예시**
+
+      ```tsx
+      검색창에 이렇게 입력한다고 할 때
+
+      ```
+
+      a 입력
+      ap 입력
+      app 입력
+      apple 입력
+
+      ```
+      입력할 때마다 함수가 호출됨
+
+      만약, 매번 이전 타이머를 취소한다면
+      마지막에는 apple만 남음
+
+      ```
+
+      a 입력 → 500ms 뒤 실행 예약
+      ap 입력 → 기존 a 예약 취소, 새로 예약
+      app 입력 → 기존 ap 예약 취소, 새로 예약
+      apple 입력 → 기존 app 예약 취소, 새로 예약
+
+      ```
+
+      ```
+
+    - `setTimeout(() => { ... }, delay)`
+
+      ```tsx
+      timerId=setTimeout(() => {
+      callback(...args);
+      },delay);
+
+      // 새로운 타이머 등록 코드
+
+      // 뜻
+      delay 시간만큼 기다린 뒤 callback 함수를 실행해라
+
+      // 예시: delay가 500이면
+      500ms 뒤에 callback 실행
+      ```
+
+    - `callback(...args);` → 실제 함수가 실행되는 부분
+      **예시**
+
+      ```tsx
+      constdebouncedSearch=debounce(search,500);
+
+      debouncedSearch('apple');
+
+      // 500ms 뒤에 실제로는
+      search('apple'); -> 이렇게 실행 됨
+      ```
+
+        <aside>
+        💡
+        
+        `...args`를 쓰는 이유는 원래 함수에 전달했던 값을 그대로 다시 넣어주기 위해서!
+        
+        </aside>
+
+    - 전체 흐름 예시
+
+      ```tsx
+      functionsearch(keyword) {
+      console.log('검색어:',keyword);
+      }
+
+      constdebouncedSearch=debounce(search,500);
+
+      debouncedSearch('a');
+      debouncedSearch('ap');
+      debouncedSearch('app');
+      debouncedSearch('apple');
+      ```
+
+      **실행 흐름**
+
+      ```
+      1. 'a' 입력 → 500ms 뒤 search('a') 예약
+      2. 'ap' 입력 → 이전 예약 취소, search('ap') 예약
+      3. 'app' 입력 → 이전 예약 취소, search('app') 예약
+      4. 'apple' 입력 → 이전 예약 취소, search('apple') 예약
+      5. 500ms 동안 추가 입력 없음
+      6. search('apple') 실행
+      ```
+
+      **결과**
+
+      ```
+      검색어:apple
+      ```
+
+    ### **사용 예시**
+
+    ```tsx
+    **const searchInput = document.querySelector('#search');
+
+    function handleSearch(event) {
+      console.log('검색어:', event.target.value);
+    }
+
+    const debouncedSearch = debounce(handleSearch, 500);
+
+    searchInput.addEventListener('input', debouncedSearch);**
+    ```
+
+    ### **코드 흐름**
+
+    ```tsx
+    **1. 사용자가 입력한다.
+    2. 기존 타이머가 있으면 취소한다.
+    3. 새로운 타이머를 설정한다.
+    4. 500ms 안에 또 입력하면 다시 취소된다.
+    5. 500ms 동안 입력이 없으면 callback이 실행된다.**
+    ```
+
+    ### **React 예시**
+
+    ```tsx
+    import { useEffect, useState } from 'react';
+
+    function SearchInput() {
+      const [keyword, setKeyword] = useState('');
+      const [debouncedKeyword, setDebouncedKeyword] = useState('');
+
+      useEffect(() => {
+        const timer = setTimeout(() => {
+          setDebouncedKeyword(keyword);
+        }, 500);
+
+        return () => {
+          clearTimeout(timer);
+        };
+      }, [keyword]);
+
+      useEffect(() => {
+        if (debouncedKeyword) {
+          console.log('API 요청:', debouncedKeyword);
+        }
+      }, [debouncedKeyword]);
+
+      return (
+        <input
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+          placeholder="검색어를 입력하세요"
+        />
+      );
+    }
+    ```
+
+- **`Throttling`** 구글링 후 개념 정리 및 코드 작성해보기 🍠
+  - **`Throttling`** 개념 정리 🍠
+      <aside>
+      💡
+      
+      **Throttle(스로틀링)** 은 이벤트가 계속 발생하더라도, **일정 시간 간격마다 한 번씩만 실행**되도록 제한하는 기법!
+      
+      즉, 이벤트를 아예 마지막에 한 번만 실행하는 Debounce와 달리,
+      
+      Throttle은 이벤트가 계속 발생해도 **주기적으로 실행**된다.
+      
+      </aside>
+      
+      ## **Debounce와의 차이점**
+      
+      ### Debounce
+      
+      ```
+      입력이 끝날 때까지 기다렸다가 마지막 1번 실행
+      
+      예시
+      aaaaaaa 입력 중...
+      입력 멈춤
+      → 실행 1번
+      ```
+      
+      ### Throttle
+      
+      ```
+      입력이 계속되어도 일정 간격마다 실행
+      
+      예시
+      스크롤 중...
+      0.5초마다 실행
+      0.5초마다 실행
+      0.5초마다 실행
+      ```
+      
+      ## 사용 예시
+      
+      1. 스크롤 이벤트
+          
+          ```
+          스크롤은 엄청 많이 발생함
+          
+          스크롤 1px
+          스크롤 2px
+          스크롤 3px
+          ...
+          -> 이를 매번 실행하면 성능 떨어짐
+          그래서 throttle을 사용하여 0.3초마다 한 번씩만 실행하게 만듦
+          ```
+          
+      2. 게임 이동
+          
+          ```
+          키를 누르고 있으면 이벤트 발생
+          
+          throttle 사용하면 '0.1초 마다 이동'처럼 제어 가능!
+          ```
+          
+      
+      ## 핵심 특징
+      
+      - 일정 시간 간격마다 실행
+      - 이벤트가 계속 발생해도 주기적으로 실행 가능
+      - 스크롤, 마우스 이동, 게임 입력 등에 많이 사용
+      - 과도한 이벤트 호출을 줄여 성능 최적화 가능
+
+  - **`Throttling`** 코드 작성 🍠
+
+    ### 기본 코드
+
+    ```tsx
+    functionthrottle(callback,delay) {
+    letisWaiting=false;
+
+    returnfunction (...args) {
+    if (isWaiting)return;
+
+    callback(...args);
+
+    isWaiting=true;
+
+    setTimeout(() => {
+    isWaiting=false;
+        },delay);
+      };
+    }
+    ```
+
+    - **`function throttle(callback, delay)`**
+
+      ```tsx
+      function throttle(callback, delay) {
+      // Throttle 함수를 만드는 부분
+      ```
+
+      - `callback` → 매개 변수
+      - 실제로 실행할 함수
+        ```tsx
+        // 예시
+        function movePlayer() {
+          console.log('이동');
+        }
+        ```
+      - `delay` → 몇 ms마다 실행할지 정하는 시간
+
+      ***
+
+    - **`let isWaiting = false;` →** 지금 대기 중인지 확인하는 변수
+      - 초기값 `false -> 아직 실행 가능 상태` 라는 뜻
+    - **`return function (...args)** {`
+        <aside>
+        💡
+        
+        Throttle도 debounce처럼 새로운 함수를 반환함
+        
+        즉
+        
+        `const throttledScroll = throttle(handleScroll, 300);`
+        하면 실제로 이벤트에 등록되는 건 반환된 함수임
+        
+        </aside>
+
+    - **`if (isWaiting) return;`**
+        <aside>
+        💡
+        
+        Throttle의 핵심으로
+        
+        만약 현재 대기 상태라면 `함수 실행하지 말고 끝내라`는 뜻!
+        
+        </aside>
+        
+        **예시**
+        
+        ```tsx
+        첫 실행 → 가능0.1초 뒤 실행 시도 → 막힘0.2초 뒤 실행 시도 → 막힘0.3초 지나면 다시 가능
+        ****
+        ```
+
+    - **`callback(...args);` →** 실제 함수 실행
+
+      ```tsx
+      **예시**
+
+      throttledScroll('현재 위치');
+      이면:
+      handleScroll('현재 위치');
+      실행됨.
+      ```
+
+    - **`isWaiting = true;` →** 실행 금지 상태로 바꿈
+        <aside>
+        💡
+        
+        지금부터 delay 시간 동안 실행 막기!
+        
+        </aside>
+
+    - **`setTimeout(() => { ... }, delay)`**
+        <aside>
+        💡
+        
+        delay 시간이 지나면 다시 실행 가능 상태로 바꿈
+        
+        </aside>
+        
+        **예시**
+        
+        ```tsx
+        delay = 1000 이면
+        1초 뒤에 다시 실행 허용
+        ****
+        ```
+
+    - **전체 흐름 예시**
+
+      ```tsx
+      function shoot() {  console.log('발사!');}
+      const throttledShoot = throttle(shoot, 1000);
+
+      // 사용자가 버튼을 엄청 빠르게 누른다고 할 때
+      throttledShoot();
+      throttledShoot();
+      throttledShoot();
+      throttledShoot();
+
+      **// 실행 흐름
+
+      // 첫 번째 클릭**
+      isWaiting = false
+      → 실행 가능
+      → "발사!"
+      → isWaiting = true
+
+      **// 두 번째 클릭**
+      isWaiting = true
+      → return
+      → 무시됨
+
+      **// 세 번째 클릭**
+      여전히 true
+      → 무시
+
+      **// 1초 후**
+      isWaiting = false
+      다시 실행 가능 상태 됨
+      ```
+
+    - **Debounce vs Throttle 핵심 비교**
+      | 구분 | Debounce | Throttle |
+      | ------------ | ---------------- | ------------------ |
+      | 실행 방식 | 마지막 한 번만 | 일정 간격마다 |
+      | 연속 입력 시 | 계속 취소 | 일정 시간마다 실행 |
+      | 대표 사용 | 검색창 | 스크롤 |
+      | 핵심 목적 | 마지막 행동 감지 | 실행 횟수 제한 |
diff --git a/mission/chapter08/mission_1/src/App.css b/mission/chapter08/mission_1/src/App.css
new file mode 100644
index 00000000..e69de29b
diff --git a/mission/chapter08/mission_1/src/App.tsx b/mission/chapter08/mission_1/src/App.tsx
new file mode 100644
index 00000000..9978d8bd
--- /dev/null
+++ b/mission/chapter08/mission_1/src/App.tsx
@@ -0,0 +1,63 @@
+import './App.css';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import HomeLayout from './layouts/HomeLayout';
+import NotFound from './pages/NotFoundPage';
+import LoginPage from './pages/LoginPage';
+import HomePage from './pages/HomePage';
+import SignupPage from './pages/SignupPage';
+import MyPage from './pages/MyPage';
+import LpDetailPage from './pages/LpDetailPage';
+import ProtectedRoute from './components/ProtectedRoute';
+import GoogleCallbackPage from './pages/GoogleCallBackPage';
+import { AuthProvider } from './context/AuthContext';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <HomeLayout />,
+    errorElement: <NotFound />,
+    children: [
+      { index: true, element: <HomePage /> },
+      {
+        path: 'mypage',
+        element: (
+          <ProtectedRoute>
+            <MyPage />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: 'lps/:lpId', // LP 상세 페이지
+        element: (
+          <ProtectedRoute>
+            <LpDetailPage />
+          </ProtectedRoute>
+        ),
+      },
+    ],
+  },
+  {
+    path: '/login',
+    element: <LoginPage />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: '/signup',
+    element: <SignupPage />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: '/v1/auth/google/callback',
+    element: <GoogleCallbackPage />,
+  },
+]);
+
+function App() {
+  return (
+    <AuthProvider>
+      <RouterProvider router={router} />
+    </AuthProvider>
+  );
+}
+
+export default App;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/api/auth.ts b/mission/chapter08/mission_1/src/api/auth.ts
new file mode 100644
index 00000000..44d9b927
--- /dev/null
+++ b/mission/chapter08/mission_1/src/api/auth.ts
@@ -0,0 +1,13 @@
+import axiosInstance from './axios';
+
+// 로그인
+export const signin = async (email: string, password: string) => {
+  const response = await axiosInstance.post('/auth/signin', { email, password });
+  return response.data;
+};
+
+// 로그아웃
+export const signout = async () => {
+  const response = await axiosInstance.post('/auth/signout');
+  return response.data;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/api/axios.ts b/mission/chapter08/mission_1/src/api/axios.ts
new file mode 100644
index 00000000..41cdc580
--- /dev/null
+++ b/mission/chapter08/mission_1/src/api/axios.ts
@@ -0,0 +1,94 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+});
+
+// 토큰 갱신 중복 방지용 변수
+let isRefreshing = false; // 현재 갱신 중인지
+let refreshSubscribers: ((token: string) => void)[] = []; // 대기 중인 요청들
+
+//갱신 완료 후 대기 중인 요청들한테 새 토큰 전달
+const onRefreshed = (token: string) => {
+  refreshSubscribers.forEach((callback) => callback(token));
+  refreshSubscribers = [];
+};
+
+// 대기열에 요청 추가
+const addRefreshSubscriber = (callback: (token: string) => void) => {
+  refreshSubscribers.push(callback);
+};
+
+// 요청 인터셉터
+axiosInstance.interceptors.request.use((config) => {
+  const accessToken = localStorage.getItem('accessToken');
+
+  if (accessToken) {
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+  return config;
+});
+
+// 응답 인터셉터
+axiosInstance.interceptors.response.use(
+  // 성공 응답은 그냥 통과
+  (response) => response,
+
+  // 실패 응답(에러)은 여기서 처리
+  async (error) => {
+    const originalRequest = error.config;
+
+    // 401 = 토큰 만료
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      // 재시도 표시 → 한 번만 재시도하도록 기록
+      originalRequest._retry = true;
+
+      // 이미 갱신 중이면 대기열에 추가
+      if (isRefreshing) {
+        return new Promise((resolve) => {
+          addRefreshSubscriber((token) => {
+            originalRequest.headers.Authorization = `Bearer ${token}`;
+            resolve(axiosInstance(originalRequest));
+          });
+        });
+      }
+
+      isRefreshing = true; // 갱신 시작
+
+      try {
+        const refreshToken = localStorage.getItem('refreshToken');
+
+        const response = await axios.post(
+          `${import.meta.env.VITE_API_URL}/auth/refresh`, // env로 변경
+          {
+            refresh: refreshToken,
+          },
+        );
+
+        // 새로 받은 accessToken 저장
+        const newAccessToken = response.data.data.accessToken;
+        localStorage.setItem('accessToken', newAccessToken);
+
+        isRefreshing = false;
+        onRefreshed(newAccessToken); // 대기 중인 요청들 처리
+
+        // 실패했던 요청 헤더도 새 토큰으로 교체
+        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+
+        // 실패했던 요청 재시도
+        return axiosInstance(originalRequest);
+      } catch (refreshError) {
+        // refreshToken도 만료 → 강제 로그아웃
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+        localStorage.removeItem('user');
+        window.location.href = '/login';
+        return Promise.reject(refreshError);
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default axiosInstance;
diff --git a/mission/chapter08/mission_1/src/api/lp.ts b/mission/chapter08/mission_1/src/api/lp.ts
new file mode 100644
index 00000000..8f79033b
--- /dev/null
+++ b/mission/chapter08/mission_1/src/api/lp.ts
@@ -0,0 +1,98 @@
+import axiosInstance from './axios';
+import type { CommentListResponse, LpDetailResponse, LpListResponse } from '../types/lp';
+
+// LP 목록 조회
+export const getLps = async (
+  order: 'asc' | 'desc' = 'desc',
+  cursor: number = 0,
+  search: string = '',  // 추가
+): Promise<LpListResponse> => {
+  const response = await axiosInstance.get('/lps', {
+    params: {
+      order,
+      limit: 10,
+      cursor,
+      // 빈 문자열이면 파라미터 자체를 보내지 않음
+      ...(search.trim() && { search: search.trim() }),
+    },
+  });
+  return response.data;
+};
+
+// LP 상세 조회
+export const getLpDetail = async (lpId: number): Promise<LpDetailResponse> => {
+  const response = await axiosInstance.get(`/lps/${lpId}`);
+  return response.data;
+};
+
+// LP 생성
+export const createLp = async (data: {
+  title: string;
+  content: string;
+  thumbnail: string;
+  tags: string[];
+  published: boolean;
+}) => {
+  const response = await axiosInstance.post('/lps', data);
+  return response.data;
+};
+
+// LP 수정
+export const updateLp = async (lpId: number, data: {
+  title?: string;
+  content?: string;
+  thumbnail?: string;
+  tags?: string[];
+  published?: boolean;
+}) => {
+  const response = await axiosInstance.patch(`/lps/${lpId}`, data);
+  return response.data;
+};
+
+// LP 좋아요
+export const likeLp = async (lpId: number) => {
+  const response = await axiosInstance.post(`/lps/${lpId}/likes`);
+  return response.data;
+};
+
+// LP 좋아요 취소
+export const unlikeLp = async (lpId: number) => {
+  const response = await axiosInstance.delete(`/lps/${lpId}/likes`);
+  return response.data;
+};
+
+// LP 삭제
+export const deleteLp = async (lpId: number) => {
+  const response = await axiosInstance.delete(`/lps/${lpId}`);
+  return response.data;
+};
+
+// 댓글 목록 조회
+export const getComments = async (
+  lpId: number,
+  order: 'asc' | 'desc' = 'asc',
+  cursor: number = 0,
+): Promise<CommentListResponse> => {
+  const response = await axiosInstance.get(`/lps/${lpId}/comments`, {
+    params: { order, limit: 10, cursor },
+  });
+  return response.data;
+};
+
+// 댓글 작성
+export const createComment = async (lpId: number, content: string) => {
+  const response = await axiosInstance.post(`/lps/${lpId}/comments`, { content });
+  return response.data;
+};
+
+// 댓글 수정
+export const updateComment = async (lpId: number, commentId: number, content: string) => {
+  const response = await axiosInstance.patch(`/lps/${lpId}/comments/${commentId}`, { content });
+  return response.data;
+};
+
+// 댓글 삭제
+export const deleteComment = async (lpId: number, commentId: number) => {
+  const response = await axiosInstance.delete(`/lps/${lpId}/comments/${commentId}`);
+  return response.data;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/api/upload.ts b/mission/chapter08/mission_1/src/api/upload.ts
new file mode 100644
index 00000000..555268f2
--- /dev/null
+++ b/mission/chapter08/mission_1/src/api/upload.ts
@@ -0,0 +1,11 @@
+import axiosInstance from './axios';
+
+export const uploadImage = async (file: File): Promise<string> => {
+  const formData = new FormData();
+  formData.append('file', file);
+  const response = await axiosInstance.post('/uploads', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+  // 응답에서 imageUrl 반환
+  return response.data.data.imageUrl;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/api/user.ts b/mission/chapter08/mission_1/src/api/user.ts
new file mode 100644
index 00000000..37394720
--- /dev/null
+++ b/mission/chapter08/mission_1/src/api/user.ts
@@ -0,0 +1,23 @@
+import axiosInstance from './axios';
+
+// 내 프로필 조회
+export const getMyProfile = async () => {
+  const response = await axiosInstance.get('/users/me');
+  return response.data;
+};
+
+// 프로필 수정
+export const updateMyProfile = async (data: {
+  name: string;
+  bio: string;
+  avatar: string;
+}) => {
+  const response = await axiosInstance.patch('/users', data);
+  return response.data;
+};
+
+// 회원 탈퇴
+export const deleteMyAccount = async () => {
+  const response = await axiosInstance.delete('/users');
+  return response.data;
+};
diff --git a/mission/chapter08/mission_1/src/assets/hero.png b/mission/chapter08/mission_1/src/assets/hero.png
new file mode 100644
index 00000000..cc51a3d2
Binary files /dev/null and b/mission/chapter08/mission_1/src/assets/hero.png differ
diff --git a/mission/chapter08/mission_1/src/assets/react.svg b/mission/chapter08/mission_1/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/mission/chapter08/mission_1/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/assets/vite.svg b/mission/chapter08/mission_1/src/assets/vite.svg
new file mode 100644
index 00000000..5101b674
--- /dev/null
+++ b/mission/chapter08/mission_1/src/assets/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
diff --git a/mission/chapter08/mission_1/src/components/Button.tsx b/mission/chapter08/mission_1/src/components/Button.tsx
new file mode 100644
index 00000000..4601dc04
--- /dev/null
+++ b/mission/chapter08/mission_1/src/components/Button.tsx
@@ -0,0 +1,43 @@
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  variant?: 'primary' | 'secondary' | 'google'; // 버튼 종류
+  type?: 'button' | 'submit';
+  className?: string;
+}
+
+const Button = ({
+  children,
+  onClick,
+  disabled = false,
+  variant = 'primary',
+  type = 'button',
+  className = '',
+}: ButtonProps) => {
+  // variant에 따라 스타일 다르게
+  const variantStyles = {
+    // 파란 버튼 (로그인, 다음, 회원가입 등)
+    primary:
+      'w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300',
+    // 테두리 버튼 (로그아웃 등)
+    secondary:
+      'px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100 transition-colors cursor-pointer',
+    // 구글 버튼
+    google:
+      'w-full flex items-center justify-center gap-2 border border-gray-300 py-3 rounded-md text-lg font-medium hover:bg-gray-100 transition-colors cursor-pointer',
+  };
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`${variantStyles[variant]} ${className}`}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/mission/chapter08/mission_1/src/components/CommentSkeleton.tsx b/mission/chapter08/mission_1/src/components/CommentSkeleton.tsx
new file mode 100644
index 00000000..60c1dec9
--- /dev/null
+++ b/mission/chapter08/mission_1/src/components/CommentSkeleton.tsx
@@ -0,0 +1,14 @@
+const CommentSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-2 animate-pulse">
+      <div className="flex items-center gap-2">
+        <div className="w-8 h-8 bg-gray-200 rounded-full" />
+        <div className="w-24 h-4 bg-gray-200 rounded" />
+      </div>
+      <div className="w-full h-4 bg-gray-200 rounded" />
+      <div className="w-3/4 h-4 bg-gray-200 rounded" />
+    </div>
+  );
+};
+
+export default CommentSkeleton;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/components/CreateLpModal.tsx b/mission/chapter08/mission_1/src/components/CreateLpModal.tsx
new file mode 100644
index 00000000..f317ea07
--- /dev/null
+++ b/mission/chapter08/mission_1/src/components/CreateLpModal.tsx
@@ -0,0 +1,232 @@
+import { useEffect, useRef, useState } from 'react';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { createLp } from '../api/lp';
+import { uploadImage } from '../api/upload';
+
+interface CreateLpModalProps {
+  onClose: () => void;
+}
+
+const CreateLpModal = ({ onClose }: CreateLpModalProps) => {
+  const queryClient = useQueryClient();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [tagInput, setTagInput] = useState('');
+  const [tags, setTags] = useState<string[]>([]);
+  const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  const { mutate: createLpMutate, isPending } = useMutation({
+    mutationFn: async () => {
+      let thumbnailUrl = '';
+
+      if (thumbnailFile) {
+        thumbnailUrl = await uploadImage(thumbnailFile);
+      }
+
+      return createLp({
+        title,
+        content,
+        thumbnail: thumbnailUrl,
+        tags,
+        published: true,
+      });
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['lps'] });
+      onClose();
+    },
+
+    onError: (error) => {
+      console.error('LP 생성 실패:', error);
+      alert('LP 생성에 실패했습니다.');
+    },
+  });
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setThumbnailFile(file);
+
+    setPreviewUrl((prev) => {
+      if (prev?.startsWith('blob:')) {
+        URL.revokeObjectURL(prev);
+      }
+
+      return URL.createObjectURL(file);
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl?.startsWith('blob:')) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
+  const handleAddTag = () => {
+    const trimmed = tagInput.trim();
+
+    if (!trimmed || tags.includes(trimmed)) return;
+
+    setTags((prev) => [...prev, trimmed]);
+    setTagInput('');
+  };
+
+  const handleRemoveTag = (tag: string) => {
+    setTags((prev) => prev.filter((t) => t !== tag));
+  };
+
+  const handleTagKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAddTag();
+    }
+  };
+
+  const handleSubmit = () => {
+    if (!title.trim()) {
+      alert('LP 이름을 입력해주세요.');
+      return;
+    }
+
+    createLpMutate();
+  };
+
+  const handleBackdropClick = () => {
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/60 flex items-center justify-center z-50"
+      onClick={handleBackdropClick}
+    >
+      <div
+        className="bg-[#2a2a2a] rounded-2xl w-[90%] max-w-md p-6 flex flex-col gap-4 relative max-h-[90vh] overflow-y-auto"
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-white text-xl transition-colors"
+        >
+          ✕
+        </button>
+
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          {previewUrl ? (
+            <img
+              src={previewUrl}
+              alt="preview"
+              className="w-40 h-40 object-cover rounded-xl border-2 border-pink-500"
+            />
+          ) : (
+            <div className="w-40 h-40 relative flex items-center justify-center">
+              <svg viewBox="0 0 200 200" className="w-full h-full">
+                <circle
+                  cx="100"
+                  cy="100"
+                  r="95"
+                  fill="#111"
+                  stroke="#333"
+                  strokeWidth="4"
+                />
+                <circle cx="100" cy="100" r="65" fill="#222" />
+                <circle cx="100" cy="100" r="40" fill="#1a1a1a" />
+                <circle cx="100" cy="100" r="12" fill="#444" />
+                <circle cx="100" cy="100" r="6" fill="#888" />
+                <circle cx="100" cy="100" r="2" fill="#fff" />
+              </svg>
+
+              <span className="absolute bottom-2 text-xs text-gray-400">
+                클릭해서 사진 추가
+              </span>
+            </div>
+          )}
+        </div>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleFileChange}
+        />
+
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="LP Name"
+          className="bg-[#3a3a3a] text-white placeholder-gray-500 rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-pink-500 transition-all"
+        />
+
+        <input
+          type="text"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder="LP Content"
+          className="bg-[#3a3a3a] text-white placeholder-gray-500 rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-pink-500 transition-all"
+        />
+
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={tagInput}
+            onChange={(e) => setTagInput(e.target.value)}
+            onKeyDown={handleTagKeyDown}
+            placeholder="LP Tag"
+            className="flex-1 bg-[#3a3a3a] text-white placeholder-gray-500 rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-pink-500 transition-all"
+          />
+
+          <button
+            onClick={handleAddTag}
+            className="px-4 py-2 bg-[#3a3a3a] text-white rounded-lg hover:bg-[#4a4a4a] transition-colors border border-gray-600"
+          >
+            Add
+          </button>
+        </div>
+
+        {tags.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {tags.map((tag) => (
+              <span
+                key={tag}
+                className="flex items-center gap-1 bg-[#3a3a3a] text-gray-300 text-sm px-3 py-1 rounded-full"
+              >
+                {tag}
+
+                <button
+                  onClick={() => handleRemoveTag(tag)}
+                  className="text-gray-400 hover:text-white ml-1 transition-colors"
+                >
+                  ✕
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+
+        <button
+          onClick={handleSubmit}
+          disabled={isPending || !title.trim()}
+          className="w-full py-3 rounded-xl text-white font-semibold transition-all
+            bg-pink-500 hover:bg-pink-600 disabled:bg-gray-600 disabled:cursor-not-allowed"
+        >
+          {isPending ? 'LP 생성 중...' : 'Add LP'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CreateLpModal;
diff --git a/mission/chapter08/mission_1/src/components/DeleteConfirmModal.tsx b/mission/chapter08/mission_1/src/components/DeleteConfirmModal.tsx
new file mode 100644
index 00000000..0fa52634
--- /dev/null
+++ b/mission/chapter08/mission_1/src/components/DeleteConfirmModal.tsx
@@ -0,0 +1,33 @@
+interface DeleteConfirmModalProps {
+  onConfirm: () => void;
+  onCancel: () => void;
+  isPending?: boolean;
+}
+
+const DeleteConfirmModal = ({ onConfirm, onCancel, isPending }: DeleteConfirmModalProps) => {
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+      <div className="bg-[#2a2a2a] rounded-2xl w-80 p-6 flex flex-col gap-4">
+        <h2 className="text-white text-lg font-bold">정말 탈퇴하시겠습니까?</h2>
+        <p className="text-gray-400 text-sm">탈퇴 후에는 모든 데이터가 삭제되며 복구할 수 없습니다.</p>
+        <div className="flex gap-3">
+          <button
+            onClick={onCancel}
+            className="flex-1 py-2 rounded-lg border border-gray-600 text-gray-300 hover:bg-gray-700 transition-colors"
+          >
+            아니오
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isPending}
+            className="flex-1 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors disabled:bg-gray-600"
+          >
+            {isPending ? '처리 중...' : '예'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteConfirmModal;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/components/Input.tsx b/mission/chapter08/mission_1/src/components/Input.tsx
new file mode 100644
index 00000000..05686388
--- /dev/null
+++ b/mission/chapter08/mission_1/src/components/Input.tsx
@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+
+interface InputProps {
+  type?: string;
+  placeholder?: string;
+  hasError?: boolean;
+  errorMessage?: string;
+}
+
+// forwardRef → react-hook-form의 register가 ref를 전달할 수 있게 해줌
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ type = 'text', placeholder, hasError = false, errorMessage, ...rest }, ref) => {
+    return (
+      <div className="flex flex-col gap-1">
+        <input
+          ref={ref}
+          type={type}
+          placeholder={placeholder}
+          className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+            ${hasError ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+          {...rest}
+        />
+        {/* 에러 메시지 있으면 자동으로 표시 */}
+        {hasError && errorMessage && (
+          <div className="text-red-500 text-sm">{errorMessage}</div>
+        )}
+      </div>
+    );
+  }
+);
+
+export default Input;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/components/LpCard.tsx b/mission/chapter08/mission_1/src/components/LpCard.tsx
new file mode 100644
index 00000000..58f4f7c1
--- /dev/null
+++ b/mission/chapter08/mission_1/src/components/LpCard.tsx
@@ -0,0 +1,50 @@
+import { useNavigate } from 'react-router-dom';
+import type { Lp } from '../types/lp';
+
+interface LpCardProps {
+  lp: Lp;
+}
+
+const LpCard = ({ lp }: LpCardProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <div
+      onClick={() => navigate(`/lps/${lp.id}`)}
+      className="relative group cursor-pointer rounded-lg overflow-hidden aspect-square bg-gray-200"
+    >
+      {/* 썸네일 */}
+      <img
+        src={lp.thumbnail || 'https://via.placeholder.com/300'}
+        alt={lp.title}
+        className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+      />
+
+      {/* 호버 시 오버레이 */}
+      <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
+        <h3 className="text-white font-bold text-lg truncate">{lp.title}</h3>
+        <div className="flex items-center gap-3 mt-1">
+          <span className="text-gray-300 text-sm">
+            {new Date(lp.createdAt).toLocaleDateString('ko-KR')}
+          </span>
+          <span className="text-gray-300 text-sm">
+            ❤️ {lp.likes?.length ?? 0}
+          </span>
+        </div>
+        {/* 태그 */}
+        <div className="flex gap-1 mt-2 flex-wrap">
+          {lp.tags?.slice(0, 3).map((tag) => (
+            <span
+              key={tag.id}
+              className="text-xs bg-white/20 text-white px-2 py-0.5 rounded-full"
+            >
+              #{tag.name}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LpCard;
diff --git a/mission/chapter08/mission_1/src/components/LpCardSkeleton.tsx b/mission/chapter08/mission_1/src/components/LpCardSkeleton.tsx
new file mode 100644
index 00000000..0bd3ee3d
--- /dev/null
+++ b/mission/chapter08/mission_1/src/components/LpCardSkeleton.tsx
@@ -0,0 +1,7 @@
+const LpCardSkeleton = () => {
+  return (
+    <div className="aspect-square bg-gray-200 rounded-lg animate-pulse" />
+  );
+};
+
+export default LpCardSkeleton;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/components/Navbar.tsx b/mission/chapter08/mission_1/src/components/Navbar.tsx
new file mode 100644
index 00000000..89dd632d
--- /dev/null
+++ b/mission/chapter08/mission_1/src/components/Navbar.tsx
@@ -0,0 +1,78 @@
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import { useAuth } from '../context/AuthContext';
+
+interface NavbarProps {
+  onMenuClick: () => void;
+}
+
+const Navbar = ({ onMenuClick }: NavbarProps) => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+
+  // ── 로그아웃 mutation ──
+  const { mutate: logoutMutate } = useMutation({
+    mutationFn: async () => {
+      await logout();
+    },
+    onSuccess: () => {
+      navigate('/');
+    },
+  });
+
+  return (
+    <nav className="flex items-center justify-between px-6 py-4 border-b border-gray-700">
+      {/* 버거 버튼 - 모바일에서만 보임 */}
+      <button className="md:hidden" onClick={onMenuClick}>
+        <svg width="28" height="28" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+          <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M7.95 11.95h32m-32 12h32m-32 12h32"/>
+        </svg>
+      </button>
+
+      {/* 로고 */}
+      <div
+        className="font-bold text-lg cursor-pointer text-pink-400"
+        onClick={() => navigate('/')}
+      >
+        🎵 LP판
+      </div>
+
+      {/* 버튼 영역 */}
+      <div className="flex gap-2">
+        {user ? (
+          <div className="flex items-center gap-3">
+            <span
+              className="text-gray-400 cursor-pointer hover:text-pink-400 transition-colors text-sm"
+              onClick={() => navigate('/mypage')}
+            >
+              {user.nickname}님 반갑습니다!
+            </span>
+            <button
+              onClick={() => logoutMutate()}
+              className="px-4 py-2 text-sm border border-gray-600 text-gray-300 rounded-md hover:bg-gray-800 transition-colors"
+            >
+              로그아웃
+            </button>
+          </div>
+        ) : (
+          <>
+            <button
+              onClick={() => navigate('/login')}
+              className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100 transition-colors"
+            >
+              로그인
+            </button>
+            <button
+              onClick={() => navigate('/signup')}
+              className="px-4 py-2 text-sm bg-pink-500 text-white rounded-md hover:bg-pink-600 transition-colors"
+            >
+              회원가입
+            </button>
+          </>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/components/ProtectedRoute.tsx b/mission/chapter08/mission_1/src/components/ProtectedRoute.tsx
new file mode 100644
index 00000000..77d974dd
--- /dev/null
+++ b/mission/chapter08/mission_1/src/components/ProtectedRoute.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { user } = useAuth();
+  const location = useLocation(); // 현재 경로 저장
+  const [showModal, setShowModal] = useState(true);
+
+  if (!user) {
+    // 모달 닫고 로그인으로
+    if (!showModal) {
+      return <Navigate to="/login" state={{ from: location }} replace />;
+      // state={{ from: location }} → 원래 가려던 경로 저장!
+    }
+
+    return (
+      // 경고 모달
+      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg p-6 w-80 flex flex-col gap-4">
+          <h2 className="text-lg font-bold">로그인이 필요합니다</h2>
+          <p className="text-gray-500 text-sm">이 페이지는 로그인 후 이용할 수 있습니다.</p>
+          <button
+            onClick={() => setShowModal(false)}
+            className="w-full bg-blue-400 text-white py-2 rounded-md hover:bg-blue-500 transition-colors"
+          >
+            확인
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/components/Sidebar.tsx b/mission/chapter08/mission_1/src/components/Sidebar.tsx
new file mode 100644
index 00000000..f15375c1
--- /dev/null
+++ b/mission/chapter08/mission_1/src/components/Sidebar.tsx
@@ -0,0 +1,165 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import { useAuth } from '../context/AuthContext';
+import { deleteMyAccount } from '../api/user';
+import DeleteConfirmModal from './DeleteConfirmModal';
+
+interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  isStatic?: boolean;
+}
+
+const Sidebar = ({ isOpen, onClose, isStatic = false }: SidebarProps) => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+  const [search, setSearch] = useState('');
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  // ── 로그아웃 mutation ──
+  const { mutate: logoutMutate } = useMutation({
+    mutationFn: async () => {
+      await logout();
+    },
+    onSuccess: () => {
+      if (!isStatic) onClose();
+      navigate('/');
+    },
+  });
+
+  // ── 탈퇴 mutation ──
+  const { mutate: deleteAccountMutate, isPending: isDeleting } = useMutation({
+    mutationFn: deleteMyAccount,
+    onSuccess: () => {
+      logout();
+      navigate('/login');
+    },
+    onError: () => {
+      alert('회원 탈퇴에 실패했습니다.');
+    },
+  });
+
+  const handleNavigate = (path: string) => {
+    navigate(path);
+    if (!isStatic) onClose();
+  };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (search.trim()) {
+      navigate(`/?search=${search}`);
+      if (!isStatic) onClose();
+    }
+  };
+
+  const content = (
+    <div className="flex flex-col h-full p-4 gap-4">
+      {/* 검색창 */}
+      <form onSubmit={handleSearch} className="flex flex-col gap-2">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="검색..."
+          className="border border-gray-600 bg-transparent rounded-md px-3 py-2 text-sm outline-none focus:border-pink-400 text-white"
+        />
+        <button
+          type="submit"
+          className="text-sm bg-pink-500 text-white py-2 rounded-md hover:bg-pink-600 transition-colors"
+        >
+          검색
+        </button>
+      </form>
+
+      <hr className="border-gray-700" />
+
+      {/* 메뉴 */}
+      <nav className="flex flex-col gap-3 flex-1">
+        <button
+          onClick={() => handleNavigate('/')}
+          className="text-left text-gray-400 hover:text-pink-400 transition-colors text-sm font-medium"
+        >
+          🏠 홈
+        </button>
+        {user && (
+          <button
+            onClick={() => handleNavigate('/mypage')}
+            className="text-left text-gray-400 hover:text-pink-400 transition-colors text-sm font-medium"
+          >
+            👤 마이페이지
+          </button>
+        )}
+      </nav>
+
+      {/* 하단 로그인/로그아웃 */}
+      <div className="border-t border-gray-700 pt-4">
+        {user ? (
+          <div className="flex flex-col gap-2">
+            <span className="text-gray-400 text-sm">{user.nickname}님</span>
+            <button
+              onClick={() => logoutMutate()}
+              className="text-left text-red-400 hover:text-red-300 text-sm transition-colors"
+            >
+              로그아웃
+            </button>
+            <button
+              onClick={() => setShowDeleteModal(true)}
+              className="text-left text-gray-500 hover:text-red-400 text-sm transition-colors"
+            >
+              탈퇴하기
+            </button>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={() => handleNavigate('/login')}
+              className="text-left text-gray-400 hover:text-pink-400 text-sm transition-colors"
+            >
+              로그인
+            </button>
+            <button
+              onClick={() => handleNavigate('/signup')}
+              className="text-left text-gray-400 hover:text-pink-400 text-sm transition-colors"
+            >
+              회원가입
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* 탈퇴 확인 모달 */}
+      {showDeleteModal && (
+        <DeleteConfirmModal
+          onConfirm={() => deleteAccountMutate()}
+          onCancel={() => setShowDeleteModal(false)}
+          isPending={isDeleting}
+        />
+      )}
+    </div>
+  );
+
+  if (isStatic) {
+    return <div className="h-full">{content}</div>;
+  }
+
+  return (
+    <>
+      {isOpen && (
+        <div className="fixed inset-0 bg-black/40 z-40" onClick={onClose} />
+      )}
+      <aside
+        className={`fixed top-0 left-0 h-full w-64 bg-[#1a1a1a] z-50 shadow-lg transform transition-transform duration-300
+          ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-gray-700">
+          <h2 className="font-bold text-white">메뉴</h2>
+          <button onClick={onClose} className="text-gray-400 hover:text-white">✕</button>
+        </div>
+        {content}
+      </aside>
+    </>
+  );
+};
+
+export default Sidebar;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/context/AuthContext.tsx b/mission/chapter08/mission_1/src/context/AuthContext.tsx
new file mode 100644
index 00000000..d85baa05
--- /dev/null
+++ b/mission/chapter08/mission_1/src/context/AuthContext.tsx
@@ -0,0 +1,102 @@
+import { createContext, useContext, useState } from 'react';
+import axiosInstance from '../api/axios';
+
+interface User {
+  id: number;
+  email: string;
+  nickname: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  login: (user: User, accessToken: string, refreshToken: string) => void;
+  logout: () => void;
+  updateNickname: (nickname: string) => void;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export const AuthProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [user, setUser] = useState<User | null>(() => {
+    try {
+      const stored = localStorage.getItem('user');
+
+      return stored ? JSON.parse(stored) : null;
+    } catch (error) {
+      console.error('유저 정보 파싱 실패:', error);
+
+      localStorage.removeItem('user');
+
+      return null;
+    }
+  });
+
+  const login = (
+    userData: User,
+    accessToken: string,
+    refreshToken: string
+  ) => {
+    setUser(userData);
+
+    localStorage.setItem('user', JSON.stringify(userData));
+    localStorage.setItem('accessToken', accessToken);
+    localStorage.setItem('refreshToken', refreshToken);
+  };
+
+  const logout = async () => {
+    try {
+      await axiosInstance.post('/auth/signout');
+    } catch (error) {
+      console.error('로그아웃 실패:', error);
+    } finally {
+      setUser(null);
+
+      localStorage.removeItem('user');
+      localStorage.removeItem('accessToken');
+      localStorage.removeItem('refreshToken');
+    }
+  };
+
+  // 닉네임만 즉시 업데이트
+  const updateNickname = (nickname: string) => {
+    setUser((prev) => {
+      if (!prev) return prev;
+
+      const updated = {
+        ...prev,
+        nickname,
+      };
+
+      localStorage.setItem('user', JSON.stringify(updated));
+
+      return updated;
+    });
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        login,
+        logout,
+        updateNickname,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error('AuthProvider 밖에서 사용 불가!');
+  }
+
+  return context;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/hooks/useDebounce.ts b/mission/chapter08/mission_1/src/hooks/useDebounce.ts
new file mode 100644
index 00000000..f03d70c9
--- /dev/null
+++ b/mission/chapter08/mission_1/src/hooks/useDebounce.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+function useDebounce<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/hooks/useInfiniteComments.ts b/mission/chapter08/mission_1/src/hooks/useInfiniteComments.ts
new file mode 100644
index 00000000..fc05cb01
--- /dev/null
+++ b/mission/chapter08/mission_1/src/hooks/useInfiniteComments.ts
@@ -0,0 +1,18 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { getComments } from '../api/lp';
+import type { CommentListResponse } from '../types/lp';
+
+const useInfiniteComments = (lpId: number, order: 'asc' | 'desc') => {
+  return useInfiniteQuery<CommentListResponse, Error>({
+    queryKey: ['lpComments', lpId, order],
+    queryFn: ({ pageParam }) => getComments(lpId, order, pageParam as number),
+    getNextPageParam: (lastPage) => {
+      return lastPage.data.hasNext ? lastPage.data.nextCursor : undefined;
+    },
+    initialPageParam: 0,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  });
+};
+
+export default useInfiniteComments;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/hooks/useInfiniteLps.ts b/mission/chapter08/mission_1/src/hooks/useInfiniteLps.ts
new file mode 100644
index 00000000..5a12c1cb
--- /dev/null
+++ b/mission/chapter08/mission_1/src/hooks/useInfiniteLps.ts
@@ -0,0 +1,25 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { getLps } from '../api/lp';
+
+const useInfiniteLps = (order: 'asc' | 'desc', search: string = '') => {
+  const trimmedSearch = search.trim();
+
+  return useInfiniteQuery({
+    queryKey: ['search', order, trimmedSearch],
+
+    queryFn: ({ pageParam = 0 }) => getLps(order, pageParam, trimmedSearch),
+
+    getNextPageParam: (lastPage) => {
+      return lastPage.data.hasNext ? lastPage.data.nextCursor : undefined;
+    },
+
+    initialPageParam: 0,
+
+    enabled: true,
+
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  });
+};
+
+export default useInfiniteLps;
diff --git a/mission/chapter08/mission_1/src/hooks/useLocalStorage.ts b/mission/chapter08/mission_1/src/hooks/useLocalStorage.ts
new file mode 100644
index 00000000..c6a3ad1b
--- /dev/null
+++ b/mission/chapter08/mission_1/src/hooks/useLocalStorage.ts
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+function useLocalStorage<T>(key: string, initialValue: T) {
+  // 로컬스토리지에서 값을 가져오는 함수
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      // 저장된 값이 있으면 파싱해서 반환, 없으면 초기값 반환
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(error);
+      return initialValue;
+    }
+  });
+
+  // 값을 저장하는 함수
+  const setValue = (value: T) => {
+    try {
+      setStoredValue(value);
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return [storedValue, setValue] as const;
+}
+
+export default useLocalStorage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/hooks/useLpDetail.ts b/mission/chapter08/mission_1/src/hooks/useLpDetail.ts
new file mode 100644
index 00000000..300c788f
--- /dev/null
+++ b/mission/chapter08/mission_1/src/hooks/useLpDetail.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { getLpDetail } from '../api/lp';
+
+const useLpDetail = (lpId: number) => {
+  return useQuery({
+    queryKey: ['lp', lpId], // lpId 포함
+    queryFn: () => getLpDetail(lpId),
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10,
+  });
+};
+
+export default useLpDetail;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/hooks/useLps.ts b/mission/chapter08/mission_1/src/hooks/useLps.ts
new file mode 100644
index 00000000..731431b6
--- /dev/null
+++ b/mission/chapter08/mission_1/src/hooks/useLps.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { getLps } from '../api/lp';
+
+const useLps = (order: 'asc' | 'desc') => {
+  return useQuery({
+    queryKey: ['lps', order], // order 바뀌면 자동으로 리패치
+    queryFn: () => getLps(order),
+    staleTime: 1000 * 60 * 5, // 5분 동안 캐시 유지
+    gcTime: 1000 * 60 * 10,   // 10분 후 캐시 삭제
+  });
+};
+
+export default useLps;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/hooks/useMyPage.ts b/mission/chapter08/mission_1/src/hooks/useMyPage.ts
new file mode 100644
index 00000000..d48d78c1
--- /dev/null
+++ b/mission/chapter08/mission_1/src/hooks/useMyPage.ts
@@ -0,0 +1,48 @@
+import { useNavigate } from 'react-router-dom';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useAuth } from '../context/AuthContext';
+import { updateMyProfile, deleteMyAccount } from '../api/user';
+
+export const useMyPage = () => {
+  const navigate = useNavigate();
+  const { user, logout, updateNickname } = useAuth();
+  const queryClient = useQueryClient();
+
+  const { mutate: updateProfileMutate, isPending: isUpdating } = useMutation({
+    mutationFn: (profileData: { name: string; bio: string; avatar: string }) =>
+      updateMyProfile(profileData),
+    onMutate: async (profileData) => {
+      const previousNickname = user?.nickname;
+      updateNickname(profileData.name);
+      return { previousNickname };
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['myProfile'] });
+      alert('프로필이 수정되었습니다.');
+    },
+    onError: (_error, _variables, context) => {
+      if (context?.previousNickname) updateNickname(context.previousNickname);
+      alert('프로필 수정에 실패했습니다.');
+    },
+  });
+
+  const { mutate: deleteAccountMutate, isPending: isDeleting } = useMutation({
+    mutationFn: deleteMyAccount,
+    onSuccess: () => { logout(); navigate('/login'); },
+    onError: () => { alert('회원 탈퇴에 실패했습니다.'); },
+  });
+
+  const { mutate: logoutMutate } = useMutation({
+    mutationFn: async () => { await logout(); },
+    onSuccess: () => { navigate('/'); },
+  });
+
+  return {
+    user,
+    isUpdating,
+    isDeleting,
+    updateProfileMutate,
+    deleteAccountMutate,
+    logoutMutate,
+  };
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/index.css b/mission/chapter08/mission_1/src/index.css
new file mode 100644
index 00000000..d4b50785
--- /dev/null
+++ b/mission/chapter08/mission_1/src/index.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
diff --git a/mission/chapter08/mission_1/src/layouts/HomeLayout.tsx b/mission/chapter08/mission_1/src/layouts/HomeLayout.tsx
new file mode 100644
index 00000000..0eb4c6bf
--- /dev/null
+++ b/mission/chapter08/mission_1/src/layouts/HomeLayout.tsx
@@ -0,0 +1,35 @@
+import { Outlet } from 'react-router-dom';
+import Navbar from '../components/Navbar';
+import Sidebar from '../components/Sidebar';
+import { useState } from 'react';
+
+const HomeLayout = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  return (
+    <div className="h-dvh flex flex-col">
+      <Navbar onMenuClick={() => setIsSidebarOpen(true)} />
+      <div className="flex flex-1 overflow-hidden">
+        {/* 사이드바 - md 이상에서는 항상 보임 */}
+        <aside className="hidden md:flex w-52 border-r border-gray-200 flex-col shrink-0">
+          <Sidebar isOpen={true} isStatic={true} onClose={() => {}} />
+        </aside>
+
+        {/* 메인 콘텐츠 */}
+        <main className="flex-1 overflow-y-auto">
+          <Outlet />
+        </main>
+      </div>
+
+      {/* 모바일 사이드바 - md 미만에서만 동작 */}
+      <div className="md:hidden">
+        <Sidebar
+          isOpen={isSidebarOpen}
+          onClose={() => setIsSidebarOpen(false)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HomeLayout;
diff --git a/mission/chapter08/mission_1/src/main.tsx b/mission/chapter08/mission_1/src/main.tsx
new file mode 100644
index 00000000..896bc7ce
--- /dev/null
+++ b/mission/chapter08/mission_1/src/main.tsx
@@ -0,0 +1,17 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import './index.css';
+import App from './App.tsx';
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  </StrictMode>,
+);
diff --git a/mission/chapter08/mission_1/src/pages/GoogleCallBackPage.tsx b/mission/chapter08/mission_1/src/pages/GoogleCallBackPage.tsx
new file mode 100644
index 00000000..866cfa46
--- /dev/null
+++ b/mission/chapter08/mission_1/src/pages/GoogleCallBackPage.tsx
@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const GoogleCallbackPage = () => {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const accessToken = params.get('accessToken');
+    const refreshToken = params.get('refreshToken');
+    const name = params.get('name') || '';
+    const userId = params.get('userId') || '';
+
+    if (accessToken && refreshToken) {
+      login({ email: userId, nickname: name }, accessToken, refreshToken);
+      navigate('/');
+    } else {
+      navigate('/login');
+    }
+  }, []);
+
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <p className="text-gray-400">로그인 처리 중...</p>
+    </div>
+  );
+};
+
+export default GoogleCallbackPage;
diff --git a/mission/chapter08/mission_1/src/pages/HomePage.tsx b/mission/chapter08/mission_1/src/pages/HomePage.tsx
new file mode 100644
index 00000000..c9d2c9d5
--- /dev/null
+++ b/mission/chapter08/mission_1/src/pages/HomePage.tsx
@@ -0,0 +1,147 @@
+import { useEffect, useRef, useState } from 'react';
+import useInfiniteLps from '../hooks/useInfiniteLps';
+import useDebounce from '../hooks/useDebounce';
+import LpCard from '../components/LpCard';
+import LpCardSkeleton from '../components/LpCardSkeleton';
+import CreateLpModal from '../components/CreateLpModal';
+
+const HomePage = () => {
+  const [order, setOrder] = useState<'asc' | 'desc'>('desc');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  // 300ms 디바운스 적용 - 타이핑 중엔 API 요청 안 나감
+  const debouncedSearch = useDebounce(search, 300);
+
+  const {
+    data,
+    isLoading,
+    isError,
+    refetch,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteLps(order, debouncedSearch);
+
+  const lps = data?.pages.flatMap((page) => page.data.data) ?? [];
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      },
+      { threshold: 0.1 },
+    );
+    if (bottomRef.current) observer.observe(bottomRef.current);
+    return () => observer.disconnect();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  return (
+    <div className="relative min-h-full p-6">
+      {/* 검색창 */}
+      <div className="mb-4">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="LP 검색..."
+          className="w-full border border-gray-600 bg-transparent rounded-md px-4 py-2 text-sm outline-none focus:border-pink-400 text-black"
+        />
+        {/* 디바운스 상태 표시 (디버깅용 - 나중에 지워도 됨) */}
+        {search !== debouncedSearch && (
+          <p className="text-xs text-gray-500 mt-1">입력 감지 중...</p>
+        )}
+      </div>
+
+      {/* 정렬 버튼 */}
+      <div className="flex gap-2 mb-6">
+        <button
+          onClick={() => setOrder('desc')}
+          className={`px-4 py-2 rounded-md text-sm transition-colors
+            ${order === 'desc' ? 'bg-pink-500 text-white' : 'border border-gray-600 text-gray-300 hover:bg-gray-800'}`}
+        >
+          최신순
+        </button>
+        <button
+          onClick={() => setOrder('asc')}
+          className={`px-4 py-2 rounded-md text-sm transition-colors
+            ${order === 'asc' ? 'bg-pink-500 text-white' : 'border border-gray-600 text-gray-300 hover:bg-gray-800'}`}
+        >
+          오래된순
+        </button>
+      </div>
+
+      {/* 검색 결과 안내 */}
+      {debouncedSearch && !isLoading && (
+        <p className="text-sm text-gray-400 mb-4">
+          "<span className="text-pink-400">{debouncedSearch}</span>" 검색 결과{' '}
+          {lps.length === 0 ? '없음' : `${lps.length}건`}
+        </p>
+      )}
+
+      {/* 초기 로딩 스켈레톤 */}
+      {isLoading && (
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <LpCardSkeleton key={i} />
+          ))}
+        </div>
+      )}
+
+      {/* 에러 */}
+      {isError && (
+        <div className="flex flex-col items-center justify-center gap-4 py-20">
+          <p className="text-gray-500">데이터를 불러오는데 실패했습니다.</p>
+          <button
+            onClick={() => refetch()}
+            className="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600"
+          >
+            다시 시도
+          </button>
+        </div>
+      )}
+
+      {/* LP 목록 */}
+      {!isLoading && !isError && (
+        <>
+          {lps.length === 0 && debouncedSearch ? (
+            <div className="flex flex-col items-center justify-center py-20 text-gray-500">
+              <p>검색 결과가 없습니다.</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              {lps.map((lp) => (
+                <LpCard key={lp.id} lp={lp} />
+              ))}
+            </div>
+          )}
+
+          {isFetchingNextPage && (
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <LpCardSkeleton key={i} />
+              ))}
+            </div>
+          )}
+
+          <div ref={bottomRef} className="h-10" />
+        </>
+      )}
+
+      {/* 우측 하단 플로팅 버튼 */}
+      <button
+        onClick={() => setIsModalOpen(true)}
+        className="fixed bottom-8 right-8 w-14 h-14 bg-pink-500 text-white rounded-full text-2xl shadow-lg hover:bg-pink-600 transition-colors flex items-center justify-center z-40"
+      >
+        +
+      </button>
+
+      {isModalOpen && <CreateLpModal onClose={() => setIsModalOpen(false)} />}
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/mission/chapter08/mission_1/src/pages/LoginPage.tsx b/mission/chapter08/mission_1/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..554d1fae
--- /dev/null
+++ b/mission/chapter08/mission_1/src/pages/LoginPage.tsx
@@ -0,0 +1,114 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
+import { signinSchema, type SigninFormValues } from '../utils/validate';
+import { useAuth } from '../context/AuthContext';
+import { signin } from '../api/auth';
+import Button from '../components/Button';
+import Input from '../components/Input';
+
+const LoginPage = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { login } = useAuth();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<SigninFormValues>({
+    resolver: zodResolver(signinSchema),
+    mode: 'onChange',
+  });
+
+  const from = (location.state as { from?: Location })?.from?.pathname || '/';
+
+  const { mutate: signinMutate, isPending } = useMutation({
+    mutationFn: ({ email, password }: SigninFormValues) =>
+      signin(email, password),
+
+    onSuccess: (data, variables) => {
+      console.log('로그인 응답:', data.data);
+
+      const { name, accessToken, refreshToken, id, userId } = data.data;
+
+      login(
+        {
+          id: Number(id ?? userId),
+          email: variables.email,
+          nickname: name,
+        },
+        accessToken,
+        refreshToken,
+      );
+
+      navigate(from, { replace: true });
+    },
+
+    onError: () => {
+      alert('이메일 또는 비밀번호가 올바르지 않습니다.');
+    },
+  });
+
+  const onSubmit = (data: SigninFormValues) => {
+    signinMutate(data);
+  };
+
+  const onGoogleLogin = () => {
+    window.location.href = import.meta.env.VITE_GOOGLE_LOGIN_URL;
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex items-center justify-center py-4 border-b border-gray-200">
+        <button
+          type="button"
+          onClick={() => navigate('/')}
+          className="absolute left-4 text-gray-600 hover:text-gray-900 transition-colors"
+        >
+          ＜
+        </button>
+        <h1 className="text-lg font-semibold">로그인</h1>
+      </div>
+
+      <div className="flex flex-col items-center justify-center flex-1 gap-4">
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex flex-col gap-3 w-[300px]"
+        >
+          <Input
+            {...register('email')}
+            type="email"
+            placeholder="이메일을 입력해주세요!"
+            hasError={!!errors.email}
+            errorMessage={errors.email?.message}
+          />
+
+          <Input
+            {...register('password')}
+            type="password"
+            placeholder="비밀번호를 입력해주세요!"
+            hasError={!!errors.password}
+            errorMessage={errors.password?.message}
+          />
+
+          <Button type="submit" disabled={!isValid || isPending} variant="primary">
+            {isPending ? '로그인 중...' : '로그인'}
+          </Button>
+
+          <Button type="button" onClick={onGoogleLogin} variant="google">
+            <img
+              src="https://www.google.com/favicon.ico"
+              alt="google"
+              style={{ width: '18px', height: '18px' }}
+            />
+            구글로 로그인
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/pages/LpDetailPage.tsx b/mission/chapter08/mission_1/src/pages/LpDetailPage.tsx
new file mode 100644
index 00000000..e71dfb18
--- /dev/null
+++ b/mission/chapter08/mission_1/src/pages/LpDetailPage.tsx
@@ -0,0 +1,457 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import useLpDetail from '../hooks/useLpDetail';
+import useInfiniteComments from '../hooks/useInfiniteComments';
+import { useAuth } from '../context/AuthContext';
+import {
+  likeLp,
+  unlikeLp,
+  deleteLp,
+  createComment,
+  updateComment,
+  deleteComment,
+} from '../api/lp';
+import CommentSkeleton from '../components/CommentSkeleton';
+import type { Comment } from '../types/lp';
+
+const LpDetailPage = () => {
+  const { lpId } = useParams();
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const [commentOrder, setCommentOrder] = useState<'asc' | 'desc'>('asc');
+  const [commentText, setCommentText] = useState('');
+  const [editingCommentId, setEditingCommentId] = useState<number | null>(null);
+  const [editingContent, setEditingContent] = useState('');
+  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
+
+  const { data, isLoading, isError, refetch } = useLpDetail(Number(lpId));
+
+  const {
+    data: commentsData,
+    isLoading: isCommentsLoading,
+    isFetchingNextPage,
+    fetchNextPage,
+    hasNextPage,
+  } = useInfiniteComments(Number(lpId), commentOrder);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    if (bottomRef.current) observer.observe(bottomRef.current);
+
+    return () => observer.disconnect();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const lp = data?.data;
+
+  const comments: Comment[] =
+    (commentsData as any)?.pages?.flatMap((page: any) => page.data.data) ?? [];
+
+  const { mutate: likeMutate } = useMutation({
+    mutationFn: () => {
+      const alreadyLiked = lp?.likes?.some(
+        (like: any) => Number(like.userId) === Number(user?.id),
+      );
+
+      return alreadyLiked ? unlikeLp(Number(lpId)) : likeLp(Number(lpId));
+    },
+
+    onMutate: async () => {
+      await queryClient.cancelQueries({
+        queryKey: ['lp', Number(lpId)],
+      });
+
+      const previousData = queryClient.getQueryData(['lp', Number(lpId)]);
+
+      queryClient.setQueryData(['lp', Number(lpId)], (old: any) => {
+        if (!old || !user) return old;
+
+        const currentLp = old.data;
+
+        const alreadyLiked = currentLp.likes?.some(
+          (like: any) => Number(like.userId) === Number(user.id),
+        );
+
+        return {
+          ...old,
+          data: {
+            ...currentLp,
+            likes: alreadyLiked
+              ? currentLp.likes.filter(
+                  (like: any) => Number(like.userId) !== Number(user.id),
+                )
+              : [
+                  ...(currentLp.likes ?? []),
+                  {
+                    id: Date.now(),
+                    userId: user.id,
+                    lpId: Number(lpId),
+                  },
+                ],
+          },
+        };
+      });
+
+      return { previousData };
+    },
+
+    onError: (_error, _variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(['lp', Number(lpId)], context.previousData);
+      }
+
+      alert('좋아요 처리에 실패했습니다.');
+    },
+
+    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['lp', Number(lpId)],
+      });
+    },
+  });
+
+  const { mutate: deleteLpMutate, isPending: isDeletingLp } = useMutation({
+    mutationFn: () => deleteLp(Number(lpId)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['lps'] });
+      navigate('/');
+    },
+    onError: () => alert('LP 삭제에 실패했습니다.'),
+  });
+
+  const { mutate: createCommentMutate, isPending: isCreatingComment } =
+    useMutation({
+      mutationFn: (content: string) => createComment(Number(lpId), content),
+      onSuccess: () => {
+        setCommentText('');
+        queryClient.invalidateQueries({
+          queryKey: ['lpComments', Number(lpId)],
+        });
+      },
+      onError: () => alert('댓글 작성에 실패했습니다.'),
+    });
+
+  const { mutate: updateCommentMutate, isPending: isUpdatingComment } =
+    useMutation({
+      mutationFn: ({
+        commentId,
+        content,
+      }: {
+        commentId: number;
+        content: string;
+      }) => updateComment(Number(lpId), commentId, content),
+      onSuccess: () => {
+        setEditingCommentId(null);
+        setEditingContent('');
+        queryClient.invalidateQueries({
+          queryKey: ['lpComments', Number(lpId)],
+        });
+      },
+      onError: () => alert('댓글 수정에 실패했습니다.'),
+    });
+
+  const { mutate: deleteCommentMutate } = useMutation({
+    mutationFn: (commentId: number) => deleteComment(Number(lpId), commentId),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ['lpComments', Number(lpId)] }),
+    onError: () => alert('댓글 삭제에 실패했습니다.'),
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="w-12 h-12 border-4 border-pink-500 border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (isError || !lp) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4">
+        <p className="text-gray-500">데이터를 불러오는데 실패했습니다.</p>
+        <button
+          onClick={() => refetch()}
+          className="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600"
+        >
+          다시 시도
+        </button>
+      </div>
+    );
+  }
+
+  const lpAuthorId = (lp as any).authorId ?? (lp as any).author?.id;
+  const isLpOwner =
+    user && lpAuthorId && Number(user.id) === Number(lpAuthorId);
+
+  const isCommentOwner = (comment: any) => {
+    const commentAuthorId = comment.authorId ?? comment.author?.id;
+    return (
+      user && commentAuthorId && Number(user.id) === Number(commentAuthorId)
+    );
+  };
+
+  const isLiked = lp.likes?.some(
+    (like: any) => Number(like.userId) === Number(user?.id),
+  );
+
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <button
+        onClick={() => navigate('/')}
+        className="mb-6 text-gray-500 hover:text-gray-300 transition-colors"
+      >
+        ← 목록으로
+      </button>
+
+      <img
+        src={lp.thumbnail || 'https://via.placeholder.com/600'}
+        alt={lp.title}
+        className="w-full aspect-square object-cover rounded-lg mb-6"
+      />
+
+      <h1 className="text-2xl font-bold mb-2">{lp.title}</h1>
+
+      <div className="flex items-center gap-4 text-gray-500 text-sm mb-4">
+        <span>{new Date(lp.createdAt).toLocaleDateString('ko-KR')}</span>
+        <span>❤️ {lp.likes?.length ?? 0}</span>
+      </div>
+
+      <div className="flex gap-2 flex-wrap mb-4">
+        {lp.tags?.map((tag) => (
+          <span
+            key={tag.id}
+            className="text-sm bg-pink-100 text-pink-600 px-3 py-1 rounded-full"
+          >
+            #{tag.name}
+          </span>
+        ))}
+      </div>
+
+      <p className="text-gray-700 leading-relaxed mb-8">{lp.content}</p>
+
+      <div className="flex gap-3 mb-10">
+        <button
+          onClick={() => {
+            if (!user) {
+              alert('로그인이 필요합니다.');
+              navigate('/login');
+              return;
+            }
+
+            likeMutate();
+          }}
+          className={`px-6 py-2 rounded-md transition-colors border ${
+            isLiked
+              ? 'bg-red-500 text-white border-red-500 hover:bg-red-600'
+              : 'text-white border-gray-600 hover:bg-red-900/30'
+          }`}
+        >
+          ❤️ {lp.likes?.length ?? 0}
+        </button>
+
+        {isLpOwner && (
+          <>
+            <button
+              onClick={() => navigate(`/lps/${lp.id}/edit`)}
+              className="px-6 py-2 border border-gray-600 text-gray-400 rounded-md hover:bg-gray-800 transition-colors"
+            >
+              ✏️ 수정
+            </button>
+
+            <button
+              onClick={() => {
+                if (confirm('정말 삭제하시겠습니까?')) deleteLpMutate();
+              }}
+              disabled={isDeletingLp}
+              className="px-6 py-2 border border-red-400 text-red-400 rounded-md hover:bg-red-900/30 transition-colors disabled:opacity-50"
+            >
+              🗑️ 삭제
+            </button>
+          </>
+        )}
+      </div>
+
+      <div className="border-t border-gray-700 pt-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-bold">댓글</h2>
+
+          <div className="flex gap-2">
+            <button
+              onClick={() => setCommentOrder('asc')}
+              className={`px-3 py-1 text-sm rounded-md transition-colors ${
+                commentOrder === 'asc'
+                  ? 'bg-white text-black'
+                  : 'border border-gray-600 text-gray-300 hover:bg-gray-800'
+              }`}
+            >
+              오래된순
+            </button>
+
+            <button
+              onClick={() => setCommentOrder('desc')}
+              className={`px-3 py-1 text-sm rounded-md transition-colors ${
+                commentOrder === 'desc'
+                  ? 'bg-white text-black'
+                  : 'border border-gray-600 text-gray-300 hover:bg-gray-800'
+              }`}
+            >
+              최신순
+            </button>
+          </div>
+        </div>
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (!commentText.trim()) return;
+            createCommentMutate(commentText);
+          }}
+          className="flex gap-2 mb-6"
+        >
+          <input
+            type="text"
+            value={commentText}
+            onChange={(e) => setCommentText(e.target.value)}
+            placeholder="댓글을 입력해주세요"
+            className="flex-1 bg-[#1e1e1e] border border-gray-700 rounded-md px-4 py-2 text-sm outline-none focus:border-pink-500 text-white"
+          />
+
+          <button
+            type="submit"
+            disabled={!commentText.trim() || isCreatingComment}
+            className="px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors disabled:bg-gray-800 text-sm"
+          >
+            작성
+          </button>
+        </form>
+
+        {isCommentsLoading && (
+          <div className="flex flex-col gap-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <CommentSkeleton key={i} />
+            ))}
+          </div>
+        )}
+
+        {!isCommentsLoading && (
+          <div className="flex flex-col gap-4">
+            {comments.map((comment: any) => (
+              <div
+                key={comment.id}
+                className="flex flex-col gap-1 border-b border-gray-800 pb-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div className="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-sm font-bold text-gray-300">
+                      {comment.author?.name?.[0] ?? '?'}
+                    </div>
+
+                    <span className="text-sm font-medium text-gray-200">
+                      {comment.author?.name}
+                    </span>
+
+                    <span className="text-xs text-gray-500">
+                      {new Date(comment.createdAt).toLocaleDateString('ko-KR')}
+                    </span>
+                  </div>
+
+                  {isCommentOwner(comment) && (
+                    <div className="relative">
+                      <button
+                        onClick={() =>
+                          setOpenMenuId(
+                            openMenuId === comment.id ? null : comment.id,
+                          )
+                        }
+                        className="text-gray-400 hover:text-white px-2 py-1 rounded transition-colors text-lg leading-none"
+                      >
+                        ⋮
+                      </button>
+
+                      {openMenuId === comment.id && (
+                        <div className="absolute right-0 top-8 bg-[#2a2a2a] border border-gray-700 rounded-lg shadow-xl z-10 overflow-hidden min-w-[90px]">
+                          <button
+                            onClick={() => {
+                              setEditingCommentId(comment.id);
+                              setEditingContent(comment.content);
+                              setOpenMenuId(null);
+                            }}
+                            className="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-colors"
+                          >
+                            ✏️ 수정
+                          </button>
+
+                          <button
+                            onClick={() => {
+                              deleteCommentMutate(comment.id);
+                              setOpenMenuId(null);
+                            }}
+                            className="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-400 hover:bg-gray-700 transition-colors"
+                          >
+                            🗑️ 삭제
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                {editingCommentId === comment.id ? (
+                  <div className="flex gap-2 pl-10 mt-1">
+                    <input
+                      type="text"
+                      value={editingContent}
+                      onChange={(e) => setEditingContent(e.target.value)}
+                      className="flex-1 bg-[#1e1e1e] border border-gray-600 rounded-md px-3 py-1 text-sm text-white outline-none focus:border-pink-500"
+                    />
+
+                    <button
+                      onClick={() => {
+                        if (!editingContent.trim()) return;
+                        updateCommentMutate({
+                          commentId: comment.id,
+                          content: editingContent,
+                        });
+                      }}
+                      disabled={isUpdatingComment}
+                      className="text-green-400 hover:text-green-300 transition-colors px-2"
+                    >
+                      ✓
+                    </button>
+                  </div>
+                ) : (
+                  <p className="text-sm text-gray-400 pl-10">
+                    {comment.content}
+                  </p>
+                )}
+              </div>
+            ))}
+
+            {isFetchingNextPage && (
+              <div className="flex flex-col gap-4">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <CommentSkeleton key={i} />
+                ))}
+              </div>
+            )}
+
+            <div ref={bottomRef} className="h-4" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LpDetailPage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/pages/MyPage.tsx b/mission/chapter08/mission_1/src/pages/MyPage.tsx
new file mode 100644
index 00000000..837cea95
--- /dev/null
+++ b/mission/chapter08/mission_1/src/pages/MyPage.tsx
@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import DeleteConfirmModal from '../components/DeleteConfirmModal';
+import { useMyPage } from '../hooks/useMyPage';
+
+const MyPage = () => {
+  const navigate = useNavigate();
+  const {
+  user,
+  isUpdating,
+  isDeleting,
+  updateProfileMutate,
+  deleteAccountMutate,
+  logoutMutate,
+} = useMyPage();
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [name, setName] = useState(user?.nickname ?? '');
+  const [bio, setBio] = useState('');
+  const [avatar, setAvatar] = useState('');
+
+  
+
+  const handleProfileSubmit = () => {
+  if (!name.trim()) {
+    alert('닉네임을 입력해주세요.');
+    return;
+  }
+
+  updateProfileMutate({
+    name,
+    bio,
+    avatar,
+  });
+
+  setIsEditing(false);
+};
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex items-center justify-center py-4 border-b border-gray-700">
+        <button
+          onClick={() => navigate('/')}
+          className="absolute left-4 text-gray-500 hover:text-gray-300 transition-colors"
+        >
+          ＜
+        </button>
+        <h1 className="text-lg font-semibold text-white">마이페이지</h1>
+      </div>
+
+      <div className="flex flex-col items-center justify-center flex-1 gap-6 p-6">
+        {isEditing ? (
+          <div className="flex flex-col items-center gap-4 w-full max-w-sm">
+            <div className="w-24 h-24 rounded-full bg-gray-700 overflow-hidden flex items-center justify-center border-2 border-dashed border-gray-500">
+              {avatar ? (
+                <img
+                  src={avatar}
+                  alt="avatar"
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <span className="text-4xl">👤</span>
+              )}
+            </div>
+
+            <div className="relative w-full">
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full bg-transparent border border-gray-600 rounded-lg px-4 py-2 text-black outline-none focus:border-pink-500 pr-10"
+                placeholder="닉네임"
+              />
+
+              <button
+                onClick={handleProfileSubmit}
+                disabled={isUpdating || !name.trim()}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-green-400 hover:text-green-300 disabled:opacity-50"
+              >
+                ✓
+              </button>
+            </div>
+
+            <input
+              type="text"
+              value={bio}
+              onChange={(e) => setBio(e.target.value)}
+              className="w-full bg-transparent border border-gray-600 rounded-lg px-4 py-2 text-black outline-none focus:border-pink-500"
+              placeholder="bio"
+            />
+
+            <input
+              type="text"
+              value={avatar}
+              onChange={(e) => setAvatar(e.target.value)}
+              className="w-full bg-transparent border border-gray-600 rounded-lg px-4 py-2 text-black outline-none focus:border-pink-500"
+              placeholder="avatar URL"
+            />
+
+            <p className="text-gray-500 text-sm">{user?.email}</p>
+
+            <button
+              onClick={() => setIsEditing(false)}
+              className="text-gray-500 hover:text-gray-300 text-sm transition-colors"
+            >
+              취소
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className="relative">
+              <div className="w-24 h-24 rounded-full bg-gray-700 overflow-hidden flex items-center justify-center text-4xl">
+                {avatar ? (
+                  <img
+                    src={avatar}
+                    alt="avatar"
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  '👤'
+                )}
+              </div>
+
+              <button
+                onClick={() => {
+                  setName(user?.nickname ?? '');
+                  setIsEditing(true);
+                }}
+                className="absolute -bottom-1 -right-1 w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center text-white hover:bg-gray-500 transition-colors text-sm"
+                title="프로필 수정"
+              >
+                ⚙️
+              </button>
+            </div>
+
+            <div className="flex flex-col items-center gap-1">
+              <h2 className="text-2xl font-bold text-white">
+                {user?.nickname}
+              </h2>
+              <p className="text-gray-400 text-sm">{user?.email}</p>
+            </div>
+
+            <button
+              onClick={() => logoutMutate()}
+              className="px-6 py-2 text-sm border border-gray-600 text-gray-300 rounded-md hover:bg-gray-800 transition-colors"
+            >
+              로그아웃
+            </button>
+
+            <button
+              onClick={() => setShowDeleteModal(true)}
+              className="text-red-500 hover:text-red-400 text-sm transition-colors"
+            >
+              탈퇴하기
+            </button>
+          </>
+        )}
+      </div>
+
+      {showDeleteModal && (
+        <DeleteConfirmModal
+          onConfirm={() => deleteAccountMutate()}
+          onCancel={() => setShowDeleteModal(false)}
+          isPending={isDeleting}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MyPage;
diff --git a/mission/chapter08/mission_1/src/pages/NotFoundPage.tsx b/mission/chapter08/mission_1/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..6f316cb9
--- /dev/null
+++ b/mission/chapter08/mission_1/src/pages/NotFoundPage.tsx
@@ -0,0 +1,5 @@
+const NotFound = () => {
+  return <div className='text-2xl text-red-500 justify-center'>찾을 수 없는 페이지입니다</div>;
+};
+
+export default NotFound;
diff --git a/mission/chapter08/mission_1/src/pages/SignupPage.tsx b/mission/chapter08/mission_1/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..d2f11148
--- /dev/null
+++ b/mission/chapter08/mission_1/src/pages/SignupPage.tsx
@@ -0,0 +1,173 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { signupSchema, type SignupFormValues } from '../utils/validate';
+import axiosInstance from '../api/axios';
+
+const SignupPage = () => {
+  const navigate = useNavigate();
+  const [step, setStep] = useState(1);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showPasswordCheck, setShowPasswordCheck] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<SignupFormValues>({
+    resolver: zodResolver(signupSchema),
+    mode: 'onChange',
+  });
+
+  const onSubmit = async (data: SignupFormValues) => {
+    try {
+      // 서버에 회원가입 요청
+      await axiosInstance.post('/auth/signup', {
+        name: data.name,
+        email: data.email,
+        password: data.password,
+      });
+
+      // 회원가입 성공 → 로그인 페이지로 이동
+      alert('회원가입 성공! 로그인 해주세요 😊');
+      navigate('/login');
+    } catch (error) {
+      console.error('회원가입 실패:', error);
+      alert('회원가입에 실패했습니다.');
+    }
+  };
+
+  const email = watch('email');
+  const password = watch('password');
+  const passwordCheck = watch('passwordCheck');
+  const name = watch('name');
+
+  const isStep1Valid = !errors.email && email?.length > 0;
+  const isStep2Valid =
+    !errors.password &&
+    !errors.passwordCheck &&
+    password?.length > 0 &&
+    passwordCheck?.length > 0 &&
+    password === passwordCheck;
+  const isStep3Valid = !errors.name && name?.length > 0;
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex items-center justify-center py-4 border-b border-gray-200">
+        <button
+          onClick={() => (step === 1 ? navigate('/') : setStep(step - 1))}
+          className="absolute left-4 text-gray-600 hover:text-gray-900 transition-colors"
+        >
+          ＜
+        </button>
+        <h1 className="text-lg font-semibold">회원가입</h1>
+      </div>
+
+      <div className="flex flex-col items-center justify-center flex-1">
+        <div className="flex flex-col gap-3 w-[300px]">
+          {step === 1 && (
+            <>
+              <input
+                {...register('email')}
+                className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                  ${errors.email ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                type="email"
+                placeholder="이메일을 입력해주세요!"
+              />
+              {errors.email && (
+                <div className="text-red-500 text-sm">{errors.email.message}</div>
+              )}
+              <button
+                type="button"
+                onClick={() => setStep(2)}
+                disabled={!isStep1Valid}
+                className="w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300"
+              >
+                다음
+              </button>
+            </>
+          )}
+
+          {step === 2 && (
+            <>
+              <div className="text-gray-500 text-sm">{email}</div>
+              <div className="relative">
+                <input
+                  {...register('password')}
+                  className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                    ${errors.password ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="비밀번호를 입력해주세요!"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"
+                >
+                  {showPassword ? '🙈' : '👁️'}
+                </button>
+              </div>
+              {errors.password && (
+                <div className="text-red-500 text-sm">{errors.password.message}</div>
+              )}
+              <div className="relative">
+                <input
+                  {...register('passwordCheck')}
+                  className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                    ${errors.passwordCheck ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                  type={showPasswordCheck ? 'text' : 'password'}
+                  placeholder="비밀번호를 다시 입력해주세요!"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPasswordCheck(!showPasswordCheck)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"
+                >
+                  {showPasswordCheck ? '🙈' : '👁️'}
+                </button>
+              </div>
+              {passwordCheck?.length > 0 && password !== passwordCheck && (
+                <div className="text-red-500 text-sm">비밀번호가 일치하지 않습니다</div>
+              )}
+              <button
+                type="button"
+                onClick={() => setStep(3)}
+                disabled={!isStep2Valid}
+                className="w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300"
+              >
+                다음
+              </button>
+            </>
+          )}
+
+          {step === 3 && (
+            <>
+              <input
+                {...register('name')}
+                className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                  ${errors.name ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                type="text"
+                placeholder="이름을 입력해주세요!"
+              />
+              {errors.name && (
+                <div className="text-red-500 text-sm">{errors.name.message}</div>
+              )}
+              <button
+                type="button"
+                onClick={handleSubmit(onSubmit)}
+                disabled={!isStep3Valid}
+                className="w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300"
+              >
+                회원가입 완료
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SignupPage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/types/lp.ts b/mission/chapter08/mission_1/src/types/lp.ts
new file mode 100644
index 00000000..30719af3
--- /dev/null
+++ b/mission/chapter08/mission_1/src/types/lp.ts
@@ -0,0 +1,65 @@
+export interface Tag {
+  id: number;
+  name: string;
+}
+
+export interface Like {
+  id: number;
+  userId: number;
+  lpId: number;
+}
+
+export interface Lp {
+  id: number;
+  title: string;
+  content: string;
+  thumbnail: string;
+  published: boolean;
+  createdAt: string;
+  updatedAt: string;
+  tags: Tag[];
+  likes: Like[];
+}
+
+// 댓글 타입
+export interface Comment {
+  id: number;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  lpId: number;
+  authorId: number;
+  author: {
+    id: number;
+    name: string;
+  };
+}
+export interface LpListResponse {
+  status: boolean;
+  statusCode: number;
+  message: string;
+  data: {
+    data: Lp[];
+    nextCursor: number | null;
+    hasNext: boolean;
+  };
+}
+
+export interface LpDetailResponse {
+  status: boolean;
+  statusCode: number;
+  message: string;
+  data: Lp;
+}
+
+// 댓글 목록 응답 타입
+export interface CommentListResponse {
+  status: boolean;
+  statusCode: number;
+  message: string;
+  data: {
+    data: Comment[];
+    nextCursor: number | null;
+    hasNext: boolean;
+  };
+}
\ No newline at end of file
diff --git a/mission/chapter08/mission_1/src/utils/validate.ts b/mission/chapter08/mission_1/src/utils/validate.ts
new file mode 100644
index 00000000..6fddb70b
--- /dev/null
+++ b/mission/chapter08/mission_1/src/utils/validate.ts
@@ -0,0 +1,27 @@
+import { z } from 'zod';
+
+export const signinSchema = z.object({
+  email: z.string().email('올바른 이메일 형식이 아닙니다'),
+  password: z
+    .string()
+    .min(8, '비밀번호는 8자 이상이어야 합니다.')
+    .max(20, '비밀번호는 20자 이하여야 합니다'),
+});
+
+export const signupSchema = z
+  .object({
+    name: z.string().min(1, '이름을 입력해주세요'),
+    email: z.string().email('올바른 이메일 형식이 아닙니다'),
+    password: z
+      .string()
+      .min(8, '비밀번호는 8자 이상이어야 합니다')
+      .max(20, '비밀번호는 20자 이하여야 합니다'),
+    passwordCheck: z.string(),
+  })
+  .refine((data) => data.password === data.passwordCheck, {
+    message: '비밀번호가 일치하지 않습니다',
+    path: ['passwordCheck'],
+  });
+
+export type SigninFormValues = z.infer<typeof signinSchema>;
+export type SignupFormValues = z.infer<typeof signupSchema>;
diff --git a/mission/chapter08/mission_2/src/App.css b/mission/chapter08/mission_2/src/App.css
new file mode 100644
index 00000000..e69de29b
diff --git a/mission/chapter08/mission_2/src/App.tsx b/mission/chapter08/mission_2/src/App.tsx
new file mode 100644
index 00000000..9978d8bd
--- /dev/null
+++ b/mission/chapter08/mission_2/src/App.tsx
@@ -0,0 +1,63 @@
+import './App.css';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import HomeLayout from './layouts/HomeLayout';
+import NotFound from './pages/NotFoundPage';
+import LoginPage from './pages/LoginPage';
+import HomePage from './pages/HomePage';
+import SignupPage from './pages/SignupPage';
+import MyPage from './pages/MyPage';
+import LpDetailPage from './pages/LpDetailPage';
+import ProtectedRoute from './components/ProtectedRoute';
+import GoogleCallbackPage from './pages/GoogleCallBackPage';
+import { AuthProvider } from './context/AuthContext';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <HomeLayout />,
+    errorElement: <NotFound />,
+    children: [
+      { index: true, element: <HomePage /> },
+      {
+        path: 'mypage',
+        element: (
+          <ProtectedRoute>
+            <MyPage />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: 'lps/:lpId', // LP 상세 페이지
+        element: (
+          <ProtectedRoute>
+            <LpDetailPage />
+          </ProtectedRoute>
+        ),
+      },
+    ],
+  },
+  {
+    path: '/login',
+    element: <LoginPage />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: '/signup',
+    element: <SignupPage />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: '/v1/auth/google/callback',
+    element: <GoogleCallbackPage />,
+  },
+]);
+
+function App() {
+  return (
+    <AuthProvider>
+      <RouterProvider router={router} />
+    </AuthProvider>
+  );
+}
+
+export default App;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/api/auth.ts b/mission/chapter08/mission_2/src/api/auth.ts
new file mode 100644
index 00000000..44d9b927
--- /dev/null
+++ b/mission/chapter08/mission_2/src/api/auth.ts
@@ -0,0 +1,13 @@
+import axiosInstance from './axios';
+
+// 로그인
+export const signin = async (email: string, password: string) => {
+  const response = await axiosInstance.post('/auth/signin', { email, password });
+  return response.data;
+};
+
+// 로그아웃
+export const signout = async () => {
+  const response = await axiosInstance.post('/auth/signout');
+  return response.data;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/api/axios.ts b/mission/chapter08/mission_2/src/api/axios.ts
new file mode 100644
index 00000000..41cdc580
--- /dev/null
+++ b/mission/chapter08/mission_2/src/api/axios.ts
@@ -0,0 +1,94 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+});
+
+// 토큰 갱신 중복 방지용 변수
+let isRefreshing = false; // 현재 갱신 중인지
+let refreshSubscribers: ((token: string) => void)[] = []; // 대기 중인 요청들
+
+//갱신 완료 후 대기 중인 요청들한테 새 토큰 전달
+const onRefreshed = (token: string) => {
+  refreshSubscribers.forEach((callback) => callback(token));
+  refreshSubscribers = [];
+};
+
+// 대기열에 요청 추가
+const addRefreshSubscriber = (callback: (token: string) => void) => {
+  refreshSubscribers.push(callback);
+};
+
+// 요청 인터셉터
+axiosInstance.interceptors.request.use((config) => {
+  const accessToken = localStorage.getItem('accessToken');
+
+  if (accessToken) {
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+  return config;
+});
+
+// 응답 인터셉터
+axiosInstance.interceptors.response.use(
+  // 성공 응답은 그냥 통과
+  (response) => response,
+
+  // 실패 응답(에러)은 여기서 처리
+  async (error) => {
+    const originalRequest = error.config;
+
+    // 401 = 토큰 만료
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      // 재시도 표시 → 한 번만 재시도하도록 기록
+      originalRequest._retry = true;
+
+      // 이미 갱신 중이면 대기열에 추가
+      if (isRefreshing) {
+        return new Promise((resolve) => {
+          addRefreshSubscriber((token) => {
+            originalRequest.headers.Authorization = `Bearer ${token}`;
+            resolve(axiosInstance(originalRequest));
+          });
+        });
+      }
+
+      isRefreshing = true; // 갱신 시작
+
+      try {
+        const refreshToken = localStorage.getItem('refreshToken');
+
+        const response = await axios.post(
+          `${import.meta.env.VITE_API_URL}/auth/refresh`, // env로 변경
+          {
+            refresh: refreshToken,
+          },
+        );
+
+        // 새로 받은 accessToken 저장
+        const newAccessToken = response.data.data.accessToken;
+        localStorage.setItem('accessToken', newAccessToken);
+
+        isRefreshing = false;
+        onRefreshed(newAccessToken); // 대기 중인 요청들 처리
+
+        // 실패했던 요청 헤더도 새 토큰으로 교체
+        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+
+        // 실패했던 요청 재시도
+        return axiosInstance(originalRequest);
+      } catch (refreshError) {
+        // refreshToken도 만료 → 강제 로그아웃
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+        localStorage.removeItem('user');
+        window.location.href = '/login';
+        return Promise.reject(refreshError);
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default axiosInstance;
diff --git a/mission/chapter08/mission_2/src/api/lp.ts b/mission/chapter08/mission_2/src/api/lp.ts
new file mode 100644
index 00000000..8f79033b
--- /dev/null
+++ b/mission/chapter08/mission_2/src/api/lp.ts
@@ -0,0 +1,98 @@
+import axiosInstance from './axios';
+import type { CommentListResponse, LpDetailResponse, LpListResponse } from '../types/lp';
+
+// LP 목록 조회
+export const getLps = async (
+  order: 'asc' | 'desc' = 'desc',
+  cursor: number = 0,
+  search: string = '',  // 추가
+): Promise<LpListResponse> => {
+  const response = await axiosInstance.get('/lps', {
+    params: {
+      order,
+      limit: 10,
+      cursor,
+      // 빈 문자열이면 파라미터 자체를 보내지 않음
+      ...(search.trim() && { search: search.trim() }),
+    },
+  });
+  return response.data;
+};
+
+// LP 상세 조회
+export const getLpDetail = async (lpId: number): Promise<LpDetailResponse> => {
+  const response = await axiosInstance.get(`/lps/${lpId}`);
+  return response.data;
+};
+
+// LP 생성
+export const createLp = async (data: {
+  title: string;
+  content: string;
+  thumbnail: string;
+  tags: string[];
+  published: boolean;
+}) => {
+  const response = await axiosInstance.post('/lps', data);
+  return response.data;
+};
+
+// LP 수정
+export const updateLp = async (lpId: number, data: {
+  title?: string;
+  content?: string;
+  thumbnail?: string;
+  tags?: string[];
+  published?: boolean;
+}) => {
+  const response = await axiosInstance.patch(`/lps/${lpId}`, data);
+  return response.data;
+};
+
+// LP 좋아요
+export const likeLp = async (lpId: number) => {
+  const response = await axiosInstance.post(`/lps/${lpId}/likes`);
+  return response.data;
+};
+
+// LP 좋아요 취소
+export const unlikeLp = async (lpId: number) => {
+  const response = await axiosInstance.delete(`/lps/${lpId}/likes`);
+  return response.data;
+};
+
+// LP 삭제
+export const deleteLp = async (lpId: number) => {
+  const response = await axiosInstance.delete(`/lps/${lpId}`);
+  return response.data;
+};
+
+// 댓글 목록 조회
+export const getComments = async (
+  lpId: number,
+  order: 'asc' | 'desc' = 'asc',
+  cursor: number = 0,
+): Promise<CommentListResponse> => {
+  const response = await axiosInstance.get(`/lps/${lpId}/comments`, {
+    params: { order, limit: 10, cursor },
+  });
+  return response.data;
+};
+
+// 댓글 작성
+export const createComment = async (lpId: number, content: string) => {
+  const response = await axiosInstance.post(`/lps/${lpId}/comments`, { content });
+  return response.data;
+};
+
+// 댓글 수정
+export const updateComment = async (lpId: number, commentId: number, content: string) => {
+  const response = await axiosInstance.patch(`/lps/${lpId}/comments/${commentId}`, { content });
+  return response.data;
+};
+
+// 댓글 삭제
+export const deleteComment = async (lpId: number, commentId: number) => {
+  const response = await axiosInstance.delete(`/lps/${lpId}/comments/${commentId}`);
+  return response.data;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/api/upload.ts b/mission/chapter08/mission_2/src/api/upload.ts
new file mode 100644
index 00000000..555268f2
--- /dev/null
+++ b/mission/chapter08/mission_2/src/api/upload.ts
@@ -0,0 +1,11 @@
+import axiosInstance from './axios';
+
+export const uploadImage = async (file: File): Promise<string> => {
+  const formData = new FormData();
+  formData.append('file', file);
+  const response = await axiosInstance.post('/uploads', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+  // 응답에서 imageUrl 반환
+  return response.data.data.imageUrl;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/api/user.ts b/mission/chapter08/mission_2/src/api/user.ts
new file mode 100644
index 00000000..37394720
--- /dev/null
+++ b/mission/chapter08/mission_2/src/api/user.ts
@@ -0,0 +1,23 @@
+import axiosInstance from './axios';
+
+// 내 프로필 조회
+export const getMyProfile = async () => {
+  const response = await axiosInstance.get('/users/me');
+  return response.data;
+};
+
+// 프로필 수정
+export const updateMyProfile = async (data: {
+  name: string;
+  bio: string;
+  avatar: string;
+}) => {
+  const response = await axiosInstance.patch('/users', data);
+  return response.data;
+};
+
+// 회원 탈퇴
+export const deleteMyAccount = async () => {
+  const response = await axiosInstance.delete('/users');
+  return response.data;
+};
diff --git a/mission/chapter08/mission_2/src/assets/hero.png b/mission/chapter08/mission_2/src/assets/hero.png
new file mode 100644
index 00000000..cc51a3d2
Binary files /dev/null and b/mission/chapter08/mission_2/src/assets/hero.png differ
diff --git a/mission/chapter08/mission_2/src/assets/react.svg b/mission/chapter08/mission_2/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/mission/chapter08/mission_2/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/assets/vite.svg b/mission/chapter08/mission_2/src/assets/vite.svg
new file mode 100644
index 00000000..5101b674
--- /dev/null
+++ b/mission/chapter08/mission_2/src/assets/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
diff --git a/mission/chapter08/mission_2/src/components/Button.tsx b/mission/chapter08/mission_2/src/components/Button.tsx
new file mode 100644
index 00000000..4601dc04
--- /dev/null
+++ b/mission/chapter08/mission_2/src/components/Button.tsx
@@ -0,0 +1,43 @@
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  variant?: 'primary' | 'secondary' | 'google'; // 버튼 종류
+  type?: 'button' | 'submit';
+  className?: string;
+}
+
+const Button = ({
+  children,
+  onClick,
+  disabled = false,
+  variant = 'primary',
+  type = 'button',
+  className = '',
+}: ButtonProps) => {
+  // variant에 따라 스타일 다르게
+  const variantStyles = {
+    // 파란 버튼 (로그인, 다음, 회원가입 등)
+    primary:
+      'w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300',
+    // 테두리 버튼 (로그아웃 등)
+    secondary:
+      'px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100 transition-colors cursor-pointer',
+    // 구글 버튼
+    google:
+      'w-full flex items-center justify-center gap-2 border border-gray-300 py-3 rounded-md text-lg font-medium hover:bg-gray-100 transition-colors cursor-pointer',
+  };
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`${variantStyles[variant]} ${className}`}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/mission/chapter08/mission_2/src/components/CommentSkeleton.tsx b/mission/chapter08/mission_2/src/components/CommentSkeleton.tsx
new file mode 100644
index 00000000..60c1dec9
--- /dev/null
+++ b/mission/chapter08/mission_2/src/components/CommentSkeleton.tsx
@@ -0,0 +1,14 @@
+const CommentSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-2 animate-pulse">
+      <div className="flex items-center gap-2">
+        <div className="w-8 h-8 bg-gray-200 rounded-full" />
+        <div className="w-24 h-4 bg-gray-200 rounded" />
+      </div>
+      <div className="w-full h-4 bg-gray-200 rounded" />
+      <div className="w-3/4 h-4 bg-gray-200 rounded" />
+    </div>
+  );
+};
+
+export default CommentSkeleton;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/components/CreateLpModal.tsx b/mission/chapter08/mission_2/src/components/CreateLpModal.tsx
new file mode 100644
index 00000000..f317ea07
--- /dev/null
+++ b/mission/chapter08/mission_2/src/components/CreateLpModal.tsx
@@ -0,0 +1,232 @@
+import { useEffect, useRef, useState } from 'react';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { createLp } from '../api/lp';
+import { uploadImage } from '../api/upload';
+
+interface CreateLpModalProps {
+  onClose: () => void;
+}
+
+const CreateLpModal = ({ onClose }: CreateLpModalProps) => {
+  const queryClient = useQueryClient();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [tagInput, setTagInput] = useState('');
+  const [tags, setTags] = useState<string[]>([]);
+  const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  const { mutate: createLpMutate, isPending } = useMutation({
+    mutationFn: async () => {
+      let thumbnailUrl = '';
+
+      if (thumbnailFile) {
+        thumbnailUrl = await uploadImage(thumbnailFile);
+      }
+
+      return createLp({
+        title,
+        content,
+        thumbnail: thumbnailUrl,
+        tags,
+        published: true,
+      });
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['lps'] });
+      onClose();
+    },
+
+    onError: (error) => {
+      console.error('LP 생성 실패:', error);
+      alert('LP 생성에 실패했습니다.');
+    },
+  });
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setThumbnailFile(file);
+
+    setPreviewUrl((prev) => {
+      if (prev?.startsWith('blob:')) {
+        URL.revokeObjectURL(prev);
+      }
+
+      return URL.createObjectURL(file);
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl?.startsWith('blob:')) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
+  const handleAddTag = () => {
+    const trimmed = tagInput.trim();
+
+    if (!trimmed || tags.includes(trimmed)) return;
+
+    setTags((prev) => [...prev, trimmed]);
+    setTagInput('');
+  };
+
+  const handleRemoveTag = (tag: string) => {
+    setTags((prev) => prev.filter((t) => t !== tag));
+  };
+
+  const handleTagKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAddTag();
+    }
+  };
+
+  const handleSubmit = () => {
+    if (!title.trim()) {
+      alert('LP 이름을 입력해주세요.');
+      return;
+    }
+
+    createLpMutate();
+  };
+
+  const handleBackdropClick = () => {
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/60 flex items-center justify-center z-50"
+      onClick={handleBackdropClick}
+    >
+      <div
+        className="bg-[#2a2a2a] rounded-2xl w-[90%] max-w-md p-6 flex flex-col gap-4 relative max-h-[90vh] overflow-y-auto"
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-white text-xl transition-colors"
+        >
+          ✕
+        </button>
+
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          {previewUrl ? (
+            <img
+              src={previewUrl}
+              alt="preview"
+              className="w-40 h-40 object-cover rounded-xl border-2 border-pink-500"
+            />
+          ) : (
+            <div className="w-40 h-40 relative flex items-center justify-center">
+              <svg viewBox="0 0 200 200" className="w-full h-full">
+                <circle
+                  cx="100"
+                  cy="100"
+                  r="95"
+                  fill="#111"
+                  stroke="#333"
+                  strokeWidth="4"
+                />
+                <circle cx="100" cy="100" r="65" fill="#222" />
+                <circle cx="100" cy="100" r="40" fill="#1a1a1a" />
+                <circle cx="100" cy="100" r="12" fill="#444" />
+                <circle cx="100" cy="100" r="6" fill="#888" />
+                <circle cx="100" cy="100" r="2" fill="#fff" />
+              </svg>
+
+              <span className="absolute bottom-2 text-xs text-gray-400">
+                클릭해서 사진 추가
+              </span>
+            </div>
+          )}
+        </div>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleFileChange}
+        />
+
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="LP Name"
+          className="bg-[#3a3a3a] text-white placeholder-gray-500 rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-pink-500 transition-all"
+        />
+
+        <input
+          type="text"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder="LP Content"
+          className="bg-[#3a3a3a] text-white placeholder-gray-500 rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-pink-500 transition-all"
+        />
+
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={tagInput}
+            onChange={(e) => setTagInput(e.target.value)}
+            onKeyDown={handleTagKeyDown}
+            placeholder="LP Tag"
+            className="flex-1 bg-[#3a3a3a] text-white placeholder-gray-500 rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-pink-500 transition-all"
+          />
+
+          <button
+            onClick={handleAddTag}
+            className="px-4 py-2 bg-[#3a3a3a] text-white rounded-lg hover:bg-[#4a4a4a] transition-colors border border-gray-600"
+          >
+            Add
+          </button>
+        </div>
+
+        {tags.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {tags.map((tag) => (
+              <span
+                key={tag}
+                className="flex items-center gap-1 bg-[#3a3a3a] text-gray-300 text-sm px-3 py-1 rounded-full"
+              >
+                {tag}
+
+                <button
+                  onClick={() => handleRemoveTag(tag)}
+                  className="text-gray-400 hover:text-white ml-1 transition-colors"
+                >
+                  ✕
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+
+        <button
+          onClick={handleSubmit}
+          disabled={isPending || !title.trim()}
+          className="w-full py-3 rounded-xl text-white font-semibold transition-all
+            bg-pink-500 hover:bg-pink-600 disabled:bg-gray-600 disabled:cursor-not-allowed"
+        >
+          {isPending ? 'LP 생성 중...' : 'Add LP'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CreateLpModal;
diff --git a/mission/chapter08/mission_2/src/components/DeleteConfirmModal.tsx b/mission/chapter08/mission_2/src/components/DeleteConfirmModal.tsx
new file mode 100644
index 00000000..0fa52634
--- /dev/null
+++ b/mission/chapter08/mission_2/src/components/DeleteConfirmModal.tsx
@@ -0,0 +1,33 @@
+interface DeleteConfirmModalProps {
+  onConfirm: () => void;
+  onCancel: () => void;
+  isPending?: boolean;
+}
+
+const DeleteConfirmModal = ({ onConfirm, onCancel, isPending }: DeleteConfirmModalProps) => {
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+      <div className="bg-[#2a2a2a] rounded-2xl w-80 p-6 flex flex-col gap-4">
+        <h2 className="text-white text-lg font-bold">정말 탈퇴하시겠습니까?</h2>
+        <p className="text-gray-400 text-sm">탈퇴 후에는 모든 데이터가 삭제되며 복구할 수 없습니다.</p>
+        <div className="flex gap-3">
+          <button
+            onClick={onCancel}
+            className="flex-1 py-2 rounded-lg border border-gray-600 text-gray-300 hover:bg-gray-700 transition-colors"
+          >
+            아니오
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isPending}
+            className="flex-1 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors disabled:bg-gray-600"
+          >
+            {isPending ? '처리 중...' : '예'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteConfirmModal;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/components/Input.tsx b/mission/chapter08/mission_2/src/components/Input.tsx
new file mode 100644
index 00000000..05686388
--- /dev/null
+++ b/mission/chapter08/mission_2/src/components/Input.tsx
@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+
+interface InputProps {
+  type?: string;
+  placeholder?: string;
+  hasError?: boolean;
+  errorMessage?: string;
+}
+
+// forwardRef → react-hook-form의 register가 ref를 전달할 수 있게 해줌
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ type = 'text', placeholder, hasError = false, errorMessage, ...rest }, ref) => {
+    return (
+      <div className="flex flex-col gap-1">
+        <input
+          ref={ref}
+          type={type}
+          placeholder={placeholder}
+          className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+            ${hasError ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+          {...rest}
+        />
+        {/* 에러 메시지 있으면 자동으로 표시 */}
+        {hasError && errorMessage && (
+          <div className="text-red-500 text-sm">{errorMessage}</div>
+        )}
+      </div>
+    );
+  }
+);
+
+export default Input;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/components/LpCard.tsx b/mission/chapter08/mission_2/src/components/LpCard.tsx
new file mode 100644
index 00000000..58f4f7c1
--- /dev/null
+++ b/mission/chapter08/mission_2/src/components/LpCard.tsx
@@ -0,0 +1,50 @@
+import { useNavigate } from 'react-router-dom';
+import type { Lp } from '../types/lp';
+
+interface LpCardProps {
+  lp: Lp;
+}
+
+const LpCard = ({ lp }: LpCardProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <div
+      onClick={() => navigate(`/lps/${lp.id}`)}
+      className="relative group cursor-pointer rounded-lg overflow-hidden aspect-square bg-gray-200"
+    >
+      {/* 썸네일 */}
+      <img
+        src={lp.thumbnail || 'https://via.placeholder.com/300'}
+        alt={lp.title}
+        className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+      />
+
+      {/* 호버 시 오버레이 */}
+      <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
+        <h3 className="text-white font-bold text-lg truncate">{lp.title}</h3>
+        <div className="flex items-center gap-3 mt-1">
+          <span className="text-gray-300 text-sm">
+            {new Date(lp.createdAt).toLocaleDateString('ko-KR')}
+          </span>
+          <span className="text-gray-300 text-sm">
+            ❤️ {lp.likes?.length ?? 0}
+          </span>
+        </div>
+        {/* 태그 */}
+        <div className="flex gap-1 mt-2 flex-wrap">
+          {lp.tags?.slice(0, 3).map((tag) => (
+            <span
+              key={tag.id}
+              className="text-xs bg-white/20 text-white px-2 py-0.5 rounded-full"
+            >
+              #{tag.name}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LpCard;
diff --git a/mission/chapter08/mission_2/src/components/LpCardSkeleton.tsx b/mission/chapter08/mission_2/src/components/LpCardSkeleton.tsx
new file mode 100644
index 00000000..0bd3ee3d
--- /dev/null
+++ b/mission/chapter08/mission_2/src/components/LpCardSkeleton.tsx
@@ -0,0 +1,7 @@
+const LpCardSkeleton = () => {
+  return (
+    <div className="aspect-square bg-gray-200 rounded-lg animate-pulse" />
+  );
+};
+
+export default LpCardSkeleton;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/components/Navbar.tsx b/mission/chapter08/mission_2/src/components/Navbar.tsx
new file mode 100644
index 00000000..89dd632d
--- /dev/null
+++ b/mission/chapter08/mission_2/src/components/Navbar.tsx
@@ -0,0 +1,78 @@
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import { useAuth } from '../context/AuthContext';
+
+interface NavbarProps {
+  onMenuClick: () => void;
+}
+
+const Navbar = ({ onMenuClick }: NavbarProps) => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+
+  // ── 로그아웃 mutation ──
+  const { mutate: logoutMutate } = useMutation({
+    mutationFn: async () => {
+      await logout();
+    },
+    onSuccess: () => {
+      navigate('/');
+    },
+  });
+
+  return (
+    <nav className="flex items-center justify-between px-6 py-4 border-b border-gray-700">
+      {/* 버거 버튼 - 모바일에서만 보임 */}
+      <button className="md:hidden" onClick={onMenuClick}>
+        <svg width="28" height="28" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+          <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M7.95 11.95h32m-32 12h32m-32 12h32"/>
+        </svg>
+      </button>
+
+      {/* 로고 */}
+      <div
+        className="font-bold text-lg cursor-pointer text-pink-400"
+        onClick={() => navigate('/')}
+      >
+        🎵 LP판
+      </div>
+
+      {/* 버튼 영역 */}
+      <div className="flex gap-2">
+        {user ? (
+          <div className="flex items-center gap-3">
+            <span
+              className="text-gray-400 cursor-pointer hover:text-pink-400 transition-colors text-sm"
+              onClick={() => navigate('/mypage')}
+            >
+              {user.nickname}님 반갑습니다!
+            </span>
+            <button
+              onClick={() => logoutMutate()}
+              className="px-4 py-2 text-sm border border-gray-600 text-gray-300 rounded-md hover:bg-gray-800 transition-colors"
+            >
+              로그아웃
+            </button>
+          </div>
+        ) : (
+          <>
+            <button
+              onClick={() => navigate('/login')}
+              className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100 transition-colors"
+            >
+              로그인
+            </button>
+            <button
+              onClick={() => navigate('/signup')}
+              className="px-4 py-2 text-sm bg-pink-500 text-white rounded-md hover:bg-pink-600 transition-colors"
+            >
+              회원가입
+            </button>
+          </>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/components/ProtectedRoute.tsx b/mission/chapter08/mission_2/src/components/ProtectedRoute.tsx
new file mode 100644
index 00000000..77d974dd
--- /dev/null
+++ b/mission/chapter08/mission_2/src/components/ProtectedRoute.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { user } = useAuth();
+  const location = useLocation(); // 현재 경로 저장
+  const [showModal, setShowModal] = useState(true);
+
+  if (!user) {
+    // 모달 닫고 로그인으로
+    if (!showModal) {
+      return <Navigate to="/login" state={{ from: location }} replace />;
+      // state={{ from: location }} → 원래 가려던 경로 저장!
+    }
+
+    return (
+      // 경고 모달
+      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg p-6 w-80 flex flex-col gap-4">
+          <h2 className="text-lg font-bold">로그인이 필요합니다</h2>
+          <p className="text-gray-500 text-sm">이 페이지는 로그인 후 이용할 수 있습니다.</p>
+          <button
+            onClick={() => setShowModal(false)}
+            className="w-full bg-blue-400 text-white py-2 rounded-md hover:bg-blue-500 transition-colors"
+          >
+            확인
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/components/Sidebar.tsx b/mission/chapter08/mission_2/src/components/Sidebar.tsx
new file mode 100644
index 00000000..f15375c1
--- /dev/null
+++ b/mission/chapter08/mission_2/src/components/Sidebar.tsx
@@ -0,0 +1,165 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import { useAuth } from '../context/AuthContext';
+import { deleteMyAccount } from '../api/user';
+import DeleteConfirmModal from './DeleteConfirmModal';
+
+interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  isStatic?: boolean;
+}
+
+const Sidebar = ({ isOpen, onClose, isStatic = false }: SidebarProps) => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+  const [search, setSearch] = useState('');
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  // ── 로그아웃 mutation ──
+  const { mutate: logoutMutate } = useMutation({
+    mutationFn: async () => {
+      await logout();
+    },
+    onSuccess: () => {
+      if (!isStatic) onClose();
+      navigate('/');
+    },
+  });
+
+  // ── 탈퇴 mutation ──
+  const { mutate: deleteAccountMutate, isPending: isDeleting } = useMutation({
+    mutationFn: deleteMyAccount,
+    onSuccess: () => {
+      logout();
+      navigate('/login');
+    },
+    onError: () => {
+      alert('회원 탈퇴에 실패했습니다.');
+    },
+  });
+
+  const handleNavigate = (path: string) => {
+    navigate(path);
+    if (!isStatic) onClose();
+  };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (search.trim()) {
+      navigate(`/?search=${search}`);
+      if (!isStatic) onClose();
+    }
+  };
+
+  const content = (
+    <div className="flex flex-col h-full p-4 gap-4">
+      {/* 검색창 */}
+      <form onSubmit={handleSearch} className="flex flex-col gap-2">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="검색..."
+          className="border border-gray-600 bg-transparent rounded-md px-3 py-2 text-sm outline-none focus:border-pink-400 text-white"
+        />
+        <button
+          type="submit"
+          className="text-sm bg-pink-500 text-white py-2 rounded-md hover:bg-pink-600 transition-colors"
+        >
+          검색
+        </button>
+      </form>
+
+      <hr className="border-gray-700" />
+
+      {/* 메뉴 */}
+      <nav className="flex flex-col gap-3 flex-1">
+        <button
+          onClick={() => handleNavigate('/')}
+          className="text-left text-gray-400 hover:text-pink-400 transition-colors text-sm font-medium"
+        >
+          🏠 홈
+        </button>
+        {user && (
+          <button
+            onClick={() => handleNavigate('/mypage')}
+            className="text-left text-gray-400 hover:text-pink-400 transition-colors text-sm font-medium"
+          >
+            👤 마이페이지
+          </button>
+        )}
+      </nav>
+
+      {/* 하단 로그인/로그아웃 */}
+      <div className="border-t border-gray-700 pt-4">
+        {user ? (
+          <div className="flex flex-col gap-2">
+            <span className="text-gray-400 text-sm">{user.nickname}님</span>
+            <button
+              onClick={() => logoutMutate()}
+              className="text-left text-red-400 hover:text-red-300 text-sm transition-colors"
+            >
+              로그아웃
+            </button>
+            <button
+              onClick={() => setShowDeleteModal(true)}
+              className="text-left text-gray-500 hover:text-red-400 text-sm transition-colors"
+            >
+              탈퇴하기
+            </button>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={() => handleNavigate('/login')}
+              className="text-left text-gray-400 hover:text-pink-400 text-sm transition-colors"
+            >
+              로그인
+            </button>
+            <button
+              onClick={() => handleNavigate('/signup')}
+              className="text-left text-gray-400 hover:text-pink-400 text-sm transition-colors"
+            >
+              회원가입
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* 탈퇴 확인 모달 */}
+      {showDeleteModal && (
+        <DeleteConfirmModal
+          onConfirm={() => deleteAccountMutate()}
+          onCancel={() => setShowDeleteModal(false)}
+          isPending={isDeleting}
+        />
+      )}
+    </div>
+  );
+
+  if (isStatic) {
+    return <div className="h-full">{content}</div>;
+  }
+
+  return (
+    <>
+      {isOpen && (
+        <div className="fixed inset-0 bg-black/40 z-40" onClick={onClose} />
+      )}
+      <aside
+        className={`fixed top-0 left-0 h-full w-64 bg-[#1a1a1a] z-50 shadow-lg transform transition-transform duration-300
+          ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-gray-700">
+          <h2 className="font-bold text-white">메뉴</h2>
+          <button onClick={onClose} className="text-gray-400 hover:text-white">✕</button>
+        </div>
+        {content}
+      </aside>
+    </>
+  );
+};
+
+export default Sidebar;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/context/AuthContext.tsx b/mission/chapter08/mission_2/src/context/AuthContext.tsx
new file mode 100644
index 00000000..d85baa05
--- /dev/null
+++ b/mission/chapter08/mission_2/src/context/AuthContext.tsx
@@ -0,0 +1,102 @@
+import { createContext, useContext, useState } from 'react';
+import axiosInstance from '../api/axios';
+
+interface User {
+  id: number;
+  email: string;
+  nickname: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  login: (user: User, accessToken: string, refreshToken: string) => void;
+  logout: () => void;
+  updateNickname: (nickname: string) => void;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export const AuthProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [user, setUser] = useState<User | null>(() => {
+    try {
+      const stored = localStorage.getItem('user');
+
+      return stored ? JSON.parse(stored) : null;
+    } catch (error) {
+      console.error('유저 정보 파싱 실패:', error);
+
+      localStorage.removeItem('user');
+
+      return null;
+    }
+  });
+
+  const login = (
+    userData: User,
+    accessToken: string,
+    refreshToken: string
+  ) => {
+    setUser(userData);
+
+    localStorage.setItem('user', JSON.stringify(userData));
+    localStorage.setItem('accessToken', accessToken);
+    localStorage.setItem('refreshToken', refreshToken);
+  };
+
+  const logout = async () => {
+    try {
+      await axiosInstance.post('/auth/signout');
+    } catch (error) {
+      console.error('로그아웃 실패:', error);
+    } finally {
+      setUser(null);
+
+      localStorage.removeItem('user');
+      localStorage.removeItem('accessToken');
+      localStorage.removeItem('refreshToken');
+    }
+  };
+
+  // 닉네임만 즉시 업데이트
+  const updateNickname = (nickname: string) => {
+    setUser((prev) => {
+      if (!prev) return prev;
+
+      const updated = {
+        ...prev,
+        nickname,
+      };
+
+      localStorage.setItem('user', JSON.stringify(updated));
+
+      return updated;
+    });
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        login,
+        logout,
+        updateNickname,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error('AuthProvider 밖에서 사용 불가!');
+  }
+
+  return context;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/hooks/useDebounce.ts b/mission/chapter08/mission_2/src/hooks/useDebounce.ts
new file mode 100644
index 00000000..f03d70c9
--- /dev/null
+++ b/mission/chapter08/mission_2/src/hooks/useDebounce.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+function useDebounce<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/hooks/useInfiniteComments.ts b/mission/chapter08/mission_2/src/hooks/useInfiniteComments.ts
new file mode 100644
index 00000000..fc05cb01
--- /dev/null
+++ b/mission/chapter08/mission_2/src/hooks/useInfiniteComments.ts
@@ -0,0 +1,18 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { getComments } from '../api/lp';
+import type { CommentListResponse } from '../types/lp';
+
+const useInfiniteComments = (lpId: number, order: 'asc' | 'desc') => {
+  return useInfiniteQuery<CommentListResponse, Error>({
+    queryKey: ['lpComments', lpId, order],
+    queryFn: ({ pageParam }) => getComments(lpId, order, pageParam as number),
+    getNextPageParam: (lastPage) => {
+      return lastPage.data.hasNext ? lastPage.data.nextCursor : undefined;
+    },
+    initialPageParam: 0,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  });
+};
+
+export default useInfiniteComments;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/hooks/useInfiniteLps.ts b/mission/chapter08/mission_2/src/hooks/useInfiniteLps.ts
new file mode 100644
index 00000000..5a12c1cb
--- /dev/null
+++ b/mission/chapter08/mission_2/src/hooks/useInfiniteLps.ts
@@ -0,0 +1,25 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { getLps } from '../api/lp';
+
+const useInfiniteLps = (order: 'asc' | 'desc', search: string = '') => {
+  const trimmedSearch = search.trim();
+
+  return useInfiniteQuery({
+    queryKey: ['search', order, trimmedSearch],
+
+    queryFn: ({ pageParam = 0 }) => getLps(order, pageParam, trimmedSearch),
+
+    getNextPageParam: (lastPage) => {
+      return lastPage.data.hasNext ? lastPage.data.nextCursor : undefined;
+    },
+
+    initialPageParam: 0,
+
+    enabled: true,
+
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  });
+};
+
+export default useInfiniteLps;
diff --git a/mission/chapter08/mission_2/src/hooks/useLocalStorage.ts b/mission/chapter08/mission_2/src/hooks/useLocalStorage.ts
new file mode 100644
index 00000000..c6a3ad1b
--- /dev/null
+++ b/mission/chapter08/mission_2/src/hooks/useLocalStorage.ts
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+function useLocalStorage<T>(key: string, initialValue: T) {
+  // 로컬스토리지에서 값을 가져오는 함수
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      // 저장된 값이 있으면 파싱해서 반환, 없으면 초기값 반환
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(error);
+      return initialValue;
+    }
+  });
+
+  // 값을 저장하는 함수
+  const setValue = (value: T) => {
+    try {
+      setStoredValue(value);
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return [storedValue, setValue] as const;
+}
+
+export default useLocalStorage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/hooks/useLpDetail.ts b/mission/chapter08/mission_2/src/hooks/useLpDetail.ts
new file mode 100644
index 00000000..300c788f
--- /dev/null
+++ b/mission/chapter08/mission_2/src/hooks/useLpDetail.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { getLpDetail } from '../api/lp';
+
+const useLpDetail = (lpId: number) => {
+  return useQuery({
+    queryKey: ['lp', lpId], // lpId 포함
+    queryFn: () => getLpDetail(lpId),
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10,
+  });
+};
+
+export default useLpDetail;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/hooks/useLps.ts b/mission/chapter08/mission_2/src/hooks/useLps.ts
new file mode 100644
index 00000000..731431b6
--- /dev/null
+++ b/mission/chapter08/mission_2/src/hooks/useLps.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { getLps } from '../api/lp';
+
+const useLps = (order: 'asc' | 'desc') => {
+  return useQuery({
+    queryKey: ['lps', order], // order 바뀌면 자동으로 리패치
+    queryFn: () => getLps(order),
+    staleTime: 1000 * 60 * 5, // 5분 동안 캐시 유지
+    gcTime: 1000 * 60 * 10,   // 10분 후 캐시 삭제
+  });
+};
+
+export default useLps;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/hooks/useMyPage.ts b/mission/chapter08/mission_2/src/hooks/useMyPage.ts
new file mode 100644
index 00000000..d48d78c1
--- /dev/null
+++ b/mission/chapter08/mission_2/src/hooks/useMyPage.ts
@@ -0,0 +1,48 @@
+import { useNavigate } from 'react-router-dom';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useAuth } from '../context/AuthContext';
+import { updateMyProfile, deleteMyAccount } from '../api/user';
+
+export const useMyPage = () => {
+  const navigate = useNavigate();
+  const { user, logout, updateNickname } = useAuth();
+  const queryClient = useQueryClient();
+
+  const { mutate: updateProfileMutate, isPending: isUpdating } = useMutation({
+    mutationFn: (profileData: { name: string; bio: string; avatar: string }) =>
+      updateMyProfile(profileData),
+    onMutate: async (profileData) => {
+      const previousNickname = user?.nickname;
+      updateNickname(profileData.name);
+      return { previousNickname };
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['myProfile'] });
+      alert('프로필이 수정되었습니다.');
+    },
+    onError: (_error, _variables, context) => {
+      if (context?.previousNickname) updateNickname(context.previousNickname);
+      alert('프로필 수정에 실패했습니다.');
+    },
+  });
+
+  const { mutate: deleteAccountMutate, isPending: isDeleting } = useMutation({
+    mutationFn: deleteMyAccount,
+    onSuccess: () => { logout(); navigate('/login'); },
+    onError: () => { alert('회원 탈퇴에 실패했습니다.'); },
+  });
+
+  const { mutate: logoutMutate } = useMutation({
+    mutationFn: async () => { await logout(); },
+    onSuccess: () => { navigate('/'); },
+  });
+
+  return {
+    user,
+    isUpdating,
+    isDeleting,
+    updateProfileMutate,
+    deleteAccountMutate,
+    logoutMutate,
+  };
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/hooks/useThrottle.ts b/mission/chapter08/mission_2/src/hooks/useThrottle.ts
new file mode 100644
index 00000000..144316ff
--- /dev/null
+++ b/mission/chapter08/mission_2/src/hooks/useThrottle.ts
@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from 'react';
+
+function useThrottle<T>(value: T, interval: number = 1000): T {
+  const [throttledValue, setThrottledValue] = useState<T>(value);
+  const lastExecuted = useRef<number>(Date.now());
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const elapsed = Date.now() - lastExecuted.current;
+
+    if (elapsed >= interval) {
+      setThrottledValue(value);
+      lastExecuted.current = Date.now();
+      return;
+    }
+
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = setTimeout(() => {
+      setThrottledValue(value);
+      lastExecuted.current = Date.now();
+      timerRef.current = null;
+    }, interval - elapsed);
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [value, interval]);
+
+  return throttledValue;
+}
+
+export default useThrottle;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/index.css b/mission/chapter08/mission_2/src/index.css
new file mode 100644
index 00000000..d4b50785
--- /dev/null
+++ b/mission/chapter08/mission_2/src/index.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
diff --git a/mission/chapter08/mission_2/src/layouts/HomeLayout.tsx b/mission/chapter08/mission_2/src/layouts/HomeLayout.tsx
new file mode 100644
index 00000000..0eb4c6bf
--- /dev/null
+++ b/mission/chapter08/mission_2/src/layouts/HomeLayout.tsx
@@ -0,0 +1,35 @@
+import { Outlet } from 'react-router-dom';
+import Navbar from '../components/Navbar';
+import Sidebar from '../components/Sidebar';
+import { useState } from 'react';
+
+const HomeLayout = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  return (
+    <div className="h-dvh flex flex-col">
+      <Navbar onMenuClick={() => setIsSidebarOpen(true)} />
+      <div className="flex flex-1 overflow-hidden">
+        {/* 사이드바 - md 이상에서는 항상 보임 */}
+        <aside className="hidden md:flex w-52 border-r border-gray-200 flex-col shrink-0">
+          <Sidebar isOpen={true} isStatic={true} onClose={() => {}} />
+        </aside>
+
+        {/* 메인 콘텐츠 */}
+        <main className="flex-1 overflow-y-auto">
+          <Outlet />
+        </main>
+      </div>
+
+      {/* 모바일 사이드바 - md 미만에서만 동작 */}
+      <div className="md:hidden">
+        <Sidebar
+          isOpen={isSidebarOpen}
+          onClose={() => setIsSidebarOpen(false)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HomeLayout;
diff --git a/mission/chapter08/mission_2/src/main.tsx b/mission/chapter08/mission_2/src/main.tsx
new file mode 100644
index 00000000..896bc7ce
--- /dev/null
+++ b/mission/chapter08/mission_2/src/main.tsx
@@ -0,0 +1,17 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import './index.css';
+import App from './App.tsx';
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  </StrictMode>,
+);
diff --git a/mission/chapter08/mission_2/src/pages/GoogleCallBackPage.tsx b/mission/chapter08/mission_2/src/pages/GoogleCallBackPage.tsx
new file mode 100644
index 00000000..866cfa46
--- /dev/null
+++ b/mission/chapter08/mission_2/src/pages/GoogleCallBackPage.tsx
@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const GoogleCallbackPage = () => {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const accessToken = params.get('accessToken');
+    const refreshToken = params.get('refreshToken');
+    const name = params.get('name') || '';
+    const userId = params.get('userId') || '';
+
+    if (accessToken && refreshToken) {
+      login({ email: userId, nickname: name }, accessToken, refreshToken);
+      navigate('/');
+    } else {
+      navigate('/login');
+    }
+  }, []);
+
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <p className="text-gray-400">로그인 처리 중...</p>
+    </div>
+  );
+};
+
+export default GoogleCallbackPage;
diff --git a/mission/chapter08/mission_2/src/pages/HomePage.tsx b/mission/chapter08/mission_2/src/pages/HomePage.tsx
new file mode 100644
index 00000000..968f2ae5
--- /dev/null
+++ b/mission/chapter08/mission_2/src/pages/HomePage.tsx
@@ -0,0 +1,166 @@
+import { useEffect, useRef, useState } from 'react';
+import useInfiniteLps from '../hooks/useInfiniteLps';
+import useDebounce from '../hooks/useDebounce';
+import useThrottle from '../hooks/useThrottle';
+
+import LpCard from '../components/LpCard';
+import LpCardSkeleton from '../components/LpCardSkeleton';
+import CreateLpModal from '../components/CreateLpModal';
+
+const HomePage = () => {
+  const [order, setOrder] = useState<'asc' | 'desc'>('desc');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const debouncedSearch = useDebounce(search, 300);
+
+  const [scrollTrigger, setScrollTrigger] = useState(0);
+  const throttledScrollTrigger = useThrottle(scrollTrigger, 1000);
+
+  const {
+    data,
+    isLoading,
+    isError,
+    refetch,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteLps(order, debouncedSearch);
+
+  const lps = data?.pages.flatMap((page) => page.data.data) ?? [];
+
+  useEffect(() => {
+    if (isLoading || isError) return;
+    if (!bottomRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          console.log('[Observer] 바닥 감지');
+          setScrollTrigger((prev) => prev + 1);
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(bottomRef.current);
+
+    return () => observer.disconnect();
+  }, [isLoading, isError]);
+
+  useEffect(() => {
+    if (throttledScrollTrigger > 0 && hasNextPage && !isFetchingNextPage) {
+      console.log('[Throttle] 1초에 한 번만 다음 페이지 요청');
+      fetchNextPage();
+    }
+  }, [throttledScrollTrigger, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  return (
+    <div className="relative min-h-full p-6">
+      <div className="mb-4">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="LP 검색..."
+          className="w-full border border-gray-600 bg-transparent rounded-md px-4 py-2 text-sm outline-none focus:border-pink-400 text-white"
+        />
+
+        {search !== debouncedSearch && (
+          <p className="text-xs text-gray-500 mt-1">입력 감지 중...</p>
+        )}
+      </div>
+
+      <div className="flex gap-2 mb-6">
+        <button
+          onClick={() => setOrder('desc')}
+          className={`px-4 py-2 rounded-md text-sm transition-colors ${
+            order === 'desc'
+              ? 'bg-pink-500 text-white'
+              : 'border border-gray-600 text-gray-300 hover:bg-gray-800'
+          }`}
+        >
+          최신순
+        </button>
+
+        <button
+          onClick={() => setOrder('asc')}
+          className={`px-4 py-2 rounded-md text-sm transition-colors ${
+            order === 'asc'
+              ? 'bg-pink-500 text-white'
+              : 'border border-gray-600 text-gray-300 hover:bg-gray-800'
+          }`}
+        >
+          오래된순
+        </button>
+      </div>
+
+      {debouncedSearch && !isLoading && (
+        <p className="text-sm text-gray-400 mb-4">
+          "<span className="text-pink-400">{debouncedSearch}</span>" 검색 결과{' '}
+          {lps.length === 0 ? '없음' : `${lps.length}건`}
+        </p>
+      )}
+
+      {isLoading && (
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <LpCardSkeleton key={i} />
+          ))}
+        </div>
+      )}
+
+      {isError && (
+        <div className="flex flex-col items-center justify-center gap-4 py-20">
+          <p className="text-gray-500">데이터를 불러오는데 실패했습니다.</p>
+
+          <button
+            onClick={() => refetch()}
+            className="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600"
+          >
+            다시 시도
+          </button>
+        </div>
+      )}
+
+      {!isLoading && !isError && (
+        <>
+          {lps.length === 0 && debouncedSearch ? (
+            <div className="flex flex-col items-center justify-center py-20 text-gray-500">
+              <p>검색 결과가 없습니다.</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              {lps.map((lp) => (
+                <LpCard key={lp.id} lp={lp} />
+              ))}
+            </div>
+          )}
+
+          {isFetchingNextPage && (
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <LpCardSkeleton key={i} />
+              ))}
+            </div>
+          )}
+
+          <div ref={bottomRef} className="h-20" />
+        </>
+      )}
+
+      <button
+        onClick={() => setIsModalOpen(true)}
+        className="fixed bottom-8 right-8 w-14 h-14 bg-pink-500 text-white rounded-full text-2xl shadow-lg hover:bg-pink-600 transition-colors flex items-center justify-center z-40"
+      >
+        +
+      </button>
+
+      {isModalOpen && <CreateLpModal onClose={() => setIsModalOpen(false)} />}
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/mission/chapter08/mission_2/src/pages/LoginPage.tsx b/mission/chapter08/mission_2/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..554d1fae
--- /dev/null
+++ b/mission/chapter08/mission_2/src/pages/LoginPage.tsx
@@ -0,0 +1,114 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
+import { signinSchema, type SigninFormValues } from '../utils/validate';
+import { useAuth } from '../context/AuthContext';
+import { signin } from '../api/auth';
+import Button from '../components/Button';
+import Input from '../components/Input';
+
+const LoginPage = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { login } = useAuth();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<SigninFormValues>({
+    resolver: zodResolver(signinSchema),
+    mode: 'onChange',
+  });
+
+  const from = (location.state as { from?: Location })?.from?.pathname || '/';
+
+  const { mutate: signinMutate, isPending } = useMutation({
+    mutationFn: ({ email, password }: SigninFormValues) =>
+      signin(email, password),
+
+    onSuccess: (data, variables) => {
+      console.log('로그인 응답:', data.data);
+
+      const { name, accessToken, refreshToken, id, userId } = data.data;
+
+      login(
+        {
+          id: Number(id ?? userId),
+          email: variables.email,
+          nickname: name,
+        },
+        accessToken,
+        refreshToken,
+      );
+
+      navigate(from, { replace: true });
+    },
+
+    onError: () => {
+      alert('이메일 또는 비밀번호가 올바르지 않습니다.');
+    },
+  });
+
+  const onSubmit = (data: SigninFormValues) => {
+    signinMutate(data);
+  };
+
+  const onGoogleLogin = () => {
+    window.location.href = import.meta.env.VITE_GOOGLE_LOGIN_URL;
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex items-center justify-center py-4 border-b border-gray-200">
+        <button
+          type="button"
+          onClick={() => navigate('/')}
+          className="absolute left-4 text-gray-600 hover:text-gray-900 transition-colors"
+        >
+          ＜
+        </button>
+        <h1 className="text-lg font-semibold">로그인</h1>
+      </div>
+
+      <div className="flex flex-col items-center justify-center flex-1 gap-4">
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex flex-col gap-3 w-[300px]"
+        >
+          <Input
+            {...register('email')}
+            type="email"
+            placeholder="이메일을 입력해주세요!"
+            hasError={!!errors.email}
+            errorMessage={errors.email?.message}
+          />
+
+          <Input
+            {...register('password')}
+            type="password"
+            placeholder="비밀번호를 입력해주세요!"
+            hasError={!!errors.password}
+            errorMessage={errors.password?.message}
+          />
+
+          <Button type="submit" disabled={!isValid || isPending} variant="primary">
+            {isPending ? '로그인 중...' : '로그인'}
+          </Button>
+
+          <Button type="button" onClick={onGoogleLogin} variant="google">
+            <img
+              src="https://www.google.com/favicon.ico"
+              alt="google"
+              style={{ width: '18px', height: '18px' }}
+            />
+            구글로 로그인
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/pages/LpDetailPage.tsx b/mission/chapter08/mission_2/src/pages/LpDetailPage.tsx
new file mode 100644
index 00000000..e71dfb18
--- /dev/null
+++ b/mission/chapter08/mission_2/src/pages/LpDetailPage.tsx
@@ -0,0 +1,457 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import useLpDetail from '../hooks/useLpDetail';
+import useInfiniteComments from '../hooks/useInfiniteComments';
+import { useAuth } from '../context/AuthContext';
+import {
+  likeLp,
+  unlikeLp,
+  deleteLp,
+  createComment,
+  updateComment,
+  deleteComment,
+} from '../api/lp';
+import CommentSkeleton from '../components/CommentSkeleton';
+import type { Comment } from '../types/lp';
+
+const LpDetailPage = () => {
+  const { lpId } = useParams();
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const [commentOrder, setCommentOrder] = useState<'asc' | 'desc'>('asc');
+  const [commentText, setCommentText] = useState('');
+  const [editingCommentId, setEditingCommentId] = useState<number | null>(null);
+  const [editingContent, setEditingContent] = useState('');
+  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
+
+  const { data, isLoading, isError, refetch } = useLpDetail(Number(lpId));
+
+  const {
+    data: commentsData,
+    isLoading: isCommentsLoading,
+    isFetchingNextPage,
+    fetchNextPage,
+    hasNextPage,
+  } = useInfiniteComments(Number(lpId), commentOrder);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    if (bottomRef.current) observer.observe(bottomRef.current);
+
+    return () => observer.disconnect();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const lp = data?.data;
+
+  const comments: Comment[] =
+    (commentsData as any)?.pages?.flatMap((page: any) => page.data.data) ?? [];
+
+  const { mutate: likeMutate } = useMutation({
+    mutationFn: () => {
+      const alreadyLiked = lp?.likes?.some(
+        (like: any) => Number(like.userId) === Number(user?.id),
+      );
+
+      return alreadyLiked ? unlikeLp(Number(lpId)) : likeLp(Number(lpId));
+    },
+
+    onMutate: async () => {
+      await queryClient.cancelQueries({
+        queryKey: ['lp', Number(lpId)],
+      });
+
+      const previousData = queryClient.getQueryData(['lp', Number(lpId)]);
+
+      queryClient.setQueryData(['lp', Number(lpId)], (old: any) => {
+        if (!old || !user) return old;
+
+        const currentLp = old.data;
+
+        const alreadyLiked = currentLp.likes?.some(
+          (like: any) => Number(like.userId) === Number(user.id),
+        );
+
+        return {
+          ...old,
+          data: {
+            ...currentLp,
+            likes: alreadyLiked
+              ? currentLp.likes.filter(
+                  (like: any) => Number(like.userId) !== Number(user.id),
+                )
+              : [
+                  ...(currentLp.likes ?? []),
+                  {
+                    id: Date.now(),
+                    userId: user.id,
+                    lpId: Number(lpId),
+                  },
+                ],
+          },
+        };
+      });
+
+      return { previousData };
+    },
+
+    onError: (_error, _variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(['lp', Number(lpId)], context.previousData);
+      }
+
+      alert('좋아요 처리에 실패했습니다.');
+    },
+
+    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['lp', Number(lpId)],
+      });
+    },
+  });
+
+  const { mutate: deleteLpMutate, isPending: isDeletingLp } = useMutation({
+    mutationFn: () => deleteLp(Number(lpId)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['lps'] });
+      navigate('/');
+    },
+    onError: () => alert('LP 삭제에 실패했습니다.'),
+  });
+
+  const { mutate: createCommentMutate, isPending: isCreatingComment } =
+    useMutation({
+      mutationFn: (content: string) => createComment(Number(lpId), content),
+      onSuccess: () => {
+        setCommentText('');
+        queryClient.invalidateQueries({
+          queryKey: ['lpComments', Number(lpId)],
+        });
+      },
+      onError: () => alert('댓글 작성에 실패했습니다.'),
+    });
+
+  const { mutate: updateCommentMutate, isPending: isUpdatingComment } =
+    useMutation({
+      mutationFn: ({
+        commentId,
+        content,
+      }: {
+        commentId: number;
+        content: string;
+      }) => updateComment(Number(lpId), commentId, content),
+      onSuccess: () => {
+        setEditingCommentId(null);
+        setEditingContent('');
+        queryClient.invalidateQueries({
+          queryKey: ['lpComments', Number(lpId)],
+        });
+      },
+      onError: () => alert('댓글 수정에 실패했습니다.'),
+    });
+
+  const { mutate: deleteCommentMutate } = useMutation({
+    mutationFn: (commentId: number) => deleteComment(Number(lpId), commentId),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ['lpComments', Number(lpId)] }),
+    onError: () => alert('댓글 삭제에 실패했습니다.'),
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="w-12 h-12 border-4 border-pink-500 border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (isError || !lp) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4">
+        <p className="text-gray-500">데이터를 불러오는데 실패했습니다.</p>
+        <button
+          onClick={() => refetch()}
+          className="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600"
+        >
+          다시 시도
+        </button>
+      </div>
+    );
+  }
+
+  const lpAuthorId = (lp as any).authorId ?? (lp as any).author?.id;
+  const isLpOwner =
+    user && lpAuthorId && Number(user.id) === Number(lpAuthorId);
+
+  const isCommentOwner = (comment: any) => {
+    const commentAuthorId = comment.authorId ?? comment.author?.id;
+    return (
+      user && commentAuthorId && Number(user.id) === Number(commentAuthorId)
+    );
+  };
+
+  const isLiked = lp.likes?.some(
+    (like: any) => Number(like.userId) === Number(user?.id),
+  );
+
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <button
+        onClick={() => navigate('/')}
+        className="mb-6 text-gray-500 hover:text-gray-300 transition-colors"
+      >
+        ← 목록으로
+      </button>
+
+      <img
+        src={lp.thumbnail || 'https://via.placeholder.com/600'}
+        alt={lp.title}
+        className="w-full aspect-square object-cover rounded-lg mb-6"
+      />
+
+      <h1 className="text-2xl font-bold mb-2">{lp.title}</h1>
+
+      <div className="flex items-center gap-4 text-gray-500 text-sm mb-4">
+        <span>{new Date(lp.createdAt).toLocaleDateString('ko-KR')}</span>
+        <span>❤️ {lp.likes?.length ?? 0}</span>
+      </div>
+
+      <div className="flex gap-2 flex-wrap mb-4">
+        {lp.tags?.map((tag) => (
+          <span
+            key={tag.id}
+            className="text-sm bg-pink-100 text-pink-600 px-3 py-1 rounded-full"
+          >
+            #{tag.name}
+          </span>
+        ))}
+      </div>
+
+      <p className="text-gray-700 leading-relaxed mb-8">{lp.content}</p>
+
+      <div className="flex gap-3 mb-10">
+        <button
+          onClick={() => {
+            if (!user) {
+              alert('로그인이 필요합니다.');
+              navigate('/login');
+              return;
+            }
+
+            likeMutate();
+          }}
+          className={`px-6 py-2 rounded-md transition-colors border ${
+            isLiked
+              ? 'bg-red-500 text-white border-red-500 hover:bg-red-600'
+              : 'text-white border-gray-600 hover:bg-red-900/30'
+          }`}
+        >
+          ❤️ {lp.likes?.length ?? 0}
+        </button>
+
+        {isLpOwner && (
+          <>
+            <button
+              onClick={() => navigate(`/lps/${lp.id}/edit`)}
+              className="px-6 py-2 border border-gray-600 text-gray-400 rounded-md hover:bg-gray-800 transition-colors"
+            >
+              ✏️ 수정
+            </button>
+
+            <button
+              onClick={() => {
+                if (confirm('정말 삭제하시겠습니까?')) deleteLpMutate();
+              }}
+              disabled={isDeletingLp}
+              className="px-6 py-2 border border-red-400 text-red-400 rounded-md hover:bg-red-900/30 transition-colors disabled:opacity-50"
+            >
+              🗑️ 삭제
+            </button>
+          </>
+        )}
+      </div>
+
+      <div className="border-t border-gray-700 pt-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-bold">댓글</h2>
+
+          <div className="flex gap-2">
+            <button
+              onClick={() => setCommentOrder('asc')}
+              className={`px-3 py-1 text-sm rounded-md transition-colors ${
+                commentOrder === 'asc'
+                  ? 'bg-white text-black'
+                  : 'border border-gray-600 text-gray-300 hover:bg-gray-800'
+              }`}
+            >
+              오래된순
+            </button>
+
+            <button
+              onClick={() => setCommentOrder('desc')}
+              className={`px-3 py-1 text-sm rounded-md transition-colors ${
+                commentOrder === 'desc'
+                  ? 'bg-white text-black'
+                  : 'border border-gray-600 text-gray-300 hover:bg-gray-800'
+              }`}
+            >
+              최신순
+            </button>
+          </div>
+        </div>
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (!commentText.trim()) return;
+            createCommentMutate(commentText);
+          }}
+          className="flex gap-2 mb-6"
+        >
+          <input
+            type="text"
+            value={commentText}
+            onChange={(e) => setCommentText(e.target.value)}
+            placeholder="댓글을 입력해주세요"
+            className="flex-1 bg-[#1e1e1e] border border-gray-700 rounded-md px-4 py-2 text-sm outline-none focus:border-pink-500 text-white"
+          />
+
+          <button
+            type="submit"
+            disabled={!commentText.trim() || isCreatingComment}
+            className="px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors disabled:bg-gray-800 text-sm"
+          >
+            작성
+          </button>
+        </form>
+
+        {isCommentsLoading && (
+          <div className="flex flex-col gap-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <CommentSkeleton key={i} />
+            ))}
+          </div>
+        )}
+
+        {!isCommentsLoading && (
+          <div className="flex flex-col gap-4">
+            {comments.map((comment: any) => (
+              <div
+                key={comment.id}
+                className="flex flex-col gap-1 border-b border-gray-800 pb-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div className="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-sm font-bold text-gray-300">
+                      {comment.author?.name?.[0] ?? '?'}
+                    </div>
+
+                    <span className="text-sm font-medium text-gray-200">
+                      {comment.author?.name}
+                    </span>
+
+                    <span className="text-xs text-gray-500">
+                      {new Date(comment.createdAt).toLocaleDateString('ko-KR')}
+                    </span>
+                  </div>
+
+                  {isCommentOwner(comment) && (
+                    <div className="relative">
+                      <button
+                        onClick={() =>
+                          setOpenMenuId(
+                            openMenuId === comment.id ? null : comment.id,
+                          )
+                        }
+                        className="text-gray-400 hover:text-white px-2 py-1 rounded transition-colors text-lg leading-none"
+                      >
+                        ⋮
+                      </button>
+
+                      {openMenuId === comment.id && (
+                        <div className="absolute right-0 top-8 bg-[#2a2a2a] border border-gray-700 rounded-lg shadow-xl z-10 overflow-hidden min-w-[90px]">
+                          <button
+                            onClick={() => {
+                              setEditingCommentId(comment.id);
+                              setEditingContent(comment.content);
+                              setOpenMenuId(null);
+                            }}
+                            className="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-colors"
+                          >
+                            ✏️ 수정
+                          </button>
+
+                          <button
+                            onClick={() => {
+                              deleteCommentMutate(comment.id);
+                              setOpenMenuId(null);
+                            }}
+                            className="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-400 hover:bg-gray-700 transition-colors"
+                          >
+                            🗑️ 삭제
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                {editingCommentId === comment.id ? (
+                  <div className="flex gap-2 pl-10 mt-1">
+                    <input
+                      type="text"
+                      value={editingContent}
+                      onChange={(e) => setEditingContent(e.target.value)}
+                      className="flex-1 bg-[#1e1e1e] border border-gray-600 rounded-md px-3 py-1 text-sm text-white outline-none focus:border-pink-500"
+                    />
+
+                    <button
+                      onClick={() => {
+                        if (!editingContent.trim()) return;
+                        updateCommentMutate({
+                          commentId: comment.id,
+                          content: editingContent,
+                        });
+                      }}
+                      disabled={isUpdatingComment}
+                      className="text-green-400 hover:text-green-300 transition-colors px-2"
+                    >
+                      ✓
+                    </button>
+                  </div>
+                ) : (
+                  <p className="text-sm text-gray-400 pl-10">
+                    {comment.content}
+                  </p>
+                )}
+              </div>
+            ))}
+
+            {isFetchingNextPage && (
+              <div className="flex flex-col gap-4">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <CommentSkeleton key={i} />
+                ))}
+              </div>
+            )}
+
+            <div ref={bottomRef} className="h-4" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LpDetailPage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/pages/MyPage.tsx b/mission/chapter08/mission_2/src/pages/MyPage.tsx
new file mode 100644
index 00000000..837cea95
--- /dev/null
+++ b/mission/chapter08/mission_2/src/pages/MyPage.tsx
@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import DeleteConfirmModal from '../components/DeleteConfirmModal';
+import { useMyPage } from '../hooks/useMyPage';
+
+const MyPage = () => {
+  const navigate = useNavigate();
+  const {
+  user,
+  isUpdating,
+  isDeleting,
+  updateProfileMutate,
+  deleteAccountMutate,
+  logoutMutate,
+} = useMyPage();
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [name, setName] = useState(user?.nickname ?? '');
+  const [bio, setBio] = useState('');
+  const [avatar, setAvatar] = useState('');
+
+  
+
+  const handleProfileSubmit = () => {
+  if (!name.trim()) {
+    alert('닉네임을 입력해주세요.');
+    return;
+  }
+
+  updateProfileMutate({
+    name,
+    bio,
+    avatar,
+  });
+
+  setIsEditing(false);
+};
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex items-center justify-center py-4 border-b border-gray-700">
+        <button
+          onClick={() => navigate('/')}
+          className="absolute left-4 text-gray-500 hover:text-gray-300 transition-colors"
+        >
+          ＜
+        </button>
+        <h1 className="text-lg font-semibold text-white">마이페이지</h1>
+      </div>
+
+      <div className="flex flex-col items-center justify-center flex-1 gap-6 p-6">
+        {isEditing ? (
+          <div className="flex flex-col items-center gap-4 w-full max-w-sm">
+            <div className="w-24 h-24 rounded-full bg-gray-700 overflow-hidden flex items-center justify-center border-2 border-dashed border-gray-500">
+              {avatar ? (
+                <img
+                  src={avatar}
+                  alt="avatar"
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <span className="text-4xl">👤</span>
+              )}
+            </div>
+
+            <div className="relative w-full">
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full bg-transparent border border-gray-600 rounded-lg px-4 py-2 text-black outline-none focus:border-pink-500 pr-10"
+                placeholder="닉네임"
+              />
+
+              <button
+                onClick={handleProfileSubmit}
+                disabled={isUpdating || !name.trim()}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-green-400 hover:text-green-300 disabled:opacity-50"
+              >
+                ✓
+              </button>
+            </div>
+
+            <input
+              type="text"
+              value={bio}
+              onChange={(e) => setBio(e.target.value)}
+              className="w-full bg-transparent border border-gray-600 rounded-lg px-4 py-2 text-black outline-none focus:border-pink-500"
+              placeholder="bio"
+            />
+
+            <input
+              type="text"
+              value={avatar}
+              onChange={(e) => setAvatar(e.target.value)}
+              className="w-full bg-transparent border border-gray-600 rounded-lg px-4 py-2 text-black outline-none focus:border-pink-500"
+              placeholder="avatar URL"
+            />
+
+            <p className="text-gray-500 text-sm">{user?.email}</p>
+
+            <button
+              onClick={() => setIsEditing(false)}
+              className="text-gray-500 hover:text-gray-300 text-sm transition-colors"
+            >
+              취소
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className="relative">
+              <div className="w-24 h-24 rounded-full bg-gray-700 overflow-hidden flex items-center justify-center text-4xl">
+                {avatar ? (
+                  <img
+                    src={avatar}
+                    alt="avatar"
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  '👤'
+                )}
+              </div>
+
+              <button
+                onClick={() => {
+                  setName(user?.nickname ?? '');
+                  setIsEditing(true);
+                }}
+                className="absolute -bottom-1 -right-1 w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center text-white hover:bg-gray-500 transition-colors text-sm"
+                title="프로필 수정"
+              >
+                ⚙️
+              </button>
+            </div>
+
+            <div className="flex flex-col items-center gap-1">
+              <h2 className="text-2xl font-bold text-white">
+                {user?.nickname}
+              </h2>
+              <p className="text-gray-400 text-sm">{user?.email}</p>
+            </div>
+
+            <button
+              onClick={() => logoutMutate()}
+              className="px-6 py-2 text-sm border border-gray-600 text-gray-300 rounded-md hover:bg-gray-800 transition-colors"
+            >
+              로그아웃
+            </button>
+
+            <button
+              onClick={() => setShowDeleteModal(true)}
+              className="text-red-500 hover:text-red-400 text-sm transition-colors"
+            >
+              탈퇴하기
+            </button>
+          </>
+        )}
+      </div>
+
+      {showDeleteModal && (
+        <DeleteConfirmModal
+          onConfirm={() => deleteAccountMutate()}
+          onCancel={() => setShowDeleteModal(false)}
+          isPending={isDeleting}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MyPage;
diff --git a/mission/chapter08/mission_2/src/pages/NotFoundPage.tsx b/mission/chapter08/mission_2/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..6f316cb9
--- /dev/null
+++ b/mission/chapter08/mission_2/src/pages/NotFoundPage.tsx
@@ -0,0 +1,5 @@
+const NotFound = () => {
+  return <div className='text-2xl text-red-500 justify-center'>찾을 수 없는 페이지입니다</div>;
+};
+
+export default NotFound;
diff --git a/mission/chapter08/mission_2/src/pages/SignupPage.tsx b/mission/chapter08/mission_2/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..d2f11148
--- /dev/null
+++ b/mission/chapter08/mission_2/src/pages/SignupPage.tsx
@@ -0,0 +1,173 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { signupSchema, type SignupFormValues } from '../utils/validate';
+import axiosInstance from '../api/axios';
+
+const SignupPage = () => {
+  const navigate = useNavigate();
+  const [step, setStep] = useState(1);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showPasswordCheck, setShowPasswordCheck] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<SignupFormValues>({
+    resolver: zodResolver(signupSchema),
+    mode: 'onChange',
+  });
+
+  const onSubmit = async (data: SignupFormValues) => {
+    try {
+      // 서버에 회원가입 요청
+      await axiosInstance.post('/auth/signup', {
+        name: data.name,
+        email: data.email,
+        password: data.password,
+      });
+
+      // 회원가입 성공 → 로그인 페이지로 이동
+      alert('회원가입 성공! 로그인 해주세요 😊');
+      navigate('/login');
+    } catch (error) {
+      console.error('회원가입 실패:', error);
+      alert('회원가입에 실패했습니다.');
+    }
+  };
+
+  const email = watch('email');
+  const password = watch('password');
+  const passwordCheck = watch('passwordCheck');
+  const name = watch('name');
+
+  const isStep1Valid = !errors.email && email?.length > 0;
+  const isStep2Valid =
+    !errors.password &&
+    !errors.passwordCheck &&
+    password?.length > 0 &&
+    passwordCheck?.length > 0 &&
+    password === passwordCheck;
+  const isStep3Valid = !errors.name && name?.length > 0;
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex items-center justify-center py-4 border-b border-gray-200">
+        <button
+          onClick={() => (step === 1 ? navigate('/') : setStep(step - 1))}
+          className="absolute left-4 text-gray-600 hover:text-gray-900 transition-colors"
+        >
+          ＜
+        </button>
+        <h1 className="text-lg font-semibold">회원가입</h1>
+      </div>
+
+      <div className="flex flex-col items-center justify-center flex-1">
+        <div className="flex flex-col gap-3 w-[300px]">
+          {step === 1 && (
+            <>
+              <input
+                {...register('email')}
+                className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                  ${errors.email ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                type="email"
+                placeholder="이메일을 입력해주세요!"
+              />
+              {errors.email && (
+                <div className="text-red-500 text-sm">{errors.email.message}</div>
+              )}
+              <button
+                type="button"
+                onClick={() => setStep(2)}
+                disabled={!isStep1Valid}
+                className="w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300"
+              >
+                다음
+              </button>
+            </>
+          )}
+
+          {step === 2 && (
+            <>
+              <div className="text-gray-500 text-sm">{email}</div>
+              <div className="relative">
+                <input
+                  {...register('password')}
+                  className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                    ${errors.password ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="비밀번호를 입력해주세요!"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"
+                >
+                  {showPassword ? '🙈' : '👁️'}
+                </button>
+              </div>
+              {errors.password && (
+                <div className="text-red-500 text-sm">{errors.password.message}</div>
+              )}
+              <div className="relative">
+                <input
+                  {...register('passwordCheck')}
+                  className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                    ${errors.passwordCheck ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                  type={showPasswordCheck ? 'text' : 'password'}
+                  placeholder="비밀번호를 다시 입력해주세요!"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPasswordCheck(!showPasswordCheck)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"
+                >
+                  {showPasswordCheck ? '🙈' : '👁️'}
+                </button>
+              </div>
+              {passwordCheck?.length > 0 && password !== passwordCheck && (
+                <div className="text-red-500 text-sm">비밀번호가 일치하지 않습니다</div>
+              )}
+              <button
+                type="button"
+                onClick={() => setStep(3)}
+                disabled={!isStep2Valid}
+                className="w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300"
+              >
+                다음
+              </button>
+            </>
+          )}
+
+          {step === 3 && (
+            <>
+              <input
+                {...register('name')}
+                className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                  ${errors.name ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                type="text"
+                placeholder="이름을 입력해주세요!"
+              />
+              {errors.name && (
+                <div className="text-red-500 text-sm">{errors.name.message}</div>
+              )}
+              <button
+                type="button"
+                onClick={handleSubmit(onSubmit)}
+                disabled={!isStep3Valid}
+                className="w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300"
+              >
+                회원가입 완료
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SignupPage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/types/lp.ts b/mission/chapter08/mission_2/src/types/lp.ts
new file mode 100644
index 00000000..30719af3
--- /dev/null
+++ b/mission/chapter08/mission_2/src/types/lp.ts
@@ -0,0 +1,65 @@
+export interface Tag {
+  id: number;
+  name: string;
+}
+
+export interface Like {
+  id: number;
+  userId: number;
+  lpId: number;
+}
+
+export interface Lp {
+  id: number;
+  title: string;
+  content: string;
+  thumbnail: string;
+  published: boolean;
+  createdAt: string;
+  updatedAt: string;
+  tags: Tag[];
+  likes: Like[];
+}
+
+// 댓글 타입
+export interface Comment {
+  id: number;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  lpId: number;
+  authorId: number;
+  author: {
+    id: number;
+    name: string;
+  };
+}
+export interface LpListResponse {
+  status: boolean;
+  statusCode: number;
+  message: string;
+  data: {
+    data: Lp[];
+    nextCursor: number | null;
+    hasNext: boolean;
+  };
+}
+
+export interface LpDetailResponse {
+  status: boolean;
+  statusCode: number;
+  message: string;
+  data: Lp;
+}
+
+// 댓글 목록 응답 타입
+export interface CommentListResponse {
+  status: boolean;
+  statusCode: number;
+  message: string;
+  data: {
+    data: Comment[];
+    nextCursor: number | null;
+    hasNext: boolean;
+  };
+}
\ No newline at end of file
diff --git a/mission/chapter08/mission_2/src/utils/validate.ts b/mission/chapter08/mission_2/src/utils/validate.ts
new file mode 100644
index 00000000..6fddb70b
--- /dev/null
+++ b/mission/chapter08/mission_2/src/utils/validate.ts
@@ -0,0 +1,27 @@
+import { z } from 'zod';
+
+export const signinSchema = z.object({
+  email: z.string().email('올바른 이메일 형식이 아닙니다'),
+  password: z
+    .string()
+    .min(8, '비밀번호는 8자 이상이어야 합니다.')
+    .max(20, '비밀번호는 20자 이하여야 합니다'),
+});
+
+export const signupSchema = z
+  .object({
+    name: z.string().min(1, '이름을 입력해주세요'),
+    email: z.string().email('올바른 이메일 형식이 아닙니다'),
+    password: z
+      .string()
+      .min(8, '비밀번호는 8자 이상이어야 합니다')
+      .max(20, '비밀번호는 20자 이하여야 합니다'),
+    passwordCheck: z.string(),
+  })
+  .refine((data) => data.password === data.passwordCheck, {
+    message: '비밀번호가 일치하지 않습니다',
+    path: ['passwordCheck'],
+  });
+
+export type SigninFormValues = z.infer<typeof signinSchema>;
+export type SignupFormValues = z.infer<typeof signupSchema>;
diff --git a/mission/chapter08/mission_3/src/App.css b/mission/chapter08/mission_3/src/App.css
new file mode 100644
index 00000000..e69de29b
diff --git a/mission/chapter08/mission_3/src/App.tsx b/mission/chapter08/mission_3/src/App.tsx
new file mode 100644
index 00000000..9978d8bd
--- /dev/null
+++ b/mission/chapter08/mission_3/src/App.tsx
@@ -0,0 +1,63 @@
+import './App.css';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import HomeLayout from './layouts/HomeLayout';
+import NotFound from './pages/NotFoundPage';
+import LoginPage from './pages/LoginPage';
+import HomePage from './pages/HomePage';
+import SignupPage from './pages/SignupPage';
+import MyPage from './pages/MyPage';
+import LpDetailPage from './pages/LpDetailPage';
+import ProtectedRoute from './components/ProtectedRoute';
+import GoogleCallbackPage from './pages/GoogleCallBackPage';
+import { AuthProvider } from './context/AuthContext';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <HomeLayout />,
+    errorElement: <NotFound />,
+    children: [
+      { index: true, element: <HomePage /> },
+      {
+        path: 'mypage',
+        element: (
+          <ProtectedRoute>
+            <MyPage />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: 'lps/:lpId', // LP 상세 페이지
+        element: (
+          <ProtectedRoute>
+            <LpDetailPage />
+          </ProtectedRoute>
+        ),
+      },
+    ],
+  },
+  {
+    path: '/login',
+    element: <LoginPage />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: '/signup',
+    element: <SignupPage />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: '/v1/auth/google/callback',
+    element: <GoogleCallbackPage />,
+  },
+]);
+
+function App() {
+  return (
+    <AuthProvider>
+      <RouterProvider router={router} />
+    </AuthProvider>
+  );
+}
+
+export default App;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/api/auth.ts b/mission/chapter08/mission_3/src/api/auth.ts
new file mode 100644
index 00000000..44d9b927
--- /dev/null
+++ b/mission/chapter08/mission_3/src/api/auth.ts
@@ -0,0 +1,13 @@
+import axiosInstance from './axios';
+
+// 로그인
+export const signin = async (email: string, password: string) => {
+  const response = await axiosInstance.post('/auth/signin', { email, password });
+  return response.data;
+};
+
+// 로그아웃
+export const signout = async () => {
+  const response = await axiosInstance.post('/auth/signout');
+  return response.data;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/api/axios.ts b/mission/chapter08/mission_3/src/api/axios.ts
new file mode 100644
index 00000000..41cdc580
--- /dev/null
+++ b/mission/chapter08/mission_3/src/api/axios.ts
@@ -0,0 +1,94 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+});
+
+// 토큰 갱신 중복 방지용 변수
+let isRefreshing = false; // 현재 갱신 중인지
+let refreshSubscribers: ((token: string) => void)[] = []; // 대기 중인 요청들
+
+//갱신 완료 후 대기 중인 요청들한테 새 토큰 전달
+const onRefreshed = (token: string) => {
+  refreshSubscribers.forEach((callback) => callback(token));
+  refreshSubscribers = [];
+};
+
+// 대기열에 요청 추가
+const addRefreshSubscriber = (callback: (token: string) => void) => {
+  refreshSubscribers.push(callback);
+};
+
+// 요청 인터셉터
+axiosInstance.interceptors.request.use((config) => {
+  const accessToken = localStorage.getItem('accessToken');
+
+  if (accessToken) {
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+  return config;
+});
+
+// 응답 인터셉터
+axiosInstance.interceptors.response.use(
+  // 성공 응답은 그냥 통과
+  (response) => response,
+
+  // 실패 응답(에러)은 여기서 처리
+  async (error) => {
+    const originalRequest = error.config;
+
+    // 401 = 토큰 만료
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      // 재시도 표시 → 한 번만 재시도하도록 기록
+      originalRequest._retry = true;
+
+      // 이미 갱신 중이면 대기열에 추가
+      if (isRefreshing) {
+        return new Promise((resolve) => {
+          addRefreshSubscriber((token) => {
+            originalRequest.headers.Authorization = `Bearer ${token}`;
+            resolve(axiosInstance(originalRequest));
+          });
+        });
+      }
+
+      isRefreshing = true; // 갱신 시작
+
+      try {
+        const refreshToken = localStorage.getItem('refreshToken');
+
+        const response = await axios.post(
+          `${import.meta.env.VITE_API_URL}/auth/refresh`, // env로 변경
+          {
+            refresh: refreshToken,
+          },
+        );
+
+        // 새로 받은 accessToken 저장
+        const newAccessToken = response.data.data.accessToken;
+        localStorage.setItem('accessToken', newAccessToken);
+
+        isRefreshing = false;
+        onRefreshed(newAccessToken); // 대기 중인 요청들 처리
+
+        // 실패했던 요청 헤더도 새 토큰으로 교체
+        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+
+        // 실패했던 요청 재시도
+        return axiosInstance(originalRequest);
+      } catch (refreshError) {
+        // refreshToken도 만료 → 강제 로그아웃
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+        localStorage.removeItem('user');
+        window.location.href = '/login';
+        return Promise.reject(refreshError);
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default axiosInstance;
diff --git a/mission/chapter08/mission_3/src/api/lp.ts b/mission/chapter08/mission_3/src/api/lp.ts
new file mode 100644
index 00000000..8f79033b
--- /dev/null
+++ b/mission/chapter08/mission_3/src/api/lp.ts
@@ -0,0 +1,98 @@
+import axiosInstance from './axios';
+import type { CommentListResponse, LpDetailResponse, LpListResponse } from '../types/lp';
+
+// LP 목록 조회
+export const getLps = async (
+  order: 'asc' | 'desc' = 'desc',
+  cursor: number = 0,
+  search: string = '',  // 추가
+): Promise<LpListResponse> => {
+  const response = await axiosInstance.get('/lps', {
+    params: {
+      order,
+      limit: 10,
+      cursor,
+      // 빈 문자열이면 파라미터 자체를 보내지 않음
+      ...(search.trim() && { search: search.trim() }),
+    },
+  });
+  return response.data;
+};
+
+// LP 상세 조회
+export const getLpDetail = async (lpId: number): Promise<LpDetailResponse> => {
+  const response = await axiosInstance.get(`/lps/${lpId}`);
+  return response.data;
+};
+
+// LP 생성
+export const createLp = async (data: {
+  title: string;
+  content: string;
+  thumbnail: string;
+  tags: string[];
+  published: boolean;
+}) => {
+  const response = await axiosInstance.post('/lps', data);
+  return response.data;
+};
+
+// LP 수정
+export const updateLp = async (lpId: number, data: {
+  title?: string;
+  content?: string;
+  thumbnail?: string;
+  tags?: string[];
+  published?: boolean;
+}) => {
+  const response = await axiosInstance.patch(`/lps/${lpId}`, data);
+  return response.data;
+};
+
+// LP 좋아요
+export const likeLp = async (lpId: number) => {
+  const response = await axiosInstance.post(`/lps/${lpId}/likes`);
+  return response.data;
+};
+
+// LP 좋아요 취소
+export const unlikeLp = async (lpId: number) => {
+  const response = await axiosInstance.delete(`/lps/${lpId}/likes`);
+  return response.data;
+};
+
+// LP 삭제
+export const deleteLp = async (lpId: number) => {
+  const response = await axiosInstance.delete(`/lps/${lpId}`);
+  return response.data;
+};
+
+// 댓글 목록 조회
+export const getComments = async (
+  lpId: number,
+  order: 'asc' | 'desc' = 'asc',
+  cursor: number = 0,
+): Promise<CommentListResponse> => {
+  const response = await axiosInstance.get(`/lps/${lpId}/comments`, {
+    params: { order, limit: 10, cursor },
+  });
+  return response.data;
+};
+
+// 댓글 작성
+export const createComment = async (lpId: number, content: string) => {
+  const response = await axiosInstance.post(`/lps/${lpId}/comments`, { content });
+  return response.data;
+};
+
+// 댓글 수정
+export const updateComment = async (lpId: number, commentId: number, content: string) => {
+  const response = await axiosInstance.patch(`/lps/${lpId}/comments/${commentId}`, { content });
+  return response.data;
+};
+
+// 댓글 삭제
+export const deleteComment = async (lpId: number, commentId: number) => {
+  const response = await axiosInstance.delete(`/lps/${lpId}/comments/${commentId}`);
+  return response.data;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/api/upload.ts b/mission/chapter08/mission_3/src/api/upload.ts
new file mode 100644
index 00000000..555268f2
--- /dev/null
+++ b/mission/chapter08/mission_3/src/api/upload.ts
@@ -0,0 +1,11 @@
+import axiosInstance from './axios';
+
+export const uploadImage = async (file: File): Promise<string> => {
+  const formData = new FormData();
+  formData.append('file', file);
+  const response = await axiosInstance.post('/uploads', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+  // 응답에서 imageUrl 반환
+  return response.data.data.imageUrl;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/api/user.ts b/mission/chapter08/mission_3/src/api/user.ts
new file mode 100644
index 00000000..37394720
--- /dev/null
+++ b/mission/chapter08/mission_3/src/api/user.ts
@@ -0,0 +1,23 @@
+import axiosInstance from './axios';
+
+// 내 프로필 조회
+export const getMyProfile = async () => {
+  const response = await axiosInstance.get('/users/me');
+  return response.data;
+};
+
+// 프로필 수정
+export const updateMyProfile = async (data: {
+  name: string;
+  bio: string;
+  avatar: string;
+}) => {
+  const response = await axiosInstance.patch('/users', data);
+  return response.data;
+};
+
+// 회원 탈퇴
+export const deleteMyAccount = async () => {
+  const response = await axiosInstance.delete('/users');
+  return response.data;
+};
diff --git a/mission/chapter08/mission_3/src/assets/hero.png b/mission/chapter08/mission_3/src/assets/hero.png
new file mode 100644
index 00000000..cc51a3d2
Binary files /dev/null and b/mission/chapter08/mission_3/src/assets/hero.png differ
diff --git a/mission/chapter08/mission_3/src/assets/react.svg b/mission/chapter08/mission_3/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/mission/chapter08/mission_3/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/assets/vite.svg b/mission/chapter08/mission_3/src/assets/vite.svg
new file mode 100644
index 00000000..5101b674
--- /dev/null
+++ b/mission/chapter08/mission_3/src/assets/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
diff --git a/mission/chapter08/mission_3/src/components/Button.tsx b/mission/chapter08/mission_3/src/components/Button.tsx
new file mode 100644
index 00000000..3258f21e
--- /dev/null
+++ b/mission/chapter08/mission_3/src/components/Button.tsx
@@ -0,0 +1,35 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  variant?: 'primary' | 'secondary' | 'google';
+}
+
+const Button = ({
+  children,
+  variant = 'primary',
+  className = '',
+  disabled,
+  ...rest
+}: ButtonProps) => {
+  const variantStyles = {
+    primary:
+      'w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300 disabled:cursor-not-allowed',
+    secondary:
+      'px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100 transition-colors cursor-pointer disabled:bg-gray-100 disabled:cursor-not-allowed',
+    google:
+      'w-full flex items-center justify-center gap-2 border border-gray-300 py-3 rounded-md text-lg font-medium hover:bg-gray-100 transition-colors cursor-pointer disabled:bg-gray-100 disabled:cursor-not-allowed',
+  };
+
+  return (
+    <button
+      disabled={disabled}
+      className={`${variantStyles[variant]} ${className}`}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/mission/chapter08/mission_3/src/components/CommentSkeleton.tsx b/mission/chapter08/mission_3/src/components/CommentSkeleton.tsx
new file mode 100644
index 00000000..60c1dec9
--- /dev/null
+++ b/mission/chapter08/mission_3/src/components/CommentSkeleton.tsx
@@ -0,0 +1,14 @@
+const CommentSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-2 animate-pulse">
+      <div className="flex items-center gap-2">
+        <div className="w-8 h-8 bg-gray-200 rounded-full" />
+        <div className="w-24 h-4 bg-gray-200 rounded" />
+      </div>
+      <div className="w-full h-4 bg-gray-200 rounded" />
+      <div className="w-3/4 h-4 bg-gray-200 rounded" />
+    </div>
+  );
+};
+
+export default CommentSkeleton;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/components/CreateLpModal.tsx b/mission/chapter08/mission_3/src/components/CreateLpModal.tsx
new file mode 100644
index 00000000..f317ea07
--- /dev/null
+++ b/mission/chapter08/mission_3/src/components/CreateLpModal.tsx
@@ -0,0 +1,232 @@
+import { useEffect, useRef, useState } from 'react';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { createLp } from '../api/lp';
+import { uploadImage } from '../api/upload';
+
+interface CreateLpModalProps {
+  onClose: () => void;
+}
+
+const CreateLpModal = ({ onClose }: CreateLpModalProps) => {
+  const queryClient = useQueryClient();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [tagInput, setTagInput] = useState('');
+  const [tags, setTags] = useState<string[]>([]);
+  const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  const { mutate: createLpMutate, isPending } = useMutation({
+    mutationFn: async () => {
+      let thumbnailUrl = '';
+
+      if (thumbnailFile) {
+        thumbnailUrl = await uploadImage(thumbnailFile);
+      }
+
+      return createLp({
+        title,
+        content,
+        thumbnail: thumbnailUrl,
+        tags,
+        published: true,
+      });
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['lps'] });
+      onClose();
+    },
+
+    onError: (error) => {
+      console.error('LP 생성 실패:', error);
+      alert('LP 생성에 실패했습니다.');
+    },
+  });
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setThumbnailFile(file);
+
+    setPreviewUrl((prev) => {
+      if (prev?.startsWith('blob:')) {
+        URL.revokeObjectURL(prev);
+      }
+
+      return URL.createObjectURL(file);
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl?.startsWith('blob:')) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
+  const handleAddTag = () => {
+    const trimmed = tagInput.trim();
+
+    if (!trimmed || tags.includes(trimmed)) return;
+
+    setTags((prev) => [...prev, trimmed]);
+    setTagInput('');
+  };
+
+  const handleRemoveTag = (tag: string) => {
+    setTags((prev) => prev.filter((t) => t !== tag));
+  };
+
+  const handleTagKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAddTag();
+    }
+  };
+
+  const handleSubmit = () => {
+    if (!title.trim()) {
+      alert('LP 이름을 입력해주세요.');
+      return;
+    }
+
+    createLpMutate();
+  };
+
+  const handleBackdropClick = () => {
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/60 flex items-center justify-center z-50"
+      onClick={handleBackdropClick}
+    >
+      <div
+        className="bg-[#2a2a2a] rounded-2xl w-[90%] max-w-md p-6 flex flex-col gap-4 relative max-h-[90vh] overflow-y-auto"
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-white text-xl transition-colors"
+        >
+          ✕
+        </button>
+
+        <div
+          className="flex items-center justify-center cursor-pointer"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          {previewUrl ? (
+            <img
+              src={previewUrl}
+              alt="preview"
+              className="w-40 h-40 object-cover rounded-xl border-2 border-pink-500"
+            />
+          ) : (
+            <div className="w-40 h-40 relative flex items-center justify-center">
+              <svg viewBox="0 0 200 200" className="w-full h-full">
+                <circle
+                  cx="100"
+                  cy="100"
+                  r="95"
+                  fill="#111"
+                  stroke="#333"
+                  strokeWidth="4"
+                />
+                <circle cx="100" cy="100" r="65" fill="#222" />
+                <circle cx="100" cy="100" r="40" fill="#1a1a1a" />
+                <circle cx="100" cy="100" r="12" fill="#444" />
+                <circle cx="100" cy="100" r="6" fill="#888" />
+                <circle cx="100" cy="100" r="2" fill="#fff" />
+              </svg>
+
+              <span className="absolute bottom-2 text-xs text-gray-400">
+                클릭해서 사진 추가
+              </span>
+            </div>
+          )}
+        </div>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleFileChange}
+        />
+
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="LP Name"
+          className="bg-[#3a3a3a] text-white placeholder-gray-500 rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-pink-500 transition-all"
+        />
+
+        <input
+          type="text"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder="LP Content"
+          className="bg-[#3a3a3a] text-white placeholder-gray-500 rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-pink-500 transition-all"
+        />
+
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={tagInput}
+            onChange={(e) => setTagInput(e.target.value)}
+            onKeyDown={handleTagKeyDown}
+            placeholder="LP Tag"
+            className="flex-1 bg-[#3a3a3a] text-white placeholder-gray-500 rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-pink-500 transition-all"
+          />
+
+          <button
+            onClick={handleAddTag}
+            className="px-4 py-2 bg-[#3a3a3a] text-white rounded-lg hover:bg-[#4a4a4a] transition-colors border border-gray-600"
+          >
+            Add
+          </button>
+        </div>
+
+        {tags.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {tags.map((tag) => (
+              <span
+                key={tag}
+                className="flex items-center gap-1 bg-[#3a3a3a] text-gray-300 text-sm px-3 py-1 rounded-full"
+              >
+                {tag}
+
+                <button
+                  onClick={() => handleRemoveTag(tag)}
+                  className="text-gray-400 hover:text-white ml-1 transition-colors"
+                >
+                  ✕
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+
+        <button
+          onClick={handleSubmit}
+          disabled={isPending || !title.trim()}
+          className="w-full py-3 rounded-xl text-white font-semibold transition-all
+            bg-pink-500 hover:bg-pink-600 disabled:bg-gray-600 disabled:cursor-not-allowed"
+        >
+          {isPending ? 'LP 생성 중...' : 'Add LP'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CreateLpModal;
diff --git a/mission/chapter08/mission_3/src/components/DeleteConfirmModal.tsx b/mission/chapter08/mission_3/src/components/DeleteConfirmModal.tsx
new file mode 100644
index 00000000..0fa52634
--- /dev/null
+++ b/mission/chapter08/mission_3/src/components/DeleteConfirmModal.tsx
@@ -0,0 +1,33 @@
+interface DeleteConfirmModalProps {
+  onConfirm: () => void;
+  onCancel: () => void;
+  isPending?: boolean;
+}
+
+const DeleteConfirmModal = ({ onConfirm, onCancel, isPending }: DeleteConfirmModalProps) => {
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+      <div className="bg-[#2a2a2a] rounded-2xl w-80 p-6 flex flex-col gap-4">
+        <h2 className="text-white text-lg font-bold">정말 탈퇴하시겠습니까?</h2>
+        <p className="text-gray-400 text-sm">탈퇴 후에는 모든 데이터가 삭제되며 복구할 수 없습니다.</p>
+        <div className="flex gap-3">
+          <button
+            onClick={onCancel}
+            className="flex-1 py-2 rounded-lg border border-gray-600 text-gray-300 hover:bg-gray-700 transition-colors"
+          >
+            아니오
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isPending}
+            className="flex-1 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors disabled:bg-gray-600"
+          >
+            {isPending ? '처리 중...' : '예'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteConfirmModal;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/components/Input.tsx b/mission/chapter08/mission_3/src/components/Input.tsx
new file mode 100644
index 00000000..182c8224
--- /dev/null
+++ b/mission/chapter08/mission_3/src/components/Input.tsx
@@ -0,0 +1,30 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  hasError?: boolean;
+  errorMessage?: string;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ hasError = false, errorMessage, className = '', ...rest }, ref) => {
+    return (
+      <div className="flex flex-col gap-1">
+        <input
+          ref={ref}
+          className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+            ${hasError ? 'border-red-500 bg-red-100' : 'border-gray-300'}
+            ${className}`}
+          {...rest}
+        />
+
+        {hasError && errorMessage && (
+          <p className="text-red-500 text-sm">{errorMessage}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export default Input;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/components/LpCard.tsx b/mission/chapter08/mission_3/src/components/LpCard.tsx
new file mode 100644
index 00000000..58f4f7c1
--- /dev/null
+++ b/mission/chapter08/mission_3/src/components/LpCard.tsx
@@ -0,0 +1,50 @@
+import { useNavigate } from 'react-router-dom';
+import type { Lp } from '../types/lp';
+
+interface LpCardProps {
+  lp: Lp;
+}
+
+const LpCard = ({ lp }: LpCardProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <div
+      onClick={() => navigate(`/lps/${lp.id}`)}
+      className="relative group cursor-pointer rounded-lg overflow-hidden aspect-square bg-gray-200"
+    >
+      {/* 썸네일 */}
+      <img
+        src={lp.thumbnail || 'https://via.placeholder.com/300'}
+        alt={lp.title}
+        className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+      />
+
+      {/* 호버 시 오버레이 */}
+      <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
+        <h3 className="text-white font-bold text-lg truncate">{lp.title}</h3>
+        <div className="flex items-center gap-3 mt-1">
+          <span className="text-gray-300 text-sm">
+            {new Date(lp.createdAt).toLocaleDateString('ko-KR')}
+          </span>
+          <span className="text-gray-300 text-sm">
+            ❤️ {lp.likes?.length ?? 0}
+          </span>
+        </div>
+        {/* 태그 */}
+        <div className="flex gap-1 mt-2 flex-wrap">
+          {lp.tags?.slice(0, 3).map((tag) => (
+            <span
+              key={tag.id}
+              className="text-xs bg-white/20 text-white px-2 py-0.5 rounded-full"
+            >
+              #{tag.name}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LpCard;
diff --git a/mission/chapter08/mission_3/src/components/LpCardSkeleton.tsx b/mission/chapter08/mission_3/src/components/LpCardSkeleton.tsx
new file mode 100644
index 00000000..0bd3ee3d
--- /dev/null
+++ b/mission/chapter08/mission_3/src/components/LpCardSkeleton.tsx
@@ -0,0 +1,7 @@
+const LpCardSkeleton = () => {
+  return (
+    <div className="aspect-square bg-gray-200 rounded-lg animate-pulse" />
+  );
+};
+
+export default LpCardSkeleton;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/components/Navbar.tsx b/mission/chapter08/mission_3/src/components/Navbar.tsx
new file mode 100644
index 00000000..89dd632d
--- /dev/null
+++ b/mission/chapter08/mission_3/src/components/Navbar.tsx
@@ -0,0 +1,78 @@
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import { useAuth } from '../context/AuthContext';
+
+interface NavbarProps {
+  onMenuClick: () => void;
+}
+
+const Navbar = ({ onMenuClick }: NavbarProps) => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+
+  // ── 로그아웃 mutation ──
+  const { mutate: logoutMutate } = useMutation({
+    mutationFn: async () => {
+      await logout();
+    },
+    onSuccess: () => {
+      navigate('/');
+    },
+  });
+
+  return (
+    <nav className="flex items-center justify-between px-6 py-4 border-b border-gray-700">
+      {/* 버거 버튼 - 모바일에서만 보임 */}
+      <button className="md:hidden" onClick={onMenuClick}>
+        <svg width="28" height="28" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+          <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M7.95 11.95h32m-32 12h32m-32 12h32"/>
+        </svg>
+      </button>
+
+      {/* 로고 */}
+      <div
+        className="font-bold text-lg cursor-pointer text-pink-400"
+        onClick={() => navigate('/')}
+      >
+        🎵 LP판
+      </div>
+
+      {/* 버튼 영역 */}
+      <div className="flex gap-2">
+        {user ? (
+          <div className="flex items-center gap-3">
+            <span
+              className="text-gray-400 cursor-pointer hover:text-pink-400 transition-colors text-sm"
+              onClick={() => navigate('/mypage')}
+            >
+              {user.nickname}님 반갑습니다!
+            </span>
+            <button
+              onClick={() => logoutMutate()}
+              className="px-4 py-2 text-sm border border-gray-600 text-gray-300 rounded-md hover:bg-gray-800 transition-colors"
+            >
+              로그아웃
+            </button>
+          </div>
+        ) : (
+          <>
+            <button
+              onClick={() => navigate('/login')}
+              className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100 transition-colors"
+            >
+              로그인
+            </button>
+            <button
+              onClick={() => navigate('/signup')}
+              className="px-4 py-2 text-sm bg-pink-500 text-white rounded-md hover:bg-pink-600 transition-colors"
+            >
+              회원가입
+            </button>
+          </>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/components/ProtectedRoute.tsx b/mission/chapter08/mission_3/src/components/ProtectedRoute.tsx
new file mode 100644
index 00000000..77d974dd
--- /dev/null
+++ b/mission/chapter08/mission_3/src/components/ProtectedRoute.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { user } = useAuth();
+  const location = useLocation(); // 현재 경로 저장
+  const [showModal, setShowModal] = useState(true);
+
+  if (!user) {
+    // 모달 닫고 로그인으로
+    if (!showModal) {
+      return <Navigate to="/login" state={{ from: location }} replace />;
+      // state={{ from: location }} → 원래 가려던 경로 저장!
+    }
+
+    return (
+      // 경고 모달
+      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg p-6 w-80 flex flex-col gap-4">
+          <h2 className="text-lg font-bold">로그인이 필요합니다</h2>
+          <p className="text-gray-500 text-sm">이 페이지는 로그인 후 이용할 수 있습니다.</p>
+          <button
+            onClick={() => setShowModal(false)}
+            className="w-full bg-blue-400 text-white py-2 rounded-md hover:bg-blue-500 transition-colors"
+          >
+            확인
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/components/Sidebar.tsx b/mission/chapter08/mission_3/src/components/Sidebar.tsx
new file mode 100644
index 00000000..76e837f7
--- /dev/null
+++ b/mission/chapter08/mission_3/src/components/Sidebar.tsx
@@ -0,0 +1,175 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import { useAuth } from '../context/AuthContext';
+import { deleteMyAccount } from '../api/user';
+import DeleteConfirmModal from './DeleteConfirmModal';
+
+interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  isStatic?: boolean;
+}
+
+const Sidebar = ({ isOpen, onClose, isStatic = false }: SidebarProps) => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+  const [search, setSearch] = useState('');
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  const { mutate: logoutMutate } = useMutation({
+    mutationFn: async () => {
+      await logout();
+    },
+    onSuccess: () => {
+      if (!isStatic) onClose();
+      navigate('/');
+    },
+  });
+
+  const { mutate: deleteAccountMutate, isPending: isDeleting } = useMutation({
+    mutationFn: deleteMyAccount,
+    onSuccess: () => {
+      logout();
+      navigate('/login');
+    },
+    onError: () => {
+      alert('회원 탈퇴에 실패했습니다.');
+    },
+  });
+
+  const handleNavigate = (path: string) => {
+    navigate(path);
+    if (!isStatic) onClose();
+  };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (search.trim()) {
+      navigate(`/?search=${search}`);
+      if (!isStatic) onClose();
+    }
+  };
+
+  const content = (
+    <div className="flex flex-col h-full p-4 gap-4">
+      {/* 검색창 */}
+      <form onSubmit={handleSearch} className="flex flex-col gap-2">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="검색..."
+          className="border border-gray-600 bg-transparent rounded-md px-3 py-2 text-sm outline-none focus:border-pink-400 text-white"
+        />
+        <button
+          type="submit"
+          className="text-sm bg-pink-500 text-white py-2 rounded-md hover:bg-pink-600 transition-colors"
+        >
+          검색
+        </button>
+      </form>
+
+      <hr className="border-gray-700" />
+
+      {/* 메뉴 */}
+      <nav className="flex flex-col gap-3 flex-1">
+        <button
+          onClick={() => handleNavigate('/')}
+          className="text-left text-gray-400 hover:text-pink-400 transition-colors text-sm font-medium"
+        >
+          홈
+        </button>
+        {user && (
+          <button
+            onClick={() => handleNavigate('/mypage')}
+            className="text-left text-gray-400 hover:text-pink-400 transition-colors text-sm font-medium"
+          >
+            마이페이지
+          </button>
+        )}
+      </nav>
+
+      {/* 하단 로그인/로그아웃 */}
+      <div className="border-t border-gray-700 pt-4">
+        {user ? (
+          <div className="flex flex-col gap-2">
+            <span className="text-gray-400 text-sm">{user.nickname}님</span>
+            <button
+              onClick={() => logoutMutate()}
+              className="text-left text-red-400 hover:text-red-300 text-sm transition-colors"
+            >
+              로그아웃
+            </button>
+            <button
+              onClick={() => setShowDeleteModal(true)}
+              className="text-left text-gray-500 hover:text-red-400 text-sm transition-colors"
+            >
+              탈퇴하기
+            </button>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={() => handleNavigate('/login')}
+              className="text-left text-gray-400 hover:text-pink-400 text-sm transition-colors"
+            >
+              로그인
+            </button>
+            <button
+              onClick={() => handleNavigate('/signup')}
+              className="text-left text-gray-400 hover:text-pink-400 text-sm transition-colors"
+            >
+              회원가입
+            </button>
+          </div>
+        )}
+      </div>
+
+      {showDeleteModal && (
+        <DeleteConfirmModal
+          onConfirm={() => deleteAccountMutate()}
+          onCancel={() => setShowDeleteModal(false)}
+          isPending={isDeleting}
+        />
+      )}
+    </div>
+  );
+
+  // 데스크탑 정적 사이드바
+  if (isStatic) {
+    return <div className="h-full">{content}</div>;
+  }
+
+  // 모바일 드로어 사이드바
+  return (
+    <>
+      {/* 배경 오버레이 - opacity 트랜지션으로 fade in/out */}
+      <div
+        className={`fixed inset-0 bg-black/40 z-40 transition-opacity duration-300
+          ${isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
+        onClick={onClose}
+      />
+
+      {/* 사이드바 패널 - translate-x 트랜지션으로 슬라이드 in/out */}
+      <aside
+        className={`fixed top-0 left-0 h-full w-64 bg-[#1a1a1a] z-50 shadow-lg
+          transition-transform duration-300 ease-in-out
+          ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-gray-700">
+          <h2 className="font-bold text-white">메뉴</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            ✕
+          </button>
+        </div>
+        {content}
+      </aside>
+    </>
+  );
+};
+
+export default Sidebar;
diff --git a/mission/chapter08/mission_3/src/context/AuthContext.tsx b/mission/chapter08/mission_3/src/context/AuthContext.tsx
new file mode 100644
index 00000000..d85baa05
--- /dev/null
+++ b/mission/chapter08/mission_3/src/context/AuthContext.tsx
@@ -0,0 +1,102 @@
+import { createContext, useContext, useState } from 'react';
+import axiosInstance from '../api/axios';
+
+interface User {
+  id: number;
+  email: string;
+  nickname: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  login: (user: User, accessToken: string, refreshToken: string) => void;
+  logout: () => void;
+  updateNickname: (nickname: string) => void;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export const AuthProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [user, setUser] = useState<User | null>(() => {
+    try {
+      const stored = localStorage.getItem('user');
+
+      return stored ? JSON.parse(stored) : null;
+    } catch (error) {
+      console.error('유저 정보 파싱 실패:', error);
+
+      localStorage.removeItem('user');
+
+      return null;
+    }
+  });
+
+  const login = (
+    userData: User,
+    accessToken: string,
+    refreshToken: string
+  ) => {
+    setUser(userData);
+
+    localStorage.setItem('user', JSON.stringify(userData));
+    localStorage.setItem('accessToken', accessToken);
+    localStorage.setItem('refreshToken', refreshToken);
+  };
+
+  const logout = async () => {
+    try {
+      await axiosInstance.post('/auth/signout');
+    } catch (error) {
+      console.error('로그아웃 실패:', error);
+    } finally {
+      setUser(null);
+
+      localStorage.removeItem('user');
+      localStorage.removeItem('accessToken');
+      localStorage.removeItem('refreshToken');
+    }
+  };
+
+  // 닉네임만 즉시 업데이트
+  const updateNickname = (nickname: string) => {
+    setUser((prev) => {
+      if (!prev) return prev;
+
+      const updated = {
+        ...prev,
+        nickname,
+      };
+
+      localStorage.setItem('user', JSON.stringify(updated));
+
+      return updated;
+    });
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        login,
+        logout,
+        updateNickname,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error('AuthProvider 밖에서 사용 불가!');
+  }
+
+  return context;
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/hooks/useDebounce.ts b/mission/chapter08/mission_3/src/hooks/useDebounce.ts
new file mode 100644
index 00000000..f03d70c9
--- /dev/null
+++ b/mission/chapter08/mission_3/src/hooks/useDebounce.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+function useDebounce<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/hooks/useInfiniteComments.ts b/mission/chapter08/mission_3/src/hooks/useInfiniteComments.ts
new file mode 100644
index 00000000..fc05cb01
--- /dev/null
+++ b/mission/chapter08/mission_3/src/hooks/useInfiniteComments.ts
@@ -0,0 +1,18 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { getComments } from '../api/lp';
+import type { CommentListResponse } from '../types/lp';
+
+const useInfiniteComments = (lpId: number, order: 'asc' | 'desc') => {
+  return useInfiniteQuery<CommentListResponse, Error>({
+    queryKey: ['lpComments', lpId, order],
+    queryFn: ({ pageParam }) => getComments(lpId, order, pageParam as number),
+    getNextPageParam: (lastPage) => {
+      return lastPage.data.hasNext ? lastPage.data.nextCursor : undefined;
+    },
+    initialPageParam: 0,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  });
+};
+
+export default useInfiniteComments;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/hooks/useInfiniteLps.ts b/mission/chapter08/mission_3/src/hooks/useInfiniteLps.ts
new file mode 100644
index 00000000..5a12c1cb
--- /dev/null
+++ b/mission/chapter08/mission_3/src/hooks/useInfiniteLps.ts
@@ -0,0 +1,25 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { getLps } from '../api/lp';
+
+const useInfiniteLps = (order: 'asc' | 'desc', search: string = '') => {
+  const trimmedSearch = search.trim();
+
+  return useInfiniteQuery({
+    queryKey: ['search', order, trimmedSearch],
+
+    queryFn: ({ pageParam = 0 }) => getLps(order, pageParam, trimmedSearch),
+
+    getNextPageParam: (lastPage) => {
+      return lastPage.data.hasNext ? lastPage.data.nextCursor : undefined;
+    },
+
+    initialPageParam: 0,
+
+    enabled: true,
+
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  });
+};
+
+export default useInfiniteLps;
diff --git a/mission/chapter08/mission_3/src/hooks/useLocalStorage.ts b/mission/chapter08/mission_3/src/hooks/useLocalStorage.ts
new file mode 100644
index 00000000..c6a3ad1b
--- /dev/null
+++ b/mission/chapter08/mission_3/src/hooks/useLocalStorage.ts
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+function useLocalStorage<T>(key: string, initialValue: T) {
+  // 로컬스토리지에서 값을 가져오는 함수
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      // 저장된 값이 있으면 파싱해서 반환, 없으면 초기값 반환
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(error);
+      return initialValue;
+    }
+  });
+
+  // 값을 저장하는 함수
+  const setValue = (value: T) => {
+    try {
+      setStoredValue(value);
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return [storedValue, setValue] as const;
+}
+
+export default useLocalStorage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/hooks/useLpDetail.ts b/mission/chapter08/mission_3/src/hooks/useLpDetail.ts
new file mode 100644
index 00000000..300c788f
--- /dev/null
+++ b/mission/chapter08/mission_3/src/hooks/useLpDetail.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { getLpDetail } from '../api/lp';
+
+const useLpDetail = (lpId: number) => {
+  return useQuery({
+    queryKey: ['lp', lpId], // lpId 포함
+    queryFn: () => getLpDetail(lpId),
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10,
+  });
+};
+
+export default useLpDetail;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/hooks/useLps.ts b/mission/chapter08/mission_3/src/hooks/useLps.ts
new file mode 100644
index 00000000..731431b6
--- /dev/null
+++ b/mission/chapter08/mission_3/src/hooks/useLps.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { getLps } from '../api/lp';
+
+const useLps = (order: 'asc' | 'desc') => {
+  return useQuery({
+    queryKey: ['lps', order], // order 바뀌면 자동으로 리패치
+    queryFn: () => getLps(order),
+    staleTime: 1000 * 60 * 5, // 5분 동안 캐시 유지
+    gcTime: 1000 * 60 * 10,   // 10분 후 캐시 삭제
+  });
+};
+
+export default useLps;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/hooks/useMyPage.ts b/mission/chapter08/mission_3/src/hooks/useMyPage.ts
new file mode 100644
index 00000000..d48d78c1
--- /dev/null
+++ b/mission/chapter08/mission_3/src/hooks/useMyPage.ts
@@ -0,0 +1,48 @@
+import { useNavigate } from 'react-router-dom';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useAuth } from '../context/AuthContext';
+import { updateMyProfile, deleteMyAccount } from '../api/user';
+
+export const useMyPage = () => {
+  const navigate = useNavigate();
+  const { user, logout, updateNickname } = useAuth();
+  const queryClient = useQueryClient();
+
+  const { mutate: updateProfileMutate, isPending: isUpdating } = useMutation({
+    mutationFn: (profileData: { name: string; bio: string; avatar: string }) =>
+      updateMyProfile(profileData),
+    onMutate: async (profileData) => {
+      const previousNickname = user?.nickname;
+      updateNickname(profileData.name);
+      return { previousNickname };
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['myProfile'] });
+      alert('프로필이 수정되었습니다.');
+    },
+    onError: (_error, _variables, context) => {
+      if (context?.previousNickname) updateNickname(context.previousNickname);
+      alert('프로필 수정에 실패했습니다.');
+    },
+  });
+
+  const { mutate: deleteAccountMutate, isPending: isDeleting } = useMutation({
+    mutationFn: deleteMyAccount,
+    onSuccess: () => { logout(); navigate('/login'); },
+    onError: () => { alert('회원 탈퇴에 실패했습니다.'); },
+  });
+
+  const { mutate: logoutMutate } = useMutation({
+    mutationFn: async () => { await logout(); },
+    onSuccess: () => { navigate('/'); },
+  });
+
+  return {
+    user,
+    isUpdating,
+    isDeleting,
+    updateProfileMutate,
+    deleteAccountMutate,
+    logoutMutate,
+  };
+};
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/hooks/useSidebar.ts b/mission/chapter08/mission_3/src/hooks/useSidebar.ts
new file mode 100644
index 00000000..576902c0
--- /dev/null
+++ b/mission/chapter08/mission_3/src/hooks/useSidebar.ts
@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+
+function useSidebar() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  const toggle = () => setIsOpen((prev) => !prev);
+
+  // ESC 키로 닫기 + 클린업으로 메모리 누수 방지
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        close();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    // 클린업: 컴포넌트 언마운트 시 이벤트 리스너 제거
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  // 사이드바 열릴 때 배경 스크롤 방지
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    // 클린업: 언마운트 시 overflow 초기화
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  return { isOpen, open, close, toggle };
+}
+
+export default useSidebar;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/hooks/useThrottle.ts b/mission/chapter08/mission_3/src/hooks/useThrottle.ts
new file mode 100644
index 00000000..3d3eba6b
--- /dev/null
+++ b/mission/chapter08/mission_3/src/hooks/useThrottle.ts
@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from 'react';
+
+function useThrottle<T>(value: T, interval: number = 1000): T {
+  const [throttledValue, setThrottledValue] = useState<T>(value);
+
+  const lastExecuted = useRef(0);
+  const latestValue = useRef<T>(value);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    latestValue.current = value;
+
+    if (timerRef.current) return;
+
+    const elapsed = Date.now() - lastExecuted.current;
+    const remainingTime = interval - elapsed;
+
+    if (remainingTime <= 0) {
+      setThrottledValue(latestValue.current);
+      lastExecuted.current = Date.now();
+      return;
+    }
+
+    timerRef.current = setTimeout(() => {
+      setThrottledValue(latestValue.current);
+      lastExecuted.current = Date.now();
+      timerRef.current = null;
+    }, remainingTime);
+  }, [value, interval]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  return throttledValue;
+}
+
+export default useThrottle;
diff --git a/mission/chapter08/mission_3/src/index.css b/mission/chapter08/mission_3/src/index.css
new file mode 100644
index 00000000..d4b50785
--- /dev/null
+++ b/mission/chapter08/mission_3/src/index.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
diff --git a/mission/chapter08/mission_3/src/layouts/HomeLayout.tsx b/mission/chapter08/mission_3/src/layouts/HomeLayout.tsx
new file mode 100644
index 00000000..7eaba748
--- /dev/null
+++ b/mission/chapter08/mission_3/src/layouts/HomeLayout.tsx
@@ -0,0 +1,32 @@
+import { Outlet } from 'react-router-dom';
+import Navbar from '../components/Navbar';
+import Sidebar from '../components/Sidebar';
+import useSidebar from '../hooks/useSidebar';
+
+const HomeLayout = () => {
+  const { isOpen, open, close } = useSidebar();
+
+  return (
+    <div className="h-dvh flex flex-col">
+      <Navbar onMenuClick={open} />
+      <div className="flex flex-1 overflow-hidden">
+        {/* 사이드바 - md 이상에서는 항상 보임 */}
+        <aside className="hidden md:flex w-52 border-r border-gray-200 flex-col shrink-0">
+          <Sidebar isOpen={true} isStatic={true} onClose={() => {}} />
+        </aside>
+
+        {/* 메인 콘텐츠 */}
+        <main className="flex-1 overflow-y-auto">
+          <Outlet />
+        </main>
+      </div>
+
+      {/* 모바일 사이드바 */}
+      <div className="md:hidden">
+        <Sidebar isOpen={isOpen} onClose={close} />
+      </div>
+    </div>
+  );
+};
+
+export default HomeLayout;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/main.tsx b/mission/chapter08/mission_3/src/main.tsx
new file mode 100644
index 00000000..896bc7ce
--- /dev/null
+++ b/mission/chapter08/mission_3/src/main.tsx
@@ -0,0 +1,17 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import './index.css';
+import App from './App.tsx';
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  </StrictMode>,
+);
diff --git a/mission/chapter08/mission_3/src/pages/GoogleCallBackPage.tsx b/mission/chapter08/mission_3/src/pages/GoogleCallBackPage.tsx
new file mode 100644
index 00000000..866cfa46
--- /dev/null
+++ b/mission/chapter08/mission_3/src/pages/GoogleCallBackPage.tsx
@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const GoogleCallbackPage = () => {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const accessToken = params.get('accessToken');
+    const refreshToken = params.get('refreshToken');
+    const name = params.get('name') || '';
+    const userId = params.get('userId') || '';
+
+    if (accessToken && refreshToken) {
+      login({ email: userId, nickname: name }, accessToken, refreshToken);
+      navigate('/');
+    } else {
+      navigate('/login');
+    }
+  }, []);
+
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <p className="text-gray-400">로그인 처리 중...</p>
+    </div>
+  );
+};
+
+export default GoogleCallbackPage;
diff --git a/mission/chapter08/mission_3/src/pages/HomePage.tsx b/mission/chapter08/mission_3/src/pages/HomePage.tsx
new file mode 100644
index 00000000..968f2ae5
--- /dev/null
+++ b/mission/chapter08/mission_3/src/pages/HomePage.tsx
@@ -0,0 +1,166 @@
+import { useEffect, useRef, useState } from 'react';
+import useInfiniteLps from '../hooks/useInfiniteLps';
+import useDebounce from '../hooks/useDebounce';
+import useThrottle from '../hooks/useThrottle';
+
+import LpCard from '../components/LpCard';
+import LpCardSkeleton from '../components/LpCardSkeleton';
+import CreateLpModal from '../components/CreateLpModal';
+
+const HomePage = () => {
+  const [order, setOrder] = useState<'asc' | 'desc'>('desc');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const debouncedSearch = useDebounce(search, 300);
+
+  const [scrollTrigger, setScrollTrigger] = useState(0);
+  const throttledScrollTrigger = useThrottle(scrollTrigger, 1000);
+
+  const {
+    data,
+    isLoading,
+    isError,
+    refetch,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteLps(order, debouncedSearch);
+
+  const lps = data?.pages.flatMap((page) => page.data.data) ?? [];
+
+  useEffect(() => {
+    if (isLoading || isError) return;
+    if (!bottomRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          console.log('[Observer] 바닥 감지');
+          setScrollTrigger((prev) => prev + 1);
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(bottomRef.current);
+
+    return () => observer.disconnect();
+  }, [isLoading, isError]);
+
+  useEffect(() => {
+    if (throttledScrollTrigger > 0 && hasNextPage && !isFetchingNextPage) {
+      console.log('[Throttle] 1초에 한 번만 다음 페이지 요청');
+      fetchNextPage();
+    }
+  }, [throttledScrollTrigger, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  return (
+    <div className="relative min-h-full p-6">
+      <div className="mb-4">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="LP 검색..."
+          className="w-full border border-gray-600 bg-transparent rounded-md px-4 py-2 text-sm outline-none focus:border-pink-400 text-white"
+        />
+
+        {search !== debouncedSearch && (
+          <p className="text-xs text-gray-500 mt-1">입력 감지 중...</p>
+        )}
+      </div>
+
+      <div className="flex gap-2 mb-6">
+        <button
+          onClick={() => setOrder('desc')}
+          className={`px-4 py-2 rounded-md text-sm transition-colors ${
+            order === 'desc'
+              ? 'bg-pink-500 text-white'
+              : 'border border-gray-600 text-gray-300 hover:bg-gray-800'
+          }`}
+        >
+          최신순
+        </button>
+
+        <button
+          onClick={() => setOrder('asc')}
+          className={`px-4 py-2 rounded-md text-sm transition-colors ${
+            order === 'asc'
+              ? 'bg-pink-500 text-white'
+              : 'border border-gray-600 text-gray-300 hover:bg-gray-800'
+          }`}
+        >
+          오래된순
+        </button>
+      </div>
+
+      {debouncedSearch && !isLoading && (
+        <p className="text-sm text-gray-400 mb-4">
+          "<span className="text-pink-400">{debouncedSearch}</span>" 검색 결과{' '}
+          {lps.length === 0 ? '없음' : `${lps.length}건`}
+        </p>
+      )}
+
+      {isLoading && (
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <LpCardSkeleton key={i} />
+          ))}
+        </div>
+      )}
+
+      {isError && (
+        <div className="flex flex-col items-center justify-center gap-4 py-20">
+          <p className="text-gray-500">데이터를 불러오는데 실패했습니다.</p>
+
+          <button
+            onClick={() => refetch()}
+            className="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600"
+          >
+            다시 시도
+          </button>
+        </div>
+      )}
+
+      {!isLoading && !isError && (
+        <>
+          {lps.length === 0 && debouncedSearch ? (
+            <div className="flex flex-col items-center justify-center py-20 text-gray-500">
+              <p>검색 결과가 없습니다.</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              {lps.map((lp) => (
+                <LpCard key={lp.id} lp={lp} />
+              ))}
+            </div>
+          )}
+
+          {isFetchingNextPage && (
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <LpCardSkeleton key={i} />
+              ))}
+            </div>
+          )}
+
+          <div ref={bottomRef} className="h-20" />
+        </>
+      )}
+
+      <button
+        onClick={() => setIsModalOpen(true)}
+        className="fixed bottom-8 right-8 w-14 h-14 bg-pink-500 text-white rounded-full text-2xl shadow-lg hover:bg-pink-600 transition-colors flex items-center justify-center z-40"
+      >
+        +
+      </button>
+
+      {isModalOpen && <CreateLpModal onClose={() => setIsModalOpen(false)} />}
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/mission/chapter08/mission_3/src/pages/LoginPage.tsx b/mission/chapter08/mission_3/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..554d1fae
--- /dev/null
+++ b/mission/chapter08/mission_3/src/pages/LoginPage.tsx
@@ -0,0 +1,114 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
+import { signinSchema, type SigninFormValues } from '../utils/validate';
+import { useAuth } from '../context/AuthContext';
+import { signin } from '../api/auth';
+import Button from '../components/Button';
+import Input from '../components/Input';
+
+const LoginPage = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { login } = useAuth();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<SigninFormValues>({
+    resolver: zodResolver(signinSchema),
+    mode: 'onChange',
+  });
+
+  const from = (location.state as { from?: Location })?.from?.pathname || '/';
+
+  const { mutate: signinMutate, isPending } = useMutation({
+    mutationFn: ({ email, password }: SigninFormValues) =>
+      signin(email, password),
+
+    onSuccess: (data, variables) => {
+      console.log('로그인 응답:', data.data);
+
+      const { name, accessToken, refreshToken, id, userId } = data.data;
+
+      login(
+        {
+          id: Number(id ?? userId),
+          email: variables.email,
+          nickname: name,
+        },
+        accessToken,
+        refreshToken,
+      );
+
+      navigate(from, { replace: true });
+    },
+
+    onError: () => {
+      alert('이메일 또는 비밀번호가 올바르지 않습니다.');
+    },
+  });
+
+  const onSubmit = (data: SigninFormValues) => {
+    signinMutate(data);
+  };
+
+  const onGoogleLogin = () => {
+    window.location.href = import.meta.env.VITE_GOOGLE_LOGIN_URL;
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex items-center justify-center py-4 border-b border-gray-200">
+        <button
+          type="button"
+          onClick={() => navigate('/')}
+          className="absolute left-4 text-gray-600 hover:text-gray-900 transition-colors"
+        >
+          ＜
+        </button>
+        <h1 className="text-lg font-semibold">로그인</h1>
+      </div>
+
+      <div className="flex flex-col items-center justify-center flex-1 gap-4">
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex flex-col gap-3 w-[300px]"
+        >
+          <Input
+            {...register('email')}
+            type="email"
+            placeholder="이메일을 입력해주세요!"
+            hasError={!!errors.email}
+            errorMessage={errors.email?.message}
+          />
+
+          <Input
+            {...register('password')}
+            type="password"
+            placeholder="비밀번호를 입력해주세요!"
+            hasError={!!errors.password}
+            errorMessage={errors.password?.message}
+          />
+
+          <Button type="submit" disabled={!isValid || isPending} variant="primary">
+            {isPending ? '로그인 중...' : '로그인'}
+          </Button>
+
+          <Button type="button" onClick={onGoogleLogin} variant="google">
+            <img
+              src="https://www.google.com/favicon.ico"
+              alt="google"
+              style={{ width: '18px', height: '18px' }}
+            />
+            구글로 로그인
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/pages/LpDetailPage.tsx b/mission/chapter08/mission_3/src/pages/LpDetailPage.tsx
new file mode 100644
index 00000000..e71dfb18
--- /dev/null
+++ b/mission/chapter08/mission_3/src/pages/LpDetailPage.tsx
@@ -0,0 +1,457 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import useLpDetail from '../hooks/useLpDetail';
+import useInfiniteComments from '../hooks/useInfiniteComments';
+import { useAuth } from '../context/AuthContext';
+import {
+  likeLp,
+  unlikeLp,
+  deleteLp,
+  createComment,
+  updateComment,
+  deleteComment,
+} from '../api/lp';
+import CommentSkeleton from '../components/CommentSkeleton';
+import type { Comment } from '../types/lp';
+
+const LpDetailPage = () => {
+  const { lpId } = useParams();
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const [commentOrder, setCommentOrder] = useState<'asc' | 'desc'>('asc');
+  const [commentText, setCommentText] = useState('');
+  const [editingCommentId, setEditingCommentId] = useState<number | null>(null);
+  const [editingContent, setEditingContent] = useState('');
+  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
+
+  const { data, isLoading, isError, refetch } = useLpDetail(Number(lpId));
+
+  const {
+    data: commentsData,
+    isLoading: isCommentsLoading,
+    isFetchingNextPage,
+    fetchNextPage,
+    hasNextPage,
+  } = useInfiniteComments(Number(lpId), commentOrder);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    if (bottomRef.current) observer.observe(bottomRef.current);
+
+    return () => observer.disconnect();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const lp = data?.data;
+
+  const comments: Comment[] =
+    (commentsData as any)?.pages?.flatMap((page: any) => page.data.data) ?? [];
+
+  const { mutate: likeMutate } = useMutation({
+    mutationFn: () => {
+      const alreadyLiked = lp?.likes?.some(
+        (like: any) => Number(like.userId) === Number(user?.id),
+      );
+
+      return alreadyLiked ? unlikeLp(Number(lpId)) : likeLp(Number(lpId));
+    },
+
+    onMutate: async () => {
+      await queryClient.cancelQueries({
+        queryKey: ['lp', Number(lpId)],
+      });
+
+      const previousData = queryClient.getQueryData(['lp', Number(lpId)]);
+
+      queryClient.setQueryData(['lp', Number(lpId)], (old: any) => {
+        if (!old || !user) return old;
+
+        const currentLp = old.data;
+
+        const alreadyLiked = currentLp.likes?.some(
+          (like: any) => Number(like.userId) === Number(user.id),
+        );
+
+        return {
+          ...old,
+          data: {
+            ...currentLp,
+            likes: alreadyLiked
+              ? currentLp.likes.filter(
+                  (like: any) => Number(like.userId) !== Number(user.id),
+                )
+              : [
+                  ...(currentLp.likes ?? []),
+                  {
+                    id: Date.now(),
+                    userId: user.id,
+                    lpId: Number(lpId),
+                  },
+                ],
+          },
+        };
+      });
+
+      return { previousData };
+    },
+
+    onError: (_error, _variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(['lp', Number(lpId)], context.previousData);
+      }
+
+      alert('좋아요 처리에 실패했습니다.');
+    },
+
+    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['lp', Number(lpId)],
+      });
+    },
+  });
+
+  const { mutate: deleteLpMutate, isPending: isDeletingLp } = useMutation({
+    mutationFn: () => deleteLp(Number(lpId)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['lps'] });
+      navigate('/');
+    },
+    onError: () => alert('LP 삭제에 실패했습니다.'),
+  });
+
+  const { mutate: createCommentMutate, isPending: isCreatingComment } =
+    useMutation({
+      mutationFn: (content: string) => createComment(Number(lpId), content),
+      onSuccess: () => {
+        setCommentText('');
+        queryClient.invalidateQueries({
+          queryKey: ['lpComments', Number(lpId)],
+        });
+      },
+      onError: () => alert('댓글 작성에 실패했습니다.'),
+    });
+
+  const { mutate: updateCommentMutate, isPending: isUpdatingComment } =
+    useMutation({
+      mutationFn: ({
+        commentId,
+        content,
+      }: {
+        commentId: number;
+        content: string;
+      }) => updateComment(Number(lpId), commentId, content),
+      onSuccess: () => {
+        setEditingCommentId(null);
+        setEditingContent('');
+        queryClient.invalidateQueries({
+          queryKey: ['lpComments', Number(lpId)],
+        });
+      },
+      onError: () => alert('댓글 수정에 실패했습니다.'),
+    });
+
+  const { mutate: deleteCommentMutate } = useMutation({
+    mutationFn: (commentId: number) => deleteComment(Number(lpId), commentId),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ['lpComments', Number(lpId)] }),
+    onError: () => alert('댓글 삭제에 실패했습니다.'),
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="w-12 h-12 border-4 border-pink-500 border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (isError || !lp) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4">
+        <p className="text-gray-500">데이터를 불러오는데 실패했습니다.</p>
+        <button
+          onClick={() => refetch()}
+          className="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600"
+        >
+          다시 시도
+        </button>
+      </div>
+    );
+  }
+
+  const lpAuthorId = (lp as any).authorId ?? (lp as any).author?.id;
+  const isLpOwner =
+    user && lpAuthorId && Number(user.id) === Number(lpAuthorId);
+
+  const isCommentOwner = (comment: any) => {
+    const commentAuthorId = comment.authorId ?? comment.author?.id;
+    return (
+      user && commentAuthorId && Number(user.id) === Number(commentAuthorId)
+    );
+  };
+
+  const isLiked = lp.likes?.some(
+    (like: any) => Number(like.userId) === Number(user?.id),
+  );
+
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <button
+        onClick={() => navigate('/')}
+        className="mb-6 text-gray-500 hover:text-gray-300 transition-colors"
+      >
+        ← 목록으로
+      </button>
+
+      <img
+        src={lp.thumbnail || 'https://via.placeholder.com/600'}
+        alt={lp.title}
+        className="w-full aspect-square object-cover rounded-lg mb-6"
+      />
+
+      <h1 className="text-2xl font-bold mb-2">{lp.title}</h1>
+
+      <div className="flex items-center gap-4 text-gray-500 text-sm mb-4">
+        <span>{new Date(lp.createdAt).toLocaleDateString('ko-KR')}</span>
+        <span>❤️ {lp.likes?.length ?? 0}</span>
+      </div>
+
+      <div className="flex gap-2 flex-wrap mb-4">
+        {lp.tags?.map((tag) => (
+          <span
+            key={tag.id}
+            className="text-sm bg-pink-100 text-pink-600 px-3 py-1 rounded-full"
+          >
+            #{tag.name}
+          </span>
+        ))}
+      </div>
+
+      <p className="text-gray-700 leading-relaxed mb-8">{lp.content}</p>
+
+      <div className="flex gap-3 mb-10">
+        <button
+          onClick={() => {
+            if (!user) {
+              alert('로그인이 필요합니다.');
+              navigate('/login');
+              return;
+            }
+
+            likeMutate();
+          }}
+          className={`px-6 py-2 rounded-md transition-colors border ${
+            isLiked
+              ? 'bg-red-500 text-white border-red-500 hover:bg-red-600'
+              : 'text-white border-gray-600 hover:bg-red-900/30'
+          }`}
+        >
+          ❤️ {lp.likes?.length ?? 0}
+        </button>
+
+        {isLpOwner && (
+          <>
+            <button
+              onClick={() => navigate(`/lps/${lp.id}/edit`)}
+              className="px-6 py-2 border border-gray-600 text-gray-400 rounded-md hover:bg-gray-800 transition-colors"
+            >
+              ✏️ 수정
+            </button>
+
+            <button
+              onClick={() => {
+                if (confirm('정말 삭제하시겠습니까?')) deleteLpMutate();
+              }}
+              disabled={isDeletingLp}
+              className="px-6 py-2 border border-red-400 text-red-400 rounded-md hover:bg-red-900/30 transition-colors disabled:opacity-50"
+            >
+              🗑️ 삭제
+            </button>
+          </>
+        )}
+      </div>
+
+      <div className="border-t border-gray-700 pt-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-bold">댓글</h2>
+
+          <div className="flex gap-2">
+            <button
+              onClick={() => setCommentOrder('asc')}
+              className={`px-3 py-1 text-sm rounded-md transition-colors ${
+                commentOrder === 'asc'
+                  ? 'bg-white text-black'
+                  : 'border border-gray-600 text-gray-300 hover:bg-gray-800'
+              }`}
+            >
+              오래된순
+            </button>
+
+            <button
+              onClick={() => setCommentOrder('desc')}
+              className={`px-3 py-1 text-sm rounded-md transition-colors ${
+                commentOrder === 'desc'
+                  ? 'bg-white text-black'
+                  : 'border border-gray-600 text-gray-300 hover:bg-gray-800'
+              }`}
+            >
+              최신순
+            </button>
+          </div>
+        </div>
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (!commentText.trim()) return;
+            createCommentMutate(commentText);
+          }}
+          className="flex gap-2 mb-6"
+        >
+          <input
+            type="text"
+            value={commentText}
+            onChange={(e) => setCommentText(e.target.value)}
+            placeholder="댓글을 입력해주세요"
+            className="flex-1 bg-[#1e1e1e] border border-gray-700 rounded-md px-4 py-2 text-sm outline-none focus:border-pink-500 text-white"
+          />
+
+          <button
+            type="submit"
+            disabled={!commentText.trim() || isCreatingComment}
+            className="px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors disabled:bg-gray-800 text-sm"
+          >
+            작성
+          </button>
+        </form>
+
+        {isCommentsLoading && (
+          <div className="flex flex-col gap-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <CommentSkeleton key={i} />
+            ))}
+          </div>
+        )}
+
+        {!isCommentsLoading && (
+          <div className="flex flex-col gap-4">
+            {comments.map((comment: any) => (
+              <div
+                key={comment.id}
+                className="flex flex-col gap-1 border-b border-gray-800 pb-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div className="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-sm font-bold text-gray-300">
+                      {comment.author?.name?.[0] ?? '?'}
+                    </div>
+
+                    <span className="text-sm font-medium text-gray-200">
+                      {comment.author?.name}
+                    </span>
+
+                    <span className="text-xs text-gray-500">
+                      {new Date(comment.createdAt).toLocaleDateString('ko-KR')}
+                    </span>
+                  </div>
+
+                  {isCommentOwner(comment) && (
+                    <div className="relative">
+                      <button
+                        onClick={() =>
+                          setOpenMenuId(
+                            openMenuId === comment.id ? null : comment.id,
+                          )
+                        }
+                        className="text-gray-400 hover:text-white px-2 py-1 rounded transition-colors text-lg leading-none"
+                      >
+                        ⋮
+                      </button>
+
+                      {openMenuId === comment.id && (
+                        <div className="absolute right-0 top-8 bg-[#2a2a2a] border border-gray-700 rounded-lg shadow-xl z-10 overflow-hidden min-w-[90px]">
+                          <button
+                            onClick={() => {
+                              setEditingCommentId(comment.id);
+                              setEditingContent(comment.content);
+                              setOpenMenuId(null);
+                            }}
+                            className="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-colors"
+                          >
+                            ✏️ 수정
+                          </button>
+
+                          <button
+                            onClick={() => {
+                              deleteCommentMutate(comment.id);
+                              setOpenMenuId(null);
+                            }}
+                            className="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-400 hover:bg-gray-700 transition-colors"
+                          >
+                            🗑️ 삭제
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                {editingCommentId === comment.id ? (
+                  <div className="flex gap-2 pl-10 mt-1">
+                    <input
+                      type="text"
+                      value={editingContent}
+                      onChange={(e) => setEditingContent(e.target.value)}
+                      className="flex-1 bg-[#1e1e1e] border border-gray-600 rounded-md px-3 py-1 text-sm text-white outline-none focus:border-pink-500"
+                    />
+
+                    <button
+                      onClick={() => {
+                        if (!editingContent.trim()) return;
+                        updateCommentMutate({
+                          commentId: comment.id,
+                          content: editingContent,
+                        });
+                      }}
+                      disabled={isUpdatingComment}
+                      className="text-green-400 hover:text-green-300 transition-colors px-2"
+                    >
+                      ✓
+                    </button>
+                  </div>
+                ) : (
+                  <p className="text-sm text-gray-400 pl-10">
+                    {comment.content}
+                  </p>
+                )}
+              </div>
+            ))}
+
+            {isFetchingNextPage && (
+              <div className="flex flex-col gap-4">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <CommentSkeleton key={i} />
+                ))}
+              </div>
+            )}
+
+            <div ref={bottomRef} className="h-4" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LpDetailPage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/pages/MyPage.tsx b/mission/chapter08/mission_3/src/pages/MyPage.tsx
new file mode 100644
index 00000000..837cea95
--- /dev/null
+++ b/mission/chapter08/mission_3/src/pages/MyPage.tsx
@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import DeleteConfirmModal from '../components/DeleteConfirmModal';
+import { useMyPage } from '../hooks/useMyPage';
+
+const MyPage = () => {
+  const navigate = useNavigate();
+  const {
+  user,
+  isUpdating,
+  isDeleting,
+  updateProfileMutate,
+  deleteAccountMutate,
+  logoutMutate,
+} = useMyPage();
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [name, setName] = useState(user?.nickname ?? '');
+  const [bio, setBio] = useState('');
+  const [avatar, setAvatar] = useState('');
+
+  
+
+  const handleProfileSubmit = () => {
+  if (!name.trim()) {
+    alert('닉네임을 입력해주세요.');
+    return;
+  }
+
+  updateProfileMutate({
+    name,
+    bio,
+    avatar,
+  });
+
+  setIsEditing(false);
+};
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex items-center justify-center py-4 border-b border-gray-700">
+        <button
+          onClick={() => navigate('/')}
+          className="absolute left-4 text-gray-500 hover:text-gray-300 transition-colors"
+        >
+          ＜
+        </button>
+        <h1 className="text-lg font-semibold text-white">마이페이지</h1>
+      </div>
+
+      <div className="flex flex-col items-center justify-center flex-1 gap-6 p-6">
+        {isEditing ? (
+          <div className="flex flex-col items-center gap-4 w-full max-w-sm">
+            <div className="w-24 h-24 rounded-full bg-gray-700 overflow-hidden flex items-center justify-center border-2 border-dashed border-gray-500">
+              {avatar ? (
+                <img
+                  src={avatar}
+                  alt="avatar"
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <span className="text-4xl">👤</span>
+              )}
+            </div>
+
+            <div className="relative w-full">
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full bg-transparent border border-gray-600 rounded-lg px-4 py-2 text-black outline-none focus:border-pink-500 pr-10"
+                placeholder="닉네임"
+              />
+
+              <button
+                onClick={handleProfileSubmit}
+                disabled={isUpdating || !name.trim()}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-green-400 hover:text-green-300 disabled:opacity-50"
+              >
+                ✓
+              </button>
+            </div>
+
+            <input
+              type="text"
+              value={bio}
+              onChange={(e) => setBio(e.target.value)}
+              className="w-full bg-transparent border border-gray-600 rounded-lg px-4 py-2 text-black outline-none focus:border-pink-500"
+              placeholder="bio"
+            />
+
+            <input
+              type="text"
+              value={avatar}
+              onChange={(e) => setAvatar(e.target.value)}
+              className="w-full bg-transparent border border-gray-600 rounded-lg px-4 py-2 text-black outline-none focus:border-pink-500"
+              placeholder="avatar URL"
+            />
+
+            <p className="text-gray-500 text-sm">{user?.email}</p>
+
+            <button
+              onClick={() => setIsEditing(false)}
+              className="text-gray-500 hover:text-gray-300 text-sm transition-colors"
+            >
+              취소
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className="relative">
+              <div className="w-24 h-24 rounded-full bg-gray-700 overflow-hidden flex items-center justify-center text-4xl">
+                {avatar ? (
+                  <img
+                    src={avatar}
+                    alt="avatar"
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  '👤'
+                )}
+              </div>
+
+              <button
+                onClick={() => {
+                  setName(user?.nickname ?? '');
+                  setIsEditing(true);
+                }}
+                className="absolute -bottom-1 -right-1 w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center text-white hover:bg-gray-500 transition-colors text-sm"
+                title="프로필 수정"
+              >
+                ⚙️
+              </button>
+            </div>
+
+            <div className="flex flex-col items-center gap-1">
+              <h2 className="text-2xl font-bold text-white">
+                {user?.nickname}
+              </h2>
+              <p className="text-gray-400 text-sm">{user?.email}</p>
+            </div>
+
+            <button
+              onClick={() => logoutMutate()}
+              className="px-6 py-2 text-sm border border-gray-600 text-gray-300 rounded-md hover:bg-gray-800 transition-colors"
+            >
+              로그아웃
+            </button>
+
+            <button
+              onClick={() => setShowDeleteModal(true)}
+              className="text-red-500 hover:text-red-400 text-sm transition-colors"
+            >
+              탈퇴하기
+            </button>
+          </>
+        )}
+      </div>
+
+      {showDeleteModal && (
+        <DeleteConfirmModal
+          onConfirm={() => deleteAccountMutate()}
+          onCancel={() => setShowDeleteModal(false)}
+          isPending={isDeleting}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MyPage;
diff --git a/mission/chapter08/mission_3/src/pages/NotFoundPage.tsx b/mission/chapter08/mission_3/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..6f316cb9
--- /dev/null
+++ b/mission/chapter08/mission_3/src/pages/NotFoundPage.tsx
@@ -0,0 +1,5 @@
+const NotFound = () => {
+  return <div className='text-2xl text-red-500 justify-center'>찾을 수 없는 페이지입니다</div>;
+};
+
+export default NotFound;
diff --git a/mission/chapter08/mission_3/src/pages/SignupPage.tsx b/mission/chapter08/mission_3/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..d2f11148
--- /dev/null
+++ b/mission/chapter08/mission_3/src/pages/SignupPage.tsx
@@ -0,0 +1,173 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { signupSchema, type SignupFormValues } from '../utils/validate';
+import axiosInstance from '../api/axios';
+
+const SignupPage = () => {
+  const navigate = useNavigate();
+  const [step, setStep] = useState(1);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showPasswordCheck, setShowPasswordCheck] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<SignupFormValues>({
+    resolver: zodResolver(signupSchema),
+    mode: 'onChange',
+  });
+
+  const onSubmit = async (data: SignupFormValues) => {
+    try {
+      // 서버에 회원가입 요청
+      await axiosInstance.post('/auth/signup', {
+        name: data.name,
+        email: data.email,
+        password: data.password,
+      });
+
+      // 회원가입 성공 → 로그인 페이지로 이동
+      alert('회원가입 성공! 로그인 해주세요 😊');
+      navigate('/login');
+    } catch (error) {
+      console.error('회원가입 실패:', error);
+      alert('회원가입에 실패했습니다.');
+    }
+  };
+
+  const email = watch('email');
+  const password = watch('password');
+  const passwordCheck = watch('passwordCheck');
+  const name = watch('name');
+
+  const isStep1Valid = !errors.email && email?.length > 0;
+  const isStep2Valid =
+    !errors.password &&
+    !errors.passwordCheck &&
+    password?.length > 0 &&
+    passwordCheck?.length > 0 &&
+    password === passwordCheck;
+  const isStep3Valid = !errors.name && name?.length > 0;
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex items-center justify-center py-4 border-b border-gray-200">
+        <button
+          onClick={() => (step === 1 ? navigate('/') : setStep(step - 1))}
+          className="absolute left-4 text-gray-600 hover:text-gray-900 transition-colors"
+        >
+          ＜
+        </button>
+        <h1 className="text-lg font-semibold">회원가입</h1>
+      </div>
+
+      <div className="flex flex-col items-center justify-center flex-1">
+        <div className="flex flex-col gap-3 w-[300px]">
+          {step === 1 && (
+            <>
+              <input
+                {...register('email')}
+                className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                  ${errors.email ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                type="email"
+                placeholder="이메일을 입력해주세요!"
+              />
+              {errors.email && (
+                <div className="text-red-500 text-sm">{errors.email.message}</div>
+              )}
+              <button
+                type="button"
+                onClick={() => setStep(2)}
+                disabled={!isStep1Valid}
+                className="w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300"
+              >
+                다음
+              </button>
+            </>
+          )}
+
+          {step === 2 && (
+            <>
+              <div className="text-gray-500 text-sm">{email}</div>
+              <div className="relative">
+                <input
+                  {...register('password')}
+                  className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                    ${errors.password ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="비밀번호를 입력해주세요!"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"
+                >
+                  {showPassword ? '🙈' : '👁️'}
+                </button>
+              </div>
+              {errors.password && (
+                <div className="text-red-500 text-sm">{errors.password.message}</div>
+              )}
+              <div className="relative">
+                <input
+                  {...register('passwordCheck')}
+                  className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                    ${errors.passwordCheck ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                  type={showPasswordCheck ? 'text' : 'password'}
+                  placeholder="비밀번호를 다시 입력해주세요!"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPasswordCheck(!showPasswordCheck)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"
+                >
+                  {showPasswordCheck ? '🙈' : '👁️'}
+                </button>
+              </div>
+              {passwordCheck?.length > 0 && password !== passwordCheck && (
+                <div className="text-red-500 text-sm">비밀번호가 일치하지 않습니다</div>
+              )}
+              <button
+                type="button"
+                onClick={() => setStep(3)}
+                disabled={!isStep2Valid}
+                className="w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300"
+              >
+                다음
+              </button>
+            </>
+          )}
+
+          {step === 3 && (
+            <>
+              <input
+                {...register('name')}
+                className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                  ${errors.name ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                type="text"
+                placeholder="이름을 입력해주세요!"
+              />
+              {errors.name && (
+                <div className="text-red-500 text-sm">{errors.name.message}</div>
+              )}
+              <button
+                type="button"
+                onClick={handleSubmit(onSubmit)}
+                disabled={!isStep3Valid}
+                className="w-full bg-blue-300 text-white py-3 rounded-md text-lg font-medium hover:bg-blue-500 transition-colors cursor-pointer disabled:bg-gray-300"
+              >
+                회원가입 완료
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SignupPage;
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/types/lp.ts b/mission/chapter08/mission_3/src/types/lp.ts
new file mode 100644
index 00000000..30719af3
--- /dev/null
+++ b/mission/chapter08/mission_3/src/types/lp.ts
@@ -0,0 +1,65 @@
+export interface Tag {
+  id: number;
+  name: string;
+}
+
+export interface Like {
+  id: number;
+  userId: number;
+  lpId: number;
+}
+
+export interface Lp {
+  id: number;
+  title: string;
+  content: string;
+  thumbnail: string;
+  published: boolean;
+  createdAt: string;
+  updatedAt: string;
+  tags: Tag[];
+  likes: Like[];
+}
+
+// 댓글 타입
+export interface Comment {
+  id: number;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  lpId: number;
+  authorId: number;
+  author: {
+    id: number;
+    name: string;
+  };
+}
+export interface LpListResponse {
+  status: boolean;
+  statusCode: number;
+  message: string;
+  data: {
+    data: Lp[];
+    nextCursor: number | null;
+    hasNext: boolean;
+  };
+}
+
+export interface LpDetailResponse {
+  status: boolean;
+  statusCode: number;
+  message: string;
+  data: Lp;
+}
+
+// 댓글 목록 응답 타입
+export interface CommentListResponse {
+  status: boolean;
+  statusCode: number;
+  message: string;
+  data: {
+    data: Comment[];
+    nextCursor: number | null;
+    hasNext: boolean;
+  };
+}
\ No newline at end of file
diff --git a/mission/chapter08/mission_3/src/utils/validate.ts b/mission/chapter08/mission_3/src/utils/validate.ts
new file mode 100644
index 00000000..6fddb70b
--- /dev/null
+++ b/mission/chapter08/mission_3/src/utils/validate.ts
@@ -0,0 +1,27 @@
+import { z } from 'zod';
+
+export const signinSchema = z.object({
+  email: z.string().email('올바른 이메일 형식이 아닙니다'),
+  password: z
+    .string()
+    .min(8, '비밀번호는 8자 이상이어야 합니다.')
+    .max(20, '비밀번호는 20자 이하여야 합니다'),
+});
+
+export const signupSchema = z
+  .object({
+    name: z.string().min(1, '이름을 입력해주세요'),
+    email: z.string().email('올바른 이메일 형식이 아닙니다'),
+    password: z
+      .string()
+      .min(8, '비밀번호는 8자 이상이어야 합니다')
+      .max(20, '비밀번호는 20자 이하여야 합니다'),
+    passwordCheck: z.string(),
+  })
+  .refine((data) => data.password === data.passwordCheck, {
+    message: '비밀번호가 일치하지 않습니다',
+    path: ['passwordCheck'],
+  });
+
+export type SigninFormValues = z.infer<typeof signinSchema>;
+export type SignupFormValues = z.infer<typeof signupSchema>;