leezer94 · leezer94 · Aug 25, 2023 · Aug 13, 2023 · Aug 13, 2023 · Aug 15, 2023
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -9,7 +9,8 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "serve-storybook": "serve storybook-static"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",

diff --git a/apps/storybook/src/stories/Carousel.stories.tsx b/apps/storybook/src/stories/Carousel.stories.tsx
@@ -1,6 +1,6 @@
 import '../global.css';
-import type { Meta } from '@storybook/react';
-import { Carousel, type CarouselProps } from 'ui/components/carousel';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Carousel } from 'ui/components/carousel';
 import {
   AppleTemplateCard,
   IssueTemplateCard,
@@ -48,7 +48,9 @@ const CAROUSEL_IMAGES = [
   'https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80',
 ];
 
-const Template = (args: CarouselProps) => (
+type Story = StoryFn<typeof Carousel>;
+
+const Template: Story = (args) => (
   <div className='w-[500px] h-[500px]'>
     <Carousel {...args}>
       {CAROUSEL_IMAGES.map((url, idx) => (

diff --git a/apps/storybook/vercel.json b/apps/storybook/vercel.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "pnpm run build-storybook",
+  "devCommand": "pnpm run storybook",
+  "installCommand": "pnpm install",
+  "framework": null,
+  "outputDirectory": "./storybook-static"
+}
diff --git a/apps/web/components/examples-nav.tsx b/apps/web/components/examples-nav.tsx
@@ -73,8 +73,8 @@ export function ExampleCodeLink({ pathname }: ExampleCodeLinkProps) {
       rel='nofollow'
       className='absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-semibold hover:underline md:flex'
     >
-      Source Code
-      <Icons.link className='ml-1 h-4 w-4' />
+      source code
+      <Icons.link className='ml-2 h-4 w-4' />
     </Link>
   );
 }
diff --git a/apps/web/components/mdx-components.tsx b/apps/web/components/mdx-components.tsx
@@ -189,7 +189,7 @@ const components = {
       <>
         <pre
           className={cn(
-            'mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4 data-[theme=dark]:bg-background data-[theme=light]:bg-white',
+            'p-5 rounded-xl my-5 bg-inherit overflow-x-auto border-2',
             className
           )}
           {...props}
@@ -218,7 +218,7 @@ const components = {
   code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <code
       className={cn(
-        'relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm bg-transparent',
+        'relative rounded bg-transparent px-[0.3rem] py-[0.2rem] font-mono text-sm',
         className
       )}
       {...props}

diff --git a/apps/web/components/site/navigation/site-header.tsx b/apps/web/components/site/navigation/site-header.tsx
@@ -76,7 +76,7 @@ export default function SiteHeader() {
                     size: 'sm',
                     variant: 'ghost',
                   }),
-                  'w-9 px-0 hidden md:block'
+                  'w-9 px-0 hidden md:flex'
                 )}
               >
                 <Icons.npm className='h-5 w-5 fill-current' />
@@ -95,7 +95,7 @@ export default function SiteHeader() {
                     size: 'sm',
                     variant: 'ghost',
                   }),
-                  'w-9 px-0 hidden md:block'
+                  'w-9 px-0 hidden md:flex'
                 )}
               >
                 <Icons.storybook className='h-5 w-5 fill-current' />

