From f2d576cfc5952f98c2ad2212503724a7017b628a Mon Sep 17 00:00:00 2001
From: Honghyeonji <66579773+Honghyeonji@users.noreply.github.com>
Date: Fri, 17 Jan 2025 16:07:33 +0900
Subject: [PATCH] =?UTF-8?q?[release]=20dev=20->=20main=20=EB=B8=8C?=
 =?UTF-8?q?=EB=9E=9C=EC=B9=98=20merge=20/=201.0.1version=20upgrade=20(#24)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔨 refactor: Docker 이미지 최적화를 위한 코드 리팩토링

* 🙀 chore: 오타 수정

* 🐛 fix: COPY 경로 수정

* 🐛 fix: swagger-auto 명령어 추가

* 🙀 chore: 오타수정

* 🐛 fix: backend 이미지가 base-image를 사용하지 않으므로 새로운 패키지 매니저 설치 및 추가 파일 복사하는 로직 추가

* 🐛 fix: pnpm-lock 복사 코드 추가

* 🐛 fix: 서버 패키지 설치 안되는 오류 해결하기 위해 코드 수정

* 🐛 fix: eslint 경로 체크용 package 폴더 추가 복사

* 🐛 fix: 의존성을 복사해오고 dev용을 지우는 방식으로 수정

* 🐛 fix: pnpm-workspace 파일 복사

* 🙀 chore: cicd 스크립트 오타 수정

* 🙀 chore: copy 명령어 합침

* 🙀 chore: 코드 구조 변경

* 🐛 fix: COPY 경로 수정

* 🙀 chore: 경로 오타 수정

* 🔨 refactor: 배포시 swagger-auto 안 하게 로직 수정 및 prod 종속성에 필요한 패키지 dev 종속성에서 이동

* 🙀 chore: 경로 오타 수정

* 🙀 chore: 안쓰는 라이브러리 삭제

* 🚨 !HOTFIX!: env 설정 누락된 코드 추가

* 🚨 !HOTFIX!: env 설정 누락된 코드 추가

* [#10] 홈페이지 가상스크롤 적용 (#14)

* ✨ feat: scroll의 Y 좌표를 리턴하는 useScroll 커스텀 훅 추가

* 🚚 rename: hooks/css에 있던 useWindowSize 훅 폴더 위치 변경

* ✨ feat: 가상스크롤 구현 중

* 🙀 chore: 함수명 오타 수정

* ✨ feat: 가상스크롤 커스텀훅 추가

* ✨ feat: WorkspaceGrid 컴포넌트에 가상스크롤 적용

* 🙀 chore: grid의 총 높이 계산할 때 반올림   적용

* [#11] Google Analytics 적용 (#15)

* ✨ feat: ga4 코드 추가

* 🔨 refactor: 로컬 환경 디버깅용 코드로 전환

* 🙀 chore: GA 디버깅 코드 삭제

* ✨ feat: 이벤트 트레이싱

* Update boolock-dev-cicd.yml

* Update boolock-dev-cicd.yml

* [#18] useQuery, useInfiniteQuery -> useSuspenseQuery, useSuspenseInfiniteQuery 교체 (#19)

* 🔨 refactor: useQuery를 useSuspenseQuery로 교체 및 error 처러 코드 삭제

* 🔨 refactor: 로딩 UI 및 에러 처리 코드 삭제

* 🔨 refactor: suspense 적용 및 error boundy fallback에 workspace 에러 페이지 설정

* 🔨 refactor: useInfinityQuery -> useSuspenseQuery로 교체

* 🙀 chore: 400 에러와 404에러의 에러 코드 및 상태 메세지가 잘못 설정 되어 있어 올바르게 수정

* 🐛 fix: 기존 에러 발생 시 500 에러로만 응답하는 문제 해결

* 🔨 refactor: workspaceContainer에서 워크스페이스 데이터를 렌더링하고 페칭하는 부분을 분리함

* 🙀 chore: 컴포넌트 분리에 따른 코드 수정

* 🙀 chore: github action 에서 파일명 변경을 감지하지 못한 문제로 인해 파일명 변경

* 🙀 chore: 불필요한 console.log 삭제

* [#21] 홈페이지 로딩 시 스켈레톤UI에 그리드가 적용되지 않는 문제 해결, 워크스페이스 로딩 화면 조건부 렌더링 (#22)

* 🐛 fix: 스켈레톤UI에 그리드가 안되는 문제 해결

* ✨ feat: 워크스페이스 로딩 시간이 0.05초 이상일 때만 로딩 화면이 렌더링되도록 변경

* 🚨 !HOTFIX!: error가 발생할 때 return 해야하는데 그렇지 않을 때 return 하여 workspace가 초기화되지않는 문제 해결

* 🚨 !HOTFIX!: workflow on 설정 main push 일 경우로 수정

---------

Co-authored-by: YEONGJAE LEE <71895560+lee0jae330@users.noreply.github.com>
Co-authored-by: Gyeungil Choi <chlruddlf73@naver.com>
Co-authored-by: Yujin <yujinyll9148@gmail.com>
Co-authored-by: lee0jae330 <xingxing2001@cau.ac.kr>
---
 .github/workflows/boolock-dev-cicd.yml        |  15 +-
 apps/client/Dockerfile                        |  17 ++-
 apps/client/index.html                        |  15 +-
 apps/client/package.json                      |   4 +-
 apps/client/src/app/App.tsx                   |  20 ++-
 apps/client/src/app/main.tsx                  |   2 +
 .../CssCategoryButton/CssCategoryButton.tsx   |   1 +
 .../workspace/SaveButton/SaveButton.tsx       |   3 +-
 apps/client/src/pages/HomePage/HomePage.tsx   |   4 +-
 .../WorkspaceErrorPage/WorkspaceErrorPage.tsx |  14 ++
 .../src/pages/Workspacepage/WorkspacePage.tsx |  16 +-
 apps/client/src/pages/index.ts                |   2 +
 apps/client/src/shared/hooks/index.ts         |   4 +-
 .../shared/hooks/queries/useGetWorkspace.ts   |  21 +--
 .../hooks/queries/useGetWorkspaceList.ts      |   7 +-
 .../src/shared/hooks/useScrollPosition.ts     |  25 +++
 .../src/shared/hooks/useVirtualScroll.ts      |  56 +++++++
 .../shared/hooks/{css => }/useWindowSize.ts   |   0
 .../src/shared/store/useCssPropsStore.ts      |  42 +++--
 apps/client/src/shared/ui/index.ts            |   1 +
 .../src/shared/ui/loading/DelayedFallback.tsx |  19 +++
 apps/client/src/shared/utils/index.ts         |   1 +
 apps/client/src/shared/utils/mixpanel.ts      |  28 ++++
 .../WorkspaceContainer.stories.tsx            |   2 +-
 .../WorkspaceContainer/WorkspaceContainer.tsx |  49 +++---
 .../home/WorkspaceGrid/WorkspaceGrid.tsx      |  15 +-
 .../WorkspaceSection.stories.tsx              |  22 +++
 .../WorkspaceSection/WorkspaceSection.tsx     |  26 ++++
 apps/client/src/widgets/index.ts              |   3 +-
 .../workspace/PreviewBox/PreviewBox.tsx       |  17 ++-
 .../WorkspaceContent/WorkspaceContent.tsx     |  22 +++
 .../CssOptionItemList/CssOptionItemList.tsx   |   1 +
 apps/server/Dockerfile                        |  19 ++-
 apps/server/package.json                      |   2 +-
 apps/server/src/app.ts                        |  10 +-
 .../server/src/middlewares/errorMiddleware.ts |  23 ++-
 apps/server/src/utils/customError.ts          |   8 +-
 apps/server/tsconfig.json                     |   2 +-
 pnpm-lock.yaml                                | 143 +++++++++++-------
 39 files changed, 507 insertions(+), 174 deletions(-)
 create mode 100644 apps/client/src/pages/WorkspaceErrorPage/WorkspaceErrorPage.tsx
 create mode 100644 apps/client/src/shared/hooks/useScrollPosition.ts
 create mode 100644 apps/client/src/shared/hooks/useVirtualScroll.ts
 rename apps/client/src/shared/hooks/{css => }/useWindowSize.ts (100%)
 create mode 100644 apps/client/src/shared/ui/loading/DelayedFallback.tsx
 create mode 100644 apps/client/src/shared/utils/mixpanel.ts
 create mode 100644 apps/client/src/widgets/home/WorkspaceSection/WorkspaceSection.stories.tsx
 create mode 100644 apps/client/src/widgets/home/WorkspaceSection/WorkspaceSection.tsx

diff --git a/.github/workflows/boolock-dev-cicd.yml b/.github/workflows/boolock-dev-cicd.yml
index 595fdfa..51cd35b 100644
--- a/.github/workflows/boolock-dev-cicd.yml
+++ b/.github/workflows/boolock-dev-cicd.yml
@@ -2,9 +2,7 @@ name: ci/cd action
 
 on:
   push:
-    branches: ['dev']
-  pull_request:
-    branches: ['dev']
+    branches: ['main']
 
 jobs:
   build:
@@ -42,6 +40,7 @@ jobs:
       - name: Set FE .env
         run: |
           echo "VITE_SERVER_URL=http://localhost:3000" > apps/client/.env
+          echo "VITE_MIXPANEL_TOKEN=${{ secrets.VITE_MIXPANEL_TOKEN }}" >> apps/client/.env
           echo "VITE_STATIC_STORAGE_URL=${{ secrets.VITE_STATIC_STORAGE_URL }}" >> apps/client/.env
 
       - name: Set Nginx SSL files
@@ -98,18 +97,20 @@ jobs:
           password: ${{ secrets.SSH_PASSWORD }}
           port: ${{ secrets.SSH_PORT }}
           script: |
-            cd boolock/web31-BooLock
-            git checkout dev
-            git pull origin dev
+            cd boolock/refactor-web31-BooLock
+            git checkout main
+            git pull origin main
 
             echo "MONGO_URI=${{ secrets.DEPLOY_MONGO_URI }}"  > apps/server/.env
             echo "IS_LOCAL=false" >> apps/server/.env
-            echo "${{ secrets.DEPLOY_SERVER_CORS_ACCEPT }}" >> apps/server/.env
+            echo "SERVER_CORS_ACCEPT=${{ secrets.DEPLOY_SERVER_CORS_ACCEPT }}" >> apps/server/.env
             echo "S3_ACCESS_KEY=${{ secrets.S3_ACCESS_KEY }}" >> apps/server/.env
             echo "S3_SECRET_KEY=${{ secrets.S3_SECRET_KEY }}" >> apps/server/.env
             echo "S3_BUCKET_NAME=${{ secrets.S3_BUCKET_NAME }}" >> apps/server/.env
+            echo "NODE_ENV=production" >> apps/server/.env
 
             echo "VITE_SERVER_URL=${{ secrets.DEPLOY_VITE_SERVER_URL }}" > apps/client/.env
+            echo "VITE_MIXPANEL_TOKEN=${{ secrets.VITE_MIXPANEL_TOKEN }}" >> apps/client/.env
             echo "VITE_STATIC_STORAGE_URL=${{ secrets.VITE_STATIC_STORAGE_URL }}" >> apps/client/.env
 
             sudo docker compose pull
diff --git a/apps/client/Dockerfile b/apps/client/Dockerfile
index 5b82913..6f9915d 100644
--- a/apps/client/Dockerfile
+++ b/apps/client/Dockerfile
@@ -1,19 +1,20 @@
 FROM base-image AS frontend-build
+
 WORKDIR /app/apps/client
 COPY ./apps/client .
-COPY --from=base-image /app/packages /app/packages
-RUN pnpm install --offline --frozen-lockfile
-RUN pnpm run build
+RUN pnpm install --offline --frozen-lockfile &&\
+  pnpm run build
 
 FROM nginx:alpine AS frontend
-COPY --from=frontend-build /app/apps/client/dist /usr/share/nginx/html
+
 COPY /apps/client/nginx.conf /etc/nginx/conf.d/default.conf
 COPY /apps/client/ssl /etc/nginx/ssl
+RUN chmod 644 /etc/nginx/ssl/fullchain.pem &&\ 
+  chmod 600 /etc/nginx/ssl/privkey.pem &&\ 
+  chown -R nginx:nginx /usr/share/nginx/html /etc/nginx/ssl
 
-RUN chmod -R 755 /usr/share/nginx/html
-RUN chmod 644 /etc/nginx/ssl/fullchain.pem
-RUN chmod 600 /etc/nginx/ssl/privkey.pem
-RUN chown -R nginx:nginx /usr/share/nginx/html /etc/nginx/ssl
+COPY --from=frontend-build /app/apps/client/dist /usr/share/nginx/html/
+RUN chmod -R 755 /usr/share/nginx/html 
 
 EXPOSE 80 443
 CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/apps/client/index.html b/apps/client/index.html
index aaf34e8..ff71a31 100644
--- a/apps/client/index.html
+++ b/apps/client/index.html
@@ -1,6 +1,16 @@
 <!doctype html>
 <html lang="ko">
   <head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-SMXGZQRD0S"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', 'G-SMXGZQRD0S');
+    </script>
     <!-- 기본 meta 태그 및 link -->
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/images/boolock_logo.png" />
@@ -14,10 +24,7 @@
     <meta name="author" content="부스트캠프 9기 Web31팀" />
     <!-- Open Graph -->
     <meta property="og:title" content="BooLock" />
-    <meta
-      property="og:description"
-      content="쉽게 배우는 블록 코딩"
-    />
+    <meta property="og:description" content="쉽게 배우는 블록 코딩" />
     <meta property="og:url" content="https://boolock.site/" />
     <meta property="og:image" content="/images/boolock_thumnail.png" />
     <meta property="og:image:alt" content="블록코딩 플랫폼 BooLock의 썸네일" />
diff --git a/apps/client/package.json b/apps/client/package.json
index ddde07c..62e8d24 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -22,13 +22,13 @@
     "codemirror": "^6.0.1",
     "html2canvas": "^1.4.1",
     "init": "^0.1.2",
+    "mixpanel-browser": "^2.58.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
     "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.27.0",
     "react-spinners": "^0.14.1",
-    "react-youtube": "^10.1.0",
     "storybook": "^8.4.1",
     "uuid": "^11.0.3",
     "zustand": "^5.0.1"
@@ -44,6 +44,7 @@
     "@storybook/react": "8.4.2",
     "@storybook/react-vite": "8.4.2",
     "@storybook/test": "8.4.2",
+    "@types/mixpanel-browser": "^2.51.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-router-dom": "^5.3.3",
@@ -55,7 +56,6 @@
     "eslint-plugin-react-refresh": "^0.4.14",
     "eslint-plugin-storybook": "^0.11.0",
     "postcss": "^8.4.47",
-    "prop-types": "15.8.1",
     "tailwindcss": "^3.4.14",
     "vite": "^5.4.10",
     "vite-plugin-svgr": "^4.3.0"
diff --git a/apps/client/src/app/App.tsx b/apps/client/src/app/App.tsx
index 6be0a6f..e0a18ea 100644
--- a/apps/client/src/app/App.tsx
+++ b/apps/client/src/app/App.tsx
@@ -1,9 +1,10 @@
+import { DelayedFallback, Loading } from '@/shared/ui';
+import { ErrorPage, WorkspaceErrorPage } from '@/pages';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import { ToasterWithMax } from '@/shared/ui';
-import { ErrorPage } from '@/pages/ErrorPage/ErrorPage';
-import { lazy, Suspense } from 'react';
-import { Loading } from '@/shared/ui';
+import { Suspense, lazy } from 'react';
+
 import { Helmet } from 'react-helmet-async';
+import { ToasterWithMax } from '@/shared/ui';
 
 // lazy 로딩
 const HomePage = lazy(() =>
@@ -47,12 +48,19 @@ const router = createBrowserRouter([
           <title>BooLock - 작업 공간</title>
           <meta name="description" content={`워크스페이스에서 HTML과 CSS를 연습해보세요.`} />
         </Helmet>
-        <Suspense fallback={<Loading />}>
+
+        <Suspense
+          fallback={
+            <DelayedFallback>
+              <Loading />
+            </DelayedFallback>
+          }
+        >
           <WorkspacePage />
         </Suspense>
       </>
     ),
-    errorElement: <ErrorPage />,
+    errorElement: <WorkspaceErrorPage />,
   },
   {
     path: '*',
diff --git a/apps/client/src/app/main.tsx b/apps/client/src/app/main.tsx
index 056e764..9004325 100644
--- a/apps/client/src/app/main.tsx
+++ b/apps/client/src/app/main.tsx
@@ -6,11 +6,13 @@ import { App } from './App';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
+import { initMixpanel } from '@/shared/utils';
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
 
 const queryClient = new QueryClient();
+initMixpanel();
 
 root.render(
   <StrictMode>
diff --git a/apps/client/src/entities/workspace/CssCategoryButton/CssCategoryButton.tsx b/apps/client/src/entities/workspace/CssCategoryButton/CssCategoryButton.tsx
index 15fceba..2a94421 100644
--- a/apps/client/src/entities/workspace/CssCategoryButton/CssCategoryButton.tsx
+++ b/apps/client/src/entities/workspace/CssCategoryButton/CssCategoryButton.tsx
@@ -12,6 +12,7 @@ type CssCategoryButtonProps = {
  */
 export const CssCategoryButton = ({ cssCategory }: CssCategoryButtonProps) => {
   const { selectedCssCategory, setSelectedCssCategory } = useCssPropsStore();
+
   return (
     <button
       key={cssCategory}
diff --git a/apps/client/src/entities/workspace/SaveButton/SaveButton.tsx b/apps/client/src/entities/workspace/SaveButton/SaveButton.tsx
index 61e5bf6..3a8dda9 100644
--- a/apps/client/src/entities/workspace/SaveButton/SaveButton.tsx
+++ b/apps/client/src/entities/workspace/SaveButton/SaveButton.tsx
@@ -3,7 +3,7 @@ import * as Blockly from 'blockly/core';
 import { useCssPropsStore, useResetCssStore, useWorkspaceStore } from '@/shared/store';
 
 import { Spinner } from '@/shared/ui';
-import { capturePreview } from '@/shared/utils';
+import { capturePreview, trackEvent } from '@/shared/utils';
 import { cssStyleToolboxConfig } from '@/shared/blockly';
 import toast from 'react-hot-toast';
 import { useParams } from 'react-router-dom';
@@ -25,6 +25,7 @@ export const SaveButton = () => {
   const [isCapture, setIsCapture] = useState<boolean>(false);
 
   const handleClick = async () => {
+    trackEvent('workspace_saved');
     try {
       const canvas = Blockly.serialization.workspaces.save(workspace!) as any;
       setIsCapture(true);
diff --git a/apps/client/src/pages/HomePage/HomePage.tsx b/apps/client/src/pages/HomePage/HomePage.tsx
index abe0c37..2f7a462 100644
--- a/apps/client/src/pages/HomePage/HomePage.tsx
+++ b/apps/client/src/pages/HomePage/HomePage.tsx
@@ -1,4 +1,4 @@
-import { Banner, HomeHeader, WorkspaceContainer, WorkspaceModal } from '@/widgets';
+import { Banner, HomeHeader, WorkspaceModal, WorkspaceSection } from '@/widgets';
 import { useClassBlockStore, useLoadingStore, useWorkspaceStore } from '@/shared/store';
 
 import { Loading } from '@/shared/ui';
@@ -26,7 +26,7 @@ export const HomePage = () => {
       <div className="flex h-full w-full flex-col items-center">
         <HomeHeader />
         <Banner />
-        <WorkspaceContainer />
+        <WorkspaceSection />
         <WorkspaceModal />
       </div>
     </>
diff --git a/apps/client/src/pages/WorkspaceErrorPage/WorkspaceErrorPage.tsx b/apps/client/src/pages/WorkspaceErrorPage/WorkspaceErrorPage.tsx
new file mode 100644
index 0000000..eb99bf2
--- /dev/null
+++ b/apps/client/src/pages/WorkspaceErrorPage/WorkspaceErrorPage.tsx
@@ -0,0 +1,14 @@
+import { ErrorPage, NotFound } from '@/pages';
+
+import toast from 'react-hot-toast';
+import { useRouteError } from 'react-router-dom';
+
+export const WorkspaceErrorPage = () => {
+  const error: any = useRouteError();
+  const statusCode = error?.response?.statusCode || error?.status;
+  if (statusCode === 404) {
+    toast.error('워크스페이스 정보 불러오기 실패');
+    return <NotFound />;
+  }
+  return <ErrorPage />;
+};
diff --git a/apps/client/src/pages/Workspacepage/WorkspacePage.tsx b/apps/client/src/pages/Workspacepage/WorkspacePage.tsx
index 32f7bb1..4078b58 100644
--- a/apps/client/src/pages/Workspacepage/WorkspacePage.tsx
+++ b/apps/client/src/pages/Workspacepage/WorkspacePage.tsx
@@ -1,10 +1,9 @@
-import { ImageTagModal, CoachMark, WorkspaceContent, WorkspacePageHeader } from '@/widgets';
+import { CoachMark, ImageTagModal, WorkspaceContent, WorkspacePageHeader } from '@/widgets';
+import { useEffect, useLayoutEffect } from 'react';
 import { useGetWorkspace, usePreventLeaveWorkspacePage } from '@/shared/hooks';
-import { Loading } from '@/shared/ui';
-import { NotFound } from '@/pages/NotFound/NotFound';
-import { useParams } from 'react-router-dom';
-import { useLayoutEffect, useEffect } from 'react';
+
 import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
+import { useParams } from 'react-router-dom';
 
 /**
  *
@@ -13,7 +12,7 @@ import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
  */
 export const WorkspacePage = () => {
   const { workspaceId } = useParams();
-  const { isPending, isError } = useGetWorkspace(workspaceId as string);
+  useGetWorkspace(workspaceId as string);
   usePreventLeaveWorkspacePage();
   const { currentStep, isCoachMarkOpen, openCoachMark } = useCoachMarkStore();
   const toolboxDiv = document.querySelector('.blocklyToolboxDiv');
@@ -36,14 +35,9 @@ export const WorkspacePage = () => {
     }
   }, [currentStep, toolboxDiv]);
 
-  if (isError) {
-    return <NotFound />;
-  }
-
   return (
     <>
       <div className="flex h-screen flex-col">
-        {isPending && <Loading />}
         {isCoachMarkOpen && <CoachMark />}
         <WorkspacePageHeader />
         <WorkspaceContent />
diff --git a/apps/client/src/pages/index.ts b/apps/client/src/pages/index.ts
index 90faf1f..a4d2149 100644
--- a/apps/client/src/pages/index.ts
+++ b/apps/client/src/pages/index.ts
@@ -1,3 +1,5 @@
 export { HomePage } from './HomePage/HomePage';
 export { NotFound } from './NotFound/NotFound';
 export { WorkspacePage } from './Workspacepage/WorkspacePage';
+export { ErrorPage } from './ErrorPage/ErrorPage';
+export { WorkspaceErrorPage } from './WorkspaceErrorPage/WorkspaceErrorPage';
diff --git a/apps/client/src/shared/hooks/index.ts b/apps/client/src/shared/hooks/index.ts
index 94bde05..adaa1f7 100644
--- a/apps/client/src/shared/hooks/index.ts
+++ b/apps/client/src/shared/hooks/index.ts
@@ -7,7 +7,6 @@ export { useSaveWorkspace } from './queries/useSaveWorkspace';
 export { usePostImage } from './queries/usePostImage';
 export { useDeleteImage } from './queries/useDeleteImage';
 
-export { useWindowSize } from './css/useWindowSize';
 export { useCssTooltip } from './css/useCssTooltip';
 export { useCssOptions } from './css/useCssOptions';
 export { useCssOptionItem } from './css/useCssOptionItem';
@@ -16,3 +15,6 @@ export { workspaceKeys } from './query-key/workspaceKeys';
 
 export { usePreventLeaveWorkspacePage } from './usePreventLeaveWorkspacePage';
 export { useInfiniteScroll } from './useInfiniteScroll';
+export { useScrollPosition } from './useScrollPosition';
+export { useWindowSize } from './useWindowSize';
+export { useVirtualScroll } from './useVirtualScroll';
diff --git a/apps/client/src/shared/hooks/queries/useGetWorkspace.ts b/apps/client/src/shared/hooks/queries/useGetWorkspace.ts
index 23cb790..f238d33 100644
--- a/apps/client/src/shared/hooks/queries/useGetWorkspace.ts
+++ b/apps/client/src/shared/hooks/queries/useGetWorkspace.ts
@@ -3,16 +3,15 @@ import { createUserId, getUserId, removeCssClassNamePrefix } from '@/shared/util
 import {
   useClassBlockStore,
   useCssPropsStore,
+  useImageModalStore,
   useResetCssStore,
   useWorkspaceChangeStatusStore,
   useWorkspaceStore,
-  useImageModalStore,
 } from '@/shared/store';
 
 import { WorkspaceApi } from '@/shared/api';
-import toast from 'react-hot-toast';
 import { useEffect } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { workspaceKeys } from '@/shared/hooks';
 
 export const useGetWorkspace = (workspaceId: string) => {
@@ -24,29 +23,19 @@ export const useGetWorkspace = (workspaceId: string) => {
   const { resetChangedStatusState } = useWorkspaceChangeStatusStore();
   const { setIsResetCssChecked } = useResetCssStore();
   const { setInitialImageMap, setInitialImageList } = useImageModalStore();
-  const { data, isPending, isError } = useQuery({
+  const { data, isPending, isError } = useSuspenseQuery({
     queryKey: workspaceKeys.detail(workspaceId),
     queryFn: () => {
+      resetChangedStatusState();
       return workspaceApi.getWorkspace(userId, workspaceId);
     },
   });
 
   useEffect(() => {
-    resetChangedStatusState();
-  }, []);
-
-  useEffect(() => {
-    if (isError) {
-      toast.error('워크스페이스 정보 불러오기 실패');
-      return;
-    }
-    if (!data) {
+    if (isError || !data || !data.workspaceDto) {
       return;
     }
 
-    if (!data.workspaceDto) {
-      return;
-    }
     setName(data.workspaceDto.name);
     Object.keys(data.workspaceDto.totalCssPropertyObj).forEach((className) => {
       createCssClassBlock(className);
diff --git a/apps/client/src/shared/hooks/queries/useGetWorkspaceList.ts b/apps/client/src/shared/hooks/queries/useGetWorkspaceList.ts
index b8f5539..891de16 100644
--- a/apps/client/src/shared/hooks/queries/useGetWorkspaceList.ts
+++ b/apps/client/src/shared/hooks/queries/useGetWorkspaceList.ts
@@ -1,6 +1,7 @@
-import { WorkspaceApi } from '@/shared/api';
 import { createUserId, getUserId } from '@/shared/utils';
-import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { WorkspaceApi } from '@/shared/api';
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import { workspaceKeys } from '@/shared/hooks';
 export const useGetWorkspaceList = () => {
   const workspaceApi = WorkspaceApi();
@@ -12,7 +13,7 @@ export const useGetWorkspaceList = () => {
     isFetchingNextPage,
     isError,
     data: workspaceList,
-  } = useInfiniteQuery({
+  } = useSuspenseInfiniteQuery({
     queryKey: workspaceKeys.list(),
     queryFn: async ({ pageParam }) => {
       const isNewUser = !getUserId();
diff --git a/apps/client/src/shared/hooks/useScrollPosition.ts b/apps/client/src/shared/hooks/useScrollPosition.ts
new file mode 100644
index 0000000..c0a40bc
--- /dev/null
+++ b/apps/client/src/shared/hooks/useScrollPosition.ts
@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useScrollPosition = () => {
+  const [scrollPosition, setScrollPosition] = useState<number>(0);
+  const ticking = useRef(false);
+
+  useEffect(() => {
+    const onScroll = () => {
+      if (!ticking.current) {
+        requestAnimationFrame(() => {
+          setScrollPosition(window.scrollY);
+          ticking.current = false;
+        });
+        ticking.current = true;
+      }
+    };
+    window.addEventListener('scroll', onScroll);
+
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
+  return { scrollPosition };
+};
diff --git a/apps/client/src/shared/hooks/useVirtualScroll.ts b/apps/client/src/shared/hooks/useVirtualScroll.ts
new file mode 100644
index 0000000..c412b6e
--- /dev/null
+++ b/apps/client/src/shared/hooks/useVirtualScroll.ts
@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { useScrollPosition, useWindowSize } from '@/shared/hooks';
+
+const calculateNumOfNodePadding = (windowWidth: number): number => {
+  if (windowWidth < 640) {
+    return 1;
+  } else if (windowWidth < 768) {
+    return 2;
+  } else if (windowWidth < 1024) {
+    return 3;
+  }
+  return 4;
+};
+
+export const useVirtualScroll = <T>({
+  data,
+  topSectionHeight = 0,
+  renderedItemHeight,
+  gapY = 0,
+}: {
+  data: T[] | undefined;
+  topSectionHeight?: number;
+  renderedItemHeight: number;
+  gapY: number;
+}) => {
+  const { scrollPosition } = useScrollPosition();
+  const { screenHeight, screenWidth } = useWindowSize();
+
+  const [renderedData, setRenderedData] = useState<T[]>([]);
+
+  const nodePadding = calculateNumOfNodePadding(screenWidth);
+  const start = Math.max(
+    0,
+    Math.floor((scrollPosition - topSectionHeight) / (renderedItemHeight + gapY)) * nodePadding
+  );
+  const offsetY = Math.floor(start / nodePadding) * (renderedItemHeight + gapY);
+  const [totalHeight, setTotalHeight] = useState(0);
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+
+    setRenderedData(
+      data.slice(
+        start,
+        start +
+          Math.floor(screenHeight / (renderedItemHeight + gapY)) * nodePadding +
+          2 * nodePadding
+      )
+    );
+    setTotalHeight(Math.ceil(data!.length / nodePadding) * (renderedItemHeight + gapY));
+  }, [start, screenHeight, data]);
+
+  return { renderedData, offsetY, totalHeight };
+};
diff --git a/apps/client/src/shared/hooks/css/useWindowSize.ts b/apps/client/src/shared/hooks/useWindowSize.ts
similarity index 100%
rename from apps/client/src/shared/hooks/css/useWindowSize.ts
rename to apps/client/src/shared/hooks/useWindowSize.ts
diff --git a/apps/client/src/shared/store/useCssPropsStore.ts b/apps/client/src/shared/store/useCssPropsStore.ts
index 863d85f..4c1b667 100644
--- a/apps/client/src/shared/store/useCssPropsStore.ts
+++ b/apps/client/src/shared/store/useCssPropsStore.ts
@@ -1,5 +1,6 @@
 import { TTotalCssPropertyObj } from '@/shared/types';
 import { create } from 'zustand';
+import { removeCssClassNamePrefix, trackEvent } from '../utils';
 
 type TcssProps = {
   currentCssClassName: string;
@@ -20,7 +21,7 @@ export const useCssPropsStore = create<TcssProps>((set) => {
     currentCssClassName: '',
     selectedCssCategory: '레이아웃',
     totalCssPropertyObj: {},
-    addNewCssClass: (newCssClass) =>
+    addNewCssClass: (newCssClass) => {
       set((state) => {
         if (!state.totalCssPropertyObj[newCssClass]) {
           return {
@@ -34,14 +35,28 @@ export const useCssPropsStore = create<TcssProps>((set) => {
           };
         }
         return {};
-      }),
-    setCurrentCssClassName: (currentCssClassName) => set({ currentCssClassName }),
-    setSelectedCssCategory: (selectedCssCategory) => set({ selectedCssCategory }),
-    setCheckedCssPropertyObj: (className, label, value) =>
+      });
+      trackEvent(`css_class_created`, {
+        item: newCssClass,
+      });
+    },
+    setCurrentCssClassName: (currentCssClassName) => {
+      set({ currentCssClassName });
+      trackEvent(`css_class_selected`, {
+        item: removeCssClassNamePrefix(currentCssClassName),
+      });
+    },
+    setSelectedCssCategory: (selectedCssCategory) => {
+      set({ selectedCssCategory });
+      trackEvent(`css_category_selected`, {
+        item: selectedCssCategory,
+      });
+    },
+    setCheckedCssPropertyObj: (className, label, value) => {
       set((state) => {
         const updatedObj = state.totalCssPropertyObj[className] || {
           checkedCssPropertyObj: {},
-          cssOptionObh: {},
+          cssOptionObj: {},
         };
         updatedObj.checkedCssPropertyObj[label] = value;
         return {
@@ -50,8 +65,12 @@ export const useCssPropsStore = create<TcssProps>((set) => {
             [className]: updatedObj,
           },
         };
-      }),
-    setCssOptionObj: (className, label, value) =>
+      });
+      trackEvent(`css_category_item_checked`, {
+        item: className,
+      });
+    },
+    setCssOptionObj: (className, label, value) => {
       set((state) => {
         const updatedObj = state.totalCssPropertyObj[className] || {
           checkedCssPropertyObj: {},
@@ -64,7 +83,12 @@ export const useCssPropsStore = create<TcssProps>((set) => {
             [className]: updatedObj,
           },
         };
-      }),
+      });
+      trackEvent(`css_category_item_inputted`, {
+        item: label,
+        value: value,
+      });
+    },
 
     initCssPropertyObj: (totalCssPropertyObj) =>
       set({ totalCssPropertyObj, currentCssClassName: '', selectedCssCategory: '레이아웃' }),
diff --git a/apps/client/src/shared/ui/index.ts b/apps/client/src/shared/ui/index.ts
index d02e17c..92d3cc6 100644
--- a/apps/client/src/shared/ui/index.ts
+++ b/apps/client/src/shared/ui/index.ts
@@ -9,6 +9,7 @@ export { ToasterWithMax } from './toast/ToasterWithMax';
 
 export { Loading } from './loading/Loading';
 export { Spinner } from './loading/Spinner';
+export { DelayedFallback } from './loading/DelayedFallback';
 
 export { SkeletonWorkspace } from './skeleton/SkeletonWorkspace';
 export { SkeletonWorkspaceList } from './skeleton/SkeletonWorkspaceList';
diff --git a/apps/client/src/shared/ui/loading/DelayedFallback.tsx b/apps/client/src/shared/ui/loading/DelayedFallback.tsx
new file mode 100644
index 0000000..45f088c
--- /dev/null
+++ b/apps/client/src/shared/ui/loading/DelayedFallback.tsx
@@ -0,0 +1,19 @@
+import { ReactNode, useEffect, useState } from 'react';
+
+type DelayedFallbackProps = {
+  children: ReactNode;
+  delay?: number;
+};
+
+export const DelayedFallback = ({ children, delay = 50 }: DelayedFallbackProps) => {
+  const [showFallback, setShowFallback] = useState<boolean>(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowFallback(true);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+
+  return <>{showFallback ? children : null} </>;
+};
diff --git a/apps/client/src/shared/utils/index.ts b/apps/client/src/shared/utils/index.ts
index 04e16c7..e31b41b 100644
--- a/apps/client/src/shared/utils/index.ts
+++ b/apps/client/src/shared/utils/index.ts
@@ -17,3 +17,4 @@ export { capturePreview } from './capturePreview';
 export { coachMarkContent } from './coachMarkContent';
 export { IFRAME_ERROR_MESSAGE } from './iframeErrorMessage';
 export { exportPreviewHtml } from './exportPreviewHtml';
+export { initMixpanel, trackEvent } from './mixpanel';
diff --git a/apps/client/src/shared/utils/mixpanel.ts b/apps/client/src/shared/utils/mixpanel.ts
new file mode 100644
index 0000000..6b080dc
--- /dev/null
+++ b/apps/client/src/shared/utils/mixpanel.ts
@@ -0,0 +1,28 @@
+import mixpanel from 'mixpanel-browser';
+
+const isProduction = import.meta.env.MODE === 'production';
+
+export const initMixpanel = () => {
+  const MIXPANEL_TOKEN = import.meta.env.VITE_MIXPANEL_TOKEN;
+  mixpanel.init(MIXPANEL_TOKEN, { debug: true });
+  _connectUser();
+};
+
+const _connectUser = () => {
+  const userId = localStorage.getItem('userId');
+  if (userId) {
+    mixpanel.identify(userId);
+  }
+};
+
+export const trackEvent = (eventName: string, properties?: Record<string, any>) => {
+  const baseProperties = {
+    debug: !isProduction,
+    userId: localStorage.getItem('userId') || 'anonymous',
+    timeStamp: new Date().toISOString(),
+  };
+  mixpanel.track(eventName, {
+    ...baseProperties,
+    ...properties,
+  });
+};
diff --git a/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.stories.tsx b/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.stories.tsx
index 7b22b86..f2b36a3 100644
--- a/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.stories.tsx
+++ b/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.stories.tsx
@@ -6,7 +6,7 @@ const meta: Meta<typeof WorkspaceContainer> = {
   title: 'widgets/home/WorkspaceContainer',
   component: WorkspaceContainer,
   parameters: {
-    layout: 'fullscreen',
+    layout: 'centered',
   },
   tags: ['autodocs'],
 };
diff --git a/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.tsx b/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.tsx
index 491b760..8da8a85 100644
--- a/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.tsx
+++ b/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.tsx
@@ -1,18 +1,25 @@
-import { EmptyWorkspace, WorkspaceGrid, WorkspaceHeader, WorkspaceList } from '@/widgets';
-import { useGetWorkspaceList, useInfiniteScroll } from '@/shared/hooks';
+import { EmptyWorkspace, WorkspaceGrid, WorkspaceList } from '@/widgets';
+import { useGetWorkspaceList, useInfiniteScroll, useVirtualScroll } from '@/shared/hooks';
 
 import { SkeletonWorkspaceList } from '@/shared/ui';
-import { WorkspaceLoadError } from '@/entities';
+import { TWorkspace } from '@/shared/types';
 
 /**
  *
  * @description
- * 워크스페이스 헤더와 그리드를 감싸는 컨테이너 컴포넌트
+ * 워크스페이스 리스트를 렌더링하는 컨테이너 컴포넌트
  */
 export const WorkspaceContainer = () => {
-  const { hasNextPage, fetchNextPage, isPending, isFetchingNextPage, isError, workspaceList } =
+  const { hasNextPage, fetchNextPage, isPending, isFetchingNextPage, workspaceList } =
     useGetWorkspaceList();
 
+  const { renderedData, offsetY, totalHeight } = useVirtualScroll<TWorkspace>({
+    data: workspaceList,
+    topSectionHeight: 594,
+    renderedItemHeight: 262,
+    gapY: 32,
+  });
+
   const fetchCallback: IntersectionObserverCallback = (entries, observer) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting && hasNextPage) {
@@ -25,29 +32,25 @@ export const WorkspaceContainer = () => {
   const nextFetchTargetRef = useInfiniteScroll({ intersectionCallback: fetchCallback });
 
   return (
-    <section className="w-full max-w-[1152px] px-3 pb-48">
-      <WorkspaceHeader />
-      {isPending && (
-        <WorkspaceGrid>
-          <SkeletonWorkspaceList skeletonNum={8} />
-        </WorkspaceGrid>
-      )}
-      {isError ? (
-        <WorkspaceLoadError />
-      ) : (
-        workspaceList &&
+    <>
+      {workspaceList &&
         (workspaceList.length === 0 ? (
           <EmptyWorkspace />
         ) : (
-          <WorkspaceGrid>
-            <WorkspaceList workspaceList={workspaceList} />
-            {isFetchingNextPage && <SkeletonWorkspaceList skeletonNum={8} />}
-          </WorkspaceGrid>
-        ))
-      )}
+          <div
+            style={{
+              height: `${totalHeight}px`,
+            }}
+          >
+            <WorkspaceGrid offsetY={offsetY}>
+              <WorkspaceList workspaceList={renderedData} />
+              {isFetchingNextPage && <SkeletonWorkspaceList skeletonNum={8} />}
+            </WorkspaceGrid>
+          </div>
+        ))}
       {!isPending && !isFetchingNextPage && hasNextPage && (
         <div ref={nextFetchTargetRef} className="h-3 w-full"></div>
       )}
-    </section>
+    </>
   );
 };
diff --git a/apps/client/src/widgets/home/WorkspaceGrid/WorkspaceGrid.tsx b/apps/client/src/widgets/home/WorkspaceGrid/WorkspaceGrid.tsx
index 63e16f1..130444d 100644
--- a/apps/client/src/widgets/home/WorkspaceGrid/WorkspaceGrid.tsx
+++ b/apps/client/src/widgets/home/WorkspaceGrid/WorkspaceGrid.tsx
@@ -1,13 +1,22 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 
 /**
  *
  * @description
  * 워크스페이스 그리드 컴포넌트
  */
-export const WorkspaceGrid = ({ children }: PropsWithChildren) => {
+export const WorkspaceGrid = ({
+  offsetY = 0,
+  children,
+}: {
+  offsetY?: number;
+  children: ReactNode;
+}) => {
   return (
-    <div>
+    <div
+      style={{ transform: offsetY > 0 ? `translateY(${offsetY + 32}px)` : 'none' }}
+      will-change="transform"
+    >
       <div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         {children}
       </div>
diff --git a/apps/client/src/widgets/home/WorkspaceSection/WorkspaceSection.stories.tsx b/apps/client/src/widgets/home/WorkspaceSection/WorkspaceSection.stories.tsx
new file mode 100644
index 0000000..0ab8538
--- /dev/null
+++ b/apps/client/src/widgets/home/WorkspaceSection/WorkspaceSection.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { WorkspaceSection } from './WorkspaceSection';
+
+const meta: Meta<typeof WorkspaceSection> = {
+  title: 'widgets/home/WorkspaceSection',
+  component: WorkspaceSection,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WorkspaceSection>;
+
+export const Default: Story = {
+  args: {
+    // propsname: value,
+  },
+};
diff --git a/apps/client/src/widgets/home/WorkspaceSection/WorkspaceSection.tsx b/apps/client/src/widgets/home/WorkspaceSection/WorkspaceSection.tsx
new file mode 100644
index 0000000..a62b2ca
--- /dev/null
+++ b/apps/client/src/widgets/home/WorkspaceSection/WorkspaceSection.tsx
@@ -0,0 +1,26 @@
+import { WorkspaceContainer, WorkspaceGrid, WorkspaceHeader } from '@/widgets';
+
+import { SkeletonWorkspaceList } from '@/shared/ui';
+import { Suspense } from 'react';
+
+/**
+ *
+ * @description
+ * 워크스페이스 헤더와 컨테이너를 합친 섹션 컴포넌트
+ */
+export const WorkspaceSection = () => {
+  return (
+    <section className="w-full max-w-[1152px] px-3 pb-48">
+      <WorkspaceHeader />
+      <Suspense
+        fallback={
+          <WorkspaceGrid>
+            <SkeletonWorkspaceList skeletonNum={8} />
+          </WorkspaceGrid>
+        }
+      >
+        <WorkspaceContainer />
+      </Suspense>
+    </section>
+  );
+};
diff --git a/apps/client/src/widgets/index.ts b/apps/client/src/widgets/index.ts
index 68e0015..b4ddcd0 100644
--- a/apps/client/src/widgets/index.ts
+++ b/apps/client/src/widgets/index.ts
@@ -4,8 +4,9 @@ export { WorkspaceList } from './home/WorkspaceList/WorkspaceList';
 export { WorkspaceHeader } from './home/WorkspaceHeader/WorkspaceHeader';
 export { EmptyWorkspace } from './home/EmptyWorkspace/EmptyWorkspace';
 export { WorkspaceGrid } from './home/WorkspaceGrid/WorkspaceGrid';
-export { WorkspaceContainer } from './home/WorkspaceContainer/WorkspaceContainer';
+export { WorkspaceSection } from './home/WorkspaceSection/WorkspaceSection';
 export { WorkspaceModal } from './home/WorkspaceModal/WorkspaceModal';
+export { WorkspaceContainer } from './home/WorkspaceContainer/WorkspaceContainer';
 
 export { PreviewBox } from './workspace/PreviewBox/PreviewBox';
 export { CoachMark } from './workspace/CoachMark/CoachMark';
diff --git a/apps/client/src/widgets/workspace/PreviewBox/PreviewBox.tsx b/apps/client/src/widgets/workspace/PreviewBox/PreviewBox.tsx
index 222185a..308a9eb 100644
--- a/apps/client/src/widgets/workspace/PreviewBox/PreviewBox.tsx
+++ b/apps/client/src/widgets/workspace/PreviewBox/PreviewBox.tsx
@@ -6,6 +6,7 @@ import CopyIcon from '@/shared/assets/code_copy.svg?react';
 import { resetCss } from '@/shared/utils/resetCss';
 import toast from 'react-hot-toast';
 import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
+import { trackEvent } from '@/shared/utils';
 
 type PreviewBoxProps = {
   htmlCode: string;
@@ -27,7 +28,8 @@ export const PreviewBox = ({
   selectedBlockLength,
   selectedBlockType,
 }: PreviewBoxProps) => {
-  const [activeTab, setActiveTab] = useState<'preview' | 'html' | 'css'>('preview');
+  type TTab = 'preview' | 'html' | 'css';
+  const [activeTab, setActiveTab] = useState<TTab>('preview');
   const { isResetCssChecked } = useResetCssStore();
   const { currentStep } = useCoachMarkStore();
   const { setIframeRef } = useIframeStore();
@@ -67,6 +69,13 @@ export const PreviewBox = ({
     copyToClipboard(codeToCopy, label);
   };
 
+  const handleActiveTab = (type: TTab) => {
+    setActiveTab(type);
+    trackEvent(`preview_tab_clicked`, {
+      item: type,
+    });
+  };
+
   return (
     // TODO: 사용자가이드 - 겹치는 현상
     <section
@@ -74,21 +83,21 @@ export const PreviewBox = ({
     >
       <nav className="flex h-10 border-b border-gray-100">
         <button
-          onClick={() => setActiveTab('preview')}
+          onClick={() => handleActiveTab('preview')}
           className={`${activeTab === 'preview' ? 'bg-green-500 text-white' : 'bg-white text-gray-200'} h-full flex-1 border-r border-gray-100 bg-green-500`}
           aria-label="미리보기 탭 버튼"
         >
           미리보기
         </button>
         <button
-          onClick={() => setActiveTab('html')}
+          onClick={() => handleActiveTab('html')}
           className={`${activeTab === 'html' ? 'bg-green-500 text-white' : 'bg-white text-gray-200'} h-full flex-1 border-r border-gray-100 bg-green-500`}
           aria-label="HTML 탭 버튼"
         >
           HTML
         </button>
         <button
-          onClick={() => setActiveTab('css')}
+          onClick={() => handleActiveTab('css')}
           className={`${activeTab === 'css' ? 'bg-green-500 text-white' : 'bg-white text-gray-200'} h-full flex-1 bg-green-500`}
           aria-label="CSS 탭 버튼"
         >
diff --git a/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx b/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx
index cabeaea..d030836 100644
--- a/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx
+++ b/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx
@@ -31,6 +31,7 @@ import FixedFlyout from '@/core/fixedFlyout';
 import TabbedToolbox from '@/core/tabbedToolbox';
 import { customTooltip } from '@/core/customTooltip';
 import { registerCustomComponents } from '@/core/register';
+import { removeCssClassNamePrefix, trackEvent } from '@/shared/utils';
 
 for (const blockType in Blockly.Blocks) {
   if (Object.prototype.hasOwnProperty.call(Blockly.Blocks, blockType)) {
@@ -104,6 +105,27 @@ export const WorkspaceContent = () => {
 
     // workspace 변화 감지해 자동 변환
     const handleAutoConversion = (event: Blockly.Events.Abstract) => {
+      if (isBlockLoadingFinish.current) {
+        if (event.type === Blockly.Events.BLOCK_CHANGE && 'name' in event && 'newValue' in event) {
+          trackEvent('block_content_changed', {
+            item: event.name,
+            value: event.newValue,
+          });
+        }
+        if (event.type === Blockly.Events.BLOCK_DELETE) {
+          trackEvent('block_deleted');
+        }
+        if (event.type === Blockly.Events.BLOCK_CREATE) {
+          trackEvent('block_created', {
+            // @ts-ignore
+            item: removeCssClassNamePrefix(event.json.type),
+          });
+        }
+        if (event.type === Blockly.Events.BLOCK_DRAG && 'isStart' in event && event.isStart) {
+          trackEvent('block_drag_completed');
+        }
+      }
+
       if (
         event.type === Blockly.Events.BLOCK_CREATE ||
         event.type === Blockly.Events.BLOCK_MOVE ||
diff --git a/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx b/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx
index 5bb0f8b..f0faf47 100644
--- a/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx
+++ b/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx
@@ -9,6 +9,7 @@ import { useCssPropsStore } from '@/shared/store';
  */
 export const CssOptionItemList = () => {
   const { selectedCssCategory } = useCssPropsStore();
+
   return (
     <article className="flex h-full w-full flex-col gap-4 overflow-y-auto p-3">
       {cssCategoryList
diff --git a/apps/server/Dockerfile b/apps/server/Dockerfile
index cc4a435..13d8ccd 100644
--- a/apps/server/Dockerfile
+++ b/apps/server/Dockerfile
@@ -1,12 +1,19 @@
 FROM base-image AS backend-build
 
 WORKDIR /app/apps/server
-
 COPY ./apps/server .
-COPY --from=base-image /app/packages /app/packages
 
-RUN pnpm install --offline --frozen-lockfile
-RUN pnpm swagger-auto
-RUN pnpm run build
+RUN pnpm install --offline --frozen-lockfile && \ 
+  pnpm run build
+
+FROM node:20-alpine AS backend
+
+WORKDIR /app/apps/server
+COPY --from=backend-build /app/packages ./packages
+COPY --from=backend-build /app/apps/server/package.json /app/pnpm-workspace.yaml /app/apps/server/.env ./
+COPY --from=backend-build /app/apps/server/node_modules ./node_modules
+COPY --from=backend-build /app/apps/server/dist ./dist
+
+RUN npm install -g pnpm && pnpm prune --prod
 
-CMD ["pnpm", "run", "start"]
+CMD ["pnpm", "start"]
diff --git a/apps/server/package.json b/apps/server/package.json
index d461ed5..d42583b 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -15,6 +15,7 @@
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
     "mongoose": "^8.8.0",
+    "multer": "1.4.5-lts.1",
     "tunnel-ssh": "^5.1.2"
   },
   "devDependencies": {
@@ -26,7 +27,6 @@
     "@types/swagger-jsdoc": "^6.0.4",
     "@types/swagger-ui-express": "^4.1.7",
     "aws-sdk": "^2.1692.0",
-    "multer": "1.4.5-lts.1",
     "nodemon": "^3.1.7",
     "swagger-autogen": "^2.23.7",
     "swagger-jsdoc": "^6.2.8",
diff --git a/apps/server/src/app.ts b/apps/server/src/app.ts
index 2fb5c32..06bdf25 100644
--- a/apps/server/src/app.ts
+++ b/apps/server/src/app.ts
@@ -3,8 +3,6 @@ import './config/dbConnection';
 import cors from 'cors';
 import express from 'express';
 import routes from './routes/v1/index';
-import swaggerDocument from './docs/swagger-output.json';
-import { swaggerUi } from './docs/swagger';
 import 'dotenv/config';
 import { errorMiddleware } from './middlewares/errorMiddleware';
 
@@ -18,7 +16,13 @@ app.use(
 app.use(express.json());
 
 app.use('/api', routes);
-app.use('/api/docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
+
+if (process.env.NODE_ENV !== 'production') {
+  const swaggerDocument = require('./docs/swagger-output.json');
+  const { swaggerUi } = require('./docs/swagger');
+  app.use('/api/docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
+}
+
 app.use(errorMiddleware);
 
 export default app;
diff --git a/apps/server/src/middlewares/errorMiddleware.ts b/apps/server/src/middlewares/errorMiddleware.ts
index a5e8c8b..aaedc57 100644
--- a/apps/server/src/middlewares/errorMiddleware.ts
+++ b/apps/server/src/middlewares/errorMiddleware.ts
@@ -1,5 +1,12 @@
-import { Request, Response, NextFunction } from 'express';
-import { CustomError } from '../utils/customError';
+import {
+  BadRequestError,
+  CustomError,
+  ForbiddenError,
+  UnauthorizedError,
+} from '../utils/customError';
+import { NextFunction, Request, Response } from 'express';
+
+import { NotFound } from '@aws-sdk/client-s3';
 import { errorStatus } from '../utils/constants';
 
 // eslint-disable-next-line no-unused-vars
@@ -19,4 +26,16 @@ const errorHandlers: { [key: string]: (err: any, res: Response) => void } = {
   CustomError: (err: CustomError, res: Response) => {
     res.status(err.statusCode).json({ message: err.message });
   },
+  NotFoundError: (err: NotFound, res: Response) => {
+    res.status(errorStatus.HTTP_404_NOT_FOUND).json({ message: err.message });
+  },
+  BadRequestError: (err: BadRequestError, res: Response) => {
+    res.status(errorStatus.HTTP_400_BAD_REQUEST).json({ message: err.message });
+  },
+  UnauthorizedError: (err: UnauthorizedError, res: Response) => {
+    res.status(errorStatus.HTTP_401_UNAUTHORIZED).json({ message: err.message });
+  },
+  ForbiddenError: (err: ForbiddenError, res: Response) => {
+    res.status(errorStatus.HTTP_403_FORBIDDEN).json({ message: err.message });
+  },
 };
diff --git a/apps/server/src/utils/customError.ts b/apps/server/src/utils/customError.ts
index 8d98579..0cb6956 100644
--- a/apps/server/src/utils/customError.ts
+++ b/apps/server/src/utils/customError.ts
@@ -10,14 +10,14 @@ export class CustomError extends Error {
 }
 
 export class NotFoundError extends CustomError {
-  constructor(message = 'Bad request') {
-    super(message, errorStatus.HTTP_400_BAD_REQUEST);
+  constructor(message = 'Resource not found') {
+    super(message, errorStatus.HTTP_404_NOT_FOUND);
   }
 }
 
 export class BadRequestError extends CustomError {
-  constructor(message = 'Resource not found') {
-    super(message, errorStatus.HTTP_404_NOT_FOUND);
+  constructor(message = 'Bad request') {
+    super(message, errorStatus.HTTP_400_BAD_REQUEST);
   }
 }
 
diff --git a/apps/server/tsconfig.json b/apps/server/tsconfig.json
index 9a46382..7cca784 100644
--- a/apps/server/tsconfig.json
+++ b/apps/server/tsconfig.json
@@ -8,5 +8,5 @@
     "outDir": "./dist"
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "src/docs"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2b61a1f..96ff7c3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       init:
         specifier: ^0.1.2
         version: 0.1.2
+      mixpanel-browser:
+        specifier: ^2.58.0
+        version: 2.58.0
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -80,9 +83,6 @@ importers:
       react-spinners:
         specifier: ^0.14.1
         version: 0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-youtube:
-        specifier: ^10.1.0
-        version: 10.1.0(react@18.3.1)
       storybook:
         specifier: ^8.4.1
         version: 8.4.2(prettier@3.3.3)
@@ -123,6 +123,9 @@ importers:
       '@storybook/test':
         specifier: 8.4.2
         version: 8.4.2(storybook@8.4.2(prettier@3.3.3))
+      '@types/mixpanel-browser':
+        specifier: ^2.51.0
+        version: 2.51.0
       '@types/react':
         specifier: ^18.3.12
         version: 18.3.12
@@ -156,9 +159,6 @@ importers:
       postcss:
         specifier: ^8.4.47
         version: 8.4.49
-      prop-types:
-        specifier: 15.8.1
-        version: 15.8.1
       tailwindcss:
         specifier: ^3.4.14
         version: 3.4.14(ts-node@10.9.2(@types/node@22.9.0)(typescript@5.6.3))
@@ -189,6 +189,9 @@ importers:
       mongoose:
         specifier: ^8.8.0
         version: 8.8.1
+      multer:
+        specifier: 1.4.5-lts.1
+        version: 1.4.5-lts.1
       tunnel-ssh:
         specifier: ^5.1.2
         version: 5.1.2
@@ -217,9 +220,6 @@ importers:
       aws-sdk:
         specifier: ^2.1692.0
         version: 2.1692.0
-      multer:
-        specifier: 1.4.5-lts.1
-        version: 1.4.5-lts.1
       nodemon:
         specifier: ^3.1.7
         version: 3.1.7
@@ -1109,6 +1109,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rrweb/types@2.0.0-alpha.18':
+    resolution: {integrity: sha512-iMH3amHthJZ9x3gGmBPmdfim7wLGygC2GciIkw2A6SO8giSn8PHYtRT8OKNH4V+k3SZ6RSnYHcTQxBA7pSWZ3Q==}
+
   '@scarf/scarf@1.4.0':
     resolution: {integrity: sha512-xxeapPiUXdZAE3che6f3xogoJPeZgig6omHEy1rIY5WVsB3H2BHNnZH+gHG6x91SCWyQCzWGsuL2Hh3ClO5/qQ==}
 
@@ -1611,6 +1614,9 @@ packages:
   '@types/cors@2.8.17':
     resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
 
+  '@types/css-font-loading-module@0.0.7':
+    resolution: {integrity: sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==}
+
   '@types/doctrine@0.0.9':
     resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
 
@@ -1644,6 +1650,9 @@ packages:
   '@types/minimatch@5.1.2':
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
 
+  '@types/mixpanel-browser@2.51.0':
+    resolution: {integrity: sha512-or4HZRDmqMJ1OP+O6h4hB+tVDKJffpVi2bFxi/Gem5TGnE94I7OtWKXtrwdDfSGhfOLL+WQIOUOxUZHAzHNi8A==}
+
   '@types/multer@1.4.12':
     resolution: {integrity: sha512-pQ2hoqvXiJt2FP9WQVLPRO+AmiIm/ZYkavPlIQnx282u4ZrVdztx0pkh3jjpQt0Kz+YI0YhSG264y08UJKoUQg==}
 
@@ -1802,6 +1811,9 @@ packages:
   '@vitest/utils@2.1.4':
     resolution: {integrity: sha512-MXDnZn0Awl2S86PSNIim5PWXgIAx8CIkzu35mBdSApUip6RFOGXBCf3YFyeEu8n1IHk4bWD46DeYFu9mQlFIRg==}
 
+  '@xstate/fsm@1.6.5':
+    resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
+
   accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -2543,6 +2555,9 @@ packages:
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
+  fflate@0.4.8:
+    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -3055,9 +3070,6 @@ packages:
     resolution: {integrity: sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==}
     engines: {node: '>=18.0.0'}
 
-  load-script@1.0.0:
-    resolution: {integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==}
-
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -3181,6 +3193,12 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  mixpanel-browser@2.58.0:
+    resolution: {integrity: sha512-ZayNE4augjSJh5RxYKRPhFe1jzS9HZnoowvZaN4DaUeCezbLGVck46L+N9X8VLtK74UgLUYfehPgCr41rtgpRA==}
+
   mkdirp@0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
@@ -3669,12 +3687,6 @@ packages:
       react: ^16.0.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
 
-  react-youtube@10.1.0:
-    resolution: {integrity: sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg==}
-    engines: {node: '>= 14.x'}
-    peerDependencies:
-      react: '>=0.14.1'
-
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -3747,9 +3759,18 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rrdom@2.0.0-alpha.18:
+    resolution: {integrity: sha512-fSFzFFxbqAViITyYVA4Z0o5G6p1nEqEr/N8vdgSKie9Rn0FJxDSNJgjV0yiCIzcDs0QR+hpvgFhpbdZ6JIr5Nw==}
+
   rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
 
+  rrweb-snapshot@2.0.0-alpha.18:
+    resolution: {integrity: sha512-hBHZL/NfgQX6wO1D9mpwqFu1NJPpim+moIcKhFEjVTZVRUfCln+LOugRc4teVTCISYHN8Cw5e2iNTWCSm+SkoA==}
+
+  rrweb@2.0.0-alpha.13:
+    resolution: {integrity: sha512-a8GXOCnzWHNaVZPa7hsrLZtNZ3CGjiL+YrkpLo0TfmxGLhjNZbWY2r7pE06p+FcjFNlgUVTmFrSJbK3kO7yxvw==}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -3840,9 +3861,6 @@ packages:
     resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
     engines: {node: '>=10'}
 
-  sister@3.0.2:
-    resolution: {integrity: sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==}
-
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -4420,9 +4438,6 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  youtube-player@5.5.2:
-    resolution: {integrity: sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==}
-
   z-schema@5.0.5:
     resolution: {integrity: sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==}
     engines: {node: '>=8.0.0'}
@@ -5017,7 +5032,7 @@ snapshots:
       '@babel/traverse': 7.25.9
       '@babel/types': 7.26.0
       convert-source-map: 2.0.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -5100,7 +5115,7 @@ snapshots:
       '@babel/parser': 7.26.2
       '@babel/template': 7.25.9
       '@babel/types': 7.26.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -5360,7 +5375,7 @@ snapshots:
   '@eslint/config-array@0.18.0':
     dependencies:
       '@eslint/object-schema': 2.1.4
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -5370,7 +5385,7 @@ snapshots:
   '@eslint/eslintrc@3.1.0':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
       espree: 10.3.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -5562,6 +5577,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.26.0':
     optional: true
 
+  '@rrweb/types@2.0.0-alpha.18': {}
+
   '@scarf/scarf@1.4.0': {}
 
   '@smithy/abort-controller@3.1.8':
@@ -6281,6 +6298,8 @@ snapshots:
     dependencies:
       '@types/node': 22.9.0
 
+  '@types/css-font-loading-module@0.0.7': {}
+
   '@types/doctrine@0.0.9': {}
 
   '@types/estree@1.0.6': {}
@@ -6316,6 +6335,8 @@ snapshots:
 
   '@types/minimatch@5.1.2': {}
 
+  '@types/mixpanel-browser@2.51.0': {}
+
   '@types/multer@1.4.12':
     dependencies:
       '@types/express': 4.17.21
@@ -6438,7 +6459,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.14.0
       '@typescript-eslint/visitor-keys': 8.14.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -6535,6 +6556,8 @@ snapshots:
       loupe: 3.1.2
       tinyrainbow: 1.2.0
 
+  '@xstate/fsm@1.6.5': {}
+
   accepts@1.3.8:
     dependencies:
       mime-types: 2.1.35
@@ -6554,7 +6577,7 @@ snapshots:
 
   agent-base@7.1.1:
     dependencies:
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -7010,6 +7033,10 @@ snapshots:
     dependencies:
       ms: 2.0.0
 
+  debug@4.3.7:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.3.7(supports-color@5.5.0):
     dependencies:
       ms: 2.1.3
@@ -7194,7 +7221,7 @@ snapshots:
 
   esbuild-register@3.6.0(esbuild@0.24.0):
     dependencies:
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
       esbuild: 0.24.0
     transitivePeerDependencies:
       - supports-color
@@ -7328,7 +7355,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.5
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
       escape-string-regexp: 4.0.0
       eslint-scope: 8.2.0
       eslint-visitor-keys: 4.2.0
@@ -7457,6 +7484,8 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
+  fflate@0.4.8: {}
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -7667,14 +7696,14 @@ snapshots:
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.5:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -7973,8 +8002,6 @@ snapshots:
       rfdc: 1.4.1
       wrap-ansi: 9.0.0
 
-  load-script@1.0.0: {}
-
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -8074,6 +8101,12 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  mitt@3.0.1: {}
+
+  mixpanel-browser@2.58.0:
+    dependencies:
+      rrweb: 2.0.0-alpha.13
+
   mkdirp@0.5.6:
     dependencies:
       minimist: 1.2.8
@@ -8484,15 +8517,6 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  react-youtube@10.1.0(react@18.3.1):
-    dependencies:
-      fast-deep-equal: 3.1.3
-      prop-types: 15.8.1
-      react: 18.3.1
-      youtube-player: 5.5.2
-    transitivePeerDependencies:
-      - supports-color
-
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -8604,8 +8628,27 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.26.0
       fsevents: 2.3.3
 
+  rrdom@2.0.0-alpha.18:
+    dependencies:
+      rrweb-snapshot: 2.0.0-alpha.18
+
   rrweb-cssom@0.6.0: {}
 
+  rrweb-snapshot@2.0.0-alpha.18:
+    dependencies:
+      postcss: 8.4.49
+
+  rrweb@2.0.0-alpha.13:
+    dependencies:
+      '@rrweb/types': 2.0.0-alpha.18
+      '@types/css-font-loading-module': 0.0.7
+      '@xstate/fsm': 1.6.5
+      base64-arraybuffer: 1.0.2
+      fflate: 0.4.8
+      mitt: 3.0.1
+      rrdom: 2.0.0-alpha.18
+      rrweb-snapshot: 2.0.0-alpha.18
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -8717,8 +8760,6 @@ snapshots:
     dependencies:
       semver: 7.6.3
 
-  sister@3.0.2: {}
-
   slash@3.0.0: {}
 
   slice-ansi@5.0.0:
@@ -9330,14 +9371,6 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
-  youtube-player@5.5.2:
-    dependencies:
-      debug: 2.6.9
-      load-script: 1.0.0
-      sister: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
-
   z-schema@5.0.5:
     dependencies:
       lodash.get: 4.4.2