�ADCIO-4570) refactor: refactor the thumbnail component to use panda …

…CSS (#110)

* docs: add thumbnail storybook

* refactor: refactor Thumbnail

---------

Co-authored-by: dev-redo <mis05041@naver.com>

src/component/Thumbnail/Thumbnail.stories.tsx

@@ -0,0 +1,59 @@
+import { Thumbnail } from './Thumbnail';
+import type { Meta, StoryFn } from '@storybook/react';
+import { hstack, vstack } from '../../../styled-system/patterns';
+import { css } from '../../../styled-system/css';
+
+export default {
+  component: Thumbnail,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/tN7Q8dJZqVsjo2FWflOKfu/CDS(Corca-Design-System)?node-id=435%3A15184&mode=dev',
+    },
+  },
+} as Meta<typeof Thumbnail>;
+
+const Template: StoryFn<typeof Thumbnail> = args => <Thumbnail {...args} />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  url: 'https://picsum.photos/id/237/200/300',
+  alt: 'cute dog',
+  size: 54,
+};
+
+const containerStyle = hstack({ gap: 20, alignItems: 'center', justifyContent: 'center' });
+const wrapperStyle = vstack({ gap: 20, alignItems: 'center', justifyContent: 'center' });
+
+export function Size() {
+  const sizes = [54, 72, 90];
+
+  return (
+    <div className={containerStyle}>
+      {sizes.map(size => (
+        <div className={wrapperStyle} key={size}>
+          <div
+            css={{
+              display: 'flex',
+            }}
+          >
+            <span
+              className={css({
+                textStyle: 'b2',
+              })}
+            >{`Size ${size}px`}</span>
+          </div>
+          <div
+            css={{
+              display: 'flex',
+              gap: 20,
+            }}
+          >
+            <Thumbnail url="https://picsum.photos/id/237/200/300" alt="cute dog" size={size} />
+            <Thumbnail url={null} alt="cute dog" size={size} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/component/Thumbnail/Thumbnail.tsx

@@ -0,0 +1,51 @@
+import { forwardRef } from 'react';
+import { cx, sva } from '../../../styled-system/css';
+
+export interface ThumbnailProps extends React.HTMLAttributes<HTMLDivElement> {
+  url: string | null;
+  alt?: string;
+  size?: number;
+}
+
+export const Thumbnail = forwardRef<HTMLDivElement, ThumbnailProps>(function Thumbnail(
+  thumbnailProps,
+  ref,
+) {
+  const { className, url, alt, size, ...props } = thumbnailProps;
+  const classes = thumbnailSlot();
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={cx(classes.root, className)}
+      style={{
+        width: size,
+        height: size,
+      }}
+    >
+      {url && <img src={url} alt={alt} className={cx(classes.image)} />}
+    </div>
+  );
+});
+
+const thumbnailSlot = sva({
+  slots: ['root', 'image'],
+  base: {
+    root: {
+      borderRadius: '4px',
+      bg: 'grey.30',
+      boxShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden',
+    },
+    image: {
+      objectFit: 'cover',
+      borderRadius: '4px',
+      width: '100%',
+      height: '100%',
+    },
+  },
+});