feat : modal 컴포넌트 구현 완료 (#71)

* env : react-icons 설치

* feat : overlay 구축

* feat : modal 컴포넌트 구축

* feat : useModalHook 구현

* fix : 스토리북 오류 수정

package.json

@@ -12,6 +12,7 @@
         "react": "^18.3.1",
         "react-calendar": "^5.1.0",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "recharts": "^2.13.0",
         "storybook": "^8.3.0",
         "styled-components": "^6.1.13",

src/entities/chart/ui/Chart.stories.tsx

@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Chart from './Chart';
+import {
+  DailyEmotionType,
+} from '@/shared/model/moodTypes';
 
 const meta: Meta<typeof Chart> = {
   component: Chart,
@@ -11,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof Chart>;
 
-const dailyEmotionData = [
+const dailyEmotionData : DailyEmotionType[]  = [
   { day: 'Mon' as const, mood: null },
   { day: 'Tue' as const, mood: '나쁨' },
   { day: 'Wed' as const, mood: '나쁨' },

src/shared/hooks/useModal.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import Modal from '../ui/Modal/Modal';
+
+/**
+ * @param openModal 모달을 여는 함수입니다.
+ * @param ModalComponent 모달 컴포넌트 입니다. 모달 안에  jsx 요소를 넣어 모달 컨텐츠로 쓸 수 있습니다.
+ */
+function useModal() {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const openModal = () => setIsOpen(true);
+    const closeModal = () => setIsOpen(false);
+    const ModalComponent = ({ children }: { children: React.ReactNode }) =>
+        isOpen ? <Modal clickEvent={closeModal}>{children}</Modal> : null;
+
+    return {
+        openModal,
+        ModalComponent
+    };
+}
+
+export default useModal;

src/shared/ui/Modal/Modal.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+import React from 'react';
+
+const meta: Meta<typeof Modal> = {
+  component: Modal,
+  title: 'Shaerd/ui/Modal',
+  tags: ['autodocs'],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+    children : <>즐겁다</>
+  },
+};

src/shared/ui/Modal/Modal.styled.ts

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const ModalStyled = styled.div`
+    background: white;
+    width: 370px;
+    height: 200px;
+    border-radius: 20px;
+    box-shadow: inset;
+    padding: 8px;
+    position: relative;
+    h1 {
+        margin-bottom: 30px;
+    }
+    svg {
+        font-size: 30px;
+        position: absolute;
+        top: 18px;
+        right: 20px;
+        color: #838383;
+    }
+`;
+
+export const ModalContent = styled.div`
+    margin: 14px 0px 0px 40px;
+`;

src/shared/ui/Modal/Modal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Overlay from '../Overlay/Overlay';
+import { ModalStyled, ModalContent } from './Modal.styled';
+import { IoCloseOutline } from 'react-icons/io5';
+
+interface ModalProps {
+    children: React.ReactNode;
+    clickEvent: React.MouseEventHandler<HTMLOrSVGElement>;
+}
+
+const Modal = ({ children, clickEvent }: ModalProps) => {
+    return (
+        <Overlay>
+            <ModalStyled>
+                <IoCloseOutline onClick={clickEvent} />
+                <ModalContent>{children}</ModalContent>
+            </ModalStyled>
+        </Overlay>
+    );
+};
+
+export default Modal;

src/shared/ui/Overlay/Overlay.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Overlay from './Overlay';
+
+const meta: Meta<typeof Overlay> = {
+  component: Overlay,
+  title: 'Shaerd/ui/Overlay',
+  tags: ['autodocs'],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Overlay>;
+
+export const Default: Story = {
+  args: {},
+};

src/shared/ui/Overlay/Overlay.styled.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const OverlayStyled = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;

src/shared/ui/Overlay/Overlay.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { OverlayStyled } from './Overlay.styled';
+
+interface OverlayProps {
+    children: React.ReactNode;
+}
+
+const Overlay = ({ children }: OverlayProps) => {
+    return <OverlayStyled>{children}</OverlayStyled>;
+};
+
+export default Overlay;

yarn.lock

@@ -7710,6 +7710,11 @@ react-element-to-jsx-string@^15.0.0:
     is-plain-object "5.0.0"
     react-is "18.1.0"
 
+react-icons@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.3.0.tgz#ccad07a30aebd40a89f8cfa7d82e466019203f1c"
+  integrity sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==
+
 [email protected]:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"