From 250d861a7c25474f543c0fe835ceb942f30a0f1d Mon Sep 17 00:00:00 2001 From: sean Date: Tue, 9 Jul 2024 09:37:24 +0900 Subject: [PATCH 01/40] feat: #11 Add AppBar Component --- src/component/AppBar/AppBar.tsx | 64 +++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 src/component/AppBar/AppBar.tsx diff --git a/src/component/AppBar/AppBar.tsx b/src/component/AppBar/AppBar.tsx new file mode 100644 index 00000000..ad0fd535 --- /dev/null +++ b/src/component/AppBar/AppBar.tsx @@ -0,0 +1,64 @@ +import { css } from "@emotion/react"; +import { IoChevronBack } from "react-icons/io5"; +import { useNavigate } from "react-router-dom"; +type AppBarProps = { + children?: React.ReactNode; + visible?: boolean; + LeftComp?: React.ReactNode; + RightComp?: React.ReactNode; +}; + +//FIXME: 색깔 디자인 토큰에 따라 변경 +const Back = () => { + const navigate = useNavigate(); + + return ( + { + navigate(-1); + }} + /> + ); +}; + +//FIXME : 디자인 토큰에 따라 색깔 변경, 폰트 수정 +const AppBar = ({ children, visible = true, LeftComp = , RightComp =
}: AppBarProps) => { + if (!visible) { + return null; + } + + return ( +
+ {LeftComp} +
+ {children} +
+ {RightComp} +
+ ); +}; + +export default AppBar; From 9fee9fa36f37c9d53b5692cfc418229f1fff2d97 Mon Sep 17 00:00:00 2001 From: sean Date: Tue, 9 Jul 2024 09:52:09 +0900 Subject: [PATCH 02/40] fix: React Icon size bug fix --- src/component/AppBar/AppBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/AppBar/AppBar.tsx b/src/component/AppBar/AppBar.tsx index ad0fd535..b2597429 100644 --- a/src/component/AppBar/AppBar.tsx +++ b/src/component/AppBar/AppBar.tsx @@ -15,7 +15,7 @@ const Back = () => { return ( { navigate(-1); }} From 2ad7b5e765b5d1cb3d1925033bb4c83b9412645c Mon Sep 17 00:00:00 2001 From: sean Date: Tue, 9 Jul 2024 09:59:57 +0900 Subject: [PATCH 03/40] =?UTF-8?q?chore:=20React-icon=20Dependency=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index d15f7ded..b501eb23 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "prettier": "^3.2.5", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.2.1", "react-router-dom": "^6.24.0" }, "devDependencies": { From be6cf7b74d7ebe46c13bf290cf07b93c4dbd8f53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Sat, 6 Jul 2024 23:29:29 +0900 Subject: [PATCH 04/40] =?UTF-8?q?feat:=20list=20item=20card=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/Card/ListItemCard.tsx | 27 +++++++++++++ src/component/common/Radio.tsx | 45 ++++++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 src/component/common/Card/ListItemCard.tsx create mode 100644 src/component/common/Radio.tsx diff --git a/src/component/common/Card/ListItemCard.tsx b/src/component/common/Card/ListItemCard.tsx new file mode 100644 index 00000000..0fd3676d --- /dev/null +++ b/src/component/common/Card/ListItemCard.tsx @@ -0,0 +1,27 @@ +import { css } from "@emotion/react"; + +type ListItemCardProps = { + variant: "default" | "theme"; + height?: string; + borderRadius?: string; + children?: React.ReactNode; +}; +const ListItemCard = ({ variant, height = "5rem", borderRadius = ".8rem", children }: ListItemCardProps) => { + return ( +
+ {children} +
+ ); +}; + +export default ListItemCard; diff --git a/src/component/common/Radio.tsx b/src/component/common/Radio.tsx new file mode 100644 index 00000000..40916f29 --- /dev/null +++ b/src/component/common/Radio.tsx @@ -0,0 +1,45 @@ +import { css } from "@emotion/react"; +import { useContext } from "react"; + +import ListItemCard from "./Card/ListItemCard"; + +import { RadioContext } from "@/store/context/RadioContext"; + +type RadioProps = { + value: string; + text: string; +}; +const Radio = ({ value, text }: RadioProps) => { + const radioContext = useContext(RadioContext); + return ( + + + { + console.log(e.target.value); + radioContext?.onChange && radioContext.onChange(e.target.value); + }} + css={css` + display: none; + `} + /> + + ); +}; + +export default Radio; From d78da3cf78e0869c642fcc3ac36f690b3f276c5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Sat, 6 Jul 2024 23:40:30 +0900 Subject: [PATCH 05/40] =?UTF-8?q?feat:=20#2=20=EB=9D=BC=EB=94=94=EC=98=A4?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/{ => RadioButton}/Radio.tsx | 3 +- .../common/RadioButton/RadioButtonGroup.tsx | 31 +++++++++++++++++++ src/store/context/RadioContext.ts | 8 +++++ 3 files changed, 40 insertions(+), 2 deletions(-) rename src/component/common/{ => RadioButton}/Radio.tsx (94%) create mode 100644 src/component/common/RadioButton/RadioButtonGroup.tsx create mode 100644 src/store/context/RadioContext.ts diff --git a/src/component/common/Radio.tsx b/src/component/common/RadioButton/Radio.tsx similarity index 94% rename from src/component/common/Radio.tsx rename to src/component/common/RadioButton/Radio.tsx index 40916f29..2cab4d64 100644 --- a/src/component/common/Radio.tsx +++ b/src/component/common/RadioButton/Radio.tsx @@ -1,8 +1,7 @@ import { css } from "@emotion/react"; import { useContext } from "react"; -import ListItemCard from "./Card/ListItemCard"; - +import ListItemCard from "@/component/common/Card/ListItemCard"; import { RadioContext } from "@/store/context/RadioContext"; type RadioProps = { diff --git a/src/component/common/RadioButton/RadioButtonGroup.tsx b/src/component/common/RadioButton/RadioButtonGroup.tsx new file mode 100644 index 00000000..32253b6f --- /dev/null +++ b/src/component/common/RadioButton/RadioButtonGroup.tsx @@ -0,0 +1,31 @@ +import { css } from "@emotion/react"; +import { useState } from "react"; + +import Radio from "./Radio"; + +import { RadioContext } from "@/store/context/RadioContext"; + +type RadioButtonGroupProps = { + items: { value: string; text: string }[]; +}; + +const RadioButtonGroup = ({ items }: RadioButtonGroupProps) => { + const [selectedValue, setSelectedValue] = useState(); + return ( +
+ setSelectedValue(val) }}> + {items.map(({ value, text }) => { + return ; + })} + +
+ ); +}; + +export default RadioButtonGroup; diff --git a/src/store/context/RadioContext.ts b/src/store/context/RadioContext.ts new file mode 100644 index 00000000..dd4bc54d --- /dev/null +++ b/src/store/context/RadioContext.ts @@ -0,0 +1,8 @@ +import { createContext } from "react"; + +type RadioContextState = { + selectedValue?: string; + onChange?: (value: string) => void; +}; + +export const RadioContext = createContext(undefined); From d51e0077a8c84d404879ac26c517751c0947dba6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Sun, 7 Jul 2024 19:20:52 +0900 Subject: [PATCH 06/40] =?UTF-8?q?chore:=20#11=20=EB=A1=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/RadioButton/Radio.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/component/common/RadioButton/Radio.tsx b/src/component/common/RadioButton/Radio.tsx index 2cab4d64..35f355eb 100644 --- a/src/component/common/RadioButton/Radio.tsx +++ b/src/component/common/RadioButton/Radio.tsx @@ -30,7 +30,6 @@ const Radio = ({ value, text }: RadioProps) => { id={value} value={value} onChange={(e) => { - console.log(e.target.value); radioContext?.onChange && radioContext.onChange(e.target.value); }} css={css` From 7a1cd152a181d6efedceb5b67b40681de1586dc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Sun, 7 Jul 2024 19:24:59 +0900 Subject: [PATCH 07/40] =?UTF-8?q?chore:=20#11=20=EA=B3=B5=EB=B0=B1=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/component/common/Card/ListItemCard.tsx | 1 + src/component/common/RadioButton/Radio.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/component/common/Card/ListItemCard.tsx b/src/component/common/Card/ListItemCard.tsx index 0fd3676d..b749049b 100644 --- a/src/component/common/Card/ListItemCard.tsx +++ b/src/component/common/Card/ListItemCard.tsx @@ -6,6 +6,7 @@ type ListItemCardProps = { borderRadius?: string; children?: React.ReactNode; }; + const ListItemCard = ({ variant, height = "5rem", borderRadius = ".8rem", children }: ListItemCardProps) => { return (
{ const radioContext = useContext(RadioContext); return ( From 51e2f1f8d436e9b7f2ae73e1b5ed0c26aa40db0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Sun, 7 Jul 2024 22:47:39 +0900 Subject: [PATCH 08/40] =?UTF-8?q?fix:=20=EC=99=B8=EB=B6=80=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=84=A0=ED=83=9D=20=EA=B0=92=20=EC=9D=BD=EC=9D=84?= =?UTF-8?q?=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=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/RadioButton/Radio.tsx | 7 ++++--- .../common/RadioButton/RadioButtonGroup.tsx | 17 ++++++----------- src/store/context/RadioContext.ts | 1 + 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/component/common/RadioButton/Radio.tsx b/src/component/common/RadioButton/Radio.tsx index 38fde274..ddaef151 100644 --- a/src/component/common/RadioButton/Radio.tsx +++ b/src/component/common/RadioButton/Radio.tsx @@ -6,10 +6,10 @@ import { RadioContext } from "@/store/context/RadioContext"; type RadioProps = { value: string; - text: string; + children: React.ReactNode; }; -const Radio = ({ value, text }: RadioProps) => { +const Radio = ({ value, children }: RadioProps) => { const radioContext = useContext(RadioContext); return ( @@ -24,10 +24,11 @@ const Radio = ({ value, text }: RadioProps) => { width: 100%; `} > - {text} + {children} { diff --git a/src/component/common/RadioButton/RadioButtonGroup.tsx b/src/component/common/RadioButton/RadioButtonGroup.tsx index 32253b6f..c1a404cd 100644 --- a/src/component/common/RadioButton/RadioButtonGroup.tsx +++ b/src/component/common/RadioButton/RadioButtonGroup.tsx @@ -1,16 +1,15 @@ import { css } from "@emotion/react"; -import { useState } from "react"; - -import Radio from "./Radio"; import { RadioContext } from "@/store/context/RadioContext"; type RadioButtonGroupProps = { - items: { value: string; text: string }[]; + children: React.ReactNode; + selectedValue: string | undefined; + onChange: React.Dispatch>; + radioName: string; }; -const RadioButtonGroup = ({ items }: RadioButtonGroupProps) => { - const [selectedValue, setSelectedValue] = useState(); +const RadioButtonGroup = ({ children, ...rest }: RadioButtonGroupProps) => { return (
{ gap: 1rem; `} > - setSelectedValue(val) }}> - {items.map(({ value, text }) => { - return ; - })} - + {children}
); }; diff --git a/src/store/context/RadioContext.ts b/src/store/context/RadioContext.ts index dd4bc54d..f8d58940 100644 --- a/src/store/context/RadioContext.ts +++ b/src/store/context/RadioContext.ts @@ -1,6 +1,7 @@ import { createContext } from "react"; type RadioContextState = { + radioName: string; selectedValue?: string; onChange?: (value: string) => void; }; From 2d2c7d5f062a4751d0242038d65bce632bb35e9c Mon Sep 17 00:00:00 2001 From: Minhee Lee <91667853+leeminhee119@users.noreply.github.com> Date: Sun, 7 Jul 2024 23:45:44 +0900 Subject: [PATCH 09/40] Update src/component/common/Card/ListItemCard.tsx Co-authored-by: klm hyeon woo --- src/component/common/Card/ListItemCard.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/common/Card/ListItemCard.tsx b/src/component/common/Card/ListItemCard.tsx index b749049b..4fc80234 100644 --- a/src/component/common/Card/ListItemCard.tsx +++ b/src/component/common/Card/ListItemCard.tsx @@ -18,6 +18,7 @@ const ListItemCard = ({ variant, height = "5rem", borderRadius = ".8rem", childr height: ${height}; border-radius: ${borderRadius}; color: ${variant === "default" ? "#212529" : "#fff"}; + transition: 0.4s all; `} > {children} From 86e5a84087213f7dcdf6bfd0332a540c3748ee87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Sun, 7 Jul 2024 23:44:41 +0900 Subject: [PATCH 10/40] =?UTF-8?q?fix:=20#11=20ListItemCard=20children=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=ED=95=84=EC=88=98=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/Card/ListItemCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/common/Card/ListItemCard.tsx b/src/component/common/Card/ListItemCard.tsx index 4fc80234..824c13ee 100644 --- a/src/component/common/Card/ListItemCard.tsx +++ b/src/component/common/Card/ListItemCard.tsx @@ -4,7 +4,7 @@ type ListItemCardProps = { variant: "default" | "theme"; height?: string; borderRadius?: string; - children?: React.ReactNode; + children: React.ReactNode; }; const ListItemCard = ({ variant, height = "5rem", borderRadius = ".8rem", children }: ListItemCardProps) => { From f9cbe1b41a745b6a91eb1b1a5e064d5a7f9d009f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Mon, 8 Jul 2024 00:07:11 +0900 Subject: [PATCH 11/40] =?UTF-8?q?chore:=20#11=20variant=20props=20?= =?UTF-8?q?=EC=98=B5=EC=85=94=EB=84=90=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/Card/ListItemCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/component/common/Card/ListItemCard.tsx b/src/component/common/Card/ListItemCard.tsx index 824c13ee..3c86eba4 100644 --- a/src/component/common/Card/ListItemCard.tsx +++ b/src/component/common/Card/ListItemCard.tsx @@ -1,13 +1,13 @@ import { css } from "@emotion/react"; type ListItemCardProps = { - variant: "default" | "theme"; + variant?: "default" | "theme"; height?: string; borderRadius?: string; children: React.ReactNode; }; -const ListItemCard = ({ variant, height = "5rem", borderRadius = ".8rem", children }: ListItemCardProps) => { +const ListItemCard = ({ variant = "default", height = "5rem", borderRadius = ".8rem", children }: ListItemCardProps) => { return (
{children} From 4d00683d8847b677a134c80e0d12ae20a0cddcda Mon Sep 17 00:00:00 2001 From: donghunee Date: Sat, 6 Jul 2024 15:27:57 +0900 Subject: [PATCH 12/40] =?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 338b4c099dc18b200525ef0bff29aea3963d6727 Mon Sep 17 00:00:00 2001 From: donghunee Date: Sat, 6 Jul 2024 16:21:56 +0900 Subject: [PATCH 13/40] =?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 276743fd3c0768100b57fe50a0f2c1b4147697e0 Mon Sep 17 00:00:00 2001 From: donghunee Date: Sun, 7 Jul 2024 06:25:44 +0900 Subject: [PATCH 14/40] =?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 85b791a8d0e69bd69caf83074843b3297e17603c Mon Sep 17 00:00:00 2001 From: donghunee Date: Sun, 7 Jul 2024 11:42:57 +0900 Subject: [PATCH 15/40] =?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 5f53ff5aeae30833df8ac576838561ed78e0844f Mon Sep 17 00:00:00 2001 From: donghunee Date: Sun, 7 Jul 2024 11:51:59 +0900 Subject: [PATCH 16/40] =?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 17/40] =?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 f4afe03d18136f74b95e57bc5da764161221eeb8 Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 00:14:50 +0900 Subject: [PATCH 18/40] =?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 2cce83ad4d8c6e1980c5d37040dfe0f236bf6945 Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 00:20:24 +0900 Subject: [PATCH 19/40] =?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 79560ac4f40e5200f83d5bd7c6ac2e0dbd05cb9d Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 02:22:29 +0900 Subject: [PATCH 20/40] =?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 f22dad8df446b38e47c07734ae142a8bf48c0d0b Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 02:23:52 +0900 Subject: [PATCH 21/40] =?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 a9d1698cebf7db94766f992e248061a51e583964 Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 20:30:09 +0900 Subject: [PATCH 22/40] =?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 4764797d379bf9d8ce94c28576a76e8ef91eee86 Mon Sep 17 00:00:00 2001 From: donghunee Date: Mon, 8 Jul 2024 20:35:25 +0900 Subject: [PATCH 23/40] =?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 e7bb49f5114675684dd6d6bcd11223e8700cdb24 Mon Sep 17 00:00:00 2001 From: sean Date: Tue, 9 Jul 2024 14:56:20 +0900 Subject: [PATCH 24/40] 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 --------- 5 files changed, 91 insertions(+), 17 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 ( -
- ); -}; -export default Login; diff --git a/src/app/login/KakaoLoginRedirection.tsx b/src/app/login/KakaoLoginRedirection.tsx deleted file mode 100644 index 07390ffc..00000000 --- a/src/app/login/KakaoLoginRedirection.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { useEffect } from "react"; -import { useNavigate } from "react-router-dom"; -import { api } from "@/api"; - -//FIXME: 응답 데이터 형식에 따라 수정 -type Response = {}; - -const KaKaoRedirection = () => { - const code = window.location.search; - const navigate = useNavigate(); - - useEffect(() => { - // FIXME: 백엔드 API에 따라 주소 수정 필요 - api - .post(`kakaoLogin${code}`) - .then((_: Response) => { - // FIXME: 받은걸 어디에 저장할지 논의 필요 (로그인 저장 방식에 따라 달리짐) - // => 로그인 성공 시 로직 추가 - // FIXME: 완료 후 이동 (프로세스에 따라 페이지 URL 변경) - navigate("/test"); - }) - .catch((err) => { - console.log(err); - }); - }, []); - - // FIXME: 로그인 로딩 디자인 필요 및 이에 따른 코드 추가 개발 필요 - return
로그인 중입니다.
; -}; - -export default KaKaoRedirection; diff --git a/src/router/index.tsx b/src/router/index.tsx index a8ff8d58..c01cbd62 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -2,6 +2,7 @@ import { Fragment } from "react"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import MainPage from "@/app/MainPage.tsx"; /* FIXME - 실제 메인 페이지 작성 후 대체해주세요. */ +import Login from "@/app/login/Login"; import Staging from "@/app/test/Staging.tsx"; import GlobalLayout from "@/layout/GlobalLayout.tsx"; @@ -14,6 +15,10 @@ const routerChildren = [ path: "/staging", element: , }, + { + path: "/login", + element: , + }, ]; const router = createBrowserRouter([ From 37750a902b69e944f57b88c8c1bd5e6d893252c9 Mon Sep 17 00:00:00 2001 From: sean Date: Tue, 9 Jul 2024 15:03:08 +0900 Subject: [PATCH 31/40] fix:#11 Rename import URL --- src/app/login/Login.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/login/Login.tsx b/src/app/login/Login.tsx index 8f57a41a..f6a7d95d 100644 --- a/src/app/login/Login.tsx +++ b/src/app/login/Login.tsx @@ -1,6 +1,6 @@ import { DefaultLayout } from "@/layout/DefaultLayout"; import SocialLoginButton from "@/component/button/SocialLoginButton"; -import { kakaoLogin } from "./kakao/KakaoLogin"; +import { kakaoLogin } from "./kakao/kakaoLogin"; import { googleLogin } from "./google/googleLogin"; const Login = () => { From 2b36a4d698acc38f1c056236b0b3d2d868a6fbab Mon Sep 17 00:00:00 2001 From: sean Date: Wed, 10 Jul 2024 23:32:34 +0900 Subject: [PATCH 32/40] chore: Modify AppBar title type --- src/component/AppBar/AppBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/AppBar/AppBar.tsx b/src/component/AppBar/AppBar.tsx index 4b246cf9..b95d26a2 100644 --- a/src/component/AppBar/AppBar.tsx +++ b/src/component/AppBar/AppBar.tsx @@ -2,7 +2,7 @@ import { css } from "@emotion/react"; import { IoChevronBack } from "react-icons/io5"; import { useNavigate } from "react-router-dom"; export type AppBarProps = { - title?: React.ReactNode; + title?: string; appBarVisible?: boolean; LeftComp?: React.ReactNode; RightComp?: React.ReactNode; From 3c4f7d26a9dc1a26869db3eeb92844d9f68568e5 Mon Sep 17 00:00:00 2001 From: sean Date: Wed, 10 Jul 2024 23:32:56 +0900 Subject: [PATCH 33/40] feat: Add Login Page Default Layout --- src/app/login/Login.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/login/Login.tsx b/src/app/login/Login.tsx index f6a7d95d..53637669 100644 --- a/src/app/login/Login.tsx +++ b/src/app/login/Login.tsx @@ -5,7 +5,7 @@ import { googleLogin } from "./google/googleLogin"; const Login = () => { return ( - + Right Comp}> From 4208cc333bfae467de9e826300ae1a5432a43d6d Mon Sep 17 00:00:00 2001 From: sean Date: Wed, 10 Jul 2024 23:54:13 +0900 Subject: [PATCH 34/40] remove: #11 Remove React-icon dependency --- package.json | 1 - pnpm-lock.yaml | 12 ------------ 2 files changed, 13 deletions(-) diff --git a/package.json b/package.json index b501eb23..d15f7ded 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "prettier": "^3.2.5", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-icons": "^5.2.1", "react-router-dom": "^6.24.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1d4105f4..8369d935 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,9 +38,6 @@ importers: react-dom: specifier: ^18.2.0 version: 18.3.1(react@18.3.1) - react-icons: - specifier: ^5.2.1 - version: 5.2.1(react@18.3.1) react-router-dom: specifier: ^6.24.0 version: 6.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1999,11 +1996,6 @@ packages: peerDependencies: react: '>=16.13.1' - react-icons@5.2.1: - resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==} - peerDependencies: - react: '*' - react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -4520,10 +4512,6 @@ snapshots: '@babel/runtime': 7.24.7 react: 18.3.1 - react-icons@5.2.1(react@18.3.1): - dependencies: - react: 18.3.1 - react-is@16.13.1: {} react-json-tree@0.18.0(@types/react@18.3.2)(react@18.3.1): From 240e12398f43d5d7ff29d95a98090c8a535d9c72 Mon Sep 17 00:00:00 2001 From: sean Date: Wed, 10 Jul 2024 23:54:45 +0900 Subject: [PATCH 35/40] chore: Modify SocialLoginButton URL --- src/app/login/Login.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/login/Login.tsx b/src/app/login/Login.tsx index 53637669..1a9a404d 100644 --- a/src/app/login/Login.tsx +++ b/src/app/login/Login.tsx @@ -1,11 +1,11 @@ import { DefaultLayout } from "@/layout/DefaultLayout"; -import SocialLoginButton from "@/component/button/SocialLoginButton"; +import SocialLoginButton from "@/component/Button/SocialLoginButton"; import { kakaoLogin } from "./kakao/kakaoLogin"; import { googleLogin } from "./google/googleLogin"; const Login = () => { return ( - Right Comp}> + From e600b88d69968023610c8d7af5daec3595cc388f Mon Sep 17 00:00:00 2001 From: sean Date: Wed, 10 Jul 2024 23:55:08 +0900 Subject: [PATCH 36/40] design: Modify Icon Default Size --- src/component/common/Icon/Icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/common/Icon/Icon.tsx b/src/component/common/Icon/Icon.tsx index 7ee240b1..b2567aa5 100644 --- a/src/component/common/Icon/Icon.tsx +++ b/src/component/common/Icon/Icon.tsx @@ -14,7 +14,7 @@ type Props = { const DEFAULT_ICON_COLOR = "#000000"; -function Icon({ icon, color = DEFAULT_ICON_COLOR, size = "0.2rem", onClick }: Props) { +function Icon({ icon, color = DEFAULT_ICON_COLOR, size = "2rem", onClick }: Props) { const SVGIcon = icons[icon]; const widthRem = typeof size === "number" ? `${size}rem` : size; From 81f7ca16a5d89a52dd32bade53512f35b3f2b885 Mon Sep 17 00:00:00 2001 From: sean Date: Wed, 10 Jul 2024 23:55:37 +0900 Subject: [PATCH 37/40] chore: Apply Icon Component to AppBar --- src/component/AppBar/AppBar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/component/AppBar/AppBar.tsx b/src/component/AppBar/AppBar.tsx index b95d26a2..fbc83a7f 100644 --- a/src/component/AppBar/AppBar.tsx +++ b/src/component/AppBar/AppBar.tsx @@ -1,6 +1,7 @@ import { css } from "@emotion/react"; -import { IoChevronBack } from "react-icons/io5"; import { useNavigate } from "react-router-dom"; +import Icon from "../common/Icon/Icon"; + export type AppBarProps = { title?: string; appBarVisible?: boolean; @@ -13,9 +14,8 @@ const Back = () => { const navigate = useNavigate(); return ( - { navigate(-1); }} From cdae5539cf5797781528de32ae4d8c18b40ed69e Mon Sep 17 00:00:00 2001 From: sean Date: Sat, 13 Jul 2024 01:28:01 +0900 Subject: [PATCH 38/40] =?UTF-8?q?chore=20#11:=20Social=20Login=20Import=20?= =?UTF-8?q?URL=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/login/Login.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/login/Login.tsx b/src/app/login/Login.tsx index 1a9a404d..f6a7d95d 100644 --- a/src/app/login/Login.tsx +++ b/src/app/login/Login.tsx @@ -1,5 +1,5 @@ import { DefaultLayout } from "@/layout/DefaultLayout"; -import SocialLoginButton from "@/component/Button/SocialLoginButton"; +import SocialLoginButton from "@/component/button/SocialLoginButton"; import { kakaoLogin } from "./kakao/kakaoLogin"; import { googleLogin } from "./google/googleLogin"; From 79e63eb421d6a52e98b65e53998973f2f4c437f0 Mon Sep 17 00:00:00 2001 From: sean Date: Sat, 13 Jul 2024 19:47:08 +0900 Subject: [PATCH 39/40] =?UTF-8?q?chore:=20#11=20PropsWithChildren=20Generi?= =?UTF-8?q?c=20=EC=B6=94=EA=B0=80=EB=A5=BC=20=ED=86=B5=ED=95=9C=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=AA=85=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/DefaultLayout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx index 5ac29b5a..1cb3bdc1 100644 --- a/src/layout/DefaultLayout.tsx +++ b/src/layout/DefaultLayout.tsx @@ -3,7 +3,7 @@ import { Fragment, PropsWithChildren } from "react"; import AppBar from "@/component/AppBar/AppBar"; import { AppBarProps } from "@/component/AppBar/AppBar"; -type DefaultLayoutProps = PropsWithChildren & AppBarProps; +type DefaultLayoutProps = PropsWithChildren; export function DefaultLayout({ children, title, appBarVisible, LeftComp, RightComp }: DefaultLayoutProps) { return ( @@ -20,4 +20,4 @@ export function DefaultLayout({ children, title, appBarVisible, LeftComp, RightC ); -} \ No newline at end of file +} From 522836200e1948dd7adce9f6729879f8c44c124d Mon Sep 17 00:00:00 2001 From: sean Date: Mon, 15 Jul 2024 04:51:29 +0900 Subject: [PATCH 40/40] =?UTF-8?q?chore:=20#11=20Props=20=EA=B5=AC=EC=A1=B0?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20AppBar=20=EC=BB=A8=EB=B2=A4?= =?UTF-8?q?=EC=85=98=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{AppBar/AppBar.tsx => common/appBar/index.tsx} | 9 ++------- src/layout/DefaultLayout.tsx | 12 +++++++----- 2 files changed, 9 insertions(+), 12 deletions(-) rename src/component/{AppBar/AppBar.tsx => common/appBar/index.tsx} (85%) diff --git a/src/component/AppBar/AppBar.tsx b/src/component/common/appBar/index.tsx similarity index 85% rename from src/component/AppBar/AppBar.tsx rename to src/component/common/appBar/index.tsx index fbc83a7f..282a9539 100644 --- a/src/component/AppBar/AppBar.tsx +++ b/src/component/common/appBar/index.tsx @@ -1,10 +1,9 @@ import { css } from "@emotion/react"; import { useNavigate } from "react-router-dom"; -import Icon from "../common/Icon/Icon"; +import Icon from "../Icon/Icon"; export type AppBarProps = { title?: string; - appBarVisible?: boolean; LeftComp?: React.ReactNode; RightComp?: React.ReactNode; }; @@ -24,11 +23,7 @@ const Back = () => { }; //FIXME : 디자인 토큰에 따라 색깔 변경, 폰트 수정 -const AppBar = ({ title, appBarVisible = true, LeftComp = , RightComp =
}: AppBarProps) => { - if (!appBarVisible) { - return null; - } - +const AppBar = ({ title, LeftComp = , RightComp =
}: AppBarProps) => { return ( <>
; +type DefaultLayoutProps = PropsWithChildren & { + appBarVisible?: boolean; +}; -export function DefaultLayout({ children, title, appBarVisible, LeftComp, RightComp }: DefaultLayoutProps) { +export function DefaultLayout({ children, title, appBarVisible = true, LeftComp, RightComp }: DefaultLayoutProps) { return ( - + {appBarVisible && }