From 6daea6ff043a9780c79a9397a9f837c64e6d8c33 Mon Sep 17 00:00:00 2001 From: yiseungyun Date: Tue, 3 Dec 2024 03:10:03 +0900 Subject: [PATCH 1/7] =?UTF-8?q?refactor:=20=EC=8A=A4=ED=84=B0=EB=94=94=20?= =?UTF-8?q?=EC=84=B8=EC=85=98=20=EB=AA=A9=EB=A1=9D=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=8A=A4=ED=84=B0=EB=94=94=20=EC=B1=84=EB=84=90=EB=A1=9C=20?= =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 직관적으로 채널이 더 와닿을거 같아 수정 - 리스트/목록 둘다 쓰는 부분이 어색해서 페이지 제목에 그냥 질문지 리스트로 통일 --- frontend/src/components/common/Sidebar/routesConfig.tsx | 2 +- frontend/src/pages/QuestionListPage/QuestionListPage.tsx | 2 +- frontend/src/pages/SessionListPage/SessionListPage.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/Sidebar/routesConfig.tsx b/frontend/src/components/common/Sidebar/routesConfig.tsx index d16ffdae..29f6ece3 100644 --- a/frontend/src/components/common/Sidebar/routesConfig.tsx +++ b/frontend/src/components/common/Sidebar/routesConfig.tsx @@ -23,7 +23,7 @@ const commonRoutes = [ }, { path: "/sessions", - label: "스터디 세션 목록", + label: "스터디 채널", icon: , }, ]; diff --git a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx index 59eaaecd..1ef9a9d8 100644 --- a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx +++ b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx @@ -24,7 +24,7 @@ const QuestionListPage = () => {

- 질문지 목록 + 질문지 리스트

diff --git a/frontend/src/pages/SessionListPage/SessionListPage.tsx b/frontend/src/pages/SessionListPage/SessionListPage.tsx index 23f40099..f0f76cc0 100644 --- a/frontend/src/pages/SessionListPage/SessionListPage.tsx +++ b/frontend/src/pages/SessionListPage/SessionListPage.tsx @@ -26,7 +26,7 @@ const SessionListPage = () => {
-

면접 스터디 세션 목록

+

스터디 채널

Date: Tue, 3 Dec 2024 03:11:01 +0900 Subject: [PATCH 2/7] =?UTF-8?q?refactor:=20=EC=84=B8=EC=85=98=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=83=80=EC=9E=85=EA=B3=BC=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=84=B8=EC=85=98=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8F=B4=EB=8D=94=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../hooks/__test__/mocks/useSession.mock.ts | 5 +++- .../hooks/__test__/useSession.test.ts | 24 ++++++++++--------- .../SessionPage/hooks/usePeerConnection.ts | 2 +- .../pages/SessionPage/hooks/useReaction.ts | 2 +- .../src/pages/SessionPage/hooks/useSession.ts | 2 +- .../SessionPage/hooks/useSocketEvents.ts | 2 +- .../src/pages/SessionPage/hooks/useStudy.ts | 2 +- .../SessionPage}/type/session.d.ts | 0 .../SessionPage}/type/session.test.d.ts | 0 .../pages/SessionPage/view/SessionHeader.tsx | 2 +- .../pages/SessionPage/view/SessionSidebar.tsx | 2 +- .../pages/SessionPage/view/VideoLayout.tsx | 2 +- 12 files changed, 25 insertions(+), 20 deletions(-) rename frontend/src/{ => pages/SessionPage}/hooks/__test__/mocks/useSession.mock.ts (88%) rename frontend/src/{ => pages/SessionPage}/hooks/__test__/useSession.test.ts (95%) rename frontend/src/{hooks => pages/SessionPage}/type/session.d.ts (100%) rename frontend/src/{hooks => pages/SessionPage}/type/session.test.d.ts (100%) diff --git a/frontend/src/hooks/__test__/mocks/useSession.mock.ts b/frontend/src/pages/SessionPage/hooks/__test__/mocks/useSession.mock.ts similarity index 88% rename from frontend/src/hooks/__test__/mocks/useSession.mock.ts rename to frontend/src/pages/SessionPage/hooks/__test__/mocks/useSession.mock.ts index a5996b2c..259900d9 100644 --- a/frontend/src/hooks/__test__/mocks/useSession.mock.ts +++ b/frontend/src/pages/SessionPage/hooks/__test__/mocks/useSession.mock.ts @@ -1,4 +1,7 @@ -import { MockPeerConnections, MockSocket } from "../../type/session.test"; +import { + MockPeerConnections, + MockSocket, +} from "@/pages/SessionPage/type/session.test"; export const mockSocket: MockSocket = { emit: jest.fn(), diff --git a/frontend/src/hooks/__test__/useSession.test.ts b/frontend/src/pages/SessionPage/hooks/__test__/useSession.test.ts similarity index 95% rename from frontend/src/hooks/__test__/useSession.test.ts rename to frontend/src/pages/SessionPage/hooks/__test__/useSession.test.ts index dccca483..eaa5bdbd 100644 --- a/frontend/src/hooks/__test__/useSession.test.ts +++ b/frontend/src/pages/SessionPage/hooks/__test__/useSession.test.ts @@ -2,14 +2,6 @@ import { renderHook } from "@testing-library/react"; import useSocketStore from "@stores/useSocketStore"; import { useNavigate } from "react-router-dom"; import { act } from "react"; -import { - mockMediaStream, - mockNavigate, - mockPeerConnections, - mockSocket, - mockSocketStore, - mockToast, -} from "@hooks/__test__/mocks/useSession.mock"; import { SESSION_EMIT_EVENT, SESSION_LISTEN_EVENT, @@ -18,13 +10,21 @@ import { SIGNAL_LISTEN_EVENT } from "@/constants/WebSocket/SignalingEvent"; import useMediaDevices from "@/pages/SessionPage/hooks/useMediaDevices"; import usePeerConnection from "@/pages/SessionPage/hooks/usePeerConnection"; import { useSession } from "@/pages/SessionPage/hooks/useSession"; +import { + mockMediaStream, + mockNavigate, + mockPeerConnections, + mockSocket, + mockSocketStore, + mockToast, +} from "./mocks/useSession.mock"; const REACTION_DURATION = 3000; // jest.mock: 실제 모듈대신 mock 모듈을 사용하도록 설정 -jest.mock("@hooks/session/useMediaDevices"); +jest.mock("@/pages/SessionPage/hooks/useMediaDevices"); -jest.mock("@hooks/session/usePeerConnection", () => ({ +jest.mock("@/pages/SessionPage/hooks/usePeerConnection", () => ({ __esModule: true, default: jest.fn().mockReturnValue({ createPeerConnection: jest.fn(), @@ -161,7 +161,9 @@ describe("useSession Hook 테스트", () => { expect(mockSocket.emit).not.toHaveBeenCalled(); }); - /*it("미디어 스트림 획득 실패 시 에러 처리", async () => { + /* + * MEMO: 기존에 미디어 스트림 없으면 에러 처리 진행했으나, 없어도 입장 가능하게 변경되어 테스트 주석 처리 + it("미디어 스트림 획득 실패 시 에러 처리", async () => { (useMediaDevices as jest.Mock).mockReturnValue({ ...useMediaDevices(), getMedia: jest.fn().mockResolvedValue(null), diff --git a/frontend/src/pages/SessionPage/hooks/usePeerConnection.ts b/frontend/src/pages/SessionPage/hooks/usePeerConnection.ts index 5201c700..899073b9 100644 --- a/frontend/src/pages/SessionPage/hooks/usePeerConnection.ts +++ b/frontend/src/pages/SessionPage/hooks/usePeerConnection.ts @@ -1,6 +1,6 @@ import { useRef, useState } from "react"; import { Socket } from "socket.io-client"; -import { PeerConnection } from "@hooks/type/session"; +import { PeerConnection } from "@/pages/SessionPage/type/session"; import { SIGNAL_EMIT_EVENT } from "@/constants/WebSocket/SignalingEvent.ts"; interface User { diff --git a/frontend/src/pages/SessionPage/hooks/useReaction.ts b/frontend/src/pages/SessionPage/hooks/useReaction.ts index afe3b0ce..b6e1f1e5 100644 --- a/frontend/src/pages/SessionPage/hooks/useReaction.ts +++ b/frontend/src/pages/SessionPage/hooks/useReaction.ts @@ -7,7 +7,7 @@ import { useState, } from "react"; import { Socket } from "socket.io-client"; -import { PeerConnection } from "@/hooks/type/session"; +import { PeerConnection } from "@/pages/SessionPage/type/session"; import { SESSION_EMIT_EVENT } from "@/constants/WebSocket/SessionEvent"; const REACTION_DURATION = 3000; diff --git a/frontend/src/pages/SessionPage/hooks/useSession.ts b/frontend/src/pages/SessionPage/hooks/useSession.ts index 42612459..888c58ae 100644 --- a/frontend/src/pages/SessionPage/hooks/useSession.ts +++ b/frontend/src/pages/SessionPage/hooks/useSession.ts @@ -3,7 +3,7 @@ import useToast from "@hooks/useToast"; import useMediaDevices from "./useMediaDevices"; import usePeerConnection from "./usePeerConnection"; import useSocket from "@hooks/useSocket"; -import { Participant, RoomMetadata } from "@hooks/type/session"; +import { Participant, RoomMetadata } from "@/pages/SessionPage/type/session"; import { useMediaStreamCleanup } from "./useMediaStreamCleanup"; import { usePeerConnectionCleanup } from "./usePeerConnectionCleanup"; import { useReaction } from "./useReaction"; diff --git a/frontend/src/pages/SessionPage/hooks/useSocketEvents.ts b/frontend/src/pages/SessionPage/hooks/useSocketEvents.ts index ed3f7e4d..c6bff687 100644 --- a/frontend/src/pages/SessionPage/hooks/useSocketEvents.ts +++ b/frontend/src/pages/SessionPage/hooks/useSocketEvents.ts @@ -15,7 +15,7 @@ import { RoomMetadata, PeerConnection, ProgressResponse, -} from "@hooks/type/session"; +} from "@/pages/SessionPage/type/session"; import { SIGNAL_EMIT_EVENT, SIGNAL_LISTEN_EVENT, diff --git a/frontend/src/pages/SessionPage/hooks/useStudy.ts b/frontend/src/pages/SessionPage/hooks/useStudy.ts index 5f25a461..47526232 100644 --- a/frontend/src/pages/SessionPage/hooks/useStudy.ts +++ b/frontend/src/pages/SessionPage/hooks/useStudy.ts @@ -1,6 +1,6 @@ import { STUDY_EMIT_EVENT } from "@/constants/WebSocket/StudyEvent"; import { Socket } from "socket.io-client"; -import { RoomMetadata } from "@hooks/type/session"; +import { RoomMetadata } from "@/pages/SessionPage/type/session"; const useStudy = ( socket: Socket | null, diff --git a/frontend/src/hooks/type/session.d.ts b/frontend/src/pages/SessionPage/type/session.d.ts similarity index 100% rename from frontend/src/hooks/type/session.d.ts rename to frontend/src/pages/SessionPage/type/session.d.ts diff --git a/frontend/src/hooks/type/session.test.d.ts b/frontend/src/pages/SessionPage/type/session.test.d.ts similarity index 100% rename from frontend/src/hooks/type/session.test.d.ts rename to frontend/src/pages/SessionPage/type/session.test.d.ts diff --git a/frontend/src/pages/SessionPage/view/SessionHeader.tsx b/frontend/src/pages/SessionPage/view/SessionHeader.tsx index 536b4d2c..bbfc950f 100644 --- a/frontend/src/pages/SessionPage/view/SessionHeader.tsx +++ b/frontend/src/pages/SessionPage/view/SessionHeader.tsx @@ -1,4 +1,4 @@ -import { RoomMetadata } from "@hooks/type/session"; +import { RoomMetadata } from "@/pages/SessionPage/type/session"; import { useEffect, useState } from "react"; interface SessionHeaderProps { diff --git a/frontend/src/pages/SessionPage/view/SessionSidebar.tsx b/frontend/src/pages/SessionPage/view/SessionSidebar.tsx index 6d58689e..567bac7f 100644 --- a/frontend/src/pages/SessionPage/view/SessionSidebar.tsx +++ b/frontend/src/pages/SessionPage/view/SessionSidebar.tsx @@ -2,7 +2,7 @@ import { FaClipboardList, FaFolder } from "react-icons/fa"; import { FaUserGroup } from "react-icons/fa6"; import { Socket } from "socket.io-client"; import { TbCrown } from "react-icons/tb"; -import { Question } from "@hooks/type/session"; +import { Question } from "@/pages/SessionPage/type/session"; interface ParticipantsData { nickname: string; diff --git a/frontend/src/pages/SessionPage/view/VideoLayout.tsx b/frontend/src/pages/SessionPage/view/VideoLayout.tsx index 03634dd3..473d1ca2 100644 --- a/frontend/src/pages/SessionPage/view/VideoLayout.tsx +++ b/frontend/src/pages/SessionPage/view/VideoLayout.tsx @@ -1,5 +1,5 @@ import VideoContainer from "@/components/session/VideoContainer"; -import { PeerConnection } from "@/hooks/type/session"; +import { PeerConnection } from "@/pages/SessionPage/type/session"; import { useAudioDetector } from "../hooks/useAudioDetector"; interface VideoLayoutProps { From 9c8b99d2a22a2be4210467fb8bf742ff18b3864c Mon Sep 17 00:00:00 2001 From: yiseungyun Date: Tue, 3 Dec 2024 03:31:23 +0900 Subject: [PATCH 3/7] =?UTF-8?q?refactor:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B7=B0=20=ED=8F=B4=EB=8D=94=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/MyPage/MyPage.tsx | 22 ++++++++++++++++++ frontend/src/pages/MyPage/view/MyPageView.tsx | 23 +++++++++++++++++++ frontend/src/routes.tsx | 4 ++-- 3 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 frontend/src/pages/MyPage/MyPage.tsx create mode 100644 frontend/src/pages/MyPage/view/MyPageView.tsx diff --git a/frontend/src/pages/MyPage/MyPage.tsx b/frontend/src/pages/MyPage/MyPage.tsx new file mode 100644 index 00000000..30f4241f --- /dev/null +++ b/frontend/src/pages/MyPage/MyPage.tsx @@ -0,0 +1,22 @@ +import { useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import useAuth from "@hooks/useAuth"; +import useToast from "@hooks/useToast"; +import MyPageView from "./view/MyPageView"; + +const MyPage = () => { + const { isLoggedIn } = useAuth(); + const toast = useToast(); + const navigate = useNavigate(); + + useEffect(() => { + if (!isLoggedIn) { + toast.error("로그인이 필요한 서비스입니다."); + navigate("/login", { replace: true }); + } + }, [isLoggedIn, navigate, toast]); + + return ; +}; + +export default MyPage; diff --git a/frontend/src/pages/MyPage/view/MyPageView.tsx b/frontend/src/pages/MyPage/view/MyPageView.tsx new file mode 100644 index 00000000..77f81940 --- /dev/null +++ b/frontend/src/pages/MyPage/view/MyPageView.tsx @@ -0,0 +1,23 @@ +import SidebarPageLayout from "@components/layout/SidebarPageLayout"; +import PageTitle from "@/components/common/Text/PageTitle"; +import ProfileEditModal from "@/pages/MyPage/view/ProfileEditModal"; +import Profile from "@/pages/MyPage/view/Profile"; +import QuestionSection from "@/pages/MyPage/view/QuestionSection"; +import useModal from "@/hooks/useModal"; + +const MyPageView = () => { + const modal = useModal(); + + return ( + + +
+ + + +
+ + ); +}; + +export default MyPageView; diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx index a78490be..0edbe193 100644 --- a/frontend/src/routes.tsx +++ b/frontend/src/routes.tsx @@ -1,5 +1,5 @@ import App from "./App.tsx"; -import CreateQuestionPage from "./pages/CreateQuestionPage.tsx"; +import CreateQuestionPage from "./pages/CreateQuestionPage/CreateQuestionPage.tsx"; import CreateSessionPage from "./pages/CreateSessionPage.tsx"; import QuestionDetailPage from "./pages/QuestionDetailPage/QuestionDetailPage.tsx"; import SessionListPage from "./pages/SessionListPage/SessionListPage.tsx"; @@ -8,7 +8,7 @@ import ErrorPage from "@/pages/ErrorPage.tsx"; import LoginPage from "@/pages/Login/LoginPage.tsx"; import QuestionListPage from "@/pages/QuestionListPage/QuestionListPage.tsx"; import AuthCallbackPage from "@/pages/Login/AuthCallbackPage.tsx"; -import MyPage from "@/pages/MyPage/index.tsx"; +import MyPage from "@/pages/MyPage/MyPage.tsx"; import ProtectedRouteLayout from "@components/layout/ProtectedRouteLayout.tsx"; export const routes = [ From decdf3d730ba5ac5d9a327b7288786dc17f59ec9 Mon Sep 17 00:00:00 2001 From: yiseungyun Date: Tue, 3 Dec 2024 03:34:06 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20=EC=A7=88=EB=AC=B8=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.tsx => AccessSection.tsx} | 2 +- .../index.tsx => CategorySection.tsx} | 4 +- .../QuestionInputSection/EditInput.tsx | 2 +- .../QuestionInputSection/QuestionInput.tsx | 4 +- .../QuestionInputSection/QuestionList.tsx | 2 +- .../QuestionInputSection/QustionItem.tsx | 0 .../QuestionInputSection/index.tsx | 2 +- .../index.tsx => TitleSection.tsx} | 2 +- .../data.ts => utils/categoryData.ts} | 0 .../textarea.ts => utils/textareaHeight.ts} | 0 .../CreateQuestionPage.tsx | 2 +- .../stores/useQuestionFormStore.ts | 0 .../CreateQuestionPage/view/QuestionForm.tsx} | 12 +- frontend/src/pages/MyPage/index.tsx | 22 -- frontend/src/pages/MyPage/view/index.tsx | 23 -- .../hooks/__test__/mocks/useSession.mock.ts | 2 +- .../SessionPage/hooks/usePeerConnection.ts | 2 +- .../pages/SessionPage/hooks/useReaction.ts | 2 +- .../src/pages/SessionPage/hooks/useSession.ts | 2 +- .../SessionPage/hooks/useSocketEvents.ts | 2 +- .../src/pages/SessionPage/hooks/useStudy.ts | 2 +- .../SessionPage/session/usePeerConnection.ts | 244 ++++++++++++++++++ .../pages/SessionPage/session/useReaction.ts | 84 ++++++ .../SessionPage/{type => types}/session.d.ts | 0 .../{type => types}/session.test.d.ts | 0 .../pages/SessionPage/view/SessionHeader.tsx | 2 +- .../pages/SessionPage/view/SessionSidebar.tsx | 2 +- .../pages/SessionPage/view/VideoLayout.tsx | 2 +- 28 files changed, 353 insertions(+), 70 deletions(-) rename frontend/src/components/questions/create/{QuestionForm/AccessSection/index.tsx => AccessSection.tsx} (81%) rename frontend/src/components/questions/create/{QuestionForm/CategorySection/index.tsx => CategorySection.tsx} (80%) rename frontend/src/components/questions/create/{QuestionForm => }/QuestionInputSection/EditInput.tsx (95%) rename frontend/src/components/questions/create/{QuestionForm => }/QuestionInputSection/QuestionInput.tsx (92%) rename frontend/src/components/questions/create/{QuestionForm => }/QuestionInputSection/QuestionList.tsx (94%) rename frontend/src/components/questions/create/{QuestionForm => }/QuestionInputSection/QustionItem.tsx (100%) rename frontend/src/components/questions/create/{QuestionForm => }/QuestionInputSection/index.tsx (88%) rename frontend/src/components/questions/create/{QuestionForm/TitleSection/index.tsx => TitleSection.tsx} (86%) rename frontend/src/components/questions/create/{QuestionForm/CategorySection/data.ts => utils/categoryData.ts} (100%) rename frontend/src/components/questions/create/{QuestionForm/utils/textarea.ts => utils/textareaHeight.ts} (100%) rename frontend/src/pages/{ => CreateQuestionPage}/CreateQuestionPage.tsx (92%) rename frontend/src/{ => pages/CreateQuestionPage}/stores/useQuestionFormStore.ts (100%) rename frontend/src/{components/questions/create/QuestionForm/index.tsx => pages/CreateQuestionPage/view/QuestionForm.tsx} (71%) delete mode 100644 frontend/src/pages/MyPage/index.tsx delete mode 100644 frontend/src/pages/MyPage/view/index.tsx create mode 100644 frontend/src/pages/SessionPage/session/usePeerConnection.ts create mode 100644 frontend/src/pages/SessionPage/session/useReaction.ts rename frontend/src/pages/SessionPage/{type => types}/session.d.ts (100%) rename frontend/src/pages/SessionPage/{type => types}/session.test.d.ts (100%) diff --git a/frontend/src/components/questions/create/QuestionForm/AccessSection/index.tsx b/frontend/src/components/questions/create/AccessSection.tsx similarity index 81% rename from frontend/src/components/questions/create/QuestionForm/AccessSection/index.tsx rename to frontend/src/components/questions/create/AccessSection.tsx index fe00083b..00603bca 100644 --- a/frontend/src/components/questions/create/QuestionForm/AccessSection/index.tsx +++ b/frontend/src/components/questions/create/AccessSection.tsx @@ -1,6 +1,6 @@ import SelectTitle from "@/components/common/Text/SelectTitle"; import AccessButton from "@/components/common/Button/AccessButton"; -import useQuestionFormStore from "@/stores/useQuestionFormStore"; +import useQuestionFormStore from "@/pages/CreateQuestionPage/stores/useQuestionFormStore"; const AccessSection = () => { const { access, setAccess } = useQuestionFormStore(); diff --git a/frontend/src/components/questions/create/QuestionForm/CategorySection/index.tsx b/frontend/src/components/questions/create/CategorySection.tsx similarity index 80% rename from frontend/src/components/questions/create/QuestionForm/CategorySection/index.tsx rename to frontend/src/components/questions/create/CategorySection.tsx index 5a752792..4d645bb4 100644 --- a/frontend/src/components/questions/create/QuestionForm/CategorySection/index.tsx +++ b/frontend/src/components/questions/create/CategorySection.tsx @@ -1,6 +1,6 @@ import SelectTitle from "@/components/common/Text/SelectTitle"; -import { options } from "./data"; -import useQuestionFormStore from "@/stores/useQuestionFormStore"; +import { options } from "./utils/categoryData"; +import useQuestionFormStore from "@/pages/CreateQuestionPage/stores/useQuestionFormStore"; import CategorySelect from "@/components/common/Select/CategorySelect"; const CategorySection = () => { diff --git a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/EditInput.tsx b/frontend/src/components/questions/create/QuestionInputSection/EditInput.tsx similarity index 95% rename from frontend/src/components/questions/create/QuestionForm/QuestionInputSection/EditInput.tsx rename to frontend/src/components/questions/create/QuestionInputSection/EditInput.tsx index 11f11049..2b29b06f 100644 --- a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/EditInput.tsx +++ b/frontend/src/components/questions/create/QuestionInputSection/EditInput.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef } from "react"; -import { adjustHeight } from "../utils/textarea"; +import { adjustHeight } from "../utils/textareaHeight"; interface EditInputProps { value: string; diff --git a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionInput.tsx b/frontend/src/components/questions/create/QuestionInputSection/QuestionInput.tsx similarity index 92% rename from frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionInput.tsx rename to frontend/src/components/questions/create/QuestionInputSection/QuestionInput.tsx index f3a77322..2de13123 100644 --- a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionInput.tsx +++ b/frontend/src/components/questions/create/QuestionInputSection/QuestionInput.tsx @@ -1,7 +1,7 @@ import { useEffect, useRef, useState } from "react"; -import useQuestionFormStore from "@/stores/useQuestionFormStore"; +import useQuestionFormStore from "@/pages/CreateQuestionPage/stores/useQuestionFormStore"; import useToast from "@/hooks/useToast"; -import { adjustHeight } from "../utils/textarea"; +import { adjustHeight } from "../utils/textareaHeight"; const QuestionInput = () => { const toast = useToast(); diff --git a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionList.tsx b/frontend/src/components/questions/create/QuestionInputSection/QuestionList.tsx similarity index 94% rename from frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionList.tsx rename to frontend/src/components/questions/create/QuestionInputSection/QuestionList.tsx index e82b7b06..0b44915d 100644 --- a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionList.tsx +++ b/frontend/src/components/questions/create/QuestionInputSection/QuestionList.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import useQuestionFormStore from "@/stores/useQuestionFormStore"; +import useQuestionFormStore from "@/pages/CreateQuestionPage/stores/useQuestionFormStore"; import QuestionItem from "./QustionItem"; import EditInput from "./EditInput"; diff --git a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QustionItem.tsx b/frontend/src/components/questions/create/QuestionInputSection/QustionItem.tsx similarity index 100% rename from frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QustionItem.tsx rename to frontend/src/components/questions/create/QuestionInputSection/QustionItem.tsx diff --git a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/index.tsx b/frontend/src/components/questions/create/QuestionInputSection/index.tsx similarity index 88% rename from frontend/src/components/questions/create/QuestionForm/QuestionInputSection/index.tsx rename to frontend/src/components/questions/create/QuestionInputSection/index.tsx index 1460844e..e21065d8 100644 --- a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/index.tsx +++ b/frontend/src/components/questions/create/QuestionInputSection/index.tsx @@ -1,7 +1,7 @@ import SelectTitle from "@/components/common/Text/SelectTitle"; import QuestionInput from "./QuestionInput"; import QuestionList from "./QuestionList"; -import useQuestionFormStore from "@/stores/useQuestionFormStore"; +import useQuestionFormStore from "@/pages/CreateQuestionPage/stores/useQuestionFormStore"; const QuestionInputSection = () => { const questionList = useQuestionFormStore((state) => state.questionList); diff --git a/frontend/src/components/questions/create/QuestionForm/TitleSection/index.tsx b/frontend/src/components/questions/create/TitleSection.tsx similarity index 86% rename from frontend/src/components/questions/create/QuestionForm/TitleSection/index.tsx rename to frontend/src/components/questions/create/TitleSection.tsx index ddb2c00c..0da6e3d9 100644 --- a/frontend/src/components/questions/create/QuestionForm/TitleSection/index.tsx +++ b/frontend/src/components/questions/create/TitleSection.tsx @@ -1,6 +1,6 @@ import SelectTitle from "@/components/common/Text/SelectTitle"; import TitleInput from "@/components/common/Input/TitleInput"; -import useQuestionFormStore from "@/stores/useQuestionFormStore"; +import useQuestionFormStore from "@/pages/CreateQuestionPage/stores/useQuestionFormStore"; const TitleSection = () => { const { setQuestionTitle } = useQuestionFormStore(); diff --git a/frontend/src/components/questions/create/QuestionForm/CategorySection/data.ts b/frontend/src/components/questions/create/utils/categoryData.ts similarity index 100% rename from frontend/src/components/questions/create/QuestionForm/CategorySection/data.ts rename to frontend/src/components/questions/create/utils/categoryData.ts diff --git a/frontend/src/components/questions/create/QuestionForm/utils/textarea.ts b/frontend/src/components/questions/create/utils/textareaHeight.ts similarity index 100% rename from frontend/src/components/questions/create/QuestionForm/utils/textarea.ts rename to frontend/src/components/questions/create/utils/textareaHeight.ts diff --git a/frontend/src/pages/CreateQuestionPage.tsx b/frontend/src/pages/CreateQuestionPage/CreateQuestionPage.tsx similarity index 92% rename from frontend/src/pages/CreateQuestionPage.tsx rename to frontend/src/pages/CreateQuestionPage/CreateQuestionPage.tsx index 55dc7ec2..b2802890 100644 --- a/frontend/src/pages/CreateQuestionPage.tsx +++ b/frontend/src/pages/CreateQuestionPage/CreateQuestionPage.tsx @@ -1,4 +1,4 @@ -import QuestionForm from "@/components/questions/create/QuestionForm"; +import QuestionForm from "@/components/questions/create/CategorySection"; import { IoArrowBackSharp } from "react-icons/io5"; import { Link } from "react-router-dom"; import SidebarPageLayout from "@components/layout/SidebarPageLayout.tsx"; diff --git a/frontend/src/stores/useQuestionFormStore.ts b/frontend/src/pages/CreateQuestionPage/stores/useQuestionFormStore.ts similarity index 100% rename from frontend/src/stores/useQuestionFormStore.ts rename to frontend/src/pages/CreateQuestionPage/stores/useQuestionFormStore.ts diff --git a/frontend/src/components/questions/create/QuestionForm/index.tsx b/frontend/src/pages/CreateQuestionPage/view/QuestionForm.tsx similarity index 71% rename from frontend/src/components/questions/create/QuestionForm/index.tsx rename to frontend/src/pages/CreateQuestionPage/view/QuestionForm.tsx index 14d0e9df..b9cfe3ea 100644 --- a/frontend/src/components/questions/create/QuestionForm/index.tsx +++ b/frontend/src/pages/CreateQuestionPage/view/QuestionForm.tsx @@ -1,9 +1,9 @@ -import useQuestionFormStore from "@/stores/useQuestionFormStore"; -import AccessSection from "./AccessSection"; -import CategorySection from "./CategorySection"; -import TitleSection from "./TitleSection"; -import QuestionInputSection from "./QuestionInputSection"; -import { useCreateQuestionList } from "@/hooks/api/useCreateQuestionList"; +import useQuestionFormStore from "@/pages/CreateQuestionPage/stores/useQuestionFormStore"; +import AccessSection from "@/components/questions/create/AccessSection"; +import CategorySection from "@/components/questions/create/CategorySection"; +import TitleSection from "@/components/questions/create/TitleSection"; +import QuestionInputSection from "@components/questions/create/QuestionInputSection"; +import { useCreateQuestionList } from "@hooks/api/useCreateQuestionList"; const QuestionForm = () => { const isFormValid = useQuestionFormStore((state) => state.isFormValid); diff --git a/frontend/src/pages/MyPage/index.tsx b/frontend/src/pages/MyPage/index.tsx deleted file mode 100644 index fdcceb54..00000000 --- a/frontend/src/pages/MyPage/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { useEffect } from "react"; -import { useNavigate } from "react-router-dom"; -import useAuth from "@hooks/useAuth"; -import useToast from "@hooks/useToast"; -import MyPageView from "./view"; - -const MyPage = () => { - const { isLoggedIn } = useAuth(); - const toast = useToast(); - const navigate = useNavigate(); - - useEffect(() => { - if (!isLoggedIn) { - toast.error("로그인이 필요한 서비스입니다."); - navigate("/login", { replace: true }); - } - }, [isLoggedIn, navigate, toast]); - - return ; -}; - -export default MyPage; diff --git a/frontend/src/pages/MyPage/view/index.tsx b/frontend/src/pages/MyPage/view/index.tsx deleted file mode 100644 index 77f81940..00000000 --- a/frontend/src/pages/MyPage/view/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import SidebarPageLayout from "@components/layout/SidebarPageLayout"; -import PageTitle from "@/components/common/Text/PageTitle"; -import ProfileEditModal from "@/pages/MyPage/view/ProfileEditModal"; -import Profile from "@/pages/MyPage/view/Profile"; -import QuestionSection from "@/pages/MyPage/view/QuestionSection"; -import useModal from "@/hooks/useModal"; - -const MyPageView = () => { - const modal = useModal(); - - return ( - - -
- - - -
- - ); -}; - -export default MyPageView; diff --git a/frontend/src/pages/SessionPage/hooks/__test__/mocks/useSession.mock.ts b/frontend/src/pages/SessionPage/hooks/__test__/mocks/useSession.mock.ts index 259900d9..5c3ff0c2 100644 --- a/frontend/src/pages/SessionPage/hooks/__test__/mocks/useSession.mock.ts +++ b/frontend/src/pages/SessionPage/hooks/__test__/mocks/useSession.mock.ts @@ -1,7 +1,7 @@ import { MockPeerConnections, MockSocket, -} from "@/pages/SessionPage/type/session.test"; +} from "@/pages/SessionPage/types/session.test"; export const mockSocket: MockSocket = { emit: jest.fn(), diff --git a/frontend/src/pages/SessionPage/hooks/usePeerConnection.ts b/frontend/src/pages/SessionPage/hooks/usePeerConnection.ts index 899073b9..e77e17ff 100644 --- a/frontend/src/pages/SessionPage/hooks/usePeerConnection.ts +++ b/frontend/src/pages/SessionPage/hooks/usePeerConnection.ts @@ -1,6 +1,6 @@ import { useRef, useState } from "react"; import { Socket } from "socket.io-client"; -import { PeerConnection } from "@/pages/SessionPage/type/session"; +import { PeerConnection } from "@/pages/SessionPage/types/session"; import { SIGNAL_EMIT_EVENT } from "@/constants/WebSocket/SignalingEvent.ts"; interface User { diff --git a/frontend/src/pages/SessionPage/hooks/useReaction.ts b/frontend/src/pages/SessionPage/hooks/useReaction.ts index b6e1f1e5..57cdaff6 100644 --- a/frontend/src/pages/SessionPage/hooks/useReaction.ts +++ b/frontend/src/pages/SessionPage/hooks/useReaction.ts @@ -7,7 +7,7 @@ import { useState, } from "react"; import { Socket } from "socket.io-client"; -import { PeerConnection } from "@/pages/SessionPage/type/session"; +import { PeerConnection } from "@/pages/SessionPage/types/session"; import { SESSION_EMIT_EVENT } from "@/constants/WebSocket/SessionEvent"; const REACTION_DURATION = 3000; diff --git a/frontend/src/pages/SessionPage/hooks/useSession.ts b/frontend/src/pages/SessionPage/hooks/useSession.ts index 888c58ae..716a39b7 100644 --- a/frontend/src/pages/SessionPage/hooks/useSession.ts +++ b/frontend/src/pages/SessionPage/hooks/useSession.ts @@ -3,7 +3,7 @@ import useToast from "@hooks/useToast"; import useMediaDevices from "./useMediaDevices"; import usePeerConnection from "./usePeerConnection"; import useSocket from "@hooks/useSocket"; -import { Participant, RoomMetadata } from "@/pages/SessionPage/type/session"; +import { Participant, RoomMetadata } from "@/pages/SessionPage/types/session"; import { useMediaStreamCleanup } from "./useMediaStreamCleanup"; import { usePeerConnectionCleanup } from "./usePeerConnectionCleanup"; import { useReaction } from "./useReaction"; diff --git a/frontend/src/pages/SessionPage/hooks/useSocketEvents.ts b/frontend/src/pages/SessionPage/hooks/useSocketEvents.ts index c6bff687..3130c80c 100644 --- a/frontend/src/pages/SessionPage/hooks/useSocketEvents.ts +++ b/frontend/src/pages/SessionPage/hooks/useSocketEvents.ts @@ -15,7 +15,7 @@ import { RoomMetadata, PeerConnection, ProgressResponse, -} from "@/pages/SessionPage/type/session"; +} from "@/pages/SessionPage/types/session"; import { SIGNAL_EMIT_EVENT, SIGNAL_LISTEN_EVENT, diff --git a/frontend/src/pages/SessionPage/hooks/useStudy.ts b/frontend/src/pages/SessionPage/hooks/useStudy.ts index 47526232..53f19f01 100644 --- a/frontend/src/pages/SessionPage/hooks/useStudy.ts +++ b/frontend/src/pages/SessionPage/hooks/useStudy.ts @@ -1,6 +1,6 @@ import { STUDY_EMIT_EVENT } from "@/constants/WebSocket/StudyEvent"; import { Socket } from "socket.io-client"; -import { RoomMetadata } from "@/pages/SessionPage/type/session"; +import { RoomMetadata } from "@/pages/SessionPage/types/session"; const useStudy = ( socket: Socket | null, diff --git a/frontend/src/pages/SessionPage/session/usePeerConnection.ts b/frontend/src/pages/SessionPage/session/usePeerConnection.ts new file mode 100644 index 00000000..c7b94325 --- /dev/null +++ b/frontend/src/pages/SessionPage/session/usePeerConnection.ts @@ -0,0 +1,244 @@ +import { useRef, useState } from "react"; +import { Socket } from "socket.io-client"; +import { PeerConnection } from "../types/session"; +import { SIGNAL_EMIT_EVENT } from "@/constants/WebSocket/SignalingEvent.ts"; + +interface User { + id?: string; + nickname: string; + isHost?: boolean; +} + +// 피어 간 연결 수립 역할을 하는 커스텀 훅 +const usePeerConnection = (socket: Socket) => { + const [peers, setPeers] = useState([]); // 연결 관리 + const peerConnections = useRef<{ [key: string]: RTCPeerConnection }>({}); + + const dataChannels = useRef<{ [peerId: string]: RTCDataChannel }>({}); + const [peerMediaStatus, setPeerMediaStatus] = useState<{ + [peerId: string]: { + audio: boolean; + video: boolean; + }; + }>({}); + // STUN 서버 설정 + const pcConfig = { + iceServers: [ + { + urls: import.meta.env.VITE_STUN_SERVER_URL, + username: import.meta.env.VITE_STUN_USER_NAME, + credential: import.meta.env.VITE_STUN_CREDENTIAL, + }, + ], + }; + + // Peer Connection 생성 + const createPeerConnection = async ( + peerSocketId: string, + peerNickname: string, + stream: MediaStream, + isOffer: boolean, + localUser: User + ) => { + try { + console.log("새로운 Peer Connection 생성:", { + peerSocketId, + peerNickname, + isOffer, + localUser, + }); + + if (peerConnections.current[peerSocketId]) { + console.log("이미 존재하는 Peer Connection:", peerSocketId); + return peerConnections.current[peerSocketId]; + } + + // 유저 사이의 통신 선로를 생성 + // STUN: 공개 주소를 알려주는 서버 + // ICE: 두 피어 간의 최적의 경로를 찾아줌 + const pc = new RTCPeerConnection(pcConfig); + + // 로컬 스트림 추가: 내 카메라/마이크를 통신 선로(pc)에 연결 + // 상대방에게 나의 비디오/오디오를 전송할 준비 + stream.getTracks().forEach((track) => { + pc.addTrack(track, stream); + }); + + // ICE candidate 이벤트 처리 + // 가능한 연결 경로를 찾을 때마다 상대에게 알려줌 + pc.onicecandidate = (e: RTCPeerConnectionIceEvent) => { + if (e.candidate && socket) { + socket.emit(SIGNAL_EMIT_EVENT.CANDIDATE, { + candidateReceiveID: peerSocketId, + candidate: e.candidate, + candidateSendID: socket.id, + }); + } + }; + + const mediaDataChannel = pc.createDataChannel("media-status", { + ordered: true, + }); + + mediaDataChannel.onopen = () => { + console.log("Media data channel opened."); + dataChannels.current[peerSocketId] = mediaDataChannel; + }; + + mediaDataChannel.onclose = () => { + console.log("Media data channel closed."); + }; + + // DataChannel 해보자 + pc.ondatachannel = (event) => { + const channel = event.channel; + channel.onmessage = (e) => { + const data = JSON.parse(e.data); + console.log(data); + const { type, status } = data; + if (type === "audio") { + if (status) { + console.log("상대방의 오디오가 켜졌습니다."); + setPeerMediaStatus((prev) => ({ + ...prev, + [peerSocketId]: { + audio: true, + video: prev[peerSocketId].video ?? true, + }, + })); + } else { + console.log("상대방의 오디오가 꺼졌습니다."); + setPeerMediaStatus((prev) => ({ + ...prev, + [peerSocketId]: { + audio: false, + video: prev[peerSocketId].video ?? true, + }, + })); + } + } else if (type === "video") { + // 상대방의 오디오가 켜졌을 때의 처리 + if (status) { + console.log("상대방의 비디오가 켜졌습니다."); + setPeerMediaStatus((prev) => ({ + ...prev, + [peerSocketId]: { + audio: prev[peerSocketId].audio ?? true, + video: true, + }, + })); + } else { + console.log("상대방의 비디오가 꺼졌습니다."); + setPeerMediaStatus((prev) => ({ + ...prev, + [peerSocketId]: { + audio: prev[peerSocketId].audio ?? true, + video: false, + }, + })); + } + } + }; + }; + + // 연결 상태 모니터링 + // 새로운 연결/연결 시도/연결 완료/연결 끊김/연결 실패/연결 종료 + pc.onconnectionstatechange = () => { + console.log("연결 상태 변경:", pc.connectionState); + }; + // ICE 연결 상태 모니터링 + pc.oniceconnectionstatechange = () => { + console.log("ICE 연결 상태 변경:", pc.iceConnectionState); + }; + + // 원격 스트림 처리(상대가 addTrack을 호출할 때) + // 상대의 비디오/오디오 신호를 받아 연결하는 과정 + // 상대방 스트림 수신 -> 기존 연결인지 확인 -> 스트림 정보 업데이트/추가 + pc.ontrack = (e) => { + console.log("Received remote track:", e.streams[0]); + console.log("변경된 peers", peers); + setPeers((prev) => { + // 이미 존재하는 피어인지 확인 + const exists = prev.find((p) => p.peerId === peerSocketId); + if (exists) { + // 기존 피어의 스트림 업데이트 + return prev.map((p) => + p.peerId === peerSocketId ? { ...p, stream: e.streams[0] } : p + ); + } + // 새로운 피어 추가 + return [ + ...prev, + { + peerId: peerSocketId, + peerNickname, + isHost: localUser.isHost, + stream: e.streams[0], + }, + ]; + }); + setPeerMediaStatus((prev) => { + return { + ...prev, + [peerSocketId]: { + audio: e.streams[0].getAudioTracks().length > 0, + video: e.streams[0].getVideoTracks().length > 0, + }, + }; + }); + }; + + // Offer를 생성해야 하는 경우에만 Offer 생성 + if (isOffer) { + try { + const offer = await pc.createOffer(); + console.log("Created offer for:", peerSocketId); + + await pc.setLocalDescription(offer); + console.log("Set local description for:", peerSocketId); + + if (socket && pc.localDescription) { + socket.emit(SIGNAL_EMIT_EVENT.OFFER, { + offerReceiveID: peerSocketId, + sdp: pc.localDescription, + offerSendID: socket.id, + offerSendNickname: localUser.nickname, + }); + } + } catch (error) { + console.error("Error in offer creation:", error); + } + } + + peerConnections.current[peerSocketId] = pc; + return pc; + } catch (error) { + console.error("Error creating peer connection:", error); + return null; + } + }; + + const closePeerConnection = (peerSocketId: string) => { + if (peerConnections.current[peerSocketId]) { + // 연결 종료 + console.log("Closing peer connection:", peerSocketId); + peerConnections.current[peerSocketId].close(); + // 연결 객체 제거 + delete peerConnections.current[peerSocketId]; + // UI에서 사용자 제거 + setPeers((prev) => prev.filter((peer) => peer.peerId !== peerSocketId)); + } + }; + + return { + peers, + setPeers, + peerConnections, + createPeerConnection, + closePeerConnection, + dataChannels, + peerMediaStatus, + }; +}; + +export default usePeerConnection; diff --git a/frontend/src/pages/SessionPage/session/useReaction.ts b/frontend/src/pages/SessionPage/session/useReaction.ts new file mode 100644 index 00000000..b69eb081 --- /dev/null +++ b/frontend/src/pages/SessionPage/session/useReaction.ts @@ -0,0 +1,84 @@ +import { + Dispatch, + SetStateAction, + useCallback, + useEffect, + useRef, + useState, +} from "react"; +import { Socket } from "socket.io-client"; +import { PeerConnection } from "../types/session"; +import { SESSION_EMIT_EVENT } from "@/constants/WebSocket/SessionEvent"; + +const REACTION_DURATION = 3000; + +export const useReaction = ( + socket: Socket | null, + sessionId: string, + setPeers: Dispatch> +) => { + const [reaction, setReaction] = useState(""); + + const reactionTimeouts = useRef<{ + [key: string]: ReturnType; + }>({}); + + const emitReaction = useCallback( + (reactionType: string) => { + if (socket) { + socket.emit(SESSION_EMIT_EVENT.REACTION, { + roomId: sessionId, + reactionType: reactionType, + }); + } + }, + [socket, sessionId] + ); + + const addReaction = useCallback( + (senderId: string, reactionType: string) => { + setPeers((prev) => + prev.map((peer) => + peer.peerId === senderId ? { ...peer, reaction: reactionType } : peer + ) + ); + }, + [setPeers] + ); + + const handleReaction = ({ + socketId, + reactionType, + }: { + socketId: string; + reactionType: string; + }) => { + if (reactionTimeouts.current[socketId]) { + clearTimeout(reactionTimeouts.current[socketId]); + } + + if (socketId === socket?.id) { + setReaction(reactionType); + reactionTimeouts.current[socketId] = setTimeout(() => { + setReaction(""); + delete reactionTimeouts.current[socketId]; + }, REACTION_DURATION); + } else { + addReaction(socketId, reactionType); + reactionTimeouts.current[socketId] = setTimeout(() => { + addReaction(socketId, ""); + delete reactionTimeouts.current[socketId]; + }, REACTION_DURATION); + } + }; + + useEffect(() => { + return () => { + Object.values(reactionTimeouts.current).forEach((timeout) => + clearTimeout(timeout) + ); + }; + }, []); + + return { reaction, emitReaction, handleReaction }; +}; diff --git a/frontend/src/pages/SessionPage/type/session.d.ts b/frontend/src/pages/SessionPage/types/session.d.ts similarity index 100% rename from frontend/src/pages/SessionPage/type/session.d.ts rename to frontend/src/pages/SessionPage/types/session.d.ts diff --git a/frontend/src/pages/SessionPage/type/session.test.d.ts b/frontend/src/pages/SessionPage/types/session.test.d.ts similarity index 100% rename from frontend/src/pages/SessionPage/type/session.test.d.ts rename to frontend/src/pages/SessionPage/types/session.test.d.ts diff --git a/frontend/src/pages/SessionPage/view/SessionHeader.tsx b/frontend/src/pages/SessionPage/view/SessionHeader.tsx index bbfc950f..3a6b5c2b 100644 --- a/frontend/src/pages/SessionPage/view/SessionHeader.tsx +++ b/frontend/src/pages/SessionPage/view/SessionHeader.tsx @@ -1,4 +1,4 @@ -import { RoomMetadata } from "@/pages/SessionPage/type/session"; +import { RoomMetadata } from "@/pages/SessionPage/types/session"; import { useEffect, useState } from "react"; interface SessionHeaderProps { diff --git a/frontend/src/pages/SessionPage/view/SessionSidebar.tsx b/frontend/src/pages/SessionPage/view/SessionSidebar.tsx index 567bac7f..4ef7db65 100644 --- a/frontend/src/pages/SessionPage/view/SessionSidebar.tsx +++ b/frontend/src/pages/SessionPage/view/SessionSidebar.tsx @@ -2,7 +2,7 @@ import { FaClipboardList, FaFolder } from "react-icons/fa"; import { FaUserGroup } from "react-icons/fa6"; import { Socket } from "socket.io-client"; import { TbCrown } from "react-icons/tb"; -import { Question } from "@/pages/SessionPage/type/session"; +import { Question } from "@/pages/SessionPage/types/session"; interface ParticipantsData { nickname: string; diff --git a/frontend/src/pages/SessionPage/view/VideoLayout.tsx b/frontend/src/pages/SessionPage/view/VideoLayout.tsx index 473d1ca2..639fc9af 100644 --- a/frontend/src/pages/SessionPage/view/VideoLayout.tsx +++ b/frontend/src/pages/SessionPage/view/VideoLayout.tsx @@ -1,5 +1,5 @@ import VideoContainer from "@/components/session/VideoContainer"; -import { PeerConnection } from "@/pages/SessionPage/type/session"; +import { PeerConnection } from "@/pages/SessionPage/types/session"; import { useAudioDetector } from "../hooks/useAudioDetector"; interface VideoLayoutProps { From bc9c57f7b2294c5326ef2120e360bc03bbe5af58 Mon Sep 17 00:00:00 2001 From: yiseungyun Date: Tue, 3 Dec 2024 03:38:31 +0900 Subject: [PATCH 5/7] =?UTF-8?q?refactor:=20=EC=84=B8=EC=85=98=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.tsx => AccessSection.tsx} | 2 +- .../index.tsx => CategorySection.tsx} | 2 +- .../ListSelectModal/CategoryTab/Category.tsx | 7 +++---- .../QuestionList/QuestionItem.tsx | 9 ++++----- .../SessionForm/ListSelectModal/index.tsx | 2 +- .../ParticipantSection/ParticpantButton.tsx | 7 +++---- .../SessionForm/ParticipantSection/index.tsx | 2 +- .../index.tsx => QuestionListSection.tsx} | 2 +- .../index.tsx => TitleSection.tsx} | 2 +- .../CreateSessionPage.tsx | 4 ++-- .../stores/useSessionFormStore.ts | 0 .../CreateSessionPage/view/SessionForm.tsx} | 20 +++++++++---------- frontend/src/routes.tsx | 2 +- 13 files changed, 29 insertions(+), 32 deletions(-) rename frontend/src/components/sessions/create/SessionForm/{AccessSection/index.tsx => AccessSection.tsx} (82%) rename frontend/src/components/sessions/create/SessionForm/{CategorySection/index.tsx => CategorySection.tsx} (89%) rename frontend/src/components/sessions/create/SessionForm/{QuestionListSection/index.tsx => QuestionListSection.tsx} (91%) rename frontend/src/components/sessions/create/SessionForm/{TitleSection/index.tsx => TitleSection.tsx} (84%) rename frontend/src/pages/{ => CreateSessionPage}/CreateSessionPage.tsx (87%) rename frontend/src/{ => pages/CreateSessionPage}/stores/useSessionFormStore.ts (100%) rename frontend/src/{components/sessions/create/SessionForm/index.tsx => pages/CreateSessionPage/view/SessionForm.tsx} (77%) diff --git a/frontend/src/components/sessions/create/SessionForm/AccessSection/index.tsx b/frontend/src/components/sessions/create/SessionForm/AccessSection.tsx similarity index 82% rename from frontend/src/components/sessions/create/SessionForm/AccessSection/index.tsx rename to frontend/src/components/sessions/create/SessionForm/AccessSection.tsx index a350902d..4cbf9e8f 100644 --- a/frontend/src/components/sessions/create/SessionForm/AccessSection/index.tsx +++ b/frontend/src/components/sessions/create/SessionForm/AccessSection.tsx @@ -1,4 +1,4 @@ -import useSessionFormStore from "@/stores/useSessionFormStore"; +import useSessionFormStore from "@/pages/CreateSessionPage/stores/useSessionFormStore"; import SelectTitle from "@/components/common/Text/SelectTitle"; import AccessButton from "@/components/common/Button/AccessButton"; diff --git a/frontend/src/components/sessions/create/SessionForm/CategorySection/index.tsx b/frontend/src/components/sessions/create/SessionForm/CategorySection.tsx similarity index 89% rename from frontend/src/components/sessions/create/SessionForm/CategorySection/index.tsx rename to frontend/src/components/sessions/create/SessionForm/CategorySection.tsx index 544153fd..042a676f 100644 --- a/frontend/src/components/sessions/create/SessionForm/CategorySection/index.tsx +++ b/frontend/src/components/sessions/create/SessionForm/CategorySection.tsx @@ -1,5 +1,5 @@ import SelectTitle from "@/components/common/Text/SelectTitle"; -import useSessionFormStore from "@/stores/useSessionFormStore"; +import useSessionFormStore from "@/pages/CreateSessionPage/stores/useSessionFormStore"; import CategorySelect from "@/components/common/Select/CategorySelect"; const options = [ diff --git a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/CategoryTab/Category.tsx b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/CategoryTab/Category.tsx index 382c9f2d..26da81ae 100644 --- a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/CategoryTab/Category.tsx +++ b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/CategoryTab/Category.tsx @@ -1,4 +1,4 @@ -import useSessionFormStore from "@stores/useSessionFormStore"; +import useSessionFormStore from "@/pages/CreateSessionPage/stores/useSessionFormStore"; interface Props { tabName: "myList" | "savedList"; @@ -11,11 +11,10 @@ const Category = ({ tabName, tabText }: Props) => { return (