feat: icon 컴포넌트, storybook 추가

Author: sikkzz

.storybook/preview.module.scss

@@ -0,0 +1,14 @@
+.Wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.Story {
+  height: 100%;
+  padding: 2.5rem;
+  background-color: gray;
+}

.storybook/preview.ts

@@ -0,0 +1,26 @@
+import type { Preview } from "@storybook/react";
+
+import styles from "./preview.module.scss";
+
+const preview: Preview = {
+  parameters: {
+    layout: "centered",
+    options: {
+      storySort: {
+        order: ["ReadMe", "Changelog", "*", "components"],
+      },
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <div className={styles.Wrapper}>
+        <div className={styles.Story}>
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+};
+
+export default preview;

.storybook/preview.tsx

@@ -1,31 +1,5 @@
-import CameraIcon from "@/assets/svg/ic-camera.svg?react";
-import CloseIcon from "@/assets/svg/ic-close.svg?react";
-import GalleryIcon from "@/assets/svg/ic-gallery.svg?react";
-import LeftArrowIcon from "@/assets/svg/ic-left-arrow.svg?react";
-import PasteIcon from "@/assets/svg/ic-paste.svg?react";
-import PlusIcon from "@/assets/svg/ic-plus.svg?react";
-
 const App = () => {
-  return (
-    <div
-      style={{
-        width: "300px",
-        height: "300px",
-        backgroundColor: "gray",
-        display: "flex",
-        flexDirection: "column",
-        gap: "16px",
-      }}
-    >
-      <GalleryIcon />
-      <CameraIcon />
-      <CloseIcon />
-      <LeftArrowIcon />
-      <PasteIcon />
-      <PlusIcon />
-      <img src="/src/assets/img/img-logo.png" style={{ width: "52px", height: "28px" }} />
-    </div>
-  );
+  return <div>App</div>;
 };
 
 export default App;

src/App.tsx

@@ -0,0 +1,48 @@
+import Icon from "@/components/ui/Icon/Icon";
+import { ICONS } from "@/components/ui/Icon/Icon";
+import type { IconNameType } from "@/components/ui/Icon/Icon";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Icon> = {
+  title: "Example/Icon",
+  component: Icon,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    name: {
+      control: {
+        type: "select",
+        options: ["camera", "close", "gallery", "leftArrow", "paste", "plus"],
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const AllIcons: StoryObj<typeof Icon> = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: "4rem" }}>
+      {(Object.keys(ICONS) as IconNameType[]).map((iconName) => (
+        <div
+          style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}
+        >
+          <div
+            style={{
+              width: "1.5rem",
+              height: "1.5rem",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Icon name={iconName} />
+          </div>
+          <p>{iconName}</p>
+        </div>
+      ))}
+    </div>
+  ),
+};

src/components/Button.module.scss

@@ -0,0 +1,26 @@
+import CameraIcon from "@/assets/svg/ic-camera.svg?react";
+import CloseIcon from "@/assets/svg/ic-close.svg?react";
+import GalleryIcon from "@/assets/svg/ic-gallery.svg?react";
+import LeftArrowIcon from "@/assets/svg/ic-left-arrow.svg?react";
+import PasteIcon from "@/assets/svg/ic-paste.svg?react";
+import PlusIcon from "@/assets/svg/ic-plus.svg?react";
+
+type IconNameType = "camera" | "close" | "gallery" | "leftArrow" | "paste" | "plus";
+
+export const ICONS = {
+  camera: CameraIcon,
+  close: CloseIcon,
+  gallery: GalleryIcon,
+  leftArrow: LeftArrowIcon,
+  paste: PasteIcon,
+  plus: PlusIcon,
+};
+
+// 추후 사이즈, 컬러등 추가 가능
+const Icon = ({ name }: { name: IconNameType }) => {
+  const SvgIcon = ICONS[name];
+
+  return <SvgIcon />;
+};
+
+export default Icon;