[Design] #45 마이페이지 알림 설정 페이지

src/App.tsx

@@ -48,7 +48,6 @@ const MobileWrapper = styled.div`
   background-color: ${({ theme }) => theme.colors.brand.lighten_3}; /* 배경색 (GC_4) */
   min-width: 340px;
   max-width: 430px;
-  /* width: 375px; */
   min-height: calc(var(--vh, 1vh) * 100);
   margin: auto;
   position: relative;

src/components/Button/ActionButton.ts

@@ -32,7 +32,7 @@ const ACTION_BUTTON_STYLES: Record<Exclude<ActionButtonProps['$type'], undefined
   },
   semiRoundedRect: {
     padding: '16.5px 24px',
-    borderRadius: '20px',
+    borderRadius: '12px',
     fontSize: '_15',
   },
   capsule: {

src/pages/MyPage/SettingModal/index.tsx

@@ -0,0 +1,39 @@
+import * as S from './styles'
+import { PrevButton } from '~components/Button/PrevButton/styles'
+import { Typo17 } from '~components/Typo'
+import ToggleArea from '~components/ToggleArea'
+import ToggleBox from '~components/ToggleBox'
+type SettingModalProps = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function SettingsModal({ isOpen, onClose }: SettingModalProps) {
+  if (!isOpen) return null
+
+  return (
+    <S.SettingModalContainer>
+      <S.Header>
+        <S.BackButton onClick={onClose}>
+          <PrevButton size={28} />
+        </S.BackButton>
+        <S.TitleWrap>
+          <Typo17 weight='700'>설정</Typo17>
+        </S.TitleWrap>
+      </S.Header>
+
+      <S.Content>
+        <S.AllButtonWrapper>
+          <ToggleBox type='lg' setting='allNotifications' />
+        </S.AllButtonWrapper>
+        <ToggleArea />
+      </S.Content>
+
+      <S.QuitButtonArea>
+        <S.CustomQuiteButton $type='semiRoundedRect' $bgColor='gc_4' $fontWeight='700'>
+          탈퇴하기
+        </S.CustomQuiteButton>
+      </S.QuitButtonArea>
+    </S.SettingModalContainer>
+  )
+}

src/pages/MyPage/SettingModal/styles.ts

@@ -0,0 +1,67 @@
+import { styled } from 'styled-components'
+import { ActionButton } from '~components/Button/ActionButton'
+
+//헤더
+export const SettingModalContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${({ theme }) => theme.colors.brand.lighten_3};
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+`
+
+export const Header = styled.div`
+  height: 56px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  background-color: white;
+`
+
+export const BackButton = styled.button`
+  position: absolute;
+  left: -3px;
+  background: none;
+  border: none;
+  margin-top: -55px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+`
+
+export const TitleWrap = styled.h1`
+  width: 100%;
+  text-align: center;
+  margin: 0;
+`
+//토글 영역
+export const AllButtonWrapper = styled.div`
+  padding-bottom: 16px;
+`
+export const ToggleArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+`
+export const Content = styled.div`
+  flex: 1;
+  padding: 20px;
+
+  overflow-y: auto;
+`
+//탈퇴하기 버튼
+export const CustomQuiteButton = styled(ActionButton)`
+  font-size: ${({ theme }) => theme.typography._17};
+  color: ${({ theme }) => theme.colors.grayscale.font_1};
+  background-color: ${({ theme }) => theme.colors.brand.lighten_2};
+`
+export const QuitButtonArea = styled.div`
+  width: 100%;
+  padding: 20px;
+`

src/pages/MyPage/index.tsx

@@ -1,13 +1,25 @@
+import { useState } from 'react'
 import * as S from './styles'
 import { Helmet } from 'react-helmet-async'
 import { IoSettingsOutline } from 'react-icons/io5'
 import ProfileImage from 'assets/masterprofile.svg'
 import { Typo13, Typo15, Typo24 } from '~components/Typo'
 import ToggleBox from '~components/ToggleBox'
 import { useTheme } from 'styled-components'
+import SettingsModal from '~pages/MyPage/SettingModal'
 
 export default function MyPage() {
   const theme = useTheme()
+  const [isSettingsOpen, setIsSettinsOpen] = useState(false)
+
+  const handleSettingsClik = () => {
+    setIsSettinsOpen(true)
+  }
+
+  const handleCloseSteeings = () => {
+    setIsSettinsOpen(false)
+  }
+
   return (
     <S.MyPage>
       <Helmet>
@@ -16,7 +28,7 @@ export default function MyPage() {
       </Helmet>
       <S.HeaderContainer>
         마이페이지
-        <S.SettingIcon>
+        <S.SettingIcon onClick={handleSettingsClik}>
           <IoSettingsOutline cursor='pointer' size={28} />
         </S.SettingIcon>
       </S.HeaderContainer>
@@ -65,6 +77,7 @@ export default function MyPage() {
           </S.CustomActionButton>
         </S.ButtonArea>
       </S.MainContainer>
+      <SettingsModal isOpen={isSettingsOpen} onClose={handleCloseSteeings} />
     </S.MyPage>
   )
 }