From 1e37410db71a1e602c0931136e0a4b99b77e50c9 Mon Sep 17 00:00:00 2001 From: JinHo Kim <81083461+jinhokim98@users.noreply.github.com> Date: Thu, 22 Aug 2024 00:54:56 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B4=80=EB=A6=AC=EC=9E=90=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=8A=A4=EC=9C=84=EC=B9=98=EA=B0=80=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=EB=A1=9C=20=ED=99=9C=EC=84=B1=ED=99=94=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=B2=84=EA=B7=B8=20(#469)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 관리페이지 로그인에서도 top nav 관리 탭으로 활성화 되도록 수정 * refactor: useEventLogin으로 훅 분리 --- client/src/hooks/useEventLogin.ts | 42 ++++++++++++++++++ client/src/hooks/useNavSwitch.tsx | 7 ++- .../EventPage/AdminPage/EventLoginPage.tsx | 43 +++---------------- .../src/pages/EventPage/EventPageLayout.tsx | 35 ++++++++------- client/src/router.tsx | 8 ++-- 5 files changed, 76 insertions(+), 59 deletions(-) create mode 100644 client/src/hooks/useEventLogin.ts diff --git a/client/src/hooks/useEventLogin.ts b/client/src/hooks/useEventLogin.ts new file mode 100644 index 000000000..ccabe20c1 --- /dev/null +++ b/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(null); + const [canSubmit, setCanSubmit] = useState(false); + const {mutate: postLogin} = useRequestPostLogin(); + + const submitPassword = async (event: React.FormEvent) => { + event.preventDefault(); + + postLogin({password}, {onError: () => setErrorMessage('비밀번호가 틀렸어요')}); + }; + + const handleChange = (event: React.ChangeEvent) => { + 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; diff --git a/client/src/hooks/useNavSwitch.tsx b/client/src/hooks/useNavSwitch.tsx index 7ecd3def8..a622a7a30 100644 --- a/client/src/hooks/useNavSwitch.tsx +++ b/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 = { @@ -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]}`); diff --git a/client/src/pages/EventPage/AdminPage/EventLoginPage.tsx b/client/src/pages/EventPage/AdminPage/EventLoginPage.tsx index 974ad44d4..741dca3eb 100644 --- a/client/src/pages/EventPage/AdminPage/EventLoginPage.tsx +++ b/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) => { - event.preventDefault(); - - postLogin({password}, {onError: () => setErrorMessage('비밀번호가 틀렸어요')}); - }; - - const handleChange = (event: React.ChangeEvent) => { - 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 ( - - - - {/* */} - + <> { ></LabelInput> <FixedButton disabled={!canSubmit}>관리 페이지로</FixedButton> </form> - </MainLayout> + </> ); }; diff --git a/client/src/pages/EventPage/EventPageLayout.tsx b/client/src/pages/EventPage/EventPageLayout.tsx index 589f9ab52..6f00c23f1 100644 --- a/client/src/pages/EventPage/EventPageLayout.tsx +++ b/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> diff --git a/client/src/router.tsx b/client/src/router.tsx index a6af2184d..51162c775 100644 --- a/client/src/router.tsx +++ b/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 />, + }, ], }, {