From b06dd37d1728e446e3da68649df75eb47db067f3 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 11:29:57 +0900
Subject: [PATCH 01/24] =?UTF-8?q?=E2=9C=A8Feat:=20ActionButton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common.styles.ts |  28 +++++++++
 src/styles/theme.ts             | 105 ++++++++++++++++----------------
 2 files changed, 79 insertions(+), 54 deletions(-)
 create mode 100644 src/components/common.styles.ts

diff --git a/src/components/common.styles.ts b/src/components/common.styles.ts
new file mode 100644
index 0000000..239cc6e
--- /dev/null
+++ b/src/components/common.styles.ts
@@ -0,0 +1,28 @@
+import { BrandKey, GrayscaleKey } from '@/styles/theme'
+import { styled } from 'styled-components'
+
+type ActionButtonProps = {
+  bgColor: Extract<BrandKey, 'default' | 'lighten_2'> | Extract<GrayscaleKey, 'gc_4' | 'gc_1' | 'font_1'>
+  rounded: 'regular' | 'full'
+}
+
+const buttonFontColorMap = {
+  default: 'gc_4',
+  lighten_2: 'font_1',
+  font_1: 'gc_4',
+  gc_4: 'font_1',
+  gc_1: 'font_4',
+} as const
+
+export const ActionButton = styled.button<ActionButtonProps>`
+  width: 100%;
+  padding: 1rem;
+  background-color: ${({ bgColor, theme }) =>
+    bgColor.includes('gc') || bgColor.includes('font')
+      ? theme.colors.grayscale[bgColor as Extract<GrayscaleKey, 'gc_4' | 'gc_1' | 'font_1'>]
+      : theme.colors.brand[bgColor as Extract<BrandKey, 'default' | 'lighten_2'>]};
+  color: ${({ bgColor, theme }) => theme.colors.grayscale[buttonFontColorMap[bgColor]]};
+  border-radius: ${({ rounded }) => (rounded === 'regular' ? '12px' : '100px')};
+  font-size: ${({ rounded, theme }) =>
+    rounded === 'regular' ? theme.typography.suitVariable15pt : theme.typography.suitVariable17pt};
+`
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index b8452ba..fcb2ed7 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -1,65 +1,62 @@
 import { DefaultTheme } from 'styled-components'
 
+export const brand = {
+  darken: '#462008',
+  default: '#783D16',
+  lighten_1: '#ECB99A',
+  lighten_2: '#E8DCD4',
+  lighten_3: '#F4F0ED',
+  sub: '#6CA719',
+} as const
+
+export type BrandKey = keyof typeof brand
+
+export const grayscale = {
+  font_1: '#111111', // 기본 텍스트 색상
+  font_2: '#505050',
+  font_3: '#767676',
+  font_4: '#999999',
+  gc_1: '#E5E5EC', // 배경 색상
+  gc_2: '#F1F1F5',
+  gc_3: '#F7F7FB',
+  gc_4: '#FFFFFF', // 가장 밝은 배경
+} as const
+
+export type GrayscaleKey = keyof typeof grayscale
+
+export const grayscaleDark = {
+  font_1: '#FFFFFF', // 어두운 모드에서 기본 텍스트 색상
+  font_2: '#E5E5EC', // 밝은 회색 톤의 텍스트
+  font_3: '#999999',
+  font_4: '#767676',
+  gc_1: '#111111', // 어두운 배경 색상
+  gc_2: '#505050',
+  gc_3: '#767676',
+  gc_4: '#999999',
+} as const
+
+export const typography = {
+  suitVariable24pt: '24px',
+  suitVariable20pt: '20px',
+  suitVariable17pt: '17px',
+  suitVariable15pt: '15px',
+  suitVariable14pt: '14px',
+  suitVariable13pt: '13px',
+  suitVariable11pt: '11px',
+} as const
+
 export const lightTheme: DefaultTheme = {
   colors: {
-    brand: {
-      darken: '#462008',
-      default: '#783D16',
-      lighten_1: '#ECB99A',
-      lighten_2: '#E8DCD4',
-      lighten_3: '#F4F0ED',
-      sub: '#6CA719',
-    },
-    grayscale: {
-      font_1: '#111111', // 기본 텍스트 색상
-      font_2: '#505050',
-      font_3: '#767676',
-      font_4: '#999999',
-      gc_1: '#E5E5EC', // 배경 색상
-      gc_2: '#F1F1F5',
-      gc_3: '#F7F7FB',
-      gc_4: '#FFFFFF', // 가장 밝은 배경
-    },
-  },
-  typography: {
-    suitVariable24pt: '24px',
-    suitVariable20pt: '20px',
-    suitVariable17pt: '17px',
-    suitVariable15pt: '15px',
-    suitVariable14pt: '14px',
-    suitVariable13pt: '13px',
-    suitVariable11pt: '11px',
+    brand,
+    grayscale,
   },
+  typography,
 }
 
 export const darkTheme: DefaultTheme = {
   colors: {
-    brand: {
-      darken: '#462008',
-      default: '#783D16',
-      lighten_1: '#ECB99A',
-      lighten_2: '#E8DCD4',
-      lighten_3: '#F4F0ED',
-      sub: '#6CA719',
-    },
-    grayscale: {
-      font_1: '#FFFFFF', // 어두운 모드에서 기본 텍스트 색상
-      font_2: '#E5E5EC', // 밝은 회색 톤의 텍스트
-      font_3: '#999999',
-      font_4: '#767676',
-      gc_1: '#111111', // 어두운 배경 색상
-      gc_2: '#505050',
-      gc_3: '#767676',
-      gc_4: '#999999',
-    },
-  },
-  typography: {
-    suitVariable24pt: '24px',
-    suitVariable20pt: '20px',
-    suitVariable17pt: '17px',
-    suitVariable15pt: '15px',
-    suitVariable14pt: '14px',
-    suitVariable13pt: '13px',
-    suitVariable11pt: '11px',
+    brand,
+    grayscale: grayscaleDark,
   },
+  typography,
 }

From b8670705fc8f2ad1a70825d6cb43842e2f07f0dd Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 12:15:29 +0900
Subject: [PATCH 02/24] =?UTF-8?q?=E2=9C=A8Feat:=20Input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common.styles.ts | 12 ++++++++++++
 src/styles/globalStyle.ts       |  9 +++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/components/common.styles.ts b/src/components/common.styles.ts
index 239cc6e..47489cb 100644
--- a/src/components/common.styles.ts
+++ b/src/components/common.styles.ts
@@ -26,3 +26,15 @@ export const ActionButton = styled.button<ActionButtonProps>`
   font-size: ${({ rounded, theme }) =>
     rounded === 'regular' ? theme.typography.suitVariable15pt : theme.typography.suitVariable17pt};
 `
+
+export const Input = styled.input`
+  width: 100%;
+  border: none;
+  text-align: center;
+  /* transition: 0.15s box-shadow; */
+  padding: 17px 32px;
+  border-radius: 12px;
+  &:focus {
+    box-shadow: ${({ theme }) => `inset 0 0 0 1px ${theme.colors.grayscale.font_1}`};
+  }
+`
diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts
index 2abf0d9..4bdb4db 100644
--- a/src/styles/globalStyle.ts
+++ b/src/styles/globalStyle.ts
@@ -61,6 +61,15 @@ const GlobalStyle = createGlobalStyle`
     font-family: inherit; /* 폰트 상속 */
     outline: none;
   }
+
+  input {
+    &::placeholder {
+      color: ${({ theme }) => theme.colors.grayscale.font_3};
+    }
+    &:focus::placeholder {
+      color: transparent;
+    }
+  }
 `
 
 export default GlobalStyle

From 40e3045b818689a518231c9d4354218e761825f8 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 14:25:13 +0900
Subject: [PATCH 03/24] =?UTF-8?q?=E2=9C=A8Feat:=20TwoLineInput?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                     | 64 +++++++++++++++++++++++++++
 package.json                          |  8 ++--
 src/components/TwoLineInput/index.tsx | 27 +++++++++++
 src/components/TwoLineInput/styles.ts | 16 +++++++
 src/components/common.styles.ts       |  1 +
 src/constants/validations.ts          |  5 +++
 6 files changed, 118 insertions(+), 3 deletions(-)
 create mode 100644 src/components/TwoLineInput/index.tsx
 create mode 100644 src/components/TwoLineInput/styles.ts
 create mode 100644 src/constants/validations.ts

