diff --git a/src/App.tsx b/src/App.tsx
index 0fb0c1e..b1eef51 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,9 +17,9 @@ import PlayerProfilePage from "./pages/playerProfile/PlayerProfilePage";
 
 // 프로필(MyPage)
 import MyPage from "./pages/Profile/MyPage";
-import Profile from "./pages/Profile/components/Profile";
-import Info from "./pages/Profile/components/Info";
-import ProfileEdit from "./pages/Profile/components/ProfileEdit";
+import Profile from "./pages/Profile/Profile";
+import Info from "./pages/Profile/Info";
+import ProfileEdit from "./pages/Profile/ProfileEdit";
 
 // 매칭
 import MatchingGameListPage from "./pages/Matching/MatchingGameListPage";
diff --git a/src/pages/Profile/components/Info.tsx b/src/pages/Profile/Info.tsx
similarity index 68%
rename from src/pages/Profile/components/Info.tsx
rename to src/pages/Profile/Info.tsx
index 4d84824..8a660c4 100644
--- a/src/pages/Profile/components/Info.tsx
+++ b/src/pages/Profile/Info.tsx
@@ -1,6 +1,8 @@
+// src/pages/Profile/Info.tsx
 import { useEffect, useState } from "react";
-import { ChevronLeft, X } from "lucide-react";
 import { useNavigate } from "react-router-dom";
+import BackHeader from "./components/BackHeader";
+import { X } from "lucide-react";
 
 interface ProfileInfo {
   nickname: string;
@@ -26,6 +28,7 @@ export default function Info() {
     gender: 0,
   });
 
