From cefa26f92147014d720bfac7656d05a7186adf39 Mon Sep 17 00:00:00 2001
From: feb-dain <feb.dain@gmail.com>
Date: Sun, 22 Oct 2023 15:29:07 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=A9=94=EB=89=B4=20=ED=86=A0?=
 =?UTF-8?q?=EA=B8=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#897]
---
 .../src/components/ui/Navigator/NavigationBar/Menu.tsx    | 8 ++++----
 .../ui/Navigator/NavigationBar/hooks/useNavigationBar.ts  | 8 +++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ui/Navigator/NavigationBar/Menu.tsx b/frontend/src/components/ui/Navigator/NavigationBar/Menu.tsx
index 67a51d628..6b94e0f7d 100644
--- a/frontend/src/components/ui/Navigator/NavigationBar/Menu.tsx
+++ b/frontend/src/components/ui/Navigator/NavigationBar/Menu.tsx
@@ -29,7 +29,7 @@ import { useNavigationBar } from './hooks/useNavigationBar';
 // TODO: 모바일 오류 (미디어 쿼리) 개선
 
 const Menu = () => {
-  const { openBasePanel } = useNavigationBar();
+  const { toggleBasePanel } = useNavigationBar();
 
   const memberToken = useExternalValue(memberTokenStore);
   const isSignIn = memberToken !== EMPTY_MEMBER_TOKEN;
@@ -66,7 +66,7 @@ const Menu = () => {
         noRadius="all"
         css={displayNoneInMobile}
         aria-label="주변 충전소 목록 열기"
-        onClick={() => openBasePanel(<StationSearchWindow />)}
+        onClick={() => toggleBasePanel(<StationSearchWindow key="base-panel-list" />)}
       >
         <Bars3Icon width="2.8rem" stroke="#555" />
         <Text mt={0.5} variant="caption">
@@ -77,7 +77,7 @@ const Menu = () => {
       <Button
         noRadius="all"
         aria-label="필터링 메뉴 열기"
-        onClick={() => openBasePanel(<ServerStationFilters />)}
+        onClick={() => toggleBasePanel(<ServerStationFilters key="base-panel-filter" />)}
       >
         <AdjustmentsHorizontalIcon width="2.8rem" stroke="#555" />
         <Text mt={0.5} variant="caption">
@@ -100,7 +100,7 @@ const Menu = () => {
         noRadius="all"
         css={displayNoneInWeb}
         aria-label="충전소 리스트 열기"
-        onClick={() => openBasePanel(<StationListWindow />)}
+        onClick={() => toggleBasePanel(<StationListWindow key="base-panel-list" />)}
       >
         <Bars3Icon width="2.8rem" stroke="#555" />
         <Text mt={0.5} variant="caption">
diff --git a/frontend/src/components/ui/Navigator/NavigationBar/hooks/useNavigationBar.ts b/frontend/src/components/ui/Navigator/NavigationBar/hooks/useNavigationBar.ts
index 6dff2ca0c..fc23990f2 100644
--- a/frontend/src/components/ui/Navigator/NavigationBar/hooks/useNavigationBar.ts
+++ b/frontend/src/components/ui/Navigator/NavigationBar/hooks/useNavigationBar.ts
@@ -7,10 +7,12 @@ import { navigationBarPanelStore } from '@stores/layout/navigationBarPanelStore'
 export const useNavigationBar = () => {
   const [navigationBarPanel, setNavigationBarPanel] = useExternalState(navigationBarPanelStore);
 
-  const openBasePanel = (basePanel: ReactElement) => {
+  const toggleBasePanel = (basePanel: ReactElement) => {
+    const isAlreadyOpen = navigationBarPanel.basePanel?.key === basePanel.key;
+
     setNavigationBarPanel((prev) => ({
       ...prev,
-      basePanel,
+      basePanel: isAlreadyOpen ? null : basePanel,
     }));
   };
 
@@ -44,7 +46,7 @@ export const useNavigationBar = () => {
   };
 
   return {
-    openBasePanel,
+    toggleBasePanel,
     openLastPanel,
     closeBasePanel,
     closeLastPanel,

From 22ab973542c15f7a0f05c581a1248e811633f630 Mon Sep 17 00:00:00 2001
From: feb-dain <feb.dain@gmail.com>
Date: Mon, 23 Oct 2023 14:28:33 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=EB=B3=80=EC=88=98=EB=AA=85=20?=
 =?UTF-8?q?=EA=B5=AC=EC=B2=B4=EC=A0=81=EC=9C=BC=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

[#897]
---
 .../ui/Navigator/NavigationBar/hooks/useNavigationBar.ts      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/Navigator/NavigationBar/hooks/useNavigationBar.ts b/frontend/src/components/ui/Navigator/NavigationBar/hooks/useNavigationBar.ts
index fc23990f2..159995b75 100644
--- a/frontend/src/components/ui/Navigator/NavigationBar/hooks/useNavigationBar.ts
+++ b/frontend/src/components/ui/Navigator/NavigationBar/hooks/useNavigationBar.ts
@@ -8,11 +8,11 @@ export const useNavigationBar = () => {
   const [navigationBarPanel, setNavigationBarPanel] = useExternalState(navigationBarPanelStore);
 
   const toggleBasePanel = (basePanel: ReactElement) => {
-    const isAlreadyOpen = navigationBarPanel.basePanel?.key === basePanel.key;
+    const isBasePanelAlreadyOpen = navigationBarPanel.basePanel?.key === basePanel.key;
 
     setNavigationBarPanel((prev) => ({
       ...prev,
-      basePanel: isAlreadyOpen ? null : basePanel,
+      basePanel: isBasePanelAlreadyOpen ? null : basePanel,
     }));
   };