[feat] 회원가입 반응형 UI

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="flex flex-col items-center w-[766px] px-[56px] py-[99px] gap-[100px] rounded-[8px] bg-White">
+      {/* 
+        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>

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>
   );

src/components/base-ui/Join/steps/PasswordEntry/PasswordEntry.tsx

@@ -1,61 +1,99 @@
+"use client";
+
 import React from "react";
 import JoinHeader from "../../JoinHeader";
 import JoinButton from "../../JoinButton";
 import JoinInput from "../../JoinInput";
 import { usePasswordEntry } from "./usePasswordEntry";
 
 interface PasswordEntryProps {
-  onNext?: () => void;
+  onNext: () => void;
 }
 
 const PasswordEntry: React.FC<PasswordEntryProps> = ({ onNext }) => {
   const {
     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">
+            {/* 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
+              type="password"
+              placeholder="비밀번호를 다시 입력해주세요"
+              value={confirmPassword}
+              onChange={handleConfirmChange}
+              className={`border-[#EAE5E2] placeholder-[#BBB] text-[14px] font-normal ${
+                !isMatch && confirmPassword.length > 0 ? "border-red-500" : ""
+              }`}
+              hideLabel
+            />
+
+            {!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>

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,
   };

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"