Merge branch 'develop'

Roots-and-Fruits · Jan 3, 2025 · 9948c4d · 9948c4d
2 parents 7b48b55 + 854ab7c
commit 9948c4d
Show file tree

Hide file tree

Showing 43 changed files with 1,112 additions and 655 deletions.
diff --git a/public/svg/ic_arrow_back.svg b/public/svg/ic_arrow_back.svg
diff --git a/public/svg/ic_home.svg b/public/svg/ic_home.svg
diff --git a/src/assets/svg/IcArrowBack.tsx b/src/assets/svg/IcArrowBack.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcArrowBack = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <mask
+      id="ic_arrow_back_svg__a"
+      width={24}
+      height={24}
+      x={0}
+      y={0}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: "alpha",
+      }}
+    >
+      <path fill="#D9D9D9" d="M0 0h24v24H0z" />
+    </mask>
+    <g mask="url(#ic_arrow_back_svg__a)">
+      <path
+        fill="#4C4C67"
+        d="M16 22 6 12 16 2l1.775 1.775L9.55 12l8.225 8.225z"
+      />
+    </g>
+  </svg>
+);
+export default SvgIcArrowBack;
diff --git a/src/assets/svg/IcHome.tsx b/src/assets/svg/IcHome.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcHome = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      stroke="#3E3F45"
+      strokeWidth={1.7}
+      d="m19.642 10.144-7.544-6.312a.35.35 0 0 0-.455.003l-7.297 6.31A1 1 0 0 0 4 10.9v8.349a1 1 0 0 0 1 1h3.83a1 1 0 0 0 1-1v-4.193a1 1 0 0 1 1-1H13.2a1 1 0 0 1 1 1v4.193a1 1 0 0 0 1 1H19a1 1 0 0 0 1-1v-8.339a1 1 0 0 0-.358-.767Z"
+    />
+  </svg>
+);
+export default SvgIcHome;
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
@@ -1,3 +1,4 @@
+export { default as IcArrowBack } from "./IcArrowBack";
 export { default as IcArrowDown } from "./IcArrowDown";
 export { default as IcArrowUp } from "./IcArrowUp";
 export { default as IcBack } from "./IcBack";
@@ -10,6 +11,7 @@ export { default as IcCopy } from "./IcCopy";
 export { default as IcDelete } from "./IcDelete";
 export { default as IcDownload } from "./IcDownload";
 export { default as IcFix } from "./IcFix";
+export { default as IcHome } from "./IcHome";
 export { default as IcLogout } from "./IcLogout";
 export { default as IcMainCharacter } from "./IcMainCharacter";
 export { default as IcMinus } from "./IcMinus";

diff --git a/src/components/common/Button/Button.style.ts b/src/components/common/Button/Button.style.ts
@@ -1,5 +1,6 @@
 import { css, Theme } from "@emotion/react";
 import { flexGenerator } from "@styles/generator";
