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/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/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/(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/(mypage)/me/edit/page.js b/src/app/(mypage)/me/edit/page.js
new file mode 100644
index 0000000..59e5f0a
--- /dev/null
+++ b/src/app/(mypage)/me/edit/page.js
@@ -0,0 +1,115 @@
+"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 { useAuth } from "@/providers/AuthProvider";
+
+export default function EditPage() {
+  const [values, setValues] = useState({
+    avatar: "",
+    name: "",
+    email: "",
+    bio: "",
+  });
+  const { updateUser, user } = useAuth();
+  const router = useRouter();
+
+  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) => ({
+      ...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);
+
+      await updateUser(formData);
+
+      router.push("/me");
+    } catch (error) {
+      console.error("Error updating profile:", error);
+    }
+  }
+
+  return (
+    <>
+      <h1 className={styles.Heading}>프로필 편집</h1>
+      <form className={styles.Form} onSubmit={handleSubmit}>
+        <AvatarInput
+          name="avatar"
+          initialAvatar={values.avatar}
+          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/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..079f992
--- /dev/null
+++ b/src/app/providers.jsx
@@ -0,0 +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>
+      <RouteGuard>{children}</RouteGuard>
+    </AuthProvider>
+  );
+}
\ No newline at end of file
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..0321815
--- /dev/null
+++ b/src/components/AvatarInput.js
@@ -0,0 +1,59 @@
+"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]);
+
+  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/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/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/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;
+}
diff --git a/src/components/pages/LoginPage.js b/src/components/pages/LoginPage.js
index f383b96..5d016b6 100644
--- a/src/components/pages/LoginPage.js
+++ b/src/components/pages/LoginPage.js
@@ -7,13 +7,20 @@ import Button from "../Button";
 import HorizontalRule from "../HorizontalRule";
 import Link from "next/link";
 import styles from "./LoginPage.module.css";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/providers/AuthProvider";
 
 function LoginPage() {
   const [values, setValues] = useState({
     email: "",
     password: "",
   });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
 
+  const { login } = useAuth();
+
+  const router = useRouter();
   function handleChange(e) {
     const { name, value } = e.target;
 
@@ -25,12 +32,17 @@ function LoginPage() {
 
   async function handleSubmit(e) {
     e.preventDefault();
-    // TODO: 로그인 처리
-    // 1. fetch 를 사용하여 로그인 요청을 보냅니다.
-    // 2. 성공 시 Application 에 쿠키 내 토큰 저장 여부를 확인합니다.
-    // 3. 로딩 상태를 만들고 로딩중일 때는 로그인 버튼을 비활성화 합니다.
-    // 4. 추가로 로딩중일 때는 로그인 버튼텍스트를 "로그인 중..."으로 변경합니다.
-    // 5. 에러 상태를 만들고 로그인 요청이 실패 시 에러 메시지를 로그인버튼 바로 위에 표시합니다.
+    try {
+      setError(null);
+      setLoading(true);
+      await login(values.email, values.password);
+      alert("로그인에 성공했습니다.");
+      router.push("/me");
+    } catch (error) {
+      setError(error.message);
+    } finally {
+      setLoading(false);
+    }
   }
 
   return (
@@ -61,7 +73,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}
diff --git a/src/components/pages/MyPage.js b/src/components/pages/MyPage.js
deleted file mode 100644
index fb48807..0000000
--- a/src/components/pages/MyPage.js
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import styles from "./MyPage.module.css";
-
-function MyPage() {
-  const [user, setUser] = useState(null);
-  const [links, setLinks] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const router = useRouter();
-
-  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();
-      setUser(userData);
-    } catch (error) {
-      console.error("사용자 정보 가져오기 실패:", error);
-      alert("로그인이 필요합니다.");
-      router.push("/login");
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  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();
-      setLinks(linksData);
-    } catch (error) {
-      console.error("링크 정보 가져오기 실패:", error);
-    }
-  }
-
-  useEffect(() => {
-    getMe();
-    getMyLinks();
-  }, []);
-
-  if (loading) {
-    return <div>로딩 중...</div>;
-  }
-
-  if (!user) {
-    return null;
-  }
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.profile}>
-        <h1>내 프로필</h1>
-        <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 21d6ff2..0000000
--- a/src/components/pages/MyPage.module.css
+++ /dev/null
@@ -1,46 +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);
-}
-
-.userInfo {
-  margin-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 0d99d83..bd070cf 100644
--- a/src/components/pages/RegisterPage.js
+++ b/src/components/pages/RegisterPage.js
@@ -8,6 +8,8 @@ import Button from "../Button";
 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({
@@ -18,6 +20,7 @@ function RegisterPage() {
   });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const { register } = useAuth();
   const router = useRouter();
 
   function handleChange(e) {
@@ -40,25 +43,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 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..71a152d
--- /dev/null
+++ b/src/lib/authService.js
@@ -0,0 +1,23 @@
+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 }),
+    }),
+
+  // 로그아웃
+  logout: () =>
+    cookieFetch("/auth/logout", {
+      method: "POST",
+    }),
+};
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..aa9dfc2
--- /dev/null
+++ b/src/lib/userService.js
@@ -0,0 +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..1d544cd
--- /dev/null
+++ b/src/providers/AuthProvider.jsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { authService } from "@/lib/authService";
+import { cookieFetch } from "@/lib/fetchClient";
+import { userService } from "@/lib/userService";
+import { createContext, useContext, useEffect, useState } from "react";
+
+const AuthContext = createContext({
+  login: () => {},
+  logout: () => {},
+  user: null,
+  updateUser: () => {},
+  register: () => {},
+});
+
+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 () => {
+    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) => {
+    await authService.login(email, password);
+    await getUser();
+  };
+
+  const logout = async () => {
+    try {
+      await cookieFetch("/auth/logout", { method: "DELETE" });
+    } finally {
+      setUser(null);
+    }
+  };
+
+  const updateUser = async (user) => {
+    const updatedUser = await userService.updateMe(user);
+    setUser(updatedUser);
+  };
+
+  useEffect(() => {
+    getUser();
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout, updateUser, register }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
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