From e8dea10a1102f78d74daa443884fcec1f844f4f8 Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 02:28:52 +0900
Subject: [PATCH 01/13] =?UTF-8?q?fix:=20InputRadio=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Register/common/InputRadio/index.tsx        | 17 +++++------------
 src/types/register.ts                           |  4 ----
 2 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/src/components/Register/common/InputRadio/index.tsx b/src/components/Register/common/InputRadio/index.tsx
index 23efa2f4..cea41e15 100644
--- a/src/components/Register/common/InputRadio/index.tsx
+++ b/src/components/Register/common/InputRadio/index.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import theme from '@styles/theme';
-import { InputRadioProps, InputRadioStyleProps } from '@/types/register';
+import { InputRadioProps } from '@/types/register';
 import selected from '@assets/icons/ic-register-selected.svg';
 import unselected from '@assets/icons/ic-register-unselected.svg';
 
@@ -28,14 +28,13 @@ const InputRadio = ({
         name={name}
         value={value}
         defaultChecked={isChecked}
-        $src={selected}
         onChange={handleButtonChange}
       />
       <Label htmlFor={id}>
         <ContentWrapper>
           <SelectIcon
-            className="icon"
-            $src={unselected}
+            src={isChecked ? selected : unselected}
+            alt="라디오버튼 아이콘"
           />
           {text}
         </ContentWrapper>
@@ -49,17 +48,13 @@ const InputRadio = ({
 
 export default InputRadio;
 
-const Radio = styled.input<InputRadioStyleProps>`
+const Radio = styled.input`
   display: none;
 
   &:checked + label {
     color: ${theme.colors.hover};
   }
 
-  &:checked + label .icon {
-    background: url(${props => props.$src});
-  }
-
   &:checked ~ .children {
     display: block;
   }
@@ -79,13 +74,11 @@ const ContentWrapper = styled.div`
   align-items: center;
 `;
 
-const SelectIcon = styled.div<InputRadioStyleProps>`
+const SelectIcon = styled.img`
   width: 24px;
   height: 24px;
 
   margin-right: 5px;
-
-  background: url(${props => props.$src});
 `;
 
 const ChildrenWrapper = styled.div`
diff --git a/src/types/register.ts b/src/types/register.ts
index 2ef028a8..bcfd7339 100644
--- a/src/types/register.ts
+++ b/src/types/register.ts
@@ -75,10 +75,6 @@ export type InputRadioProps = {
   onButtonChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export type InputRadioStyleProps = {
-  $src: string;
-};
-
 // InputWrapper
 export type InputWrapperProps = {
   state?: string;

From 2a9d242b1e747013b5cd9078c160c3f16f943c60 Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 03:23:55 +0900
Subject: [PATCH 02/13] =?UTF-8?q?design:=20=EB=93=B1=EB=A1=9D=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=A7=88=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Register/Preview/index.tsx     |  6 ++-
 src/components/Register/StepTitle/index.tsx   |  9 ++++
 .../Register/StepperController/index.tsx      | 10 ++++
 src/pages/Register/index.tsx                  | 50 +++++++++++++++----
 4 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/src/components/Register/Preview/index.tsx b/src/components/Register/Preview/index.tsx
index c90fd0d5..5360ceb6 100644
--- a/src/components/Register/Preview/index.tsx
+++ b/src/components/Register/Preview/index.tsx
@@ -79,6 +79,10 @@ const PreviewContainer = styled.div`
   border-radius: 20px;
 
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const Header = styled.div`
@@ -133,7 +137,7 @@ const Coupon = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  
+
   box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
 
   overflow: hidden;
diff --git a/src/components/Register/StepTitle/index.tsx b/src/components/Register/StepTitle/index.tsx
index c79ff4c3..a3fa463f 100644
--- a/src/components/Register/StepTitle/index.tsx
+++ b/src/components/Register/StepTitle/index.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import { StepTitleProps } from '@/types/register';
 
 const StepTitle = ({ steps, currentStep }: StepTitleProps) => {
@@ -27,6 +28,14 @@ const StepTitleContainer = styled.div`
   font-weight: 600;
   line-height: 31px;
   letter-spacing: -0.78px;
+
+  ${theme.response.tablet} {
+    font-size: 3vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 16px;
+  }
 `;
 
 const StepTitleWrapper = styled.div`
diff --git a/src/components/Register/StepperController/index.tsx b/src/components/Register/StepperController/index.tsx
index 7bbd359a..3f89d7a5 100644
--- a/src/components/Register/StepperController/index.tsx
+++ b/src/components/Register/StepperController/index.tsx
@@ -113,6 +113,11 @@ const PreviousButton = styled.button<PreviousButtonStyleProps>`
   background: #fff;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 123px;
+    height: 39px;
+  }
 `;
 
 const NextButton = styled.button<NextButtonStyleProps>`
@@ -135,4 +140,9 @@ const NextButton = styled.button<NextButtonStyleProps>`
     props.$isFilled ? `${theme.colors.hover}` : '#cdcfd0'};
 
   cursor: ${props => (props.$isFilled ? 'pointer' : 'default')};
+
+  ${theme.response.tablet} {
+    width: 225px;
+    height: 39px;
+  }
 `;
diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx
index 3482b574..70c3efd3 100644
--- a/src/pages/Register/index.tsx
+++ b/src/pages/Register/index.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import {
   Stepper,
   StepperController,
@@ -74,7 +75,7 @@ const Register = () => {
 export default Register;
 
 const Background = styled.div`
-  width: 100%;
+  min-width: 1225px;
   height: 100%;
 
   padding: 2.5%;
@@ -86,6 +87,11 @@ const Background = styled.div`
     rgba(163, 191, 255, 0.1) 49.57%,
     #fff 100%
   );
+
+  ${theme.response.tablet} {
+    max-width: 890px;
+    min-width: 375px;
+  }
 `;
 
 const RegisterContainer = styled.div`
@@ -101,6 +107,12 @@ const RegisterContainer = styled.div`
     0px 17.525px 21.907px 0px rgba(0, 0, 0, 0.05),
     -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset;
   backdrop-filter: blur(71px);
+
+  ${theme.response.tablet} {
+    height: 100%;
+
+    border-radius: 0px;
+  }
 `;
 
 const TitleContainer = styled.div`
@@ -120,6 +132,10 @@ const TitleContainer = styled.div`
     0px 17.525px 21.907px 0px rgba(0, 0, 0, 0.05),
     -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset;
   backdrop-filter: blur(71px);
+
+  ${theme.response.tablet} {
+    border-radius: 0px 0px 0px 60px;
+  }
 `;
 
 const Title = styled.span`
@@ -127,6 +143,14 @@ const Title = styled.span`
   font-weight: 600;
   line-height: 31px;
   letter-spacing: -0.78px;
+
+  ${theme.response.tablet} {
+    font-size: 3vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 16px;
+  }
 `;
 
 const ContentContainer = styled.div`
@@ -149,28 +173,36 @@ const InnerContentContainer = styled.div`
 `;
 
 const SectionContainer = styled.div`
-  position: relative;
-
   width: 100%;
 
-  display: inline-block;
+  display: flex;
+  justify-content: space-between;
+
+  ${theme.response.tablet} {
+    flex-direction: column;
+  }
 `;
 
 const LeftSection = styled.div`
   width: 47%;
 
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
+
+  ${theme.response.tablet} {
+    width: 100%;
+  }
 `;
 
 const RightSection = styled.div`
-  position: absolute;
-  top: 0px;
-  right: 0px;
-
   width: 47%;
   height: 100%;
 
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+
+  ${theme.response.tablet} {
+    width: 100%;
+  }
 `;

From af7710e72c4d78f45ff81b226dce6c50442067c7 Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 03:24:20 +0900
Subject: [PATCH 03/13] =?UTF-8?q?design:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EB=A7=88=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Register/common/InputAccordion/index.tsx  | 13 ++++++
 .../Register/common/InputButton/index.tsx     | 21 ++++++---
 .../Register/common/InputCheckBox/index.tsx   | 18 ++++++++
 .../Register/common/InputContainer/index.tsx  | 12 +++++
 .../Register/common/InputField/index.tsx      | 44 ++++++++++++++++++-
 .../Register/common/InputRadio/index.tsx      | 26 +++++++++++
 6 files changed, 126 insertions(+), 8 deletions(-)

diff --git a/src/components/Register/common/InputAccordion/index.tsx b/src/components/Register/common/InputAccordion/index.tsx
index 523b8276..8319a5e0 100644
--- a/src/components/Register/common/InputAccordion/index.tsx
+++ b/src/components/Register/common/InputAccordion/index.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import { InputAccordionProps, ButtonStyleProps } from '@/types/register';
 import toggle from '@assets/icons/ic-register-toggle.svg';
 
@@ -72,6 +73,14 @@ const Header = styled.div`
 const Description = styled.div`
   color: #979c9e;
   font-size: 15px;
+
+  ${theme.response.tablet} {
+    font-size: 2vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 11px;
+  }
 `;
 
 const Button = styled.button<ButtonStyleProps>`
@@ -103,4 +112,8 @@ const ContentWrapper = styled.div`
 
 const Content = styled.div`
   padding-top: 20px;
+
+  ${theme.response.tablet} {
+    padding-top: 2vw;
+  }
 `;
diff --git a/src/components/Register/common/InputButton/index.tsx b/src/components/Register/common/InputButton/index.tsx
index e1b5d810..8c749232 100644
--- a/src/components/Register/common/InputButton/index.tsx
+++ b/src/components/Register/common/InputButton/index.tsx
@@ -28,12 +28,7 @@ const InputButton = ({
         defaultChecked={isChecked}
         onChange={handleButtonChange}
       />
-      <Button
-        htmlFor={id}
-        // onClick={handleToggle}
-      >
-        {buttonName}
-      </Button>
+      <Button htmlFor={id}>{buttonName}</Button>
     </>
   );
 };
@@ -67,4 +62,18 @@ const Button = styled.label`
   font-size: 15px;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 13vw;
+    height: 5vw;
+
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 70px;
+    height: 26px;
+
+    font-size: 9px;
+  }
 `;
diff --git a/src/components/Register/common/InputCheckBox/index.tsx b/src/components/Register/common/InputCheckBox/index.tsx
index 0f7f0107..f247917d 100644
--- a/src/components/Register/common/InputCheckBox/index.tsx
+++ b/src/components/Register/common/InputCheckBox/index.tsx
@@ -56,6 +56,14 @@ const Label = styled.label<LabelStyleProps>`
 
   color: ${props => (props.$isChecked ? theme.colors.hover : '#757676')};
   font-size: 15px;
+
+  ${theme.response.tablet} {
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 9px;
+  }
 `;
 
 const CheckIcon = styled.img`
@@ -63,4 +71,14 @@ const CheckIcon = styled.img`
   height: 20px;
 
   margin-right: 5px;
+
+  ${theme.response.tablet} {
+    width: 2vw;
+    height: 2vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 11px;
+    height: 11px;
+  }
 `;
diff --git a/src/components/Register/common/InputContainer/index.tsx b/src/components/Register/common/InputContainer/index.tsx
index f1aa71f5..4727fec5 100644
--- a/src/components/Register/common/InputContainer/index.tsx
+++ b/src/components/Register/common/InputContainer/index.tsx
@@ -23,10 +23,22 @@ const Container = styled.div`
   border-radius: 16px;
 
   display: inline-block;
+
+  ${theme.response.tablet} {
+    width: 100%;
+  }
 `;
 
 const Description = styled.div`
   color: ${theme.colors.hover};
   font-size: 17px;
   font-weight: 600;
+
+  ${theme.response.tablet} {
+    font-size: 2vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 11px;
+  }
 `;
diff --git a/src/components/Register/common/InputField/index.tsx b/src/components/Register/common/InputField/index.tsx
index 54ca3d61..7d4ea0f1 100644
--- a/src/components/Register/common/InputField/index.tsx
+++ b/src/components/Register/common/InputField/index.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import theme from '@styles/theme';
 
+import theme from '@styles/theme';
 import { InputFieldProps, InputFieldStyleProps } from '@/types/register';
 import { inputFilter } from '@utils/index';
 
@@ -40,11 +40,21 @@ export default InputField;
 const Container = styled.div`
   position: relative;
 
+  width: 245px;
+
   margin-right: 10px;
+
+  ${theme.response.tablet} {
+    width: 29vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 156px;
+  }
 `;
 
 const Input = styled.input<InputFieldStyleProps>`
-  width: 245px;
+  width: 100%;
   height: 39px;
 
   padding: 0 ${props => (props.$text === '원' ? '28px' : '61px')};
@@ -54,10 +64,40 @@ const Input = styled.input<InputFieldStyleProps>`
 
   font-size: 15px;
   text-align: right;
+
+  ${theme.response.tablet} {
+    height: 5vw;
+
+    padding: 0 ${props => (props.$text === '원' ? '4.2vw' : '7.7vw')};
+
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    height: 26px;
+
+    padding: 0 ${props => (props.$text === '원' ? '23px' : '42px')};
+
+    font-size: 9px;
+  }
 `;
 
 const Text = styled.span<InputFieldStyleProps>`
   position: absolute;
   top: 10px;
   left: ${props => (props.$text === '원' ? '219px' : '186px')};
+
+  ${theme.response.tablet} {
+    top: 1.45vw;
+    left: ${props => (props.$text === '원' ? '25vw' : '21.5vw')};
+
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    top: 8px;
+    left: ${props => (props.$text === '원' ? '134px' : '115px')};
+
+    font-size: 9px;
+  }
 `;
diff --git a/src/components/Register/common/InputRadio/index.tsx b/src/components/Register/common/InputRadio/index.tsx
index cea41e15..5989885c 100644
--- a/src/components/Register/common/InputRadio/index.tsx
+++ b/src/components/Register/common/InputRadio/index.tsx
@@ -72,6 +72,14 @@ const Label = styled.label`
 const ContentWrapper = styled.div`
   display: flex;
   align-items: center;
+
+  ${theme.response.tablet} {
+    font-size: 1.9vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 11px;
+  }
 `;
 
 const SelectIcon = styled.img`
@@ -79,6 +87,16 @@ const SelectIcon = styled.img`
   height: 24px;
 
   margin-right: 5px;
+
+  ${theme.response.tablet} {
+    width: 2vw;
+    height: 2vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 11px;
+    height: 11px;
+  }
 `;
 
 const ChildrenWrapper = styled.div`
@@ -86,4 +104,12 @@ const ChildrenWrapper = styled.div`
   padding-left: 29px;
 
   display: none;
+
+  ${theme.response.tablet} {
+    padding-left: 3vw;
+  }
+
+  @media (max-width: 550px) {
+    padding-left: 17px;
+  }
 `;

From a222ad952655403c5faa8ac9ca4ba1db70331ad6 Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 03:24:49 +0900
Subject: [PATCH 04/13] =?UTF-8?q?design:=20=EC=A0=95=EB=B3=B4=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EB=8B=A8=EA=B3=84=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EB=A7=88=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Register/Steps/FirstStep/index.tsx        | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx
index ea12cf6e..140768e8 100644
--- a/src/components/Register/Steps/FirstStep/index.tsx
+++ b/src/components/Register/Steps/FirstStep/index.tsx
@@ -1,7 +1,7 @@
 import { useRecoilState } from 'recoil';
-
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import {
   InputContainer,
   InputButton,
@@ -225,10 +225,30 @@ const Input = styled.input`
   outline: none;
 
   &::placeholder {
-    color: #979C9e;
+    color: #979c9e;
     font-weight: 500;
   }
-}
+
+  ${theme.response.tablet} {
+    width: 44vw;
+    height: 4.5vw;
+    min-width: 220px;
+    min-height: 24px;
+
+    font-size: 1.7vw;
+
+    &::placeholder {
+      font-size: 1.7vw;
+    }
+  }
+
+  @media (max-width: 550px) {
+    font-size: 9px;
+
+    &::placeholder {
+      font-size: 9px;
+    }
+  }
 `;
 
 const ButtonWrapper = styled.div`
@@ -236,6 +256,14 @@ const ButtonWrapper = styled.div`
 
   display: flex;
   gap: 23px;
+
+  ${theme.response.tablet} {
+    gap: 3vw;
+  }
+
+  @media (max-width: 550px) {
+    gap: 16px;
+  }
 `;
 
 const ContentWrapper = styled.div`

From 9051e69c89b55a39cc00eaefc04cadb6adb5d101 Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 03:25:20 +0900
Subject: [PATCH 05/13] =?UTF-8?q?design:=20=EC=9C=A0=ED=98=95=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EB=8B=A8=EA=B3=84=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EB=A7=88=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Steps/SecondStep/RoomList/index.tsx       | 26 ++++++++++++---
 .../SecondStep/RoomSelectButton/index.tsx     | 14 ++++++++
 .../Register/Steps/SecondStep/index.tsx       | 33 +++++++++++++++++++
 3 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/src/components/Register/Steps/SecondStep/RoomList/index.tsx b/src/components/Register/Steps/SecondStep/RoomList/index.tsx
index 865edea6..21b530de 100644
--- a/src/components/Register/Steps/SecondStep/RoomList/index.tsx
+++ b/src/components/Register/Steps/SecondStep/RoomList/index.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import { RoomListProps } from '@/types/register';
 import { sliceName } from '@utils/index';
 
@@ -32,10 +33,27 @@ const Container = styled.div`
   flex-direction: column;
   gap: 10px;
 
-  overflow: auto;
-`;
-
-const Room = styled.div`
   font-size: 10px;
   font-weight: 400;
+
+  overflow: auto;
+
+  ${theme.response.tablet} {
+    width: 13vw;
+    max-height: 80px;
+
+    padding: 1.2vw;
+
+    font-size: 1.4vw;
+
+    overflow-y: hidden;
+  }
+
+  @media (max-width: 550px) {
+    width: 70px;
+
+    font-size: 8px;
+  }
 `;
+
+const Room = styled.div``;
diff --git a/src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx b/src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx
index d1d244fa..55510793 100644
--- a/src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx
+++ b/src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx
@@ -70,4 +70,18 @@ const Button = styled.label`
   font-size: 15px;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 13vw;
+    height: 5vw;
+
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 70px;
+    height: 26px;
+
+    font-size: 9px;
+  }
 `;
diff --git a/src/components/Register/Steps/SecondStep/index.tsx b/src/components/Register/Steps/SecondStep/index.tsx
index 2c65abe4..35599fc1 100644
--- a/src/components/Register/Steps/SecondStep/index.tsx
+++ b/src/components/Register/Steps/SecondStep/index.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { useRecoilState } from 'recoil';
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import {
   InputContainer,
   InputButton,
@@ -198,4 +199,36 @@ const ButtonWrapper = styled.div`
 
 const ContentWrapper = styled.div`
   padding-left: 134px;
+
+  ${theme.response.tablet} {
+    padding-left: 15.7vw;
+  }
+
+  @media (max-width: 850px) {
+    padding-left: 15.8vw;
+  }
+
+  @media (max-width: 800px) {
+    padding-left: 16vw;
+  }
+
+  @media (max-width: 750px) {
+    padding-left: 16.2vw;
+  }
+
+  @media (max-width: 700px) {
+    padding-left: 16.5vw;
+  }
+
+  @media (max-width: 650px) {
+    padding-left: 16.7vw;
+  }
+
+  @media (max-width: 600px) {
+    padding-left: 17vw;
+  }
+
+  @media (max-width: 550px) {
+    padding-left: 93px;
+  }
 `;

From f1f0bdf2a289daddbe649ff0134ddf16363eacea Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 03:25:43 +0900
Subject: [PATCH 06/13] =?UTF-8?q?design:=20=EC=A1=B0=EA=B1=B4=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EB=8B=A8=EA=B3=84=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EB=A7=88=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Steps/ThirdStep/RadioGroup/Radio/index.tsx   | 14 ++++++++++++++
 .../Register/Steps/ThirdStep/index.tsx           | 16 ++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx b/src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx
index b5bea1ec..3428c9ef 100644
--- a/src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx
+++ b/src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx
@@ -62,4 +62,18 @@ const Label = styled.label`
   font-weight: 400;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 4vw;
+    height: 4vw;
+
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 22px;
+    height: 22px;
+
+    font-size: 9px;
+  }
 `;
diff --git a/src/components/Register/Steps/ThirdStep/index.tsx b/src/components/Register/Steps/ThirdStep/index.tsx
index e187d515..d698f92b 100644
--- a/src/components/Register/Steps/ThirdStep/index.tsx
+++ b/src/components/Register/Steps/ThirdStep/index.tsx
@@ -96,6 +96,14 @@ const ContentWrapper = styled.div`
 const Text = styled.span`
   color: ${theme.colors.hover};
   font-size: 15px;
+
+  ${theme.response.tablet} {
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 9px;
+  }
 `;
 
 const RadioWrapper = styled.div`
@@ -104,4 +112,12 @@ const RadioWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 17px;
+
+  ${theme.response.tablet} {
+    height: 20vw;
+  }
+
+  @media (max-width: 550px) {
+    height: 110px;
+  }
 `;

From d72d65af70d28ccb224c3bd6cd87ba8d1aca732e Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 03:26:07 +0900
Subject: [PATCH 07/13] =?UTF-8?q?design:=20=EB=85=B8=EC=B6=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EA=B0=84=20=EC=84=A0=ED=83=9D=20=EB=8B=A8=EA=B3=84=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95=20=EB=A7=88=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Steps/FourthStep/Calendar/index.tsx       | 31 +++++++++++++++++--
 .../Register/Steps/FourthStep/index.tsx       | 13 ++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/Register/Steps/FourthStep/Calendar/index.tsx b/src/components/Register/Steps/FourthStep/Calendar/index.tsx
index bab11f95..29d4ab47 100644
--- a/src/components/Register/Steps/FourthStep/Calendar/index.tsx
+++ b/src/components/Register/Steps/FourthStep/Calendar/index.tsx
@@ -62,7 +62,7 @@ const Calendar = () => {
         ref={ref}
       >
         <SelectedDate>{value}</SelectedDate>
-        <img
+        <CalendarIcon
           src={input.startDate ? selected : notSelected}
           alt="달력 아이콘"
         />
@@ -80,7 +80,7 @@ const Calendar = () => {
         ref={ref}
       >
         <SelectedDate>{value}</SelectedDate>
-        <img
+        <CalendarIcon
           src={input.endDate ? selected : notSelected}
           alt="달력 아이콘"
         />
@@ -198,10 +198,37 @@ const CustomInput = styled.button`
   background: #fff;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 13.5vw;
+    height: 4.5vw;
+    min-width: 77px;
+    min-height: 27px;
+  }
 `;
 
 const SelectedDate = styled.span`
   color: ${theme.colors.hover};
+
+  ${theme.response.tablet} {
+    font-size: 1.7vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 10px;
+  }
+`;
+
+const CalendarIcon = styled.img`
+  ${theme.response.tablet} {
+    width: 3.7vw;
+    height: 3.7vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 20px;
+    height: 20px;
+  }
 `;
 
 const Dash = styled.div`
diff --git a/src/components/Register/Steps/FourthStep/index.tsx b/src/components/Register/Steps/FourthStep/index.tsx
index 48e68f7f..87e00776 100644
--- a/src/components/Register/Steps/FourthStep/index.tsx
+++ b/src/components/Register/Steps/FourthStep/index.tsx
@@ -52,6 +52,10 @@ const ContentContainer = styled.div`
 
 const Description = styled.div`
   font-size: 14px;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const CalendarWrapper = styled.button<CalendarWrapperStyleProps>`
@@ -77,4 +81,13 @@ const CalendarWrapper = styled.button<CalendarWrapperStyleProps>`
   font-size: 15px;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 36vw;
+    height: 5vw;
+    min-width: 220px;
+    min-height: 32px;
+
+    border-radius: 11px;
+  }
 `;

From e86d36552bba415da2412f5cc2c33b2682585fc5 Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 04:05:15 +0900
Subject: [PATCH 08/13] =?UTF-8?q?design:=20=EC=8A=A4=ED=85=9D=ED=8D=BC=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=A7=88=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Register/Stepper/index.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/components/Register/Stepper/index.tsx b/src/components/Register/Stepper/index.tsx
index 373b993e..b7607964 100644
--- a/src/components/Register/Stepper/index.tsx
+++ b/src/components/Register/Stepper/index.tsx
@@ -78,6 +78,20 @@ const Number = styled.div<NumberStyleProps>`
       color: #979c9e;
     }
   }
+
+  ${theme.response.tablet} {
+    width: 4vw;
+    height: 4vw;
+
+    font-size: 2vw;
+  }
+
+  @media (max-width: 550px) {
+    width: 22px;
+    height: 22px;
+
+    font-size: 11px;
+  }
 `;
 
 const Description = styled.div`
@@ -91,10 +105,18 @@ const Description = styled.div`
     color: #979c9e;
     font-weight: 500;
   }
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
 
 const Line = styled.div<LineStyleProps>`
   margin: 0px 40px;
 
   display: ${props => (props.$isLastStep === 3 ? 'none' : 'block')};
+
+  ${theme.response.tablet} {
+    margin: 0px 4vw;
+  }
 `;

From b04f26d16709bf2a9e2af5ec7ced32ebb5e71ab7 Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 04:07:46 +0900
Subject: [PATCH 09/13] =?UTF-8?q?design:=20=EB=93=B1=EB=A1=9D=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=A7=88=ED=81=AC=EC=97=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Register/StepTitle/index.tsx |  8 ++++++++
 src/pages/Register/index.tsx                | 13 +++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/components/Register/StepTitle/index.tsx b/src/components/Register/StepTitle/index.tsx
index a3fa463f..38e93643 100644
--- a/src/components/Register/StepTitle/index.tsx
+++ b/src/components/Register/StepTitle/index.tsx
@@ -30,10 +30,14 @@ const StepTitleContainer = styled.div`
   letter-spacing: -0.78px;
 
   ${theme.response.tablet} {
+    height: 7vw;
+
     font-size: 3vw;
   }
 
   @media (max-width: 550px) {
+    height: 40px;
+
     font-size: 16px;
   }
 `;
@@ -50,4 +54,8 @@ const Description = styled.span`
   font-size: 13px;
   letter-spacing: 0.1px;
   line-height: 150%;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;
diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx
index 70c3efd3..aa1b9bbc 100644
--- a/src/pages/Register/index.tsx
+++ b/src/pages/Register/index.tsx
@@ -134,6 +134,9 @@ const TitleContainer = styled.div`
   backdrop-filter: blur(71px);
 
   ${theme.response.tablet} {
+    height: 18%;
+
+    padding-left: 40px;
     border-radius: 0px 0px 0px 60px;
   }
 `;
@@ -170,6 +173,16 @@ const InnerContentContainer = styled.div`
   height: 84%;
 
   overflow: auto;
+
+  ${theme.response.tablet} {
+    height: 100%;
+
+    margin-top: 5vw;
+  }
+
+  @media (max-width: 550px) {
+    margin-top: 25px;
+  }
 `;
 
 const SectionContainer = styled.div`

From 6f600cc243632b842e5e209ba977a276a1ecc3ca Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 04:52:54 +0900
Subject: [PATCH 10/13] =?UTF-8?q?design:=20RoomSelectModal=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EB=A7=88=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SecondStep/RoomSelectModal/index.tsx      | 75 ++++++++++++++++++-
 1 file changed, 74 insertions(+), 1 deletion(-)

diff --git a/src/components/Register/Steps/SecondStep/RoomSelectModal/index.tsx b/src/components/Register/Steps/SecondStep/RoomSelectModal/index.tsx
index c719fb50..7b2b4422 100644
--- a/src/components/Register/Steps/SecondStep/RoomSelectModal/index.tsx
+++ b/src/components/Register/Steps/SecondStep/RoomSelectModal/index.tsx
@@ -2,6 +2,7 @@ import { useState, useRef } from 'react';
 import { useRecoilState } from 'recoil';
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import { Backdrop } from '@components/common';
 import { RoomType, RoomSelectModalProps } from '@/types/register';
 import close from '@assets/icons/ic-register-close.svg';
@@ -186,6 +187,11 @@ const Container = styled.div`
   box-shadow:
     0px 17px 22px 0px rgba(0, 0, 0, 0.05),
     -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset;
+
+  ${theme.response.tablet} {
+    width: 270px;
+    height: 535px;
+  }
 `;
 
 const Header = styled.div`
@@ -198,6 +204,13 @@ const Header = styled.div`
   align-items: center;
 
   font-size: 18px;
+  font-weight: 600;
+
+  ${theme.response.tablet} {
+    height: 55px;
+
+    font-size: 13px;
+  }
 `;
 
 const CloseButton = styled.button`
@@ -207,6 +220,10 @@ const CloseButton = styled.button`
   padding: 0px;
   border: none;
 
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
   background: #fff;
 
   cursor: pointer;
@@ -215,6 +232,11 @@ const CloseButton = styled.button`
 const CloseIcon = styled.img`
   width: 35px;
   height: 35px;
+
+  ${theme.response.tablet} {
+    width: 26px;
+    height: 26px;
+  }
 `;
 
 const Filter = styled.div`
@@ -228,6 +250,10 @@ const Filter = styled.div`
 
   display: grid;
   grid-template-columns: 1fr 2fr 2fr;
+
+  ${theme.response.tablet} {
+    height: 50px;
+  }
 `;
 
 const FilterCell = styled.div`
@@ -246,6 +272,11 @@ const SelectAll = styled.input`
 const FilterCheckIcon = styled.img`
   width: 21px;
   height: 21px;
+
+  ${theme.response.tablet} {
+    width: 17px;
+    height: 17px;
+  }
 `;
 
 const SortButton = styled.button`
@@ -259,6 +290,10 @@ const SortButton = styled.button`
   font-size: 15px;
 
   background: transparent;
+
+  ${theme.response.tablet} {
+    font-size: 12px;
+  }
 `;
 
 const SortIcon = styled.img`
@@ -266,6 +301,11 @@ const SortIcon = styled.img`
   height: 20px;
 
   margin-left: 10px;
+
+  ${theme.response.tablet} {
+    width: 15px;
+    height: 15px;
+  }
 `;
 
 const ContentWrapper = styled.div`
@@ -281,12 +321,22 @@ const ContentWrapper = styled.div`
     -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset;
 
   overflow: auto;
+
+  ${theme.response.tablet} {
+    height: 355px;
+
+    padding: 5px 0px;
+  }
 `;
 
 const List = styled.div`
   display: grid;
   grid-template-columns: 1fr 2fr 2fr;
   grid-template-rows: 46px;
+
+  ${theme.response.tablet} {
+    grid-template-rows: 38px;
+  }
 `;
 
 const ListCell = styled.div`
@@ -296,6 +346,10 @@ const ListCell = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+
+  ${theme.response.tablet} {
+    font-size: 12px;
+  }
 `;
 
 const SelectOne = styled.input`
@@ -305,6 +359,11 @@ const SelectOne = styled.input`
 const ListCheckIcon = styled.img`
   width: 21px;
   height: 21px;
+
+  ${theme.response.tablet} {
+    width: 17px;
+    height: 17px;
+  }
 `;
 
 const Footer = styled.div`
@@ -313,16 +372,23 @@ const Footer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+
+  ${theme.response.tablet} {
+    height: 75px;
+  }
 `;
 
 const Button = styled.button`
   width: 170px;
   height: 44px;
 
-  padding: 13px 16px;
   border: none;
   border-radius: 8px;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   color: #fff;
   font-size: 18px;
   font-weight: 700;
@@ -334,4 +400,11 @@ const Button = styled.button`
   &:disabled {
     background: #cdcfd0;
   }
+
+  ${theme.response.tablet} {
+    width: 135px;
+    height: 34px;
+
+    font-size: 13px;
+  }
 `;

From 33561a9b316b9c33468d9f34763147e0a1f5d74a Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 05:14:47 +0900
Subject: [PATCH 11/13] =?UTF-8?q?design:=20=EB=93=B1=EB=A1=9D=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=A7=88=ED=81=AC=EC=97=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Register/StepperController/index.tsx     | 4 ++++
 src/components/Register/common/ErrorMessage/index.tsx   | 9 +++++++++
 src/components/Register/common/InputAccordion/index.tsx | 5 +++++
 src/components/Register/common/InputContainer/index.tsx | 3 +++
 src/components/Register/common/InputWrapper/index.tsx   | 2 --
 src/pages/Register/index.tsx                            | 6 ++++++
 6 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/Register/StepperController/index.tsx b/src/components/Register/StepperController/index.tsx
index 3f89d7a5..f198de97 100644
--- a/src/components/Register/StepperController/index.tsx
+++ b/src/components/Register/StepperController/index.tsx
@@ -117,6 +117,8 @@ const PreviousButton = styled.button<PreviousButtonStyleProps>`
   ${theme.response.tablet} {
     width: 123px;
     height: 39px;
+
+    font-size: 12px;
   }
 `;
 
@@ -144,5 +146,7 @@ const NextButton = styled.button<NextButtonStyleProps>`
   ${theme.response.tablet} {
     width: 225px;
     height: 39px;
+
+    font-size: 12px;
   }
 `;
diff --git a/src/components/Register/common/ErrorMessage/index.tsx b/src/components/Register/common/ErrorMessage/index.tsx
index efd9c76a..82841087 100644
--- a/src/components/Register/common/ErrorMessage/index.tsx
+++ b/src/components/Register/common/ErrorMessage/index.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import theme from '@styles/theme';
 import { ErrorMessageProps } from '@/types/register';
 
 const ErrorMessage = ({ children }: ErrorMessageProps) => {
@@ -14,4 +15,12 @@ const MessageWrapper = styled.div`
   color: #da1e28;
   font-size: 12px;
   font-weight: 400;
+
+  ${theme.response.tablet} {
+    font-size: 1.5vw;
+  }
+
+  @media (max-width: 550px) {
+    font-size: 9px;
+  }
 `;
diff --git a/src/components/Register/common/InputAccordion/index.tsx b/src/components/Register/common/InputAccordion/index.tsx
index 8319a5e0..42fd06d2 100644
--- a/src/components/Register/common/InputAccordion/index.tsx
+++ b/src/components/Register/common/InputAccordion/index.tsx
@@ -62,6 +62,11 @@ const Container = styled.div`
 
   display: flex;
   flex-direction: column;
+
+  ${theme.response.tablet} {
+    margin-bottom: 20px;
+    padding: 17px;
+  }
 `;
 
 const Header = styled.div`
diff --git a/src/components/Register/common/InputContainer/index.tsx b/src/components/Register/common/InputContainer/index.tsx
index 4727fec5..6f189ab0 100644
--- a/src/components/Register/common/InputContainer/index.tsx
+++ b/src/components/Register/common/InputContainer/index.tsx
@@ -26,6 +26,9 @@ const Container = styled.div`
 
   ${theme.response.tablet} {
     width: 100%;
+
+    margin-bottom: 20px;
+    padding: 17px;
   }
 `;
 
diff --git a/src/components/Register/common/InputWrapper/index.tsx b/src/components/Register/common/InputWrapper/index.tsx
index 6e472e8d..5d6a2b15 100644
--- a/src/components/Register/common/InputWrapper/index.tsx
+++ b/src/components/Register/common/InputWrapper/index.tsx
@@ -19,6 +19,4 @@ const Wrapper = styled.div`
   width: 100%;
 
   margin-top: 9px;
-
-  display: inline-block;
 `;
diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx
index aa1b9bbc..facda70b 100644
--- a/src/pages/Register/index.tsx
+++ b/src/pages/Register/index.tsx
@@ -161,6 +161,10 @@ const ContentContainer = styled.div`
 
   width: 100%;
   height: 80%;
+
+  ${theme.response.tablet} {
+    overflow: auto;
+  }
 `;
 
 const InnerContentContainer = styled.div`
@@ -178,6 +182,8 @@ const InnerContentContainer = styled.div`
     height: 100%;
 
     margin-top: 5vw;
+
+    overflow: visible;
   }
 
   @media (max-width: 550px) {

From d0444d8315cb6b2e805da20f584bb89f655f2d40 Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 05:31:49 +0900
Subject: [PATCH 12/13] =?UTF-8?q?design:=20RegisterCompleteModal=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EB=A7=88=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RegisterCompleteModal/index.tsx           | 67 ++++++++++++++++---
 1 file changed, 59 insertions(+), 8 deletions(-)

diff --git a/src/components/Register/Steps/FourthStep/RegisterCompleteModal/index.tsx b/src/components/Register/Steps/FourthStep/RegisterCompleteModal/index.tsx
index 3aeb8612..186e449e 100644
--- a/src/components/Register/Steps/FourthStep/RegisterCompleteModal/index.tsx
+++ b/src/components/Register/Steps/FourthStep/RegisterCompleteModal/index.tsx
@@ -32,12 +32,14 @@ const RegisterCompleteModal = () => {
           alt="등록 완료 아이콘"
         />
         <Description>쿠폰이 등록되었습니다.</Description>
-        <CheckCoupons onClick={handleCheckButton}>
-          쿠폰 확인하러 가기
-        </CheckCoupons>
-        <RegisterNewCoupon onClick={handleRegisterButton}>
-          쿠폰 추가 등록하기
-        </RegisterNewCoupon>
+        <ButtonContainer>
+          <CheckCoupons onClick={handleCheckButton}>
+            쿠폰 확인하러 가기
+          </CheckCoupons>
+          <RegisterNewCoupon onClick={handleRegisterButton}>
+            쿠폰 추가 등록하기
+          </RegisterNewCoupon>
+        </ButtonContainer>
       </Container>
     </Backdrop>
   );
@@ -57,25 +59,49 @@ const Container = styled.div`
   align-items: center;
 
   background: #fff;
+
+  ${theme.response.tablet} {
+    width: 336px;
+    height: 210px;
+  }
 `;
 
 const CompleteIcon = styled.img`
   width: 45px;
   height: 45px;
+
+  ${theme.response.tablet} {
+    width: 38px;
+    height: 38px;
+  }
 `;
 
 const Description = styled.div`
-  margin-top: 15px;
+  margin: 15px 0px 40px;
 
   font-size: 18px;
   font-weight: 600;
+
+  ${theme.response.tablet} {
+    font-size: 15px;
+  }
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${theme.response.tablet} {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
 `;
 
 const CheckCoupons = styled.button`
   width: 324px;
   height: 47px;
 
-  margin-top: 40px;
   border: none;
   border-radius: 12px;
 
@@ -86,6 +112,17 @@ const CheckCoupons = styled.button`
   background: ${theme.colors.hover};
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 130px;
+    height: 38px;
+
+    border-radius: 10px;
+
+    font-size: 12px;
+
+    background: #b1b1b1;
+  }
 `;
 
 const RegisterNewCoupon = styled.button`
@@ -101,4 +138,18 @@ const RegisterNewCoupon = styled.button`
   background: transparent;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 130px;
+    height: 38px;
+
+    margin-top: 0px;
+    border-radius: 10px;
+
+    color: #fff;
+    font-size: 12px;
+    text-decoration: none;
+
+    background: ${theme.colors.hover};
+  }
 `;

From e38c35bffa41d804185aaaa4addfcd7a9e4e236d Mon Sep 17 00:00:00 2001
From: ovoxiix <ovoxiix@gmail.com>
Date: Mon, 29 Jan 2024 05:56:02 +0900
Subject: [PATCH 13/13] =?UTF-8?q?design:=20=EB=93=B1=EB=A1=9D=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=84=B8?=
 =?UTF-8?q?=EB=B6=80=20=EB=A7=88=ED=81=AC=EC=97=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Register/StepTitle/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Register/StepTitle/index.tsx b/src/components/Register/StepTitle/index.tsx
index 38e93643..842a06f7 100644
--- a/src/components/Register/StepTitle/index.tsx
+++ b/src/components/Register/StepTitle/index.tsx
@@ -32,6 +32,8 @@ const StepTitleContainer = styled.div`
   ${theme.response.tablet} {
     height: 7vw;
 
+    margin-top: 10px;
+
     font-size: 3vw;
   }