+  // 서버에서 내 프로필 정보 가져오기
   useEffect(() => {
     const jwt = localStorage.getItem("jwtToken");
     if (!jwt) {
@@ -39,7 +42,7 @@ export default function Info() {
           `${import.meta.env.VITE_API_URL}/mypage/myTemp`,
           {
             headers: { Authorization: `Bearer ${jwt}` },
-          },
+          }
         );
         if (!res.ok) throw new Error(`HTTP error ${res.status}`);
         const data = await res.json();
@@ -86,7 +89,7 @@ export default function Info() {
             Authorization: `Bearer ${jwt}`,
           },
           body: JSON.stringify(body),
-        },
+        }
       );
       if (!res.ok) {
         const errJson = await res.json().catch(() => null);
@@ -108,7 +111,6 @@ export default function Info() {
     setIsEditingBirthday(false);
     setIsEditingPhone(false);
     setIsEditingGender(false);
-    // 필요 시, 원래 값으로 복원하려면 fetch 다시 호출
   };
 
   const handleConfirmWithdrawal = async () => {
@@ -153,17 +155,16 @@ export default function Info() {
   const { nickname, email, birthday, phone, gender } = profile;
 
   return (
-    <div className="mx-auto mt-8 w-[400px] bg-gray-100">
-      <div className="relative space-y-6 rounded-lg bg-white px-6 pt-16 pb-6 shadow">
-        <button
-          onClick={() => navigate(-1)}
-          className="absolute top-6 left-6 flex items-center text-gray-700"
-        >
-          <ChevronLeft size={24} />
-          <span className="t-button2 ml-2">개인정보</span>
-        </button>
+    <>
+      {/* ─── 최상위 래퍼: 화면을 채우고 회색 배경으로 만듭니다 ─── */}
+      <div className="relative flex min-h-screen justify-center bg-gray-100 py-8">
+        {/* ① BackHeader를 화면 왼쪽 상단에 고정 (절대 위치) */}
+        <div className="absolute top-4 left-4 h-14">
+          <BackHeader title="개인정보" />
+        </div>
 
-        <div className="space-y-5">
+        {/* ② 메인 콘텐츠: 흰색 카드 없이 */}
+        <div className="w-full max-w-md mx-auto px-6 space-y-5">
           {/* 이름 */}
           <div>
             <label className="mb-1 block font-bold">이름</label>
@@ -174,14 +175,15 @@ export default function Info() {
               className="w-full cursor-not-allowed rounded border border-gray-300 bg-gray-100 p-3"
             />
           </div>
+
           {/* 생년월일 */}
           <div>
             <label className="mb-1 block font-bold">생년월일</label>
             <input
               type="date"
               value={birthday}
-              onChange={e =>
-                setProfile(prev => ({ ...prev, birthday: e.target.value }))
+              onChange={(e) =>
+                setProfile((prev) => ({ ...prev, birthday: e.target.value }))
               }
               readOnly={!isEditingBirthday}
               className={`w-full rounded border border-gray-300 p-3 ${
@@ -189,6 +191,7 @@ export default function Info() {
               }`}
             />
           </div>
+
           {/* 성별 */}
           <div>
             <label className="mb-1 block font-bold">성별</label>
@@ -200,7 +203,7 @@ export default function Info() {
                     name="gender"
                     checked={gender === 0}
                     onChange={() =>
-                      setProfile(prev => ({ ...prev, gender: 0 }))
+                      setProfile((prev) => ({ ...prev, gender: 0 }))
                     }
                     className="mr-2"
                   />
@@ -212,7 +215,7 @@ export default function Info() {
                     name="gender"
                     checked={gender === 1}
                     onChange={() =>
-                      setProfile(prev => ({ ...prev, gender: 1 }))
+                      setProfile((prev) => ({ ...prev, gender: 1 }))
                     }
                     className="mr-2"
                   />
@@ -228,6 +231,7 @@ export default function Info() {
               />
             )}
           </div>
+
           {/* 이메일 */}
           <div>
             <label className="mb-1 block font-bold">이메일</label>
@@ -238,14 +242,15 @@ export default function Info() {
               className="w-full cursor-not-allowed rounded border border-gray-300 bg-gray-100 p-3"
             />
           </div>
+
           {/* 전화번호 */}
           <div>
             <label className="mb-1 block font-bold">전화번호</label>
             <input
               type="tel"
               value={phone}
-              onChange={e =>
-                setProfile(prev => ({ ...prev, phone: e.target.value }))
+              onChange={(e) =>
+                setProfile((prev) => ({ ...prev, phone: e.target.value }))
               }
               readOnly={!isEditingPhone}
               className={`w-full rounded border border-gray-300 p-3 ${
@@ -253,77 +258,77 @@ export default function Info() {
               }`}
             />
           </div>
-        </div>
 
-        {/* 버튼 그룹 */}
-        <div className="flex items-center justify-end space-x-4 pt-4">
-          {isEditing ? (
-            <>
-              <button
-                type="button"
-                onClick={handleSave}
-                className="rounded bg-green-600 px-4 py-2 text-white transition hover:bg-green-700"
-              >
-                저장하기
-              </button>
+          {/* 버튼 그룹 */}
+          <div className="flex items-center justify-end space-x-4 pt-4">
+            {isEditing ? (
+              <>
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  className="rounded bg-green-600 px-4 py-2 text-white transition hover:bg-green-700"
+                >
+                  저장하기
+                </button>
+                <button
+                  type="button"
+                  onClick={handleCancel}
+                  className="rounded bg-gray-300 px-4 py-2 text-gray-700 transition hover:bg-gray-400"
+                >
+                  취소
+                </button>
+              </>
+            ) : (
               <button
                 type="button"
-                onClick={handleCancel}
-                className="rounded bg-gray-300 px-4 py-2 text-gray-700 transition hover:bg-gray-400"
+                onClick={handleToggleEdit}
+                className="rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700"
               >
-                취소
+                수정하기
               </button>
-            </>
-          ) : (
+            )}
             <button
               type="button"
-              onClick={handleToggleEdit}
-              className="rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700"
+              onClick={() => setIsModalOpen(true)}
+              className="rounded-lg bg-red-500 px-6 py-2 text-white transition hover:bg-red-600"
             >
-              수정하기
+              회원탈퇴
             </button>
-          )}
-          <button
-            type="button"
-            onClick={() => setIsModalOpen(true)}
-            className="rounded-lg bg-red-500 px-6 py-2 text-white transition hover:bg-red-600"
-          >
-            회원탈퇴
-          </button>
+          </div>
         </div>
-      </div>
 
-      {/* 회원탈퇴 모달 */}
-      {isModalOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-white/30 backdrop-blur-sm">
-          <div className="relative w-full max-w-sm rounded-xl bg-white/90 p-6 shadow-lg">
-            <button
-              onClick={() => setIsModalOpen(false)}
-              className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
-            >
-              <X size={20} />
-            </button>
-            <h2 className="mb-2 text-xl font-bold">회원 탈퇴</h2>
-            <p className="mb-6 text-center text-gray-600">
-              탈퇴 시, 모든 데이터가 영구적으로 사라집니다.
-            </p>
-            <div className="flex justify-center space-x-4">
+        {/* 회원탈퇴 모달 (흰 배경 카드 그대로 유지) */}
+        {isModalOpen && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-white/30 backdrop-blur-sm">
+            <div className="relative w-full max-w-sm rounded-xl bg-white/90 p-6 shadow-lg">
               <button
                 onClick={() => setIsModalOpen(false)}
-                className="flex-1 rounded-lg border border-gray-300 py-2 text-gray-700 transition hover:bg-gray-100"
+                className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
               >
-                취소하기
-              </button>
-              <button
-                onClick={handleConfirmWithdrawal}
-                className="flex-1 rounded-lg bg-red-500 py-2 text-white transition hover:bg-red-600"
-              >
-                회원 탈퇴하기
+                <X size={20} />
               </button>
+              <h2 className="mb-2 text-xl font-bold">회원 탈퇴</h2>
+              <p className="mb-6 text-center text-gray-600">
+                탈퇴 시, 모든 데이터가 영구적으로 사라집니다.
+              </p>
+              <div className="flex justify-center space-x-4">
+                <button
+                  onClick={() => setIsModalOpen(false)}
+                  className="flex-1 rounded-lg border border-gray-300 py-2 text-gray-700 transition hover:bg-gray-100"
+                >
+                  취소하기
+                </button>
+                <button
+                  onClick={handleConfirmWithdrawal}
+                  className="flex-1 rounded-lg bg-red-500 py-2 text-white transition hover:bg-red-600"
+                >
+                  회원 탈퇴하기
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+    </>
   );
 }
diff --git a/src/pages/Profile/MyPage.tsx b/src/pages/Profile/MyPage.tsx
index e6e6384..74f2193 100644
--- a/src/pages/Profile/MyPage.tsx
+++ b/src/pages/Profile/MyPage.tsx
@@ -4,9 +4,8 @@ import { Outlet } from "react-router-dom";
 export default function MyPage() {
   return (
     <div className="min-h-screen bg-gray-100">
-      {/* ───── 컨테이너 (공통 레이아웃) ───── */}
-      <div className="mx-auto max-w-4xl px-8 py-10">
-        {/* 자식 라우트(Profile / Info / ProfileEdit)가 이 자리에 그려집니다 */}
+
+      <div className="w-full px-8 py-10">
         <Outlet />
       </div>
     </div>
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
new file mode 100644
index 0000000..aac5417
--- /dev/null
+++ b/src/pages/Profile/Profile.tsx
@@ -0,0 +1,330 @@
+// src/pages/Profile/Profile.tsx
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  getTeamLogoByIdx,
+  getTeamNameByIdx,
+} from "../../hooks/TeamNameChanger"; // 실제 경로에 맞게 수정해주세요
+
+interface ProfileData {
+  userIdx: number;
+  nickname: string;
+  cheeringTeamId: number;
+  bio: string;
+  profileImageUrl: string;
+  userTemp: number;
+}
+
+interface MyMatchingPostDto {
+  matchingPostIdx: number;
+  userIdx: number;
+  gameIdx: number;
+  stadiumIdx: number;
+  teamIdx: number;
+  title: string;
+  context: string;
+  haveTicket: boolean;
+  createdAt: string;
+  isMatched: boolean;      // 매칭 완료 여부
+}
+
+export default function Profile() {
+  const navigate = useNavigate();
+
+  // 프로필 정보 상태
+  const [profile, setProfile] = useState<ProfileData | null>(null);
+  // 내가 쓴 매칭 글 상태
+  const [myPosts, setMyPosts] = useState<MyMatchingPostDto[]>([]);
+  const [isLoadingPosts, setIsLoadingPosts] = useState<boolean>(false);
+  const [postsError, setPostsError] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const token = localStorage.getItem("jwtToken");
+        if (!token) throw new Error("토큰이 없습니다.");
+
+        // 1) 프로필 정보 조회
+        const profileRes = await fetch(
+          `${import.meta.env.VITE_API_URL}/mypage/myTemp`,
+          {
+            method: "GET",
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`,
+            },
+          }
+        );
+        if (!profileRes.ok)
+          throw new Error(`프로필 조회 실패: ${profileRes.status}`);
+        const profileData: ProfileData = await profileRes.json();
+        setProfile(profileData);
+
+        // 2) 내가 쓴 매칭 글 목록 조회 (/mypage/myPost)
+        setIsLoadingPosts(true);
+        setPostsError(null);
+
+        const postsRes = await fetch(
+          `${import.meta.env.VITE_API_URL}/mypage/myPost`,
+          {
+            method: "GET",
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`,
+            },
+          }
+        );
+        if (!postsRes.ok)
+          throw new Error(`내 글 조회 실패: ${postsRes.status}`);
+        const postsData: MyMatchingPostDto[] = await postsRes.json();
+        setMyPosts(postsData);
+      } catch (err: any) {
+        console.error("프로필 또는 매칭 글 불러오기 실패:", err);
+        setPostsError("내가 쓴 매칭 글을 불러오는 중 오류가 발생했습니다.");
+      } finally {
+        setIsLoadingPosts(false);
+      }
+    })();
+  }, []);
+
+  // 팀명/로고 파생 값
+  const cheeringTeamName =
+    profile?.cheeringTeamId != null
+      ? getTeamNameByIdx(profile.cheeringTeamId)
+      : "로딩 중";
+  const cheeringTeamLogo =
+    profile?.cheeringTeamId != null
+      ? getTeamLogoByIdx(profile.cheeringTeamId)
+      : "/images/default_team_emb.png";
+
+  /**
+   * 매칭 완료 토글 함수
+   * @param postId {number} - 토글할 matchingPostIdx
+   */
+  const handleToggleMatched = async (postId: number) => {
+    try {
+      const token = localStorage.getItem("jwtToken");
+      if (!token) throw new Error("토큰이 없습니다.");
+
+      // PATCH 요청: is_matched 상태 토글
+      const res = await fetch(
+        `${import.meta.env.VITE_API_URL}/mypage/${postId}/toggle-matched`,
+        {
+          method: "PATCH",
+          credentials: "include",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      if (!res.ok) {
+        throw new Error(`매칭 토글 실패: ${res.status}`);
+      }
+      const updated = await res.json(); 
+      // 예시 응답: { matchingPostIdx: 3, matched: true }
+
+      // 로컬 상태에서도 해당 게시글의 isMatched 값을 반전시켜서 업데이트
+      setMyPosts((prev) =>
+        prev.map((p) =>
+          p.matchingPostIdx === updated.matchingPostIdx
+            ? { ...p, isMatched: updated.matched }
+            : p
+        )
+      );
+    } catch (error: any) {
+      console.error("매칭 토글 중 오류 발생:", error);
+      alert(`오류: ${error.message}`);
+    }
+  };
+
+  return (
+    <>
+      <div className="w-full max-w-5xl mx-auto px-8">
+        {/* 헤더 배너 */}
+        <section className="relative mb-8 h-48 w-full bg-blue-900 rounded-lg">
+          <div className="absolute inset-0 bg-blue-900 bg-opacity-75 rounded-lg" />
+          <div className="relative flex h-full items-start px-8 pt-6">
+            {/* 프로필 + 소개 */}
+            <div className="flex items-start space-x-6">
+              <img
+                src={
+                  profile?.profileImageUrl && profile.profileImageUrl.length > 0
+                    ? profile.profileImageUrl
+                    : "/images/user_avatar.png"
+                }
+                alt="프로필"
+                className="h-24 w-24 rounded-full border-4 border-white object-cover"
+                onError={(e) => {
+                  e.currentTarget.src = "/images/user_avatar.png";
+                }}
+              />
+              <div className="text-white">
+                <div className="flex items-center space-x-2">
+                  <h1 className="text-2xl font-bold">
+                    {profile?.nickname || "로딩 중..."}
+                  </h1>
+                  <span className="rounded-full bg-white px-2 py-0.5 text-xs font-medium text-blue-900">
+                    {cheeringTeamName}
+                  </span>
+                </div>
+                <p className="mt-1 text-sm">
+                  {profile?.bio || "자기소개가 없습니다."}
+                </p>
+                {/* 수정 / 설정 버튼 */}
+                <div className="mt-3 flex items-center space-x-3">
+                  <button
+                    onClick={() => navigate("/mypage/edit")}
+                    className="bg-opacity-20 hover:bg-opacity-30 rounded-full bg-blue p-2 transition"
+                  >
+                    <img
+                      src="/images/modify_btn.png"
+                      alt="Edit"
+                      className="h-5 w-5"
+                    />
+                  </button>
+                  <button
+                    onClick={() => navigate("/mypage/info")}
+                    className="bg-opacity-20 hover:bg-opacity-30 rounded-full bg-blue p-2 transition"
+                  >
+                    <img
+                      src="/images/setting_btn.png"
+                      alt="Settings"
+                      className="h-5 w-5"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+            {/* 팀 엠블럼 */}
+            <div className="ml-auto flex h-full items-center pb-4">
+              <img
+                src={cheeringTeamLogo}
+                alt="팀 엠블럼"
+                className="h-24 w-24 object-contain"
+                onError={(e) => {
+                  e.currentTarget.src = "/images/default_team_emb.png";
+                }}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* 직관 온도 */}
+        <section className="mb-8 rounded-xl bg-white p-6 shadow-sm">
+          <div className="mb-4 flex items-center justify-between">
+            <span className="text-lg font-medium text-gray-800">
+              직관 온도
+            </span>
+            <span className="text-lg font-semibold text-red-500">
+              {profile?.userTemp != null
+                ? `${profile.userTemp.toFixed(1)}℃`
+                : "–"}
+            </span>
+          </div>
+          <div className="relative h-3 overflow-hidden rounded-full bg-gray-200">
+            <div
+              className="absolute top-0 left-0 h-full bg-red-500"
+              style={{
+                width:
+                  profile?.userTemp != null
+                    ? `${(profile.userTemp / 50) * 100}%`
+                    : "0%",
+              }}
+            />
+          </div>
+        </section>
+
+        {/* 작성한 매칭 글 (버튼 추가) */}
+        <section className="rounded-xl bg-white p-6 shadow-sm">
+          <h2 className="mb-4 text-lg font-medium text-gray-800">
+            작성한 매칭 글
+          </h2>
+          {isLoadingPosts && (
+            <p className="text-center text-gray-500">불러오는 중...</p>
+          )}
+          {postsError && (
+            <p className="text-center text-red-500">{postsError}</p>
+          )}
+          {!isLoadingPosts && !postsError && myPosts.length === 0 && (
+            <p className="text-center text-gray-500">
+              작성한 매칭 글이 없습니다.
+            </p>
+          )}
+          {!isLoadingPosts && !postsError && myPosts.length > 0 && (
+            <div className="space-y-4">
+              {myPosts.map((post) => (
+                <div
+                  key={post.matchingPostIdx}
+                  className="flex flex-col space-y-3 rounded-xl bg-white p-6 shadow-sm hover:bg-gray-50 cursor-pointer"
+                >
+                  <div
+                    className="flex items-start justify-between"
+                    onClick={() =>
+                      navigate(`/matching/articles/${post.matchingPostIdx}`)
+                    }
+                  >
+                    <div>
+                      <div className="mb-2 flex items-center space-x-2">
+                        <div className="h-8 w-8 rounded-full bg-gray-200" />
+                        <span className="text-sm text-gray-600">
+                          {profile?.nickname || ""} ·{" "}
+                          {new Date(post.createdAt).toLocaleDateString(
+                            "ko-KR"
+                          )}
+                        </span>
+                      </div>
+                      <h3 className="mb-1 text-base font-semibold">
+                        {post.title}
+                      </h3>
+                      <p className="text-sm text-gray-500">
+                        {post.context.length > 30
+                          ? post.context.slice(0, 30) + "…"
+                          : post.context}
+                      </p>
+                    </div>
+                    <div className="space-y-2 text-right">
+                      <div className="flex flex-col items-end space-y-1">
+                        <span className="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-600">
+                          {cheeringTeamName}
+                        </span>
+                        <span className="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-600">
+                          {post.haveTicket ? "티켓 있음" : "티켓 없음"}
+                        </span>
+                      </div>
+                      <span className="text-sm text-gray-400">
+                        {new Date(post.createdAt).toLocaleDateString("ko-KR")}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/**
+                   * ▷ 매칭 완료 토글 버튼
+                   *    - post.isMatched === false → “매칭 완료”
+                   *    - post.isMatched === true  → “다시 매칭하기”
+                   */}
+                  <button
+                    type="button"
+                    onClick={() => handleToggleMatched(post.matchingPostIdx)}
+                    className={`
+                      mt-2 w-full rounded-md px-4 py-2 text-white
+                      ${
+                        post.isMatched
+                          ? "bg-gray-500 hover:bg-gray-600"
+                          : "bg-blue-600 hover:bg-blue-700"
+                      }
+                    `}
+                  >
+                    {post.isMatched ? "다시 매칭하기" : "매칭 완료"}
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/Profile/components/ProfileEdit.tsx b/src/pages/Profile/ProfileEdit.tsx
similarity index 50%
rename from src/pages/Profile/components/ProfileEdit.tsx
rename to src/pages/Profile/ProfileEdit.tsx
index a46a3bb..b8c5b06 100644
--- a/src/pages/Profile/components/ProfileEdit.tsx
+++ b/src/pages/Profile/ProfileEdit.tsx
@@ -1,9 +1,14 @@
-// src/pages/Profile/components/ProfileEdit.tsx
+// src/pages/Profile/ProfileEdit.tsx
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { ChevronLeft } from "lucide-react";
+import BackHeader from "./components/BackHeader";
+import ImageUploader from "./components/ImageUpLoader";
+import NicknameField from "./components/NicknameField";
+import IntroductionField from "./components/IntroductionField";
+import TeamSelect from "./components/TeamSelect";
+import SubmitButton from "./components/SubmitButton";
 
-const teams = [
+const teamsList = [
   "LG 트윈스",
   "SSG 랜더스",
   "삼성 라이온즈",
@@ -16,26 +21,17 @@ const teams = [
   "한화 이글스",
 ];
 
-enum CheckResult {
-  None = "none",
-  Available = "available",
-  Duplicate = "duplicate",
-}
-
 export default function ProfileEdit() {
   const navigate = useNavigate();
 
-  // personal info
   const [nickname, setNickname] = useState("");
-  const [checkResult, setCheckResult] = useState<CheckResult>(CheckResult.None);
+  const [checkResult, setCheckResult] = useState<"none" | "available" | "duplicate">("none");
   const [introduction, setIntroduction] = useState("");
-  const [team, setTeam] = useState(teams[0]);
+  const [team, setTeam] = useState(teamsList[0]);
 
-  // image upload state
   const [file, setFile] = useState<File | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
-  // existing profile load
   useEffect(() => {
     const jwt = localStorage.getItem("jwtToken");
     if (!jwt) {
@@ -50,13 +46,13 @@ export default function ProfileEdit() {
           {
             credentials: "include",
             headers: { Authorization: `Bearer ${jwt}` },
-          },
+          }
         );
         if (!res.ok) throw new Error(res.statusText);
         const data = await res.json();
         setNickname(data.nickname);
         setIntroduction(data.bio);
-        setTeam(teams[data.cheeringTeamId - 1]);
+        setTeam(teamsList[data.cheeringTeamId - 1]);
         setPreviewUrl(data.profileImageUrl);
       } catch (err) {
         console.error("프로필 조회 실패:", err);
@@ -66,7 +62,6 @@ export default function ProfileEdit() {
     })();
   }, [navigate]);
 
-  // nickname check
   const checkNickname = async () => {
     if (!nickname.trim()) {
       alert("닉네임을 입력해주세요.");
@@ -87,13 +82,13 @@ export default function ProfileEdit() {
             Authorization: `Bearer ${jwt}`,
           },
           body: JSON.stringify({ nickname }),
-        },
+        }
       );
       if (res.status === 200) {
-        setCheckResult(CheckResult.Available);
+        setCheckResult("available");
         alert("사용 가능한 닉네임입니다.");
       } else if (res.status === 400) {
-        setCheckResult(CheckResult.Duplicate);
+        setCheckResult("duplicate");
         alert("이미 사용 중인 닉네임입니다.");
       } else {
         throw new Error(res.statusText);
@@ -104,11 +99,9 @@ export default function ProfileEdit() {
     }
   };
 
-  // file preview
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const f = e.target.files?.[0] ?? null;
+  const handleFileChange = (f: File) => {
     setFile(f);
-    if (f) setPreviewUrl(URL.createObjectURL(f));
+    setPreviewUrl(URL.createObjectURL(f));
   };
 
   const handleImageUpload = async () => {
@@ -123,7 +116,7 @@ export default function ProfileEdit() {
         credentials: "include",
         headers: { Authorization: `Bearer ${jwt}` },
         body: form,
-      },
+      }
     );
     if (!res.ok) throw new Error(res.statusText);
     const body = await res.json();
@@ -133,15 +126,14 @@ export default function ProfileEdit() {
     navigate("/mypage", { state: { newImageUrl: newUrl } });
   };
 
-  // submit
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (checkResult !== CheckResult.Available) {
+    if (checkResult !== "available") {
       return alert("닉네임 중복 확인을 해주세요.");
     }
     const jwt = localStorage.getItem("jwtToken");
     if (!jwt) return alert("로그인 정보가 유효하지 않습니다.");
-    const cheeringTeamId = teams.indexOf(team) + 1;
+    const cheeringTeamId = teamsList.indexOf(team) + 1;
     try {
       const res = await fetch(
         `${import.meta.env.VITE_API_URL}/mypage/editPersonal`,
@@ -153,7 +145,7 @@ export default function ProfileEdit() {
             Authorization: `Bearer ${jwt}`,
           },
           body: JSON.stringify({ nickname, bio: introduction, cheeringTeamId }),
-        },
+        }
       );
       if (!res.ok) {
         const err = await res.json();
@@ -168,104 +160,41 @@ export default function ProfileEdit() {
   };
 
   return (
-    <div className="flex min-h-screen justify-center bg-gray-100 py-8">
-      <div className="relative w-[400px] rounded-lg bg-white shadow">
-        <button
-          onClick={() => navigate(-1)}
-          className="absolute top-4 left-4 flex items-center"
-        >
-          <ChevronLeft size={24} />
-          <span className="ml-2">프로필 수정</span>
-        </button>
-        <div className="space-y-6 px-6 pt-16 pb-8">
-          <div className="flex flex-col items-center space-y-3">
-            <div className="h-24 w-24 overflow-hidden rounded-full">
-              <img
-                src={previewUrl || "/images/user_avatar.png"}
-                alt="프로필"
-                className="h-full w-full object-cover"
+    <div className="relative flex min-h-screen justify-center bg-gray-100 py-8">
+      {/* 1) BackHeader: 절대 위치로 화면 왼쪽 상단에 고정 */}
+      <div className="absolute top-4 left-4">
+        <BackHeader title="프로필 수정" />
+      </div>
+
+      {/* 2) 메인 컨테이너: 화면 중앙에 너비 제한 없이 채움 */}
+      <div className="w-full max-w-2xl mx-auto px-8">
+        {/* 3) 카드 배경 없이 바로 폼 콘텐츠 */}
+        <div className="flex flex-col items-center space-y-8 px-8 py-6">
+          {/* ▷ 이미지 업로더 */}
+          <div className="flex flex-col items-center space-y-4">
+            <ImageUploader
+              previewUrl={previewUrl}
+              onFileChange={handleFileChange}
+              onUploadClick={handleImageUpload}
+            />
+          </div>
+
+          {/* ▷ 입력 폼 */}
+          <div className="w-full">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <NicknameField
+                nickname={nickname}
+                onChange={setNickname}
+                onCheck={checkNickname}
               />
-            </div>
-            <label className="cursor-pointer rounded border px-4 py-2 hover:bg-gray-50">
-              이미지 선택
-              <input
-                type="file"
-                accept="image/*"
-                className="hidden"
-                onChange={handleFileChange}
+              <IntroductionField
+                introduction={introduction}
+                onChange={setIntroduction}
               />
-            </label>
-            <button
-              type="button"
-              onClick={handleImageUpload}
-              className="rounded bg-blue-600 px-4 py-2 text-white"
-            >
-              이미지 업로드
-            </button>
+              <TeamSelect team={team} teams={teamsList} onChange={setTeam} />
+              <SubmitButton disabled={checkResult !== "available"} />
+            </form>
           </div>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label htmlFor="nickname" className="mb-1 block">
-                닉네임
-              </label>
-              <div className="flex">
-                <input
-                  id="nickname"
-                  type="text"
-                  value={nickname}
-                  onChange={e => {
-                    setNickname(e.target.value);
-                    setCheckResult(CheckResult.None);
-                  }}
-                  className="flex-1 rounded-l border px-3 py-2"
-                />
-                <button
-                  type="button"
-                  onClick={checkNickname}
-                  className="rounded-r border-t border-r border-b bg-gray-200 px-4"
-                >
-                  중복 확인
-                </button>
-              </div>
-            </div>
-            <div>
-              <label htmlFor="introduction" className="mb-1 block">
-                자기소개
-              </label>
-              <textarea
-                id="introduction"
-                rows={3}
-                value={introduction}
-                onChange={e => setIntroduction(e.target.value)}
-                className="w-full rounded border px-3 py-2"
-              />
-            </div>
-            <div>
-              <label htmlFor="team" className="mb-1 block">
-                응원팀
-              </label>
-              <select
-                id="team"
-                value={team}
-                onChange={e => setTeam(e.target.value)}
-                className="w-full rounded border px-3 py-2"
-              >
-                {teams.map(t => (
-                  <option key={t} value={t}>
-                    {t}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="text-center">
-              <button
-                type="submit"
-                className="rounded bg-black px-6 py-2 text-white"
-              >
-                변경사항 저장
-              </button>
-            </div>
-          </form>
         </div>
       </div>
     </div>
diff --git a/src/pages/Profile/components/BackHeader.tsx b/src/pages/Profile/components/BackHeader.tsx
new file mode 100644
index 0000000..e31506d
--- /dev/null
+++ b/src/pages/Profile/components/BackHeader.tsx
@@ -0,0 +1,25 @@
+// src/pages/Profile/components/BackHeader.tsx
+
+import { ChevronLeft } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+interface BackHeaderProps {
+  title: string;
+}
+
+export default function BackHeader({ title }: BackHeaderProps) {
+  const navigate = useNavigate();
+  return (
+    // ml-4 → left margin: 16px
+    // h-14  → height: 56px (= 14 * 4px)
+    <div className="flex space-x-2 pb-6 ml-4 h-14">
+      <button
+        onClick={() => navigate(-1)}
+        className="flex items-center text-gray-800 hover:text-gray-600"
+      >
+        <ChevronLeft size={24} />
+        <span className="ml-1 text-lg font-medium">{title}</span>
+      </button>
+    </div>
+  );
+}
diff --git a/src/pages/Profile/components/ImageUploader.tsx b/src/pages/Profile/components/ImageUploader.tsx
new file mode 100644
index 0000000..c062470
--- /dev/null
+++ b/src/pages/Profile/components/ImageUploader.tsx
@@ -0,0 +1,52 @@
+// src/pages/Profile/components/ImageUploader.tsx
+
+interface ImageUploaderProps {
+  previewUrl: string | null;
+  onFileChange: (file: File) => void;
+  onUploadClick: () => void;
+}
+
+export default function ImageUploader({
+  previewUrl,
+  onFileChange,
+  onUploadClick,
+}: ImageUploaderProps) {
+  return (
+    <div className="flex flex-col items-center space-y-3">
+      {/* 원형 프로필 미리보기 */}
+      <div className="h-28 w-28 overflow-hidden rounded-full border-2 border-gray-200 bg-gray-100 lg:h-32 lg:w-32">
+        <img
+          src={previewUrl || "/images/user_avatar.png"}
+          alt="프로필"
+          className="h-full w-full object-cover"
+          onError={(e) => {
+            e.currentTarget.src = "/images/user_avatar.png";
+          }}
+        />
+      </div>
+
+      {/* 이미지 선택 버튼 */}
+      <label className="cursor-pointer rounded border border-gray-300 px-3 py-1 hover:bg-gray-50 text-sm text-gray-700 lg:px-4 lg:py-2 lg:text-base">
+        이미지 선택
+        <input
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={(e) => {
+            const f = e.target.files?.[0];
+            if (f) onFileChange(f);
+          }}
+        />
+      </label>
+
+      {/* 이미지 업로드 버튼 */}
+      <button
+        type="button"
+        onClick={onUploadClick}
+        className="w-42 rounded bg-gray-400 px-4 py-2 text-white hover:bg-gray-700 text-sm lg:px-6 lg:py-3 lg:text-base"
+      >
+        프로필 이미지 변경
+      </button>
+    </div>
+  );
+}
diff --git a/src/pages/Profile/components/IntroductionField.tsx b/src/pages/Profile/components/IntroductionField.tsx
new file mode 100644
index 0000000..3388506
--- /dev/null
+++ b/src/pages/Profile/components/IntroductionField.tsx
@@ -0,0 +1,29 @@
+// src/pages/Profile/components/IntroductionField.tsx
+interface IntroductionFieldProps {
+  introduction: string;
+  onChange: (value: string) => void;
+}
+
+export default function IntroductionField({
+  introduction,
+  onChange,
+}: IntroductionFieldProps) {
+  return (
+    <div className="space-y-1">
+      <label
+        htmlFor="introduction"
+        className="block text-sm font-medium text-gray-700 lg:text-base"
+      >
+        자기소개
+      </label>
+      <textarea
+        id="introduction"
+        rows={4}
+        value={introduction}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 lg:px-4 lg:py-3 lg:text-base"
+        placeholder="자기소개를 입력해주세요."
+      />
+    </div>
+  );
+}
diff --git a/src/pages/Profile/components/NicknameField.tsx b/src/pages/Profile/components/NicknameField.tsx
new file mode 100644
index 0000000..c014742
--- /dev/null
+++ b/src/pages/Profile/components/NicknameField.tsx
@@ -0,0 +1,40 @@
+// src/pages/Profile/components/NicknameField.tsx
+
+interface NicknameFieldProps {
+  nickname: string;
+  onChange: (value: string) => void;
+  onCheck: () => void;
+}
+
+export default function NicknameField({
+  nickname,
+  onChange,
+  onCheck,
+}: NicknameFieldProps) {
+  return (
+    <div className="space-y-1">
+      <label
+        htmlFor="nickname"
+        className="block text-sm font-medium text-gray-700 lg:text-base"
+      >
+        닉네임
+      </label>
+      <div className="flex">
+        <input
+          id="nickname"
+          type="text"
+          value={nickname}
+          onChange={(e) => onChange(e.target.value)}
+          className="flex-1 rounded-l-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 lg:px-4 lg:py-3 lg:text-base"
+        />
+        <button
+          type="button"
+          onClick={onCheck}
+          className="rounded-r-md border border-gray-300 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 lg:px-6 lg:py-3 lg:text-base"
+        >
+          중복 확인
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Profile/components/Profile.tsx b/src/pages/Profile/components/Profile.tsx
deleted file mode 100644
index 304c830..0000000
--- a/src/pages/Profile/components/Profile.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import {
-  getTeamLogoByIdx,
-  getTeamNameByIdx,
-} from "../../../hooks/TeamNameChanger"; // 실제 경로에 맞게 수정!
-
-interface ProfileData {
-  userIdx: number;
-  nickname: string;
-  cheeringTeamId: number;
-  bio: string;
-  profileImageUrl: string;
-  userTemp: number;
-}
-
-interface MyMatchingPostDto {
-  matchingPostIdx: number;
-  userIdx: number;
-  gameIdx: number;
-  stadiumIdx: number;
-  teamIdx: number;
-  title: string;
-  context: string;
-  haveTicket: boolean;
-  createdAt: string;
-  isMatched: boolean;
-}
-
-export default function Profile() {
-  const navigate = useNavigate();
-
-  // 프로필 정보 상태
-  const [profile, setProfile] = useState<ProfileData | null>(null);
-  // 내가 쓴 매칭 글 상태
-  const [myPosts, setMyPosts] = useState<MyMatchingPostDto[]>([]);
-  const [isLoadingPosts, setIsLoadingPosts] = useState<boolean>(false);
-  const [postsError, setPostsError] = useState<string | null>(null);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const token = localStorage.getItem("jwtToken");
-        if (!token) throw new Error("토큰이 없습니다.");
-
-        // 1) 프로필 정보 조회
-        const profileRes = await fetch(
-          `${import.meta.env.VITE_API_URL}/mypage/myTemp`,
-          {
-            method: "GET",
-            credentials: "include",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${token}`,
-            },
-          }
-        );
-        if (!profileRes.ok)
-          throw new Error(`프로필 조회 실패: ${profileRes.status}`);
-        const profileData: ProfileData = await profileRes.json();
-        setProfile(profileData);
-
-        // 2) 내가 쓴 매칭 글 목록 조회 (/mypage/myPost 호출)
-        setIsLoadingPosts(true);
-        setPostsError(null);
-
-        const postsRes = await fetch(
-          `${import.meta.env.VITE_API_URL}/mypage/myPost`,
-          {
-            method: "GET",
-            credentials: "include",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${token}`,
-            },
-          }
-        );
-        if (!postsRes.ok)
-          throw new Error(`내 글 조회 실패: ${postsRes.status}`);
-        const postsData: MyMatchingPostDto[] = await postsRes.json();
-        setMyPosts(postsData);
-      } catch (err: any) {
-        console.error("프로필 또는 매칭 글 불러오기 실패:", err);
-        setPostsError("내가 쓴 매칭 글을 불러오는 중 오류가 발생했습니다.");
-      } finally {
-        setIsLoadingPosts(false);
-      }
-    })();
-  }, []);
-
-  // 팀명/로고 파생 값
-  const cheeringTeamName =
-    profile?.cheeringTeamId !== undefined && profile?.cheeringTeamId !== null
-      ? getTeamNameByIdx(profile.cheeringTeamId)
-      : "로딩 중";
-  const cheeringTeamLogo =
-    profile?.cheeringTeamId !== undefined && profile?.cheeringTeamId !== null
-      ? getTeamLogoByIdx(profile.cheeringTeamId)
-      : "/images/default_team_emb.png";
-
-  return (
-    <>
-      {/* 헤더 배너 */}
-      <section className="relative mb-8 h-48 w-full bg-blue-900">
-        <div className="bg-opacity-75 absolute inset-0 bg-blue-900" />
-        <div className="relative flex h-full items-start px-8 pt-6">
-          {/* 프로필 + 소개 */}
-          <div className="flex items-start space-x-6">
-            <img
-              src={profile?.profileImageUrl || "/images/user_avatar.png"}
-              alt="프로필"
-              className="h-24 w-24 rounded-full border-4 border-white object-cover"
-            />
-            <div className="text-white">
-              <div className="flex items-center space-x-2">
-                <h1 className="text-2xl font-bold">
-                  {profile?.nickname || "로딩 중..."}
-                </h1>
-                <span className="rounded-full bg-white px-2 py-0.5 text-xs font-medium text-blue-900">
-                  {cheeringTeamName}
-                </span>
-              </div>
-              <p className="mt-1 text-sm">{profile?.bio || "자기소개가 없습니다."}</p>
-              {/* 수정/설정 버튼 */}
-              <div className="mt-3 flex items-center space-x-3">
-                <button
-                  onClick={() => navigate("/mypage/edit")}
-                  className="bg-opacity-20 hover:bg-opacity-30 rounded-full bg-blue p-2 transition"
-                >
-                  <img
-                    src="/images/modify_btn.png"
-                    alt="Edit"
-                    className="h-5 w-5"
-                  />
-                </button>
-                <button
-                  onClick={() => navigate("/mypage/info")}
-                  className="bg-opacity-20 hover:bg-opacity-30 rounded-full bg-blue p-2 transition"
-                >
-                  <img
-                    src="/images/setting_btn.png"
-                    alt="Settings"
-                    className="h-5 w-5"
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-          {/* 팀 엠블럼 */}
-          <div className="ml-auto flex h-full items-center pb-4">
-            <img
-              src={cheeringTeamLogo}
-              alt="팀 엠블럼"
-              className="h-24 w-24 object-contain"
-              onError={(e) => {
-                e.currentTarget.src = "/images/default_team_emb.png";
-              }}
-            />
-          </div>
-        </div>
-      </section>
-
-      {/* 직관 온도 */}
-      <section className="mb-8 rounded-xl bg-white p-6 shadow-sm">
-        <div className="mb-4 flex items-center justify-between">
-          <span className="text-lg font-medium text-gray-800">직관 온도</span>
-          <span className="text-lg font-semibold text-red-500">
-            {profile?.userTemp !== undefined && profile?.userTemp !== null
-              ? `${profile.userTemp.toFixed(1)}℃`
-              : "–"}
-          </span>
-        </div>
-        <div className="relative h-3 overflow-hidden rounded-full bg-gray-200">
-          <div
-            className="absolute top-0 left-0 h-full bg-red-500"
-            style={{
-              width:
-                profile?.userTemp !== undefined && profile?.userTemp !== null
-                  ? `${(profile.userTemp / 50) * 100}%`
-                  : "0%",
-            }}
-          />
-        </div>
-      </section>
-
-      {/* 작성한 매칭 글 */}
-      <section className="rounded-xl bg-white p-6 shadow-sm">
-        <h2 className="mb-4 text-lg font-medium text-gray-800">
-          작성한 매칭 글
-        </h2>
-        {isLoadingPosts && (
-          <p className="text-center text-gray-500">불러오는 중...</p>
-        )}
-        {postsError && (
-          <p className="text-center text-red-500">{postsError}</p>
-        )}
-        {!isLoadingPosts && !postsError && myPosts.length === 0 && (
-          <p className="text-center text-gray-500">
-            작성한 매칭 글이 없습니다.
-          </p>
-        )}
-        {!isLoadingPosts && !postsError && myPosts.length > 0 && (
-          <div className="space-y-4">
-            {myPosts.map((post) => (
-              <div
-                key={post.matchingPostIdx}
-                className="flex items-start justify-between rounded-xl bg-white p-6 shadow-sm hover:bg-gray-50 cursor-pointer"
-                onClick={() =>
-                  navigate(`/matching/articles/${post.matchingPostIdx}`)
-                }
-              >
-                <div>
-                  <div className="mb-2 flex items-center space-x-2">
-                    <div className="h-8 w-8 rounded-full bg-gray-200" />
-                    <span className="text-sm text-gray-600">
-                      {profile?.nickname || ""} ·{" "}
-                      {new Date(post.createdAt).toLocaleDateString("ko-KR")}
-                    </span>
-                  </div>
-                  <h3 className="mb-1 text-base font-semibold">
-                    {post.title}
-                  </h3>
-                  <p className="text-sm text-gray-500">
-                    {post.context.length > 30
-                      ? post.context.slice(0, 30) + "…"
-                      : post.context}
-                  </p>
-                </div>
-                <div className="space-y-2 text-right">
-                  <div className="flex flex-col items-end space-y-1">
-                    <span className="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-600">
-                      {cheeringTeamName}
-                    </span>
-                    <span className="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-600">
-                      {post.haveTicket ? "티켓 있음" : "티켓 없음"}
-                    </span>
-                  </div>
-                  <span className="text-sm text-gray-400">
-                    {new Date(post.createdAt).toLocaleDateString("ko-KR")}
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </section>
-    </>
-  );
-}
diff --git a/src/pages/Profile/components/SubmitButton.tsx b/src/pages/Profile/components/SubmitButton.tsx
new file mode 100644
index 0000000..0c3fdbd
--- /dev/null
+++ b/src/pages/Profile/components/SubmitButton.tsx
@@ -0,0 +1,24 @@
+// src/pages/Profile/components/SubmitButton.tsx
+
+
+interface SubmitButtonProps {
+  disabled?: boolean;
+}
+
+export default function SubmitButton({ disabled = false }: SubmitButtonProps) {
+  return (
+    <div className="text-center">
+      <button
+        type="submit"
+        disabled={disabled}
+        className={`rounded-md px-6 py-2 text-white text-sm ${
+          disabled
+            ? "bg-gray-400 cursor-not-allowed"
+            : "bg-black hover:bg-gray-800"
+        } lg:px-8 lg:py-3 lg:text-base`}
+      >
+        변경사항 저장
+      </button>
+    </div>
+  );
+}
diff --git a/src/pages/Profile/components/Teamselect.tsx b/src/pages/Profile/components/Teamselect.tsx
new file mode 100644
index 0000000..76fc902
--- /dev/null
+++ b/src/pages/Profile/components/Teamselect.tsx
@@ -0,0 +1,36 @@
+// src/pages/Profile/components/TeamSelect.tsx
+
+interface TeamSelectProps {
+  team: string;
+  teams: string[];
+  onChange: (value: string) => void;
+}
+
+export default function TeamSelect({
+  team,
+  teams,
+  onChange,
+}: TeamSelectProps) {
+  return (
+    <div className="space-y-1">
+      <label
+        htmlFor="team"
+        className="block text-sm font-medium text-gray-700 lg:text-base"
+      >
+        응원팀
+      </label>
+      <select
+        id="team"
+        value={team}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 lg:px-4 lg:py-3 lg:text-base"
+      >
+        {teams.map((t) => (
+          <option key={t} value={t}>
+            {t}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/src/pages/Profile/components/WithdrawModal.tsx b/src/pages/Profile/components/WithdrawModal.tsx
new file mode 100644
index 0000000..aef1f60
--- /dev/null
+++ b/src/pages/Profile/components/WithdrawModal.tsx
@@ -0,0 +1,47 @@
+// src/pages/Profile/components/WithdrawModal.tsx
+import { X } from "lucide-react";
+
+interface WithdrawModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export default function WithdrawModal({
+  isOpen,
+  onClose,
+  onConfirm,
+}: WithdrawModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
+      <div className="relative w-full max-w-sm rounded-xl bg-white p-6 shadow-lg">
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
+        >
+          <X size={20} />
+        </button>
+        <h2 className="mb-2 text-xl font-semibold text-gray-800">회원 탈퇴</h2>
+        <p className="mb-6 text-center text-gray-600">
+          탈퇴 시, 모든 데이터가 영구적으로 삭제됩니다.
+        </p>
+        <div className="flex justify-center space-x-4">
+          <button
+            onClick={onClose}
+            className="flex-1 rounded-lg border border-gray-300 py-2 text-gray-700 hover:bg-gray-100"
+          >
+            취소하기
+          </button>
+          <button
+            onClick={onConfirm}
+            className="flex-1 rounded-lg bg-red-500 py-2 text-white hover:bg-red-600"
+          >
+            탈퇴하기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}