+import { CategoryType } from "@types";
 
 export const buttonStyle = css`
   ${flexGenerator()}
@@ -10,77 +11,108 @@ export const buttonStyle = css`
 `;
 
 export const buttonVariant = {
-  fill: (theme: Theme) => css`
-    width: 100%;
-    height: 4.8rem;
-
-    border-radius: 5px;
-
-    ${theme.font["pretendard-01"]}
-    color: ${theme.color.white};
-    background-color: ${theme.color.orange};
-  `,
-  stroke: (theme: Theme) => css`
-    width: 100%;
-    height: 4.8rem;
-
-    border: 1px solid ${theme.color.orange};
-    border-radius: 5px;
-
-    ${theme.font["pretendard-01"]}
-    color: ${theme.color.orange};
-    background-color: ${theme.color.white};
-  `,
-  smallStroke: (theme: Theme) => css`
-    width: 100%;
-    height: 3rem;
-
-    border: 1px solid ${theme.color.orange};
-    border-radius: 4px;
-
-    ${theme.font["subhead-m-14"]}
-    color: ${theme.color.orange};
-    background-color: transparent;
-  `,
-  smallFill: (theme: Theme) => css`
-    width: 100%;
-    height: 3rem;
-
-    border: 1px solid ${theme.color.orange};
-    border-radius: 4px;
-
-    ${theme.font["pretendard-01"]}
-    color: ${theme.color.white};
-    background-color: ${theme.color.orange};
-  `,
-  delete: (theme: Theme) => css`
-    width: 100%;
-    height: 3rem;
-
-    border: 1px solid ${theme.color.orange};
-    border-radius: 4px;
-
-    ${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};
-  `,
+  fill: (category: CategoryType) => (theme: Theme) =>
+    css`
+      width: 100%;
+      height: 4.8rem;
+
+      border-radius: 5px;
+
+      ${theme.font["pretendard-01"]}
+      color: ${theme.color.white};
+      background-color: ${category === "experience"
+        ? theme.color.green
+        : theme.color.orange};
+    `,
+  stroke: (category: CategoryType) => (theme: Theme) =>
+    css`
+      width: 100%;
+      height: 4.8rem;
+
+      border: 1px solid
+        ${category === "experience" ? theme.color.green : theme.color.orange};
+      border-radius: 5px;
+
+      ${theme.font["pretendard-01"]}
+      color: ${category === "experience"
+        ? theme.color.green
+        : theme.color.orange};
+      background-color: ${theme.color.white};
+    `,
+  smallStroke: (category: CategoryType) => (theme: Theme) =>
+    css`
+      width: 100%;
+      height: 3rem;
+
+      border: 1px solid
+        ${category === "experience" ? theme.color.green : theme.color.orange};
+      border-radius: 4px;
+
+      ${theme.font["subhead-m-14"]}
+      color: ${category === "experience"
+        ? theme.color.green
+        : theme.color.orange};
+      background-color: transparent;
+    `,
+  smallFill: (category: CategoryType) => (theme: Theme) =>
+    css`
+      width: 100%;
+      height: 3rem;
+
+      border: 1px solid
+        ${category === "experience" ? theme.color.green : theme.color.orange};
+      border-radius: 4px;
+
+      ${theme.font["pretendard-01"]}
+      color: ${theme.color.white};
+      background-color: ${category === "experience"
+        ? theme.color.green
+        : theme.color.orange};
+    `,
+  delete: (category: CategoryType) => (theme: Theme) =>
+    css`
+      width: 100%;
+      height: 3rem;
+
+      border: 1px solid
+        ${category === "experience" ? theme.color.green : theme.color.orange};
+      border-radius: 4px;
+
+      ${theme.font["pretendard-01"]}
+      color: ${category === "experience"
+        ? theme.color.green
+        : theme.color.orange};
+    `,
+  fillLightColor: (category: CategoryType) => (theme: Theme) =>
+    css`
+      width: 100%;
+      height: 4.8rem;
+
+      border-radius: 5px;
+
+      ${theme.font["pretendard-01"]}
+      color: ${category === "experience"
+        ? theme.color.green
+        : theme.color.orange};
+      background-color: ${category === "experience"
+        ? theme.color.lightgreen
+        : theme.color.lightorange};
+    `,
 };
 
 export const disabledStyle = (theme: Theme) => css`
   color: ${theme.color.midgray1};
   background-color: ${theme.color.lightgray1};
 `;
 
-export const iconStyle = css`
-  width: 1.6rem;
-  height: 1.6rem;
-`;
+export const iconStyle = (category: CategoryType) => (theme: Theme) =>
+  css`
+    width: 1.6rem;
+    height: 1.6rem;
+
+    & path {
+      stroke: ${category === "experience"
+        ? theme.color.green
+        : theme.color.orange};
+    }
+  `;
diff --git a/src/components/common/Button/Button.tsx b/src/components/common/Button/Button.tsx
@@ -6,6 +6,8 @@ import {
   iconStyle,
 } from "./Button.style";
 import { IcFix } from "@svg";
+import { useAtom } from "jotai";
+import { categoryAtom } from "@stores";
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant:
@@ -14,7 +16,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     | "smallStroke"
     | "smallFill"
     | "delete"
-    | "fillLightOrange";
+    | "fillLightColor";
   disabled?: boolean;
   isIcon?: boolean;
 }
@@ -26,14 +28,20 @@ const Button = ({
   onClick,
   children,
 }: ButtonProps) => {
+  const [category] = useAtom(categoryAtom);
+
   return (
     <button
-      css={[buttonStyle, buttonVariant[variant], disabled && disabledStyle]}
+      css={[
+        buttonStyle,
+        buttonVariant[variant](category),
+        disabled && disabledStyle,
+      ]}
       onClick={onClick}
       disabled={disabled}
     >
       {children}
-      {isIcon && <IcFix css={iconStyle} />}
+      {isIcon && <IcFix css={iconStyle(category)} />}
     </button>
   );
 };

diff --git a/src/components/common/CheckBox/CheckBox.style.ts b/src/components/common/CheckBox/CheckBox.style.ts
@@ -1,6 +1,7 @@
 import { Theme } from "@emotion/react";
 import { css } from "@emotion/react";
 import { flexGenerator } from "@styles/generator";
+import { CategoryType } from "@types";
 
 export const checkboxWrapper = css`
   ${flexGenerator("row", "start", "center")};
@@ -14,6 +15,15 @@ export const iconStyle = css`
   height: 2.4rem;
 `;
 
+export const checkedIconStyle = (category: CategoryType) => (theme: Theme) =>
+  css`
+    & path {
+      fill: ${category === "experience"
+        ? theme.color.green
+        : theme.color.orange};
+    }
+  `;
+
 export const textStyle = (theme: Theme) => css`
   color: ${theme.color.black};
   ${theme.font["subhead-n-14"]}

diff --git a/src/components/common/CheckBox/CheckBox.tsx b/src/components/common/CheckBox/CheckBox.tsx
@@ -1,6 +1,13 @@
 import { IcCheckbox, IcCheckedTrue } from "@svg";
 import { InputHTMLAttributes, ReactNode } from "react";
-import { checkboxWrapper, iconStyle, textStyle } from "./CheckBox.style";
+import {
+  checkboxWrapper,
+  checkedIconStyle,
+  iconStyle,
+  textStyle,
+} from "./CheckBox.style";
+import { useAtom } from "jotai";
+import { categoryAtom } from "@stores";
 
 export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
   isChecked: boolean;
@@ -9,10 +16,16 @@ export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 const CheckBox = ({ isChecked, onClick, children }: CheckBoxProps) => {
+  const [category] = useAtom(categoryAtom);
+
   return (
     <div css={checkboxWrapper} onClick={onClick}>
       <span css={iconStyle}>
-        {isChecked ? <IcCheckedTrue /> : <IcCheckbox />}
+        {isChecked ? (
+          <IcCheckedTrue css={checkedIconStyle(category)} />
+        ) : (
+          <IcCheckbox />
+        )}
       </span>
       <span css={textStyle}>{children}</span>
     </div>

diff --git a/src/components/common/CountProduct/CountProduct.style.ts b/src/components/common/CountProduct/CountProduct.style.ts
@@ -11,6 +11,8 @@ export const productNameStyle = (theme: Theme) => css`
   width: 100%;
   ${theme.font["subhead-n-16"]};
   color: ${theme.color.black};
+  white-space: normal;
+  word-break: keep-all;
 `;
 
 export const productCountWrapper = css`