Merge pull request #33 from sopt-makers/feat/#32-toast-icon

feat: 토스트 아이콘 변경
sopt-makers · Dec 10, 2023 · b133424 · b133424
2 parents 01b56d2 + 4ecf9e4
commit b133424
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 88 deletions.
diff --git a/apps/docs/src/stories/Toast.stories.tsx b/apps/docs/src/stories/Toast.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta, StoryObj, StoryFn } from "@storybook/react";
 import { Button } from "ui";
 import { useToast, ToastProvider, type ToastOptionType } from "ui";
+import { IconArchive } from "../../../../packages/icons/src";
 
 const meta: Meta = {
   title: "Components/Toast",
@@ -17,7 +18,7 @@ export default meta;
 
 type Story = StoryObj;
 
-const ToastSample = ({ option }: { option: ToastOptionType}) => {
+const ToastSample = ({ option }: { option: ToastOptionType }) => {
   const { open } = useToast();
   return <button onClick={() => open(option)}>Open Toast</button>;
 };
@@ -29,12 +30,12 @@ export const Default: Story = {
     return <ToastSample option={option} />;
   },
   parameters: {
-    layout: 'centered',
+    layout: "centered",
     backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
+      default: "dark", // 기본 배경을 'dark'로 설정
       values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' }
+        { name: "dark", value: "#2c2c2c" }, // 'dark' 배경의 색상을 검정색으로 지정
+        { name: "white", value: "#ffffff" },
       ],
     },
   },
@@ -51,12 +52,12 @@ export const TextOver: Story = {
     return <ToastSample option={option} />;
   },
   parameters: {
-    layout: 'centered',
+    layout: "centered",
     backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
+      default: "dark", // 기본 배경을 'dark'로 설정
       values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' }
+        { name: "dark", value: "#2c2c2c" }, // 'dark' 배경의 색상을 검정색으로 지정
+        { name: "white", value: "#ffffff" },
       ],
     },
   },
@@ -73,12 +74,34 @@ export const ActionButton: Story = {
     return <ToastSample option={option} />;
   },
   parameters: {
-    layout: 'centered',
+    layout: "centered",
     backgrounds: {
-      default: 'dark', // 기본 배경을 'dark'로 설정
+      default: "dark", // 기본 배경을 'dark'로 설정
       values: [
-        { name: 'dark', value: '#2c2c2c' }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' }
+        { name: "dark", value: "#2c2c2c" }, // 'dark' 배경의 색상을 검정색으로 지정
+        { name: "white", value: "#ffffff" },
+      ],
+    },
+  },
+};
+
+export const CustomIcon: Story = {
+  name: "custom icon",
+  render: () => {
+    const option: ToastOptionType = {
+      icon: <IconArchive />,
+      content: "커스텀 아이콘을 사용한 토스트",
+      action: { name: "보러가기", onClick: () => {} },
+    };
+    return <ToastSample option={option} />;
+  },
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "dark", // 기본 배경을 'dark'로 설정
+      values: [
+        { name: "dark", value: "#2c2c2c" }, // 'dark' 배경의 색상을 검정색으로 지정
+        { name: "white", value: "#ffffff" },
       ],
     },
   },

