[DEV] 공유모달 UI 제작

Mine/src/components/settings/InterestSettings.tsx

@@ -22,16 +22,16 @@ export default function InterestSettings({ interests, onChange }: Props) {
     if (isLoading) return <div className="text-white">불러오는 중...</div>
 
     return (
-        <div className="flex flex-wrap gap-2 overflow-y-auto custom-scrollbar max-h-40">
+        <div className="flex flex-wrap gap-2 overflow-y-auto custom-scrollbar max-w-116.25 max-h-40">
             {categories?.map((item) => (
                 <div
                     key={item.id}
                     onClick={() => toggleInterest(item.code)}
-                    className={`cursor-pointer flex items-center justify-center px-3 py-1.5 rounded-full border text-white font-semibold16 text-base transition-colors
+                    className={`cursor-pointer flex items-center justify-center px-3 py-1.5 rounded-full border font-semibold16 text-base transition-colors
                         ${
                             interests.includes(item.code)
-                                ? 'border-white bg-gray-600-op30'
-                                : 'border-white/30 bg-transparent'
+                                ? 'bg-gray-100 text-gray-600'
+                                : 'border-white/30 bg-transparent text-gray-100'
                         }`}
                 >
                     {item.name}

Mine/src/components/settings/ProfileSettings.tsx

@@ -3,6 +3,7 @@ import Camera from '../../icon/camera.svg?react'
 import useUserStore from '../../stores/user'
 import useUpdateProfile from '../../hooks/useUpdateProfile'
 import usePatchVisibility from '../../hooks/usePatchVisibility'
+import TabButton from '../../icon/tab_button.svg?react'
 
 interface ProfileData {
     nickname: string
@@ -132,7 +133,14 @@ export default function ProfileSettings({ editMode, onCancelEdit, onSave, refCan
 
                     <div className="flex items-center">
                         <span className="w-20 text-gray-200 font-light14 shrink-0">비밀번호</span>
-                        <span className="font-medium16 text-white">********</span>
+
+                        <div className="flex flex-row gap-2">
+                            <span className="font-medium16 text-white">********</span>
+                            <button className="flex justify-center items-center text-gray-100 border border-gray-100 font-medium12 leading-none px-2 py-0.5 rounded-full gap-1 cursor-pointer">
+                                <TabButton />
+                                변경
+                            </button>
+                        </div>
                     </div>
 
                     <div className="flex items-center">

Mine/src/components/settings/ScreenSettings.tsx

@@ -66,14 +66,7 @@ export default function ScreenSettings() {
                     <span className="font-regular14">컴퓨터에서 이미지 가져오기</span>
                 </button>
             </div>
-
-            <input
-                ref={fileInputRef}
-                type="file"
-                accept="image/*"
-                className="hidden"
-                onChange={handleFileChange}
-            />
+            <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleFileChange} />
 
             {isConfirmOpen && (
                 <ConfirmModal
@@ -92,4 +85,4 @@ export default function ScreenSettings() {
             )}
         </>
     )
-}
+}

Mine/src/components/settings/SettingsModal.tsx

@@ -143,14 +143,12 @@ export default function SettingsModal({ onClose }: SettingsProps) {
                                 저장
                             </button>
                         ))}
-
                     {activeTab === 'interest' && (
                         <button
                             onClick={handleSave}
                             disabled={selectedInterests.length === 0}
-                            className="absolute right-12 bottom-4 flex items-center gap-1 font-semibold16 text-white disabled:opacity-40"
+                            className="absolute right-12 bottom-8 flex font-semibold16 text-white disabled:opacity-40 px-3 py-1 rounded-2xl border border-gray-100 hover:bg-gray-100-op40"
                         >
-                            <Edit className="w-4 h-4" />
                             저장
                         </button>
                     )}