Merge pull request #95 from SOPT-36-NINEDOT/feat/#87/aiFailModal

[Feat]: AI 추천 실패 모달 구현

Author: jisooooooooooo

src/common/component/AiFailModal/AiFailModal.css.ts

@@ -0,0 +1,55 @@
+import { style } from '@vanilla-extract/css';
+
+import { colors } from '@/style/token/color.css';
+import { fonts } from '@/style/token/typography.css';
+
+export const modalContainer = style({
+  display: 'inline-flex',
+  padding: '4rem',
+  flexDirection: 'column',
+  alignItems: 'center',
+  borderRadius: '16px',
+  background: colors.grey3,
+});
+
+export const contentWrapper = style({
+  width: '55.6rem',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const iconWrapper = style({
+  marginLeft: 'auto',
+});
+
+export const closeIcon = style({
+  width: '3.2rem',
+  height: '3.2rem',
+  cursor: 'pointer',
+});
+
+export const textWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '1.6rem',
+});
+
+export const title = style({
+  color: colors.grey11,
+  textAlign: 'center',
+  ...fonts.display02,
+});
+
+export const description = style({
+  color: colors.grey7,
+  textAlign: 'center',
+  ...fonts.subtitle06,
+});
+
+export const buttonWrapper = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginTop: '5rem',
+});

src/common/component/AiFailModal/AiFailModal.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import AiFailModal from './AiFailModal';
+
+const meta: Meta<typeof AiFailModal> = {
+  title: 'Common/AiFailModal',
+  component: AiFailModal,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof AiFailModal>;
+
+export const Default: Story = {};

src/common/component/AiFailModal/AiFailModal.tsx

@@ -0,0 +1,29 @@
+import * as styles from './AiFailModal.css';
+
+import MandalButton from '@/common/component/Button/Button';
+import { IcModalDelete } from '@/assets/svg';
+
+interface AiFailModalProps {
+  onClose: () => void;
+}
+
+const AiFailModal = ({ onClose }: AiFailModalProps) => {
+  return (
+    <div className={styles.modalContainer}>
+      <div className={styles.contentWrapper}>
+        <button type="button" className={styles.iconWrapper} onClick={onClose}>
+          <IcModalDelete className={styles.closeIcon} />
+        </button>
+        <div className={styles.textWrapper}>
+          <h2 className={styles.title}>AI 추천 실패</h2>
+          <p className={styles.description}>다시 한 번 시도해주세요.</p>
+        </div>
+        <div className={styles.buttonWrapper}>
+          <MandalButton text="다시 시도" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AiFailModal;

src/common/component/AiRecommendModal/AiRecommendModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import * as styles from './AiRecommendModal.css';
-import MandalButton from '../MandalButton/MandalButton';
+import MandalButton from '../Button/Button';
 
 import { IcModalDelete, IcCheckboxDefault, IcCheckboxChecked } from '@/assets/svg';
 
@@ -72,7 +72,7 @@ const AiRecommendModal = ({ onClose }: AiRecommendModalProps) => {
             })}
         </div>
         <div className={styles.buttonWrapper}>
-          <MandalButton />
+          <MandalButton text="내 만다라트에 넣기" />
         </div>
       </div>
     </div>

…mponent/MandalButton/MandalButton.css.ts src/common/component/Button/Button.css.tssrc/common/component/MandalButton/MandalButton.css.ts renamed to src/common/component/Button/Button.css.ts src/common/component/MandalButton/MandalButton.css.ts renamed to src/common/component/Button/Button.css.ts

@@ -0,0 +1,11 @@
+import * as styles from './Button.css';
+
+type MandalButtonProps = {
+  text: string;
+};
+
+const MandalButton = ({ text }: MandalButtonProps) => {
+  return <button className={styles.buttonContainer}>{text}</button>;
+};
+
+export default MandalButton;