feat: ✨ LevelModal 컴포넌트 이관

src/components/mypage/LevelModal/LevelModal.stories.tsx

@@ -0,0 +1,58 @@
+import { ILevel } from '@/types';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useState } from 'react';
+
+import LevelModal from './LevelModal';
+
+const LEVEL_DATA: ILevel[] = [
+  {
+    id: 1,
+    tier: 1,
+    imageUrl: 'https://cdn.pixabay.com/photo/2016/04/24/14/19/paper-1349664_1280.png',
+    req: 0,
+  },
+  {
+    id: 2,
+    tier: 2,
+    imageUrl: 'https://cdn.pixabay.com/photo/2016/04/24/14/19/paper-1349664_1280.png',
+    req: 1,
+  },
+  {
+    id: 3,
+    tier: 3,
+    imageUrl: 'https://cdn.pixabay.com/photo/2016/04/24/14/19/paper-1349664_1280.png',
+    req: 5,
+  },
+  {
+    id: 4,
+    tier: 4,
+    imageUrl: 'https://cdn.pixabay.com/photo/2016/04/24/14/19/paper-1349664_1280.png',
+    req: 12,
+  },
+  {
+    id: 5,
+    tier: 5,
+    imageUrl: 'https://cdn.pixabay.com/photo/2016/04/24/14/19/paper-1349664_1280.png',
+    req: 20,
+  },
+];
+
+export default {
+  title: 'Components/mypage/LevelModal',
+  component: LevelModal,
+} as ComponentMeta<typeof LevelModal>;
+
+const Template: ComponentStory<typeof LevelModal> = () => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <LevelModal
+      isLevelModalOpen={isOpen}
+      openLevelModal={() => setIsOpen(true)}
+      closeLevelModal={() => setIsOpen(false)}
+      levelData={LEVEL_DATA}
+    />
+  );
+};
+
+export const Default = Template.bind({});

src/components/mypage/LevelModal/LevelModal.tsx

@@ -0,0 +1,98 @@
+import styled from '@emotion/styled';
+
+import ModalLayout from '@/components/layouts/ModalLayout';
+import Icon from '@/components/commons/Icon';
+import { ILevel } from '@/types';
+
+const LEVEL_MODAL_TITLE = 'Level 안내';
+
+interface Props {
+  isLevelModalOpen: boolean;
+  openLevelModal: () => void;
+  closeLevelModal: () => void;
+  levelData: ILevel[];
+}
+
+const LevelModal = ({ isLevelModalOpen, closeLevelModal, levelData }: Props) => {
+  if (!levelData) {
+    return null;
+  }
+
+  return (
+    <ModalLayout open={isLevelModalOpen} onDimClick={closeLevelModal}>
+      <StyleLevelModal open={isLevelModalOpen}>
+        <Header>
+          <CloseIcon name="Close" size={24} onClick={closeLevelModal} />
+          <Title>{LEVEL_MODAL_TITLE}</Title>
+        </Header>
+        <LevelList>
+          {levelData.map(({ id, imageUrl, req, tier }) => (
+            <LevelListItem key={id}>
+              <img src={imageUrl} alt={tier.toString()} width="64px" height="auto" />
+              <p>
+                Level {tier} : 기록한 티켓 {req}개 이상
+              </p>
+            </LevelListItem>
+          ))}
+        </LevelList>
+      </StyleLevelModal>
+    </ModalLayout>
+  );
+};
+
+export default LevelModal;
+
+const StyleLevelModal = styled.div<{ open: boolean }>`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+  padding: 16px;
+  border-radius: 12px;
+  background-color: ${(p) => p.theme.color.white};
+
+  ${(p) => !p.open && `display:none;`}
+`;
+
+const Header = styled.div`
+  position: relative;
+  width: 100%;
+  margin-bottom: 25px;
+`;
+
+const Title = styled.h1`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
+  color: #323232;
+`;
+
+const CloseIcon = styled(Icon)`
+  cursor: pointer;
+`;
+
+const LevelList = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 40px;
+  margin-bottom: 8px;
+`;
+
+const LevelListItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  ${({ theme }) => theme.fonts.Body4};
+  color: ${({ theme }) => theme.color.grey4};
+`;

src/components/mypage/LevelModal/index.ts

@@ -0,0 +1 @@
+export { default } from './LevelModal';

src/types/index.ts

@@ -5,3 +5,4 @@ export type { IFeel } from './feel';
 export type { IReview } from './review';
 export type { IContinent } from './continent';
 export type { ICountry } from './country';
+export type { ILevel } from './level';

src/types/level.ts

@@ -0,0 +1,6 @@
+export interface ILevel {
+  id: number;
+  tier: number;
+  imageUrl: string;
+  req: number;
+}