From 737d8555ff9d0ff9aa15cc6424be87483426b487 Mon Sep 17 00:00:00 2001 From: juyesu Date: Sun, 29 Jun 2025 17:35:02 +0900 Subject: [PATCH 01/15] =?UTF-8?q?refactor:=20useClickOutside=20=ED=9B=85?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=8B=A4=EC=96=91=ED=95=9C=20HTML=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=EC=97=90=20=EC=82=AC=EC=9A=A9=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=ED=95=9C=20ref=20=EC=B2=98=EB=A6=AC=EB=A5=BC=20?= =?UTF-8?q?=EC=9C=84=ED=95=B4=20=EC=A0=9C=EB=84=A4=EB=A6=AD=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9C=A0=EC=97=B0=ED=95=98=EA=B2=8C=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Dropdown/Dropdown.tsx | 2 +- src/hooks/useClickOutside.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/common/Dropdown/Dropdown.tsx b/src/components/common/Dropdown/Dropdown.tsx index 1055d51b..b8950173 100644 --- a/src/components/common/Dropdown/Dropdown.tsx +++ b/src/components/common/Dropdown/Dropdown.tsx @@ -34,7 +34,7 @@ const Dropdown = ({ className = '', onClose, }: DropdownProps) => { - const outSideRef = useClickOutside(() => { + const outSideRef = useClickOutside(() => { if (isOpen && onClose) { onClose(); } diff --git a/src/hooks/useClickOutside.ts b/src/hooks/useClickOutside.ts index e6ebdc8e..ffb25af2 100644 --- a/src/hooks/useClickOutside.ts +++ b/src/hooks/useClickOutside.ts @@ -1,7 +1,7 @@ import { useEffect, useRef } from 'react'; -const useClickOutside = (handler: () => void) => { - const ref = useRef(null); +const useClickOutside = (handler: () => void) => { + const ref = useRef(null); useEffect(() => { const listener = (event: MouseEvent | TouchEvent) => { From 3c76f69126ec4be566cc4075edf5704ab10132b4 Mon Sep 17 00:00:00 2001 From: juyesu Date: Sun, 29 Jun 2025 17:36:51 +0900 Subject: [PATCH 02/15] =?UTF-8?q?refactor:=20dropdown=20=EA=B3=B5=ED=86=B5?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EB=8A=94=20=EB=B0=A9=EC=8B=9D=EC=9C=BC?= =?UTF-8?q?=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/components/layout/GNB/UserDropdown.tsx | 83 ++++++++++++++++------ src/components/layout/GNB/type.ts | 6 +- 2 files changed, 67 insertions(+), 22 deletions(-) diff --git a/src/components/layout/GNB/UserDropdown.tsx b/src/components/layout/GNB/UserDropdown.tsx index bc29e73f..2ae26bc7 100644 --- a/src/components/layout/GNB/UserDropdown.tsx +++ b/src/components/layout/GNB/UserDropdown.tsx @@ -1,38 +1,81 @@ 'use client'; + import { useRouter, usePathname } from 'next/navigation'; import { APP_ROUTES } from '@/constants/appRoutes'; import { UserDropdownProps } from './type'; +import Dropdown from '@/components/common/Dropdown/Dropdown'; +import Image from 'next/image'; +import { DefaultProfileImage } from '@public/assets/icons'; +import { usePostSignout } from '@/hooks/api/auth/usePostSignout'; -const UserDropdown = ({ onSignOut, onClose }: UserDropdownProps) => { +const UserDropdown = ({ + isDropdownOpen, + toggleDropDown, + closeDropdown, + profileImage, +}: UserDropdownProps) => { const router = useRouter(); const pathname = usePathname(); - const handleSignOut = async () => { - await onSignOut(); - onClose(); + const { mutate: signOut } = usePostSignout(); + + const handleSignOut = () => { + signOut(); + + closeDropdown(); + if (pathname === APP_ROUTES.mypage) { - await router.push(APP_ROUTES.signin); + router.push(APP_ROUTES.signin); } }; + const gotoMyPage = () => { router.push(APP_ROUTES.mypage); - onClose(); + + closeDropdown(); }; return ( -
- - -
+ + 프로필 이미지 + + ) : ( + + ) + } + > + + gotoMyPage()} + contentItem={ +
+ 마이페이지 +
+ } + /> + + 로그아웃 + + } + /> + + ); }; diff --git a/src/components/layout/GNB/type.ts b/src/components/layout/GNB/type.ts index 4a2d4d2c..0fdf8089 100644 --- a/src/components/layout/GNB/type.ts +++ b/src/components/layout/GNB/type.ts @@ -1,4 +1,6 @@ export interface UserDropdownProps { - onSignOut: () => void; - onClose: () => void; + isDropdownOpen: boolean; + toggleDropDown: () => void; + closeDropdown: () => void; + profileImage: string | null; } From 5734be59dbafedf98d8bbce58469e5a7a1b52718 Mon Sep 17 00:00:00 2001 From: juyesu Date: Sun, 29 Jun 2025 17:41:41 +0900 Subject: [PATCH 03/15] =?UTF-8?q?refactor:=20gnb=20=EB=82=B4=20html?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - LoginSection 컴포넌트를 제거하고 해당 코드를 MenuGroups 컴포넌트 내부로 이동 - div 중첩을 줄이고 의미에 더 적합한 태그들로 변경 (로고에 사용된 h1 제거) - 가독성을 위한 개행 적용 - 레이아웃을 더 명확하게 잡기 위해서 비효율적으로 작성된 css 수정 --- src/app/layout.tsx | 2 +- src/components/layout/GNB/GNB.tsx | 16 ++--- src/components/layout/GNB/LoginSection.tsx | 69 ---------------------- src/components/layout/GNB/LogoButton.tsx | 12 ++-- src/components/layout/GNB/MenuGroups.tsx | 36 ++++++++++- 5 files changed, 49 insertions(+), 86 deletions(-) delete mode 100644 src/components/layout/GNB/LoginSection.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 31c7e8eb..8aa06fc7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -45,7 +45,7 @@ const RootLayout = ({ -
+
diff --git a/src/components/layout/GNB/GNB.tsx b/src/components/layout/GNB/GNB.tsx index cb613ec7..d0b81638 100644 --- a/src/components/layout/GNB/GNB.tsx +++ b/src/components/layout/GNB/GNB.tsx @@ -1,6 +1,5 @@ 'use client'; -import LoginSection from './LoginSection'; import SideDrawer from '../SideDrawer/SideDrawer'; import LogoButton from '@/components/layout/GNB/LogoButton'; import MenuGroups from '@/components/layout/GNB/MenuGroups'; @@ -24,16 +23,11 @@ export const GNB = () => { return ( <> -