From 95c2403fe4f6a552357b29c42cd6effde5059f67 Mon Sep 17 00:00:00 2001
From: JeonDoGyun <wjsehrbs2632@naver.com>
Date: Sun, 5 Nov 2023 23:04:49 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B0=98=EC=9D=91=ED=98=95=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EC=9C=A0=EC=A0=80=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

작은 화면에서는 ToggleBox로 아이콘을 누르면 정보 변경, 보호소 이동, 로그아웃 탭이 나오도록 구현했습니다.
---
 src/commons/UserToggleBox.tsx | 98 +++++++++++++++++++++++++++++++++++
 src/layouts/VGNB.tsx          |  7 ++-
 2 files changed, 101 insertions(+), 4 deletions(-)
 create mode 100644 src/commons/UserToggleBox.tsx

diff --git a/src/commons/UserToggleBox.tsx b/src/commons/UserToggleBox.tsx
new file mode 100644
index 00000000..867a155d
--- /dev/null
+++ b/src/commons/UserToggleBox.tsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { getCookie, removeCookie, setCookie } from './cookie/cookie';
+
+const UserToggleBox = () => {
+  const token = getCookie('loginToken');
+  const [isTabVisible, setTabVisible] = useState(false);
+  const navigate = useNavigate();
+  const shelterId = getCookie('accountInfo');
+  const id = shelterId ? shelterId.id : '';
+
+  const toggleTab = () => {
+    setTabVisible(!isTabVisible);
+  };
+
+  const removeToken = () => {
+    removeCookie('loginToken');
+    removeCookie('userAccountInfo');
+  };
+
+  const handleOptionClick = (option: string) => {
+    switch (option) {
+      case 'My 정보 변경':
+        navigate(`/shelter/${id}/edit`); // 아직 회원정보 수정 페이지 구현 안됨
+        break;
+      case 'My 보호소 이동':
+        navigate(`/shelter/${id}/1`);
+        break;
+      case '로그아웃':
+        removeToken();
+        setCookie('userAccountInfo', 'Not Login');
+        window.location.reload();
+        break;
+      default:
+        break;
+    }
+  };
+
+  if (!token) {
+    return (
+      <div className="flex gap-4 font-bold">
+        <button
+          className="border-2 box-content border-brand-color text-brand-color rounded-md py-1 px-4 transition duration-300 hover:bg-brand-color hover:text-white"
+          onClick={() => navigate('/login')}
+        >
+          로그인
+        </button>
+        <button
+          className="border-brand-color border-2 bg-brand-color text-white rounded-md py-1 px-4 transition duration-300 hover:bg-white hover:text-brand-color"
+          onClick={() => navigate('/signup')}
+        >
+          회원가입
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full border-b">
+      <button onClick={toggleTab} className=" px-4 py-2 rounded">
+        <img
+          src="/assets/images/shelterIcon.png"
+          alt="유저 정보 아이콘"
+          className="w-10 h-10"
+        />
+      </button>
+
+      <div
+        className={`w-full m-auto transition-all duration-500 ${
+          isTabVisible ? 'h-40' : 'h-0'
+        } overflow-hidden`}
+      >
+        <div className="flex flex-col gap-2">
+          <button
+            className="px-4 py-2 border-b rounded-md w-[1/3rem]"
+            onClick={() => handleOptionClick('My 정보 변경')}
+          >
+            My 정보 변경
+          </button>
+          <button
+            className="px-4 py-2 border-b rounded w-[1/3rem]"
+            onClick={() => handleOptionClick('My 보호소 이동')}
+          >
+            My 보호소 이동
+          </button>
+          <button
+            className="px-4 py-2 rounded w-[1/3rem]"
+            onClick={() => handleOptionClick('로그아웃')}
+          >
+            로그아웃
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserToggleBox;
diff --git a/src/layouts/VGNB.tsx b/src/layouts/VGNB.tsx
index d8230836..f189cb37 100644
--- a/src/layouts/VGNB.tsx
+++ b/src/layouts/VGNB.tsx
@@ -1,5 +1,5 @@
 import LogoButton from 'commons/LogoButton';
-import UserSelectBox from 'commons/UserDropdownBox';
+import UserToggleBox from 'commons/UserToggleBox';
 import { Link } from 'react-router-dom';
 
 export interface VGNBProps {
@@ -34,10 +34,9 @@ const VGNB = (props: VGNBProps) => {
       </div>
       {isToggleOpen && (
         <div className="bg-white text-center z-10 flex w-content justify-center border-b">
-          <div className="lg:hidden w-full flex flex-col items-center text-xl gap-8">
+          <div className="lg:hidden w-full flex flex-col items-center text-xl gap-4">
             <div className="flex justify-center w-full gap-2">
-              {/* 여기서 변경 */}
-              <UserSelectBox />
+              <UserToggleBox />
             </div>
 
             <ol className="flex flex-col justify-center w-full gap-4">