From 1ffa878796454af651b0f739f09c62c98cc1248b Mon Sep 17 00:00:00 2001
From: kimjuyoung99 <jjassb404@naver.com>
Date: Fri, 22 Nov 2024 16:19:29 +0900
Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=8E=A8=20Design=20:=20=ED=83=88?=
 =?UTF-8?q?=ED=87=B4=ED=95=98=EA=B8=B0=20=EB=B2=84=ED=8A=BC,=20Header=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button/ActionButton.ts   |  2 +-
 src/pages/MyPage/SettingModal/index.tsx | 32 ++++++++++++++
 src/pages/MyPage/SettingModal/styles.ts | 55 +++++++++++++++++++++++++
 src/pages/MyPage/index.tsx              | 15 ++++++-
 4 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/MyPage/SettingModal/index.tsx
 create mode 100644 src/pages/MyPage/SettingModal/styles.ts

diff --git a/src/components/Button/ActionButton.ts b/src/components/Button/ActionButton.ts
index 8b7980b..178def3 100644
--- a/src/components/Button/ActionButton.ts
+++ b/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: {
diff --git a/src/pages/MyPage/SettingModal/index.tsx b/src/pages/MyPage/SettingModal/index.tsx
new file mode 100644
index 0000000..137d510
--- /dev/null
+++ b/src/pages/MyPage/SettingModal/index.tsx
@@ -0,0 +1,32 @@
+import * as S from './styles'
+import { PrevButton } from '~components/Button/PrevButton/styles'
+import { Typo17 } from '~components/Typo'
+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.Content>
+
+      <S.QuitButtonArea>
+        <S.CustomQuiteButton $type='semiRoundedRect' $bgColor='gc_4' $fontWeight='700'>
+          탈퇴하기
+        </S.CustomQuiteButton>
+      </S.QuitButtonArea>
+    </S.SettingModalContainer>
+  )
+}
diff --git a/src/pages/MyPage/SettingModal/styles.ts b/src/pages/MyPage/SettingModal/styles.ts
new file mode 100644
index 0000000..91334cb
--- /dev/null
+++ b/src/pages/MyPage/SettingModal/styles.ts
@@ -0,0 +1,55 @@
+import { styled } from 'styled-components'
+import { ActionButton } from '~components/Button/ActionButton'
+
+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;
+`
+export const SettingModalContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  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;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.font_1};
+`
+
+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 Content = styled.div`
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+`
diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
index 7b4d731..dff86b3 100644
--- a/src/pages/MyPage/index.tsx
+++ b/src/pages/MyPage/index.tsx
@@ -5,9 +5,21 @@ import ProfileImage from 'assets/masterprofile.svg'
 import { Typo13, Typo15, Typo24 } from '~components/Typo'
 import ToggleBox from '~components/ToggleBox'
 import { useTheme } from 'styled-components'
+import { useState } from 'react'
+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>
   )
 }

From f1840163457569c22f290385df5e7204293f32f6 Mon Sep 17 00:00:00 2001
From: kimjuyoung99 <jjassb404@naver.com>
Date: Fri, 22 Nov 2024 17:07:13 +0900
Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=8E=A8=20Design=20:=20=ED=86=A0?=
 =?UTF-8?q?=EA=B8=80=20=EC=B6=94=EA=B0=80,=20=EB=B0=B0=EA=B2=BD=EC=83=89?=
 =?UTF-8?q?=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                             |  1 -
 src/pages/MyPage/SettingModal/index.tsx |  9 ++++++++-
 src/pages/MyPage/SettingModal/styles.ts | 27 +++++++++++++++++--------
 src/pages/MyPage/index.tsx              |  2 +-
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a7bdc4b..d157fcd 100644
--- a/src/App.tsx
+++ b/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;
diff --git a/src/pages/MyPage/SettingModal/index.tsx b/src/pages/MyPage/SettingModal/index.tsx
index 137d510..219d312 100644
--- a/src/pages/MyPage/SettingModal/index.tsx
+++ b/src/pages/MyPage/SettingModal/index.tsx
@@ -1,6 +1,8 @@
 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
