[FEAT] 설정 모달 UI 변경 및 추가 API 연결

Mine/src/components/settings/SettingsModal.tsx

@@ -1,6 +1,5 @@
 import { useRef, useState } from 'react'
 import ProfileSettings from './ProfileSettings'
-import ScreenSettings from './ScreenSettings'
 import InterestSettings from './InterestSettings'
 
 import X from '../../icon/X.svg?react'
@@ -15,7 +14,7 @@ interface SettingsProps {
 }
 
 export default function SettingsModal({ onClose }: SettingsProps) {
-    const [activeTab, setActiveTab] = useState<'profile' | 'interest' | 'screen'>('profile')
+    const [activeTab, setActiveTab] = useState<'profile' | 'interest'>('profile')
     const [editMode, setEditMode] = useState(false)
     const [showLogoutToast, setShowLogoutToast] = useState(false)
     const [showSaveToast, setShowSaveToast] = useState(false)
@@ -88,15 +87,6 @@ export default function SettingsModal({ onClose }: SettingsProps) {
                         >
                             관심사 설정
                         </button>
-                        <button
-                            onClick={() => {
-                                setActiveTab('screen')
-                                setEditMode(false)
-                            }}
-                            className={`text-left transition-all ${activeTab === 'screen' ? 'text-[20px] text-white font-semibold20' : 'text-[16px] text-white/50'}`}
-                        >
-                            화면 설정
-                        </button>
                     </div>
 
                     <div className="flex-1 py-14 pr-10 overflow-hidden">
@@ -112,7 +102,6 @@ export default function SettingsModal({ onClose }: SettingsProps) {
                         {activeTab === 'interest' && (
                             <InterestSettings interests={selectedInterests} onChange={setSelectedInterests} />
                         )}
-                        {activeTab === 'screen' && <ScreenSettings />}
                     </div>
 
                     {activeTab === 'profile' && (
@@ -168,4 +157,4 @@ export default function SettingsModal({ onClose }: SettingsProps) {
             </div>
         </div>
     )
-}
+}

Mine/src/pages/magazine/components/SectionContent.tsx

@@ -5,6 +5,9 @@ import SectionIndexList from './SectionIndexList'
 import ParagraphPart from './ParagraphPart'
 import useSidebarStore from '../../../stores/sidebar'
 import { useNavigate } from 'react-router-dom'
+import { useState } from 'react'
+import IconWandStars from '../../../icon/wand_stars.svg?react'
+import ScreenSettings from '../../../components/settings/ScreenSettings'
 
 interface SectionContentProps {
     sectionId: number
@@ -18,10 +21,12 @@ export default function SectionContent({ sectionId, magazineId }: SectionContent
     const { data, isLoading } = useGetSectionDetail(Number(magazineId), Number(sectionId))
     const user = magazinedata?.user
     const content = data?.paragraphs
+    const [isScreenSettingsOpen, setIsScreenSettingsOpen] = useState(false)
 
     const handleClick = (magazineId: number) => {
         navigate(`/magazine/${magazineId}`)
     }
+
     if (isLoading) {
         return <></>
     }
@@ -53,7 +58,30 @@ export default function SectionContent({ sectionId, magazineId }: SectionContent
                         />
                     ))}
                 </div>
+
+                {/* 우측 하단 무드보드 아이콘 버튼 */}
+                <button
+                    onClick={() => setIsScreenSettingsOpen(true)}
+                    className="fixed bottom-4 right-4 z-50 transition-all duration-200 text-gray-100-op40 hover:text-gray-100"
+                >
+                    <IconWandStars className="w-6 h-6 **:fill-current" />
+                </button>
             </div>
+
+            {/* 화면 설정 모달 */}
+            {isScreenSettingsOpen && (
+                <div
+                    className="fixed inset-0 bg-black/40 flex items-center justify-center z-999"
+                    onClick={() => setIsScreenSettingsOpen(false)}
+                >
+                    <div
+                        className="relative bg-gray-600-op70 rounded-2xl p-10 shadow-[0px_4px_4px_rgba(0,0,0,0.25)]"
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <ScreenSettings />
+                    </div>
+                </div>
+            )}
         </div>
     )
-}
+}