diff --git a/package-lock.json b/package-lock.json
index 69d7094..824ecdf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,14 @@
       "name": "ddang",
       "version": "0.0.0",
       "dependencies": {
+        "@types/react-textarea-autosize": "^8.0.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-helmet-async": "^2.0.5",
         "react-icons": "^5.3.0",
         "react-query": "^3.39.3",
         "react-router-dom": "^6.28.0",
+        "react-textarea-autosize": "^8.5.5",
         "styled-components": "^6.1.13",
         "styled-reset": "^4.5.2",
         "zustand": "^5.0.1"
@@ -3776,6 +3778,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-textarea-autosize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-textarea-autosize/-/react-textarea-autosize-8.0.0.tgz",
+      "integrity": "sha512-KVqk+/+RMQB3ZDpk7ZTpYHauU3Ue+Y0f09POvGaEpaGb+izzbpoM47tkDGlbF37iT7JYZ8QFwLzqiOPYbQaztA==",
+      "deprecated": "This is a stub types definition. react-textarea-autosize provides its own type definitions, so you do not need this installed.",
+      "dependencies": {
+        "react-textarea-autosize": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -8371,6 +8382,22 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-textarea-autosize": {
+      "version": "8.5.5",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.5.tgz",
+      "integrity": "sha512-CVA94zmfp8m4bSHtWwmANaBR8EPsKy2aZ7KwqhoS4Ftib87F9Kvi7XQhOixypPLMc6kVYgOXvKFuuzZDpHGRPg==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -9982,6 +10009,43 @@
       "integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==",
       "dev": true
     },
+    "node_modules/use-composed-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-latest": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 1953079..a5143f3 100644
--- a/package.json
+++ b/package.json
@@ -13,19 +13,21 @@
     "format:fix": "prettier --write --ignore-path .gitignore \"**/*.{ts,tsx}\""
   },
   "dependencies": {
+    "@types/react-textarea-autosize": "^8.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
     "react-icons": "^5.3.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.28.0",
+    "react-textarea-autosize": "^8.5.5",
     "styled-components": "^6.1.13",
     "styled-reset": "^4.5.2",
     "zustand": "^5.0.1"
   },
   "devDependencies": {
-    "@types/node": "^22.9.0",
     "@eslint/js": "^9.13.0",
+    "@types/node": "^22.9.0",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
@@ -44,12 +46,12 @@
     "typescript": "^5.2.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.2.10",
-    "vite-plugin-compression2": "^1.3.1",
     "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-compression2": "^1.3.1",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-mkcert": "^1.17.6",
-    "vite-plugin-svgr": "^4.3.0",
     "vite-plugin-pwa": "^0.20.5",
+    "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.2",
     "workbox-core": "^7.1.0",
     "workbox-precaching": "^7.1.0",
diff --git a/src/components/TwoLineInput/index.tsx b/src/components/TwoLineInput/index.tsx
new file mode 100644
index 0000000..92e522c
--- /dev/null
+++ b/src/components/TwoLineInput/index.tsx
@@ -0,0 +1,27 @@
+import { TEXTAREA_VALIDATION } from '@constants/validations'
+import { ChangeEvent, useState } from 'react'
+import { TextareaAutosizeProps } from 'react-textarea-autosize'
+import * as S from './styles'
+
+type TwoLineInputProps = TextareaAutosizeProps
+
+export default function TwoLineInput({ ...rest }: TwoLineInputProps) {
+  const [value, setValue] = useState('')
+
+  const onChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const currentValue = e.target.value
+    const lines = currentValue.split('\n')
+
+    if (lines.length > 2) {
+      const limitedValue = lines.slice(0, 2).join('\n')
+      setValue(limitedValue)
+      return
+    }
+
+    setValue(currentValue)
+  }
+
+  return (
+    <S.TwoLineInput maxRows={2} value={value} onChange={onChange} maxLength={TEXTAREA_VALIDATION.maxLength} {...rest} />
+  )
+}
diff --git a/src/components/TwoLineInput/styles.ts b/src/components/TwoLineInput/styles.ts
new file mode 100644
index 0000000..59db626
--- /dev/null
+++ b/src/components/TwoLineInput/styles.ts
@@ -0,0 +1,16 @@
+import { styled } from 'styled-components'
+import TextareaAutosize from 'react-textarea-autosize'
+
+export const TwoLineInput = styled(TextareaAutosize)`
+  width: 100%;
+  border: none;
+  text-align: center;
+  padding: 17px 32px;
+  border-radius: 12px;
+  font-size: ${({ theme }) => theme.typography.suitVariable20pt};
+  resize: none; // 수동 리사이즈 방지
+  overflow: hidden; // 스크롤바 제거
+  &:focus {
+    box-shadow: ${({ theme }) => `inset 0 0 0 1px ${theme.colors.grayscale.font_1}`};
+  }
+`
diff --git a/src/components/common.styles.ts b/src/components/common.styles.ts
index 47489cb..46bd89d 100644
--- a/src/components/common.styles.ts
+++ b/src/components/common.styles.ts
@@ -30,6 +30,7 @@ export const ActionButton = styled.button<ActionButtonProps>`
 export const Input = styled.input`
   width: 100%;
   border: none;
+  font-size: ${({ theme }) => theme.typography.suitVariable20pt};
   text-align: center;
   /* transition: 0.15s box-shadow; */
   padding: 17px 32px;
diff --git a/src/constants/validations.ts b/src/constants/validations.ts
new file mode 100644
index 0000000..a874339
--- /dev/null
+++ b/src/constants/validations.ts
@@ -0,0 +1,5 @@
+export const INPUT_VALIDATION = {}
+
+export const TEXTAREA_VALIDATION = {
+  maxLength: 50,
+}

From e20176aae615bf23ff2dcf5c3f0cc482e3355ed4 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:24:47 +0900
Subject: [PATCH 04/24] =?UTF-8?q?=E2=9C=A8Feat:=20Toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Toggle/index.tsx | 23 ++++++++++++++++++
 src/components/Toggle/styles.ts | 42 +++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/components/Toggle/index.tsx
 create mode 100644 src/components/Toggle/styles.ts

diff --git a/src/components/Toggle/index.tsx b/src/components/Toggle/index.tsx
new file mode 100644
index 0000000..ba54a14
--- /dev/null
+++ b/src/components/Toggle/index.tsx
@@ -0,0 +1,23 @@
+import * as S from './styles'
+import { useState } from 'react'
+
+type ToggleProps = {
+  id: string
+}
+
+export default function Toggle({ id }: ToggleProps) {
+  const [checked, setChecked] = useState(false)
+
+  const handleChange = () => {
+    setChecked(!checked)
+  }
+
+  return (
+    <S.Toggle>
+      <input name={id} id={id} type='checkbox' checked={checked} onChange={handleChange} hidden />
+      <label htmlFor={id}>
+        <S.Circle />
+      </label>
+    </S.Toggle>
+  )
+}
diff --git a/src/components/Toggle/styles.ts b/src/components/Toggle/styles.ts
new file mode 100644
index 0000000..cc8dd9c
--- /dev/null
+++ b/src/components/Toggle/styles.ts
@@ -0,0 +1,42 @@
+import { styled } from 'styled-components'
+
+export const Toggle = styled.div`
+  display: block;
+  width: fit-content;
+  border-radius: 100px;
+  position: relative;
+  overflow: hidden;
+  width: 40px;
+  height: 24px;
+
+  & > label {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    cursor: pointer;
+    background-color: ${({ theme }) => theme.colors.grayscale.gc_1};
+    transition: background-color 0.3s;
+  }
+  & > input:checked + label {
+    background-color: ${({ theme }) => theme.colors.grayscale.font_1};
+  }
+`
+
+export const Circle = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  translate: 0 -50%;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  transition: background-color 0.3s ease;
+  background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
+  input:checked + label > & {
+    translate: 16px -50%;
+  }
+  transition: translate 0.3s;
+`

From 2e84a7dbffc7861ab964e2c15183a6db72341215 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:35:06 +0900
Subject: [PATCH 05/24] =?UTF-8?q?=E2=9C=A8Fix:=20=EA=B8=B0=EB=B3=B8=20?=
 =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=83=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/globalStyle.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts
index 4bdb4db..1cf45d7 100644
--- a/src/styles/globalStyle.ts
+++ b/src/styles/globalStyle.ts
@@ -46,7 +46,7 @@ const GlobalStyle = createGlobalStyle`
     line-height: 1.5; 
     letter-spacing: -0.025em; 
     color: ${({ theme }) => theme.colors.grayscale.font_1}; /* 기본 텍스트 색상 (Font_1) */
