Merge pull request #89 from softeerbootcamp4th/refactor/88-directory

[refactor] 폴더 구조 대규모 변경
softeerbootcamp4th · Aug 12, 2024 · 5a6389d · 5a6389d
2 parents 0636436 + 2bfc8e8
commit 5a6389d
Show file tree

Hide file tree

Showing 160 changed files with 282 additions and 279 deletions.
diff --git a/.github/workflows/deploy_preview.yaml b/.github/workflows/deploy_preview.yaml
@@ -6,6 +6,9 @@ on:
   push:
     branches:
       - "dev"
+    paths:
+      - "common/**"
+      - "mainPage/**"
 jobs:
   deploy-preview:
     runs-on: ubuntu-latest

diff --git a/.github/workflows/deploy_production.yaml b/.github/workflows/deploy_production.yaml
@@ -6,6 +6,9 @@ on:
   push:
     branches:
       - "main"
+    paths:
+      - "common/**"
+      - "mainPage/**"
 jobs:
   deploy-production:
     runs-on: ubuntu-latest

diff --git a/index.html b/index.html
@@ -9,6 +9,6 @@
   </head>
   <body>
     <div id="root"><!--hydrate_root--></div>
-    <script type="module" src="/src/main-client.jsx"></script>
+    <script type="module" src="/src/mainPage/main-client.jsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
diff --git a/src/common/Button.jsx → src/common/components/Button.jsx b/src/common/Button.jsx → src/common/components/Button.jsx
diff --git a/src/common/ClientOnly.jsx → src/common/components/ClientOnly.jsx b/src/common/ClientOnly.jsx → src/common/components/ClientOnly.jsx
diff --git a/src/common/DelaySkeleton.jsx → src/common/components/DelaySkeleton.jsx b/src/common/DelaySkeleton.jsx → src/common/components/DelaySkeleton.jsx
diff --git a/src/common/ErrorBoundary.jsx → src/common/components/ErrorBoundary.jsx b/src/common/ErrorBoundary.jsx → src/common/components/ErrorBoundary.jsx
diff --git a/src/common/Input.jsx → src/common/components/Input.jsx b/src/common/Input.jsx → src/common/components/Input.jsx
diff --git a/src/common/PhoneInput.jsx → src/common/components/PhoneInput.jsx b/src/common/PhoneInput.jsx → src/common/components/PhoneInput.jsx
diff --git a/src/common/Spinner.jsx → src/common/components/Spinner.jsx b/src/common/Spinner.jsx → src/common/components/Spinner.jsx
diff --git a/src/common/Suspense.jsx → src/common/components/Suspense.jsx b/src/common/Suspense.jsx → src/common/components/Suspense.jsx
diff --git a/src/common/constants.js b/src/common/constants.js
@@ -1,8 +1,2 @@
 export const EVENT_ID = "0";
