carrot-stick · seounjin · Mar 30, 2024 · Mar 31, 2024 · Mar 31, 2024 · yoycode
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,14 +1,21 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended', 'plugin:storybook/recommended'],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended",
+    "plugin:storybook/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
+    "@typescript-eslint/no-unnecessary-type-constraint": "warn",
   },
-}
+};
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -0,0 +1 @@
+<div id="modal"></div>
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
     <title>Vite + React + TS</title>
   </head>
   <body>
+    <div id="modal"></div>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/src/components/Modal/Modal.body.tsx b/src/components/Modal/Modal.body.tsx
@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+
+const ModalBody = ({ children }: PropsWithChildren) => {
+  return <div id="modal-description">{children}</div>;
+};
+
+export default ModalBody;
diff --git a/src/components/Modal/Modal.context.ts b/src/components/Modal/Modal.context.ts
@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+export interface SelectContextTypes {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ModalContext = createContext<SelectContextTypes | null>(null);
diff --git a/src/components/Modal/Modal.footer.tsx b/src/components/Modal/Modal.footer.tsx
@@ -0,0 +1,8 @@
+import { PropsWithChildren } from "react";
+import { Footer } from "./Modal.styles";
+
+const ModalFooter = ({ children }: PropsWithChildren) => {
+  return <Footer>{children}</Footer>;
+};
+
+export default ModalFooter;
diff --git a/src/components/Modal/Modal.header.tsx b/src/components/Modal/Modal.header.tsx
@@ -0,0 +1,8 @@
+import { PropsWithChildren } from "react";
+import { Header } from "./Modal.styles";
+
+const ModalHeader = ({ children }: PropsWithChildren) => {
+  return <Header id="title-dialog">{children}</Header>;
+};
+
+export default ModalHeader;
diff --git a/src/components/Modal/Modal.hooks.ts b/src/components/Modal/Modal.hooks.ts
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { ModalContext } from "./Modal.context";
+
+export const useModalContext = () => {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error("컴포넌트에 필요한 컨텍스트가 없습니다.");
+  }
+  return context;
+};
diff --git a/src/components/Modal/Modal.layout.tsx b/src/components/Modal/Modal.layout.tsx
@@ -0,0 +1,24 @@
+import { useModalContext } from "./Modal.hooks";
+import * as S from "./Modal.styles";
+import { PropsWithChildren } from "react";
+
+interface ModalLayoutProps extends PropsWithChildren {}
+
+const ModalLayout = ({ children }: ModalLayoutProps) => {
+  const { isOpen, onClose } = useModalContext();
+
+  return isOpen ? (
+    <S.Layout
+      role="dialog"
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <S.Overlay aria-hidden={true} onClick={onClose} />
+      <S.Content role="document" tabIndex={-1}>
+        {children}
+      </S.Content>
+    </S.Layout>
+  ) : null;
+};
+
+export default ModalLayout;
diff --git a/src/components/Modal/Modal.portal.tsx b/src/components/Modal/Modal.portal.tsx
@@ -0,0 +1,14 @@
+import { PropsWithChildren } from "react";
+import { createPortal } from "react-dom";
+
+const ModalPortal = ({ children }: PropsWithChildren) => {
+  const container = document.getElementById("modal");
+
+  if (container === null) {
+    return null;
+  }
+
+  return createPortal(children, container);
+};
+
+export default ModalPortal;
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Modal, { ModalProps } from "./Modal";
+import Button from "../Button/Button";
+import { useState } from "react";
+
+const meta: Meta<typeof Modal> = {
+  title: "Components/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+
+export const ExampleModal: StoryObj<ModalProps> = {
+  args: {},
+  render: () => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const onConfirm = () => {
+      setIsOpen(false);
+    };
+
+    const onOpen = () => {
+      setIsOpen(true);
+    };
+
+    const onClose = () => {
+      setIsOpen(false);
+    };
+
+    return (
+      <>
+        <Button size="md" variant="primary" color="gray" onClick={onOpen}>
+          모달버튼
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <Modal.Header>제목</Modal.Header>
+          <Modal.Body>
+            모달 컴포넌트 입니다.
+            <br />
+            모달 컴포넌트 입니다.
+            <br />
+            모달 컴포넌트 입니다.
+          </Modal.Body>
+          <Modal.Footer>
+            <Button
+              aria-label="modal open"
+              size="sm"
+              variant="primary"
+              color="gray"
+              onClick={onConfirm}
+            >
+              Open
+            </Button>
+            <Button
+              aria-label="modal close"
+              size="sm"
+              variant="outline"
+              color="gray"
+              onClick={onClose}
+            >
+              Close
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </>
+    );
+  },
+};
diff --git a/src/components/Modal/Modal.styles.ts b/src/components/Modal/Modal.styles.ts
@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import theme from "../../styles";
+
+export const Layout = styled.div`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  background-color: rgb(0, 0, 0, 0.6);
+`;
+
+export const Overlay = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Content = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  width: 100%;  
+  max-width: 380px;  
+  padding: 20px;
+  border-radius: 10px;
+  background-color: ${theme.colors.sjWhite}};
+`;
+
+export const Header = styled.header`
+  font-size: 20px;
+  font-weight: 600;
+`;
+
+export const Footer = styled.footer`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+`;
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -0,0 +1,28 @@
+import ModalLayout from "./Modal.layout";
+import ModalPortal from "./Modal.portal";
+import ModalHeader from "./Modal.header";
+import ModalBody from "./Modal.body";
+import ModalFooter from "./Modal.footer";
+import { PropsWithChildren } from "react";
+import { ModalContext } from "./Modal.context";
+
+export interface ModalProps extends PropsWithChildren {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const Modal = ({ children, isOpen, onClose }: ModalProps) => {
+  return (
+    <ModalContext.Provider value={{ isOpen, onClose }}>
+      <ModalPortal>
+        <ModalLayout>{children}</ModalLayout>
+      </ModalPortal>
+    </ModalContext.Provider>
+  );
+};
+
+export default Modal;
+
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
diff --git a/src/components/Select/Input.tsx b/src/components/Select/Input.tsx
@@ -0,0 +1,32 @@
+import { ChangeEvent, useEffect, useState } from "react";
+import { useSelectContext } from "./Select.hooks";
+import { StyledInput } from "./Select.styles";
+
+const Input = () => {
+  const [value, setValue] = useState<string>("");
+  const { option, setIsOpen, onInputChange } = useSelectContext();
+
+  useEffect(() => {
+    setValue(option);
+  }, [option]);
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+    if (onInputChange) {
+      onInputChange(event);
+    }
+
+    setValue(inputValue);
+  };
+
+  return (
+    <StyledInput
+      value={value}
+      onChange={onChange}
+      onFocus={() => setIsOpen(true)}
+      onBlur={() => setIsOpen(false)}
+    />
+  );
+};
+
+export default Input;
diff --git a/src/components/Select/Option.tsx b/src/components/Select/Option.tsx
@@ -1,13 +1,16 @@
 import * as S from "./Select.styles";
 import { ReactNode } from "react";
 import { useSelectContext } from "./Select.hooks";
+import useId from "../../hooks/useId";
 
 export interface OptionProps {
   children?: ReactNode;
   value: string;
 }
 
 const Option = ({ children, value }: OptionProps) => {
+  const id = useId();
+
   const { setIsOpen, setOption, onSelect } = useSelectContext();
 
   const handleOption = () => {
@@ -16,7 +19,11 @@ const Option = ({ children, value }: OptionProps) => {
     setIsOpen(false);
   };
 
-  return <S.OptionItem onMouseDown={handleOption}>{children}</S.OptionItem>;
+  return (
+    <S.OptionItem id={`listbox-option-${id}`} onMouseDown={handleOption}>
+      {children}
+    </S.OptionItem>
+  );
 };
 
 export default Option;
diff --git a/src/components/Select/Select.context.ts b/src/components/Select/Select.context.ts
@@ -1,11 +1,13 @@
-import { Dispatch, SetStateAction, createContext } from "react";
+import { ChangeEvent, Dispatch, SetStateAction, createContext } from "react";
 
 export interface SelectContextTypes {
   isOpen: boolean;
   option: string;
+  itemList?: Array<string>;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
   setOption: Dispatch<SetStateAction<string>>;
-  onSelect: (value: string) => void;
+  onSelect: (props: string) => void;
+  onInputChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const SelectContext = createContext<SelectContextTypes | null>(null);
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -1,7 +1,7 @@
 import Select, { SelectProps } from "./Select";
 import { Meta, StoryObj } from "@storybook/react";
 import { StoryBookFlex } from "./Select.styles";
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 
 const meta: Meta<typeof Select> = {
   title: "Components/Select",
@@ -45,3 +45,30 @@ export const ExampleSelect: StoryObj<SelectProps> = {
     );
   },
 };
+
+const ITEM_LIST = ["React", "Next.js", "TypeScript"];
+
+export const ExampleComboBox: StoryObj<SelectProps> = {
+  args: {},
+  render: (args) => {
+    const [itemList, setItemList] = useState<Array<string>>(ITEM_LIST);
+    const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      const filterItem = itemList.filter((item) => item === value);
+      setItemList(filterItem.length > 0 ? filterItem : ITEM_LIST);
+    };
+
+    return (
+      <Select {...args} itemList={ITEM_LIST} onInputChange={onInputChange}>
+        <Select.Input />
+        <Select.OptionList>
+          {itemList.map((item) => (
+            <Select.Option key={item} value={item}>
+              {item}
+            </Select.Option>
+          ))}
+        </Select.OptionList>
+      </Select>
+    );
+  },
+};