#26 link 컴포넌트

components/LinkBar.tsx

@@ -0,0 +1,26 @@
+interface LinkBarProps {
+  link: string;
+  onClick?: () => void;
+}
+
+/**
+ * 링크 주소를 표시하는 컴포넌트
+ * @param link 링크 주소
+ * @param onClick 링크 클릭 시 실행할 함수
+ */
+export default function LinkBar({ link, onClick }: LinkBarProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex cursor-pointer items-center gap-[5px] rounded-custom bg-green-100 px-[10px] py-[3px] mo:py-1"
+    >
+      <img
+        src="icon/icon-link.svg"
+        alt="링크 아이콘"
+        className="h-5 w-5 mo:h-4 mo:w-4"
+      />
+      <p className="text-14 text-green-200 mo:text-12">{link}</p>
+    </button>
+  );
+}

pages/test/index.tsx

@@ -1,4 +1,5 @@
 import Button from '@/components/Button';
+import LinkBar from '@/components/LinkBar';
 
 export default function Test() {
   const commonCellClass = 'border-r border-gray-300';
@@ -14,7 +15,7 @@ export default function Test() {
           </tr>
         </thead>
         <tbody>
-          <tr>
+          <tr className="border-b border-gray-300">
             <td className={commonCellClass}>Button</td>
             <td className={commonRowClass}>
               <Button size="small">small</Button>
@@ -33,8 +34,10 @@ export default function Test() {
             </td>
           </tr>
           <tr>
-            <td className={commonCellClass}>컴포넌트명 입력</td>
-            <td className={commonRowClass}>{/* 컴포넌트를 추가해주세요 */}</td>
+            <td className={commonCellClass}>LinkBar</td>
+            <td className={commonRowClass}>
+              <LinkBar link="https://www.google.com" />
+            </td>
           </tr>
         </tbody>
       </table>