feat: Modal UI shared Component 완성 [DF-78]

src/app/styles/index.ts

@@ -1,2 +1,2 @@
 export * from './globalText.css'
-export * from './reset.css'
+export * from './reset.css'

src/shared/lib/hooks/useModal.ts

@@ -0,0 +1,85 @@
+import {
+    IExtendedModalConfig,
+    IModalConfig,
+    IModalReturn,
+} from '@/shared/types/modal.types'
+import { useState } from 'react'
+
+const defaultModalConfig: IModalConfig = {
+    open: false,
+    btnSize: 24,
+    outerTouchClose: true,
+}
+
+/**
+ * 동적 모달 관리를 위한 커스텀 훅
+ * @param {IExtendedModalConfig} config 모달 기본 설정을 할 수 있는 객체(optional)
+ * - [open=false]: 모달이 열려있는지 여부
+ * - [showCloseButton=true]: 모달 내부 버튼 유무
+ * - [btnSize=24]: 모달 내부 버튼 크기 (24, 32 only)
+ * @returns 모달 설정을 변경할 수 있는 객체
+ * - {void} toggleModal: 모달을 열거나 닫는 함수
+ * - {void} showModal: 모달을 열어주는 함수
+ * - {void} hideModal: 모달을 닫아주는 함수
+ * - {void} updateModalConfig: 모달 설정을 업데이트하는 함수
+ * - {object} modalConfig: 모달 설정 - 세부 타입 IModalConfig 참고
+ */
+
+const useModal = (config?: IModalConfig): IModalReturn => {
+    const [modalConfig, setModalConfig] = useState<IModalConfig>({
+        ...defaultModalConfig,
+        ...config,
+    })
+
+    // 모달을 열거나 닫는 함수
+    const toggleModal = () => {
+        setModalConfig((prev) => {
+            return {
+                ...prev,
+                open: !prev.open,
+            }
+        })
+    }
+    // 모달을 열어주는 함수
+    const showModal = () => {
+        setModalConfig((prev) => {
+            return {
+                ...prev,
+                open: true,
+            }
+        })
+    }
+    // 모달을 닫아주는 함수
+    const hideModal = () => {
+        setModalConfig((prev) => {
+            return {
+                ...prev,
+                open: false,
+            }
+        })
+    }
+    // 모달 설정을 업데이트하는 함수
+    const updateModalConfig = (config: Partial<IModalConfig>) => {
+        setModalConfig((prev) => {
+            return {
+                ...prev,
+                ...config,
+            }
+        })
+    }
+    // 닫기 함수 사용을 위한 모달 설정을 확장
+    const extendConfig: IExtendedModalConfig = {
+        ...modalConfig,
+        handleClose: hideModal,
+    }
+    // 모달 설정과 함수들을 반환
+    return {
+        toggleModal,
+        showModal,
+        hideModal,
+        updateModalConfig,
+        modalConfig: extendConfig,
+    }
+}
+
+export { useModal }

src/shared/types/modal.types.ts

@@ -0,0 +1,25 @@
+export interface IModalConfig {
+    // 모달이 열려있는지 여부
+    open?: boolean
+    // 모달 내부 버튼 유무
+    showCloseButton?: boolean
+    // 모달 내부 버튼 크기
+    btnSize?: 24 | 32
+    // 외부 클릭으로 모달 닫기
+    outerTouchClose?: boolean
+}
+
+export interface IModalReturn {
+    // @shared/lib/hooks/useModal 참고
+    toggleModal: () => void
+    showModal: () => void
+    hideModal: () => void
+    updateModalConfig: (config: Partial<IModalConfig>) => void
+    modalConfig: IExtendedModalConfig
+}
+// close 추가한 모달 설정
+export interface IExtendedModalConfig extends IModalConfig {
+    handleClose: () => void
+}
+
+export type ModalProps = Readonly<IExtendedModalConfig>

src/shared/ui/Box/Box.tsx

