feat: (#713) 이미지 모달 초기 셋팅

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" />
+ ),
+};

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>
+ );
+}

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%;
+`;