-export const TOKEN_ID = "AWESOME_ORANGE_ACCESS_TOKEN";
-
-// scroll section constants
-export const INTERACTION_SECTION = 1;
-export const DETAIL_SECTION = 2;
-export const COMMENT_SECTION = 3;
-export const FCFS_SECTION = 4;
+export const TOKEN_ID = "AWESOME_ORANGE_ACCESS_TOKEN";
diff --git a/src/common/dataFetch/fetchServer.js b/src/common/dataFetch/fetchServer.js
@@ -1,4 +1,4 @@
-import tokenSaver from "@/auth/tokenSaver.js";
+import tokenSaver from "./tokenSaver.js";
 
 class HTTPError extends Error {
   constructor(response) {

diff --git a/src/auth/tokenSaver.js → src/common/dataFetch/tokenSaver.js b/src/auth/tokenSaver.js → src/common/dataFetch/tokenSaver.js
@@ -1,4 +1,4 @@
-import { TOKEN_ID } from "@/common/constants.js";
+import { TOKEN_ID } from "@common/constants.js";
 
 class TokenSaver {
   initialized = false;

diff --git a/src/modal/modal.jsx → src/common/modal/modal.jsx b/src/modal/modal.jsx → src/common/modal/modal.jsx
@@ -1,5 +1,6 @@
 import { createContext, useCallback, useEffect, useState, useRef } from "react";
 import useModalStore, { closeModal } from "./store.js";
+import { delay } from "@common/utils.js";
 
 export const ModalCloseContext = createContext(() => {
   console.log("모달이 닫힙니다.");
@@ -9,10 +10,12 @@ function Modal({ layer }) {
   const timeoutRef = useRef(null);
   const child = useModalStore(layer);
   const [opacity, setOpacity] = useState(0);
-  const close = useCallback(() => {
+  const close = useCallback(async () => {
     setOpacity(0);
-    if (timeoutRef.current === null)
-      timeoutRef.current = setTimeout(() => closeModal(layer), 150);
+    if (timeoutRef.current === null) {
+      await delay(150);
+      closeModal(layer);
+    }
   }, [layer]);
 
   useEffect(() => {

diff --git a/src/modal/openModal.js → src/common/modal/openModal.js b/src/modal/openModal.js → src/common/modal/openModal.js
diff --git a/src/modal/store.js → src/common/modal/store.js b/src/modal/store.js → src/common/modal/store.js
diff --git a/src/common/utils.js b/src/common/utils.js
@@ -26,3 +26,7 @@ export function convertSecondsToString(time) {
 
   return `${days > 0 ? days + " : " : ""}${[hours, minutes, seconds].map(padNumber).join(" : ")}`;
 }
+
+export function delay(ms) {
+  return new Promise( resolve=>setTimeout(resolve, ms) );
+}
diff --git a/src/mainPage/App.jsx b/src/mainPage/App.jsx
@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+
+import IntroSection from "./features/introSection";
+import Header from "./features/header";
+import SimpleInformation from "./features/simpleInformation";
+import InteractionPage from "./features/interactions";
+import DetailInformation from "./features/detailInformation";
+import CommentSection from "./features/comment";
+import FcfsSection from "./features/fcfs";
+import QnA from "./features/qna";
+import Footer from "./features/footer";
+
+import Modal from "@common/modal/modal.jsx";
+import { initLoginState } from "@main/auth/store.js";
+
+function App() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    history.scrollRestoration = "manual";
+    initLoginState();
+  }, []);
+
+  return (
+    <>
+      <IntroSection />
+      <Header />
+      <SimpleInformation />
+      <InteractionPage />
+      <DetailInformation />
+      <CommentSection />
+      <FcfsSection />
+      <QnA />
+      <Footer />
+      <Modal layer="interaction" />
+      <Modal layer="alert" />
+    </>
+  );
+}
+
+export default App;
diff --git a/src/comment/assets/decoration.svg → ...ge/features/comment/assets/decoration.svg b/src/comment/assets/decoration.svg → ...ge/features/comment/assets/decoration.svg
diff --git a/src/comment/autoScrollCarousel/index.jsx → ...ures/comment/autoScrollCarousel/index.jsx b/src/comment/autoScrollCarousel/index.jsx → ...ures/comment/autoScrollCarousel/index.jsx
diff --git a/...ent/autoScrollCarousel/useAutoCarousel.js → ...ent/autoScrollCarousel/useAutoCarousel.js b/...ent/autoScrollCarousel/useAutoCarousel.js → ...ent/autoScrollCarousel/useAutoCarousel.js
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from "react";
-import useMountDragEvent from "@/common/useMountDragEvent";
+import useMountDragEvent from "@main/hooks/useMountDragEvent";
 
 const FRICTION_RATE = 0.1;
 const MOMENTUM_THRESHOLD = 0.6;

diff --git a/...mment/commentCarousel/CommentCarousel.jsx → ...mment/commentCarousel/CommentCarousel.jsx b/...mment/commentCarousel/CommentCarousel.jsx → ...mment/commentCarousel/CommentCarousel.jsx
@@ -1,5 +1,5 @@
-import { useQuery } from "@/common/dataFetch/getQuery.js";
-import { fetchServer } from "@/common/dataFetch/fetchServer.js";
+import { useQuery } from "@common/dataFetch/getQuery.js";
+import { fetchServer } from "@common/dataFetch/fetchServer.js";
 import AutoScrollCarousel from "../autoScrollCarousel";
 
 function mask(string) {

diff --git a/.../commentCarousel/CommentCarouselError.jsx → .../commentCarousel/CommentCarouselError.jsx b/.../commentCarousel/CommentCarouselError.jsx → .../commentCarousel/CommentCarouselError.jsx
diff --git a/...mmentCarousel/CommentCarouselSkeleton.jsx → ...mmentCarousel/CommentCarouselSkeleton.jsx b/...mmentCarousel/CommentCarouselSkeleton.jsx → ...mmentCarousel/CommentCarouselSkeleton.jsx
@@ -1,5 +1,5 @@
-import Spinner from "@/common/Spinner.jsx";
-import DelaySkeleton from "@/common/DelaySkeleton.jsx";
+import Spinner from "@common/components/Spinner.jsx";
+import DelaySkeleton from "@common/components/DelaySkeleton.jsx";
 
 function CommentCarouselSkeleton() {
   return (

diff --git a/src/comment/commentCarousel/index.jsx → ...eatures/comment/commentCarousel/index.jsx b/src/comment/commentCarousel/index.jsx → ...eatures/comment/commentCarousel/index.jsx
@@ -1,5 +1,5 @@
-import Suspense from "@/common/Suspense.jsx";
-import ErrorBoundary from "@/common/ErrorBoundary.jsx";
+import Suspense from "@common/components/Suspense.jsx";
+import ErrorBoundary from "@common/components/ErrorBoundary.jsx";
 import CommentCarousel from "./CommentCarousel.jsx";
 import CommentCarouselSkeleton from "./CommentCarouselSkeleton.jsx";
 import CommentCarouselError from "./CommentCarouselError.jsx";

diff --git a/...omment/commentForm/SubmitButton/index.jsx → ...omment/commentForm/SubmitButton/index.jsx b/...omment/commentForm/SubmitButton/index.jsx → ...omment/commentForm/SubmitButton/index.jsx
@@ -1,4 +1,4 @@
-import Button from "@/common/Button.jsx";
+import Button from "@common/components/Button.jsx";
 
 function getMessageFromButtonFetchState(state) {
   if (state === "pending") return "...";

diff --git a/src/comment/commentForm/index.jsx → ...ge/features/comment/commentForm/index.jsx b/src/comment/commentForm/index.jsx → ...ge/features/comment/commentForm/index.jsx
@@ -2,13 +2,13 @@ import { useState, useEffect } from "react";
 import CommentSuccessModal from "../modals/CommentSuccessModal.jsx";
 import CommentNegativeModal from "../modals/CommentNegativeModal.jsx";
 import CommentNoUserModal from "../modals/CommentNoUserModal.jsx";
-import NoServerModal from "@/common/NoServerModal.jsx";
+import NoServerModal from "@main/components/NoServerModal.jsx";
 import SubmitButton from "./SubmitButton";
-import useAuthState from "@/auth/store.js";
+import useAuthState from "@main/auth/store.js";
 
-import { fetchServer, handleError } from "@/common/dataFetch/fetchServer.js";
-import { EVENT_ID } from "@/common/constants.js";
-import openModal from "@/modal/openModal.js";
+import { fetchServer, handleError } from "@common/dataFetch/fetchServer.js";
+import { EVENT_ID } from "@common/constants.js";
+import openModal from "@common/modal/openModal.js";
 
 const submitCommentErrorHandle = {
   400: "negative",

diff --git a/src/comment/index.jsx → src/mainPage/features/comment/index.jsx b/src/comment/index.jsx → src/mainPage/features/comment/index.jsx
@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import CommentCarousel from "./commentCarousel";
 import CommentForm from "./commentForm";
-import useSectionInitialize from "../scroll/useSectionInitialize";
+import useSectionInitialize from "@main/scroll/useSectionInitialize";
 import decoration from "./assets/decoration.svg";
 
 function CommentSection() {

diff --git a/src/comment/mock.js → src/mainPage/features/comment/mock.js b/src/comment/mock.js → src/mainPage/features/comment/mock.js
diff --git a/src/comment/modals/CommentNegativeModal.jsx → ...s/comment/modals/CommentNegativeModal.jsx b/src/comment/modals/CommentNegativeModal.jsx → ...s/comment/modals/CommentNegativeModal.jsx
@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import { ModalCloseContext } from "@/modal/modal.jsx";
-import Button from "@/common/Button.jsx";
+import { ModalCloseContext } from "@common/modal/modal.jsx";
+import Button from "@common/components/Button.jsx";
 
 function CommentNegativeModal() {
   const close = useContext(ModalCloseContext);

diff --git a/src/comment/modals/CommentNoUserModal.jsx → ...res/comment/modals/CommentNoUserModal.jsx b/src/comment/modals/CommentNoUserModal.jsx → ...res/comment/modals/CommentNoUserModal.jsx
@@ -1,14 +1,14 @@
 import { useContext } from "react";
-import { ModalCloseContext } from "@/modal/modal.jsx";
-import Button from "@/common/Button.jsx";
-import scrollTo from "@/scroll/scrollTo.js";
-import { INTERACTION_SECTION } from "@/common/constants.js";
+import { ModalCloseContext } from "@common/modal/modal.jsx";
+import Button from "@common/components/Button.jsx";
+import scrollTo from "@main/scroll/scrollTo.js";
+import { INTERACTION_SECTION } from "@main/scroll/constants.js";
 
 function CommentNoUserModal() {
   const close = useContext(ModalCloseContext);
 
-  function toMoveInteraction() {
-    close();
+  async function toMoveInteraction() {
+    await close();
     scrollTo(INTERACTION_SECTION);
   }
 

diff --git a/src/comment/modals/CommentSuccessModal.jsx → ...es/comment/modals/CommentSuccessModal.jsx b/src/comment/modals/CommentSuccessModal.jsx → ...es/comment/modals/CommentSuccessModal.jsx
@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import { ModalCloseContext } from "@/modal/modal.jsx";
-import Button from "@/common/Button.jsx";
+import { ModalCloseContext } from "@common/modal/modal.jsx";
+import Button from "@common/components/Button.jsx";
 
 function CommentSuccessModal() {
   const close = useContext(ModalCloseContext);

diff --git a/src/detailInformation/DetailItem.jsx → ...features/detailInformation/DetailItem.jsx b/src/detailInformation/DetailItem.jsx → ...features/detailInformation/DetailItem.jsx
diff --git a/src/detailInformation/DetailSwiper.jsx → ...atures/detailInformation/DetailSwiper.jsx b/src/detailInformation/DetailSwiper.jsx → ...atures/detailInformation/DetailSwiper.jsx
@@ -1,4 +1,4 @@
-import useSwiperState from "@/common/useSwiperState.js";
+import useSwiperState from "@main/hooks/useSwiperState.js";
 import DetailItem from "./DetailItem.jsx";
 import left from "./assets/left.svg";
 import right from "./assets/right.svg";

diff --git a/src/detailInformation/assets/decoration.svg → ...s/detailInformation/assets/decoration.svg b/src/detailInformation/assets/decoration.svg → ...s/detailInformation/assets/decoration.svg
diff --git a/src/detailInformation/assets/left.svg → ...eatures/detailInformation/assets/left.svg b/src/detailInformation/assets/left.svg → ...eatures/detailInformation/assets/left.svg
diff --git a/src/detailInformation/assets/right.svg → ...atures/detailInformation/assets/right.svg b/src/detailInformation/assets/right.svg → ...atures/detailInformation/assets/right.svg
diff --git a/src/detailInformation/content.json → ...e/features/detailInformation/content.json b/src/detailInformation/content.json → ...e/features/detailInformation/content.json
diff --git a/src/detailInformation/index.jsx → ...Page/features/detailInformation/index.jsx b/src/detailInformation/index.jsx → ...Page/features/detailInformation/index.jsx
@@ -2,7 +2,7 @@ import DetailSwiper from "./DetailSwiper.jsx";
 import content from "./content.json";
 import decoration from "./assets/decoration.svg";
 import { useRef } from "react";
-import useSectionInitialize from "../scroll/useSectionInitialize.js";
+import useSectionInitialize from "@main/scroll/useSectionInitialize.js";
 
 function DetailInformation() {
   const SECTION_IDX = 2;

diff --git a/src/fcfs/cardGame/Card.jsx → src/mainPage/features/fcfs/cardGame/Card.jsx b/src/fcfs/cardGame/Card.jsx → src/mainPage/features/fcfs/cardGame/Card.jsx
diff --git a/src/fcfs/cardGame/CardGame.jsx → ...nPage/features/fcfs/cardGame/CardGame.jsx b/src/fcfs/cardGame/CardGame.jsx → ...nPage/features/fcfs/cardGame/CardGame.jsx
@@ -2,17 +2,17 @@ import { useState } from "react";
 import CardGameTitle from "./CardGameTitle.jsx";
 import Card from "./Card.jsx";
 
-import openModal from "@/modal/openModal.js";
+import openModal from "@common/modal/openModal.js";
 import FcfsWinModal from "../modals/FcfsWinModal.jsx";
 import FcfsLoseModal from "../modals/FcfsLoseModal.jsx";
 import FcfsInvalidModal from "../modals/FcfsInvalidModal.jsx";
-import AuthModal from "@/auth/AuthModal.jsx";
+import AuthModal from "@main/auth/AuthModal.jsx";
 
-import useFcfsStore from "../store.js";
-import * as Status from "../constants.js";
-import { EVENT_ID } from "@/common/constants.js";
-import { fetchServer, handleError } from "@/common/dataFetch/fetchServer.js";
-import ResetButton from "@/common/ResetButton.jsx";
+import useFcfsStore from "@main/realtimeEvent/store.js";
+import * as Status from "@main/realtimeEvent/constants.js";
+import { EVENT_ID } from "@common/constants.js";
+import { fetchServer, handleError } from "@common/dataFetch/fetchServer.js";
+import ResetButton from "@main/components/ResetButton.jsx";
 
 function getLocked(eventStatus, isParticipated, offline) {
   if (offline) return false;

diff --git a/src/fcfs/cardGame/CardGameTitle.jsx → .../features/fcfs/cardGame/CardGameTitle.jsx b/src/fcfs/cardGame/CardGameTitle.jsx → .../features/fcfs/cardGame/CardGameTitle.jsx
@@ -1,6 +1,6 @@
-import useFcfsStore from "../store.js";
-import * as Status from "../constants.js";
-import { convertSecondsToString } from "@/common/utils.js";
+import useFcfsStore from "@main/realtimeEvent/store.js";
+import * as Status from "@main/realtimeEvent/constants.js";
+import { convertSecondsToString } from "@common/utils.js";
 
 function CardGameCountdown() {
   const countdown = useFcfsStore((store) => store.countdown);

diff --git a/src/fcfs/cardGame/assets/[email protected] → ...tures/fcfs/cardGame/assets/[email protected] b/src/fcfs/cardGame/assets/[email protected] → ...tures/fcfs/cardGame/assets/[email protected]
diff --git a/src/fcfs/cardGame/assets/[email protected] → ...tures/fcfs/cardGame/assets/[email protected] b/src/fcfs/cardGame/assets/[email protected] → ...tures/fcfs/cardGame/assets/[email protected]
diff --git a/src/fcfs/cardGame/assets/[email protected] → ...atures/fcfs/cardGame/assets/[email protected] b/src/fcfs/cardGame/assets/[email protected] → ...atures/fcfs/cardGame/assets/[email protected]
diff --git a/src/fcfs/cardGame/assets/[email protected] → ...atures/fcfs/cardGame/assets/[email protected] b/src/fcfs/cardGame/assets/[email protected] → ...atures/fcfs/cardGame/assets/[email protected]
diff --git a/src/fcfs/cardGame/assets/[email protected] → ...atures/fcfs/cardGame/assets/[email protected] b/src/fcfs/cardGame/assets/[email protected] → ...atures/fcfs/cardGame/assets/[email protected]
diff --git a/src/fcfs/cardGame/assets/[email protected] → ...atures/fcfs/cardGame/assets/[email protected] b/src/fcfs/cardGame/assets/[email protected] → ...atures/fcfs/cardGame/assets/[email protected]
diff --git a/src/fcfs/cardGame/index.jsx → ...mainPage/features/fcfs/cardGame/index.jsx b/src/fcfs/cardGame/index.jsx → ...mainPage/features/fcfs/cardGame/index.jsx
@@ -1,8 +1,8 @@
 import { useDeferredValue } from "react";
-import Suspense from "@/common/Suspense.jsx";
-import ErrorBoundary from "@/common/ErrorBoundary.jsx";
-import useFcfsStore from "../store.js";
-import useAuthStore from "@/auth/store.js";
+import Suspense from "@common/components/Suspense.jsx";
+import ErrorBoundary from "@common/components/ErrorBoundary.jsx";
+import useFcfsStore from "@main/realtimeEvent/store.js";
+import useAuthStore from "@main/auth/store.js";
 import CardGame from "./CardGame.jsx";
 
 function CardGameInitializer() {

diff --git a/src/fcfs/cardGame/style.module.css → ...e/features/fcfs/cardGame/style.module.css b/src/fcfs/cardGame/style.module.css → ...e/features/fcfs/cardGame/style.module.css
diff --git a/src/fcfs/countdown/CountStarter.jsx → .../features/fcfs/countdown/CountStarter.jsx b/src/fcfs/countdown/CountStarter.jsx → .../features/fcfs/countdown/CountStarter.jsx
@@ -1,9 +1,9 @@
 import { useEffect, useRef } from "react";
-import useFcfsStore from "../store.js";
-import { OFFLINE } from "../constants.js";
+import useFcfsStore from "@main/realtimeEvent/store.js";
+import { OFFLINE } from "@main/realtimeEvent/constants.js";
 import CountdownController from "./CountdownController";
-import Suspense from "@/common/Suspense.jsx";
-import ErrorBoundary from "@/common/ErrorBoundary.jsx";
+import Suspense from "@common/components/Suspense.jsx";
+import ErrorBoundary from "@common/components/ErrorBoundary.jsx";
 
 function CountStarterDummy() {
   const controller = useRef(new CountdownController(0, 0));

diff --git a/src/fcfs/countdown/CountdownController.js → ...res/fcfs/countdown/CountdownController.js b/src/fcfs/countdown/CountdownController.js → ...res/fcfs/countdown/CountdownController.js
diff --git a/src/fcfs/description/DateEventPrize.jsx → ...tures/fcfs/description/DateEventPrize.jsx b/src/fcfs/description/DateEventPrize.jsx → ...tures/fcfs/description/DateEventPrize.jsx
@@ -1,15 +1,6 @@
-import useFcfsStore from "../store.js";
-import { OFFLINE } from "../constants.js";
-
-const ONE_DAY = 24 * 60 * 60 * 1000;
-function getEventDateState(currrentTimeDate, eventTimeDate) {
-  const currentTime = currrentTimeDate.valueOf();
-  const eventTime = eventTimeDate.valueOf();
-  const eventEndTime = eventTimeDate.valueOf() + ONE_DAY;
-  if (currentTime < eventTime) return "default";
-  if (currentTime < eventEndTime) return "active";
-  return "ended";
-}
+import useFcfsStore from "@main/realtimeEvent/store.js";
+import { OFFLINE } from "@main/realtimeEvent/constants.js";
+import getEventDateState from "@main/realtimeEvent/getEventDateState.js";
 
 function DateEventPrize({ date, title, capacity, image }) {
   const currentServerTime = useFcfsStore((store) => store.currentServerTime);

diff --git a/src/fcfs/description/content.json → ...ge/features/fcfs/description/content.json b/src/fcfs/description/content.json → ...ge/features/fcfs/description/content.json
diff --git a/src/fcfs/description/index.jsx → ...nPage/features/fcfs/description/index.jsx b/src/fcfs/description/index.jsx → ...nPage/features/fcfs/description/index.jsx
@@ -1,4 +1,4 @@
-import EventDescriptionLayout from "@/eventDescription/EventDescriptionLayout.jsx";
+import EventDescriptionLayout from "@main/eventDescription/EventDescriptionLayout.jsx";
 import DateEventPrize from "./DateEventPrize.jsx";
 import content from "./content.json";
 

diff --git a/src/fcfs/index.jsx → src/mainPage/features/fcfs/index.jsx b/src/fcfs/index.jsx → src/mainPage/features/fcfs/index.jsx
@@ -1,6 +1,6 @@
 import { useRef } from "react";
-import useSectionInitialize from "@/scroll/useSectionInitialize.js";
-import { FCFS_SECTION } from "@/common/constants.js";
+import useSectionInitialize from "@main/scroll/useSectionInitialize.js";
+import { FCFS_SECTION } from "@main/scroll/constants.js";
 import CardGame from "./cardGame";
 import CountStarter from "./countdown/CountStarter.jsx";
 import FcfsDescription from "./description";

diff --git a/src/fcfs/mock.js → src/mainPage/features/fcfs/mock.js b/src/fcfs/mock.js → src/mainPage/features/fcfs/mock.js
diff --git a/src/fcfs/modals/FcfsInvalidModal.jsx → ...features/fcfs/modals/FcfsInvalidModal.jsx b/src/fcfs/modals/FcfsInvalidModal.jsx → ...features/fcfs/modals/FcfsInvalidModal.jsx
@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import { ModalCloseContext } from "@/modal/modal.jsx";
-import Button from "@/common/Button.jsx";
+import { ModalCloseContext } from "@common/modal/modal.jsx";
+import Button from "@common/components/Button.jsx";
 
 function FcfsInvalidModal() {
   const close = useContext(ModalCloseContext);