Apply new Yorkie UI to homepage

components/CodeBlock/CodeBlock.tsx

@@ -1,23 +1,25 @@
 import { ReactNode } from 'react';
-import { CopyButton, Button, Icon } from '@/components';
+import { CopyButton } from '@/components';
 import { PrismCodeProps, PrismCode } from './PrismCode';
+import { Box, IconCopy, IconCheck, Icon, Button } from 'yorkie-ui';
+import React from 'react';
 
 export function CodeBlock({ withCopyButton, ...restProps }: { withCopyButton?: boolean } & PrismCodeProps) {
   if (withCopyButton) {
     return (
-      <div className="codeblock_box">
-        <div className="codeblock">
+      <Box className="codeblock_box" fontSize="sm">
+        <Box className="codeblock" fontSize="sm">
           <PrismCode {...restProps} />
-        </div>
+        </Box>
         <CopyButtonBox value={restProps.code} />
-      </div>
+      </Box>
     );
   }
 
   return (
-    <div className="codeblock">
+    <Box className="codeblock">
       <PrismCode {...restProps} />
-    </div>
+    </Box>
   );
 }
 
@@ -27,10 +29,16 @@ 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
+              as="link"
+              href="https://github.com/yorkie-team/dashboard/issues"
+              variant="outline"
+              position="start"
+              icon={<Icon icon={<IconCopy />} />}
+            ></Button>
             {copied && (
               <div className="toast_box shadow_l">
-                <Icon type="check" />
+                <Icon icon={<IconCheck stroke="#000" />} stroke="orange.default" position="start" size="lg" />
                 Copied
               </div>
             )}

components/CodeBlock/CodeBlockHeader.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
-import { CopyButton, Button, Icon } from '@/components';
+import { CopyButton } from '@/components';
+import { Icon, IconCopy, Button, Box } from 'yorkie-ui';
+import React from 'react';
 
 export function CodeBlockHeader({ children }: { children: ReactNode }) {
   return <div className="codeblock_header">{children}</div>;
@@ -19,12 +21,14 @@ function CopyButtonBox({ value, timeout = 1000 }: { value: string; timeout?: num
       <CopyButton value={value} timeout={timeout}>
         {({ copied, copy }) => (
           <>
-            <Button icon={<Icon type="copy" />} className="gray50" outline onClick={copy} title="Copy to clipboard" />
+            <Button size="xs" onClick={copy} variant="outline" title="Copy to clipboard">
+              <Icon icon={<IconCopy />} stroke="neutral.12" size={{ base: 'lg', lg: '2xl' }} />
+            </Button>
             {copied && (
-              <div className="toast_box shadow_l">
-                <Icon type="check" />
+              <Box className="toast_box shadow_l" fontSize="sm">
+                <Icon icon={<IconCopy />} stroke="#fff" position="start" size="lg" />
                 Copied
-              </div>
+              </Box>
             )}
           </>
         )}