From 823bf6f6f477f7e5f6d3f4bed2dec783016975a0 Mon Sep 17 00:00:00 2001
From: gilpop8663 <wolfye@naver.com>
Date: Thu, 5 Oct 2023 15:19:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20(#713)=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=B4=88=EA=B8=B0=20=EC=85=8B=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/Image/Image.stories.tsx   | 16 ++++++++++++++++
 frontend/src/components/common/Image/index.tsx  | 17 +++++++++++++++++
 frontend/src/components/common/Image/style.ts   |  6 ++++++
 3 files changed, 39 insertions(+)
 create mode 100644 frontend/src/components/common/Image/Image.stories.tsx
 create mode 100644 frontend/src/components/common/Image/index.tsx
 create mode 100644 frontend/src/components/common/Image/style.ts

diff --git a/frontend/src/components/common/Image/Image.stories.tsx b/frontend/src/components/common/Image/Image.stories.tsx
new file mode 100644
index 000000000..0ffd43a15
--- /dev/null
+++ b/frontend/src/components/common/Image/Image.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Image from '.';
+
+const meta: Meta<typeof Image> = {
+  component: Image,
+};
+
+export default meta;
+type Story = StoryObj<typeof Image>;
+
+export const Category: Story = {
+  render: () => (
+    <Image src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FE2Q2S%2FbtswcHwhtdY%2FCKuiznZAZeKA72CyK0c8Y0%2Fimg.png" />
+  ),
+};
diff --git a/frontend/src/components/common/Image/index.tsx b/frontend/src/components/common/Image/index.tsx
new file mode 100644
index 000000000..17d29a37b
--- /dev/null
+++ b/frontend/src/components/common/Image/index.tsx
@@ -0,0 +1,17 @@
+import Modal from '../Modal';
+
+import * as S from './style';
+
+interface ImageModalProps {
+  src: string;
+}
+
+export default function Image({ src }: ImageModalProps) {
+  return (
+    <Modal size="lg" onModalClose={() => {}}>
+      <div>
+        <S.Image src={src}></S.Image>;
+      </div>
+    </Modal>
+  );
+}
diff --git a/frontend/src/components/common/Image/style.ts b/frontend/src/components/common/Image/style.ts
new file mode 100644
index 000000000..06cc562d3
--- /dev/null
+++ b/frontend/src/components/common/Image/style.ts
@@ -0,0 +1,6 @@
+import { styled } from 'styled-components';
+
+export const Image = styled.img`
+  width: 100%;
+  height: 100%;
+`;