-    background-color: ${({ theme }) => theme.colors.grayscale.gc_4}; /* 배경색 (GC_4) */
+    background-color: ${({ theme }) => theme.colors.brand.lighten_3}; /* 배경색 (GC_4) */
   }
 
   /* 버튼 스타일 */

From 489f5a9af742b831d556ae52614e3e30180c0824 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:42:09 +0900
Subject: [PATCH 06/24] =?UTF-8?q?=E2=9C=A8Feat:=20ToggleBox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToggleBox/index.tsx | 15 +++++++++++++++
 src/components/ToggleBox/styles.ts | 16 ++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/components/ToggleBox/index.tsx
 create mode 100644 src/components/ToggleBox/styles.ts

diff --git a/src/components/ToggleBox/index.tsx b/src/components/ToggleBox/index.tsx
new file mode 100644
index 0000000..d7aebae
--- /dev/null
+++ b/src/components/ToggleBox/index.tsx
@@ -0,0 +1,15 @@
+import Toggle from '@components/Toggle'
+import * as S from './styles'
+
+type ToggleBoxProps = {
+  id: string
+}
+
+export default function ToggleBox({ id }: ToggleBoxProps) {
+  return (
+    <S.ToggleBox>
+      <p>모든 알람</p>
+      <Toggle id={id} />
+    </S.ToggleBox>
+  )
+}
diff --git a/src/components/ToggleBox/styles.ts b/src/components/ToggleBox/styles.ts
new file mode 100644
index 0000000..9553dff
--- /dev/null
+++ b/src/components/ToggleBox/styles.ts
@@ -0,0 +1,16 @@
+import { styled } from 'styled-components'
+
+export const ToggleBox = styled.div`
+  padding: 18px 16px 18px 20px;
+  display: flex;
+  justify-content: space-between;
+  background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
+  &:first-of-type {
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+  }
+  &:last-of-type {
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+  }
+`

From e8c4d30789f37880e10011225fca6780be02c92d Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:26:10 +0900
Subject: [PATCH 07/24] =?UTF-8?q?=E2=9C=A8Feat:=20settingsStore?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/settingsStore.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/stores/settingsStore.ts

diff --git a/src/stores/settingsStore.ts b/src/stores/settingsStore.ts
new file mode 100644
index 0000000..ee37d7b
--- /dev/null
+++ b/src/stores/settingsStore.ts
@@ -0,0 +1,28 @@
+import { create } from 'zustand'
+
+interface SettingsStore {
+  friendRequests: boolean
+  familyWalkNotifications: boolean
+  myWalkNotifications: boolean
+  messages: boolean
+  gangbuntta: boolean
+  setFriendRequests: (value: boolean) => void
+  setFamilyWalkNotifications: (value: boolean) => void
+  setMyWalkNotifications: (value: boolean) => void
+  setMessages: (value: boolean) => void
+  setGangbuntta: (value: boolean) => void
+}
+
+export const useSettingsStore = create<SettingsStore>(set => ({
+  friendRequests: true,
+  familyWalkNotifications: true,
+  myWalkNotifications: true,
+  messages: true,
+  gangbuntta: true,
+
+  setFriendRequests: value => set({ friendRequests: value }),
+  setFamilyWalkNotifications: value => set({ familyWalkNotifications: value }),
+  setMyWalkNotifications: value => set({ myWalkNotifications: value }),
+  setMessages: value => set({ messages: value }),
+  setGangbuntta: value => set({ gangbuntta: value }),
+}))