diff --git a/packages/ui/Toast/icons/alert.tsx b/packages/ui/Toast/icons/alert.tsx
@@ -0,0 +1,30 @@
+const ToastIconAlert = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1309_17539)">
+        <circle cx="10" cy="10" r="10" fill="#FFDE8A" />
+        <path
+          d="M10.9671 5.52686C10.9671 5.01502 10.5333 4.6001 9.99819 4.6001C9.46308 4.6001 9.0293 5.01502 9.0293 5.52686V10.4696C9.0293 10.9814 9.46308 11.3964 9.99819 11.3964C10.5333 11.3964 10.9671 10.9814 10.9671 10.4696V5.52686Z"
+          fill="#B57B1D"
+        />
+        <path
+          d="M9.99819 12.8957C9.46308 12.8957 9.0293 13.3106 9.0293 13.8224C9.0293 14.3343 9.46308 14.7492 9.99819 14.7492H10.0111C10.5462 14.7492 10.98 14.3343 10.98 13.8224C10.98 13.3106 10.5462 12.8957 10.0111 12.8957H9.99819Z"
+          fill="#B57B1D"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1309_17539">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default ToastIconAlert;
diff --git a/packages/ui/Toast/icons/error.tsx b/packages/ui/Toast/icons/error.tsx
@@ -0,0 +1,30 @@
+const ToastIconError = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1309_17540)">
+        <circle cx="10" cy="10" r="10" fill="#FFA8AD" />
+        <path
+          d="M10.9671 5.52686C10.9671 5.01502 10.5333 4.6001 9.99819 4.6001C9.46308 4.6001 9.0293 5.01502 9.0293 5.52686V10.4696C9.0293 10.9814 9.46308 11.3964 9.99819 11.3964C10.5333 11.3964 10.9671 10.9814 10.9671 10.4696V5.52686Z"
+          fill="#9E2733"
+        />
+        <path
+          d="M9.99819 12.8957C9.46308 12.8957 9.0293 13.3106 9.0293 13.8224C9.0293 14.3343 9.46308 14.7492 9.99819 14.7492H10.0111C10.5462 14.7492 10.98 14.3343 10.98 13.8224C10.98 13.3106 10.5462 12.8957 10.0111 12.8957H9.99819Z"
+          fill="#9E2733"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1309_17540">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default ToastIconError;
diff --git a/packages/ui/Toast/icons/index.ts b/packages/ui/Toast/icons/index.ts
@@ -0,0 +1,3 @@
+export { default as ToastIconSuccess } from "./success";
+export { default as ToastIconAlert } from "./alert";
+export { default as ToastIconError } from "./error";
diff --git a/packages/ui/Toast/icons/success.tsx b/packages/ui/Toast/icons/success.tsx
@@ -0,0 +1,22 @@
+const ToastIconSuccess = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="20" height="20" rx="10" fill="#82F6CB" />
+      <path
+        d="M5.33325 9.1835L8.44436 12.3335L14.6666 7.0835"
+        stroke="#136D4C"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ToastIconSuccess;
diff --git a/packages/ui/Toast/parts/index.tsx b/packages/ui/Toast/parts/index.tsx
@@ -1,10 +1,6 @@
-import {
-  CheckCircleTwoTone,
-  CloseCircleTwoTone,
-  InfoCircleTwoTone,
-} from "@ant-design/icons";
 import { ActionType, DefaultIconType, StrictPropsWithChildren } from "../types";
 import * as styles from "./style.css";
+import { ToastIconSuccess, ToastIconAlert, ToastIconError } from "../icons";
 
 // ============================== ToastRoot ===============================
 
