From 00712be9b66a68062e14c5aae478cbf1d16f20f2 Mon Sep 17 00:00:00 2001
From: Yoo TaeSeung <remicon99@gmail.com>
Date: Thu, 17 Oct 2024 13:44:06 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=B2=84=ED=8A=BC=20=ED=95=98=EB=8B=A8?=
 =?UTF-8?q?=20=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Button/Button.style.ts      | 10 ++++++++++
 src/components/common/Button/Button.tsx           |  8 +++++++-
 .../common/steps/CheckInfo/CheckInfo.tsx          |  2 +-
 .../steps/SelectProduct/SelectProduct.style.ts    |  2 ++
 .../common/steps/SelectProduct/SelectProduct.tsx  |  7 ++-----
 src/pages/orderInfo/styles/common.style.ts        | 15 ++++++++++-----
 6 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/components/common/Button/Button.style.ts b/src/components/common/Button/Button.style.ts
index d54d403..b46e3d9 100644
--- a/src/components/common/Button/Button.style.ts
+++ b/src/components/common/Button/Button.style.ts
@@ -63,6 +63,16 @@ export const buttonVariant = {
     ${theme.font["pretendard-01"]}
     color: ${theme.color.orange};
   `,
+  fillLightOrange: (theme: Theme) => css`
+    width: 100%;
+    height: 4.8rem;
+
+    border-radius: 5px;
+
+    ${theme.font["pretendard-01"]}
+    color: ${theme.color.orange};
+    background-color: ${theme.color.lightorange};
+  `,
 };
 
 export const disabledStyle = (theme: Theme) => css`
diff --git a/src/components/common/Button/Button.tsx b/src/components/common/Button/Button.tsx
index 4b4507f..320fff6 100644
--- a/src/components/common/Button/Button.tsx
+++ b/src/components/common/Button/Button.tsx
@@ -8,7 +8,13 @@ import {
 import { IcFix } from "@svg";
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant: "fill" | "stroke" | "smallStroke" | "smallFill";
+  variant:
+    | "fill"
+    | "stroke"
+    | "smallStroke"
+    | "smallFill"
+    | "delete"
+    | "fillLightOrange";
   disabled?: boolean;
   isIcon?: boolean;
 }
diff --git a/src/components/common/steps/CheckInfo/CheckInfo.tsx b/src/components/common/steps/CheckInfo/CheckInfo.tsx
index 266b63f..44e84d9 100644
--- a/src/components/common/steps/CheckInfo/CheckInfo.tsx
+++ b/src/components/common/steps/CheckInfo/CheckInfo.tsx
@@ -141,7 +141,7 @@ const CheckInfo = ({ onNext }: StepProps) => {
           ))}
         </section>
         <footer css={buttonSectionStyle}>
-          <Button variant="stroke" onClick={handleAddReceiverClick}>
+          <Button variant="fillLightOrange" onClick={handleAddReceiverClick}>
             택배 추가 접수하기
           </Button>
           <Button variant="fill" onClick={handleNextClick}>
diff --git a/src/components/common/steps/SelectProduct/SelectProduct.style.ts b/src/components/common/steps/SelectProduct/SelectProduct.style.ts
index b1fb7eb..6a01e73 100644
--- a/src/components/common/steps/SelectProduct/SelectProduct.style.ts
+++ b/src/components/common/steps/SelectProduct/SelectProduct.style.ts
@@ -18,4 +18,6 @@ export const buttonSectionStyle = css`
 
 export const totalPriceStyle = (theme: Theme) => css`
   ${theme.font["head01-b-24"]};
+  width: 100%;
+  text-align: end;
 `;
diff --git a/src/components/common/steps/SelectProduct/SelectProduct.tsx b/src/components/common/steps/SelectProduct/SelectProduct.tsx
index 7537ed0..fcfdf50 100644
--- a/src/components/common/steps/SelectProduct/SelectProduct.tsx
+++ b/src/components/common/steps/SelectProduct/SelectProduct.tsx
@@ -1,17 +1,14 @@
 import { useEffect, useState } from "react";
 import { Button, CountProduct, Header, ProgressBar } from "@components";
 import {
+  buttonSectionStyle,
   layoutStyle,
   orangeTextStyle,
   sectionStyle,
   textStyle,
 } from "@pages/orderInfo/styles";
 import { StepProps } from "@types";
-import {
-  buttonSectionStyle,
-  mainSectionStyle,
-  totalPriceStyle,
-} from "./SelectProduct.style";
+import { mainSectionStyle, totalPriceStyle } from "./SelectProduct.style";
 import { useFetchProductList } from "@apis/domains/service/useFetchProductList";
 import { useAtom } from "jotai";
 import { categoryAtom, productListAtom } from "@stores";
diff --git a/src/pages/orderInfo/styles/common.style.ts b/src/pages/orderInfo/styles/common.style.ts
index 85a0425..920b12f 100644
--- a/src/pages/orderInfo/styles/common.style.ts
+++ b/src/pages/orderInfo/styles/common.style.ts
@@ -2,8 +2,8 @@ import { Theme, css } from "@emotion/react";
 import { flexGenerator } from "@styles/generator";
 
 export const layoutStyle = css`
-  ${flexGenerator("column")};
-  padding: 8.6rem 2rem 3rem;
+  ${flexGenerator("column", "flex-start")};
+  padding: 8.6rem 2rem 15rem;
   width: 100%;
   min-height: 100dvh;
 `;
@@ -29,9 +29,14 @@ export const mainSectionStyle = css`
   margin-top: 5.8rem;
 `;
 
-export const buttonSectionStyle = css`
+export const buttonSectionStyle = (theme: Theme) => css`
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  max-width: 43rem;
+  background-color: ${theme.color.white};
+  padding: 2rem;
   ${flexGenerator("column")};
   gap: 1rem;
-  width: 100%;
-  margin-top: auto;
+  z-index: 3;
 `;