Lh 393 creating a image

packages/travelmakers-design-core/src/components/Image/Image.style.ts

@@ -0,0 +1,10 @@
+import { createStyles } from "@travelmakers-design-v2/styles";
+import { Props } from "./Image";
+
+export default createStyles((theme, { load }: { load: boolean }) => {
+  return {
+    loading: {
+      display: "none",
+    },
+  };
+});

packages/travelmakers-design-core/src/components/Image/Image.tsx

@@ -0,0 +1,56 @@
+import { PolymorphicRef } from "@travelmakers-design-v2/styles";
+import React, { forwardRef, useState } from "react";
+import useStyles from "./Image.style";
+import { ImageComponent, ImageProps } from "./Image.type";
+
+export interface Props extends React.ImgHTMLAttributes<HTMLImageElement> {
+  /** true일 경우 lazy load가 적용됩니다. */
+  lazy?: boolean;
+
+  /** 이미지 src를 정합니다. */
+  src: string;
+
+  /** 이미지 설명을 추가합니다. */
+  alt: string;
+}
+
+export const Image: ImageComponent & {
+  displayName?: string;
+} = forwardRef(
+  <C extends React.ElementType = "img">(
+    { lazy = true, src, alt, className, ...props }: ImageProps<C>,
+    ref: PolymorphicRef<C>
+  ) => {
+    const [load, setLoad] = useState(false);
+    const { classes, cx } = useStyles({ load });
+
+    return (
+      <>
+        <img
+          ref={ref}
+          src={src}
+          alt={alt}
+          loading={lazy ? "lazy" : "eager"}
+          className={cx(className, !load && classes.loading)}
+          onLoad={() => setLoad(true)}
+          onError={(e) => {
+            setLoad(true);
+            e.currentTarget.src = require("./img/error.png");
+          }}
+          {...props}
+        />
+        {!load && (
+          <img
+            loading={lazy ? "lazy" : "eager"}
+            src={
+              "data:image/gif;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8UA8AAiUBUcc3qzwAAAAASUVORK5CYII="
+            }
+            {...props}
+          />
+        )}
+      </>
+    );
+  }
+);
+
+Image.displayName = "Image";

packages/travelmakers-design-core/src/components/Image/Image.type.ts

@@ -0,0 +1,22 @@
+import {
+  ClassNames,
+  PolymorphicComponentProps,
+  TmComponentProps,
+} from "@travelmakers-design-v2/styles";
+import useStyles from "./Image.style";
+import { Props } from "./Image";
+
+export type ImageStylesNames = ClassNames<typeof useStyles>;
+
+export interface SharedImageProps
+  extends Props,
+    TmComponentProps<ImageStylesNames> {}
+
+export type ImageProps<C extends React.ElementType> = PolymorphicComponentProps<
+  C,
+  SharedImageProps
+>;
+
+export type ImageComponent = <C extends React.ElementType = "img">(
+  props: ImageProps<C>
+) => React.ReactElement;

packages/travelmakers-design-core/src/components/Image/index.ts

@@ -0,0 +1,2 @@
+export { Image } from "./Image";
+export type { ImageProps } from "./Image.type";

packages/travelmakers-design-core/src/components/Image/stories/Image.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta } from "@storybook/react";
+import { Image } from "../Image";
+
+export default {
+  title: "@travelmakers-design-v2/core/General/Image",
+  component: Image,
+  argTypes: {
+    src: {
+      defaultValue: "https://picsum.photos/600/400",
+      description: "이미지 src를 정합니다.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+      control: { type: "text" },
+    },
+    lazy: {
+      defaultValue: true,
+      description: "true일 경우 lazy load가 적용됩니다.",
+      control: { type: "boolean" },
+    },
+    width: {
+      defaultValue: 400,
+      description: "Image 컴포넌트의 너비를 정합니다.",
+      control: { type: "number" },
+    },
+    height: {
+      defaultValue: 400,
+      description: "Image 컴포넌트의 높이를 정합니다.",
+      control: { type: "number" },
+    },
+    alt: {
+      defaultValue: "",
+      description: "이미지 설명을 추가합니다.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+      control: { type: "text" },
+    },
+  },
+} as Meta;
+
+export const Default = (props) => {
+  return <Image {...props} />;
+};