-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* 🙀 chore: 로딩 시 스켈레톤 UI 추가 및 무한스크롤 커스텀 훅으로 분리 * ✨ feat: 코드 high-lighter storybook 추가 * 🙀 chore: let -> const로 변경
- Loading branch information
1 parent
8c3233b
commit 2c9e07b
Showing
12 changed files
with
226 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumber.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'], | ||
| }, | ||
| }; |
7 changes: 6 additions & 1 deletion
7
...de-highlighter/components/LineNumbers.tsx → ...er/components/LineNumbers/LineNumbers.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| export { CodeViewer } from './components/CodeViewer'; | ||
| export { CodeViewer } from './components/CodeViewer/CodeViewer'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters