feat: 관리자 로그인 페이지에서 스위치가 관리로 활성화되지 않는 버그 (#469)

* fix: 관리페이지 로그인에서도 top nav 관리 탭으로 활성화 되도록 수정

* refactor: useEventLogin으로 훅 분리

client/src/hooks/useEventLogin.ts

@@ -0,0 +1,42 @@
+import {useState} from 'react';
+
+import validateEventPassword from '@utils/validate/validateEventPassword';
+
+import RULE from '@constants/rule';
+
+import useRequestPostLogin from './queries/useRequestPostLogin';
+
+const useEventLogin = () => {
+  const [password, setPassword] = useState('');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [canSubmit, setCanSubmit] = useState(false);
+  const {mutate: postLogin} = useRequestPostLogin();
+
+  const submitPassword = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    postLogin({password}, {onError: () => setErrorMessage('비밀번호가 틀렸어요')});
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    const validation = validateEventPassword(newValue);
+    setErrorMessage(validation.errorMessage);
+
+    if (validation.isValid) {
+      setPassword(newValue);
+    }
+
+    setCanSubmit(newValue.length === RULE.maxEventPasswordLength);
+  };
+
+  return {
+    password,
+    errorMessage,
+    handleChange,
+    canSubmit,
+    submitPassword,
+  };
+};
+
+export default useEventLogin;

client/src/hooks/useNavSwitch.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import {useLocation, useNavigate} from 'react-router-dom';
 
 const PATH_TABLE: Record<string, string> = {
@@ -22,6 +22,11 @@ const useNavSwitch = () => {
 
   const [nav, setNav] = useState(PATH_DISPLAY_TABLE[lastPath]);
 
+  useEffect(() => {
+    const isLogin = lastPath === 'login';
+    setNav(isLogin ? '관리' : PATH_DISPLAY_TABLE[lastPath]);
+  }, [location]);
+
   const onChange = (displayName: string) => {
     setNav(displayName);
     navigate(`${basePath}/${PATH_TABLE[displayName]}`);

client/src/pages/EventPage/AdminPage/EventLoginPage.tsx

@@ -1,48 +1,15 @@
-import {useState} from 'react';
-import {FixedButton, MainLayout, LabelInput, Title, TopNav, Switch} from 'haengdong-design';
+import {FixedButton, LabelInput, Title} from 'haengdong-design';
 
-import validateEventPassword from '@utils/validate/validateEventPassword';
-import useRequestPostLogin from '@hooks/queries/useRequestPostLogin';
-
-import useNavSwitch from '@hooks/useNavSwitch';
+import useEventLogin from '@hooks/useEventLogin';
 
 import RULE from '@constants/rule';
 import {PASSWORD_LENGTH} from '@constants/password';
 
 const EventLoginPage = () => {
-  const [password, setPassword] = useState('');
-  const {nav, paths, onChange} = useNavSwitch();
-  const [errorMessage, setErrorMessage] = useState('');
-  const [canSubmit, setCanSubmit] = useState(false);
-  const {mutate: postLogin} = useRequestPostLogin();
-
-  const submitPassword = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    postLogin({password}, {onError: () => setErrorMessage('비밀번호가 틀렸어요')});
-  };
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = event.target.value;
-    const validation = validateEventPassword(newValue);
-
-    setCanSubmit(newValue.length === RULE.maxEventPasswordLength);
-
-    if (validation.isValid) {
-      setPassword(newValue);
-      setErrorMessage('');
-    } else {
-      event.target.value = password;
-      setErrorMessage(validation.errorMessage ?? '');
-    }
-  };
+  const {password, errorMessage, handleChange, canSubmit, submitPassword} = useEventLogin();
 
   return (
-    <MainLayout>
-      <TopNav>
-        <Switch value={nav} values={paths} onChange={onChange} />
-        {/* <Back /> */}
-      </TopNav>
+    <>
       <Title
         title="행사 비밀번호 입력"
         description={`관리를 위해선 비밀번호가 필요해요. 행사 생성 시 설정한 ${PASSWORD_LENGTH} 자리의 숫자 비밀번호를 입력해 주세요.`}
@@ -61,7 +28,7 @@ const EventLoginPage = () => {
         ></LabelInput>
         <FixedButton disabled={!canSubmit}>관리 페이지로</FixedButton>
       </form>
-    </MainLayout>
+    </>
   );
 };
 

client/src/pages/EventPage/EventPageLayout.tsx

@@ -24,6 +24,7 @@ const EventPageLayout = () => {
   const eventId = getEventIdByUrl();
 
   const isAdmin = useMatch(ROUTER_URLS.eventManage) !== null;
+  const isLoginPage = useMatch(ROUTER_URLS.eventLogin) !== null;
 
   const outletContext: EventPageContextProps = {
     isAdmin,
@@ -37,22 +38,24 @@ const EventPageLayout = () => {
     <MainLayout backgroundColor="gray">
       <TopNav>
         <Switch value={nav} values={paths} onChange={onChange} />
-        <CopyToClipboard
-          text={`[행동대장]\n"${eventName}"에 대한 정산을 시작할게요:)\n아래 링크에 접속해서 정산 내역을 확인해 주세요!\n${url}`}
-          onCopy={() =>
-            showToast({
-              showingTime: 3000,
-              message: '링크가 복사되었어요 :) \n참여자들에게 링크를 공유해 주세요!',
-              type: 'confirm',
-              position: 'bottom',
-              bottom: '8rem',
-            })
-          }
-        >
-          <Button size="small" variants="secondary">
-            정산 초대하기
-          </Button>
-        </CopyToClipboard>
+        {!isLoginPage && (
+          <CopyToClipboard
+            text={`[행동대장]\n"${eventName}"에 대한 정산을 시작할게요:)\n아래 링크에 접속해서 정산 내역을 확인해 주세요!\n${url}`}
+            onCopy={() =>
+              showToast({
+                showingTime: 3000,
+                message: '링크가 복사되었어요 :) \n참여자들에게 링크를 공유해 주세요!',
+                type: 'confirm',
+                position: 'bottom',
+                bottom: '8rem',
+              })
+            }
+          >
+            <Button size="small" variants="secondary">
+              정산 초대하기
+            </Button>
+          </CopyToClipboard>
+        )}
       </TopNav>
       <Outlet context={outletContext} />
     </MainLayout>

client/src/router.tsx

@@ -35,16 +35,16 @@ const router = createBrowserRouter([
         path: ROUTER_URLS.eventCreateComplete,
         element: <CompleteCreateEventPage />,
       },
-      {
-        path: ROUTER_URLS.eventLogin,
-        element: <EventLoginPage />,
-      },
       {
         path: ROUTER_URLS.event,
         element: <EventPage />,
         children: [
           {path: ROUTER_URLS.eventManage, element: <AdminPage />},
           {path: ROUTER_URLS.home, element: <HomePage />},
+          {
+            path: ROUTER_URLS.eventLogin,
+            element: <EventLoginPage />,
+          },
         ],
       },
       {