Merge branch 'develop'

Roots-and-Fruits · Oct 17, 2024 · 56ac077 · 56ac077
2 parents bef21a7 + 00712be
commit 56ac077
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 `;