refactor: 방 생성과 방 참여 로직 분리 #401

frontend/src/pages/NicknamePage/NicknamePage.tsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import NicknameInput from './components/NicknameInput/NicknameInput';
-import useMakeOrEnterRoom from './hooks/useMakeOrEnterRoom';
+import useCreateOrEnterRoom from './hooks/useCreateOrEnterRoom';
 import {
   profileWrapper,
   profileImg,
@@ -21,7 +21,7 @@ import Content from '@/components/layout/Content/Content';
 import useButtonHeightOnKeyboard from '@/hooks/useButtonHeightOnKeyboard';
 
 const NicknamePage = () => {
-  const { nicknameInputRef, handleMakeOrEnterRoom, isLoading } = useMakeOrEnterRoom();
+  const { nicknameInputRef, handleCreateOrEnterRoom, isLoading } = useCreateOrEnterRoom();
   const { roomUuid } = useParams();
   const { bottomButtonHeight } = useButtonHeightOnKeyboard();
 
@@ -58,10 +58,10 @@ const NicknamePage = () => {
       <div css={nicknameContainer}>
         <NicknameInput
           nicknameInputRef={nicknameInputRef}
-          handleMakeOrEnterRoom={handleMakeOrEnterRoom}
+          handleCreateOrEnterRoom={handleCreateOrEnterRoom}
         />
         <Button
-          onClick={handleMakeOrEnterRoom}
+          onClick={handleCreateOrEnterRoom}
           disabled={isLoading}
           text={isLoading ? '접속 중...' : '확인'}
           style={{ width: '100%', bottom: bottomButtonHeight }}

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>;
-  handleMakeOrEnterRoom: () => void;
+  handleCreateOrEnterRoom: () => void;
 }
 const randomNickname = createRandomNickname();
 
-const NicknameInput = ({ nicknameInputRef, handleMakeOrEnterRoom }: NicknameInputProps) => {
+const NicknameInput = ({ nicknameInputRef, handleCreateOrEnterRoom }: NicknameInputProps) => {
   const { nickname, handleChangeInput, handleKeyDown } = useNicknameInput({
-    handleMakeOrEnterRoom,
+    handleCreateOrEnterRoom,
   });
 
   const [statusMessage, setStatusMessage] = useState('');

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 {
-  handleMakeOrEnterRoom: () => void;
+  handleCreateOrEnterRoom: () => void;
 }
 
-const useNicknameInput = ({ handleMakeOrEnterRoom }: UseNicknameInputProps) => {
+const useNicknameInput = ({ handleCreateOrEnterRoom }: UseNicknameInputProps) => {
   const [nickname, setNickname] = useState('');
 
   const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
@@ -17,7 +17,7 @@ const useNicknameInput = ({ handleMakeOrEnterRoom }: UseNicknameInputProps) => {
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
-      handleMakeOrEnterRoom();
+      handleCreateOrEnterRoom();
     }
   };
 

frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts

@@ -0,0 +1,32 @@
+import { useRef } from 'react';
+import { useParams } from 'react-router-dom';
+
+import useCreateRoom from './useCreateRoom';
+import useEnterRoom from './useEnterRoom';
+
+const useCreateOrEnterRoom = () => {
+  const nicknameInputRef = useRef<HTMLInputElement>(null);
+  const { roomUuid } = useParams();
+
+  // 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,
+    isLoading: isMaster ? createRoomMutation.isPending : enterRoomMutation.isPending,
+  };
+};
+
+export default useCreateOrEnterRoom;

frontend/src/pages/NicknamePage/hooks/useCreateRoom.ts

@@ -0,0 +1,37 @@
+import { useMutation } from '@tanstack/react-query';
+import { RefObject } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { createRoom } from '@/apis/room';
+import { ROUTES } from '@/constants/routes';
+import useThrottle from '@/hooks/useThrottle';
+import { CreateOrEnterRoomResponse } from '@/types/room';
+import { CustomError } from '@/utils/error';
+
+interface useCreateRoomProps {
+  nicknameInputRef: RefObject<HTMLInputElement>;
+}
+
+const useCreateRoom = ({ nicknameInputRef }: useCreateRoomProps) => {
+  const navigate = useNavigate();
+
+  const createRoomMutation = useMutation<CreateOrEnterRoomResponse, CustomError, string>({
+    mutationFn: createRoom,
+    onSuccess: (data) => {
+      navigate(ROUTES.ready(Number(data.roomId)), { replace: true });
+    },
+  });
+
+  const throttledCreateRoom = useThrottle(createRoomMutation.mutate);
+
+  const handleCreateRoom = () => {
+    if (createRoomMutation.isPending) return;
+
+    const nickname = nicknameInputRef.current?.value || nicknameInputRef.current?.placeholder || '';
+    throttledCreateRoom(nickname);
+  };
+
+  return { createRoomMutation, handleCreateRoom };
+};
+
+export default useCreateRoom;

frontend/src/pages/NicknamePage/hooks/useEnterRoom.ts

@@ -0,0 +1,42 @@
+import { useMutation } from '@tanstack/react-query';
+import { RefObject } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { enterRoom } from '@/apis/room';
+import { ROUTES } from '@/constants/routes';
+import useThrottle from '@/hooks/useThrottle';
+import { CreateOrEnterRoomResponse } from '@/types/room';
+import { CustomError } from '@/utils/error';
+
+interface useCreateRoomProps {
+  nicknameInputRef: RefObject<HTMLInputElement>;
+}
+
+const useEnterRoom = ({ nicknameInputRef }: useCreateRoomProps) => {
+  const navigate = useNavigate();
+  const { roomUuid } = useParams();
+
+  const enterRoomMutation = useMutation<
+    CreateOrEnterRoomResponse,
+    CustomError,
+    { nickname: string; roomUuid: string }
+  >({
+    mutationFn: ({ nickname, roomUuid }) => enterRoom(roomUuid, nickname),
+    onSuccess: (data) => {
+      navigate(ROUTES.ready(Number(data.roomId)), { replace: true });
+    },
+  });
+
+  const throttledEnterRoom = useThrottle(enterRoomMutation.mutate);
+
+  const handleEnterRoom = () => {
+    if (enterRoomMutation.isPending) return;
+
+    const nickname = nicknameInputRef.current?.value || nicknameInputRef.current?.placeholder || '';
+    throttledEnterRoom({ nickname, roomUuid: roomUuid || '' });
+  };
+
+  return { enterRoomMutation, handleEnterRoom };
+};
+
+export default useEnterRoom;