WithTime12 · Seojegyeong · Aug 5, 2025 · Aug 5, 2025
diff --git a/src/components/common/EditableInputBox.tsx b/src/components/common/EditableInputBox.tsx
@@ -65,7 +65,7 @@ export default function EditableInputBox({
     `;
 
     return (
-        <div className={`w-[360px] ${className}`}>
+        <div className={`w-full max-w-[360px] ${className}`}>
             {label && <p className="font-body1 text-default-gray-700 mb-1">{label}</p>}
 
             <div className="relative w-full">

diff --git a/src/components/common/ToggleSwitch.tsx b/src/components/common/ToggleSwitch.tsx
@@ -1,7 +1,5 @@
-//setting - ON, OFF Toggle Switch
 import { useEffect, useState } from 'react';
 
-// Props 정의
 interface IToggleSwitchProps {
     value?: boolean;
     onChange?: (val: boolean) => void;
@@ -11,17 +9,14 @@ interface IToggleSwitchProps {
 }
 
 export default function ToggleSwitch({ value, onChange, onLabel = 'ON', offLabel = 'OFF', className = '' }: IToggleSwitchProps) {
-    // 내부 상태 관리 (초깃값은 props.value, 없으면 false)
     const [isOn, setIsOn] = useState(value ?? false);
 
-    // 외부에서 value가 바뀌면 내부 상태도 동기화
     useEffect(() => {
         if (value !== undefined) {
             setIsOn(value);
         }
     }, [value]);
 
-    // 버튼 클릭 시 상태 토글
     const handleToggle = () => {
         const next = !isOn;
         setIsOn(next);
@@ -31,32 +26,22 @@ export default function ToggleSwitch({ value, onChange, onLabel = 'ON', offLabel
     return (
         <button
             onClick={handleToggle}
-            className={`relative w-[100px] h-[40px] rounded-full flex items-center px-2 transition-colors duration-300
-        ${isOn ? 'bg-primary-500' : 'bg-default-gray-400'} ${className}`}
+            className={`relative w-[80px] min-w-[80px] h-[36px] shrink-0 rounded-full flex items-center px-2 transition-colors duration-300
+                ${isOn ? 'bg-primary-500' : 'bg-default-gray-400'} ${className}`}
         >
-            {/* ON */}
-            <span
-                className={`absolute left-[15px] top-1/2 -translate-y-1/2 font-heading3 text-white transition-opacity duration-300 ${
-                    isOn ? 'opacity-100' : 'opacity-0'
-                }`}
-            >
+            {/* 텍스트 ON */}
+            <span className={`absolute left-[36px] font-heading3 text-white transition-opacity duration-200 ${isOn ? 'opacity-100' : 'opacity-0'}`}>
                 {onLabel}
             </span>
 
-            {/* OFF */}
-            <span
-                className={`absolute right-[15px] top-1/2 -translate-y-1/2 font-heading3 text-white transition-opacity duration-300 ${
-                    !isOn ? 'opacity-100' : 'opacity-0'
-                }`}
-            >
+            {/* 텍스트 OFF */}
+            <span className={`absolute right-[36px] font-heading3 text-white transition-opacity duration-200 ${!isOn ? 'opacity-100' : 'opacity-0'}`}>
                 {offLabel}
             </span>
 
-            {/* 원형 토글 - 좌우 슬라이드 */}
+            {/* 원형 토글 */}
             <div
-                className={`w-6 h-6 bg-white rounded-full shadow-default transform transition-transform duration-300 ${
-                    isOn ? 'translate-x-[60px]' : 'translate-x-0'
-                }`}
+                className={`w-6 h-6 bg-white rounded-full shadow-default transition-transform duration-300 ${isOn ? 'translate-x-0' : 'translate-x-[40px]'}`}
             />
         </button>
     );

diff --git a/src/components/layout/MobileMenu.tsx b/src/components/layout/MobileMenu.tsx
@@ -12,7 +12,7 @@ interface IMobileMenuProps {
 export default function MobileMenu({ onClose, onOpenSettings }: IMobileMenuProps) {
     return (
         <>
-            {/* 검정 반투명 배경 오버레이 */}
+            {/* 배경 오버레이 */}
             <div className="fixed inset-0 bg-black/50 z-40" onClick={onClose} />
 
             {/* 사이드 메뉴 */}

diff --git a/src/components/modal/SettingModal.tsx b/src/components/modal/SettingModal.tsx
@@ -23,7 +23,7 @@ export default function SettingsModal({ onClose, defaultTab = '알람' }: ISetti
     return (
         <Modal onClose={onClose} position="main" title="설정">
             {/* 좌측 탭 메뉴 */}
-            <div className="w-[170px] flex flex-col justify-between pr-6">
+            <div className="w-[130px] sm:w-[170px] flex flex-col justify-between pr-4 sm:pr-6">
                 <div className="flex flex-col space-y-3">
                     {['알람', '멤버십', '정보'].map((tab) => (
                         <button

diff --git a/src/components/settingTab/AlarmSetting.tsx b/src/components/settingTab/AlarmSetting.tsx
@@ -36,12 +36,13 @@ export default function AlarmSetting() {
     ];
 
     return (
-        <div className="mt-15 flex flex-col gap-10 p-6">
+        <div className="mt-5 flex flex-col gap-10 p-8">
             {alarmItems.map(({ label, key }) => (
-                <div key={key} className="flex items-center justify-start gap-10">
-                    {/* 알람 이름 */}
-                    <p className="font-heading3 text-default-gray-800 w-[100px]">{label}</p>
-                    {/* 각 토글 스위치 */}
+                <div key={key} className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-6 w-full">
+                    {/* 텍스트 */}
+                    <p className="font-heading3 text-default-gray-800 truncate overflow-hidden">{label}</p>
+
+                    {/* 토글 */}
                     <ToggleSwitch value={alarmSetting[key]} onChange={() => handleToggle(key)} onLabel="ON" offLabel="OFF" />
                 </div>
             ))}

diff --git a/src/components/settingTab/InfoSetting.tsx b/src/components/settingTab/InfoSetting.tsx
@@ -19,7 +19,7 @@ export default function InfoSetting() {
     }, []);
 
     return (
-        <div className="mt-15 flex flex-col items-start gap-5">
+        <div className="mt-5 flex flex-col items-start gap-5">
             {/* 닉네임 - 수정가능 */}
             <EditableInputBox
                 mode="nickname"

diff --git a/src/components/settingTab/MembershipSetting.tsx b/src/components/settingTab/MembershipSetting.tsx
@@ -9,7 +9,7 @@ export default function MembershipSetting() {
 
     // 버튼 공통 디자인
     const buttonClass =
-        'w-[255px] h-[38px] pl-[24px] rounding-32 border border-default-gray-500 text-default-gray-700 font-body2 text-left justify-start flex items-center bg-white';
+        'w-full h-[38px] pl-[20px] rounded-[32px] border border-default-gray-500 text-default-gray-700 font-body2 text-left justify-start flex items-center bg-white';
 
     // 버튼 목록
     const buttons = [
@@ -28,7 +28,7 @@ export default function MembershipSetting() {
     };
 
     return (
-        <div className="mt-15 flex flex-col gap-4 p-6">
+        <div className="mt-5 flex flex-col gap-4 p-6">
             {/* 등급 */}
             <p className="font-heading3">
                 현재 등급은 <span className="text-primary-700 font-heading2">Premium</span> 입니다.
@@ -38,7 +38,7 @@ export default function MembershipSetting() {
             <p className="font-body1 text-default-gray-700">다음 결제 예정일 : 2025.06.14</p>
 
             {/* 자동 결제 토글 */}
-            <div className="flex items-center gap-5 mt-6">
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-6 mt-6">
                 <p className="font-heading3 text-default-gray-800">자동 결제</p>
                 <ToggleSwitch value={autoPay} onChange={setAutoPay} onLabel="ON" offLabel="OFF" />
             </div>