diff --git a/apps/web/config/docs.ts b/apps/web/config/docs.ts
@@ -109,12 +109,6 @@ export const DOCS_CONFIG: DocsConfig = {
     {
       title: '레퍼런스',
       items: [
-        // {
-        //   title: 'Shadcn/ui',
-        //   href: 'https://ui.shadcn.com/',
-        //   external: true,
-        //   items: [],
-        // },
         {
           title: 'Radix/ui',
           href: 'https://www.radix-ui.com/',

diff --git a/apps/web/config/site.ts b/apps/web/config/site.ts
@@ -7,7 +7,6 @@ export const siteConfig = {
     linkedin: 'https://www.linkedin.com/in/keonhee-lee-2964b421a/',
     github: 'https://github.com/leezer94/ui',
     medium: 'https://medium.com/@2kunhee94',
-    reference: 'https://github.com/shadcn/ui',
     npm: 'https://www.npmjs.com/package/leezer-ui',
     storybook: 'https://www.leezer-ui.com',
   },

diff --git a/apps/web/content/docs/components/accordion.mdx b/apps/web/content/docs/components/accordion.mdx
@@ -13,4 +13,34 @@ radix:
   </div>
 </ComponentExample>
 
-### API 레퍼런스
+### 컴포넌트의 구조
+
+```jsx
+<Accordion type='single' collapsible className='w-full'>
+  <AccordionItem value='item-1'>
+    <AccordionTrigger>
+      접근 가능성은 어떤가요 ?
+      <AccordionDescription>
+        접근 가능성에 대해 이야기 합니다.
+      </AccordionDescription>
+    </AccordionTrigger>
+    <AccordionContent>
+      WAI-ARIA 의 디자인 패턴을 차용 했습니다.
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value='item-2'>
+    <AccordionTrigger>스타일링이 되어 있나요?</AccordionTrigger>
+    <AccordionContent>
+      네. 다른 컴포넌트들과 미학적으로 일치하는 기본형 스타일이 적용되어
+      있습니다.
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value='item-3'>
+    <AccordionTrigger>애니메이션이 적용되어 있나요?</AccordionTrigger>
+    <AccordionContent>
+      네. 기본적으로 애니메이션이 적용되어 있지만, 개인적인 선호도에따라
+      비활성화 할 수 있습니다.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
diff --git a/apps/web/content/docs/components/alert-dialog.mdx b/apps/web/content/docs/components/alert-dialog.mdx
@@ -12,3 +12,21 @@ radix:
     <AlertDialogDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트의 구조
+
+```jsx
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Icons.trash2 />
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Title</AlertDialogTitle>
+      <AlertDialogDescription>Description</AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogCancel>Cancel</AlertDialogCancel>
+    <AlertDialogAction>Succeed Action</AlertDialogAction>
+  </AlertDialogContent>
+</AlertDialog>
+```
diff --git a/apps/web/content/docs/components/avatar.mdx b/apps/web/content/docs/components/avatar.mdx
@@ -12,3 +12,12 @@ radix:
     <AvatarDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트의 구조
+
+```jsx
+<Avatar>
+  <AvatarImage src={image_src} alt={alt} />
+  <AvatarFallback>{fallbac_image}</AvatarFallback>
+</AvatarFallback>
+```
diff --git a/apps/web/content/docs/components/button.mdx b/apps/web/content/docs/components/button.mdx
@@ -24,47 +24,11 @@ component: true
   <ButtonDemo buttonVariant='disabled' />
   <ButtonDemo buttonVariant='link' />
 </ComponentMultiExamples>
-{/* <ComponentExample category='default' src='/components/examples/button/demo.tsx'>
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='default' />
-  </div>
-</ComponentExample>
-<ComponentExample category='outline' src='/components/examples/button/demo.tsx'>
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='outline' />
-  </div>
-</ComponentExample>
-<ComponentExample
-  category='destructive'
-  src='/components/examples/button/demo.tsx'
->
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='destructive' />
-  </div>
-</ComponentExample>
-<ComponentExample category='ghost' src='/components/examples/button/demo.tsx'>
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='ghost' />
-  </div>
-</ComponentExample>
-<ComponentExample
-  category='secondary'
-  src='/components/examples/button/demo.tsx'
->
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='secondary' />
-  </div>
-</ComponentExample>
-<ComponentExample
-  category='disabled'
-  src='/components/examples/button/demo.tsx'
->
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='disabled' />
-  </div>
-</ComponentExample>
-<ComponentExample category='link' src='/components/examples/button/demo.tsx'>
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='link' />
-  </div>
-</ComponentExample> */}
+
+### 컴포넌트의 구조
+
+```jsx
+<Button variant={buttonVariant} size={size}>
+  Text
+</Button>
+```
diff --git a/apps/web/content/docs/components/card.mdx b/apps/web/content/docs/components/card.mdx
@@ -9,3 +9,16 @@ component: true
     <CardDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트의 구조
+
+```jsx
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+    <CardContent>Content</CardContent>
+  </CardHeader>
+  <CardFooter>Footer</CardFooter>
+</Card>
+```
diff --git a/apps/web/content/docs/components/carousel.mdx b/apps/web/content/docs/components/carousel.mdx
@@ -9,3 +9,13 @@ component: true
     <CarouselDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트의 구조
+
+```jsx
+<Carousel buttonColor='black' orientation='horizontal' autoplay={autoplay}>
+  <CarouselImage1 />
+  <CarouselImage2 />
+  <CarouselImage3 />
+</Carousel>
+```
diff --git a/apps/web/content/docs/components/dialog.mdx b/apps/web/content/docs/components/dialog.mdx
@@ -12,3 +12,19 @@ radix:
     <DialogDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트의 구조
+
+```jsx
+<Dialog>
+  <DialogTrigger asChild>트리거로 사용될 컴포넌트</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Title</DialogTitle>
+      <DialogDescription>Description</DialogDescription>
+    </DialogHeader>
+    {/** 컨텐츠 역할의 컴포넌트 자리  */}
+    <DialogFooter className='mt-5 flex'>Footer</DialogFooter>
+  </DialogContent>
+</Dialog>
+```
diff --git a/apps/web/content/docs/components/hover-card.mdx b/apps/web/content/docs/components/hover-card.mdx
@@ -12,3 +12,19 @@ radix:
     <HoverCardDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트 구조
+
+```jsx
+<HoverCard openDelay={300} closeDelay={300}>
+  <HoverCardTrigger>호버카드 트리거가될 컴포넌트</HoverCardTrigger>
+  <HoverCardContent>
+    <HoverCardHeader>
+      <HoverCardTitle>Title</HoverCardTitle>
+      <HoverCardDescription>Description</HoverCardDescription>
+    </HoverCardHeader>
+    Content
+    <HoverCardFooter>Footer</HoverCardFooter>
+  </HoverCardContent>
+</HoverCard>
+```
diff --git a/packages/ui/components/carousel.tsx b/packages/ui/components/carousel.tsx
@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { Icons } from '../icons';
 import { cn } from '../lib/utils';
-import { useEffect } from 'react';
 
 export interface CarouselProps {
   buttonColor: 'black' | 'white';