From 2c9e07b9285980d6985ca97b6ced9f4e7babf56d Mon Sep 17 00:00:00 2001
From: YEONGJAE LEE <71895560+lee0jae330@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:27:25 +0900
Subject: [PATCH] =?UTF-8?q?[#238]=20=ED=99=88=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EC=B4=88=EA=B8=B0=20=EB=A1=9C=EB=94=A9=20=EC=8B=9C=20?=
 =?UTF-8?q?=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI=20=EC=A0=81=EC=9A=A9?=
 =?UTF-8?q?=20=EB=B0=8F=20code-highlighter=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=A0=9C?=
 =?UTF-8?q?=EC=9E=91=20(#239)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🙀 chore: 로딩 시 스켈레톤 UI 추가 및 무한스크롤 커스텀 훅으로 분리

* ✨ feat: 코드 high-lighter storybook 추가

* 🙀 chore: let -> const로 변경
---
 README.md                                     | 12 +--
 .../CodeContent/CodeContent.stories.tsx       | 44 ++++++++++
 .../{ => CodeContent}/CodeContent.tsx         | 10 ++-
 .../CodeViewer/CodeViewer.stories.tsx         | 82 +++++++++++++++++++
 .../{ => CodeViewer}/CodeViewer.tsx           | 15 ++--
 .../LineNumbers/LineNumber.stories.tsx        | 22 +++++
 .../{ => LineNumbers}/LineNumbers.tsx         |  7 +-
 .../src/shared/code-highlighter/index.ts      |  2 +-
 apps/client/src/shared/hooks/index.ts         |  1 +
 .../src/shared/hooks/useInfiniteScroll.ts     | 29 +++++++
 .../hooks/usePreventLeaveWorkspacePage.ts     |  2 +-
 .../WorkspaceContainer/WorkspaceContainer.tsx | 44 ++++------
 12 files changed, 226 insertions(+), 44 deletions(-)
 create mode 100644 apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.stories.tsx
 rename apps/client/src/shared/code-highlighter/components/{ => CodeContent}/CodeContent.tsx (91%)
 create mode 100644 apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.stories.tsx
 rename apps/client/src/shared/code-highlighter/components/{ => CodeViewer}/CodeViewer.tsx (75%)
 create mode 100644 apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumber.stories.tsx
 rename apps/client/src/shared/code-highlighter/components/{ => LineNumbers}/LineNumbers.tsx (86%)
 create mode 100644 apps/client/src/shared/hooks/useInfiniteScroll.ts

diff --git a/README.md b/README.md
index 04510bc7..8d7ef2a9 100644
--- a/README.md
+++ b/README.md
@@ -60,15 +60,14 @@
 <h1>hello world!</h1>
 ```
 
-웹 개발 초보자들에게 코드를 작성하는 것은 어렵고 부담스럽게 느껴질 수 있습니다.<br /> 
-하지만 BooLock에서는 블록을 조립하며 쉽고 재미있게 자신만의 웹사이트를 만들 수 있습니다.<br /> 
+웹 개발 초보자들에게 코드를 작성하는 것은 어렵고 부담스럽게 느껴질 수 있습니다.<br />
+하지만 BooLock에서는 블록을 조립하며 쉽고 재미있게 자신만의 웹사이트를 만들 수 있습니다.<br />
 
-BooLock은 HTML과 CSS를 블록코딩 방식으로 학습할 수 있는 플랫폼입니다.<br /> 
-코드를 몰라도 블록을 조립하는 간단한 방식으로 원하는 웹사이트를 제작하고, 이를 통해 웹 개발의 기초를 재미있게 배울 수 있습니다.<br /> 
+BooLock은 HTML과 CSS를 블록코딩 방식으로 학습할 수 있는 플랫폼입니다.<br />
+코드를 몰라도 블록을 조립하는 간단한 방식으로 원하는 웹사이트를 제작하고, 이를 통해 웹 개발의 기초를 재미있게 배울 수 있습니다.<br />
 
 블록들이 모여 만들어진 나만의 웹페이지를 주변 사람들과 공유해보세요. ❤️
 
-
 <br/>
 
 # 🐥 주요기능 <a id="major_feature"></a>
@@ -184,7 +183,7 @@ BooLock은 HTML과 CSS를 블록코딩 방식으로 학습할 수 있는 플랫
       <img src="https://github.com/user-attachments/assets/0a337295-256e-4a59-92a7-9c83ce8a1618" alt="storybook description" width="600"/>
    </div>
 
-   Blockly의 Flyout 내부에 DOM 요소(input, button)를 동적으로 생성하여 사용자 인터페이스를 구성했습니다. 입력값은 중복 확인과 유효성 검사를 거쳐 CSS_ 접두사를 붙여 블록으로 등록되며, 즉시 Flyout에 반영됩니다. 생성된 블록은 우클릭 시 "블록 삭제" 옵션으로 관련된 모든 인스턴스를 삭제할 수 있습니다. Reset CSS 체크박스와 툴팁을 추가해 기본 스타일 초기화와 사용자 경험을 개선했습니다.
+   Blockly의 Flyout 내부에 DOM 요소(input, button)를 동적으로 생성하여 사용자 인터페이스를 구성했습니다. 입력값은 중복 확인과 유효성 검사를 거쳐 CSS\_ 접두사를 붙여 블록으로 등록되며, 즉시 Flyout에 반영됩니다. 생성된 블록은 우클릭 시 "블록 삭제" 옵션으로 관련된 모든 인스턴스를 삭제할 수 있습니다. Reset CSS 체크박스와 툴팁을 추가해 기본 스타일 초기화와 사용자 경험을 개선했습니다.
 
    > **👇 더 자세한 기록 및 과정 확인하기 👇** <br/> > [Blockly 커스텀](https://www.notion.so/Blockly-14077ba9a1b680ccafcbd5b3781bf390?pvs=21)
 
@@ -268,6 +267,7 @@ React의 SPA 구조로 인해 검색 엔진이 페이지 정보를 인식하지
   > **👇 더 자세한 기록 및 과정 확인하기 👇** <br/> > [사용자 가이드](https://www.notion.so/51679d3e288b485f9a0ea9068eb621f5?pvs=21) <br/>
 
 ### 스토리북 테스트<a id="fe-storybook"></a>
+
 [**스토리북 배포 링크**](https://boostcampwm-2024.github.io/web31-BooLock/)
 
 <div align="center">
diff --git a/apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.stories.tsx b/apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.stories.tsx
new file mode 100644
index 00000000..54641cec
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.stories.tsx
@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CodeContent } from './CodeContent';
+
+const meta: Meta<typeof CodeContent> = {
+  title: 'shared/code-highlighter/CodeContent',
+  component: CodeContent,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CodeContent>;
+
+export const Default: Story = {
+  args: {
+    code: `<html>
+    <head></head>
+    <body>
+      <div>
+        <h1>title</h1>
+        <p>content</p>
+      </div>
+    </body>
+  </html>`,
+    codeLineList: [
+      '<html>',
+      '  <head></head>',
+      '  <body>',
+      '    <div>',
+      '      <h1>title</h1>',
+      '      <p>content</p>',
+      '    </div>',
+      '  </body>',
+      '</html>',
+    ],
+    selectedBlockStartLine: 5,
+    selectedBlockLength: 7,
+    selectedBlockType: 'BOOLOCK_SYSTEM_html',
+  },
+};
diff --git a/apps/client/src/shared/code-highlighter/components/CodeContent.tsx b/apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.tsx
similarity index 91%
rename from apps/client/src/shared/code-highlighter/components/CodeContent.tsx
rename to apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.tsx
index ded836c6..c58cd515 100644
--- a/apps/client/src/shared/code-highlighter/components/CodeContent.tsx
+++ b/apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.tsx
@@ -1,5 +1,6 @@
-import styles from '../styles/CodeViewer.module.css';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+
+import styles from '../../styles/CodeViewer.module.css';
 
 type CodeViewerProps = {
   code: string;
@@ -9,6 +10,11 @@ type CodeViewerProps = {
   selectedBlockType?: string | null;
 };
 
+/**
+ *
+ * @description
+ * 변환된 HTML, CSS 코드를 보여주는 컴포넌트
+ */
 export const CodeContent = ({
   code,
   codeLineList,
diff --git a/apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.stories.tsx b/apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.stories.tsx
new file mode 100644
index 00000000..2a7c1d07
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.stories.tsx
@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CodeViewer } from './CodeViewer';
+
+const meta: Meta<typeof CodeViewer> = {
+  title: 'shared/code-highlighter/CodeViewer',
+  component: CodeViewer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CodeViewer>;
+
+export const Default: Story = {
+  args: {
+    code: `<html>
+    <head></head>
+    <body>
+      <div>
+        <h1>title</h1>
+        <p>content</p>
+      </div>
+    </body>
+  </html>`,
+    type: 'html',
+    theme: 'light',
+  },
+};
+
+export const DarkThemeHTML: Story = {
+  args: {
+    code: `<html>
+    <head></head>
+    <body>
+      <div>
+        <h1>title</h1>
+        <p>content</p>
+      </div>
+    </body>
+  </html>`,
+    type: 'html',
+    theme: 'dark',
+  },
+};
+
+export const LightThemeCss: Story = {
+  args: {
+    code: `.title {
+    background-color: red;
+  }
+  .content {
+    font-size: 16px;
+    font-weight: bold;
+    font-family: 'Arial';
+    color: #000;
+  }  
+  `,
+    type: 'css',
+    theme: 'light',
+  },
+};
+
+export const DarkThemeCss: Story = {
+  args: {
+    code: `.title {
+    background-color: red;
+  }
+  .content {
+    font-size: 16px;
+    font-weight: bold;
+    font-family: 'Arial';
+    color: #000;
+  }  
+  `,
+    type: 'css',
+    theme: 'dark',
+  },
+};
diff --git a/apps/client/src/shared/code-highlighter/components/CodeViewer.tsx b/apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.tsx
similarity index 75%
rename from apps/client/src/shared/code-highlighter/components/CodeViewer.tsx
rename to apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.tsx
index e29d86b2..490635ad 100644
--- a/apps/client/src/shared/code-highlighter/components/CodeViewer.tsx
+++ b/apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.tsx
@@ -1,8 +1,8 @@
-import { CodeContent } from './CodeContent';
-import { LineNumbers } from './LineNumbers';
-import { parseHighlightCss } from '../utils/parseHighlightCss';
-import { parseHighlightHtml } from '../utils/parseHighlightHtml';
-import styles from '../styles/CodeViewer.module.css';
+import { CodeContent } from '../CodeContent/CodeContent';
+import { LineNumbers } from '../LineNumbers/LineNumbers';
+import { parseHighlightCss } from '../../utils/parseHighlightCss';
+import { parseHighlightHtml } from '../../utils/parseHighlightHtml';
+import styles from '../../styles/CodeViewer.module.css';
 import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
 
 type CodeViewerProps = {
@@ -14,6 +14,11 @@ type CodeViewerProps = {
   selectedBlockType?: string | null;
 };
 
+/**
+ *
+ * @description
+ * 변환된 HTML, CSS 코드를 줄 수와 함께 보여주는 컴포넌트
+ */
 export const CodeViewer = ({
   code,
   type,
diff --git a/apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumber.stories.tsx b/apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumber.stories.tsx
new file mode 100644
index 00000000..c996d2c3
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumber.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LineNumbers } from './LineNumbers';
+
+const meta: Meta<typeof LineNumbers> = {
+  title: 'shared/code-highlighter/LineNumbers',
+  component: LineNumbers,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LineNumbers>;
+
+export const Default: Story = {
+  args: {
+    codeLineList: ['line1', 'line2', 'line3'],
+  },
+};
diff --git a/apps/client/src/shared/code-highlighter/components/LineNumbers.tsx b/apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumbers.tsx
similarity index 86%
rename from apps/client/src/shared/code-highlighter/components/LineNumbers.tsx
rename to apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumbers.tsx
index 19f0df11..69a77d28 100644
--- a/apps/client/src/shared/code-highlighter/components/LineNumbers.tsx
+++ b/apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumbers.tsx
@@ -1,10 +1,15 @@
+import styles from '../../styles/CodeViewer.module.css';
 import { useState } from 'react';
-import styles from '../styles/CodeViewer.module.css';
 
 type LineNumbersProps = {
   codeLineList: string[];
 };
 
+/**
+ *
+ * @description
+ * 코드의 줄 수를 표시하는 컴포넌트
+ */
 export const LineNumbers = ({ codeLineList }: LineNumbersProps) => {
   const [hoveredLineNumber, setHoveredLineNumber] = useState<number | null>(null);
 
diff --git a/apps/client/src/shared/code-highlighter/index.ts b/apps/client/src/shared/code-highlighter/index.ts
index 96758797..45187a73 100644
--- a/apps/client/src/shared/code-highlighter/index.ts
+++ b/apps/client/src/shared/code-highlighter/index.ts
@@ -1 +1 @@
-export { CodeViewer } from './components/CodeViewer';
+export { CodeViewer } from './components/CodeViewer/CodeViewer';
diff --git a/apps/client/src/shared/hooks/index.ts b/apps/client/src/shared/hooks/index.ts
index 1ce64c92..94bde057 100644
--- a/apps/client/src/shared/hooks/index.ts
+++ b/apps/client/src/shared/hooks/index.ts
@@ -15,3 +15,4 @@ export { useCssOptionItem } from './css/useCssOptionItem';
 export { workspaceKeys } from './query-key/workspaceKeys';
 
 export { usePreventLeaveWorkspacePage } from './usePreventLeaveWorkspacePage';
+export { useInfiniteScroll } from './useInfiniteScroll';
diff --git a/apps/client/src/shared/hooks/useInfiniteScroll.ts b/apps/client/src/shared/hooks/useInfiniteScroll.ts
new file mode 100644
index 00000000..5f839454
--- /dev/null
+++ b/apps/client/src/shared/hooks/useInfiniteScroll.ts
@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+
+type useInfiniteScrollProps = {
+  intersectionCallback: IntersectionObserverCallback;
+};
+
+export const useInfiniteScroll = ({ intersectionCallback }: useInfiniteScrollProps) => {
+  const targetRef = useRef<HTMLDivElement | null>(null);
+
+  const option = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.5,
+  };
+
+  useEffect(() => {
+    if (!targetRef.current) {
+      return;
+    }
+    const observer = new IntersectionObserver(intersectionCallback, option);
+    observer.observe(targetRef.current);
+    return () => {
+      if (targetRef.current) {
+        observer.unobserve(targetRef.current);
+      }
+    };
+  }, [intersectionCallback]);
+  return targetRef;
+};
diff --git a/apps/client/src/shared/hooks/usePreventLeaveWorkspacePage.ts b/apps/client/src/shared/hooks/usePreventLeaveWorkspacePage.ts
index 34c4bb2c..de4c4adf 100644
--- a/apps/client/src/shared/hooks/usePreventLeaveWorkspacePage.ts
+++ b/apps/client/src/shared/hooks/usePreventLeaveWorkspacePage.ts
@@ -4,7 +4,7 @@ import { useWorkspaceChangeStatusStore } from '@/shared/store';
 
 export const usePreventLeaveWorkspacePage = () => {
   const { isBlockChanged, isCssChanged } = useWorkspaceChangeStatusStore();
-  let blocker = useBlocker(
+  const blocker = useBlocker(
     ({ currentLocation, nextLocation }) =>
       currentLocation.pathname !== nextLocation.pathname && (isBlockChanged || isCssChanged)
   );
diff --git a/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.tsx b/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.tsx
index 16e6cf67..491b760a 100644
--- a/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.tsx
+++ b/apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.tsx
@@ -1,9 +1,8 @@
 import { EmptyWorkspace, WorkspaceGrid, WorkspaceHeader, WorkspaceList } from '@/widgets';
-import { useEffect, useRef } from 'react';
+import { useGetWorkspaceList, useInfiniteScroll } from '@/shared/hooks';
 
 import { SkeletonWorkspaceList } from '@/shared/ui';
 import { WorkspaceLoadError } from '@/entities';
-import { useGetWorkspaceList } from '@/shared/hooks';
 
 /**
  *
@@ -14,36 +13,25 @@ export const WorkspaceContainer = () => {
   const { hasNextPage, fetchNextPage, isPending, isFetchingNextPage, isError, workspaceList } =
     useGetWorkspaceList();
 
-  const nextFetchTargetRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    const options = {
-      root: null,
-      rootMargin: '0px',
-      threshold: 0.5,
-    };
-    const fetchCallback: IntersectionObserverCallback = (entries, observer) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting && hasNextPage) {
-          fetchNextPage();
-          observer.unobserve(entry.target);
-        }
-      });
-    };
-    const observer = new IntersectionObserver(fetchCallback, options);
-    if (nextFetchTargetRef.current) {
-      observer.observe(nextFetchTargetRef.current);
-    }
-    return () => {
-      if (nextFetchTargetRef.current) {
-        observer.unobserve(nextFetchTargetRef.current);
+  const fetchCallback: IntersectionObserverCallback = (entries, observer) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting && hasNextPage) {
+        fetchNextPage();
+        observer.unobserve(entry.target);
       }
-    };
-  }, [workspaceList]);
+    });
+  };
+
+  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 />
       ) : (
@@ -53,7 +41,7 @@ export const WorkspaceContainer = () => {
         ) : (
           <WorkspaceGrid>
             <WorkspaceList workspaceList={workspaceList} />
-            {(isPending || isFetchingNextPage) && <SkeletonWorkspaceList skeletonNum={8} />}
+            {isFetchingNextPage && <SkeletonWorkspaceList skeletonNum={8} />}
           </WorkspaceGrid>
         ))
       )}