Apply YorkieUI Button component

components/CodeBlock/CodeBlock.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { CopyButton, Button, Icon } from '@/components';
+import { CopyButton, Icon } from '@/components';
+import { Button } from '@yorkie-ui/core';
 import { PrismCodeProps, PrismCode } from './PrismCode';
 
 export function CodeBlock({ withCopyButton, ...restProps }: { withCopyButton?: boolean } & PrismCodeProps) {
@@ -27,7 +28,9 @@ function CopyButtonBox({ value, timeout = 1000 }: { value: string; timeout?: num
       <CopyButton value={value} timeout={timeout}>
         {({ copied, copy }) => (
           <>
-            <Button icon={<Icon type="copy" />} outline onClick={copy} title="Copy to clipboard" />
+            <Button size="sm" variant="outline" colorPalette="neutral" onClick={copy} title="Copy to clipboard">
+              <Icon type="copy" />
+            </Button>
             {copied && (
               <div className="toast_box shadow_l">
                 <Icon type="check" />

components/CodeBlock/CodeBlockHeader.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { CopyButton, Button, Icon } from '@/components';
+import { CopyButton, Icon } from '@/components';
+import { Button } from '@yorkie-ui/core';
 
 export function CodeBlockHeader({ children }: { children: ReactNode }) {
   return <div className="codeblock_header">{children}</div>;
@@ -13,13 +14,23 @@ function RightBox({ children }: { children: ReactNode }) {
   return <div className="box_right">{children}</div>;
 }
 
-function CopyButtonBox({ value, timeout = 1000 }: { value: string; timeout?: number }) {
+function CopyButtonBox({
+  value,
+  size = 'sm',
+  timeout = 1000,
+}: {
+  value: string;
+  size?: 'sm' | 'md' | 'lg';
+  timeout?: number;
+}) {
   return (
     <div className="btn_area">
       <CopyButton value={value} timeout={timeout}>
         {({ copied, copy }) => (
           <>
-            <Button icon={<Icon type="copy" />} className="gray50" outline onClick={copy} title="Copy to clipboard" />
+            <Button variant="outline" size={size} colorPalette="transparent" onClick={copy} title="Copy to clipboard">
+              <Icon type="copy" />
+            </Button>
             {copied && (
               <div className="toast_box shadow_l">
                 <Icon type="check" />

components/Icons/Icon.tsx

@@ -61,6 +61,8 @@ const svgMap = {
   checkCircle: <CheckCircleSVG />,
   scenario: <ScenarioSVG />,
   arrow: <ArrowSVG />,
+  arrowLeft: <ArrowSVG style={{ rotate: '90deg' }} />,
+  arrowRight: <ArrowSVG style={{ rotate: '270deg' }} />,
   recorder: <RecorderSVG />,
   bulb: <BulbSVG />,
   twinkle: <TwinkleSVG />,

components/Layout/ExampleLayout.tsx

@@ -1,7 +1,5 @@
 import { ReactElement, ReactNode, useState } from 'react';
 import Link from 'next/link';
-import classNames from 'classnames';
-import { Button, Icon } from '@/components';
 import LogoGnbSVG from '@/public/assets/icons/logo_gnb.svg';
 
 type ExampleViewType = 'full' | 'show' | 'grid' | 'split';

components/Layout/Header.tsx

@@ -1,7 +1,8 @@
 import { ReactElement, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
-import { Button, Icon } from '@/components';
+import { Icon } from '@/components';
+import { Button, Flex } from '@yorkie-ui/core';
 import { isValidToken } from '@/utils/isValidToken';
 import { MobileGnbDropdown } from './MobileGnbDropdown';
 import LogoSVG from '@/public/assets/icons/logo_horizontal_xs.svg';
@@ -51,25 +52,25 @@ export function Header(): ReactElement {
           </ul>
         </nav>
         <div className="header_util">
-          {isLoggedIn ? (
-            <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}`} outline className="gray50">
-              Dashboard
-            </Button>
-          ) : isLoggedIn === false ? (
-            <>
-              <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login`} outline className="gray50">
-                Sign in
+          <Flex gap="200" hideBelow="md">
+            {!!isLoggedIn ? (
+              <Button asChild variant="outline" colorPalette="neutral">
+                <Link href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}`}>Dashboard</Link>
               </Button>
-              <Button
-                as="a"
-                href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`}
-                className="orange_0"
-                icon={<Icon type="star" />}
-              >
-                Start for free
-              </Button>
-            </>
-          ) : null}
+            ) : (
+              <>
+                <Button asChild variant="outline" colorPalette="neutral">
+                  <Link href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login`}>Sign in</Link>
+                </Button>
+                <Button asChild>
+                  <Link href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`}>
+                    <Icon type="star" />
+                    Start for free
+                  </Link>
+                </Button>
+              </>
+            )}
+          </Flex>
           <MobileGnbDropdown isLoggedIn={!!isLoggedIn} />
         </div>
       </div>

components/Layout/MobileGnbDropdown.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import classNames from 'classnames';
 import { Popover, Icon } from 'components';
+import { Button } from '@yorkie-ui/core';
 
 export function MobileGnbDropdown({ isLoggedIn }: { isLoggedIn: boolean }) {
   const [gnbOpened, setGnbOpened] = useState(false);
@@ -22,11 +23,10 @@ export function MobileGnbDropdown({ isLoggedIn }: { isLoggedIn: boolean }) {
   return (
     <Popover opened={gnbOpened} onChange={setGnbOpened}>
       <Popover.Target>
-        <button className="btn_menu">
-          <span className="blind">Open menu</span>
+        <Button colorPalette="transparent" hideFrom="md">
           <Icon type="gnbMenu" className={classNames('icon_menu', { is_active: !gnbOpened })} />
           <Icon type="close" className={classNames('icon_close', { is_active: gnbOpened })} />
-        </button>
+        </Button>
       </Popover.Target>
       <Popover.Dropdown>
         <div className="menu_list_mo dropdown">

components/docs/index.ts

@@ -1,7 +1,6 @@
 export * from './Link';
 export * from './ImageWrap';
 export * from './CodeBlock';
-export * from './Breadcrumb';
 export * from './Caption';
 export * from './Alert';
 export * from './Blockquote';

components/exampleView/BasicView/BasicExampleView.tsx

@@ -1,8 +1,9 @@
-import { Icon } from '@/components';
-import classNames from 'classnames';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import yorkie from 'yorkie-js-sdk';
+import classNames from 'classnames';
 import UserContent from './UserContent';
+import { Icon } from '@/components';
+import { Button } from '@yorkie-ui/core';
 
 interface DocChangeInfo {
   type: 'update' | 'initialize' | 'presence';
@@ -99,25 +100,24 @@ export function BasicExampleView({
                   <span className={`icon gradient_180deg_${UserColors[userNumber % UserColors.length]}`}></span>
                   <span className="text">{`User ${userNumber}`}</span>
                 </span>
-                <div className="btn_box">
-                  <button
-                    type="button"
-                    className={classNames('btn btn_line btn_pin')}
-                    title="Pin"
-                    onClick={() => {
-                      deleteUser(userNumber);
-                    }}
-                  >
-                    <Icon type="close" />
-                  </button>
-                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  colorPalette="transparent"
+                  onClick={() => {
+                    deleteUser(userNumber);
+                  }}
+                  ml="600"
+                >
+                  <Icon type="close" />
+                </Button>
               </li>
             );
           })}
         </ul>
-        <button type="button" className="btn btn_add" onClick={addUser}>
+        <Button colorPalette="transparent" onClick={addUser} position="absolute" top={0} right={0} h="full">
           <Icon type="plus" />
-        </button>
+        </Button>
       </div>
       <ul className="grid_list2">
         {userList.map((userNumber) => {