From 7eb6f6e27648f163027b1c3a1662a1ca624f7475 Mon Sep 17 00:00:00 2001
From: shinwokkang <tlsdnr303@gmail.com>
Date: Sat, 24 Jan 2026 01:10:49 +0900
Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=20=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=95=BD=EA=B4=80=EB=8F=99=EC=9D=98=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base-ui/Join/JoinLayout.tsx    |   2 +-
 .../steps/TermsAgreement/TermsAgreement.tsx   |  33 ++++-
 .../base-ui/Join/steps/TermsItem.tsx          |   6 +-
 .../base-ui/Join/steps/TermsList.tsx          |   2 +-
 src/components/base-ui/Login/LoginModal.tsx   |   9 +-
 .../base-ui/Signup/SignupTerms.module.css     | 137 ++++++++++++++++++
 src/components/base-ui/Signup/SignupTerms.tsx | 107 ++++++++++++++
 src/lib/api/client.ts                         |   8 +-
 8 files changed, 288 insertions(+), 16 deletions(-)
 create mode 100644 src/components/base-ui/Signup/SignupTerms.module.css
 create mode 100644 src/components/base-ui/Signup/SignupTerms.tsx

diff --git a/src/components/base-ui/Join/JoinLayout.tsx b/src/components/base-ui/Join/JoinLayout.tsx
index 6bf57fa..169444e 100644
--- a/src/components/base-ui/Join/JoinLayout.tsx
+++ b/src/components/base-ui/Join/JoinLayout.tsx
@@ -10,7 +10,7 @@ const JoinLayout: React.FC<JoinLayoutProps> = ({ children }) => {
       className="flex flex-col items-center justify-center w-full min-h-screen pb-[75px] bg-center bg-cover bg-no-repeat"
       style={{ backgroundImage: `url('/background.png')` }}
     >
-      <div className="flex flex-col items-center w-[766px] px-[56px] py-[99px] gap-[100px] rounded-[8px] bg-White">
+      <div className="relative flex flex-col items-center w-[352px] h-[720px] px-[41px] md:w-[calc(100%-80px)] md:max-w-[766px] md:h-auto md:min-h-0 md:px-0 md:py-[99px] md:gap-0 rounded-xl bg-white shadow-lg mx-auto">
         {children}
       </div>
     </div>
diff --git a/src/components/base-ui/Join/steps/TermsAgreement/TermsAgreement.tsx b/src/components/base-ui/Join/steps/TermsAgreement/TermsAgreement.tsx
index 50c5d00..1e92c39 100644
--- a/src/components/base-ui/Join/steps/TermsAgreement/TermsAgreement.tsx
+++ b/src/components/base-ui/Join/steps/TermsAgreement/TermsAgreement.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
+import { useRouter } from "next/navigation";
 import Image from "next/image";
 import JoinHeader from "../../JoinHeader";
 import JoinButton from "../../JoinButton";
@@ -27,6 +28,7 @@ interface TermsAgreementProps {
 }
 
 const TermsAgreement: React.FC<TermsAgreementProps> = ({ onNext }) => {
+  const router = useRouter();
   const initialAgreements = TERMS_DATA.reduce((acc, term) => {
     acc[term.id] = false;
     return acc;
@@ -56,9 +58,23 @@ const TermsAgreement: React.FC<TermsAgreementProps> = ({ onNext }) => {
     setAgreements(newAgreements);
   };
 
+  const handleClose = () => {
+    router.back();
+  };
+
   return (
-    <div className="flex flex-col items-center w-[766px] px-[56px] py-[99px] gap-[101px] bg-white rounded-[8px]">
-      <JoinHeader title="약관 동의" />
+    <div className="flex flex-col items-center w-full h-full justify-between md:justify-start md:px-[clamp(32px,8vw,56px)] md:gap-[clamp(60px,10vh,100px)]">
+      {/* 닫기 버튼 */}
+      <button
+        type="button"
+        onClick={handleClose}
+        className="absolute top-6 right-6"
+      >
+        <Image src="/cancle_button.svg" alt="닫기" width={24} height={24} />
+      </button>
+      <div className="mt-[60px] md:mt-0">
+        <JoinHeader title="약관 동의" />
+      </div>{" "}
       <TermsList>
         <div className="flex flex-col gap-8 pb-3">
           {TERMS_DATA.map((term) => (
@@ -75,9 +91,9 @@ const TermsAgreement: React.FC<TermsAgreementProps> = ({ onNext }) => {
 
         <div className="w-full h-[1px] bg-[#D9D9D9]" />
 
-        <label className="flex items-center justify-between w-full cursor-pointer select-none">
+        <label className="items-center justify-between hidden w-full cursor-pointer select-none md:flex">
           <span className="text-[#000000] text-[19.861px] font-normal leading-[15.605px]">
-            전체동의
+            <span className="hidden md:inline">전체동의</span>
           </span>
           <div className="relative flex items-center justify-center w-[24px] h-[24px]">
             <input
@@ -86,6 +102,7 @@ const TermsAgreement: React.FC<TermsAgreementProps> = ({ onNext }) => {
               checked={allAgreed}
               onChange={handleAllAgreementChange}
               className="sr-only peer"
+              disabled={false} // 모바일에서 숨겨지더라도 기능은 유지하거나, 필요시 disabled 처리
             />
             <div className="w-full h-full peer-checked:hidden">
               <Image
@@ -93,6 +110,7 @@ const TermsAgreement: React.FC<TermsAgreementProps> = ({ onNext }) => {
                 alt="Unchecked"
                 width={24}
                 height={24}
+                className="hidden md:block"
               />
             </div>
             <div className="hidden w-full h-full peer-checked:block">
@@ -101,12 +119,17 @@ const TermsAgreement: React.FC<TermsAgreementProps> = ({ onNext }) => {
                 alt="Checked"
                 width={24}
                 height={24}
+                className="hidden md:block"
               />
             </div>
           </div>
         </label>
       </TermsList>
-      <JoinButton disabled={!isButtonEnabled} onClick={handleNext}>
+      <JoinButton
+        disabled={!isButtonEnabled}
+        onClick={handleNext}
+        className="w-[270px] mb-[40px] md:w-[526px] md:mb-0"
+      >
         다음
       </JoinButton>
     </div>
diff --git a/src/components/base-ui/Join/steps/TermsItem.tsx b/src/components/base-ui/Join/steps/TermsItem.tsx
index 7999b80..3f06255 100644
--- a/src/components/base-ui/Join/steps/TermsItem.tsx
+++ b/src/components/base-ui/Join/steps/TermsItem.tsx
@@ -17,9 +17,11 @@ const TermsItem: React.FC<TermsItemProps> = ({
   onChange,
 }) => {
   return (
-    <label className="flex items-center justify-between w-full cursor-pointer select-none">
+    <label className="flex flex-col items-start gap-[12px] w-full cursor-pointer select-none md:flex-row md:justify-between md:items-center md:gap-0">
       <span className="text-[#353535] text-[19.861px] font-normal leading-[15.605px]">
-        {label} ({required ? "필수" : "선택"})
+        <span className="text-[14px] md:text-[clamp(16px,2.5vw,19.861px)]">
+          {label} ({required ? "필수" : "선택"})
+        </span>
       </span>
       <div className="relative flex items-center justify-center w-[24px] h-[24px]">
         <input
diff --git a/src/components/base-ui/Join/steps/TermsList.tsx b/src/components/base-ui/Join/steps/TermsList.tsx
index 0b4df9a..78b8f6c 100644
--- a/src/components/base-ui/Join/steps/TermsList.tsx
+++ b/src/components/base-ui/Join/steps/TermsList.tsx
@@ -9,7 +9,7 @@ interface TermsListProps {
 
 const TermsList: React.FC<TermsListProps> = ({ children }) => {
   return (
-    <div className="flex flex-col w-full min-h-[386px] p-10 gap-8 rounded-xl bg-background">
+    <div className="flex flex-col w-[270px] min-h-[280px] p-[20px] gap-[24px] md:w-full md:min-h-[386px] md:p-10 md:gap-10 rounded-xl bg-[#F9F7F6]">
       {children}
     </div>
   );
diff --git a/src/components/base-ui/Login/LoginModal.tsx b/src/components/base-ui/Login/LoginModal.tsx
index c7dbe99..0350eec 100644
--- a/src/components/base-ui/Login/LoginModal.tsx
+++ b/src/components/base-ui/Login/LoginModal.tsx
@@ -2,6 +2,7 @@
 
 import Image from "next/image";
 import React, { useEffect } from "react";
+import { useRouter } from "next/navigation";
 import LoginLogo from "@/components/base-ui/Login/LoginLogo";
 import styles from "@/components/base-ui/Login/LoginModal.module.css";
 import useLoginForm from "@/components/base-ui/Login/useLoginForm";
@@ -18,6 +19,7 @@ export default function LoginModal({
   onFindAccount,
   onSignUp,
 }: Props) {
+  const router = useRouter();
   const {
     form,
     errors,
@@ -36,6 +38,11 @@ export default function LoginModal({
     };
   }, []);
 
+  const handleSignUp = () => {
+    if (onSignUp) onSignUp();
+    router.push("/signup");
+  };
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
       <div className={styles.container}>
@@ -135,7 +142,7 @@ export default function LoginModal({
           {/* 하단 안내 문구 */}
           <p className={styles.footerText}>
             아직 회원이 아니신가요?{" "}
-            <span className={styles.footerLink} onClick={onSignUp}>
+            <span className={styles.footerLink} onClick={handleSignUp}>
               회원가입하러가기
             </span>
           </p>
diff --git a/src/components/base-ui/Signup/SignupTerms.module.css b/src/components/base-ui/Signup/SignupTerms.module.css
new file mode 100644
index 0000000..ebf1538
--- /dev/null
+++ b/src/components/base-ui/Signup/SignupTerms.module.css
@@ -0,0 +1,137 @@
+/* src/components/base-ui/Signup/SignupTerms.module.css */
+
+/* [Container] Tablet Default (Min-Width: 768px) */
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 700px;
+  height: 1004px;
+  padding: 56px;
+  background-color: var(--White);
+  border-radius: 8px;
+  margin: 0 auto;
+  position: relative;
+}
+
+/* [Close Icon] */
+.closeIcon {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+/* [Header] */
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  margin-bottom: 40px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--Primary_1);
+  line-height: 135%;
+}
+
+/* [Terms List Container] */
+.termsContainer {
+  display: flex;
+  flex-direction: column;
+  width: 584px;
+  height: 386px;
+  padding: 40px;
+  gap: 32px;
+  border-radius: 12px;
+  background-color: #f9f7f6;
+  margin-bottom: 40px;
+}
+
+/* [Terms Item] */
+.termItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+
+.termLabel {
+  font-size: 19.86px;
+  color: #353535;
+  font-weight: 400;
+}
+
+.checkbox {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--Gray_2);
+}
+
+/* [Next Button] */
+.nextButton {
+  width: 526px;
+  height: 48px;
+  border-radius: 8px;
+  background-color: var(--Primary_1);
+  color: var(--White);
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: filter 0.2s;
+}
+
+.nextButton:disabled {
+  background-color: var(--Gray_2);
+  cursor: not-allowed;
+}
+
+/* =========================================
+     Mobile Responsive (Max-Width: 767px)
+     ========================================= */
+@media (max-width: 767px) {
+  .container {
+    width: 352px;
+    height: 650px;
+    padding: 20px;
+  }
+
+  .header {
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+
+  .title {
+    font-size: 20px;
+  }
+
+  .termsContainer {
+    width: 270px;
+    height: 297px;
+    padding: 20px;
+    gap: 24px;
+  }
+
+  .termLabel {
+    font-size: 12px;
+  }
+
+  .nextButton {
+    width: 270px;
+  }
+}
diff --git a/src/components/base-ui/Signup/SignupTerms.tsx b/src/components/base-ui/Signup/SignupTerms.tsx
new file mode 100644
index 0000000..f63b26e
--- /dev/null
+++ b/src/components/base-ui/Signup/SignupTerms.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import React, { useState } from "react";
+import Image from "next/image";
+import styles from "./SignupTerms.module.css";
+import LoginLogo from "@/components/base-ui/Login/LoginLogo";
+
+const TERMS_DATA = [
+  {
+    id: "privacy",
+    label: "서비스 이용을 위한 필수 개인정보 수집·이용 동의",
+    required: true,
+  },
+  { id: "terms", label: "책모 이용약관 동의", required: true },
+  { id: "thirdParty", label: "개인정보 제3자 제공 동의", required: false },
+  {
+    id: "marketing",
+    label: "마케팅 및 이벤트 정보 수신 동의",
+    required: false,
+  },
+];
+
+export default function SignupTerms() {
+  const [agreements, setAgreements] = useState<Record<string, boolean>>({
+    privacy: false,
+    terms: false,
+    thirdParty: false,
+    marketing: false,
+  });
+
+  const handleCheck = (id: string) => {
+    setAgreements((prev) => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  const handleAllCheck = () => {
+    const allChecked = Object.values(agreements).every(Boolean);
+    const newStatus = !allChecked;
+    const newAgreements = Object.keys(agreements).reduce((acc, key) => {
+      acc[key] = newStatus;
+      return acc;
+    }, {} as Record<string, boolean>);
+    setAgreements(newAgreements);
+  };
+
+  const isAllRequiredChecked = TERMS_DATA.filter((t) => t.required).every(
+    (t) => agreements[t.id]
+  );
+
+  const isAllChecked = Object.values(agreements).every(Boolean);
+
+  return (
+    <div className={styles.container}>
+      {/* 닫기 버튼 */}
+      <button type="button" className={styles.closeIcon}>
+        <Image src="/cancle_button.svg" alt="닫기" width={24} height={24} />
+      </button>
+
+      {/* 헤더 */}
+      <div className={styles.header}>
+        <LoginLogo />
+        <h2 className={styles.title}>약관 동의</h2>
+      </div>
+
+      {/* 약관 목록 */}
+      <div className={styles.termsContainer}>
+        {TERMS_DATA.map((term) => (
+          <div
+            key={term.id}
+            className={styles.termItem}
+            onClick={() => handleCheck(term.id)}
+          >
+            <span className={styles.termLabel}>
+              {term.label} ({term.required ? "필수" : "선택"})
+            </span>
+            <input
+              type="checkbox"
+              checked={agreements[term.id]}
+              readOnly
+              className={styles.checkbox}
+            />
+          </div>
+        ))}
+        <div className={styles.divider} />
+        <div className={styles.termItem} onClick={handleAllCheck}>
+          <span className={styles.termLabel} style={{ fontWeight: 600 }}>
+            전체동의
+          </span>
+          <input
+            type="checkbox"
+            checked={isAllChecked}
+            readOnly
+            className={styles.checkbox}
+          />
+        </div>
+      </div>
+
+      {/* 다음 버튼 */}
+      <button
+        type="button"
+        className={styles.nextButton}
+        disabled={!isAllRequiredChecked}
+      >
+        다음
+      </button>
+    </div>
+  );
+}
diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
index 065b32a..344cc58 100644
--- a/src/lib/api/client.ts
+++ b/src/lib/api/client.ts
@@ -3,6 +3,7 @@ import Cookies from "js-cookie";
 import { useAuthStore } from "@/store/useAuthStore";
 import toast from "react-hot-toast";
 import { getErrorMessage } from "./errorMapper";
+import { ApiError } from "./ApiError";
 
 interface RequestOptions extends RequestInit {
   headers?: Record<string, string>;
@@ -85,12 +86,7 @@ async function request<T>(
         "요청 처리 중 오류가 발생했습니다.";
 
       // 에러 객체를 확장하여 throw
-      const error: any = new Error(errorMessage);
-      error.code = errorCode;
-      error.response = data;
-      // 비즈니스 로직에서 catch 할 수 있도록 그대로 반환하거나 throw
-      // 현재 구조상 useLoginForm 등에서 data.isSuccess를 체크하므로 data를 반환
-      return data as T;
+      throw new ApiError(errorMessage, errorCode, data);
     }
 
     return data;

From 2660a27872094d50941ab71fd4ed7f9ebf506435 Mon Sep 17 00:00:00 2001
From: shinwokkang <tlsdnr303@gmail.com>
Date: Sat, 24 Jan 2026 02:35:13 +0900
Subject: [PATCH 2/7] =?UTF-8?q?refactor:=20=EC=95=BD=EA=B4=80=20=EB=8F=99?=
 =?UTF-8?q?=EC=9D=98=20=EB=B0=98=EC=9D=91=ED=98=95=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base-ui/Join/JoinLayout.tsx    |   9 +-
 .../steps/TermsAgreement/TermsAgreement.tsx   | 108 +++++++++---------
 .../base-ui/Join/steps/TermsList.tsx          |   4 +-
 3 files changed, 67 insertions(+), 54 deletions(-)

diff --git a/src/components/base-ui/Join/JoinLayout.tsx b/src/components/base-ui/Join/JoinLayout.tsx
index 169444e..cfecc9f 100644
--- a/src/components/base-ui/Join/JoinLayout.tsx
+++ b/src/components/base-ui/Join/JoinLayout.tsx
@@ -1,3 +1,5 @@
+// JoinLayout.tsx
+
 import React from "react";
 
 interface JoinLayoutProps {
@@ -10,7 +12,12 @@ const JoinLayout: React.FC<JoinLayoutProps> = ({ children }) => {
       className="flex flex-col items-center justify-center w-full min-h-screen pb-[75px] bg-center bg-cover bg-no-repeat"
       style={{ backgroundImage: `url('/background.png')` }}
     >
-      <div className="relative flex flex-col items-center w-[352px] h-[720px] px-[41px] md:w-[calc(100%-80px)] md:max-w-[766px] md:h-auto md:min-h-0 md:px-0 md:py-[99px] md:gap-0 rounded-xl bg-white shadow-lg mx-auto">
+      {/* 
+        Container Layout Rules:
+        - Mobile: Fixed w-[352px], Fluid px-[24px]
+        - Desktop: Fixed w-[766px], Strict Padding px-[56px] py-[99px]
+      */}
+      <div className="relative flex flex-col items-center w-[352px] h-[720px] px-[24px] md:w-[766px] md:h-auto md:min-h-0 md:px-[56px] md:py-[99px] md:gap-0 rounded-xl bg-white shadow-lg mx-auto">
         {children}
       </div>
     </div>
diff --git a/src/components/base-ui/Join/steps/TermsAgreement/TermsAgreement.tsx b/src/components/base-ui/Join/steps/TermsAgreement/TermsAgreement.tsx
index 1e92c39..c0524da 100644
--- a/src/components/base-ui/Join/steps/TermsAgreement/TermsAgreement.tsx
+++ b/src/components/base-ui/Join/steps/TermsAgreement/TermsAgreement.tsx
@@ -1,3 +1,5 @@
+// TermsAgreement.tsx
+
 "use client";
 
 import React, { useState } from "react";
@@ -63,7 +65,7 @@ const TermsAgreement: React.FC<TermsAgreementProps> = ({ onNext }) => {
   };
 
   return (
-    <div className="flex flex-col items-center w-full h-full justify-between md:justify-start md:px-[clamp(32px,8vw,56px)] md:gap-[clamp(60px,10vh,100px)]">
+    <div className="relative flex flex-col items-center mx-auto w-full max-w-[766px] bg-white rounded-[8px] px-6 py-10 md:px-[40px] md:py-[60px] lg:px-[56px] lg:py-[99px]">
       {/* 닫기 버튼 */}
       <button
         type="button"
@@ -72,63 +74,65 @@ const TermsAgreement: React.FC<TermsAgreementProps> = ({ onNext }) => {
       >
         <Image src="/cancle_button.svg" alt="닫기" width={24} height={24} />
       </button>
-      <div className="mt-[60px] md:mt-0">
-        <JoinHeader title="약관 동의" />
-      </div>{" "}
-      <TermsList>
-        <div className="flex flex-col gap-8 pb-3">
-          {TERMS_DATA.map((term) => (
-            <TermsItem
-              key={term.id}
-              id={term.id}
-              label={term.label}
-              required={term.required}
-              checked={!!agreements[term.id]}
-              onChange={handleAgreementChange}
-            />
-          ))}
-        </div>
-
-        <div className="w-full h-[1px] bg-[#D9D9D9]" />
-
-        <label className="items-center justify-between hidden w-full cursor-pointer select-none md:flex">
-          <span className="text-[#000000] text-[19.861px] font-normal leading-[15.605px]">
-            <span className="hidden md:inline">전체동의</span>
-          </span>
-          <div className="relative flex items-center justify-center w-[24px] h-[24px]">
-            <input
-              type="checkbox"
-              id="allAgreed"
-              checked={allAgreed}
-              onChange={handleAllAgreementChange}
-              className="sr-only peer"
-              disabled={false} // 모바일에서 숨겨지더라도 기능은 유지하거나, 필요시 disabled 처리
-            />
-            <div className="w-full h-full peer-checked:hidden">
-              <Image
-                src="/CheckBox_No.svg"
-                alt="Unchecked"
-                width={24}
-                height={24}
-                className="hidden md:block"
+
+      <JoinHeader title="약관 동의" />
+
+      {/* Content Wrapper: Mobile -> Tablet -> Desktop Spacing */}
+      <div className="flex flex-col w-full mt-10 mb-10 md:mt-[60px] md:mb-[80px] lg:mt-[90px] lg:mb-[130px]">
+        <TermsList>
+          <div className="flex flex-col w-full gap-8 pb-3">
+            {TERMS_DATA.map((term) => (
+              <TermsItem
+                key={term.id}
+                id={term.id}
+                label={term.label}
+                required={term.required}
+                checked={!!agreements[term.id]}
+                onChange={handleAgreementChange}
               />
-            </div>
-            <div className="hidden w-full h-full peer-checked:block">
-              <Image
-                src="/CheckBox_Yes.svg"
-                alt="Checked"
-                width={24}
-                height={24}
-                className="hidden md:block"
+            ))}
+          </div>
+
+          <div className="w-full h-[1px] bg-[#D9D9D9]" />
+
+          {/* 전체 동의 */}
+          <label className="flex items-center justify-between w-full cursor-pointer select-none">
+            <span className="text-[#000000] text-[16px] md:text-[19.861px] font-normal leading-[15.605px]">
+              전체동의
+            </span>
+            <div className="relative flex items-center justify-center w-[24px] h-[24px]">
+              <input
+                type="checkbox"
+                id="allAgreed"
+                checked={allAgreed}
+                onChange={handleAllAgreementChange}
+                className="sr-only peer"
               />
+              <div className="w-full h-full peer-checked:hidden">
+                <Image
+                  src="/CheckBox_No.svg"
+                  alt="Unchecked"
+                  width={24}
+                  height={24}
+                />
+              </div>
+              <div className="hidden w-full h-full peer-checked:block">
+                <Image
+                  src="/CheckBox_Yes.svg"
+                  alt="Checked"
+                  width={24}
+                  height={24}
+                />
+              </div>
             </div>
-          </div>
-        </label>
-      </TermsList>
+          </label>
+        </TermsList>
+      </div>
+
       <JoinButton
         disabled={!isButtonEnabled}
         onClick={handleNext}
-        className="w-[270px] mb-[40px] md:w-[526px] md:mb-0"
+        className="w-full md:w-[526px]"
       >
         다음
       </JoinButton>
diff --git a/src/components/base-ui/Join/steps/TermsList.tsx b/src/components/base-ui/Join/steps/TermsList.tsx
index 78b8f6c..b8a64b9 100644
--- a/src/components/base-ui/Join/steps/TermsList.tsx
+++ b/src/components/base-ui/Join/steps/TermsList.tsx
@@ -1,3 +1,5 @@
+// TermsList.tsx
+
 /**
  * 약관 목록을 감싸는 회색 박스 영역.
  */
@@ -9,7 +11,7 @@ interface TermsListProps {
 
 const TermsList: React.FC<TermsListProps> = ({ children }) => {
   return (
-    <div className="flex flex-col w-[270px] min-h-[280px] p-[20px] gap-[24px] md:w-full md:min-h-[386px] md:p-10 md:gap-10 rounded-xl bg-[#F9F7F6]">
+    <div className="flex flex-col w-full min-h-[280px] gap-6 rounded-xl bg-[#F9F7F6] md:min-h-[386px] md:gap-10 p-5 md:p-[30px] lg:p-[40px]">
       {children}
     </div>
   );

From b21b008379aa7567ec19002b72d8c80ce8eaee69 Mon Sep 17 00:00:00 2001
From: shinwokkang <tlsdnr303@gmail.com>
Date: Sat, 24 Jan 2026 03:04:15 +0900
Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9D=B8=EC=A6=9D=20=EB=B0=8F=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EC=84=A4=EC=A0=95=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EmailVerification/EmailVerification.tsx   | 49 +++++++-----
 .../steps/PasswordEntry/PasswordEntry.tsx     | 75 +++++++++++++------
 .../steps/PasswordEntry/usePasswordEntry.ts   | 22 +++---
 .../Join/steps/useEmailVerification.ts        | 29 ++++++-
 4 files changed, 124 insertions(+), 51 deletions(-)

diff --git a/src/components/base-ui/Join/steps/EmailVerification/EmailVerification.tsx b/src/components/base-ui/Join/steps/EmailVerification/EmailVerification.tsx
index e29ac5c..422dafd 100644
--- a/src/components/base-ui/Join/steps/EmailVerification/EmailVerification.tsx
+++ b/src/components/base-ui/Join/steps/EmailVerification/EmailVerification.tsx
@@ -1,12 +1,15 @@
+// c:\Users\shinwookKang\Desktop\CheckMo\FE\src\components\base-ui\Join\steps\EmailVerification\EmailVerification.tsx
+
+"use client";
+
 import React from "react";
 import JoinHeader from "../../JoinHeader";
 import JoinButton from "../../JoinButton";
 import JoinInput from "../../JoinInput";
 import { useEmailVerification } from "../useEmailVerification";
-import Toast from "@/components/common/Toast";
 
 interface EmailVerificationProps {
-  onNext?: () => void;
+  onNext: () => void;
 }
 
 const EmailVerification: React.FC<EmailVerificationProps> = ({ onNext }) => {
@@ -22,16 +25,18 @@ const EmailVerification: React.FC<EmailVerificationProps> = ({ onNext }) => {
     isVerified,
     handleVerify,
     showToast,
-    setShowToast,
+    isToastVisible,
     formatTime,
   } = useEmailVerification();
 
   return (
-    <div className="relative flex flex-col items-center w-[766px] px-[56px] py-[99px] bg-white rounded-[8px]">
+    <div className="relative flex flex-col items-center mx-auto w-full max-w-[766px] bg-white rounded-[8px] px-6 py-10 md:px-[40px] md:py-[60px] lg:px-[56px] lg:py-[99px]">
       <JoinHeader title="이메일 인증" />
-      <div className="flex flex-col w-full mt-[90px] mb-[130px]">
-        {/* 이메일 입력 섹션 */}
-        <div className="flex flex-col items-center w-[526px] gap-[30px] mx-auto">
+
+      {/* Content Wrapper: Mobile(mt-10 mb-10) -> Tablet(mt-[60px] mb-[80px]) -> Desktop(mt-[90px] mb-[130px]) */}
+      <div className="flex flex-col w-full mt-10 mb-10 md:mt-[60px] md:mb-[80px] lg:mt-[90px] lg:mb-[130px]">
+        {/* Email Input Section */}
+        <div className="flex flex-col items-center w-full max-w-[526px] gap-[30px] mx-auto">
           <JoinInput
             label="이메일"
             type="email"
@@ -44,7 +49,7 @@ const EmailVerification: React.FC<EmailVerificationProps> = ({ onNext }) => {
             <button
               onClick={startTimer}
               disabled={!isEmailValid}
-              className={`flex justify-center items-center w-[284px] h-[48px] rounded-[8px] text-[14px] font-semibold leading-[145%] tracking-[-0.014px] ${
+              className={`flex justify-center items-center w-full max-w-[284px] h-[48px] rounded-[8px] text-[14px] font-semibold leading-[145%] tracking-[-0.014px] ${
                 isEmailValid
                   ? "bg-[#BBAA9B] text-[#FFF]"
                   : "bg-[#DADADA] text-[#8D8D8D]"
@@ -63,8 +68,8 @@ const EmailVerification: React.FC<EmailVerificationProps> = ({ onNext }) => {
           </div>
         </div>
 
-        {/* 인증번호 입력 섹션 */}
-        <div className="flex flex-col items-center w-[526px] gap-[30px] mx-auto mt-[53px]">
+        {/* Verification Code Section */}
+        <div className="flex flex-col items-center w-full max-w-[526px] gap-[30px] mx-auto mt-[53px]">
           <JoinInput
             label="인증번호"
             type="text"
@@ -76,7 +81,7 @@ const EmailVerification: React.FC<EmailVerificationProps> = ({ onNext }) => {
           <button
             onClick={handleVerify}
             disabled={!isCodeValid}
-            className={`flex justify-center items-center w-[284px] h-[48px] rounded-[8px] text-[14px] font-semibold leading-[145%] tracking-[-0.014px] ${
+            className={`flex justify-center items-center w-full max-w-[284px] h-[48px] rounded-[8px] text-[14px] font-semibold leading-[145%] tracking-[-0.014px] ${
               isCodeValid
                 ? "bg-[#BBAA9B] text-[#FFF]"
                 : "bg-[#DADADA] text-[#8D8D8D]"
@@ -89,15 +94,25 @@ const EmailVerification: React.FC<EmailVerificationProps> = ({ onNext }) => {
           </button>
         </div>
       </div>
-      {/* 하단 버튼 (임시로 클릭 시 다음 단계 이동 동작 연결) */}
-      <JoinButton onClick={onNext} disabled={!isVerified}>
+
+      <JoinButton
+        onClick={onNext}
+        disabled={!isVerified}
+        className="w-full md:w-[526px]"
+      >
         다음
       </JoinButton>
+
       {showToast && (
-        <Toast
-          message="인증이 완료되었습니다."
-          onClose={() => setShowToast(false)}
-        />
+        <div
+          className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 inline-flex justify-center items-center h-auto py-4 px-8 md:h-[88px] md:px-[138px] bg-[#31111D99] rounded-[24px] backdrop-blur-[1px] transition-opacity duration-300 ${
+            isToastVisible ? "opacity-100" : "opacity-0"
+          }`}
+        >
+          <span className="text-[#FFF] text-[16px] md:text-[18px] font-medium leading-[135%] tracking-[-0.018px] whitespace-nowrap">
+            인증이 완료되었습니다.
+          </span>
+        </div>
       )}
     </div>
   );
diff --git a/src/components/base-ui/Join/steps/PasswordEntry/PasswordEntry.tsx b/src/components/base-ui/Join/steps/PasswordEntry/PasswordEntry.tsx
index aa8fb23..5aecae4 100644
--- a/src/components/base-ui/Join/steps/PasswordEntry/PasswordEntry.tsx
+++ b/src/components/base-ui/Join/steps/PasswordEntry/PasswordEntry.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import JoinHeader from "../../JoinHeader";
 import JoinButton from "../../JoinButton";
@@ -5,7 +7,7 @@ import JoinInput from "../../JoinInput";
 import { usePasswordEntry } from "./usePasswordEntry";
 
 interface PasswordEntryProps {
-  onNext?: () => void;
+  onNext: () => void;
 }
 
 const PasswordEntry: React.FC<PasswordEntryProps> = ({ onNext }) => {
@@ -13,49 +15,78 @@ const PasswordEntry: React.FC<PasswordEntryProps> = ({ onNext }) => {
     password,
     confirmPassword,
     isValid,
+    isComplexityValid,
+    isMatch,
     handlePasswordChange,
     handleConfirmChange,
   } = usePasswordEntry();
+
   return (
-    <div className="relative flex flex-col items-center w-[766px] px-[56px] py-[99px] bg-white rounded-[8px]">
+    <div className="relative flex flex-col items-center mx-auto w-full max-w-[766px] bg-white rounded-[8px] px-6 py-10 md:px-[40px] md:py-[60px] lg:px-[56px] lg:py-[99px]">
       <JoinHeader title="비밀번호 입력" />
 
-      <div className="flex flex-col w-full mt-[120px] mb-[306px]">
-        {/* Main Container for Inputs */}
-        <div className="flex flex-col items-start w-[526px] gap-[13px] mx-auto">
-          {/* 비밀번호 입력 필드 (커스텀 라벨) */}
-          <div className="flex flex-col w-full gap-[13px]">
-            <div className="flex flex-row items-center gap-2">
+      {/* Content Wrapper: Mobile(mt-10 mb-10) -> Tablet(mt-[60px] mb-[80px]) -> Desktop(mt-[90px] mb-[130px]) */}
+      <div className="flex flex-col w-full mt-10 mb-10 md:mt-[60px] md:mb-[80px] lg:mt-[90px] lg:mb-[130px]">
+        <div className="flex flex-col items-center w-full max-w-[526px] gap-[30px] mx-auto">
+          {/* Password Input Section */}
+          <div className="flex flex-col w-full gap-2">
+            {/* Custom Label Layout for Password */}
+            <div className="flex flex-wrap items-end gap-2 mb-1">
               <span className="text-[#7B6154] font-sans text-[20px] font-semibold leading-[135%] tracking-[-0.02px]">
                 비밀번호
               </span>
-              <span className="text-[#8D8D8D] text-[12px] font-medium leading-[145%] tracking-[-0.012px]">
+              <span className="hidden lg:inline text-[#8D8D8D] text-[12px] font-medium leading-[145%] tracking-[-0.012px] mb-[3px]">
                 비밀번호는 6-12자, 영어 최소 1자 이상, 특수문자 최소 1자 이상
               </span>
             </div>
+
             <JoinInput
               type="password"
-              placeholder="비밀번호"
+              placeholder="비밀번호를 입력해주세요"
               value={password}
               onChange={handlePasswordChange}
-              className="border-[#EAE5E2] placeholder-[#BBB] text-[14px] font-normal"
+              className={`border-[#EAE5E2] placeholder-[#BBB] text-[14px] font-normal ${
+                !isComplexityValid && password.length > 0
+                  ? "border-red-500"
+                  : ""
+              }`}
+              hideLabel // Using custom label above
             />
+
+            {!isComplexityValid && password.length > 0 && (
+              <span className="text-red-500 text-[12px] ml-1">
+                비밀번호 형식이 올바르지 않습니다.
+              </span>
+            )}
           </div>
 
-          {/* 비밀번호 확인 입력 필드 */}
-          <JoinInput
-            type="password"
-            label="비밀번호 확인"
-            hideLabel
-            placeholder="비밀번호 확인"
-            value={confirmPassword}
-            onChange={handleConfirmChange}
-            className="border-[#EAE5E2] placeholder-[#BBB] text-[14px] font-normal"
-          />
+          {/* Confirm Password Input Section */}
+          <div className="flex flex-col w-full gap-2">
+            <JoinInput
+              label="비밀번호 확인"
+              type="password"
+              placeholder="비밀번호를 다시 입력해주세요"
+              value={confirmPassword}
+              onChange={handleConfirmChange}
+              className={`border-[#EAE5E2] placeholder-[#BBB] text-[14px] font-normal ${
+                !isMatch && confirmPassword.length > 0 ? "border-red-500" : ""
+              }`}
+            />
+
+            {!isMatch && confirmPassword.length > 0 && (
+              <span className="text-red-500 text-[12px] ml-1">
+                비밀번호가 일치하지 않습니다.
+              </span>
+            )}
+          </div>
         </div>
       </div>
 
-      <JoinButton onClick={onNext} disabled={!isValid}>
+      <JoinButton
+        onClick={onNext}
+        disabled={!isValid}
+        className="w-full md:w-[526px]"
+      >
         다음
       </JoinButton>
     </div>
diff --git a/src/components/base-ui/Join/steps/PasswordEntry/usePasswordEntry.ts b/src/components/base-ui/Join/steps/PasswordEntry/usePasswordEntry.ts
index 19f11f1..b1e5ada 100644
--- a/src/components/base-ui/Join/steps/PasswordEntry/usePasswordEntry.ts
+++ b/src/components/base-ui/Join/steps/PasswordEntry/usePasswordEntry.ts
@@ -1,18 +1,20 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 export const usePasswordEntry = () => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [isValid, setIsValid] = useState(false);
 
-  useEffect(() => {
-    // 6-12자, 영문 최소 1자, 특수문자 최소 1자
-    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^&*]).{6,12}$/;
-    const isPasswordValid = passwordRegex.test(password);
-    const isMatch = password === confirmPassword;
+  // 6-12자, 영문 최소 1자, 특수문자 최소 1자
+  const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^&*]).{6,12}$/;
 
-    setIsValid(isPasswordValid && isMatch && password.length > 0);
-  }, [password, confirmPassword]);
+  // Derived State (No useEffect)
+  const isComplexityValid = passwordRegex.test(password);
+  const isMatch = password === confirmPassword;
+  const isValid =
+    isComplexityValid &&
+    isMatch &&
+    password.length > 0 &&
+    confirmPassword.length > 0;
 
   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(e.target.value);
@@ -26,6 +28,8 @@ export const usePasswordEntry = () => {
     password,
     confirmPassword,
     isValid,
+    isComplexityValid,
+    isMatch,
     handlePasswordChange,
     handleConfirmChange,
   };
diff --git a/src/components/base-ui/Join/steps/useEmailVerification.ts b/src/components/base-ui/Join/steps/useEmailVerification.ts
index 9341b86..57cbe93 100644
--- a/src/components/base-ui/Join/steps/useEmailVerification.ts
+++ b/src/components/base-ui/Join/steps/useEmailVerification.ts
@@ -1,4 +1,5 @@
-// 이메일 UI 비즈니스 로직
+// c:\Users\shinwookKang\Desktop\CheckMo\FE\src\components\base-ui\Join\steps\useEmailVerification.tsx
+
 import { useState, useEffect } from "react";
 
 export const useEmailVerification = () => {
@@ -8,7 +9,10 @@ export const useEmailVerification = () => {
   const [verificationCode, setVerificationCode] = useState("");
   const [isCodeValid, setIsCodeValid] = useState(false);
   const [isVerified, setIsVerified] = useState(false);
-  const [showToast, setShowToast] = useState(false);
+
+  // Toast Animation State
+  const [showToast, setShowToast] = useState(false); // Controls mounting
+  const [isToastVisible, setIsToastVisible] = useState(false); // Controls opacity
 
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
@@ -54,6 +58,25 @@ export const useEmailVerification = () => {
     return () => clearInterval(interval);
   }, [timeLeft]);
 
+  useEffect(() => {
+    if (showToast) {
+      // 1. Mount (showToast=true) -> Wait 10ms -> Fade In (isToastVisible=true)
+      const showTimer = setTimeout(() => setIsToastVisible(true), 10);
+
+      // 2. Wait 3000ms -> Fade Out (isToastVisible=false)
+      const hideTimer = setTimeout(() => setIsToastVisible(false), 3000);
+
+      // 3. Wait 3300ms (allow transition) -> Unmount (showToast=false)
+      const unmountTimer = setTimeout(() => setShowToast(false), 3300);
+
+      return () => {
+        clearTimeout(showTimer);
+        clearTimeout(hideTimer);
+        clearTimeout(unmountTimer);
+      };
+    }
+  }, [showToast]);
+
   return {
     email,
     isEmailValid,
@@ -66,7 +89,7 @@ export const useEmailVerification = () => {
     isVerified,
     handleVerify,
     showToast,
-    setShowToast,
+    isToastVisible, // Now correctly exported
     formatTime,
   };
 };

From b695df4d640d80da6a249aeff413ad5195f799ee Mon Sep 17 00:00:00 2001
From: shinwokkang <tlsdnr303@gmail.com>
Date: Sat, 24 Jan 2026 03:07:16 +0900
Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EC=84=A4=EC=A0=95=20UI=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base-ui/Join/steps/PasswordEntry/PasswordEntry.tsx   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/base-ui/Join/steps/PasswordEntry/PasswordEntry.tsx b/src/components/base-ui/Join/steps/PasswordEntry/PasswordEntry.tsx
index 5aecae4..7b1761c 100644
--- a/src/components/base-ui/Join/steps/PasswordEntry/PasswordEntry.tsx
+++ b/src/components/base-ui/Join/steps/PasswordEntry/PasswordEntry.tsx
@@ -62,8 +62,14 @@ const PasswordEntry: React.FC<PasswordEntryProps> = ({ onNext }) => {
 
           {/* Confirm Password Input Section */}
           <div className="flex flex-col w-full gap-2">
+            {/* Custom Label Layout for Confirm Password */}
+            <div className="flex flex-wrap items-end gap-2 mb-1">
+              <span className="text-[#7B6154] font-sans text-[20px] font-semibold leading-[135%] tracking-[-0.02px]">
+                비밀번호 확인
+              </span>
+            </div>
+
             <JoinInput
-              label="비밀번호 확인"
               type="password"
               placeholder="비밀번호를 다시 입력해주세요"
               value={confirmPassword}
@@ -71,6 +77,7 @@ const PasswordEntry: React.FC<PasswordEntryProps> = ({ onNext }) => {
               className={`border-[#EAE5E2] placeholder-[#BBB] text-[14px] font-normal ${
                 !isMatch && confirmPassword.length > 0 ? "border-red-500" : ""
               }`}
+              hideLabel
             />
 
             {!isMatch && confirmPassword.length > 0 && (

From 370137ae65e899c6d7e37d4a81a0afd26f124eb5 Mon Sep 17 00:00:00 2001
From: shinwokkang <tlsdnr303@gmail.com>
Date: Sat, 24 Jan 2026 17:30:48 +0900
Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95=20UI=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Join/steps/ProfileSetup/ProfileSetup.tsx  | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/base-ui/Join/steps/ProfileSetup/ProfileSetup.tsx b/src/components/base-ui/Join/steps/ProfileSetup/ProfileSetup.tsx
index fc8df22..8e5af72 100644
--- a/src/components/base-ui/Join/steps/ProfileSetup/ProfileSetup.tsx
+++ b/src/components/base-ui/Join/steps/ProfileSetup/ProfileSetup.tsx
@@ -24,30 +24,31 @@ const ProfileSetup: React.FC<ProfileSetupProps> = ({ onNext }) => {
   } = useProfileSetup();
 
   return (
-    <div className="relative flex flex-col items-center w-[766px] px-[56px] py-[99px] bg-white rounded-[8px]">
+    <div className="relative flex flex-col items-center mx-auto w-full max-w-[766px] bg-white rounded-[8px] px-6 py-10 md:px-[40px] md:py-[60px] lg:px-[56px] lg:py-[99px]">
       <JoinHeader title="프로필 설정" />
 
-      <div className="flex flex-col w-full mt-[120px] mb-[92px]">
-        <div className="flex flex-col items-start w-[526px] gap-[36px] mx-auto">
+      {/* Content Wrapper: Mobile(mt-10 mb-10) -> Tablet(mt-[60px] mb-[80px]) -> Desktop(mt-[90px] mb-[130px]) */}
+      <div className="flex flex-col w-full mt-10 mb-10 md:mt-[60px] md:mb-[80px] lg:mt-[90px] lg:mb-[130px]">
+        <div className="flex flex-col items-start w-full max-w-[526px] gap-[36px] mx-auto">
           {/* 닉네임 섹션 (Custom Layout) */}
           <div className="flex flex-col w-full gap-[12px]">
             <span className="text-[#7B6154] font-sans text-[20px] font-semibold leading-[135%] tracking-[-0.02px]">
               닉네임
             </span>
-            <div className="flex flex-row justify-between w-full">
-              <div className="w-[412px]">
+            <div className="flex flex-row justify-between w-full gap-2">
+              <div className="flex-1">
                 <JoinInput
                   value={nickname}
                   onChange={handleNicknameChange}
                   disabled={isNicknameChecked}
                   placeholder="닉네임을 입력해주세요(최대 20글자)"
-                  className="border-[#EAE5E2] placeholder-[#BBB] text-[14px] font-normal"
+                  className="border-[#EAE5E2] placeholder-[#BBB] text-[14px] font-normal w-full"
                 />
               </div>
               <JoinButton
                 onClick={handleCheckDuplicate}
                 variant={isNicknameChecked ? "primary" : "secondary"}
-                className={`w-[106px] h-[44px] px-0 py-0 text-[14px] ${
+                className={`w-[106px] h-[44px] px-0 py-0 text-[14px] shrink-0 ${
                   isNicknameChecked ? "font-medium" : "font-normal"
                 }`}
               >
@@ -85,7 +86,11 @@ const ProfileSetup: React.FC<ProfileSetupProps> = ({ onNext }) => {
         </div>
       </div>
 
-      <JoinButton onClick={onNext} disabled={!isValid}>
+      <JoinButton
+        onClick={onNext}
+        disabled={!isValid}
+        className="w-full md:w-[526px]"
+      >
         다음
       </JoinButton>
     </div>

From 29cba7004622d1411fa61694c901773c1419e257 Mon Sep 17 00:00:00 2001
From: shinwokkang <tlsdnr303@gmail.com>
Date: Sat, 24 Jan 2026 17:44:50 +0900
Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=82=AC=EC=A7=84=20=EC=84=A4=EC=A0=95=20=EB=B0=8F=20=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=84=A4=EC=A0=95=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProfileImage/InterestCategorySelector.tsx | 12 ++-
 .../Join/steps/ProfileImage/ProfileImage.tsx  | 92 +++++++++++++++----
 .../ProfileImage/ProfileImageUploader.tsx     |  2 +-
 .../Join/steps/ProfileSetup/ProfileSetup.tsx  | 27 ++++--
 4 files changed, 105 insertions(+), 28 deletions(-)

diff --git a/src/components/base-ui/Join/steps/ProfileImage/InterestCategorySelector.tsx b/src/components/base-ui/Join/steps/ProfileImage/InterestCategorySelector.tsx
index c0a80fa..584325f 100644
--- a/src/components/base-ui/Join/steps/ProfileImage/InterestCategorySelector.tsx
+++ b/src/components/base-ui/Join/steps/ProfileImage/InterestCategorySelector.tsx
@@ -12,24 +12,28 @@ const InterestCategorySelector: React.FC<InterestCategorySelectorProps> = ({
 }) => {
   return (
     <div className="flex flex-col w-full gap-[16px]">
-      <div className="flex flex-row items-center gap-[10px]">
-        <span className="text-[#7B6154] font-sans text-[20px] font-semibold leading-[135%] tracking-[-0.02px]">
+      <div className="flex flex-col md:flex-row items-center justify-center md:justify-start gap-2 md:gap-[10px]">
+        {/* Title: Hidden on Mobile (shown in Header instead), Visible on Desktop */}
+        <span className="hidden md:block text-[#7B6154] font-sans text-[20px] font-semibold leading-[135%] tracking-[-0.02px]">
           관심 카테고리
         </span>
+        {/* Subtitle: Visible & Centered on Mobile */}
         <div className="flex h-[27px] p-[10px] justify-center items-center gap-[10px]">
           <span className="text-[#8D8D8D] font-sans text-[14px] font-semibold leading-[145%] tracking-[-0.014px]">
             (최소 1개, 최대 6개 선택)
           </span>
         </div>
       </div>
-      <div className="flex flex-wrap gap-[12px]">
+
+      {/* Grid for Mobile (3 cols), Flex for Desktop */}
+      <div className="grid grid-cols-3 gap-2 w-full md:flex md:flex-wrap md:gap-[12px]">
         {INTEREST_CATEGORIES.map((category) => {
           const isSelected = selectedInterests.includes(category);
           return (
             <button
               key={category}
               onClick={() => onToggle(category)}
-              className={`w-[122px] h-[44px] flex justify-center items-center rounded-[400px] text-[14px] leading-[145%] tracking-[-0.014px] transition-colors ${
+              className={`w-full md:w-[122px] h-[44px] flex justify-center items-center rounded-[400px] text-[14px] leading-[145%] tracking-[-0.014px] transition-colors ${
                 isSelected
                   ? "bg-[#A19182] border border-[#D2C5B6] text-[#FFF] font-medium"
                   : "bg-[#F9F7F6] border border-[#D2C5B6] text-[#5C5C5C] font-normal"
diff --git a/src/components/base-ui/Join/steps/ProfileImage/ProfileImage.tsx b/src/components/base-ui/Join/steps/ProfileImage/ProfileImage.tsx
index d5bbaad..3af18e8 100644
--- a/src/components/base-ui/Join/steps/ProfileImage/ProfileImage.tsx
+++ b/src/components/base-ui/Join/steps/ProfileImage/ProfileImage.tsx
@@ -1,4 +1,6 @@
-import React from "react";
+"use client";
+
+import React, { useState, useEffect } from "react";
 import JoinHeader from "../../JoinHeader";
 import JoinButton from "../../JoinButton";
 import { useProfileImage } from "./useProfileImage";
@@ -19,25 +21,83 @@ const ProfileImage: React.FC<ProfileImageProps> = ({ onNext }) => {
     isValid,
   } = useProfileImage();
 
+  const [mobileStep, setMobileStep] = useState<"image" | "interest">("image");
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    // Initial check
+    checkMobile();
+
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const handleNextClick = () => {
+    if (isMobile && mobileStep === "image") {
+      setMobileStep("interest");
+    } else {
+      onNext?.();
+    }
+  };
+
+  // Logic for disabling the button
+  // Desktop: !isValid (must select at least 1 interest)
+  // Mobile Step 1 (Image): Always enabled (image is optional or default provided)
+  // Mobile Step 2 (Interest): !isValid
+  const isButtonDisabled = isMobile
+    ? mobileStep === "interest" && !isValid
+    : !isValid;
+
+  // Dynamic Header Title based on Mobile Step
+  const headerTitle = isMobile
+    ? mobileStep === "image"
+      ? "프로필 설정"
+      : "관심 카테고리"
+    : "";
+
   return (
-    <div className="relative flex flex-col items-center w-[766px] px-[56px] py-[99px] bg-white rounded-[8px]">
-      <JoinHeader title="" />
-
-      <div className="flex flex-col w-full mt-[67px] mb-[48px]">
-        <div className="flex flex-col items-center w-[526px] gap-[42px] mx-auto">
-          <ProfileImageUploader
-            profileImage={profileImage}
-            onUpload={handleImageUpload}
-            onReset={handleResetImage}
-          />
-          <InterestCategorySelector
-            selectedInterests={selectedInterests}
-            onToggle={toggleInterest}
-          />
+    <div className="relative flex flex-col items-center mx-auto w-full max-w-[766px] bg-white rounded-[8px] px-6 py-10 md:px-[40px] md:py-[60px] lg:px-[56px] lg:py-[99px]">
+      <JoinHeader title={headerTitle} />
+
+      {/* Content Wrapper: Reduced Desktop Spacing (lg:mt-[50px] lg:mb-[80px]) */}
+      <div className="flex flex-col w-full mt-10 mb-10 md:mt-[60px] md:mb-[80px] lg:mt-[50px] lg:mb-[80px]">
+        <div className="flex flex-col items-center w-full max-w-[526px] gap-10 md:gap-[42px] mx-auto">
+          {/* Profile Image Uploader: Visible on Desktop OR Mobile Step 1 */}
+          <div
+            className={`${
+              mobileStep === "image" ? "flex" : "hidden"
+            } md:flex flex-col w-full items-center`}
+          >
+            <ProfileImageUploader
+              profileImage={profileImage}
+              onUpload={handleImageUpload}
+              onReset={handleResetImage}
+            />
+          </div>
+
+          {/* Interest Selector: Visible on Desktop OR Mobile Step 2 */}
+          <div
+            className={`${
+              mobileStep === "interest" ? "flex" : "hidden"
+            } md:flex flex-col w-full`}
+          >
+            <InterestCategorySelector
+              selectedInterests={selectedInterests}
+              onToggle={toggleInterest}
+            />
+          </div>
         </div>
       </div>
 
-      <JoinButton onClick={onNext} disabled={!isValid}>
+      <JoinButton
+        onClick={handleNextClick}
+        disabled={isButtonDisabled}
+        className="w-full md:w-[526px]"
+      >
         다음
       </JoinButton>
     </div>
diff --git a/src/components/base-ui/Join/steps/ProfileImage/ProfileImageUploader.tsx b/src/components/base-ui/Join/steps/ProfileImage/ProfileImageUploader.tsx
index 67c93cf..7a3016a 100644
--- a/src/components/base-ui/Join/steps/ProfileImage/ProfileImageUploader.tsx
+++ b/src/components/base-ui/Join/steps/ProfileImage/ProfileImageUploader.tsx
@@ -19,7 +19,7 @@ const ProfileImageUploader: React.FC<ProfileImageUploaderProps> = ({
   };
 
   return (
-    <div className="flex flex-col items-center gap-[24px]">
+    <div className="flex flex-col items-center gap-[24px] w-full">
       <div className="relative w-[148px] h-[141px]">
         <div className="w-[138px] h-[138px] rounded-full overflow-hidden bg-gray-200">
           <Image
diff --git a/src/components/base-ui/Join/steps/ProfileSetup/ProfileSetup.tsx b/src/components/base-ui/Join/steps/ProfileSetup/ProfileSetup.tsx
index 8e5af72..99fb3fc 100644
--- a/src/components/base-ui/Join/steps/ProfileSetup/ProfileSetup.tsx
+++ b/src/components/base-ui/Join/steps/ProfileSetup/ProfileSetup.tsx
@@ -37,13 +37,26 @@ const ProfileSetup: React.FC<ProfileSetupProps> = ({ onNext }) => {
             </span>
             <div className="flex flex-row justify-between w-full gap-2">
               <div className="flex-1">
-                <JoinInput
-                  value={nickname}
-                  onChange={handleNicknameChange}
-                  disabled={isNicknameChecked}
-                  placeholder="닉네임을 입력해주세요(최대 20글자)"
-                  className="border-[#EAE5E2] placeholder-[#BBB] text-[14px] font-normal w-full"
-                />
+                {/* Mobile Input */}
+                <div className="block w-full md:hidden">
+                  <JoinInput
+                    value={nickname}
+                    onChange={handleNicknameChange}
+                    disabled={isNicknameChecked}
+                    placeholder="(최대 20자)"
+                    className="border-[#EAE5E2] placeholder-[#BBB] text-[14px] font-normal w-full"
+                  />
+                </div>
+                {/* Desktop Input */}
+                <div className="hidden w-full md:block">
+                  <JoinInput
+                    value={nickname}
+                    onChange={handleNicknameChange}
+                    disabled={isNicknameChecked}
+                    placeholder="닉네임을 입력해주세요(최대 20글자)"
+                    className="border-[#EAE5E2] placeholder-[#BBB] text-[14px] font-normal w-full"
+                  />
+                </div>
               </div>
               <JoinButton
                 onClick={handleCheckDuplicate}

From 652c07faee89cc3cedffa730670ba62bcd00a5b7 Mon Sep 17 00:00:00 2001
From: shinwokkang <tlsdnr303@gmail.com>
Date: Sat, 24 Jan 2026 17:50:55 +0900
Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=99=84=EB=A3=8C=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../steps/SignupComplete/SignupComplete.tsx   | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/base-ui/Join/steps/SignupComplete/SignupComplete.tsx b/src/components/base-ui/Join/steps/SignupComplete/SignupComplete.tsx
index 29981a1..4c03500 100644
--- a/src/components/base-ui/Join/steps/SignupComplete/SignupComplete.tsx
+++ b/src/components/base-ui/Join/steps/SignupComplete/SignupComplete.tsx
@@ -15,23 +15,24 @@ const SignupComplete: React.FC = () => {
   } = useSignupComplete();
 
   return (
-    <div className="relative flex flex-col items-center w-[766px] px-[56px] py-[99px] bg-white rounded-[8px]">
+    <div className="relative flex flex-col items-center mx-auto w-full max-w-[766px] bg-white rounded-[8px] px-6 py-10 md:px-[40px] md:py-[60px] lg:px-[56px] lg:py-[99px]">
       <JoinHeader title="" />
 
-      <div className="flex flex-col items-center w-[427px] mt-[67px]">
+      {/* Content Wrapper: Fluid width with responsive top margin */}
+      <div className="flex flex-col items-center w-full max-w-[427px] mt-10 md:mt-[50px] lg:mt-[67px]">
         {/* 1. 텍스트 섹션 */}
         <div className="flex flex-col items-center gap-2 text-center">
-          <span className="text-[#7B6154] font-sans text-[32px] font-bold leading-[135%] tracking-[-0.032px]">
+          <span className="text-[#7B6154] font-sans text-[22px] md:text-[28px] lg:text-[32px] font-bold leading-[135%] tracking-[-0.032px]">
             회원이 되신 것을 환영합니다!
           </span>
-          <span className="text-[#7B6154] font-sans text-[32px] font-bold leading-[135%] tracking-[-0.032px]">
+          <span className="text-[#7B6154] font-sans text-[22px] md:text-[28px] lg:text-[32px] font-bold leading-[135%] tracking-[-0.032px]">
             참여중인 독서 모임이 있으신가요?
           </span>
         </div>
 
         {/* 2. 프로필 카드 섹션 */}
-        <div className="flex flex-col items-center w-[400px] h-[276px] mt-[66px] rounded-[8px] border border-[#D2C5B6] bg-[#F9F7F6]">
-          <div className="mt-[24px] w-[138px] h-[138px] rounded-full overflow-hidden border border-[#D2C5B6] bg-white">
+        <div className="flex flex-col items-center w-full max-w-[400px] h-auto py-8 mt-10 lg:mt-[66px] rounded-[8px] border border-[#D2C5B6] bg-[#F9F7F6]">
+          <div className="w-[138px] h-[138px] rounded-full overflow-hidden border border-[#D2C5B6] bg-white">
             <Image
               src={profileImage}
               alt="Profile"
@@ -40,16 +41,16 @@ const SignupComplete: React.FC = () => {
               className="object-cover w-full h-full"
             />
           </div>
-          <span className="mt-[30px] text-[#000] font-sans text-[24px] font-medium leading-[20px]">
+          <span className="mt-[30px] text-[#000] font-sans text-[20px] md:text-[24px] font-medium leading-[135%] text-center px-4 break-keep">
             {nickname}
           </span>
-          <span className="mt-[20px] text-[#434343] font-sans text-[20px] font-normal leading-[20px]">
+          <span className="mt-[20px] text-[#434343] font-sans text-[16px] md:text-[20px] font-normal leading-[140%] text-center px-4 break-keep">
             {intro}
           </span>
         </div>
 
         {/* 3. 버튼 그룹 섹션 */}
-        <div className="flex flex-col w-full gap-[20px] mt-[60px]">
+        <div className="flex flex-col w-full gap-[20px] mt-10 lg:mt-[60px]">
           <JoinButton onClick={handleSearchMeeting} className="w-full">
             모임 검색하기
           </JoinButton>