merge: 리액트 폴더 구조 개선 #276

[REFACTOR] 리액트 폴더 구조 개선 (pages/components)

frontend/src/components/common/AlertModal/AlertModal.stories.tsx → frontend/src/components/AlertModal/AlertModal.stories.tsx

@@ -3,7 +3,7 @@ import { fn } from '@storybook/test';
 import { useState } from 'react';
 
 import AlertModal from './AlertModal';
-import Button from '../Button/Button';
+import Button from '../common/Button/Button';
 
 const meta = {
   title: 'modal/AlertModal',

frontend/src/components/common/AlertModal/AlertModal.tsx → frontend/src/components/AlertModal/AlertModal.tsx

@@ -1,7 +1,7 @@
 import { Fragment, RefObject } from 'react';
 
 import { alertModalTitle, alertText, messageContainer } from './AlertModal.styled';
-import Modal from '../Modal/Modal';
+import Modal from '../common/Modal/Modal';
 
 interface AlertModalProps {
   isOpen: boolean;

frontend/src/components/common/InviteModal/InviteModal.styled.ts → frontend/src/components/InviteModal/InviteModal.styled.ts

@@ -19,7 +19,6 @@ export const inviteModalUl = css`
 `;
 
 export const qrcodeWrapper = css`
-
   display: flex;
   justify-content: center;
   align-items: center;

frontend/src/components/common/InviteModal/InviteModal.tsx → frontend/src/components/InviteModal/InviteModal.tsx

@@ -1,6 +1,7 @@
 import { RefObject } from 'react';
 import QRCode from 'react-qr-code';
 
+import useClipBoard from './hooks/useClipBoard';
 import {
   inviteModalLi,
   inviteModalTitle,
@@ -12,8 +13,7 @@ import {
   inviteModalText,
   qrcodeWrapper,
 } from './InviteModal.styled';
-import useClipBoard from './useClipBoard';
-import Modal from '../Modal/Modal';
+import Modal from '../common/Modal/Modal';
 
 import CopyIcon from '@/assets/images/copyIcon.png';
 import { INVITE_URL } from '@/constants/url';

frontend/src/components/common/RoomSettingModal/CategoryDropdown/CategoryDropdown.tsx → frontend/src/components/RoomSettingModal/CategoryDropdown/CategoryDropdown.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import { emptyLayout } from './CategoryDropdown.styled';
-import Dropdown from '../../Dropdown/Dropdown';
 import useCategoryListQuery from '../hooks/useCategoryListQuery';
 
+import Dropdown from '@/components/common/Dropdown/Dropdown';
 import { Category } from '@/types/room';
 
 interface CategoryDropdownProps<T> {

frontend/src/components/common/RoomSettingModal/RoomSettingModal.stories.tsx → frontend/src/components/RoomSettingModal/RoomSettingModal.stories.tsx

@@ -3,7 +3,7 @@ import { fn } from '@storybook/test';
 import { useState } from 'react';
 
 import RoomSettingModal from './RoomSettingModal';
-import Button from '../Button/Button';
+import Button from '../common/Button/Button';
 
 const meta = {
   title: 'modal/RoomSettingModal',

frontend/src/components/common/RoomSettingModal/RoomSettingModal.tsx → frontend/src/components/RoomSettingModal/RoomSettingModal.tsx

@@ -9,7 +9,7 @@ import {
   roomSettingModalLayout,
   roomSettingModalTitle,
 } from './RoomSettingModal.styled';
-import Modal from '../Modal/Modal';
+import Modal from '../common/Modal/Modal';
 
 import { POLLING_DELAY } from '@/constants/config';
 

frontend/src/components/layout/Header/Header.tsx

@@ -19,14 +19,14 @@ import useRoutePath from './hooks/useRoutePath';
 import ArrowLeft from '@/assets/images/arrowLeft.svg';
 import ExitIcon from '@/assets/images/exitIcon.svg';
 import SettingIcon from '@/assets/images/settingIcon.svg';
+import AlertModal from '@/components/AlertModal/AlertModal';
 import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
-import AlertModal from '@/components/common/AlertModal/AlertModal';
-import RoomSettingModal from '@/components/common/RoomSettingModal/RoomSettingModal';
-import { convertMsecToSecond } from '@/components/SelectContainer/Timer/Timer.util';
+import RoomSettingModal from '@/components/RoomSettingModal/RoomSettingModal';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 import useFocus from '@/hooks/useFocus';
 import useGetUserInfo from '@/hooks/useGetUserInfo';
 import useModal from '@/hooks/useModal';
+import { convertMsecToSecond } from '@/pages/GamePage/components/SelectContainer/Timer/Timer.util';
 
 interface HeaderProps {
   title: string;

frontend/src/pages/GamePage/GamePage.tsx

@@ -1,6 +1,7 @@
+import SelectContainer from './components/SelectContainer/SelectContainer';
+
 import Content from '@/components/layout/Content/Content';
 import { GameHeader } from '@/components/layout/Header/Header';
-import SelectContainer from '@/components/SelectContainer/SelectContainer';
 import TopicContainer from '@/components/TopicContainer/TopicContainer';
 
 const GamePage = () => {

frontend/src/components/common/SelectButton/SelectButton.tsx → frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx

@@ -1,6 +1,7 @@
 import useCompleteSelectionMutation from './SelectButton.hook';
-import Button from '../Button/Button';
-import { bottomButtonLayout } from '../Button/Button.styled';
+
+import Button from '@/components/common/Button/Button';
+import { bottomButtonLayout } from '@/components/common/Button/Button.styled';
 
 interface SelectButtonProps {
   contentId: number;

frontend/src/components/SelectContainer/SelectContainer.tsx → frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx

@@ -2,10 +2,10 @@ import { useParams } from 'react-router-dom';
 
 import useSelectOption from './hooks/useSelectOption';
 import { selectContainerLayout, selectSection } from './SelectContainer.styled';
+import SelectOption from './SelectOption/SelectOption';
 import Timer from './Timer/Timer';
-import SelectButton from '../common/SelectButton/SelectButton';
+import SelectButton from '../SelectButton/SelectButton';
 
-import SelectOption from '@/components/SelectOption/SelectOption';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
 const SelectContainer = () => {

frontend/src/components/SelectContainer/Timer/Timer.tsx → frontend/src/pages/GamePage/components/SelectContainer/Timer/Timer.tsx

@@ -9,7 +9,7 @@ import {
   timerText,
   timerWrapper,
 } from './Timer.styled';
-import { convertMsecToSecond, formatLeftRoundTime, isAlertTimer } from './Timer.util';
+import { formatLeftRoundTime, isAlertTimer } from './Timer.util';
 import useVoteIsFinished from '../hooks/useVoteIsFinished';
 
 import DdangkongTimer from '@/assets/images/ddangkongTimer.webp';

frontend/src/components/SelectContainer/Timer/hooks/useVoteTimer.ts → frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts

@@ -1,7 +1,7 @@
 import useTimer from './useTimer';
+import useCompleteSelectionMutation from '../../../SelectButton/SelectButton.hook';
 import { convertMsecToSecond } from '../Timer.util';
 
-import useCompleteSelectionMutation from '@/components/common/SelectButton/SelectButton.hook';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
 const DEFAULT_TIME_LIMIT_SEC = 10;

frontend/src/pages/GameResultPage/GameResultPage.tsx

@@ -1,6 +1,6 @@
+import GameResult from './components/GameResult/GameResult';
 import { useIsRoomInitial } from './hooks/useCheckRoomReset';
 
-import GameResult from '@/components/GameResult/GameResult';
 import Content from '@/components/layout/Content/Content';
 
 const GameResultPage = () => {

frontend/src/components/common/FinalButton/FinalButton.tsx → frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.tsx

@@ -1,10 +1,10 @@
 import { useParams } from 'react-router-dom';
 
 import getFinalButtonText from './FinalButton.utils';
-import Button from '../Button/Button';
-import { bottomButtonLayout } from '../Button/Button.styled';
+import useResetRoomMutation from './hooks/useResetRoomMutation';
 
-import { useResetRoomMutation } from '@/components/GameResult/GameResult.hook';
+import Button from '@/components/common/Button/Button';
+import { bottomButtonLayout } from '@/components/common/Button/Button.styled';
 import useGetUserInfo from '@/hooks/useGetUserInfo';
 
 const FinalButton = () => {

frontend/src/pages/GameResultPage/components/GameResult/FinalButton/hooks/useResetRoomMutation.ts

@@ -0,0 +1,11 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { resetRoom } from '@/apis/room';
+
+const useResetRoomMutation = (roomId: number) => {
+  return useMutation({
+    mutationFn: async () => await resetRoom(roomId),
+  });
+};
+
+export default useResetRoomMutation;

frontend/src/components/GameResult/GameResult.tsx → frontend/src/pages/GameResultPage/components/GameResult/GameResult.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 
-import { useMatchingResultQuery } from './GameResult.hook';
+import FinalButton from './FinalButton/FinalButton';
 import {
   gameResultLayout,
   rankListContainer,
@@ -9,15 +9,15 @@ import {
   noMatchingText,
   floatingButton,
 } from './GameResult.styled';
+import GameResultItem from './GameResultItem/GameResultItem';
+import useMatchingResultQuery from './hooks/useMatchingResultQuery';
 import useScrollControl from './hooks/useScrollControl';
 import useScrollState from './hooks/useScrollState';
-import FinalButton from '../common/FinalButton/FinalButton';
-import Spinner from '../common/Spinner/Spinner';
-import GameResultItem from '../GameResultItem/GameResultItem';
 
 import ArrowDown from '@/assets/images/arrowDown.svg';
 import ArrowUp from '@/assets/images/arrowUp.svg';
 import SadDdangKong from '@/assets/images/sadDdangkong.webp';
+import Spinner from '@/components/common/Spinner/Spinner';
 
 const GameResult = () => {
   const { matchedMembers, existMatching, isLoading } = useMatchingResultQuery();

frontend/src/components/GameResult/GameResult.hook.ts → frontend/src/pages/GameResultPage/components/GameResult/hooks/useMatchingResultQuery.ts

@@ -1,8 +1,7 @@
-import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 
 import { fetchMatchingResult } from '@/apis/balanceContent';
-import { resetRoom } from '@/apis/room';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 import useGetUserInfo from '@/hooks/useGetUserInfo';
 import { MatchingResult, MemberMatchingInfo } from '@/types/balanceContent';
@@ -12,7 +11,7 @@ type MatchingResultQueryResponse = UseQueryResult<MatchingResult, Error> & {
   existMatching?: boolean;
 };
 
-export const useMatchingResultQuery = (): MatchingResultQueryResponse => {
+const useMatchingResultQuery = (): MatchingResultQueryResponse => {
   const { roomId } = useParams();
   const {
     member: { memberId },
@@ -35,8 +34,4 @@ export const useMatchingResultQuery = (): MatchingResultQueryResponse => {
   };
 };
 
-export const useResetRoomMutation = (roomId: number) => {
-  return useMutation({
-    mutationFn: async () => await resetRoom(roomId),
-  });
-};
+export default useMatchingResultQuery;

frontend/src/pages/MainPage/MainPage.tsx

@@ -1,3 +1,4 @@
+import useCreateRoom from './hooks/useCreateRoom';
 import {
   mainPageLayout,
   logoWrapper,
@@ -7,7 +8,6 @@ import {
   titleContainer,
   buttonText,
 } from './MainPage.styled';
-import { useCreateRoom } from './useCreateRoom';
 
 import Ddangkong from '@/assets/images/ddangkong.webp';
 import Button from '@/components/common/Button/Button';

frontend/src/pages/MainPage/useCreateRoom.ts → frontend/src/pages/MainPage/hooks/useCreateRoom.ts

@@ -2,11 +2,14 @@ import { useNavigate } from 'react-router-dom';
 
 import { ROUTES } from '@/constants/routes';
 
-export const useCreateRoom = () => {
+const useCreateRoom = () => {
   const navigate = useNavigate();
+
   const handleRoomCreate = () => {
     navigate(ROUTES.nickname);
   };
 
   return { handleRoomCreate };
 };
+
+export default useCreateRoom;

frontend/src/pages/NicknamePage/NicknamePage.styled.ts

@@ -57,7 +57,9 @@ export const nicknameLengthText = css`
 export const noVoteTextContainer = css`
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
+  height: 50vh;
 `;
 
 export const noVoteText = css`

frontend/src/pages/NicknamePage/NicknamePage.tsx

@@ -2,7 +2,8 @@ import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
-import NicknameInput from './NicknameInput/NicknameInput';
+import NicknameInput from './components/NicknameInput/NicknameInput';
+import useMakeOrEnterRoom from './hooks/useMakeOrEnterRoom';
 import {
   profileWrapper,
   profileImg,
@@ -11,7 +12,6 @@ import {
   angryImage,
   nicknameContainer,
 } from './NicknamePage.styled';
-import useMakeOrEnterRoom from './useMakeOrEnterRoom';
 
 import { isJoinableRoom } from '@/apis/room';
 import AngryDdangkong from '@/assets/images/angryDdangkong.webp';
@@ -31,6 +31,10 @@ const NicknamePage = () => {
     enabled: !!roomUuid,
   });
 
+  const goToHome = () => {
+    window.location.href = '/';
+  };
+
   useEffect(() => {
     if (nicknameInputRef.current) {
       nicknameInputRef.current.focus();
@@ -42,6 +46,7 @@ const NicknamePage = () => {
       <div css={noVoteTextContainer}>
         <img src={AngryDdangkong} alt="화난 땅콩" css={angryImage} />
         <span css={noVoteText}>잘못된 링크에 접속했어요 :{`)`}</span>
+        <Button onClick={goToHome} text="홈으로" size="medium" radius="medium" />
       </div>
     );
 

frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.tsx → frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx

@@ -2,7 +2,7 @@ import { RefObject, useEffect, useState } from 'react';
 
 import useNicknameInput from './hooks/useNicknameInput';
 import { nicknameInput, nicknameInputContainer, nicknameLengthText } from './NicknameInput.styled';
-import createRandomNickname from '../createRandomNickname';
+import createRandomNickname from './NicknameInput.utils';
 
 import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
 import { NICKNAME_MIN_LENGTH, NICKNAME_MAX_LENGTH } from '@/constants/config';

frontend/src/pages/ReadyPage/ReadyPage.tsx

@@ -1,7 +1,8 @@
+import ReadyMembersContainer from './components/ReadyMembersContainer/ReadyMembersContainer';
+import RoomSetting from './components/RoomSetting/RoomSetting';
+import StartButtonContainer from './components/StartButtonContainer/StartButtonContainer';
+
 import Content from '@/components/layout/Content/Content';
-import ReadyMembersContainer from '@/components/ReadyMembersContainer/ReadyMembersContainer';
-import RoomSetting from '@/components/RoomSetting/RoomSetting';
-import StartButtonContainer from '@/components/StartButtonContainer/StartButtonContainer';
 
 const ReadyPage = () => {
   return (

frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.tsx → frontend/src/pages/ReadyPage/components/ReadyMembersContainer/ReadyMembersContainer.tsx

@@ -12,11 +12,11 @@ import {
   inviteButton,
   profileImage,
 } from './ReadyMembersContainer.styled';
-import A11yOnly from '../common/a11yOnly/A11yOnly';
 
 import crownIcon from '@/assets/images/crownIcon.webp';
 import SillyDdangkongMedium from '@/assets/images/sillyDdangkongMedium.webp';
-import InviteModal from '@/components/common/InviteModal/InviteModal';
+import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
+import InviteModal from '@/components/InviteModal/InviteModal';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
 import useModal from '@/hooks/useModal';

frontend/src/components/RoomSetting/RoomSetting.tsx → frontend/src/pages/ReadyPage/components/RoomSetting/RoomSetting.tsx

@@ -10,7 +10,7 @@ import {
 } from './RoomSetting.styled';
 
 import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
-import RoomSettingModal from '@/components/common/RoomSettingModal/RoomSettingModal';
+import RoomSettingModal from '@/components/RoomSettingModal/RoomSettingModal';
 import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
 import useGetUserInfo from '@/hooks/useGetUserInfo';
 import useModal from '@/hooks/useModal';
@@ -22,6 +22,7 @@ const RoomSetting = () => {
     member: { isMaster },
   } = useGetUserInfo();
   const { show } = useModal();
+
   const screenReaderRoomSetting = `
         방 정보.
         카테고리 ${roomSetting.category.label}. 

frontend/src/components/StartButtonContainer/StartButton/StartButton.tsx → frontend/src/pages/ReadyPage/components/StartButtonContainer/StartButton/StartButton.tsx

@@ -1,4 +1,4 @@
-import { useGameStart } from './hooks/useGameStart';
+import useGameStart from './hooks/useGameStart';
 import getStartButtonText from './StartButton.utils';
 
 import Button from '@/components/common/Button/Button';