@@ -20,7 +22,12 @@ export default function SettingsModal({ isOpen, onClose }: SettingModalProps) {
         </S.TitleWrap>
       </S.Header>
 
-      <S.Content>와랄랄라</S.Content>
+      <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'>
diff --git a/src/pages/MyPage/SettingModal/styles.ts b/src/pages/MyPage/SettingModal/styles.ts
index 91334cb..de66c33 100644
--- a/src/pages/MyPage/SettingModal/styles.ts
+++ b/src/pages/MyPage/SettingModal/styles.ts
@@ -1,14 +1,14 @@
 import { styled } from 'styled-components'
 import { ActionButton } from '~components/Button/ActionButton'
 
-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 AllButtonWrapper = styled.div`
+  padding-bottom: 16px;
 `
-export const QuitButtonArea = styled.div`
+export const ToggleArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
   width: 100%;
-  padding: 20px;
 `
 export const SettingModalContainer = styled.div`
   position: fixed;
@@ -16,19 +16,29 @@ export const SettingModalContainer = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: white;
+  background-color: ${({ theme }) => theme.colors.brand.lighten_3};
   z-index: 1000;
   display: flex;
   flex-direction: column;
 `
 
+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;
+`
+
 export const Header = styled.div`
   height: 56px;
   padding: 0 20px;
   display: flex;
   align-items: center;
   position: relative;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.font_1};
+  background-color: white;
 `
 
 export const BackButton = styled.button`
@@ -51,5 +61,6 @@ export const TitleWrap = styled.h1`
 export const Content = styled.div`
   flex: 1;
   padding: 20px;
+
   overflow-y: auto;
 `
diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
index dff86b3..b737f80 100644
--- a/src/pages/MyPage/index.tsx
+++ b/src/pages/MyPage/index.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import * as S from './styles'
 import { Helmet } from 'react-helmet-async'
 import { IoSettingsOutline } from 'react-icons/io5'
@@ -5,7 +6,6 @@ import ProfileImage from 'assets/masterprofile.svg'
 import { Typo13, Typo15, Typo24 } from '~components/Typo'
 import ToggleBox from '~components/ToggleBox'
 import { useTheme } from 'styled-components'
-import { useState } from 'react'
 import SettingsModal from '~pages/MyPage/SettingModal'
 
 export default function MyPage() {

From a606275ae9f2302702a457e68a9085c051b9cead Mon Sep 17 00:00:00 2001
From: kimjuyoung99 <jjassb404@naver.com>
Date: Fri, 22 Nov 2024 17:22:24 +0900
Subject: [PATCH 3/6] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20style-component=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC=20=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyPage/SettingModal/styles.ts | 41 +++++++++++++------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/pages/MyPage/SettingModal/styles.ts b/src/pages/MyPage/SettingModal/styles.ts
index de66c33..f47cae6 100644
--- a/src/pages/MyPage/SettingModal/styles.ts
+++ b/src/pages/MyPage/SettingModal/styles.ts
@@ -1,15 +1,7 @@
 import { styled } from 'styled-components'
 import { ActionButton } from '~components/Button/ActionButton'
 
-export const AllButtonWrapper = styled.div`
-  padding-bottom: 16px;
-`
-export const ToggleArea = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  width: 100%;
-`
+//헤더
 export const SettingModalContainer = styled.div`
   position: fixed;
   top: 0;
@@ -22,16 +14,6 @@ export const SettingModalContainer = styled.div`
   flex-direction: column;
 `
 
-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;
-`
-
 export const Header = styled.div`
   height: 56px;
   padding: 0 20px;
@@ -57,10 +39,29 @@ export const TitleWrap = styled.h1`
   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;