@@ -13,9 +9,9 @@ interface RootProps {
 }
 
 const convertToIcon = {
-  success: CheckCircleTwoTone,
-  alert: InfoCircleTwoTone,
-  error: CloseCircleTwoTone,
+  success: ToastIconSuccess,
+  alert: ToastIconAlert,
+  error: ToastIconError,
 };
 
 function Root({ children, icon }: StrictPropsWithChildren<RootProps>) {
@@ -24,7 +20,11 @@ function Root({ children, icon }: StrictPropsWithChildren<RootProps>) {
 
   return (
     <div className={styles.root}>
-      {DefaultIcon ? <DefaultIcon /> : icon}
+      {DefaultIcon ? (
+        <DefaultIcon />
+      ) : (
+        <div className={styles.icon}>{icon}</div>
+      )}
       {children}
     </div>
   );

diff --git a/packages/ui/Toast/parts/style.css.ts b/packages/ui/Toast/parts/style.css.ts
@@ -16,6 +16,7 @@ export const root = style({
   position: "fixed",
   top: "36px",
   left: "50%",
+  transform: "translateX(-50%)",
   transition: "transform .2s linear",
 
   width: "380px",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -20,7 +20,6 @@
     "typescript": "^4.5.2"
   },
   "dependencies": {
-    "@ant-design/icons": "4.0.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@sopt-makers/colors": "file:../colors",
     "@sopt-makers/fonts": "file:../fonts",

diff --git a/yarn.lock b/yarn.lock
@@ -20,29 +20,6 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@ant-design/colors@^3.1.0":
-  version "3.2.2"
-  resolved "https://registry.npmjs.org/@ant-design/colors/-/colors-3.2.2.tgz#5ad43d619e911f3488ebac303d606e66a8423903"
-  integrity sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==
-  dependencies:
-    tinycolor2 "^1.4.1"
-
-"@ant-design/icons-svg@^4.0.0":
-  version "4.3.1"
-  resolved "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz#4b2f65a17d4d32b526baa6414aca2117382bf8da"
-  integrity sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g==
-
-"@ant-design/icons@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/@ant-design/icons/-/icons-4.0.0.tgz#cdb870777f185422cfc0e235392592d3e4795ef6"
-  integrity sha512-oJTNTyo/6DjVmK/DSa58A+7gZRGgzBCAEJ9Pfa6U+BAZO28tvOE3YzlQd9gq9Qu6d47JL1ixyID3qsmRFqitlQ==
-  dependencies:
-    "@ant-design/colors" "^3.1.0"
-    "@ant-design/icons-svg" "^4.0.0"
-    classnames "^2.2.6"
-    insert-css "^2.0.0"
-    rc-util "^4.9.0"
-
 "@aw-web-design/x-default-browser@1.4.126":
   version "1.4.126"
   resolved "https://registry.yarnpkg.com/@aw-web-design/x-default-browser/-/x-default-browser-1.4.126.tgz#43e4bd8f0314ed907a8718d7e862a203af79bc16"
@@ -4036,13 +4013,6 @@ acorn@^8.10.0, acorn@^8.11.2, acorn@^8.4.1, acorn@^8.9.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
   integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
 
-add-dom-event-listener@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz#6a92db3a0dd0abc254e095c0f1dc14acbbaae310"
-  integrity sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==
-  dependencies:
-    object-assign "4.x"
-
 address@^1.0.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
@@ -4745,11 +4715,6 @@ ci-info@^3.2.0, ci-info@^3.7.0, ci-info@^3.8.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
-classnames@^2.2.6:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
-  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
-
 clean-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/clean-regexp/-/clean-regexp-1.0.0.tgz#8df7c7aae51fd36874e8f8d05b9180bc11a3fed7"
@@ -6992,11 +6957,6 @@ inquirer@^8.0.0, inquirer@^8.2.4:
     through "^2.3.6"
     wrap-ansi "^6.0.1"
 
-insert-css@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz#eb5d1097b7542f4c79ea3060d3aee07d053880f4"
-  integrity sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==
-
 internal-slot@^1.0.4, internal-slot@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.6.tgz#37e756098c4911c5e912b8edbf71ed3aa116f930"
@@ -8295,7 +8255,7 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -8858,7 +8818,7 @@ prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8989,17 +8949,6 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc-util@^4.9.0:
-  version "4.21.1"
-  resolved "https://registry.npmjs.org/rc-util/-/rc-util-4.21.1.tgz#88602d0c3185020aa1053d9a1e70eac161becb05"
-  integrity sha512-Z+vlkSQVc1l8O2UjR3WQ+XdWlhj5q9BMQNLk2iOBch75CqPfrJyGtcWMcnhRlNuDu0Ndtt4kLVO8JI8BrABobg==
-  dependencies:
-    add-dom-event-listener "^1.1.0"
-    prop-types "^15.5.10"
-    react-is "^16.12.0"
-    react-lifecycles-compat "^3.0.4"
-    shallowequal "^1.1.0"
-
 rc@^1.0.1, rc@^1.1.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -9065,7 +9014,7 @@ react-is@18.1.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
   integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
 
-react-is@^16.12.0, react-is@^16.13.1:
+react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9080,11 +9029,6 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
@@ -9598,11 +9542,6 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -10176,7 +10115,7 @@ tiny-invariant@^1.3.1:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
   integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
 
-tinycolor2@^1.0.0, tinycolor2@^1.4.1:
+tinycolor2@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==