From 586fc3e189c9945e3027534ebb2302d35aec011c Mon Sep 17 00:00:00 2001 From: donghunee Date: Sat, 6 Jul 2024 15:27:57 +0900 Subject: [PATCH 01/23] =?UTF-8?q?feat:=20#2=20useModal=20hook=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/MainPage.tsx | 16 ++++++++++++---- src/hooks/useModal.ts | 21 +++++++++++++++++++++ 2 files changed, 33 insertions(+), 4 deletions(-) create mode 100644 src/hooks/useModal.ts diff --git a/src/app/MainPage.tsx b/src/app/MainPage.tsx index 4df87f27..02909451 100644 --- a/src/app/MainPage.tsx +++ b/src/app/MainPage.tsx @@ -2,14 +2,22 @@ import { useAtom } from "jotai"; import { messageAtom } from "@/store/messageAtom.tsx"; +import Modal from "@/component/common/modal/Modal"; +import useModal from "@/hooks/useModal"; function MainPage() { const [message] = useAtom(messageAtom); + const { open, close, isOpen } = useModal(); return ( -
- welcome to layer ๐ŸŽ‡ -
{message}
-
+ <> +
+ welcome to layer ๐ŸŽ‡ +
{message}
+
+ +
๋ƒ ๋ƒ 
+ + ); } diff --git a/src/hooks/useModal.ts b/src/hooks/useModal.ts new file mode 100644 index 00000000..6c56e6b8 --- /dev/null +++ b/src/hooks/useModal.ts @@ -0,0 +1,21 @@ +import { useCallback, useState } from "react"; + +const useModal = () => { + const [isOpen, setIsOpen] = useState(false); + + const open = useCallback(() => { + setIsOpen(true); + }, []); + + const close = useCallback(() => { + setIsOpen(false); + }, []); + + return { + open, + close, + isOpen, + }; +}; + +export default useModal; From 1e00004537b0a153d36420aaf7ad3e011d3eaf07 Mon Sep 17 00:00:00 2001 From: donghunee Date: Sat, 6 Jul 2024 16:21:56 +0900 Subject: [PATCH 02/23] =?UTF-8?q?feat:=20Modal=20Componet=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/modal/Modal.tsx | 82 ++++++++++++++++++++++ src/component/common/modal/ModalPortal.tsx | 13 ++++ 2 files changed, 95 insertions(+) create mode 100644 src/component/common/modal/Modal.tsx create mode 100644 src/component/common/modal/ModalPortal.tsx diff --git a/src/component/common/modal/Modal.tsx b/src/component/common/modal/Modal.tsx new file mode 100644 index 00000000..f959b8dc --- /dev/null +++ b/src/component/common/modal/Modal.tsx @@ -0,0 +1,82 @@ +import ModalPortal from "@/component/common/modal/ModalPortal"; +import { css } from "@emotion/react"; +import { memo, useEffect, useRef } from "react"; + +interface Props { + isModalOpen: boolean; + onClose: () => void; + children?: React.ReactNode; +} + +function Modal({ onClose, isModalOpen, children }: Props) { + const modalRef = useRef(null); + + // ๋ชจ๋‹ฌ ์˜คํ”ˆ ์‹œ ์Šคํฌ๋กค ๋ฐฉ์ง€ + useEffect(() => { + document.body.style.overflow = isModalOpen ? "hidden" : "auto"; + }, [isModalOpen]); + + // ๋ชจ๋‹ฌ ์˜คํ”ˆ ์‹œ ๋’ค๋กœ๊ฐ€๊ธฐ ๋ฐฉ์ง€ (๊ณ ๋ฏผ์ค‘) + useEffect(() => { + const preventGoBack = () => { + history.go(1); + onClose(); + }; + + history.pushState(null, "", location.href); + window.addEventListener("popstate", preventGoBack); + + return () => window.removeEventListener("popstate", preventGoBack); + }, [onClose]); + + // ๋ชจ๋‹ฌ ์˜์—ญ ์ด์™ธ ํด๋ฆญ ์‹œ ๋ชจ๋‹ฌ ๋‹ซ๊ธฐ + useEffect(() => { + const listener = (e: MouseEvent) => { + if (modalRef.current && !modalRef.current.contains(e.target as Node)) { + onClose(); + } + }; + window.addEventListener("mousedown", listener); + return () => { + window.removeEventListener("mousedown", listener); + }; + }, [onClose, modalRef]); + + if (!isModalOpen) return null; + + return ( + +
+
+ {children} +
+
+ + ); +} + +export default memo(Modal); diff --git a/src/component/common/modal/ModalPortal.tsx b/src/component/common/modal/ModalPortal.tsx new file mode 100644 index 00000000..8c77e135 --- /dev/null +++ b/src/component/common/modal/ModalPortal.tsx @@ -0,0 +1,13 @@ +import { ReactNode } from "react"; +import ReactDom from "react-dom"; + +interface Props { + children: ReactNode; +} + +const ModalPortal = ({ children }: Props) => { + const el = document.getElementById("modal-root") as HTMLElement; + return ReactDom.createPortal(children, el); +}; + +export default ModalPortal; From 225d4bd96e300fde66d6f381f1f8b75aab3255c6 Mon Sep 17 00:00:00 2001 From: donghunee Date: Sun, 7 Jul 2024 06:25:44 +0900 Subject: [PATCH 03/23] =?UTF-8?q?chore:=20#11=20modal-root=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 9206f6cf..684f610a 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@
+ From bf9619c10b2d25fc19100ef42cd56720c0355793 Mon Sep 17 00:00:00 2001 From: donghunee Date: Sun, 7 Jul 2024 11:42:57 +0900 Subject: [PATCH 04/23] =?UTF-8?q?fix:=20#11=20document=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95,=20=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/modal/Modal.tsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/src/component/common/modal/Modal.tsx b/src/component/common/modal/Modal.tsx index f959b8dc..983363f5 100644 --- a/src/component/common/modal/Modal.tsx +++ b/src/component/common/modal/Modal.tsx @@ -16,19 +16,6 @@ function Modal({ onClose, isModalOpen, children }: Props) { document.body.style.overflow = isModalOpen ? "hidden" : "auto"; }, [isModalOpen]); - // ๋ชจ๋‹ฌ ์˜คํ”ˆ ์‹œ ๋’ค๋กœ๊ฐ€๊ธฐ ๋ฐฉ์ง€ (๊ณ ๋ฏผ์ค‘) - useEffect(() => { - const preventGoBack = () => { - history.go(1); - onClose(); - }; - - history.pushState(null, "", location.href); - window.addEventListener("popstate", preventGoBack); - - return () => window.removeEventListener("popstate", preventGoBack); - }, [onClose]); - // ๋ชจ๋‹ฌ ์˜์—ญ ์ด์™ธ ํด๋ฆญ ์‹œ ๋ชจ๋‹ฌ ๋‹ซ๊ธฐ useEffect(() => { const listener = (e: MouseEvent) => { @@ -36,9 +23,9 @@ function Modal({ onClose, isModalOpen, children }: Props) { onClose(); } }; - window.addEventListener("mousedown", listener); + document.addEventListener("mousedown", listener); return () => { - window.removeEventListener("mousedown", listener); + document.removeEventListener("mousedown", listener); }; }, [onClose, modalRef]); From 23b69f08314a7c2a72f37088f4fd3ba25084dbae Mon Sep 17 00:00:00 2001 From: donghunee Date: Sun, 7 Jul 2024 11:51:59 +0900 Subject: [PATCH 05/23] =?UTF-8?q?fix:=20#11=20width,=20height=20=EB=8B=A8?= =?UTF-8?q?=EC=9C=84=20=EB=B3=80=EA=B2=BD,=20memo=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/modal/Modal.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/component/common/modal/Modal.tsx b/src/component/common/modal/Modal.tsx index 983363f5..d3013d5c 100644 --- a/src/component/common/modal/Modal.tsx +++ b/src/component/common/modal/Modal.tsx @@ -1,11 +1,11 @@ import ModalPortal from "@/component/common/modal/ModalPortal"; import { css } from "@emotion/react"; -import { memo, useEffect, useRef } from "react"; +import { ReactNode, useEffect, useRef } from "react"; interface Props { isModalOpen: boolean; onClose: () => void; - children?: React.ReactNode; + children?: ReactNode; } function Modal({ onClose, isModalOpen, children }: Props) { @@ -32,6 +32,7 @@ function Modal({ onClose, isModalOpen, children }: Props) { if (!isModalOpen) return null; return ( + // FIXME: ์ถ”ํ›„ ๋””์ž์ธ ํ† ํฐ ์—ฐ๋™ ํ›„ ์ปฌ๋Ÿฌ ๊ฐ’ ๋ณ€๊ฒฝ
Date: Mon, 8 Jul 2024 00:12:58 +0900 Subject: [PATCH 06/23] =?UTF-8?q?refactor:=20#11=20px=EC=97=90=EC=84=9C=20?= =?UTF-8?q?rem=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/modal/Modal.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/component/common/modal/Modal.tsx b/src/component/common/modal/Modal.tsx index d3013d5c..b932331f 100644 --- a/src/component/common/modal/Modal.tsx +++ b/src/component/common/modal/Modal.tsx @@ -52,12 +52,12 @@ function Modal({ onClose, isModalOpen, children }: Props) {
{children} From c572a087c66c3cfa63095ff8b293fd51b4065d8d Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 00:14:50 +0900 Subject: [PATCH 07/23] =?UTF-8?q?refactor:=20#11=20interface=EC=97=90?= =?UTF-8?q?=EC=84=9C=20type=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/modal/Modal.tsx | 4 ++-- src/component/common/modal/ModalPortal.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/component/common/modal/Modal.tsx b/src/component/common/modal/Modal.tsx index b932331f..2192f65f 100644 --- a/src/component/common/modal/Modal.tsx +++ b/src/component/common/modal/Modal.tsx @@ -2,11 +2,11 @@ import ModalPortal from "@/component/common/modal/ModalPortal"; import { css } from "@emotion/react"; import { ReactNode, useEffect, useRef } from "react"; -interface Props { +type Props = { isModalOpen: boolean; onClose: () => void; children?: ReactNode; -} +}; function Modal({ onClose, isModalOpen, children }: Props) { const modalRef = useRef(null); diff --git a/src/component/common/modal/ModalPortal.tsx b/src/component/common/modal/ModalPortal.tsx index 8c77e135..5a2de12e 100644 --- a/src/component/common/modal/ModalPortal.tsx +++ b/src/component/common/modal/ModalPortal.tsx @@ -1,9 +1,9 @@ import { ReactNode } from "react"; import ReactDom from "react-dom"; -interface Props { +type Props = { children: ReactNode; -} +}; const ModalPortal = ({ children }: Props) => { const el = document.getElementById("modal-root") as HTMLElement; From 1fce93cbd77aece327810e9b92bf7514ac23d9ea Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 00:20:24 +0900 Subject: [PATCH 08/23] =?UTF-8?q?refactor:=20#11=20PropsWithChildren=20typ?= =?UTF-8?q?e=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/modal/Modal.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/component/common/modal/Modal.tsx b/src/component/common/modal/Modal.tsx index 2192f65f..af92fbc2 100644 --- a/src/component/common/modal/Modal.tsx +++ b/src/component/common/modal/Modal.tsx @@ -1,12 +1,11 @@ import ModalPortal from "@/component/common/modal/ModalPortal"; import { css } from "@emotion/react"; -import { ReactNode, useEffect, useRef } from "react"; +import { PropsWithChildren, useEffect, useRef } from "react"; -type Props = { +type Props = PropsWithChildren<{ isModalOpen: boolean; onClose: () => void; - children?: ReactNode; -}; +}>; function Modal({ onClose, isModalOpen, children }: Props) { const modalRef = useRef(null); From 02a99fd4bc1a6ad2f76bc00be94dd9efbb933531 Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 02:22:29 +0900 Subject: [PATCH 09/23] =?UTF-8?q?feat:=20#11=20modal=20atom,=20type=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modal/modalAtom.ts | 8 ++++++++ src/types/modal.ts | 6 ++++++ 2 files changed, 14 insertions(+) create mode 100644 src/store/modal/modalAtom.ts create mode 100644 src/types/modal.ts diff --git a/src/store/modal/modalAtom.ts b/src/store/modal/modalAtom.ts new file mode 100644 index 00000000..97c210f6 --- /dev/null +++ b/src/store/modal/modalAtom.ts @@ -0,0 +1,8 @@ +import { ModalType } from "@/types/modal"; +import { atom } from "jotai"; + +export const modalState = atom({ + isOpen: false, + title: "", + content: "", +}); diff --git a/src/types/modal.ts b/src/types/modal.ts new file mode 100644 index 00000000..279ea431 --- /dev/null +++ b/src/types/modal.ts @@ -0,0 +1,6 @@ +export type ModalType = { + isOpen: boolean; + title: string; + content: JSX.Element | string; + callBack?: () => any; +}; From 37c17bd9d3802f7d2425ce839dfb2ea770345ff5 Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 02:23:52 +0900 Subject: [PATCH 10/23] =?UTF-8?q?refactor:=20#11=20modal=20component=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/MainPage.tsx | 9 ++++---- src/component/common/modal/Modal.tsx | 32 ++++++++++++++-------------- src/hooks/useModal.ts | 29 +++++++++++++++++-------- 3 files changed, 40 insertions(+), 30 deletions(-) diff --git a/src/app/MainPage.tsx b/src/app/MainPage.tsx index 02909451..639ad8ee 100644 --- a/src/app/MainPage.tsx +++ b/src/app/MainPage.tsx @@ -7,16 +7,15 @@ import useModal from "@/hooks/useModal"; function MainPage() { const [message] = useAtom(messageAtom); - const { open, close, isOpen } = useModal(); + const { open } = useModal(); + return ( <>
welcome to layer ๐ŸŽ‡ -
{message}
+
open({ title: "๋ƒ ๋ƒ ", content: "์ฉ์ฉ", callBack: () => console.log("ํ™•์ธ") })}>{message}
- -
๋ƒ ๋ƒ 
- + ); } diff --git a/src/component/common/modal/Modal.tsx b/src/component/common/modal/Modal.tsx index af92fbc2..359e8790 100644 --- a/src/component/common/modal/Modal.tsx +++ b/src/component/common/modal/Modal.tsx @@ -1,37 +1,35 @@ import ModalPortal from "@/component/common/modal/ModalPortal"; +import useModal from "@/hooks/useModal"; import { css } from "@emotion/react"; -import { PropsWithChildren, useEffect, useRef } from "react"; +import { useEffect, useRef } from "react"; -type Props = PropsWithChildren<{ - isModalOpen: boolean; - onClose: () => void; -}>; - -function Modal({ onClose, isModalOpen, children }: Props) { +function Modal() { + const { modalDataState, close } = useModal(); const modalRef = useRef(null); - // ๋ชจ๋‹ฌ ์˜คํ”ˆ ์‹œ ์Šคํฌ๋กค ๋ฐฉ์ง€ - useEffect(() => { - document.body.style.overflow = isModalOpen ? "hidden" : "auto"; - }, [isModalOpen]); - // ๋ชจ๋‹ฌ ์˜์—ญ ์ด์™ธ ํด๋ฆญ ์‹œ ๋ชจ๋‹ฌ ๋‹ซ๊ธฐ useEffect(() => { const listener = (e: MouseEvent) => { if (modalRef.current && !modalRef.current.contains(e.target as Node)) { - onClose(); + close(); } }; document.addEventListener("mousedown", listener); return () => { document.removeEventListener("mousedown", listener); }; - }, [onClose, modalRef]); + }, [close, modalRef]); + + // ๋ชจ๋‹ฌ ์˜คํ”ˆ ์‹œ ์Šคํฌ๋กค ๊ธˆ์ง€ + useEffect(() => { + document.body.style.overflow = modalDataState.isOpen ? "hidden" : "auto"; + }, [modalDataState.isOpen]); - if (!isModalOpen) return null; + if (!modalDataState.isOpen) return null; return ( // FIXME: ์ถ”ํ›„ ๋””์ž์ธ ํ† ํฐ ์—ฐ๋™ ํ›„ ์ปฌ๋Ÿฌ ๊ฐ’ ๋ณ€๊ฒฝ + // FIXME: ์ถ”ํ›„ Modal ๋””์ž์ธ ํ™•์ • ์‹œ Body ํ˜•ํƒœ ๋ณ€๊ฒฝ
- {children} +
{modalDataState.title}
+
{modalDataState.content}
+
ํ™•์ธ
diff --git a/src/hooks/useModal.ts b/src/hooks/useModal.ts index 6c56e6b8..341e074b 100644 --- a/src/hooks/useModal.ts +++ b/src/hooks/useModal.ts @@ -1,20 +1,31 @@ -import { useCallback, useState } from "react"; +import { modalState } from "@/store/modal/modalAtom"; +import { ModalType } from "@/types/modal"; +import { useAtom } from "jotai"; +import { useCallback } from "react"; const useModal = () => { - const [isOpen, setIsOpen] = useState(false); - - const open = useCallback(() => { - setIsOpen(true); - }, []); + const [modalDataState, setModalDataState] = useAtom(modalState); const close = useCallback(() => { - setIsOpen(false); - }, []); + setModalDataState({ ...modalDataState, isOpen: false }); + }, [setModalDataState]); + + const open = useCallback( + ({ content, title, callBack }: Omit) => { + setModalDataState({ + isOpen: true, + title, + content, + callBack, + }); + }, + [setModalDataState], + ); return { open, close, - isOpen, + modalDataState, }; }; From 0883825a75cc48ff1df44747561abdf1ba7b8021 Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 20:30:09 +0900 Subject: [PATCH 11/23] =?UTF-8?q?refactor:=20callback=20type=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/modal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/modal.ts b/src/types/modal.ts index 279ea431..8043ecf1 100644 --- a/src/types/modal.ts +++ b/src/types/modal.ts @@ -2,5 +2,5 @@ export type ModalType = { isOpen: boolean; title: string; content: JSX.Element | string; - callBack?: () => any; + callBack?: () => void; }; From 70696409c01270c6d98d83b7d7b4e889a0c3d494 Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 20:35:25 +0900 Subject: [PATCH 12/23] =?UTF-8?q?refactor:=20#11=20useEffect=20=EC=9D=98?= =?UTF-8?q?=EC=A1=B4=EC=84=B1=20=EB=B0=B0=EC=97=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/modal/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/common/modal/Modal.tsx b/src/component/common/modal/Modal.tsx index 359e8790..50189c8c 100644 --- a/src/component/common/modal/Modal.tsx +++ b/src/component/common/modal/Modal.tsx @@ -18,7 +18,7 @@ function Modal() { return () => { document.removeEventListener("mousedown", listener); }; - }, [close, modalRef]); + }, []); // ๋ชจ๋‹ฌ ์˜คํ”ˆ ์‹œ ์Šคํฌ๋กค ๊ธˆ์ง€ useEffect(() => { From 31eda1cb41c5ae5628a5c01acb1799312b590810 Mon Sep 17 00:00:00 2001 From: klmhyeonwoo Date: Mon, 8 Jul 2024 20:58:56 +0900 Subject: [PATCH 13/23] fix: fix prettier format --- src/component/Button/Button.tsx | 46 +++++++++++++++++++++++++ src/component/Button/ButtonProvider.tsx | 45 ++++++++++++++++++++++++ src/layout/DefaultLayout.tsx | 0 src/layout/GlobalLayout.tsx | 0 src/layout/default.tsx | 17 --------- src/style/global.css | 10 +++--- 6 files changed, 96 insertions(+), 22 deletions(-) create mode 100644 src/component/Button/Button.tsx create mode 100644 src/component/Button/ButtonProvider.tsx create mode 100644 src/layout/DefaultLayout.tsx create mode 100644 src/layout/GlobalLayout.tsx delete mode 100644 src/layout/default.tsx diff --git a/src/component/Button/Button.tsx b/src/component/Button/Button.tsx new file mode 100644 index 00000000..37bce80e --- /dev/null +++ b/src/component/Button/Button.tsx @@ -0,0 +1,46 @@ +import { css } from "@emotion/react"; +import { PropsWithChildren } from "react"; + +export type ButtonProps = { + colorSchema?: string; + disabled?: boolean; +} & Omit, "type">; +export default function Button({ children, colorSchema = "primary", disabled = false, ...props }: PropsWithChildren) { + return ( + + ); +} diff --git a/src/component/Button/ButtonProvider.tsx b/src/component/Button/ButtonProvider.tsx new file mode 100644 index 00000000..c4d2e02d --- /dev/null +++ b/src/component/Button/ButtonProvider.tsx @@ -0,0 +1,45 @@ +import { css } from "@emotion/react"; +import { Children, cloneElement, isValidElement, PropsWithChildren } from "react"; + +import Button, { ButtonProps } from "@/component/Button/Button.tsx"; + +const Primary = ({ ...props }) => { + return + + + - const [page, setPage] = useState(0); - - return ( -
- -
ํ˜„์žฌ ํŽ˜์ด์ง€ ๋„˜๋ฒ„ {page}
- - -
- ) -} \ No newline at end of file + + ๊ธฐ๋ณธ ๋ฒ„ํŠผ + ํ•˜๋Š˜์ƒ‰ ๋ฒ„ํŠผ + ํšŒ์ƒ‰ ๋ฒ„ํŠผ + ๋น„ํ™œ์„ฑํ™” ๋ฒ„ํŠผ + + + ); +} diff --git a/src/component/Button/Button.tsx b/src/component/Button/Button.tsx index 37bce80e..36c3c623 100644 --- a/src/component/Button/Button.tsx +++ b/src/component/Button/Button.tsx @@ -5,6 +5,7 @@ export type ButtonProps = { colorSchema?: string; disabled?: boolean; } & Omit, "type">; + export default function Button({ children, colorSchema = "primary", disabled = false, ...props }: PropsWithChildren) { return (