Apply new Yorkie UI to homepage

components/CodeBlock/CodeBlock.tsx

@@ -1,36 +1,44 @@
 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>
   );
 }
 
-function CopyButtonBox({ value, timeout = 1000 }: { value: string; timeout?: number }) {
+function CopyButtonBox({ value, timeout = 1000 }: { value?: string; timeout?: number }) {
   return (
     <div className="btn_area">
       <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>
             )}