[#142] 등록 페이지 반응형 디자인

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;

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,20 @@ const StepTitleContainer = styled.div`
   font-weight: 600;
   line-height: 31px;
   letter-spacing: -0.78px;
+
+  ${theme.response.tablet} {
+    height: 7vw;
+
+    margin-top: 10px;
+
+    font-size: 3vw;
+  }
+
+  @media (max-width: 550px) {
+    height: 40px;
+
+    font-size: 16px;
+  }
 `;
 
 const StepTitleWrapper = styled.div`
@@ -41,4 +56,8 @@ const Description = styled.span`
   font-size: 13px;
   letter-spacing: 0.1px;
   line-height: 150%;
+
+  ${theme.response.tablet} {
+    display: none;
+  }
 `;

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;
+  }
 `;

src/components/Register/StepperController/index.tsx

@@ -113,6 +113,13 @@ const PreviousButton = styled.button<PreviousButtonStyleProps>`
   background: #fff;
 
   cursor: pointer;
+
+  ${theme.response.tablet} {
+    width: 123px;
+    height: 39px;
+
+    font-size: 12px;
+  }
 `;
 
 const NextButton = styled.button<NextButtonStyleProps>`
@@ -135,4 +142,11 @@ const NextButton = styled.button<NextButtonStyleProps>`
     props.$isFilled ? `${theme.colors.hover}` : '#cdcfd0'};
 
   cursor: ${props => (props.$isFilled ? 'pointer' : 'default')};
+
+  ${theme.response.tablet} {
+    width: 225px;
+    height: 39px;
+
+    font-size: 12px;
+  }
 `;

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,17 +225,45 @@ 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`
   margin-top: 20px;
 
   display: flex;
   gap: 23px;
+
+  ${theme.response.tablet} {
+    gap: 3vw;
+  }
+
+  @media (max-width: 550px) {
+    gap: 16px;
+  }
 `;
 
 const ContentWrapper = styled.div`

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`

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};
+  }
 `;

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;
+  }
 `;