Merge pull request #20 from peauty/feature/PEAUTY-62

[PEAUTY-62] 토스트 컴포넌트 생성

src/assets/svg/Check.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgCheck = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 22 20"
+    {...props}
+  >
+    <ellipse cx={11} cy={10} fill="#58C280" rx={10.556} ry={10} />
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m5.412 9.412 4.191 3.53 6.986-5.883"
+    />
+  </svg>
+);
+export default SvgCheck;

src/assets/svg/index.ts

@@ -3,6 +3,7 @@ export { default as Arrow } from "./Arrow";
 export { default as Bookmark } from "./Bookmark";
 export { default as Calendar } from "./Calendar";
 export { default as Camera } from "./Camera";
+export { default as Check } from "./Check";
 export { default as Favicon } from "./Favicon";
 export { default as Home } from "./Home";
 export { default as Logo } from "./Logo";

src/components/global/toast/Toast.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Toast from "./Toast";
+
+const meta: Meta<typeof Toast> = {
+  title: "Components/Toast",
+  component: Toast,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toast>;
+
+export const Default: Story = {
+  args: {
+    children: "등록 성공입니다!",
+  },
+};
+
+export const WithCustomIcon: Story = {
+  args: {
+    children: "Custom icon example",
+  },
+};

src/components/global/toast/Toast.styles.ts

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { colors } from "../../../style/color";
+export const ToastWrapper = styled.div`
+  background-color: ${colors.grayOpacity300};
+  padding: 13px 9px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start; 
+  border-radius: 5px;
+`;
+
+export const CheckIcon = styled.div`
+  margin-right: 9px;
+  display: flex;
+  align-items: center; 
+  justify-content: center;
+`;

src/components/global/toast/Toast.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { ToastWrapper, CheckIcon } from "./Toast.styles";
+import { Check } from "../../../assets/svg";
+import { Text } from "../texts/Text/Text";
+
+interface ToastProps {
+  children: React.ReactNode; // children 타입 명시
+}
+
+export default function Toast({ children }: ToastProps) {
+  return (
+    <ToastWrapper>
+      <CheckIcon>
+        <Check width="20px" height="20px" />
+      </CheckIcon>
+      <Text typo="body400" color="white">
+        {children}
+      </Text>
+    </ToastWrapper>
+  );
+}

src/components/global/toast/index.ts

@@ -0,0 +1 @@
+export { default } from "./Toast"