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

src/App.tsx

@@ -50,7 +50,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 SettingModal({ 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.CustomQuitButton $type='semiRoundedRect' $bgColor='gc_4' $fontWeight='700'>
+          탈퇴하기
+        </S.CustomQuitButton>
+      </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 CustomQuitButton = 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?react'
 import { Typo13, Typo15, Typo24 } from '~components/Typo'
 import ToggleBox from '~components/ToggleBox'
 import { useTheme } from 'styled-components'
+import SettingModal from '~pages/MyPage/SettingModal'
 
 export default function MyPage() {
   const theme = useTheme()
+  const [onClickSetting, setOnclickSetting] = useState(false)
+
+  const onSettingsClick = () => {
+    setOnclickSetting(true)
+  }
+
+  const onCloseSettingModal = () => {
+    setOnclickSetting(false)
+  }
+
   return (
     <S.MyPage>
       <Helmet>
@@ -17,7 +29,7 @@ export default function MyPage() {
       </Helmet>
       <S.HeaderContainer>
         마이페이지
-        <S.SettingIcon>
+        <S.SettingIcon onClick={onSettingsClick}>
           <IoSettingsOutline cursor='pointer' size={28} />
         </S.SettingIcon>
       </S.HeaderContainer>
@@ -39,7 +51,7 @@ export default function MyPage() {
           </S.ProfileText>
         </S.ProfileSection>
 
-        <S.CountSectioin>
+        <S.CountSection>
           <S.CountArea>
             <S.CountWrapperBig>23회</S.CountWrapperBig>
             <S.CountWrapperSmall>누적 산책 횟수</S.CountWrapperSmall>
@@ -54,7 +66,7 @@ export default function MyPage() {
             <S.CountWrapperBig>16회</S.CountWrapperBig>
             <S.CountWrapperSmall>강번따 횟수</S.CountWrapperSmall>
           </S.CountArea>
-        </S.CountSectioin>
+        </S.CountSection>
 
         <S.GangbunttaArea>
           <ToggleBox type='md' setting='gangbuntta' />
@@ -66,6 +78,7 @@ export default function MyPage() {
           </S.CustomActionButton>
         </S.ButtonArea>
       </S.MainContainer>
+      <SettingModal isOpen={onClickSetting} onClose={onCloseSettingModal} />
     </S.MyPage>
   )
 }

src/pages/MyPage/styles.ts

@@ -9,7 +9,6 @@ export const MyPage = styled.div`
   margin: 0 auto;
   box-sizing: border-box;
   padding: 0;
-  /* border: 1px solid blue; */
 `
 
 export const MainContainer = styled.div`
@@ -60,12 +59,11 @@ export const SettingIcon = styled.div`
   top: 50%;
   transform: translateY(-50%);
 `
-
 export const ProfileSection = styled.div`
   width: 100%;
   height: 285px;
   flex-shrink: 0;
-  background-color: white;
+  background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
   border-radius: 16px;
   box-sizing: border-box;
   padding: 0 20px;
@@ -104,7 +102,7 @@ export const CountArea = styled.div`
   flex-shrink: 0;
   /* border: 1px solid red; */
 `
-export const CountSectioin = styled(ProfileSection)`
+export const CountSection = styled(ProfileSection)`
   width: 100%;
   height: 96px;
   flex-shrink: 0;