From c0f4a9064b2653b8fa61e98175d3f9e7b5f2e931 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:29:32 +0900
Subject: [PATCH 08/24] =?UTF-8?q?=E2=9C=A8Feat:=20allNotifications(?=
 =?UTF-8?q?=EB=AA=A8=EB=93=A0=20=EC=95=8C=EB=A6=BC=20=EC=84=A4=EC=A0=95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/settingsStore.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/stores/settingsStore.ts b/src/stores/settingsStore.ts
index ee37d7b..c396074 100644
--- a/src/stores/settingsStore.ts
+++ b/src/stores/settingsStore.ts
@@ -1,6 +1,7 @@
 import { create } from 'zustand'
 
-interface SettingsStore {
+type SettingsStore = {
+  allNotifications: boolean
   friendRequests: boolean
   familyWalkNotifications: boolean
   myWalkNotifications: boolean
@@ -11,15 +12,18 @@ interface SettingsStore {
   setMyWalkNotifications: (value: boolean) => void
   setMessages: (value: boolean) => void
   setGangbuntta: (value: boolean) => void
+  setAllNotifications: (value: boolean) => void
 }
 
 export const useSettingsStore = create<SettingsStore>(set => ({
+  allNotifications: true,
   friendRequests: true,
   familyWalkNotifications: true,
   myWalkNotifications: true,
   messages: true,
   gangbuntta: true,
 
+  setAllNotifications: value => set({ friendRequests: value }),
   setFriendRequests: value => set({ friendRequests: value }),
   setFamilyWalkNotifications: value => set({ familyWalkNotifications: value }),
   setMyWalkNotifications: value => set({ myWalkNotifications: value }),

From 3a8fe45c1e40324769be9d328090e23ddf2f5fba Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:52:20 +0900
Subject: [PATCH 09/24] =?UTF-8?q?=E2=9C=A8Feat:=20settingsInfo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/settingsInfo.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/constants/settingsInfo.ts

diff --git a/src/constants/settingsInfo.ts b/src/constants/settingsInfo.ts
new file mode 100644
index 0000000..91bbd03
--- /dev/null
+++ b/src/constants/settingsInfo.ts
@@ -0,0 +1,28 @@
+import { SettingsStoreKey } from '@stores/settingsStore'
+
+export const SETTINGS_INFO: Record<SettingsStoreKey, { title: string; desc: string }> = {
+  allNotifications: {
+    title: '모든 알림',
+    desc: '',
+  },
+  friendRequests: {
+    title: '친구 신청',
+    desc: '부연 설명이 들어가는 공간',
+  },
+  familyWalkNotifications: {
+    title: '가족 산책 알림',
+    desc: '부연 설명이 들어가는 공간',
+  },
+  myWalkNotifications: {
+    title: '내 산책 알림',
+    desc: '부연 설명이 들어가는 공간',
+  },
+  messages: {
+    title: '메세지',
+    desc: '부연 설명이 들어가는 공간',
+  },
+  gangbuntta: {
+    title: '강번따 허용 여부',
+    desc: '부연 설명이 들어가는 공간',
+  },
+}

From ccf3f071a4e99c1cb2c74980f213aa9a012dcc9a Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:53:24 +0900
Subject: [PATCH 10/24] =?UTF-8?q?=E2=9C=A8Feat:=20ToggleArea=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20common=20typos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                 |  2 ++
 src/components/Toggle/index.tsx             | 14 ++++----
 src/components/ToggleArea/index.tsx         | 14 ++++++++
 src/components/ToggleArea/styles.ts         |  3 ++
 src/components/ToggleBox/index.tsx          | 15 +++++---
 src/components/ToggleBox/styles.ts          |  6 +++-
 src/stores/settingsStore.ts                 | 20 +++++------
 src/{components => styles}/common.styles.ts |  5 ++-
 src/styles/common.typos.ts                  | 40 +++++++++++++++++++++
 src/styles/styled.d.ts                      | 14 ++++----
 src/styles/theme.ts                         | 20 +++++------
 11 files changed, 110 insertions(+), 43 deletions(-)
 create mode 100644 src/components/ToggleArea/index.tsx
 create mode 100644 src/components/ToggleArea/styles.ts
 rename src/{components => styles}/common.styles.ts (85%)
 create mode 100644 src/styles/common.typos.ts

diff --git a/src/App.tsx b/src/App.tsx
index 574a33d..24d1410 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import { useState } from 'react'
 import { RouterProvider } from 'react-router-dom'
 import { ThemeProvider } from 'styled-components'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
+import ToggleArea from '@components/ToggleArea'
 
 function App() {
   //* 다크모드 확장성 고려
@@ -23,6 +24,7 @@ function App() {
           <button onClick={toggleTheme} hidden>
             Toggle Theme
           </button>
+          <ToggleArea />
           <GlobalStyle />
           <RouterProvider router={router} />
           <PWABadge />
diff --git a/src/components/Toggle/index.tsx b/src/components/Toggle/index.tsx
index ba54a14..695d33f 100644
--- a/src/components/Toggle/index.tsx
+++ b/src/components/Toggle/index.tsx
@@ -1,20 +1,22 @@
+import { SettingsStoreKey, useSettingsStore } from '@stores/settingsStore'
 import * as S from './styles'
-import { useState } from 'react'
 
 type ToggleProps = {
   id: string
+  setting: SettingsStoreKey
 }
 
-export default function Toggle({ id }: ToggleProps) {
-  const [checked, setChecked] = useState(false)
+export default function Toggle({ id, setting }: ToggleProps) {
+  const value = useSettingsStore(state => state[setting])
+  const setSetting = useSettingsStore(state => state.setSetting)
 
-  const handleChange = () => {
-    setChecked(!checked)
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSetting(setting, e.target.checked)
   }
 
   return (
     <S.Toggle>
-      <input name={id} id={id} type='checkbox' checked={checked} onChange={handleChange} hidden />
+      <input name={id} id={id} type='checkbox' checked={value} onChange={handleChange} hidden />
       <label htmlFor={id}>
         <S.Circle />
       </label>
diff --git a/src/components/ToggleArea/index.tsx b/src/components/ToggleArea/index.tsx
new file mode 100644
index 0000000..c40a1d6
--- /dev/null
+++ b/src/components/ToggleArea/index.tsx
@@ -0,0 +1,14 @@
+import ToggleBox from '@components/ToggleBox'
+import * as S from './styles'
+
+export default function ToggleArea() {
+  return (
+    <S.ToggleArea className=''>
+      <ToggleBox setting={'allNotifications'} />
+      <ToggleBox setting={'friendRequests'} />
+      <ToggleBox setting={'familyWalkNotifications'} />
+      <ToggleBox setting={'myWalkNotifications'} />
+      <ToggleBox setting={'messages'} />
+    </S.ToggleArea>
+  )
+}
diff --git a/src/components/ToggleArea/styles.ts b/src/components/ToggleArea/styles.ts
new file mode 100644
index 0000000..685755a
--- /dev/null
+++ b/src/components/ToggleArea/styles.ts
@@ -0,0 +1,3 @@
+import { styled } from 'styled-components'
+
+export const ToggleArea = styled.div``
diff --git a/src/components/ToggleBox/index.tsx b/src/components/ToggleBox/index.tsx
index d7aebae..3118d88 100644
--- a/src/components/ToggleBox/index.tsx
+++ b/src/components/ToggleBox/index.tsx
@@ -1,15 +1,22 @@
 import Toggle from '@components/Toggle'
+import { SettingsStoreKey } from '@stores/settingsStore'
 import * as S from './styles'
+import { SETTINGS_INFO } from '@constants/settingsInfo'
+import { Typo15, Typo17 } from '@/styles/common.typos'
 
 type ToggleBoxProps = {
-  id: string
+  setting: SettingsStoreKey
 }
 
-export default function ToggleBox({ id }: ToggleBoxProps) {
+//todo 부가설명란
+export default function ToggleBox({ setting }: ToggleBoxProps) {
   return (
     <S.ToggleBox>
-      <p>모든 알람</p>
-      <Toggle id={id} />
+      <S.MainArea>
+        <Typo17 color='font_1'>{SETTINGS_INFO[setting].title}</Typo17>
+        {SETTINGS_INFO[setting].desc ? <Typo15>{SETTINGS_INFO[setting].desc}</Typo15> : null}
+      </S.MainArea>
+      <Toggle id={setting} setting={setting} />
     </S.ToggleBox>
   )
 }
diff --git a/src/components/ToggleBox/styles.ts b/src/components/ToggleBox/styles.ts
index 9553dff..08f9fc4 100644
--- a/src/components/ToggleBox/styles.ts
+++ b/src/components/ToggleBox/styles.ts
@@ -1,9 +1,11 @@
 import { styled } from 'styled-components'
 
 export const ToggleBox = styled.div`
-  padding: 18px 16px 18px 20px;
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  padding: 18px 16px 18px 20px;
+  border: 1px solid black;
   background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
   &:first-of-type {
     border-top-left-radius: 16px;
@@ -14,3 +16,5 @@ export const ToggleBox = styled.div`
     border-bottom-right-radius: 16px;
   }
 `
+
+export const MainArea = styled.div``
diff --git a/src/stores/settingsStore.ts b/src/stores/settingsStore.ts
index c396074..118e064 100644
--- a/src/stores/settingsStore.ts
+++ b/src/stores/settingsStore.ts
@@ -7,12 +7,7 @@ type SettingsStore = {
   myWalkNotifications: boolean
   messages: boolean
   gangbuntta: boolean
-  setFriendRequests: (value: boolean) => void
-  setFamilyWalkNotifications: (value: boolean) => void
-  setMyWalkNotifications: (value: boolean) => void
-  setMessages: (value: boolean) => void
-  setGangbuntta: (value: boolean) => void
-  setAllNotifications: (value: boolean) => void
+  setSetting: (key: keyof Omit<SettingsStore, 'setSetting'>, value: boolean) => void
 }
 
 export const useSettingsStore = create<SettingsStore>(set => ({
@@ -23,10 +18,11 @@ export const useSettingsStore = create<SettingsStore>(set => ({
   messages: true,
   gangbuntta: true,
 
-  setAllNotifications: value => set({ friendRequests: value }),
-  setFriendRequests: value => set({ friendRequests: value }),
-  setFamilyWalkNotifications: value => set({ familyWalkNotifications: value }),
-  setMyWalkNotifications: value => set({ myWalkNotifications: value }),
-  setMessages: value => set({ messages: value }),
-  setGangbuntta: value => set({ gangbuntta: value }),
+  setSetting: (key, value) =>
+    set(state => ({
+      ...state,
+      [key]: value,
+    })),
 }))
+
+export type SettingsStoreKey = keyof Omit<SettingsStore, 'setSetting'>
diff --git a/src/components/common.styles.ts b/src/styles/common.styles.ts
similarity index 85%
rename from src/components/common.styles.ts
rename to src/styles/common.styles.ts
index 46bd89d..3d5838b 100644
--- a/src/components/common.styles.ts
+++ b/src/styles/common.styles.ts
@@ -23,14 +23,13 @@ export const ActionButton = styled.button<ActionButtonProps>`
       : theme.colors.brand[bgColor as Extract<BrandKey, 'default' | 'lighten_2'>]};
   color: ${({ bgColor, theme }) => theme.colors.grayscale[buttonFontColorMap[bgColor]]};
   border-radius: ${({ rounded }) => (rounded === 'regular' ? '12px' : '100px')};
-  font-size: ${({ rounded, theme }) =>
-    rounded === 'regular' ? theme.typography.suitVariable15pt : theme.typography.suitVariable17pt};
+  font-size: ${({ rounded, theme }) => (rounded === 'regular' ? theme.typography._15 : theme.typography._17)};
 `
 
 export const Input = styled.input`
   width: 100%;
   border: none;
-  font-size: ${({ theme }) => theme.typography.suitVariable20pt};
+  font-size: ${({ theme }) => theme.typography._20};
   text-align: center;
   /* transition: 0.15s box-shadow; */
   padding: 17px 32px;
diff --git a/src/styles/common.typos.ts b/src/styles/common.typos.ts
new file mode 100644
index 0000000..22eece2
--- /dev/null
+++ b/src/styles/common.typos.ts
@@ -0,0 +1,40 @@
+import { styled } from 'styled-components'
+import { DefaultTheme } from 'styled-components/dist/types'
+
+type TypoProps = {
+  color?: keyof DefaultTheme['colors']['grayscale']
+  weight?: 300 | 400 | 700 | 800
+}
+
+const Typo = styled.p<TypoProps>`
+  color: ${({ color }) => (color ? color : 'inherit')};
+  font-weight: ${({ weight }) => (weight ? weight : 400)};
+`
+
+export const Typo11 = styled(Typo)`
+  font-size: ${({ theme }) => theme.typography._11};
+`
+
+export const Typo13 = styled(Typo)`
+  font-size: ${({ theme }) => theme.typography._13};
+`
+
+export const Typo14 = styled(Typo)`
+  font-size: ${({ theme }) => theme.typography._14};
+`
+
+export const Typo15 = styled(Typo)`
+  font-size: ${({ theme }) => theme.typography._15};
+`
+
+export const Typo17 = styled(Typo)`
+  font-size: ${({ theme }) => theme.typography._17};
+`
+
+export const Typo20 = styled(Typo)`
+  font-size: ${({ theme }) => theme.typography._20};
+`
+
+export const Typo24 = styled(Typo)`
+  font-size: ${({ theme }) => theme.typography._24};
+`
diff --git a/src/styles/styled.d.ts b/src/styles/styled.d.ts
index 0a9728f..5d632f8 100644
--- a/src/styles/styled.d.ts
+++ b/src/styles/styled.d.ts
@@ -23,13 +23,13 @@ declare module 'styled-components' {
       }
     }
     typography: {
-      suitVariable24pt: string
-      suitVariable20pt: string
-      suitVariable17pt: string
-      suitVariable15pt: string
-      suitVariable14pt: string
-      suitVariable13pt: string
-      suitVariable11pt: string
+      _24: string
+      _20: string
+      _17: string
+      _15: string
+      _14: string
+      _13: string
+      _11: string
     }
   }
 }
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index fcb2ed7..57fe48e 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -1,6 +1,6 @@
 import { DefaultTheme } from 'styled-components'
 
-export const brand = {
+const brand = {
   darken: '#462008',
   default: '#783D16',
   lighten_1: '#ECB99A',
@@ -11,7 +11,7 @@ export const brand = {
 
 export type BrandKey = keyof typeof brand
 
-export const grayscale = {
+const grayscale = {
   font_1: '#111111', // 기본 텍스트 색상
   font_2: '#505050',
   font_3: '#767676',
@@ -24,7 +24,7 @@ export const grayscale = {
 
 export type GrayscaleKey = keyof typeof grayscale
 
-export const grayscaleDark = {
+const grayscaleDark = {
   font_1: '#FFFFFF', // 어두운 모드에서 기본 텍스트 색상
   font_2: '#E5E5EC', // 밝은 회색 톤의 텍스트
   font_3: '#999999',
@@ -36,13 +36,13 @@ export const grayscaleDark = {
 } as const
 
 export const typography = {
-  suitVariable24pt: '24px',
-  suitVariable20pt: '20px',
-  suitVariable17pt: '17px',
-  suitVariable15pt: '15px',
-  suitVariable14pt: '14px',
-  suitVariable13pt: '13px',
-  suitVariable11pt: '11px',
+  _24: '24px',
+  _20: '20px',
+  _17: '17px',
+  _15: '15px',
+  _14: '14px',
+  _13: '13px',
+  _11: '11px',
 } as const
 
 export const lightTheme: DefaultTheme = {

From c467983f322f7ef1e8a9128baa7e41e7f92de38f Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 18:02:56 +0900
Subject: [PATCH 11/24] =?UTF-8?q?=F0=9F=90=9BFix:=20App.tsx=20=EC=9B=90?=
 =?UTF-8?q?=EB=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 24d1410..574a33d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,7 +6,6 @@ import { useState } from 'react'
 import { RouterProvider } from 'react-router-dom'
 import { ThemeProvider } from 'styled-components'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
-import ToggleArea from '@components/ToggleArea'
 
 function App() {
   //* 다크모드 확장성 고려
@@ -24,7 +23,6 @@ function App() {
           <button onClick={toggleTheme} hidden>
             Toggle Theme
           </button>
-          <ToggleArea />
           <GlobalStyle />
           <RouterProvider router={router} />
           <PWABadge />

From 67ce7f6a3bef0e7752f1ef0dd3473eaca97234d6 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 18:18:14 +0900
Subject: [PATCH 12/24] =?UTF-8?q?=F0=9F=8E=A8Design:=20ToggleBox,=20Toggle?=
 =?UTF-8?q?Area=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToggleArea/index.tsx | 3 +--
 src/components/ToggleBox/index.tsx  | 2 +-
 src/components/ToggleBox/styles.ts  | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/ToggleArea/index.tsx b/src/components/ToggleArea/index.tsx
index c40a1d6..2233168 100644
--- a/src/components/ToggleArea/index.tsx
+++ b/src/components/ToggleArea/index.tsx
@@ -3,8 +3,7 @@ import * as S from './styles'
 
 export default function ToggleArea() {
   return (
-    <S.ToggleArea className=''>
-      <ToggleBox setting={'allNotifications'} />
+    <S.ToggleArea>
       <ToggleBox setting={'friendRequests'} />
       <ToggleBox setting={'familyWalkNotifications'} />
       <ToggleBox setting={'myWalkNotifications'} />
diff --git a/src/components/ToggleBox/index.tsx b/src/components/ToggleBox/index.tsx
index 3118d88..5267811 100644
--- a/src/components/ToggleBox/index.tsx
+++ b/src/components/ToggleBox/index.tsx
@@ -13,7 +13,7 @@ export default function ToggleBox({ setting }: ToggleBoxProps) {
   return (
     <S.ToggleBox>
       <S.MainArea>
-        <Typo17 color='font_1'>{SETTINGS_INFO[setting].title}</Typo17>
+        <Typo17 weight={700}>{SETTINGS_INFO[setting].title}</Typo17>
         {SETTINGS_INFO[setting].desc ? <Typo15>{SETTINGS_INFO[setting].desc}</Typo15> : null}
       </S.MainArea>
       <Toggle id={setting} setting={setting} />
diff --git a/src/components/ToggleBox/styles.ts b/src/components/ToggleBox/styles.ts
index 08f9fc4..a0d9a17 100644
--- a/src/components/ToggleBox/styles.ts
+++ b/src/components/ToggleBox/styles.ts
@@ -5,7 +5,6 @@ export const ToggleBox = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 18px 16px 18px 20px;
-  border: 1px solid black;
   background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
   &:first-of-type {
     border-top-left-radius: 16px;

From d82c3048fa5792dc1e9e54d88c7bf72c0e8fbb87 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 18:28:06 +0900
Subject: [PATCH 13/24] =?UTF-8?q?=F0=9F=90=9BFix:=20TwoLineInput=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TwoLineInput/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TwoLineInput/styles.ts b/src/components/TwoLineInput/styles.ts
index 59db626..0c7a48c 100644
--- a/src/components/TwoLineInput/styles.ts
+++ b/src/components/TwoLineInput/styles.ts
@@ -7,7 +7,7 @@ export const TwoLineInput = styled(TextareaAutosize)`
   text-align: center;
   padding: 17px 32px;
   border-radius: 12px;
-  font-size: ${({ theme }) => theme.typography.suitVariable20pt};
+  font-size: ${({ theme }) => theme.typography._20};
   resize: none; // 수동 리사이즈 방지
   overflow: hidden; // 스크롤바 제거
   &:focus {

From e3c73b7155cbb47a081cab9a25d2f548d92d8c4d Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 23:06:41 +0900
Subject: [PATCH 14/24] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20styled.d.ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/styled.d.ts | 67 ++++++++++++++++++++++++------------------
 src/styles/theme.ts    |  4 ---
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/styles/styled.d.ts b/src/styles/styled.d.ts
index 5d632f8..03f9916 100644
--- a/src/styles/styled.d.ts
+++ b/src/styles/styled.d.ts
@@ -1,35 +1,44 @@
+// styled.d.ts
 import 'styled-components'
 
+interface BrandColors {
+  darken: string
+  default: string
+  lighten_1: string
+  lighten_2: string
+  lighten_3: string
+  sub: string
+}
+
+interface GrayscaleColors {
+  font_1: string
+  font_2: string
+  font_3: string
+  font_4: string
+  gc_1: string
+  gc_2: string
+  gc_3: string
+  gc_4: string
+}
+
+interface Colors {
+  brand: BrandColors
+  grayscale: GrayscaleColors
+}
+
+interface Typography {
+  _24: string
+  _20: string
+  _17: string
+  _15: string
+  _14: string
+  _13: string
+  _11: string
+}
+
 declare module 'styled-components' {
   export interface DefaultTheme {
-    colors: {
-      brand: {
-        darken: string
-        default: string
-        lighten_1: string
-        lighten_2: string
-        lighten_3: string
-        sub: string
-      }
-      grayscale: {
-        font_1: string
-        font_2: string
-        font_3: string
-        font_4: string
-        gc_1: string
-        gc_2: string
-        gc_3: string
-        gc_4: string
-      }
-    }
-    typography: {
-      _24: string
-      _20: string
-      _17: string
-      _15: string
-      _14: string
-      _13: string
-      _11: string
-    }
+    colors: Colors
+    typography: Typography
   }
 }
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 57fe48e..765b2f7 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -9,8 +9,6 @@ const brand = {
   sub: '#6CA719',
 } as const
 
-export type BrandKey = keyof typeof brand
-
 const grayscale = {
   font_1: '#111111', // 기본 텍스트 색상
   font_2: '#505050',
@@ -22,8 +20,6 @@ const grayscale = {
   gc_4: '#FFFFFF', // 가장 밝은 배경
 } as const
 
-export type GrayscaleKey = keyof typeof grayscale
-
 const grayscaleDark = {
   font_1: '#FFFFFF', // 어두운 모드에서 기본 텍스트 색상
   font_2: '#E5E5EC', // 밝은 회색 톤의 텍스트

From 3cfd884ad3511a7e1a782d435698f4c833372461 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 23:07:00 +0900
Subject: [PATCH 15/24] =?UTF-8?q?=E2=9C=A8Feat:=20ActionButton=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/common.styles.ts | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/styles/common.styles.ts b/src/styles/common.styles.ts
index 3d5838b..9f51b7f 100644
--- a/src/styles/common.styles.ts
+++ b/src/styles/common.styles.ts
@@ -1,9 +1,11 @@
-import { BrandKey, GrayscaleKey } from '@/styles/theme'
+import { BrandColors, GrayscaleColors } from '@/styles/styled'
 import { styled } from 'styled-components'
 
 type ActionButtonProps = {
-  bgColor: Extract<BrandKey, 'default' | 'lighten_2'> | Extract<GrayscaleKey, 'gc_4' | 'gc_1' | 'font_1'>
-  rounded: 'regular' | 'full'
+  $bgColor:
+    | Extract<keyof BrandColors, 'default' | 'lighten_2'>
+    | Extract<keyof GrayscaleColors, 'gc_4' | 'gc_1' | 'font_1'>
+  $type: 'roundedRect' | 'semiRoundedRect' | 'capsule'
 }
 
 const buttonFontColorMap = {
@@ -17,13 +19,17 @@ const buttonFontColorMap = {
 export const ActionButton = styled.button<ActionButtonProps>`
   width: 100%;
   padding: 1rem;
-  background-color: ${({ bgColor, theme }) =>
-    bgColor.includes('gc') || bgColor.includes('font')
-      ? theme.colors.grayscale[bgColor as Extract<GrayscaleKey, 'gc_4' | 'gc_1' | 'font_1'>]
-      : theme.colors.brand[bgColor as Extract<BrandKey, 'default' | 'lighten_2'>]};
-  color: ${({ bgColor, theme }) => theme.colors.grayscale[buttonFontColorMap[bgColor]]};
-  border-radius: ${({ rounded }) => (rounded === 'regular' ? '12px' : '100px')};
-  font-size: ${({ rounded, theme }) => (rounded === 'regular' ? theme.typography._15 : theme.typography._17)};
+  background-color: ${({ theme, $bgColor: bgColor }) =>
+    theme.colors.grayscale[bgColor as keyof GrayscaleColors] || theme.colors.brand[bgColor as keyof BrandColors]};
+  color: ${({ $bgColor: bgColor, theme }) => theme.colors.grayscale[buttonFontColorMap[bgColor]]};
+  border-radius: ${({ $type: type }) =>
+    type === 'roundedRect' ? '12px' : type === 'semiRoundedRect' ? '20px' : '100px'};
+  font-size: ${({ $type: type, theme }) =>
+    type === 'roundedRect'
+      ? theme.typography._14
+      : type === 'semiRoundedRect'
+        ? theme.typography._15
+        : theme.typography._17};
 `
 
 export const Input = styled.input`

From 76381774e26ea16eebad033a1dfb040ed16b3395 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 23:13:13 +0900
Subject: [PATCH 16/24] =?UTF-8?q?=F0=9F=9A=9ARename:=20common.styles.ts,?=
 =?UTF-8?q?=20common.typos.ts=20components=20=ED=8F=B4=EB=8D=94=EB=A1=9C?=
 =?UTF-8?q?=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{styles => components}/common.styles.ts | 0
 src/{styles => components}/common.typos.ts  | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/{styles => components}/common.styles.ts (100%)
 rename src/{styles => components}/common.typos.ts (100%)

diff --git a/src/styles/common.styles.ts b/src/components/common.styles.ts
similarity index 100%
rename from src/styles/common.styles.ts
rename to src/components/common.styles.ts
diff --git a/src/styles/common.typos.ts b/src/components/common.typos.ts
similarity index 100%
rename from src/styles/common.typos.ts
rename to src/components/common.typos.ts

From 9e175eb28dbe5e6c6f1f630cb35a0724a7d452f2 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 23:35:51 +0900
Subject: [PATCH 17/24] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20styled.d.ts?=
 =?UTF-8?q?=20type=20=EB=AA=A8=EB=91=90=20export?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/styled.d.ts | 72 ++++++++++++++++++++----------------------
 1 file changed, 35 insertions(+), 37 deletions(-)

diff --git a/src/styles/styled.d.ts b/src/styles/styled.d.ts
index 03f9916..84b43cc 100644
--- a/src/styles/styled.d.ts
+++ b/src/styles/styled.d.ts
@@ -1,44 +1,42 @@
-// styled.d.ts
 import 'styled-components'
 
-interface BrandColors {
-  darken: string
-  default: string
-  lighten_1: string
-  lighten_2: string
-  lighten_3: string
-  sub: string
-}
-
-interface GrayscaleColors {
-  font_1: string
-  font_2: string
-  font_3: string
-  font_4: string
-  gc_1: string
-  gc_2: string
-  gc_3: string
-  gc_4: string
-}
-
-interface Colors {
-  brand: BrandColors
-  grayscale: GrayscaleColors
-}
-
-interface Typography {
-  _24: string
-  _20: string
-  _17: string
-  _15: string
-  _14: string
-  _13: string
-  _11: string
-}
-
 declare module 'styled-components' {
-  export interface DefaultTheme {
+  export type DefaultTheme = {
     colors: Colors
     typography: Typography
   }
+  export type BrandColors = {
+    darken: string
+    default: string
+    lighten_1: string
+    lighten_2: string
+    lighten_3: string
+    sub: string
+  }
+
+  export type GrayscaleColors = {
+    font_1: string
+    font_2: string
+    font_3: string
+    font_4: string
+    gc_1: string
+    gc_2: string
+    gc_3: string
+    gc_4: string
+  }
+
+  export type Colors = {
+    brand: BrandColors
+    grayscale: GrayscaleColors
+  }
+
+  export type Typography = {
+    _24: string
+    _20: string
+    _17: string
+    _15: string
+    _14: string
+    _13: string
+    _11: string
+  }
 }

From e5091d233b79e1ee77c4dd49b5bfb33bf7b31455 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Wed, 20 Nov 2024 23:36:28 +0900
Subject: [PATCH 18/24] =?UTF-8?q?=F0=9F=9A=9ARename:=20common.styles=20->?=
 =?UTF-8?q?=20common.buttons,=20common.inputs=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{common.styles.ts => common.buttons.ts}   | 19 ++++---------------
 src/components/common.inputs.ts               | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 15 deletions(-)
 rename src/components/{common.styles.ts => common.buttons.ts} (70%)
 create mode 100644 src/components/common.inputs.ts

diff --git a/src/components/common.styles.ts b/src/components/common.buttons.ts
similarity index 70%
rename from src/components/common.styles.ts
rename to src/components/common.buttons.ts
index 9f51b7f..0526928 100644
--- a/src/components/common.styles.ts
+++ b/src/components/common.buttons.ts
@@ -1,5 +1,4 @@
-import { BrandColors, GrayscaleColors } from '@/styles/styled'
-import { styled } from 'styled-components'
+import { BrandColors, GrayscaleColors, styled } from 'styled-components'
 
 type ActionButtonProps = {
   $bgColor:
@@ -16,6 +15,9 @@ const buttonFontColorMap = {
   gc_1: 'font_4',
 } as const
 
+/**
+ *
+ */
 export const ActionButton = styled.button<ActionButtonProps>`
   width: 100%;
   padding: 1rem;
@@ -31,16 +33,3 @@ export const ActionButton = styled.button<ActionButtonProps>`
         ? theme.typography._15
         : theme.typography._17};
 `
-
-export const Input = styled.input`
-  width: 100%;
-  border: none;
-  font-size: ${({ theme }) => theme.typography._20};
-  text-align: center;
-  /* transition: 0.15s box-shadow; */
-  padding: 17px 32px;
-  border-radius: 12px;
-  &:focus {
-    box-shadow: ${({ theme }) => `inset 0 0 0 1px ${theme.colors.grayscale.font_1}`};
-  }
-`
diff --git a/src/components/common.inputs.ts b/src/components/common.inputs.ts
new file mode 100644
index 0000000..22d4072
--- /dev/null
+++ b/src/components/common.inputs.ts
@@ -0,0 +1,14 @@
+import { styled } from 'styled-components'
+
+export const Input = styled.input`
+  width: 100%;
+  border: none;
+  font-size: ${({ theme }) => theme.typography._20};
+  text-align: center;
+  /* transition: 0.15s box-shadow; */
+  padding: 17px 32px;
+  border-radius: 12px;
+  &:focus {
+    box-shadow: ${({ theme }) => `inset 0 0 0 1px ${theme.colors.grayscale.font_1}`};
+  }
+`

From 22b1e220240e0b8d60522191e6bd0cbe957f505a Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Thu, 21 Nov 2024 00:03:29 +0900
Subject: [PATCH 19/24] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD,=20ActionBu?=
 =?UTF-8?q?tton=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button/ActionButton.ts | 52 +++++++++++++++++++++++++++
 src/components/common.buttons.ts      | 35 ------------------
 2 files changed, 52 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Button/ActionButton.ts
 delete mode 100644 src/components/common.buttons.ts

diff --git a/src/components/Button/ActionButton.ts b/src/components/Button/ActionButton.ts
new file mode 100644
index 0000000..7272161
--- /dev/null
+++ b/src/components/Button/ActionButton.ts
@@ -0,0 +1,52 @@
+import styled, { BrandColors, GrayscaleColors } from 'styled-components'
+
+type BgColorType =
+  | Extract<keyof BrandColors, 'default' | 'lighten_2'>
+  | Extract<keyof GrayscaleColors, 'gc_4' | 'gc_1' | 'font_1'>
+
+type ActionButtonProps = {
+  $bgColor?: BgColorType
+  $type?: 'roundedRect' | 'semiRoundedRect' | 'capsule'
+}
+
+type ActionButtonStyles = {
+  padding: string
+  borderRadius: string
+  fontSize: string
+}
+
+const ACTION_BUTTON_FONT_COLORS: Record<BgColorType, keyof GrayscaleColors> = {
+  default: 'gc_4',
+  lighten_2: 'font_1',
+  font_1: 'gc_4',
+  gc_4: 'font_1',
+  gc_1: 'font_4',
+} as const
+
+const ACTION_BUTTON_STYLES: Record<string, ActionButtonStyles> = {
+  roundedRect: {
+    padding: '15.5px 24px',
+    borderRadius: '12px',
+    fontSize: '_14',
+  },
+  semiRoundedRect: {
+    padding: '16.5px 24px',
+    borderRadius: '20px',
+    fontSize: '_15',
+  },
+  capsule: {
+    padding: '18px 24px',
+    borderRadius: '100px',
+    fontSize: '_17',
+  },
+}
+
+export const ActionButton = styled.button<ActionButtonProps>`
+  width: 100%;
+  background-color: ${({ theme, $bgColor = 'default' }) =>
+    theme.colors.grayscale[$bgColor] || theme.colors.brand[$bgColor]};
+  color: ${({ theme, $bgColor = 'default' }) => theme.colors.grayscale[ACTION_BUTTON_FONT_COLORS[$bgColor]]};
+  padding: ${({ $type = 'capsule' }) => ACTION_BUTTON_STYLES[$type]?.padding};
+  border-radius: ${({ $type = 'capsule' }) => ACTION_BUTTON_STYLES[$type]?.borderRadius};
+  font-size: ${({ theme, $type = 'capsule' }) => theme.typography[ACTION_BUTTON_STYLES[$type]?.fontSize]};
+`
diff --git a/src/components/common.buttons.ts b/src/components/common.buttons.ts
deleted file mode 100644
index 0526928..0000000
--- a/src/components/common.buttons.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { BrandColors, GrayscaleColors, styled } from 'styled-components'
-
-type ActionButtonProps = {
-  $bgColor:
-    | Extract<keyof BrandColors, 'default' | 'lighten_2'>
-    | Extract<keyof GrayscaleColors, 'gc_4' | 'gc_1' | 'font_1'>
-  $type: 'roundedRect' | 'semiRoundedRect' | 'capsule'
-}
-
-const buttonFontColorMap = {
-  default: 'gc_4',
-  lighten_2: 'font_1',
-  font_1: 'gc_4',
-  gc_4: 'font_1',
-  gc_1: 'font_4',
-} as const
-
-/**
- *
- */
-export const ActionButton = styled.button<ActionButtonProps>`
-  width: 100%;
-  padding: 1rem;
-  background-color: ${({ theme, $bgColor: bgColor }) =>
-    theme.colors.grayscale[bgColor as keyof GrayscaleColors] || theme.colors.brand[bgColor as keyof BrandColors]};
-  color: ${({ $bgColor: bgColor, theme }) => theme.colors.grayscale[buttonFontColorMap[bgColor]]};
-  border-radius: ${({ $type: type }) =>
-    type === 'roundedRect' ? '12px' : type === 'semiRoundedRect' ? '20px' : '100px'};
-  font-size: ${({ $type: type, theme }) =>
-    type === 'roundedRect'
-      ? theme.typography._14
-      : type === 'semiRoundedRect'
-        ? theme.typography._15
-        : theme.typography._17};
-`

From 477f5c375a2a4149fdb4bacb9edff26686c91b65 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Thu, 21 Nov 2024 00:09:15 +0900
Subject: [PATCH 20/24] =?UTF-8?q?=F0=9F=9A=9ARename:=20=ED=8F=B4=EB=8D=94?=
 =?UTF-8?q?=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/{common.inputs.ts => Input/Input.ts} | 0
 src/components/{ => Input}/TwoLineInput/index.tsx   | 0
 src/components/{ => Input}/TwoLineInput/styles.ts   | 0
 src/components/{common.typos.ts => Typo/Typo.ts}    | 5 ++---
 4 files changed, 2 insertions(+), 3 deletions(-)
 rename src/components/{common.inputs.ts => Input/Input.ts} (100%)
 rename src/components/{ => Input}/TwoLineInput/index.tsx (100%)
 rename src/components/{ => Input}/TwoLineInput/styles.ts (100%)
 rename src/components/{common.typos.ts => Typo/Typo.ts} (84%)

diff --git a/src/components/common.inputs.ts b/src/components/Input/Input.ts
similarity index 100%
rename from src/components/common.inputs.ts
rename to src/components/Input/Input.ts
diff --git a/src/components/TwoLineInput/index.tsx b/src/components/Input/TwoLineInput/index.tsx
similarity index 100%
rename from src/components/TwoLineInput/index.tsx
rename to src/components/Input/TwoLineInput/index.tsx
diff --git a/src/components/TwoLineInput/styles.ts b/src/components/Input/TwoLineInput/styles.ts
similarity index 100%
rename from src/components/TwoLineInput/styles.ts
rename to src/components/Input/TwoLineInput/styles.ts
diff --git a/src/components/common.typos.ts b/src/components/Typo/Typo.ts
similarity index 84%
rename from src/components/common.typos.ts
rename to src/components/Typo/Typo.ts
index 22eece2..62d7b50 100644
--- a/src/components/common.typos.ts
+++ b/src/components/Typo/Typo.ts
@@ -1,8 +1,7 @@
-import { styled } from 'styled-components'
-import { DefaultTheme } from 'styled-components/dist/types'
+import { GrayscaleColors, styled } from 'styled-components'
 
 type TypoProps = {
-  color?: keyof DefaultTheme['colors']['grayscale']
+  color?: keyof GrayscaleColors
   weight?: 300 | 400 | 700 | 800
 }
 

From 57c189bbaab627e920f6da73e503d2bb07a86846 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Thu, 21 Nov 2024 00:12:25 +0900
Subject: [PATCH 21/24] =?UTF-8?q?=E2=9C=A8Feat:=20FontWeight=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Typo/Typo.ts | 4 ++--
 src/styles/styled.d.ts      | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Typo/Typo.ts b/src/components/Typo/Typo.ts
index 62d7b50..3346479 100644
--- a/src/components/Typo/Typo.ts
+++ b/src/components/Typo/Typo.ts
@@ -1,8 +1,8 @@
-import { GrayscaleColors, styled } from 'styled-components'
+import { FontWeight, GrayscaleColors, styled } from 'styled-components'
 
 type TypoProps = {
   color?: keyof GrayscaleColors
-  weight?: 300 | 400 | 700 | 800
+  weight?: FontWeight
 }
 
 const Typo = styled.p<TypoProps>`
diff --git a/src/styles/styled.d.ts b/src/styles/styled.d.ts
index 84b43cc..373e294 100644
--- a/src/styles/styled.d.ts
+++ b/src/styles/styled.d.ts
@@ -39,4 +39,6 @@ declare module 'styled-components' {
     _13: string
     _11: string
   }
+
+  export type FontWeight = '300' | '400' | '700' | '800'
 }

From 6d766887c99c7dc09f01662d79614d6dbf6891f2 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Thu, 21 Nov 2024 00:37:05 +0900
Subject: [PATCH 22/24] =?UTF-8?q?=E2=9C=A8Feat:=20ToggleBox=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToggleBox/index.tsx | 25 ++++++++++++++++++-------
 src/components/ToggleBox/styles.ts | 14 ++++++++++++--
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/ToggleBox/index.tsx b/src/components/ToggleBox/index.tsx
index 5267811..c0d2bc6 100644
--- a/src/components/ToggleBox/index.tsx
+++ b/src/components/ToggleBox/index.tsx
@@ -1,20 +1,31 @@
 import Toggle from '@components/Toggle'
+import { Typo14, Typo15, Typo17 } from '@components/Typo/Typo'
+import { SETTINGS_INFO } from '@constants/settingsInfo'
 import { SettingsStoreKey } from '@stores/settingsStore'
 import * as S from './styles'
-import { SETTINGS_INFO } from '@constants/settingsInfo'
-import { Typo15, Typo17 } from '@/styles/common.typos'
 
 type ToggleBoxProps = {
+  type: 'sm' | 'md' | 'lg'
   setting: SettingsStoreKey
 }
 
-//todo 부가설명란
-export default function ToggleBox({ setting }: ToggleBoxProps) {
+const Typo = {
+  sm: Typo14,
+  md: Typo15,
+  lg: Typo17,
+}
+
+/**
+ *주의! 단독으로 사용할 경우, Wrapper로 감싸주셔야 border radius가 적용됩니다.
+ */
+export default function ToggleBox({ setting, type }: ToggleBoxProps) {
+  const SelectedTypo = Typo[type]
+
   return (
-    <S.ToggleBox>
+    <S.ToggleBox $type={type}>
       <S.MainArea>
-        <Typo17 weight={700}>{SETTINGS_INFO[setting].title}</Typo17>
-        {SETTINGS_INFO[setting].desc ? <Typo15>{SETTINGS_INFO[setting].desc}</Typo15> : null}
+        <SelectedTypo weight='700'>{SETTINGS_INFO[setting].title}</SelectedTypo>
+        {SETTINGS_INFO[setting].desc && <Typo15>{SETTINGS_INFO[setting].desc}</Typo15>}
       </S.MainArea>
       <Toggle id={setting} setting={setting} />
     </S.ToggleBox>
diff --git a/src/components/ToggleBox/styles.ts b/src/components/ToggleBox/styles.ts
index a0d9a17..6e4fa5d 100644
--- a/src/components/ToggleBox/styles.ts
+++ b/src/components/ToggleBox/styles.ts
@@ -1,11 +1,21 @@
 import { styled } from 'styled-components'
 
-export const ToggleBox = styled.div`
+type ToggleBoxProps = {
+  $type: 'sm' | 'md' | 'lg'
+}
+
+const TOGGLE_BOX_PADDING = {
+  sm: '15.5px 16px 15.5px 20px',
+  md: '16.5px 16px 16.5px 20px',
+  lg: '18px 16px 18px 20px',
+}
+export const ToggleBox = styled.div<ToggleBoxProps>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 18px 16px 18px 20px;
+  padding: ${({ $type }) => TOGGLE_BOX_PADDING[$type]};
   background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
+
   &:first-of-type {
     border-top-left-radius: 16px;
     border-top-right-radius: 16px;

From c80804b3c5e7f2bdcdd4fa01f40264bb3ec95643 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Thu, 21 Nov 2024 00:41:41 +0900
Subject: [PATCH 23/24] =?UTF-8?q?=F0=9F=9A=9ARename:=20Typo.ts,=20Input.ts?=
 =?UTF-8?q?=20->=20index.ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/{Input.ts => index.ts} | 0
 src/components/ToggleBox/index.tsx          | 2 +-
 src/components/Typo/{Typo.ts => index.ts}   | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/Input/{Input.ts => index.ts} (100%)
 rename src/components/Typo/{Typo.ts => index.ts} (100%)

diff --git a/src/components/Input/Input.ts b/src/components/Input/index.ts
similarity index 100%
rename from src/components/Input/Input.ts
rename to src/components/Input/index.ts
diff --git a/src/components/ToggleBox/index.tsx b/src/components/ToggleBox/index.tsx
index c0d2bc6..6bda161 100644
--- a/src/components/ToggleBox/index.tsx
+++ b/src/components/ToggleBox/index.tsx
@@ -1,5 +1,5 @@
 import Toggle from '@components/Toggle'
-import { Typo14, Typo15, Typo17 } from '@components/Typo/Typo'
+import { Typo14, Typo15, Typo17 } from '@components/Typo'
 import { SETTINGS_INFO } from '@constants/settingsInfo'
 import { SettingsStoreKey } from '@stores/settingsStore'
 import * as S from './styles'
diff --git a/src/components/Typo/Typo.ts b/src/components/Typo/index.ts
similarity index 100%
rename from src/components/Typo/Typo.ts
rename to src/components/Typo/index.ts

From a3b75928f5a799a6d38275fb59c16989a7b30834 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Thu, 21 Nov 2024 00:43:30 +0900
Subject: [PATCH 24/24] =?UTF-8?q?=F0=9F=90=9BFix:=20ToggleArea=20type=20?=
 =?UTF-8?q?=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToggleArea/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ToggleArea/index.tsx b/src/components/ToggleArea/index.tsx
index 2233168..ad6e303 100644
--- a/src/components/ToggleArea/index.tsx
+++ b/src/components/ToggleArea/index.tsx
@@ -4,10 +4,10 @@ import * as S from './styles'
 export default function ToggleArea() {
   return (
     <S.ToggleArea>
-      <ToggleBox setting={'friendRequests'} />
-      <ToggleBox setting={'familyWalkNotifications'} />
-      <ToggleBox setting={'myWalkNotifications'} />
-      <ToggleBox setting={'messages'} />
+      <ToggleBox setting={'friendRequests'} type='lg' />
+      <ToggleBox setting={'familyWalkNotifications'} type='lg' />
+      <ToggleBox setting={'myWalkNotifications'} type='lg' />
+      <ToggleBox setting={'messages'} type='lg' />
     </S.ToggleArea>
   )
 }