refactor: 방 생성과 방 참여 이벤트 핸들러를 하나로 묶지 않고 isMaster 분기처리를 드러내기 #401

woowacourse-teams · Nov 18, 2024 · 63f13bf · 63f13bf
1 parent 815ef41
commit 63f13bf
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 24 deletions.
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import NicknameInput from './components/NicknameInput/NicknameInput';
-import useCreateOrEnterRoom from './hooks/useCreateOrEnterRoom';
+import useAccessRoom from './hooks/useAccessRoom';
 import useIsJoinableRoomQuery from './hooks/useIsJoinableRoomQuery';
 import { profileWrapper, profileImg, nicknameContainer } from './NicknamePage.styled';
 
@@ -13,10 +13,12 @@ import useButtonHeightOnKeyboard from '@/hooks/useButtonHeightOnKeyboard';
 
 const NicknamePage = () => {
   const { roomUuid } = useParams();
-  const { nicknameInputRef, handleCreateOrEnterRoom, isLoading, isSuccess } =
-    useCreateOrEnterRoom();
+  const { nicknameInputRef, handleCreateRoom, handleEnterRoom, isLoading, isSuccess } =
+    useAccessRoom();
   const { bottomButtonHeight } = useButtonHeightOnKeyboard();
 
+  const isMaster = !roomUuid;
+
   useIsJoinableRoomQuery({ roomUuid });
 
   useEffect(() => {
@@ -33,12 +35,12 @@ const NicknamePage = () => {
       <div css={nicknameContainer}>
         <NicknameInput
           nicknameInputRef={nicknameInputRef}
-          handleCreateOrEnterRoom={handleCreateOrEnterRoom}
+          handleAccessRoom={isMaster ? handleCreateRoom : handleEnterRoom}
         />
         <Button
-          onClick={handleCreateOrEnterRoom}
-          disabled={isLoading || isSuccess}
           text={isLoading || isSuccess ? '접속 중...' : '확인'}
+          onClick={isMaster ? handleCreateRoom : handleEnterRoom}
+          disabled={isLoading || isSuccess}
           style={{ width: '100%', bottom: bottomButtonHeight }}
           bottom
         />

diff --git a/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx b/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx
@@ -9,13 +9,13 @@ import { NICKNAME_MIN_LENGTH, NICKNAME_MAX_LENGTH } from '@/constants/config';
 
 interface NicknameInputProps {
   nicknameInputRef: RefObject<HTMLInputElement>;
-  handleCreateOrEnterRoom: () => void;
+  handleAccessRoom: () => void;
 }
 const randomNickname = createRandomNickname();
 
-const NicknameInput = ({ nicknameInputRef, handleCreateOrEnterRoom }: NicknameInputProps) => {
+const NicknameInput = ({ nicknameInputRef, handleAccessRoom }: NicknameInputProps) => {
   const { nickname, handleChangeInput, handleKeyDown } = useNicknameInput({
-    handleCreateOrEnterRoom,
+    handleAccessRoom,
   });
 
   const [statusMessage, setStatusMessage] = useState('');

diff --git a/frontend/src/pages/NicknamePage/components/NicknameInput/hooks/useNicknameInput.ts b/frontend/src/pages/NicknamePage/components/NicknameInput/hooks/useNicknameInput.ts
@@ -3,10 +3,10 @@ import { ChangeEvent, useState } from 'react';
 import { NICKNAME_MAX_LENGTH } from '@/constants/config';
 
 interface UseNicknameInputProps {
-  handleCreateOrEnterRoom: () => void;
+  handleAccessRoom: () => void;
 }
 
-const useNicknameInput = ({ handleCreateOrEnterRoom }: UseNicknameInputProps) => {
+const useNicknameInput = ({ handleAccessRoom }: UseNicknameInputProps) => {
   const [nickname, setNickname] = useState('');
 
   const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
@@ -17,7 +17,7 @@ const useNicknameInput = ({ handleCreateOrEnterRoom }: UseNicknameInputProps) =>
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
-      handleCreateOrEnterRoom();
+      handleAccessRoom();
     }
   };
 

diff --git a/...icknamePage/hooks/useCreateOrEnterRoom.ts → ...pages/NicknamePage/hooks/useAccessRoom.ts b/...icknamePage/hooks/useCreateOrEnterRoom.ts → ...pages/NicknamePage/hooks/useAccessRoom.ts
@@ -4,30 +4,23 @@ import { useParams } from 'react-router-dom';
 import useCreateRoom from './useCreateRoom';
 import useEnterRoom from './useEnterRoom';
 
-const useCreateOrEnterRoom = () => {
-  const nicknameInputRef = useRef<HTMLInputElement>(null);
+const useAccessRoom = () => {
   const { roomUuid } = useParams();
+  const nicknameInputRef = useRef<HTMLInputElement>(null);
 
   // roomUuId가 없다 -> 초대링크를 받지 않은 master이다.
   const isMaster = !roomUuid;
 
   const { createRoomMutation, handleCreateRoom } = useCreateRoom({ nicknameInputRef });
   const { enterRoomMutation, handleEnterRoom } = useEnterRoom({ nicknameInputRef });
 
-  const handleCreateOrEnterRoom = () => {
-    if (isMaster) {
-      handleCreateRoom();
-    } else {
-      handleEnterRoom();
-    }
-  };
-
   return {
     nicknameInputRef,
-    handleCreateOrEnterRoom,
+    handleCreateRoom,
+    handleEnterRoom,
     isLoading: isMaster ? createRoomMutation.isPending : enterRoomMutation.isPending,
     isSuccess: createRoomMutation.isSuccess || enterRoomMutation.isSuccess,
   };
 };
 
-export default useCreateOrEnterRoom;
+export default useAccessRoom;