From c3a40e1d1131263563476ad151d05c4e2555d68e Mon Sep 17 00:00:00 2001
From: Jecheon Ryu <rjc1704@gmail.com>
Date: Mon, 21 Apr 2025 04:23:41 +0900
Subject: [PATCH 1/8] =?UTF-8?q?fetch=20=EA=B0=9C=EC=84=A0=20=EC=8B=A4?=
 =?UTF-8?q?=EC=8A=B5=EC=A4=80=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/LoginPage.js | 43 +++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/LoginPage.js b/src/components/pages/LoginPage.js
index f383b96..6dcb16d 100644
--- a/src/components/pages/LoginPage.js
+++ b/src/components/pages/LoginPage.js
@@ -7,13 +7,16 @@ import Button from "../Button";
 import HorizontalRule from "../HorizontalRule";
 import Link from "next/link";
 import styles from "./LoginPage.module.css";
+import { useRouter } from "next/navigation";
 
 function LoginPage() {
   const [values, setValues] = useState({
     email: "",
     password: "",
   });
-
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const router = useRouter();
   function handleChange(e) {
     const { name, value } = e.target;
 
@@ -25,12 +28,33 @@ function LoginPage() {
 
   async function handleSubmit(e) {
     e.preventDefault();
-    // TODO: 로그인 처리
-    // 1. fetch 를 사용하여 로그인 요청을 보냅니다.
-    // 2. 성공 시 Application 에 쿠키 내 토큰 저장 여부를 확인합니다.
-    // 3. 로딩 상태를 만들고 로딩중일 때는 로그인 버튼을 비활성화 합니다.
-    // 4. 추가로 로딩중일 때는 로그인 버튼텍스트를 "로그인 중..."으로 변경합니다.
-    // 5. 에러 상태를 만들고 로그인 요청이 실패 시 에러 메시지를 로그인버튼 바로 위에 표시합니다.
+    try {
+      setError(null);
+      setLoading(true);
+      const response = await fetch(
+        "https://learn.codeit.kr/api/link-service/auth/login",
+        {
+          method: "POST",
+          credentials: "include",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            email: values.email,
+            password: values.password,
+          }),
+        },
+      );
+      if (!response.ok) {
+        throw new Error("로그인에 실패했습니다.");
+      }
+      alert("로그인에 성공했습니다.");
+      router.push("/me");
+    } catch (error) {
+      setError(error.message);
+    } finally {
+      setLoading(false);
+    }
   }
 
   return (
@@ -61,7 +85,10 @@ function LoginPage() {
           value={values.password}
           onChange={handleChange}
         />
-        <Button className={styles.Button}>로그인</Button>
+        {error && <div className={styles.Error}>{error}</div>}
+        <Button className={styles.Button} disabled={loading}>
+          {loading ? "로그인 중..." : "로그인"}
+        </Button>
         <HorizontalRule className={styles.HorizontalRule}>또는</HorizontalRule>
         <Button
           className={styles.GoogleButton}

From adeb96fb52c6415509fc4e50b4054ea1c2317643 Mon Sep 17 00:00:00 2001
From: Jecheon Ryu <rjc1704@gmail.com>
Date: Mon, 21 Apr 2025 22:34:01 +0900
Subject: [PATCH 2/8] =?UTF-8?q?acontext=20=EC=8B=A4=EC=8A=B5=EC=A4=80?=
 =?UTF-8?q?=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/LoginPage.js    | 19 +-------
 src/components/pages/MyPage.js       | 27 ++---------
 src/components/pages/RegisterPage.js | 21 +--------
 src/lib/auth.js                      | 63 -------------------------
 src/lib/authService.js               | 17 +++++++
 src/lib/fetchClient.js               | 70 ++++++++++++++++++++++++++++
 src/lib/userService.js               |  9 ++++
 7 files changed, 103 insertions(+), 123 deletions(-)
 delete mode 100644 src/lib/auth.js
 create mode 100644 src/lib/authService.js
 create mode 100644 src/lib/fetchClient.js
 create mode 100644 src/lib/userService.js

diff --git a/src/components/pages/LoginPage.js b/src/components/pages/LoginPage.js
index 6dcb16d..a48d882 100644
--- a/src/components/pages/LoginPage.js
+++ b/src/components/pages/LoginPage.js
@@ -8,6 +8,7 @@ import HorizontalRule from "../HorizontalRule";
 import Link from "next/link";
 import styles from "./LoginPage.module.css";
 import { useRouter } from "next/navigation";
+import { authService } from "@/lib/authService";
 
 function LoginPage() {
   const [values, setValues] = useState({
@@ -31,23 +32,7 @@ function LoginPage() {
     try {
       setError(null);
       setLoading(true);
-      const response = await fetch(
-        "https://learn.codeit.kr/api/link-service/auth/login",
-        {
-          method: "POST",
-          credentials: "include",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            email: values.email,
-            password: values.password,
-          }),
-        },
-      );
-      if (!response.ok) {
-        throw new Error("로그인에 실패했습니다.");
-      }
+      await authService.login(values.email, values.password);
       alert("로그인에 성공했습니다.");
       router.push("/me");
     } catch (error) {
diff --git a/src/components/pages/MyPage.js b/src/components/pages/MyPage.js
index fb48807..45cdf11 100644
--- a/src/components/pages/MyPage.js
+++ b/src/components/pages/MyPage.js
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import styles from "./MyPage.module.css";
+import { userService } from "@/lib/userService";
 
 function MyPage() {
   const [user, setUser] = useState(null);
@@ -12,18 +13,7 @@ function MyPage() {
 
   async function getMe() {
     try {
-      const response = await fetch(
-        "https://learn.codeit.kr/api/link-service/users/me",
-        {
-          credentials: "include",
-        },
-      );
-
-      if (!response.ok) {
-        throw new Error("사용자 정보를 가져오는데 실패했습니다.");
-      }
-
-      const userData = await response.json();
+      const userData = await userService.getMe();
       setUser(userData);
     } catch (error) {
       console.error("사용자 정보 가져오기 실패:", error);
@@ -36,18 +26,7 @@ function MyPage() {
 
   async function getMyLinks() {
     try {
-      const response = await fetch(
-        "https://learn.codeit.kr/api/link-service/users/me/links",
-        {
-          credentials: "include",
-        },
-      );
-
-      if (!response.ok) {
-        throw new Error("링크 정보를 가져오는데 실패했습니다.");
-      }
-
-      const linksData = await response.json();
+      const linksData = await userService.getMyLinks();
       setLinks(linksData);
     } catch (error) {
       console.error("링크 정보 가져오기 실패:", error);
diff --git a/src/components/pages/RegisterPage.js b/src/components/pages/RegisterPage.js
index 0d99d83..0c96c7a 100644
--- a/src/components/pages/RegisterPage.js
+++ b/src/components/pages/RegisterPage.js
@@ -8,6 +8,7 @@ import Button from "../Button";
 import Link from "next/link";
 import HorizontalRule from "../HorizontalRule";
 import styles from "./RegisterPage.module.css";
+import { authService } from "@/lib/authService";
 
 function RegisterPage() {
   const [values, setValues] = useState({
@@ -40,25 +41,7 @@ function RegisterPage() {
       setLoading(true);
       setError(null);
 
-      const response = await fetch(
-        "https://learn.codeit.kr/api/link-service/users",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            name: values.name,
-            email: values.email,
-            password: values.password,
-          }),
-        },
-      );
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.message || "회원가입에 실패했습니다.");
-      }
+      await authService.register(values.name, values.email, values.password);
 
       // 회원가입 성공 후 처리
       alert("회원가입에 성공했습니다.");
diff --git a/src/lib/auth.js b/src/lib/auth.js
deleted file mode 100644
index 9e66701..0000000
--- a/src/lib/auth.js
+++ /dev/null
@@ -1,63 +0,0 @@
-// 토큰 갱신 함수
-export async function refreshAccessToken() {
-  try {
-    const response = await fetch(
-      "https://learn.codeit.kr/api/link-service/auth/refresh",
-      {
-        method: "POST",
-        credentials: "include", // 중요: 쿠키를 포함해서 요청
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error("토큰 갱신 실패");
-    }
-
-    return true; // 갱신 성공
-  } catch (error) {
-    console.error("토큰 갱신 오류:", error);
-    return false; // 갱신 실패
-  }
-}
-
-// API 요청 함수 (토큰 만료 시 자동 갱신 시도)
-export async function fetchWithTokenRefresh(url, options = {}) {
-  // 기본 옵션 설정
-  const fetchOptions = {
-    ...options,
-    credentials: "include", // 항상 쿠키 포함
-  };
-
-  // 첫 번째 요청 시도
-  let response = await fetch(url, fetchOptions);
-
-  // 401 Unauthorized 오류 발생 시 토큰 갱신 시도
-  if (response.status === 401) {
-    const refreshSuccess = await refreshAccessToken();
-
-    // 토큰 갱신 성공 시 원래 요청 재시도
-    if (refreshSuccess) {
-      response = await fetch(url, fetchOptions);
-    }
-  }
-
-  return response;
-}
-
-// 로그아웃 함수
-export async function logout() {
-  try {
-    const response = await fetch(
-      "https://learn.codeit.kr/api/link-service/auth/logout",
-      {
-        method: "POST",
-        credentials: "include",
-      },
-    );
-
-    return response.ok;
-  } catch (error) {
-    console.error("로그아웃 오류:", error);
-    return false;
-  }
-}
diff --git a/src/lib/authService.js b/src/lib/authService.js
new file mode 100644
index 0000000..d5a2625
--- /dev/null
+++ b/src/lib/authService.js
@@ -0,0 +1,17 @@
+import { defaultFetch, cookieFetch } from "@/lib/fetchClient";
+
+export const authService = {
+  // 쿠키 인증을 사용하는 로그인
+  login: (email, password) =>
+    cookieFetch("/auth/login", {
+      method: "POST",
+      body: JSON.stringify({ email, password }),
+    }),
+
+  // 회원가입
+  register: (name, email, password) =>
+    defaultFetch("/users", {
+      method: "POST",
+      body: JSON.stringify({ name, email, password }),
+    }),
+};
diff --git a/src/lib/fetchClient.js b/src/lib/fetchClient.js
new file mode 100644
index 0000000..66938d6
--- /dev/null
+++ b/src/lib/fetchClient.js
@@ -0,0 +1,70 @@
+/**
+ * 기본 fetch 클라이언트 - 인증이 필요 없는 일반 요청용
+ */
+export const defaultFetch = async (url, options = {}) => {
+  const baseURL = process.env.NEXT_PUBLIC_API_URL;
+  const defaultOptions = {
+    headers: {
+      "Content-Type": "application/json",
+    },
+    // Next.js 기본 캐싱 활성화
+    cache: "force-cache",
+  };
+
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options,
+    headers: {
+      ...defaultOptions.headers,
+      ...options.headers,
+    },
+  };
+
+  const response = await fetch(`${baseURL}${url}`, mergedOptions);
+
+  if (!response.ok) {
+    throw new Error(`API error: ${response.status}`);
+  }
+
+  return response.json();
+};
+
+/**
+ * 쿠키 인증 fetch 클라이언트
+ */
+export const cookieFetch = async (url, options = {}) => {
+  const baseURL = process.env.NEXT_PUBLIC_API_URL;
+  const defaultOptions = {
+    headers: {
+      "Content-Type": "application/json",
+    },
+    // 쿠키 전송을 위한 설정
+    credentials: "include",
+    // 서버 컴포넌트에서도 매번 재검증
+    cache: "no-store",
+  };
+
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options,
+    headers: {
+      ...defaultOptions.headers,
+      ...options.headers,
+    },
+  };
+
+  const response = await fetch(`${baseURL}${url}`, mergedOptions);
+
+  if (!response.ok) {
+    throw new Error(`API error: ${response.status}`);
+  }
+
+  // 응답 본문이 있는지 확인
+  const contentType = response.headers.get("content-type");
+  if (contentType && contentType.includes("application/json")) {
+    return response.json();
+  }
+
+  // 본문이 없거나 JSON이 아닌 경우 응답 객체 자체 반환
+  return { status: response.status, ok: response.ok };
+};
diff --git a/src/lib/userService.js b/src/lib/userService.js
new file mode 100644
index 0000000..fc1ae69
--- /dev/null
+++ b/src/lib/userService.js
@@ -0,0 +1,9 @@
+import { cookieFetch } from "@/lib/fetchClient";
+
+export const userService = {
+  // 사용자 정보 요청
+  getMe: () => cookieFetch("/users/me"),
+
+  // 사용자 링크 요청
+  getMyLinks: () => cookieFetch("/users/me/links"),
+};

From cc9aeb40e3e54492dd535d80b13af97f05b18bff Mon Sep 17 00:00:00 2001
From: Jecheon Ryu <rjc1704@gmail.com>
Date: Tue, 22 Apr 2025 00:13:45 +0900
Subject: [PATCH 3/8] =?UTF-8?q?context=20=EC=8B=A4=EC=8A=B5=EC=A4=80?=
 =?UTF-8?q?=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/default-avatar.svg         |   5 +
 public/images/upload.svg                 |   4 +
 src/app/(mypage)/me/edit/page.js         | 125 +++++++++++++++++++++++
 src/app/(mypage)/me/edit/page.module.css |  36 +++++++
 src/components/Avatar.js                 |  14 +++
 src/components/Avatar.module.css         |  21 ++++
 src/components/AvatarInput.js            |  63 ++++++++++++
 src/components/AvatarInput.module.css    |  23 +++++
 src/components/TextArea.js               |  13 +++
 src/components/TextArea.module.css       |  10 ++
 10 files changed, 314 insertions(+)
 create mode 100644 public/images/default-avatar.svg
 create mode 100644 public/images/upload.svg
 create mode 100644 src/app/(mypage)/me/edit/page.js
 create mode 100644 src/app/(mypage)/me/edit/page.module.css
 create mode 100644 src/components/Avatar.js
 create mode 100644 src/components/Avatar.module.css
 create mode 100644 src/components/AvatarInput.js
 create mode 100644 src/components/AvatarInput.module.css
 create mode 100644 src/components/TextArea.js
 create mode 100644 src/components/TextArea.module.css

diff --git a/public/images/default-avatar.svg b/public/images/default-avatar.svg
new file mode 100644
index 0000000..32c3bea
--- /dev/null
+++ b/public/images/default-avatar.svg
@@ -0,0 +1,5 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="60" cy="60" r="60" fill="#E2E2E2"/>
+  <path d="M60 60C68.2843 60 75 53.2843 75 45C75 36.7157 68.2843 30 60 30C51.7157 30 45 36.7157 45 45C45 53.2843 51.7157 60 60 60Z" fill="#A0A0A0"/>
+  <path d="M96 98.6667C96 81.8333 80 68.3333 60 68.3333C40 68.3333 24 81.8333 24 98.6667C24 99.4 24.6 100 25.3333 100H94.6667C95.4 100 96 99.4 96 98.6667Z" fill="#A0A0A0"/>
+</svg> 
\ No newline at end of file
diff --git a/public/images/upload.svg b/public/images/upload.svg
new file mode 100644
index 0000000..74ec085
--- /dev/null
+++ b/public/images/upload.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 5.99902V17.999" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6 11.999L12 5.99902L18 11.999" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 
\ No newline at end of file
diff --git a/src/app/(mypage)/me/edit/page.js b/src/app/(mypage)/me/edit/page.js
new file mode 100644
index 0000000..8448d39
--- /dev/null
+++ b/src/app/(mypage)/me/edit/page.js
@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import Label from "@/components/Label";
+import Input from "@/components/Input";
+import Button from "@/components/Button";
+import TextArea from "@/components/TextArea";
+import AvatarInput from "@/components/AvatarInput";
+import styles from "./page.module.css";
+import { userService } from "@/lib/userService";
+
+export default function EditPage() {
+  const [initialAvatar, setInitialAvatar] = useState("");
+  const [values, setValues] = useState({
+    avatar: "",
+    name: "",
+    email: "",
+    bio: "",
+  });
+  const router = useRouter();
+
+  async function getMe() {
+    try {
+      const nextUser = await userService.getMe();
+      const { avatar, name, email, bio } = nextUser;
+      setValues({ name, email, bio });
+      setInitialAvatar(avatar);
+    } catch (error) {
+      console.error("Error fetching user data:", error);
+    }
+  }
+
+  function handleChange(name, value) {
+    setValues((prevValues) => ({
+      ...prevValues,
+      [name]: value,
+    }));
+  }
+
+  function handleInputChange(e) {
+    const { name, value } = e.target;
+    handleChange(name, value);
+  }
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    try {
+      const formData = new FormData();
+      formData.append("avatar", values.avatar);
+      formData.append("name", values.name);
+      formData.append("email", values.email);
+      formData.append("bio", values.bio);
+
+      const res = await fetch("/api/users/me", {
+        method: "PATCH",
+        body: formData,
+      });
+
+      if (!res.ok) {
+        throw new Error("Failed to update profile");
+      }
+
+      router.push("/me");
+    } catch (error) {
+      console.error("Error updating profile:", error);
+    }
+  }
+
+  useEffect(() => {
+    getMe();
+  }, []);
+
+  return (
+    <>
+      <h1 className={styles.Heading}>프로필 편집</h1>
+      <form className={styles.Form} onSubmit={handleSubmit}>
+        <AvatarInput
+          name="avatar"
+          initialAvatar={initialAvatar}
+          className={styles.Input}
+          onChange={handleChange}
+        />
+        <Label className={styles.Label} htmlFor="name">
+          이름
+        </Label>
+        <Input
+          id="name"
+          className={styles.Input}
+          name="name"
+          type="text"
+          placeholder="이름"
+          value={values.name}
+          onChange={handleInputChange}
+        />
+        <Label className={styles.Label} htmlFor="email">
+          이메일
+        </Label>
+        <Input
+          id="email"
+          className={styles.Input}
+          name="email"
+          type="email"
+          placeholder="이메일"
+          value={values.email}
+          onChange={handleInputChange}
+        />
+        <Label className={styles.Label} htmlFor="bio">
+          내 링크 소개
+        </Label>
+        <TextArea
+          id="bio"
+          className={styles.TextArea}
+          name="bio"
+          type="text"
+          maxLength={64}
+          placeholder="아래에 등록한 사이트들과 자신에 대해 간단하게 소개하는 설명을 작성해 주세요!"
+          value={values.bio || ""}
+          onChange={handleInputChange}
+        />
+        <Button className={styles.Button}>적용하기</Button>
+      </form>
+    </>
+  );
+}
diff --git a/src/app/(mypage)/me/edit/page.module.css b/src/app/(mypage)/me/edit/page.module.css
new file mode 100644
index 0000000..b73dca1
--- /dev/null
+++ b/src/app/(mypage)/me/edit/page.module.css
@@ -0,0 +1,36 @@
+.Heading {
+  font-size: 24px;
+  font-weight: 700;
+  margin: 32px 0;
+}
+
+.Label,
+.Input,
+.TextArea,
+.Button,
+.GoogleButton {
+  width: 100%;
+}
+
+.Label {
+  margin: 0;
+}
+
+.Input {
+  margin: 8px 0 24px;
+}
+
+.TextArea {
+  resize: none;
+}
+
+.Button {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 40px 0 32px;
+}
+
+.Form {
+  max-width: 480px;
+  margin: 0 auto;
+}
diff --git a/src/components/Avatar.js b/src/components/Avatar.js
new file mode 100644
index 0000000..344972c
--- /dev/null
+++ b/src/components/Avatar.js
@@ -0,0 +1,14 @@
+import styles from "./Avatar.module.css";
+
+function Avatar({ className = "", size = "medium", src, alt, ...props }) {
+  return (
+    <img
+      className={`${styles.Avatar} ${styles[size]} ${className}`}
+      src={src || "/images/default-avatar.svg"}
+      alt={alt}
+      {...props}
+    />
+  );
+}
+
+export default Avatar;
diff --git a/src/components/Avatar.module.css b/src/components/Avatar.module.css
new file mode 100644
index 0000000..54038eb
--- /dev/null
+++ b/src/components/Avatar.module.css
@@ -0,0 +1,21 @@
+.Avatar {
+  width: 212px;
+  height: 212px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.large {
+  width: 80px;
+  height: 80px;
+}
+
+.medium {
+  width: 54px;
+  height: 54px;
+}
+
+.small {
+  width: 48px;
+  height: 48px;
+}
diff --git a/src/components/AvatarInput.js b/src/components/AvatarInput.js
new file mode 100644
index 0000000..1a000ba
--- /dev/null
+++ b/src/components/AvatarInput.js
@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import styles from "./AvatarInput.module.css";
+import Avatar from "./Avatar";
+import Button from "./Button";
+
+function AvatarInput({ className = "", initialAvatar, name, onChange }) {
+  const [file, setFile] = useState(null);
+  const [avatar, setAvatar] = useState(initialAvatar);
+  const inputRef = useRef();
+
+  function handleChange(e) {
+    const file = e.target.files[0];
+    setFile(file);
+    onChange(name, file);
+  }
+
+  function handleUploadClick() {
+    inputRef.current?.click();
+  }
+
+  useEffect(() => {
+    if (!file) {
+      setAvatar("");
+      return;
+    }
+
+    const blobUrl = URL.createObjectURL(file);
+    setAvatar(blobUrl);
+
+    return () => {
+      URL.revokeObjectURL(blobUrl);
+    };
+  }, [file]);
+
+  useEffect(() => {
+    setAvatar(initialAvatar);
+  }, [initialAvatar]);
+
+  return (
+    <div className={`${styles.AvatarInput} ${className}`}>
+      <Avatar size="large" src={avatar} alt="아바타 이미지 미리보기" />
+      <Button
+        type="button"
+        className={styles.UploadButton}
+        appearance="secondary"
+        onClick={handleUploadClick}
+      >
+        <img src="/images/upload.svg" alt="업로드" />
+        사진 업로드
+      </Button>
+      <input
+        className={styles.HiddenInput}
+        type="file"
+        onChange={handleChange}
+        ref={inputRef}
+      />
+    </div>
+  );
+}
+
+export default AvatarInput;
diff --git a/src/components/AvatarInput.module.css b/src/components/AvatarInput.module.css
new file mode 100644
index 0000000..97c0b86
--- /dev/null
+++ b/src/components/AvatarInput.module.css
@@ -0,0 +1,23 @@
+.AvatarInput {
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+  padding: 24px;
+  gap: 24px;
+}
+
+.UploadButton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.HiddenInput {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
diff --git a/src/components/TextArea.js b/src/components/TextArea.js
new file mode 100644
index 0000000..418ce04
--- /dev/null
+++ b/src/components/TextArea.js
@@ -0,0 +1,13 @@
+import styles from "./TextArea.module.css";
+
+function TextArea({ className = "", value = "", ...rest }) {
+  return (
+    <textarea
+      className={`${styles.TextArea} ${className}`}
+      value={value}
+      {...rest}
+    />
+  );
+}
+
+export default TextArea;
diff --git a/src/components/TextArea.module.css b/src/components/TextArea.module.css
new file mode 100644
index 0000000..62ef571
--- /dev/null
+++ b/src/components/TextArea.module.css
@@ -0,0 +1,10 @@
+.TextArea {
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+  color: #000000;
+}
+
+.TextArea::placeholder {
+  color: #8c8c8c;
+}

From e31e0d5b91bf930fadb1f9d4dffe8776a11d75c6 Mon Sep 17 00:00:00 2001
From: Jecheon Ryu <rjc1704@gmail.com>
Date: Tue, 22 Apr 2025 01:39:15 +0900
Subject: [PATCH 4/8] =?UTF-8?q?=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89?=
 =?UTF-8?q?=ED=8A=B8=20=EC=8B=A4=EC=8A=B5=EC=A4=80=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/plus-square.svg          |  5 ++
 src/app/(mypage)/me/edit/page.js       | 40 ++++-------
 src/app/(mypage)/me/page.js            | 99 +++++++++++++++++++++++++-
 src/app/(mypage)/me/page.module.css    | 76 ++++++++++++++++++++
 src/app/layout.js                      |  5 +-
 src/app/providers.jsx                  |  6 ++
 src/components/Avatar.js               |  1 +
 src/components/AvatarInput.js          |  6 +-
 src/components/Card.js                 | 13 ++++
 src/components/Card.module.css         |  7 ++
 src/components/Link.js                 | 10 +--
 src/components/LinkCard.js             | 50 +++++++++++++
 src/components/LinkCard.module.css     | 74 +++++++++++++++++++
 src/components/pages/LoginPage.js      |  7 +-
 src/components/pages/MyPage.js         | 42 ++++++-----
 src/components/pages/MyPage.module.css | 24 +++++++
 src/components/pages/RegisterPage.js   |  3 +-
 src/lib/fetchClient.js                 |  1 +
 src/lib/userService.js                 | 41 +++++++++++
 src/providers/AuthProvider.jsx         | 53 ++++++++++++++
 20 files changed, 506 insertions(+), 57 deletions(-)
 create mode 100644 public/images/plus-square.svg
 create mode 100644 src/app/(mypage)/me/page.module.css
 create mode 100644 src/app/providers.jsx
 create mode 100644 src/components/Card.js
 create mode 100644 src/components/Card.module.css
 create mode 100644 src/components/LinkCard.js
 create mode 100644 src/components/LinkCard.module.css
 create mode 100644 src/providers/AuthProvider.jsx

diff --git a/public/images/plus-square.svg b/public/images/plus-square.svg
new file mode 100644
index 0000000..c99ec79
--- /dev/null
+++ b/public/images/plus-square.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="3" width="18" height="18" rx="2" stroke="#7000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 8V16" stroke="#7000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 12H16" stroke="#7000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 
\ No newline at end of file
diff --git a/src/app/(mypage)/me/edit/page.js b/src/app/(mypage)/me/edit/page.js
index 8448d39..59e5f0a 100644
--- a/src/app/(mypage)/me/edit/page.js
+++ b/src/app/(mypage)/me/edit/page.js
@@ -8,28 +8,29 @@ import Button from "@/components/Button";
 import TextArea from "@/components/TextArea";
 import AvatarInput from "@/components/AvatarInput";
 import styles from "./page.module.css";
-import { userService } from "@/lib/userService";
+import { useAuth } from "@/providers/AuthProvider";
 
 export default function EditPage() {
-  const [initialAvatar, setInitialAvatar] = useState("");
   const [values, setValues] = useState({
     avatar: "",
     name: "",
     email: "",
     bio: "",
   });
+  const { updateUser, user } = useAuth();
   const router = useRouter();
 
-  async function getMe() {
-    try {
-      const nextUser = await userService.getMe();
-      const { avatar, name, email, bio } = nextUser;
-      setValues({ name, email, bio });
-      setInitialAvatar(avatar);
-    } catch (error) {
-      console.error("Error fetching user data:", error);
+  useEffect(() => {
+    if (user) {
+      const { avatar, name, email, bio } = user;
+      setValues({
+        avatar: avatar || "",
+        name: name || "",
+        email: email || "",
+        bio: bio || "",
+      });
     }
-  }
+  }, [user]);
 
   function handleChange(name, value) {
     setValues((prevValues) => ({
@@ -52,14 +53,7 @@ export default function EditPage() {
       formData.append("email", values.email);
       formData.append("bio", values.bio);
 
-      const res = await fetch("/api/users/me", {
-        method: "PATCH",
-        body: formData,
-      });
-
-      if (!res.ok) {
-        throw new Error("Failed to update profile");
-      }
+      await updateUser(formData);
 
       router.push("/me");
     } catch (error) {
@@ -67,17 +61,13 @@ export default function EditPage() {
     }
   }
 
-  useEffect(() => {
-    getMe();
-  }, []);
-
   return (
     <>
       <h1 className={styles.Heading}>프로필 편집</h1>
       <form className={styles.Form} onSubmit={handleSubmit}>
         <AvatarInput
           name="avatar"
-          initialAvatar={initialAvatar}
+          initialAvatar={values.avatar}
           className={styles.Input}
           onChange={handleChange}
         />
@@ -115,7 +105,7 @@ export default function EditPage() {
           type="text"
           maxLength={64}
           placeholder="아래에 등록한 사이트들과 자신에 대해 간단하게 소개하는 설명을 작성해 주세요!"
-          value={values.bio || ""}
+          value={values.bio}
           onChange={handleInputChange}
         />
         <Button className={styles.Button}>적용하기</Button>
diff --git a/src/app/(mypage)/me/page.js b/src/app/(mypage)/me/page.js
index d62aff2..8bc7c25 100644
--- a/src/app/(mypage)/me/page.js
+++ b/src/app/(mypage)/me/page.js
@@ -1,5 +1,98 @@
-import MyPage from "@/components/pages/MyPage";
+"use client";
 
-export default function Me() {
-  return <MyPage />;
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import styles from "./page.module.css";
+import { userService } from "@/lib/userService";
+import { useAuth } from "@/providers/AuthProvider";
+import Avatar from "@/components/Avatar";
+import Button from "@/components/Button";
+import Card from "@/components/Card";
+import NextLink from "@/components/Link";
+import HorizontalRule from "@/components/HorizontalRule";
+import LinkCard from "@/components/LinkCard";
+import Link from "next/link";
+
+export default function MyPage() {
+  const { user } = useAuth();
+  const [links, setLinks] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const router = useRouter();
+
+  async function getMyLinks() {
+    try {
+      const linksData = await userService.getMyLinks();
+      setLinks(linksData);
+    } catch (error) {
+      console.error("링크 정보 가져오기 실패:", error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleEditClick(linkId) {
+    router.push(`/me/links/${linkId}/edit`);
+  }
+
+  async function handleDeleteClick(linkId) {
+    try {
+      await userService.deleteLink(linkId);
+      setLinks((prevLinks) => prevLinks.filter((link) => link.id !== linkId));
+    } catch (error) {
+      console.error("링크 삭제 실패:", error);
+    }
+  }
+
+  useEffect(() => {
+    getMyLinks();
+  }, []);
+
+  if (loading) {
+    return <div>로딩 중...</div>;
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <>
+      <header className={styles.Header}>
+        <Card className={styles.Profile}>
+          <Avatar src={user.avatar} alt="프로필 이미지" />
+          <div className={styles.Values}>
+            <div className={styles.Name}>{user.name}</div>
+            <div className={styles.Email}>{user.email}</div>
+          </div>
+          <Button className={styles.EditButton} as={Link} href="/me/edit">
+            편집
+          </Button>
+        </Card>
+        <p className={styles.Bio}>
+          {user.bio ??
+            "아래에 등록한 사이트들과 자신에 대해 간단하게 소개하는 설명을 작성해 주세요!"}
+        </p>
+      </header>
+      <HorizontalRule className={styles.HorizontalRule} />
+      <ul className={styles.LinkList}>
+        {links.map((link) => (
+          <li className={styles.LinkItem} key={link.id}>
+            <LinkCard
+              title={link.title}
+              url={link.url}
+              thumbUrl={link.thumbUrl}
+              onClick={() => handleEditClick(link.id)}
+              onDelete={() => handleDeleteClick(link.id)}
+            />
+          </li>
+        ))}
+        <li>
+          <NextLink className={styles.CreateLink} href="/me/links/create">
+            <img src="/images/plus-square.svg" alt="더하기 아이콘" />
+            링크 추가하기
+          </NextLink>
+        </li>
+      </ul>
+    </>
+  );
 }
diff --git a/src/app/(mypage)/me/page.module.css b/src/app/(mypage)/me/page.module.css
new file mode 100644
index 0000000..7d57b0a
--- /dev/null
+++ b/src/app/(mypage)/me/page.module.css
@@ -0,0 +1,76 @@
+.Header {
+  margin-bottom: 24px;
+}
+
+.Profile {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.Values {
+  flex: 1;
+  margin: 0 16px;
+}
+
+.Name {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.Email {
+  font-size: 14px;
+  color: #8c8c8c;
+}
+
+.EditButton {
+  flex-shrink: 0;
+}
+
+.Bio {
+  font-size: 16px;
+  color: #333333;
+  margin: 16px 0;
+  line-height: 1.5;
+}
+
+.HorizontalRule {
+  margin: 32px 0;
+}
+
+.LinkList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
+}
+
+.LinkItem {
+  position: relative;
+}
+
+.CreateLink {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  border: 2px dashed #d9d9d9;
+  text-decoration: none;
+  color: #7000ff;
+  font-weight: 600;
+  transition: background-color 0.2s;
+}
+
+.CreateLink:hover {
+  background-color: #f0f0f0;
+}
+
+.CreateLink img {
+  margin-bottom: 8px;
+}
diff --git a/src/app/layout.js b/src/app/layout.js
index e35a28c..954a5b5 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,5 +1,6 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
+import Providers from "./providers";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -11,7 +12,9 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="ko">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }
diff --git a/src/app/providers.jsx b/src/app/providers.jsx
new file mode 100644
index 0000000..dd9bff4
--- /dev/null
+++ b/src/app/providers.jsx
@@ -0,0 +1,6 @@
+import React from "react";
+import AuthProvider from "@/providers/AuthProvider";
+
+export default function Providers({ children }) {
+  return <AuthProvider>{children}</AuthProvider>;
+}
diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index 344972c..a90e9f2 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -1,6 +1,7 @@
 import styles from "./Avatar.module.css";
 
 function Avatar({ className = "", size = "medium", src, alt, ...props }) {
+  console.log("src", src);
   return (
     <img
       className={`${styles.Avatar} ${styles[size]} ${className}`}
diff --git a/src/components/AvatarInput.js b/src/components/AvatarInput.js
index 1a000ba..0910c38 100644
--- a/src/components/AvatarInput.js
+++ b/src/components/AvatarInput.js
@@ -12,6 +12,7 @@ function AvatarInput({ className = "", initialAvatar, name, onChange }) {
 
   function handleChange(e) {
     const file = e.target.files[0];
+    console.log("file", file);
     setFile(file);
     onChange(name, file);
   }
@@ -27,6 +28,7 @@ function AvatarInput({ className = "", initialAvatar, name, onChange }) {
     }
 
     const blobUrl = URL.createObjectURL(file);
+    console.log("blobUrl", blobUrl);
     setAvatar(blobUrl);
 
     return () => {
@@ -34,10 +36,6 @@ function AvatarInput({ className = "", initialAvatar, name, onChange }) {
     };
   }, [file]);
 
-  useEffect(() => {
-    setAvatar(initialAvatar);
-  }, [initialAvatar]);
-
   return (
     <div className={`${styles.AvatarInput} ${className}`}>
       <Avatar size="large" src={avatar} alt="아바타 이미지 미리보기" />
diff --git a/src/components/Card.js b/src/components/Card.js
new file mode 100644
index 0000000..b284168
--- /dev/null
+++ b/src/components/Card.js
@@ -0,0 +1,13 @@
+"use client";
+
+import styles from "./Card.module.css";
+
+function Card({ className = "", children, ...props }) {
+  return (
+    <div className={`${styles.Card} ${className}`} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export default Card;
diff --git a/src/components/Card.module.css b/src/components/Card.module.css
new file mode 100644
index 0000000..7e2f061
--- /dev/null
+++ b/src/components/Card.module.css
@@ -0,0 +1,7 @@
+.Card {
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 16px;
+  overflow: hidden;
+}
diff --git a/src/components/Link.js b/src/components/Link.js
index 831c225..7a26796 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -1,14 +1,14 @@
 "use client";
 
+import Link from "next/link";
 import React from "react";
-import NextLink from "next/link";
 
-function Link({ children, href, ...rest }) {
+function NextLink({ children, href = "/", ...rest }) {
   return (
-    <NextLink href={href} {...rest}>
+    <Link href={href} {...rest}>
       {children}
-    </NextLink>
+    </Link>
   );
 }
 
-export default Link;
+export default NextLink;
diff --git a/src/components/LinkCard.js b/src/components/LinkCard.js
new file mode 100644
index 0000000..c5e045d
--- /dev/null
+++ b/src/components/LinkCard.js
@@ -0,0 +1,50 @@
+"use client";
+
+import styles from "./LinkCard.module.css";
+import Button from "./Button";
+
+function LinkCard({ title, url, thumbUrl, onClick, onDelete }) {
+  function handleClick(e) {
+    e.preventDefault();
+    onClick?.();
+  }
+
+  function handleDeleteClick(e) {
+    e.stopPropagation();
+    onDelete?.();
+  }
+
+  return (
+    <a
+      className={styles.LinkCard}
+      href={url}
+      target="_blank"
+      rel="noreferrer noopener"
+      onClick={handleClick}
+    >
+      {thumbUrl ? (
+        <div
+          className={styles.Thumb}
+          style={{ backgroundImage: `url(${thumbUrl})` }}
+        />
+      ) : (
+        <div className={styles.EmptyThumb}>이미지 없음</div>
+      )}
+      <div className={styles.Info}>
+        <div className={styles.Title}>{title}</div>
+        <div className={styles.Url}>{url}</div>
+      </div>
+      {onDelete && (
+        <Button
+          className={styles.DeleteButton}
+          onClick={handleDeleteClick}
+          type="button"
+        >
+          삭제
+        </Button>
+      )}
+    </a>
+  );
+}
+
+export default LinkCard;
diff --git a/src/components/LinkCard.module.css b/src/components/LinkCard.module.css
new file mode 100644
index 0000000..727f2b1
--- /dev/null
+++ b/src/components/LinkCard.module.css
@@ -0,0 +1,74 @@
+.LinkCard {
+  display: flex;
+  background-color: white;
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+  padding: 20px;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  position: relative;
+}
+
+.Thumb {
+  width: 120px;
+  height: 80px;
+  background-color: #eeeeee;
+  border-radius: 4px;
+  background-size: cover;
+  background-position: center;
+  flex-shrink: 0;
+  margin-right: 16px;
+}
+
+.EmptyThumb {
+  width: 120px;
+  height: 80px;
+  background-color: #eeeeee;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 14px;
+  flex-shrink: 0;
+  margin-right: 16px;
+}
+
+.Info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.Title {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.Url {
+  font-size: 14px;
+  color: #666666;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.DeleteButton {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: #ff6b6b;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
diff --git a/src/components/pages/LoginPage.js b/src/components/pages/LoginPage.js
index a48d882..5d016b6 100644
--- a/src/components/pages/LoginPage.js
+++ b/src/components/pages/LoginPage.js
@@ -8,7 +8,7 @@ import HorizontalRule from "../HorizontalRule";
 import Link from "next/link";
 import styles from "./LoginPage.module.css";
 import { useRouter } from "next/navigation";
-import { authService } from "@/lib/authService";
+import { useAuth } from "@/providers/AuthProvider";
 
 function LoginPage() {
   const [values, setValues] = useState({
@@ -17,6 +17,9 @@ function LoginPage() {
   });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+
+  const { login } = useAuth();
+
   const router = useRouter();
   function handleChange(e) {
     const { name, value } = e.target;
@@ -32,7 +35,7 @@ function LoginPage() {
     try {
       setError(null);
       setLoading(true);
-      await authService.login(values.email, values.password);
+      await login(values.email, values.password);
       alert("로그인에 성공했습니다.");
       router.push("/me");
     } catch (error) {
diff --git a/src/components/pages/MyPage.js b/src/components/pages/MyPage.js
index 45cdf11..af40bfa 100644
--- a/src/components/pages/MyPage.js
+++ b/src/components/pages/MyPage.js
@@ -4,25 +4,28 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import styles from "./MyPage.module.css";
 import { userService } from "@/lib/userService";
+import { useAuth } from "@/providers/AuthProvider";
+import Avatar from "@/components/Avatar";
 
 function MyPage() {
-  const [user, setUser] = useState(null);
+  // const [user, setUser] = useState(null);
   const [links, setLinks] = useState([]);
   const [loading, setLoading] = useState(true);
   const router = useRouter();
-
-  async function getMe() {
-    try {
-      const userData = await userService.getMe();
-      setUser(userData);
-    } catch (error) {
-      console.error("사용자 정보 가져오기 실패:", error);
-      alert("로그인이 필요합니다.");
-      router.push("/login");
-    } finally {
-      setLoading(false);
-    }
-  }
+  const { user } = useAuth();
+  console.log("user", user);
+  // async function getMe() {
+  //   try {
+  //     const userData = await getUser();
+  //     setUser(userData);
+  //   } catch (error) {
+  //     console.error("사용자 정보 가져오기 실패:", error);
+  //     alert("로그인이 필요합니다.");
+  //     router.push("/login");
+  //   } finally {
+  //     setLoading(false);
+  //   }
+  // }
 
   async function getMyLinks() {
     try {
@@ -30,11 +33,12 @@ function MyPage() {
       setLinks(linksData);
     } catch (error) {
       console.error("링크 정보 가져오기 실패:", error);
+    } finally {
+      setLoading(false);
     }
   }
 
   useEffect(() => {
-    getMe();
     getMyLinks();
   }, []);
 
@@ -49,7 +53,13 @@ function MyPage() {
   return (
     <div className={styles.container}>
       <div className={styles.profile}>
-        <h1>내 프로필</h1>
+        <div className={styles.profileHeader}>
+          <Avatar size="large" src={user.avatar} alt="사용자 아바타" />
+          <div className={styles.profileInfo}>
+            <h1>{user.name}</h1>
+            {user.bio && <p className={styles.bio}>{user.bio}</p>}
+          </div>
+        </div>
         <div className={styles.userInfo}>
           <p>
             <strong>이름:</strong> {user.name}
diff --git a/src/components/pages/MyPage.module.css b/src/components/pages/MyPage.module.css
index 21d6ff2..9cd61a6 100644
--- a/src/components/pages/MyPage.module.css
+++ b/src/components/pages/MyPage.module.css
@@ -10,8 +10,32 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.profileHeader {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.profileInfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.profileInfo h1 {
+  margin: 0 0 10px 0;
+}
+
+.bio {
+  margin: 0;
+  color: #555;
+  font-size: 14px;
+}
+
 .userInfo {
   margin-top: 15px;
+  border-top: 1px solid #e0e0e0;
+  padding-top: 15px;
 }
 
 .links {
diff --git a/src/components/pages/RegisterPage.js b/src/components/pages/RegisterPage.js
index 0c96c7a..c905a53 100644
--- a/src/components/pages/RegisterPage.js
+++ b/src/components/pages/RegisterPage.js
@@ -19,6 +19,7 @@ function RegisterPage() {
   });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const { register } = useAuth();
   const router = useRouter();
 
   function handleChange(e) {
@@ -41,7 +42,7 @@ function RegisterPage() {
       setLoading(true);
       setError(null);
 
-      await authService.register(values.name, values.email, values.password);
+      await register(values.name, values.email, values.password);
 
       // 회원가입 성공 후 처리
       alert("회원가입에 성공했습니다.");
diff --git a/src/lib/fetchClient.js b/src/lib/fetchClient.js
index 66938d6..d4ad05c 100644
--- a/src/lib/fetchClient.js
+++ b/src/lib/fetchClient.js
@@ -33,6 +33,7 @@ export const defaultFetch = async (url, options = {}) => {
  * 쿠키 인증 fetch 클라이언트
  */
 export const cookieFetch = async (url, options = {}) => {
+  console.log("options", options);
   const baseURL = process.env.NEXT_PUBLIC_API_URL;
   const defaultOptions = {
     headers: {
diff --git a/src/lib/userService.js b/src/lib/userService.js
index fc1ae69..aa9dfc2 100644
--- a/src/lib/userService.js
+++ b/src/lib/userService.js
@@ -1,9 +1,50 @@
 import { cookieFetch } from "@/lib/fetchClient";
 
+// FormData 전용 fetch 함수 (Content-Type 헤더 없음)
+const formDataFetch = async (url, options = {}) => {
+  const baseURL = process.env.NEXT_PUBLIC_API_URL;
+  const defaultOptions = {
+    // 쿠키 전송을 위한 설정
+    credentials: "include",
+    // 서버 컴포넌트에서도 매번 재검증
+    cache: "no-store",
+  };
+
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  const response = await fetch(`${baseURL}${url}`, mergedOptions);
+
+  if (!response.ok) {
+    throw new Error(`API error: ${response.status}`);
+  }
+
+  try {
+    return await response.json();
+  } catch (e) {
+    return { status: response.status, ok: response.ok };
+  }
+};
+
 export const userService = {
   // 사용자 정보 요청
   getMe: () => cookieFetch("/users/me"),
 
   // 사용자 링크 요청
   getMyLinks: () => cookieFetch("/users/me/links"),
+
+  // 사용자 정보 업데이트 (multipart/form-data)
+  updateMe: (formData) =>
+    formDataFetch("/users/me", {
+      method: "PATCH",
+      body: formData,
+    }),
+
+  // 링크 삭제
+  deleteLink: (linkId) =>
+    cookieFetch(`/users/me/links/${linkId}`, {
+      method: "DELETE",
+    }),
 };
diff --git a/src/providers/AuthProvider.jsx b/src/providers/AuthProvider.jsx
new file mode 100644
index 0000000..960f212
--- /dev/null
+++ b/src/providers/AuthProvider.jsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { authService } from "@/lib/authService";
+import { userService } from "@/lib/userService";
+import { createContext, useContext, useEffect, useState } from "react";
+
+const AuthContext = createContext({
+  login: () => {},
+  logout: () => {},
+  user: null,
+  updateUser: () => {},
+});
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};
+
+export default function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+
+  const getUser = async () => {
+    const user = await userService.getMe();
+    setUser(user);
+  };
+
+  const login = async (email, password) => {
+    await authService.login(email, password);
+    await getUser();
+  };
+
+  const logout = async () => {
+    /** @TODO 로그아웃 로직 구현 */
+  };
+
+  const updateUser = async (user) => {
+    const updatedUser = await userService.updateMe(user);
+    setUser(updatedUser);
+  };
+
+  useEffect(() => {
+    getUser();
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout, updateUser }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}

From 0993c18031949742d4cb9123f83c588e9b3915e5 Mon Sep 17 00:00:00 2001
From: Jecheon Ryu <rjc1704@gmail.com>
Date: Tue, 22 Apr 2025 02:09:10 +0900
Subject: [PATCH 5/8] =?UTF-8?q?=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89?=
 =?UTF-8?q?=ED=8A=B8=20=EC=8B=A4=EC=8A=B5=EC=A4=80=EB=B9=84=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Nav.js                  | 29 ++++++--
 src/components/Nav.module.css          |  7 ++
 src/components/pages/MyPage.js         | 92 --------------------------
 src/components/pages/MyPage.module.css | 70 --------------------
 src/components/pages/RegisterPage.js   |  1 +
 src/lib/authService.js                 |  6 ++
 src/providers/AuthProvider.jsx         | 17 ++++-
 7 files changed, 51 insertions(+), 171 deletions(-)
 delete mode 100644 src/components/pages/MyPage.js
 delete mode 100644 src/components/pages/MyPage.module.css

diff --git a/src/components/Nav.js b/src/components/Nav.js
index 086859e..48d99be 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -4,6 +4,8 @@ import React from "react";
 import Link from "next/link";
 import styles from "./Nav.module.css";
 import Button from "./Button";
+import { useAuth } from "@/providers/AuthProvider";
+import Avatar from "./Avatar";
 
 export function PublicNav() {
   return (
@@ -18,6 +20,8 @@ export function PublicNav() {
 }
 
 function Nav() {
+  const { user, logout } = useAuth();
+
   return (
     <header className={styles.Container}>
       <nav className={styles.Nav}>
@@ -25,12 +29,25 @@ function Nav() {
           <img className={styles.Logo} src="/images/logo.svg" alt="logo" />
         </Link>
         <div className={styles.Menu}>
-          <Button as={Link} appearance="secondary" href="/login">
-            로그인
-          </Button>
-          <Button as={Link} appearance="primary" href="/register">
-            회원가입
-          </Button>
+          {user ? (
+            <>
+              {user.name}
+              <Avatar src={user.avatar} size="small" alt={user.name} />
+              <div className={styles.Divider} />
+              <Button appearance="secondary" onClick={logout}>
+                로그아웃
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button as={Link} appearance="secondary" href="/login">
+                로그인
+              </Button>
+              <Button as={Link} appearance="primary" href="/register">
+                회원가입
+              </Button>
+            </>
+          )}
         </div>
       </nav>
     </header>
diff --git a/src/components/Nav.module.css b/src/components/Nav.module.css
index 9675cfa..9b9a5d5 100644
--- a/src/components/Nav.module.css
+++ b/src/components/Nav.module.css
@@ -24,6 +24,13 @@
 .Menu {
   display: flex;
   gap: 16px;
+  align-items: center;
+}
+
+.Divider {
+  width: 1px;
+  height: 24px;
+  background-color: #eeeeee;
 }
 
 @media (max-width: 640px) {
diff --git a/src/components/pages/MyPage.js b/src/components/pages/MyPage.js
deleted file mode 100644
index af40bfa..0000000
--- a/src/components/pages/MyPage.js
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import styles from "./MyPage.module.css";
-import { userService } from "@/lib/userService";
-import { useAuth } from "@/providers/AuthProvider";
-import Avatar from "@/components/Avatar";
-
-function MyPage() {
-  // const [user, setUser] = useState(null);
-  const [links, setLinks] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const router = useRouter();
-  const { user } = useAuth();
-  console.log("user", user);
-  // async function getMe() {
-  //   try {
-  //     const userData = await getUser();
-  //     setUser(userData);
-  //   } catch (error) {
-  //     console.error("사용자 정보 가져오기 실패:", error);
-  //     alert("로그인이 필요합니다.");
-  //     router.push("/login");
-  //   } finally {
-  //     setLoading(false);
-  //   }
-  // }
-
-  async function getMyLinks() {
-    try {
-      const linksData = await userService.getMyLinks();
-      setLinks(linksData);
-    } catch (error) {
-      console.error("링크 정보 가져오기 실패:", error);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    getMyLinks();
-  }, []);
-
-  if (loading) {
-    return <div>로딩 중...</div>;
-  }
-
-  if (!user) {
-    return null;
-  }
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.profile}>
-        <div className={styles.profileHeader}>
-          <Avatar size="large" src={user.avatar} alt="사용자 아바타" />
-          <div className={styles.profileInfo}>
-            <h1>{user.name}</h1>
-            {user.bio && <p className={styles.bio}>{user.bio}</p>}
-          </div>
-        </div>
-        <div className={styles.userInfo}>
-          <p>
-            <strong>이름:</strong> {user.name}
-          </p>
-          <p>
-            <strong>이메일:</strong> {user.email}
-          </p>
-        </div>
-      </div>
-
-      <div className={styles.links}>
-        <h2>내 링크</h2>
-        {links.length === 0 ? (
-          <p>저장된 링크가 없습니다.</p>
-        ) : (
-          <ul className={styles.linkList}>
-            {links.map((link) => (
-              <li key={link.id} className={styles.linkItem}>
-                <h3>{link.title}</h3>
-                <p>{link.url}</p>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default MyPage;
diff --git a/src/components/pages/MyPage.module.css b/src/components/pages/MyPage.module.css
deleted file mode 100644
index 9cd61a6..0000000
--- a/src/components/pages/MyPage.module.css
+++ /dev/null
@@ -1,70 +0,0 @@
-.container {
-  padding: 20px;
-}
-
-.profile {
-  margin-bottom: 40px;
-  padding: 20px;
-  background-color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.profileHeader {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.profileInfo {
-  display: flex;
-  flex-direction: column;
-}
-
-.profileInfo h1 {
-  margin: 0 0 10px 0;
-}
-
-.bio {
-  margin: 0;
-  color: #555;
-  font-size: 14px;
-}
-
-.userInfo {
-  margin-top: 15px;
-  border-top: 1px solid #e0e0e0;
-  padding-top: 15px;
-}
-
-.links {
-  padding: 20px;
-  background-color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.linkList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.linkItem {
-  padding: 15px;
-  margin-bottom: 10px;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-}
-
-.linkItem h3 {
-  margin: 0 0 8px 0;
-  font-size: 18px;
-}
-
-.linkItem p {
-  margin: 0;
-  color: #555;
-  word-break: break-all;
-}
diff --git a/src/components/pages/RegisterPage.js b/src/components/pages/RegisterPage.js
index c905a53..bd070cf 100644
--- a/src/components/pages/RegisterPage.js
+++ b/src/components/pages/RegisterPage.js
@@ -9,6 +9,7 @@ import Link from "next/link";
 import HorizontalRule from "../HorizontalRule";
 import styles from "./RegisterPage.module.css";
 import { authService } from "@/lib/authService";
+import { useAuth } from "@/providers/AuthProvider";
 
 function RegisterPage() {
   const [values, setValues] = useState({
diff --git a/src/lib/authService.js b/src/lib/authService.js
index d5a2625..71a152d 100644
--- a/src/lib/authService.js
+++ b/src/lib/authService.js
@@ -14,4 +14,10 @@ export const authService = {
       method: "POST",
       body: JSON.stringify({ name, email, password }),
     }),
+
+  // 로그아웃
+  logout: () =>
+    cookieFetch("/auth/logout", {
+      method: "POST",
+    }),
 };
diff --git a/src/providers/AuthProvider.jsx b/src/providers/AuthProvider.jsx
index 960f212..71d2377 100644
--- a/src/providers/AuthProvider.jsx
+++ b/src/providers/AuthProvider.jsx
@@ -9,6 +9,7 @@ const AuthContext = createContext({
   logout: () => {},
   user: null,
   updateUser: () => {},
+  register: () => {},
 });
 
 export const useAuth = () => {
@@ -23,8 +24,17 @@ export default function AuthProvider({ children }) {
   const [user, setUser] = useState(null);
 
   const getUser = async () => {
-    const user = await userService.getMe();
-    setUser(user);
+    try {
+      const user = await userService.getMe();
+      setUser(user);
+    } catch (error) {
+      console.error("사용자 정보를 가져오는데 실패했습니다:", error);
+      setUser(null);
+    }
+  };
+
+  const register = async (name, email, password) => {
+    await authService.register(name, email, password);
   };
 
   const login = async (email, password) => {
@@ -34,6 +44,7 @@ export default function AuthProvider({ children }) {
 
   const logout = async () => {
     /** @TODO 로그아웃 로직 구현 */
+    console.log("로그아웃");
   };
 
   const updateUser = async (user) => {
@@ -46,7 +57,7 @@ export default function AuthProvider({ children }) {
   }, []);
 
   return (
-    <AuthContext.Provider value={{ user, login, logout, updateUser }}>
+    <AuthContext.Provider value={{ user, login, logout, updateUser, register }}>
       {children}
     </AuthContext.Provider>
   );

From 21611a28acbd02de5038a473ca5356d24fbeeb49 Mon Sep 17 00:00:00 2001
From: Jecheon Ryu <rjc1704@gmail.com>
Date: Tue, 22 Apr 2025 03:19:37 +0900
Subject: [PATCH 6/8] =?UTF-8?q?refresh=20token=20=EC=8B=A4=EC=8A=B5?=
 =?UTF-8?q?=EC=A4=80=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(auth)/layout.js      |  4 +--
 src/app/(landing)/layout.js   |  2 --
 src/app/(mypage)/layout.js    |  2 --
 src/app/providers.jsx         |  7 +++-
 src/components/Avatar.js      |  1 -
 src/components/AvatarInput.js |  2 --
 src/lib/fetchClient.js        |  1 -
 src/providers/RouteGuard.jsx  | 64 +++++++++++++++++++++++++++++++++++
 8 files changed, 71 insertions(+), 12 deletions(-)
 create mode 100644 src/providers/RouteGuard.jsx

diff --git a/src/app/(auth)/layout.js b/src/app/(auth)/layout.js
index 4347ac4..8377608 100644
--- a/src/app/(auth)/layout.js
+++ b/src/app/(auth)/layout.js
@@ -1,7 +1,5 @@
-"use client";
-
 import { FullLayout } from "@/components/Layout";
 
-export default function Layout({ children }) {
+export default async function Layout({ children }) {
   return <FullLayout>{children}</FullLayout>;
 }
diff --git a/src/app/(landing)/layout.js b/src/app/(landing)/layout.js
index affc3f1..2d950a3 100644
--- a/src/app/(landing)/layout.js
+++ b/src/app/(landing)/layout.js
@@ -1,5 +1,3 @@
-"use client";
-
 import { LandingLayout } from "@/components/Layout";
 
 export default function Layout({ children }) {
diff --git a/src/app/(mypage)/layout.js b/src/app/(mypage)/layout.js
index 785b2e6..a349b3b 100644
--- a/src/app/(mypage)/layout.js
+++ b/src/app/(mypage)/layout.js
@@ -1,5 +1,3 @@
-"use client";
-
 import { MyPageLayout } from "@/components/Layout";
 
 export default function Layout({ children }) {
diff --git a/src/app/providers.jsx b/src/app/providers.jsx
index dd9bff4..33c5bcf 100644
--- a/src/app/providers.jsx
+++ b/src/app/providers.jsx
@@ -1,6 +1,11 @@
 import React from "react";
 import AuthProvider from "@/providers/AuthProvider";
+import RouteGuard from "@/providers/RouteGuard";
 
 export default function Providers({ children }) {
-  return <AuthProvider>{children}</AuthProvider>;
+  return (
+    <AuthProvider>
+      <RouteGuard>{children}</RouteGuard>
+    </AuthProvider>
+  );
 }
diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index a90e9f2..344972c 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -1,7 +1,6 @@
 import styles from "./Avatar.module.css";
 
 function Avatar({ className = "", size = "medium", src, alt, ...props }) {
-  console.log("src", src);
   return (
     <img
       className={`${styles.Avatar} ${styles[size]} ${className}`}
diff --git a/src/components/AvatarInput.js b/src/components/AvatarInput.js
index 0910c38..0321815 100644
--- a/src/components/AvatarInput.js
+++ b/src/components/AvatarInput.js
@@ -12,7 +12,6 @@ function AvatarInput({ className = "", initialAvatar, name, onChange }) {
 
   function handleChange(e) {
     const file = e.target.files[0];
-    console.log("file", file);
     setFile(file);
     onChange(name, file);
   }
@@ -28,7 +27,6 @@ function AvatarInput({ className = "", initialAvatar, name, onChange }) {
     }
 
     const blobUrl = URL.createObjectURL(file);
-    console.log("blobUrl", blobUrl);
     setAvatar(blobUrl);
 
     return () => {
diff --git a/src/lib/fetchClient.js b/src/lib/fetchClient.js
index d4ad05c..66938d6 100644
--- a/src/lib/fetchClient.js
+++ b/src/lib/fetchClient.js
@@ -33,7 +33,6 @@ export const defaultFetch = async (url, options = {}) => {
  * 쿠키 인증 fetch 클라이언트
  */
 export const cookieFetch = async (url, options = {}) => {
-  console.log("options", options);
   const baseURL = process.env.NEXT_PUBLIC_API_URL;
   const defaultOptions = {
     headers: {
diff --git a/src/providers/RouteGuard.jsx b/src/providers/RouteGuard.jsx
new file mode 100644
index 0000000..90f41aa
--- /dev/null
+++ b/src/providers/RouteGuard.jsx
@@ -0,0 +1,64 @@
+// src/providers/RouteGuard.jsx
+"use client";
+
+import { useEffect, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { useAuth } from "./AuthProvider";
+
+// 로그인된 사용자만 접근 가능한 경로
+const protectedPaths = [
+  "/me",
+  "/me/edit",
+  // 추가 보호 경로들...
+];
+
+// 미인증 사용자만 접근 가능한 경로
+const publicPaths = [
+  "/",
+  "/login",
+  "/register",
+  // 추가 공개 경로들...
+];
+
+export default function RouteGuard({ children }) {
+  const { user } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // pathname을 경로와 쿼리 부분으로 분리
+    const path = pathname.split("?")[0];
+
+    // 정확한 경로 매칭 또는 하위 경로 매칭
+    const isProtectedRoute = protectedPaths.some(
+      (route) =>
+        path === route || (path.startsWith(route + "/") && route !== "/"),
+    );
+
+    // 정확한 경로 매칭 또는 하위 경로 매칭 (단, '/'는 정확히 일치할 때만)
+    const isPublicRoute = publicPaths.some(
+      (route) =>
+        path === route || (path.startsWith(route + "/") && route !== "/"),
+    );
+
+    // 사용자의 인증 상태에 따른 리다이렉트 처리
+    if (isProtectedRoute && !user) {
+      // 인증된 사용자만 접근 가능한 경로에 미인증 사용자가 접근
+      router.push("/login");
+    } else if (isPublicRoute && user) {
+      // 미인증 사용자만 접근 가능한 경로에 인증된 사용자가 접근
+      router.push("/me");
+    } else {
+      // 접근 가능한 경로
+      setIsLoading(false);
+    }
+  }, [user, pathname, router]);
+
+  // 리다이렉트 중이거나 인증 확인 중일 때는 컨텐츠를 표시하지 않음
+  if (isLoading) {
+    return null;
+  }
+
+  return children;
+}

From 8f253196b9f92899a05d8bd6e3807d053b445706 Mon Sep 17 00:00:00 2001
From: Jecheon Ryu <rjc1704@gmail.com>
Date: Tue, 22 Apr 2025 03:31:51 +0900
Subject: [PATCH 7/8] =?UTF-8?q?redirect=20=EC=8B=A4=EC=8A=B5=EC=A4=80?=
 =?UTF-8?q?=EB=B9=84=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/providers.jsx        |  7 +---
 src/providers/RouteGuard.jsx | 64 ------------------------------------
 2 files changed, 1 insertion(+), 70 deletions(-)
 delete mode 100644 src/providers/RouteGuard.jsx

diff --git a/src/app/providers.jsx b/src/app/providers.jsx
index 33c5bcf..dd9bff4 100644
--- a/src/app/providers.jsx
+++ b/src/app/providers.jsx
@@ -1,11 +1,6 @@
 import React from "react";
 import AuthProvider from "@/providers/AuthProvider";
-import RouteGuard from "@/providers/RouteGuard";
 
 export default function Providers({ children }) {
-  return (
-    <AuthProvider>
-      <RouteGuard>{children}</RouteGuard>
-    </AuthProvider>
-  );
+  return <AuthProvider>{children}</AuthProvider>;
 }
diff --git a/src/providers/RouteGuard.jsx b/src/providers/RouteGuard.jsx
deleted file mode 100644
index 90f41aa..0000000
--- a/src/providers/RouteGuard.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// src/providers/RouteGuard.jsx
-"use client";
-
-import { useEffect, useState } from "react";
-import { usePathname, useRouter } from "next/navigation";
-import { useAuth } from "./AuthProvider";
-
-// 로그인된 사용자만 접근 가능한 경로
-const protectedPaths = [
-  "/me",
-  "/me/edit",
-  // 추가 보호 경로들...
-];
-
-// 미인증 사용자만 접근 가능한 경로
-const publicPaths = [
-  "/",
-  "/login",
-  "/register",
-  // 추가 공개 경로들...
-];
-
-export default function RouteGuard({ children }) {
-  const { user } = useAuth();
-  const router = useRouter();
-  const pathname = usePathname();
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    // pathname을 경로와 쿼리 부분으로 분리
-    const path = pathname.split("?")[0];
-
-    // 정확한 경로 매칭 또는 하위 경로 매칭
-    const isProtectedRoute = protectedPaths.some(
-      (route) =>
-        path === route || (path.startsWith(route + "/") && route !== "/"),
-    );
-
-    // 정확한 경로 매칭 또는 하위 경로 매칭 (단, '/'는 정확히 일치할 때만)
-    const isPublicRoute = publicPaths.some(
-      (route) =>
-        path === route || (path.startsWith(route + "/") && route !== "/"),
-    );
-
-    // 사용자의 인증 상태에 따른 리다이렉트 처리
-    if (isProtectedRoute && !user) {
-      // 인증된 사용자만 접근 가능한 경로에 미인증 사용자가 접근
-      router.push("/login");
-    } else if (isPublicRoute && user) {
-      // 미인증 사용자만 접근 가능한 경로에 인증된 사용자가 접근
-      router.push("/me");
-    } else {
-      // 접근 가능한 경로
-      setIsLoading(false);
-    }
-  }, [user, pathname, router]);
-
-  // 리다이렉트 중이거나 인증 확인 중일 때는 컨텐츠를 표시하지 않음
-  if (isLoading) {
-    return null;
-  }
-
-  return children;
-}

From 24f65441e019bea138410623be04fea5827f2e04 Mon Sep 17 00:00:00 2001
From: kmjerror <6945830a@gmail.com>
Date: Thu, 25 Sep 2025 13:59:58 +0900
Subject: [PATCH 8/8] chore: redirect

---
 src/app/providers.jsx          | 11 +++++++--
 src/providers/AuthProvider.jsx |  8 +++++--
 src/providers/RouteGuard.jsx   | 44 ++++++++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 src/providers/RouteGuard.jsx

diff --git a/src/app/providers.jsx b/src/app/providers.jsx
index dd9bff4..079f992 100644
--- a/src/app/providers.jsx
+++ b/src/app/providers.jsx
@@ -1,6 +1,13 @@
+"use client";
+
 import React from "react";
 import AuthProvider from "@/providers/AuthProvider";
+import RouteGuard from "@/providers/RouteGuard";
 
 export default function Providers({ children }) {
-  return <AuthProvider>{children}</AuthProvider>;
-}
+  return (
+    <AuthProvider>
+      <RouteGuard>{children}</RouteGuard>
+    </AuthProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/providers/AuthProvider.jsx b/src/providers/AuthProvider.jsx
index 71d2377..1d544cd 100644
--- a/src/providers/AuthProvider.jsx
+++ b/src/providers/AuthProvider.jsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { authService } from "@/lib/authService";
+import { cookieFetch } from "@/lib/fetchClient";
 import { userService } from "@/lib/userService";
 import { createContext, useContext, useEffect, useState } from "react";
 
@@ -43,8 +44,11 @@ export default function AuthProvider({ children }) {
   };
 
   const logout = async () => {
-    /** @TODO 로그아웃 로직 구현 */
-    console.log("로그아웃");
+    try {
+      await cookieFetch("/auth/logout", { method: "DELETE" });
+    } finally {
+      setUser(null);
+    }
   };
 
   const updateUser = async (user) => {
diff --git a/src/providers/RouteGuard.jsx b/src/providers/RouteGuard.jsx
new file mode 100644
index 0000000..a13f0c1
--- /dev/null
+++ b/src/providers/RouteGuard.jsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { useAuth } from "@/providers/AuthProvider";
+
+const protectedPaths = [
+  "/me",
+];
+
+const publicPaths = [
+  "/",
+  "/login",
+  "/register",
+];
+
+export default function RouteGuard({ children }) {
+  const { user } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const path = (pathname || "/").split("?")[0];
+
+    const isProtectedRoute = protectedPaths.some(
+      (route) => path === route || (path.startsWith(route + "/") && route !== "/")
+    );
+    const isPublicRoute = publicPaths.some(
+      (route) => path === route || (path.startsWith(route + "/") && route !== "/")
+    );
+
+    if (isProtectedRoute && !user) {
+      router.replace("/login");
+    } else if (isPublicRoute && user) {
+      router.replace("/me");
+    } else {
+      setIsLoading(false);
+    }
+  }, [user, pathname, router]);
+
+  if (isLoading) return null;
+  return children;
+}
\ No newline at end of file