+`

From a5b329a961f3e5f291143c2fd03a2bd1f4d22337 Mon Sep 17 00:00:00 2001
From: kimjuyoung99 <jjassb404@naver.com>
Date: Sun, 24 Nov 2024 02:27:00 +0900
Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=EC=98=A4=ED=83=80?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyPage/index.tsx | 20 ++++++++++----------
 src/pages/MyPage/styles.ts |  2 +-
 src/router.tsx             |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
index b737f80..989ff60 100644
--- a/src/pages/MyPage/index.tsx
+++ b/src/pages/MyPage/index.tsx
@@ -2,7 +2,7 @@ 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 ProfileImage from '~assets/masterprofile.svg'
 import { Typo13, Typo15, Typo24 } from '~components/Typo'
 import ToggleBox from '~components/ToggleBox'
 import { useTheme } from 'styled-components'
@@ -10,14 +10,14 @@ import SettingsModal from '~pages/MyPage/SettingModal'
 
 export default function MyPage() {
   const theme = useTheme()
-  const [isSettingsOpen, setIsSettinsOpen] = useState(false)
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
 
-  const handleSettingsClik = () => {
-    setIsSettinsOpen(true)
+  const handleSettingsClick = () => {
+    setIsSettingsOpen(true)
   }
 
-  const handleCloseSteeings = () => {
-    setIsSettinsOpen(false)
+  const handleCloseSettings = () => {
+    setIsSettingsOpen(false)
   }
 
   return (
@@ -28,7 +28,7 @@ export default function MyPage() {
       </Helmet>
       <S.HeaderContainer>
         마이페이지
-        <S.SettingIcon onClick={handleSettingsClik}>
+        <S.SettingIcon onClick={handleSettingsClick}>
           <IoSettingsOutline cursor='pointer' size={28} />
         </S.SettingIcon>
       </S.HeaderContainer>
@@ -50,7 +50,7 @@ export default function MyPage() {
           </S.ProfileText>
         </S.ProfileSection>
 
-        <S.CountSectioin>
+        <S.CountSection>
           <S.CountArea>
             <S.CountWrapperBig>23회</S.CountWrapperBig>
             <S.CountWrapperSmall>누적 산책 횟수</S.CountWrapperSmall>
@@ -65,7 +65,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' />
@@ -77,7 +77,7 @@ export default function MyPage() {
           </S.CustomActionButton>
         </S.ButtonArea>
       </S.MainContainer>
-      <SettingsModal isOpen={isSettingsOpen} onClose={handleCloseSteeings} />
+      <SettingsModal isOpen={isSettingsOpen} onClose={handleCloseSettings} />
     </S.MyPage>
   )
 }
diff --git a/src/pages/MyPage/styles.ts b/src/pages/MyPage/styles.ts
index f0cefcc..155c414 100644
--- a/src/pages/MyPage/styles.ts
+++ b/src/pages/MyPage/styles.ts
@@ -104,7 +104,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;
diff --git a/src/router.tsx b/src/router.tsx
index 5a21574..a692bdf 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -37,5 +37,5 @@ export const router = createBrowserRouter([
   {
     path: '/login',
     element: <Pages.LoginPage />,
-  }
+  },
 ])

From 1593142231fb670bfedb53da3df17ed059afef31 Mon Sep 17 00:00:00 2001
From: kimjuyoung99 <jjassb404@naver.com>
Date: Sun, 24 Nov 2024 02:36:11 +0900
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20white=20->=20gc=5F?=
 =?UTF-8?q?4=EC=88=98=EC=A0=95,=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=ED=95=B8?=
 =?UTF-8?q?=EB=93=A4=EB=9F=AC=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyPage/index.tsx | 8 ++++----
 src/pages/MyPage/styles.ts | 4 +---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
index 989ff60..ecee3c4 100644
--- a/src/pages/MyPage/index.tsx
+++ b/src/pages/MyPage/index.tsx
@@ -12,11 +12,11 @@ export default function MyPage() {
   const theme = useTheme()
   const [isSettingsOpen, setIsSettingsOpen] = useState(false)
 
-  const handleSettingsClick = () => {
+  const onSettingsClick = () => {
     setIsSettingsOpen(true)
   }
 
-  const handleCloseSettings = () => {
+  const onCloseSettingModal = () => {
     setIsSettingsOpen(false)
   }
 
@@ -28,7 +28,7 @@ export default function MyPage() {
       </Helmet>
       <S.HeaderContainer>
         마이페이지
-        <S.SettingIcon onClick={handleSettingsClick}>
+        <S.SettingIcon onClick={onSettingsClick}>
           <IoSettingsOutline cursor='pointer' size={28} />
         </S.SettingIcon>
       </S.HeaderContainer>
@@ -77,7 +77,7 @@ export default function MyPage() {
           </S.CustomActionButton>
         </S.ButtonArea>
       </S.MainContainer>
-      <SettingsModal isOpen={isSettingsOpen} onClose={handleCloseSettings} />
+      <SettingsModal isOpen={isSettingsOpen} onClose={onCloseSettingModal} />
     </S.MyPage>
   )
 }
diff --git a/src/pages/MyPage/styles.ts b/src/pages/MyPage/styles.ts
index 155c414..6dec2f4 100644
--- a/src/pages/MyPage/styles.ts
+++ b/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;

From 7cd85b22af0c970023cb696386d2ac8f953fcab4 Mon Sep 17 00:00:00 2001
From: kimjuyoung99 <jjassb404@naver.com>
Date: Sun, 24 Nov 2024 03:04:57 +0900
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?,=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=AA=85=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC,=20=EC=98=A4=ED=83=80=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyPage/SettingModal/index.tsx |  6 +++---
 src/pages/MyPage/SettingModal/styles.ts |  2 +-
 src/pages/MyPage/index.tsx              | 10 +++++-----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/MyPage/SettingModal/index.tsx b/src/pages/MyPage/SettingModal/index.tsx
index 219d312..69a480d 100644
--- a/src/pages/MyPage/SettingModal/index.tsx
+++ b/src/pages/MyPage/SettingModal/index.tsx
@@ -8,7 +8,7 @@ type SettingModalProps = {
   onClose: () => void
 }
 
-export default function SettingsModal({ isOpen, onClose }: SettingModalProps) {
+export default function SettingModal({ isOpen, onClose }: SettingModalProps) {
   if (!isOpen) return null
 
   return (
@@ -30,9 +30,9 @@ export default function SettingsModal({ isOpen, onClose }: SettingModalProps) {
       </S.Content>
 
       <S.QuitButtonArea>
-        <S.CustomQuiteButton $type='semiRoundedRect' $bgColor='gc_4' $fontWeight='700'>
+        <S.CustomQuitButton $type='semiRoundedRect' $bgColor='gc_4' $fontWeight='700'>
           탈퇴하기
-        </S.CustomQuiteButton>
+        </S.CustomQuitButton>
       </S.QuitButtonArea>
     </S.SettingModalContainer>
   )
diff --git a/src/pages/MyPage/SettingModal/styles.ts b/src/pages/MyPage/SettingModal/styles.ts
index f47cae6..cf9367f 100644
--- a/src/pages/MyPage/SettingModal/styles.ts
+++ b/src/pages/MyPage/SettingModal/styles.ts
@@ -56,7 +56,7 @@ export const Content = styled.div`
   overflow-y: auto;
 `
 //탈퇴하기 버튼
-export const CustomQuiteButton = styled(ActionButton)`
+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};
diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
index ecee3c4..0f32349 100644
--- a/src/pages/MyPage/index.tsx
+++ b/src/pages/MyPage/index.tsx
@@ -6,18 +6,18 @@ 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'
+import SettingModal from '~pages/MyPage/SettingModal'
 
 export default function MyPage() {
   const theme = useTheme()
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
+  const [onClickSetting, setOnclickSetting] = useState(false)
 
   const onSettingsClick = () => {
-    setIsSettingsOpen(true)
+    setOnclickSetting(true)
   }
 
   const onCloseSettingModal = () => {
-    setIsSettingsOpen(false)
+    setOnclickSetting(false)
   }
 
   return (
@@ -77,7 +77,7 @@ export default function MyPage() {
           </S.CustomActionButton>
         </S.ButtonArea>
       </S.MainContainer>
-      <SettingsModal isOpen={isSettingsOpen} onClose={onCloseSettingModal} />
+      <SettingModal isOpen={onClickSetting} onClose={onCloseSettingModal} />
     </S.MyPage>
   )
 }