@@ -1,21 +1,20 @@
 import { Sprinkles, sprinkles } from '@/app/sprinkle/sprinkle.css'
-import { AllHTMLAttributes, ElementType, forwardRef } from 'react'
-
-export interface BoxProps 
-extends Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'color'>, Sprinkles {
-    children?: React.ReactNode // 하위 React 노드
-    className?: string // 클래스 이름
-    as?: ElementType // HTML 엘리먼트 타입 (기본값: div)
-}
+import { forwardRef } from 'react'
+import { BoxProps } from './box.types'
 
 /**
  * Box 컴포넌트는 shared UI 컴포넌트 중 가장 기본이 되는 컴포넌트입니다.
- * @param as HTML 엘리먼트 타입 (기본값: div)
- * @param children 하위 React 노드
- * @param className 클래스 이름
- * @param props Sprinkles 속성 및 기타 속성
- * @returns Box 컴포넌트
+ * @param {string} [as = 'div'] HTML 엘리먼트 타입(optional)
+ * @param {ReactNode} children 하위 React 노드(optional)
+ * @param {string} className 클래스 이름(optional)
+ * @param {any} props Sprinkles 속성 및 기타 속성
+ * @returns {JsxElement} Box 컴포넌트
+ * @example
+ * <Box as={'div' | 'span' | ...} className="example"">
+ *    <p>example</p>
+ * </Box>
  */
+
 export const Box = forwardRef<HTMLElement, BoxProps>(
     (
         {

src/shared/ui/Box/box.types.ts

@@ -0,0 +1,12 @@
+import { AllHTMLAttributes, ElementType } from 'react'
+import { Sprinkles } from '@/app/sprinkle/sprinkle.css'
+
+export interface IBox
+    extends Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'color'>,
+        Sprinkles {
+    children?: React.ReactNode // 하위 React 노드
+    className?: string // 클래스 이름
+    as?: ElementType // HTML 엘리먼트 타입 (기본값: div)
+}
+
+export type BoxProps = Readonly<IBox>

src/shared/ui/Box/index.ts

@@ -1 +1,2 @@
-export * from './Box'
+export * from './Box'
+export * from './box.types'

src/shared/ui/Modal/Modal.tsx

@@ -0,0 +1,49 @@
+import { IExtendedModalConfig } from '@/shared/types/modal.types'
+import { Box } from '../Box'
+import { modalBackdrop, modalContent } from './modal.css'
+
+/**
+ *  공용 모달 컴포넌트
+ * @param {ReactNode} children 모달 내부에 들어갈 컨텐츠 (optional)
+ * @parms modalConfig 모달 설정 - useModal에서 반환된 modalConfig
+ * @returns {JsxElement}닫기 버튼이 존재하지 않는 모달
+ * @example
+ * const { modalConfig, toggleModal } = useModal({ open: true });
+ * <Modal modalConfig={modalConfig}>
+ *    <p>example</p>
+ *    <button onClick={toggleModal}>toggle</button>
+ * </Modal>
+ */
+
+export default function Modal({
+    children,
+    modalConfig,
+}: Readonly<{
+    children?: React.ReactNode
+    modalConfig: IExtendedModalConfig
+}>) {
+    if (modalConfig.open === false) return null
+    return (
+        <Box
+            as={'div'}
+            onClick={() =>
+                modalConfig.outerTouchClose && modalConfig.handleClose()
+            }
+            role="presentation"
+            className={modalBackdrop}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+        >
+            <Box
+                as={'dialog'}
+                onClick={(e) => e.stopPropagation()}
+                className={modalContent}
+                display="flex"
+                flexDirection="column"
+            >
+                {children}
+            </Box>
+        </Box>
+    )
+}

src/shared/ui/Modal/modal.css.ts

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css'
+
+export const modalBackdrop = style({
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+})
+
+export const modalContent = style({
+    minWidth: '300px',
+    backgroundColor: 'white',
+    borderRadius: '4px',
+})