diff --git a/src/App.jsx b/src/App.jsx
index ca022617..27b936e1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import Header from "./header";
 import SimpleInformation from "./simpleInformation";
 import DetailInformation from "./detailInformation";
 import CommentSection from "./comment";
+import FcfsSection from "./fcfs";
 import QnA from "./qna";
 import Footer from "./footer";
 import Modal from "./modal/modal.jsx";
@@ -25,6 +26,7 @@ function App() {
       <InteractionPage />
       <DetailInformation />
       <CommentSection />
+      <FcfsSection />
       <QnA />
       <Footer />
       <Modal layer="interaction" />
diff --git a/src/auth/mock.js b/src/auth/mock.js
index 778d58f1..aed8b1c0 100644
--- a/src/auth/mock.js
+++ b/src/auth/mock.js
@@ -33,7 +33,7 @@ const handlers = [
           { error: "응답 내용이 잘못됨" },
           { status: 400 },
         );
-      if (authCode !== "726679")
+      if (+authCode < 500000 === false)
         return HttpResponse.json(
           { error: "인증번호 일치 안 함" },
           { status: 401 },
diff --git a/src/comment/commentCarousel/CommentCarousel.jsx b/src/comment/commentCarousel/CommentCarousel.jsx
index a38f73e5..9e9e84b9 100644
--- a/src/comment/commentCarousel/CommentCarousel.jsx
+++ b/src/comment/commentCarousel/CommentCarousel.jsx
@@ -1,3 +1,5 @@
+import { useQuery } from "@/common/dataFetch/getQuery.js";
+import { fetchServer } from "@/common/dataFetch/fetchServer.js";
 import AutoScrollCarousel from "../autoScrollCarousel";
 
 function mask(string) {
@@ -15,8 +17,10 @@ function formatDate(dateString) {
   return `${year}. ${month}. ${day}`;
 }
 
-function CommentCarousel({ resource }) {
-  const comments = resource().comments;
+function CommentCarousel() {
+  const { comments } = useQuery("comment-data", () =>
+    fetchServer("/api/v1/comment"),
+  );
 
   return (
     <div className="w-full h-[29rem]">
diff --git a/src/comment/commentCarousel/index.jsx b/src/comment/commentCarousel/index.jsx
index 86a2d69c..3b78aae1 100644
--- a/src/comment/commentCarousel/index.jsx
+++ b/src/comment/commentCarousel/index.jsx
@@ -1,17 +1,14 @@
-import { useMemo } from "react";
 import Suspense from "@/common/Suspense.jsx";
 import ErrorBoundary from "@/common/ErrorBoundary.jsx";
-import { fetchResource } from "@/common/dataFetch/fetchServer.js";
 import CommentCarousel from "./CommentCarousel.jsx";
 import CommentCarouselSkeleton from "./CommentCarouselSkeleton.jsx";
 import CommentCarouselError from "./CommentCarouselError.jsx";
 
 function CommentCarouselView() {
-  const resource = useMemo(() => fetchResource("/api/v1/comment"), []);
   return (
     <ErrorBoundary fallback={<CommentCarouselError />}>
       <Suspense fallback={<CommentCarouselSkeleton />}>
-        <CommentCarousel resource={resource} />
+        <CommentCarousel />
       </Suspense>
     </ErrorBoundary>
   );
diff --git a/src/common/ClientOnly.jsx b/src/common/ClientOnly.jsx
index 48f0ae32..4de0cc2c 100644
--- a/src/common/ClientOnly.jsx
+++ b/src/common/ClientOnly.jsx
@@ -1,20 +1,20 @@
-import { useSyncExternalStore, useEffect } from "react";
+import { useSyncExternalStore } from "react";
 
-const mountedStore = {
-  mounted: false,
-  listeners: new Set(),
-  mount() {
-    mountedStore.mounted = true;
-    mountedStore.listeners.forEach((listener) => listener());
-  },
-  subscribe(listener) {
-    mountedStore.listeners.add(listener);
-    return () => mountedStore.listeners.delete(listener);
-  },
-  getSnapshot() {
-    return mountedStore.mounted;
-  },
-};
+// const mountedStore = {
+//   mounted: false,
+//   listeners: new Set(),
+//   mount() {
+//     mountedStore.mounted = true;
+//     mountedStore.listeners.forEach((listener) => listener());
+//   },
+//   subscribe(listener) {
+//     mountedStore.listeners.add(listener);
+//     return () => mountedStore.listeners.delete(listener);
+//   },
+//   getSnapshot() {
+//     return mountedStore.mounted;
+//   },
+// };
 
 /**
  * react 클라이언트 only 래퍼 입니다.
@@ -23,13 +23,10 @@ const mountedStore = {
  */
 export default function ClientOnly({ children, fallback }) {
   const mounted = useSyncExternalStore(
-    mountedStore.subscribe,
-    mountedStore.getSnapshot,
+    () => {},
+    () => true,
     () => false,
   );
-  useEffect(() => {
-    mountedStore.mount();
-  }, []);
 
   if (!mounted) return fallback;
   return children;
diff --git a/src/common/constants.js b/src/common/constants.js
index 0c012c18..afb037f3 100644
--- a/src/common/constants.js
+++ b/src/common/constants.js
@@ -3,3 +3,5 @@ export const TOKEN_ID = "AWESOME_ORANGE_ACCESS_TOKEN";
 
 // scroll section constants
 export const INTERACTION_SECTION = 1;
+export const COMMENT_SECTION = 3;
+export const FCFS_SECTION = 4;
diff --git a/src/common/dataFetch/fetchServer.js b/src/common/dataFetch/fetchServer.js
index 541a9941..244a5fb8 100644
--- a/src/common/dataFetch/fetchServer.js
+++ b/src/common/dataFetch/fetchServer.js
@@ -1,9 +1,5 @@
-import wrapPromise from "./wrapPromise.js";
 import tokenSaver from "@/auth/tokenSaver.js";
 
-const cacheMap = new Map();
-const CACHE_DURATION = 0.2 * 1000;
-
 class HTTPError extends Error {
   constructor(response) {
     super(response.status + " " + response.statusText);
@@ -20,12 +16,6 @@ class ServerCloseError extends Error {
 }
 
 function fetchServer(url, options = {}) {
-  const key = JSON.stringify({ url, options });
-  if (cacheMap.has(key)) {
-    const { promise, date } = cacheMap.get(key);
-    if (Date.now() - date < CACHE_DURATION) return promise;
-  }
-
   // 기본적으로 옵션을 그대로 가져오지만, body가 존재하고 header.content-type을 설정하지 않는다면
   // json으로 간주하여 option을 생성합니다.
   const fetchOptions = { ...options };
@@ -65,17 +55,10 @@ function fetchServer(url, options = {}) {
       }
       throw e;
     });
-  cacheMap.set(key, { promise, date: Date.now() });
 
   return promise;
 }
 
-function fetchResource(url, loginStatus = false) {
-  return wrapPromise(
-    fetchServer(url, { credentials: loginStatus ? "include" : "same-origin" }),
-  );
-}
-
 function handleError(errorDescriptor) {
   return (error) => {
     if (error instanceof HTTPError) {
@@ -95,4 +78,4 @@ function handleError(errorDescriptor) {
   };
 }
 
-export { fetchServer, fetchResource, handleError, HTTPError, ServerCloseError };
+export { fetchServer, handleError, HTTPError, ServerCloseError };
diff --git a/src/common/dataFetch/getQuery.js b/src/common/dataFetch/getQuery.js
new file mode 100644
index 00000000..032a14b8
--- /dev/null
+++ b/src/common/dataFetch/getQuery.js
@@ -0,0 +1,26 @@
+import use from "./use.js";
+
+const queryMap = new Map();
+const CACHE_DURATION = 10 * 60 * 1000;
+
+function isSame(arr1, arr2) {
+  if (arr1.length !== arr2.length) return false;
+  return arr1.every((value, i) => value === arr2[i]);
+}
+
+export function getQuery(key, promiseFn, dependencyArray = []) {
+  if (queryMap.has(key)) {
+    const { promise, depArr } = queryMap.get(key);
+    if (isSame(depArr, dependencyArray)) return promise;
+  }
+  const promise = promiseFn();
+  queryMap.set(key, { promise, depArr: dependencyArray });
+  setTimeout(() => queryMap.delete(key), CACHE_DURATION);
+  return promise;
+}
+
+export function useQuery(key, promiseFn, dependencyArray = []) {
+  return use(getQuery(key, promiseFn, dependencyArray));
+}
+
+export const getQuerySuspense = useQuery;
diff --git a/src/common/dataFetch/use.js b/src/common/dataFetch/use.js
new file mode 100644
index 00000000..70da6cac
--- /dev/null
+++ b/src/common/dataFetch/use.js
@@ -0,0 +1,19 @@
+export default function use(promise) {
+  if (promise.status === "resolved") return promise.value;
+  if (promise.status === "rejected") throw promise.error;
+  if (promise.status === "pending") throw promise;
+
+  promise.status = "pending";
+  promise
+    .then((e) => {
+      promise.status = "resolved";
+      promise.value = e;
+      return e;
+    })
+    .catch((e) => {
+      promise.status = "rejected";
+      promise.error = e;
+    });
+
+  throw promise;
+}
diff --git a/src/common/dataFetch/wrapPromise.js b/src/common/dataFetch/wrapPromise.js
deleted file mode 100644
index 7172fa02..00000000
--- a/src/common/dataFetch/wrapPromise.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export default function wrapPromise(promise) {
-  let state = "pending";
-  let result = null;
-  promise
-    .then((res) => {
-      state = "complete";
-      result = res;
-    })
-    .catch((err) => {
-      state = "error";
-      result = err;
-    });
-  return () => {
-    switch (state) {
-      case "complete":
-        return result;
-      case "error":
-        throw result;
-      default:
-        throw promise;
-    }
-  };
-}
diff --git a/src/common/utils.js b/src/common/utils.js
index 590043d8..2be99fe6 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -7,3 +7,22 @@ export function clamp(target, min, max) {
 export function linearMap(ratio, min, max) {
   return ratio * (max - min) + min;
 }
+
+const HOURS = 24;
+const MINUTES = 60;
+const SECONDS = 60;
+
+export function padNumber(number) {
+  return number.toString().padStart(2, "0");
+}
+
+export function convertSecondsToString(time) {
+  if (time < 0) return "00 : 00 : 00";
+
+  const days = Math.floor(time / (HOURS * MINUTES * SECONDS));
+  const hours = Math.floor(time / (MINUTES * SECONDS)) % HOURS;
+  const minutes = Math.floor(time / SECONDS) % MINUTES;
+  const seconds = time % SECONDS;
+
+  return `${days > 0 ? days + " : " : ""}${[hours, minutes, seconds].map(padNumber).join(" : ")}`;
+}
diff --git a/src/eventDescription/EventDetail.jsx b/src/eventDescription/EventDetail.jsx
new file mode 100644
index 00000000..1f5a12a3
--- /dev/null
+++ b/src/eventDescription/EventDetail.jsx
@@ -0,0 +1,58 @@
+import makeHighlight from "./makeHighlight.jsx";
+
+export default function EventDetail({
+  durationYear,
+  duration,
+  announceDate,
+  announceDateCaption,
+  howto,
+}) {
+  return (
+    <div className="flex flex-col">
+      <span className="text-body-l pb-10 text-neutral-50 font-bold">
+        상세 안내
+      </span>
+
+      <div className="flex gap-5">
+        <div className="bg-neutral-900 p-6 flex flex-col font-bold">
+          <span className="text-body-m text-neutral-300">이벤트 기간</span>
+
+          <span className="pt-6 text-body-m text-blue-100">{durationYear}</span>
+
+          <span className="text-body-l text-blue-400">{duration}</span>
+        </div>
+
+        <div className="bg-neutral-900 p-6 flex flex-col">
+          <span className="text-body-m text-neutral-300 font-bold">
+            당첨자 발표
+          </span>
+
+          <span className="pt-6 text-body-l text-white font-bold">
+            {makeHighlight(announceDate, "font-normal text-neutral-300")}
+          </span>
+
+          <span className="pt-2 text-body-s text-neutral-300">
+            {announceDateCaption}
+          </span>
+        </div>
+      </div>
+
+      <div className="mt-5 p-6 bg-neutral-900 flex flex-col font-bold">
+        <span className="pb-6 text-body-m text-neutral-300">참여방법</span>
+
+        <ul className="flex flex-col gap-2">
+          {howto.map((description, index) => (
+            <li key={`howTo-${index}`} className="flex gap-2">
+              <span className="size-6 flex justify-center items-center bg-neutral-100 text-neutral-900 text-body-s px-2 py-0.5 rounded flex-shrink-0">
+                {index + 1}
+              </span>
+              <p className="text-neutral-400 text-body-m">
+                {makeHighlight(description, "text-white")}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/src/eventDescription/makeHighlight.jsx b/src/eventDescription/makeHighlight.jsx
new file mode 100644
index 00000000..6286a017
--- /dev/null
+++ b/src/eventDescription/makeHighlight.jsx
@@ -0,0 +1,17 @@
+// **매일매일 공개되는** 더 뉴 아이오닉과 관련된 **인터랙션을 수행한다.**
+// **...**로 감싸진 것은 강조입니다.
+
+function makeHighlight(plainText, highlightClass) {
+  const tokened = plainText.split(/\*\*(.*?)\*\*/gm);
+
+  return tokened.map((content, index) => {
+    if (index % 2 === 0) return content;
+    return (
+      <span key={content + index} className={highlightClass}>
+        {content}
+      </span>
+    );
+  });
+}
+
+export default makeHighlight;
diff --git a/src/fcfs/FcfsDescription.jsx b/src/fcfs/FcfsDescription.jsx
new file mode 100644
index 00000000..64f0afdf
--- /dev/null
+++ b/src/fcfs/FcfsDescription.jsx
@@ -0,0 +1,12 @@
+import EventDetail from "@/eventDescription/EventDetail.jsx";
+import content from "./content.json";
+
+function FcfsDescription() {
+  return (
+    <div>
+      <EventDetail {...content} />
+    </div>
+  );
+}
+
+export default FcfsDescription;
diff --git a/src/fcfs/cardGame/Card.jsx b/src/fcfs/cardGame/Card.jsx
new file mode 100644
index 00000000..41b82db1
--- /dev/null
+++ b/src/fcfs/cardGame/Card.jsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import style from "./style.module.css";
+import correct1x from "./assets/correct@1x.png";
+import correct2x from "./assets/correct@2x.png";
+import failed1x from "./assets/failed@1x.png";
+import failed2x from "./assets/failed@2x.png";
+import hidden1x from "./assets/hidden@1x.png";
+import hidden2x from "./assets/hidden@2x.png";
+
+// 빠진 것: index props, setPending, setCorrect state
+function Card({ offline, locked, fliped, setGlobalLock }) {
+  const [isFlipped, setFlipped] = useState(fliped);
+  const [isPending] = useState(false);
+  const [isCorrect] = useState(false);
+  const cardFaceBaseStyle = "absolute top-0 left-0 w-full h-full";
+
+  function flip() {
+    setGlobalLock(true);
+    if (offline) return setFlipped(true);
+
+    setFlipped(true);
+  }
+
+  const answer1x = isCorrect ? correct1x : failed1x;
+  const answer2x = isCorrect ? correct2x : failed2x;
+
+  return (
+    <button
+      className={`w-60 h-80 relative transition-all duration-200 ease-in-out-cubic ${style.card} ${isPending && !isFlipped ? style.pending : ""} ${isFlipped ? style.flipped : ""}`}
+      onClick={flip}
+      onTransitionEnd={() => setGlobalLock(false)}
+      disabled={locked || fliped || isFlipped}
+    >
+      <div className={`${cardFaceBaseStyle} ${style.front}`}>
+        <img
+          src={hidden1x}
+          srcSet={`${hidden1x} 1x, ${hidden2x} 2x`}
+          alt="hidden"
+          className="w-full h-full"
+          draggable="false"
+        />
+      </div>
+      <div className={`${cardFaceBaseStyle} ${style.back}`}>
+        <img
+          src={answer1x}
+          srcSet={`${answer1x} 1x, ${answer2x} 2x`}
+          alt={
+            isCorrect ? "축하합니다, 당첨입니다!" : "아쉽게도 정답이 아니네요!"
+          }
+          className="w-full h-full"
+          draggable="false"
+        />
+      </div>
+    </button>
+  );
+}
+
+export default Card;
diff --git a/src/fcfs/cardGame/CardGame.jsx b/src/fcfs/cardGame/CardGame.jsx
new file mode 100644
index 00000000..4aa0ca92
--- /dev/null
+++ b/src/fcfs/cardGame/CardGame.jsx
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import useFcfsStore from "../store.js";
+import * as Status from "../constants.js";
+import CardGameTitle from "./CardGameTitle.jsx";
+import Card from "./Card.jsx";
+
+function getLocked(eventStatus, isParticipated, offline) {
+  if (offline) return false;
+  if (isParticipated) return true;
+  if (eventStatus === Status.PROGRESS || eventStatus === Status.OFFLINE)
+    return false;
+  return true;
+}
+
+function CardGame({ offline }) {
+  const [transLocked, setTransLocked] = useState(false);
+  const eventStatus = useFcfsStore((store) => store.eventStatus);
+  const isParticipated = useFcfsStore((store) => store.isParticipated);
+  const isOffline = offline || eventStatus === Status.OFFLINE;
+  const isLocked = getLocked(eventStatus, isParticipated, offline);
+  const cardProps = {
+    offline: isOffline,
+    locked: isLocked || transLocked,
+    fliped: isParticipated,
+    setGlobalLock: setTransLocked,
+  };
+
+  return (
+    <>
+      <div className="h-32 flex justify-center items-center">
+        <CardGameTitle
+          status={
+            offline
+              ? Status.OFFLINE
+              : isParticipated
+                ? Status.ALREADY
+                : eventStatus
+          }
+        />
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 min-[1140px]:grid-cols-4 gap-10">
+        <Card index={1} {...cardProps} />
+        <Card index={2} {...cardProps} />
+        <Card index={3} {...cardProps} />
+        <Card index={4} {...cardProps} />
+      </div>
+    </>
+  );
+}
+
+export default CardGame;
diff --git a/src/fcfs/cardGame/CardGameTitle.jsx b/src/fcfs/cardGame/CardGameTitle.jsx
new file mode 100644
index 00000000..aed89a6c
--- /dev/null
+++ b/src/fcfs/cardGame/CardGameTitle.jsx
@@ -0,0 +1,55 @@
+import useFcfsStore from "../store.js";
+import * as Status from "../constants.js";
+import { convertSecondsToString } from "@/common/utils.js";
+
+function CardGameCountdown() {
+  const countdown = useFcfsStore((store) => store.countdown);
+  return (
+    <h3 className="text-6xl min-[420px]:text-8xl font-bold text-center text-yellow-400 font-ds-digital">
+      {convertSecondsToString(countdown)}
+    </h3>
+  );
+}
+
+function CardGameTitle({ status }) {
+  const commonStyle = "text-head-l md:text-7xl font-bold text-center";
+
+  if (status === Status.PROGRESS)
+    return (
+      <h3
+        className={`${commonStyle} graphic-gradient text-transparent bg-clip-text`}
+      >
+        카드를 뒤집어 주세요!
+      </h3>
+    );
+  if (status === Status.COUNTDOWN) return <CardGameCountdown />;
+  if (status === Status.WAITING)
+    return (
+      <h3 className={`${commonStyle} text-white`}>
+        오후
+        <span className="text-6xl min-[420px]:text-8xl font-bold text-green-400 font-ds-digital align-sub md:align-text-bottom">
+          {" "}
+          05 : 00
+        </span>
+        에 다시 만나요!
+      </h3>
+    );
+  if (status === Status.ALREADY)
+    return (
+      <h3 className={`${commonStyle} text-neutral-200`}>이미 참여하셨습니다</h3>
+    );
+  return (
+    <div className="relative flex justify-center">
+      <h3
+        className={`${commonStyle} graphic-gradient text-transparent bg-clip-text`}
+      >
+        카드를 뒤집어 주세요!
+      </h3>
+      <p className="text-neutral-300 text-center absolute -bottom-8">
+        * 본 이벤트는 마감된 이벤트입니다. 이벤트의 열기를 느껴보세요!
+      </p>
+    </div>
+  );
+}
+
+export default CardGameTitle;
diff --git a/src/fcfs/cardGame/assets/correct@1x.png b/src/fcfs/cardGame/assets/correct@1x.png
new file mode 100644
index 00000000..a3488bcd
Binary files /dev/null and b/src/fcfs/cardGame/assets/correct@1x.png differ
diff --git a/src/fcfs/cardGame/assets/correct@2x.png b/src/fcfs/cardGame/assets/correct@2x.png
new file mode 100644
index 00000000..7e98931c
Binary files /dev/null and b/src/fcfs/cardGame/assets/correct@2x.png differ
diff --git a/src/fcfs/cardGame/assets/failed@1x.png b/src/fcfs/cardGame/assets/failed@1x.png
new file mode 100644
index 00000000..476e770c
Binary files /dev/null and b/src/fcfs/cardGame/assets/failed@1x.png differ
diff --git a/src/fcfs/cardGame/assets/failed@2x.png b/src/fcfs/cardGame/assets/failed@2x.png
new file mode 100644
index 00000000..3148c099
Binary files /dev/null and b/src/fcfs/cardGame/assets/failed@2x.png differ
diff --git a/src/fcfs/cardGame/assets/hidden@1x.png b/src/fcfs/cardGame/assets/hidden@1x.png
new file mode 100644
index 00000000..fe0f4463
Binary files /dev/null and b/src/fcfs/cardGame/assets/hidden@1x.png differ
diff --git a/src/fcfs/cardGame/assets/hidden@2x.png b/src/fcfs/cardGame/assets/hidden@2x.png
new file mode 100644
index 00000000..1cd3319b
Binary files /dev/null and b/src/fcfs/cardGame/assets/hidden@2x.png differ
diff --git a/src/fcfs/cardGame/index.jsx b/src/fcfs/cardGame/index.jsx
new file mode 100644
index 00000000..772d81b1
--- /dev/null
+++ b/src/fcfs/cardGame/index.jsx
@@ -0,0 +1,24 @@
+import Suspense from "@/common/Suspense.jsx";
+import ErrorBoundary from "@/common/ErrorBoundary.jsx";
+import useFcfsStore from "../store.js";
+import CardGame from "./CardGame.jsx";
+
+function CardGameInitializer() {
+  const getData = useFcfsStore((store) => store.getData);
+
+  getData();
+
+  return <CardGame />;
+}
+
+function CardGameSection() {
+  return (
+    <ErrorBoundary fallback={<div>에러남</div>}>
+      <Suspense fallback={<div>로딩중</div>}>
+        <CardGameInitializer />
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+
+export default CardGameSection;
diff --git a/src/fcfs/cardGame/style.module.css b/src/fcfs/cardGame/style.module.css
new file mode 100644
index 00000000..38a30bcc
--- /dev/null
+++ b/src/fcfs/cardGame/style.module.css
@@ -0,0 +1,48 @@
+.card {
+  transform-style: preserve-3d;
+}
+
+.card.flipped {
+  transform: rotateY(180deg);
+}
+
+.front {
+  transition: filter 0.1s ease-out;
+}
+
+.pending {
+  animation: 0.2s linear 0.3s infinite shake;
+}
+
+.pending .front {
+  filter: brightness(2.9) drop-shadow(0px 0px 40px white);
+  transition: filter 0.8s ease-out;
+}
+
+.back {
+  transform: translateZ(-0.1px) rotateY(180deg);
+}
+
+@keyframes shake {
+  0% {
+    transform: rotate(0deg);
+  }
+  10% {
+    transform: rotate(5deg);
+  }
+  30% {
+    transform: rotate(-3deg);
+  }
+  50% {
+    transform: rotate(6deg);
+  }
+  70% {
+    transform: rotate(-5deg);
+  }
+  90% {
+    transform: rotate(4deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
diff --git a/src/fcfs/constants.js b/src/fcfs/constants.js
new file mode 100644
index 00000000..fdb6650f
--- /dev/null
+++ b/src/fcfs/constants.js
@@ -0,0 +1,5 @@
+export const PROGRESS = "progress";
+export const COUNTDOWN = "countdown";
+export const WAITING = "waiting";
+export const OFFLINE = "offline";
+export const ALREADY = "already-participated";
diff --git a/src/fcfs/content.json b/src/fcfs/content.json
new file mode 100644
index 00000000..879b0059
--- /dev/null
+++ b/src/fcfs/content.json
@@ -0,0 +1,11 @@
+{
+  "durationYear": "2024년",
+  "duration": "9/9(월)~9/13(금), 매일 오후5시",
+  "announceDate": "2024년 9월 20일 **(예정)**",
+  "announceDateCaption": "* 인증 시 입력한 연락처로 개별 안내",
+  "howto": [
+    "**오후 5시**에 맞춰 **카드를 클릭**한다.",
+    "**완충된 카드**를 **누구보다 빠르게** 찾으면 당첨!",
+    "**경품**을 위해 미리 **개인정보 인증은 필수!**"
+  ]
+}
diff --git a/src/fcfs/countdown/CountStarter.jsx b/src/fcfs/countdown/CountStarter.jsx
new file mode 100644
index 00000000..f8712b07
--- /dev/null
+++ b/src/fcfs/countdown/CountStarter.jsx
@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+import useFcfsStore from "../store.js";
+import CountdownController from "./CountdownController";
+import Suspense from "@/common/Suspense.jsx";
+import ErrorBoundary from "@/common/ErrorBoundary.jsx";
+
+function CountStarterDummy() {
+  const controller = useRef(new CountdownController(0, 0));
+  const getData = useFcfsStore((store) => store.getData);
+  const currentServerTime = useFcfsStore((store) => store.currentServerTime);
+  const currentEventTime = useFcfsStore((store) => store.currentEventTime);
+  const handleCountdown = useFcfsStore((store) => store.handleCountdown);
+
+  getData();
+
+  useEffect(() => {
+    controller.current = new CountdownController(
+      currentServerTime,
+      currentEventTime,
+    );
+    const counter = controller.current;
+    counter.addEventListener("interval", handleCountdown);
+    counter.start();
+
+    return () => {
+      counter.removeEventListener("interval", handleCountdown);
+      counter.end();
+    };
+  }, [currentServerTime, currentEventTime, handleCountdown]);
+
+  return null;
+}
+
+function CountStarter() {
+  return (
+    <ErrorBoundary>
+      <Suspense>
+        <CountStarterDummy />
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+
+export default CountStarter;
diff --git a/src/fcfs/countdown/CountdownController.js b/src/fcfs/countdown/CountdownController.js
new file mode 100644
index 00000000..943e4dbf
--- /dev/null
+++ b/src/fcfs/countdown/CountdownController.js
@@ -0,0 +1,55 @@
+class CountdownController extends EventTarget {
+  #expected;
+  #isTicking = false;
+  #timeout = null;
+  #pauseDelta = 0;
+  currentTime = 0;
+  targetTime = 0;
+  get isTicking() {
+    return this.#isTicking;
+  }
+  constructor(serverTime, targetTime) {
+    super();
+    this.interval = 1000;
+    this.currentTime = serverTime;
+    this.targetTime = targetTime;
+  }
+  start() {
+    if (this.#isTicking) return;
+
+    this.#isTicking = true;
+
+    let delta = (this.targetTime - this.currentTime) % 1000;
+    if (delta < 0) delta += 1000;
+    this.#expected = performance.now() + delta;
+    this.#timeout = setTimeout(() => this.#step(delta), delta);
+  }
+  end() {
+    if (!this.#isTicking) return;
+
+    this.#isTicking = false;
+    this.#expected = 0;
+    clearTimeout(this.#timeout);
+    this.#timeout = null;
+  }
+  #step(originDelta) {
+    const errorDelta = this.#expected - performance.now();
+
+    this.#expected += this.interval;
+    this.currentTime += originDelta;
+    this.dispatchEvent(
+      new CustomEvent("interval", {
+        details: this.targetTime - this.currentTime,
+      }),
+    );
+    if (this.currentTime === this.targetTime)
+      this.dispatchEvent(new Event("countover"));
+    if (this.callback) this.callback();
+    this.#timeout = setTimeout(
+      () => this.#step(this.interval),
+      Math.max(0, this.interval + errorDelta),
+    );
+  }
+}
+
+export default CountdownController;
diff --git a/src/fcfs/index.jsx b/src/fcfs/index.jsx
new file mode 100644
index 00000000..f71266ec
--- /dev/null
+++ b/src/fcfs/index.jsx
@@ -0,0 +1,37 @@
+import { useRef } from "react";
+import useSectionInitialize from "@/scroll/useSectionInitialize.js";
+import { FCFS_SECTION } from "@/common/constants.js";
+import CardGame from "./cardGame";
+import CountStarter from "./countdown/CountStarter.jsx";
+import FcfsDescription from "./FcfsDescription.jsx";
+
+function FcfsSection() {
+  const sectionRef = useRef(null);
+  useSectionInitialize(FCFS_SECTION, sectionRef);
+
+  return (
+    <section
+      ref={sectionRef}
+      className="w-full flex flex-col items-center bg-black py-24 lg:py-60 gap-16 lg:gap-30 px-6"
+    >
+      <div className="relative w-full max-w-[1200px] flex flex-col gap-3 lg:gap-9 text-center font-bold items-center">
+        <p className="text-body-m text-neutral-200 w-fit py-1 lg:py-5 border-b-2 border-neutral-200">
+          EVENT 2
+        </p>
+        <h2 className="text-head-s lg:text-head-m w-80 md:w-full text-white">
+          가득찬 배터리 카드를 찾으면 경품은 나의 것!
+        </h2>
+      </div>
+      <div className="w-full max-w-[1200px] flex flex-col justify-center items-center gap-10">
+        <CardGame />
+        <p className="text-body-s md:text-body-m lg:text-body-l text-neutral-200 font-medium">
+          ※ 개인정보 인증 후 참여할 수 있습니다.
+        </p>
+        <FcfsDescription />
+      </div>
+      <CountStarter />
+    </section>
+  );
+}
+
+export default FcfsSection;
diff --git a/src/fcfs/mock.js b/src/fcfs/mock.js
new file mode 100644
index 00000000..b9297eec
--- /dev/null
+++ b/src/fcfs/mock.js
@@ -0,0 +1,18 @@
+import { http, HttpResponse } from "msw";
+
+const handlers = [
+  http.get("/api/serverTime", () => {
+    return HttpResponse.json({ timestamp: "2024-08-08T06:00:00.500+00:00" });
+  }),
+  http.get("/api/v1/event/fcfs/:eventFrameId/info", () => {
+    return HttpResponse.json({
+      nowDateTime: "2024-08-08T05:00:02.000Z",
+      eventStatus: "progress",
+    });
+  }),
+  http.get("/api/v1/event/fcfs/participated", () => {
+    return HttpResponse.json({ answerResult: false, winner: false });
+  }),
+];
+
+export default handlers;
diff --git a/src/fcfs/store.js b/src/fcfs/store.js
new file mode 100644
index 00000000..21dc6abc
--- /dev/null
+++ b/src/fcfs/store.js
@@ -0,0 +1,101 @@
+import { create } from "zustand";
+import * as Status from "./constants.js";
+import {
+  fetchServer,
+  HTTPError,
+  ServerCloseError,
+} from "@/common/dataFetch/fetchServer.js";
+import { getQuerySuspense } from "@/common/dataFetch/getQuery.js";
+import { EVENT_ID } from "@/common/constants.js";
+
+const HOURS = 60 * 60;
+
+async function getServerPresiseTime() {
+  const startClientTime = performance.now();
+  const { timestamp: serverTime } = await fetch("/api/serverTime").then((e) =>
+    e.json(),
+  );
+  const networkPayloadTime = performance.now() - startClientTime;
+
+  return new Date(serverTime).getTime() + networkPayloadTime;
+}
+
+async function getFcfsEventInfo() {
+  try {
+    const eventData = fetchServer(`/api/v1/event/fcfs/${EVENT_ID}/info`);
+    return eventData;
+  } catch (e) {
+    if (e instanceof HTTPError && e.status === 404)
+      return {
+        nowDateTime: "9999-12-31T11:59:59.000Z",
+        eventStatus: "unknown",
+      };
+    if (e instanceof ServerCloseError)
+      return {
+        currentEventTime: "9999-12-31T11:59:59.000Z",
+        eventStatus: "unknown",
+      };
+    throw e;
+  }
+}
+
+async function getFcfsParticipated() {
+  try {
+    const eventData = fetchServer(`/api/v1/event/fcfs/participated`); // ???
+    return eventData;
+  } catch (e) {
+    if (e instanceof HTTPError && e.status === 404)
+      return { answerResult: false, winner: false };
+    if (e instanceof ServerCloseError)
+      return { answerResult: false, winner: false };
+    throw e;
+  }
+}
+
+function getEventStatusFromCount(countdown) {
+  if (countdown <= -7 * HOURS) return Status.OFFLINE;
+  if (countdown <= 0) return Status.PROGRESS;
+  if (countdown <= 3 * HOURS) return Status.COUNTDOWN;
+  return Status.WAITING;
+}
+
+const fcfsStore = create((set) => ({
+  countdown: 0,
+  currentServerTime: 0,
+  currentEventTime: 0,
+  eventStatus: Status.OFFLINE,
+  isParticipated: false,
+  getData: () => {
+    const promiseFn = async function () {
+      // get server time and event info
+      const [serverTime, eventInfo, participated] = await Promise.all([
+        getServerPresiseTime(),
+        getFcfsEventInfo(),
+        getFcfsParticipated(),
+      ]);
+      const currentServerTime = serverTime;
+      const currentEventTime = new Date(eventInfo.nowDateTime).getTime();
+
+      // get countdown and syncronize state
+      const countdown = Math.ceil(
+        (currentEventTime - currentServerTime) / 1000,
+      );
+      set({
+        currentServerTime,
+        currentEventTime,
+        countdown,
+        eventStatus: eventInfo.eventStatus,
+        isParticipated: participated.answerResult,
+      });
+    };
+    return getQuerySuspense("fcfs-info-data", promiseFn, [set]);
+  },
+  setEventStatus: (eventStatus) => set({ eventStatus }),
+  handleCountdown: () =>
+    set((state) => ({
+      countdown: state.countdown - 1,
+      eventStatus: getEventStatusFromCount(state.countdown - 1),
+    })),
+}));
+
+export default fcfsStore;
diff --git a/src/mock.js b/src/mock.js
index 88c1b59f..bf7f647b 100644
--- a/src/mock.js
+++ b/src/mock.js
@@ -1,8 +1,9 @@
 import { setupWorker } from "msw/browser";
 import commentHandler from "./comment/mock.js";
 import authHandler from "./auth/mock.js";
+import fcfsHandler from "./fcfs/mock.js";
 
 // mocking은 기본적으로 각 feature 폴더 내의 mock.js로 정의합니다.
 // 새로운 feature의 mocking을 추가하셨으면, mock.js의 setupWorker 내부 함수에 인자를 spread 연산자를 이용해 추가해주세요.
 // 예시 : export default setupWorker(...authHandler, ...questionHandler, ...articleHandler);
-export default setupWorker(...commentHandler, ...authHandler);
+export default setupWorker(...commentHandler, ...authHandler, ...fcfsHandler);