#26 link 컴포넌트

components/LinkBar.tsx

@@ -0,0 +1,25 @@
+interface LinkBarProps {
+  link: string;
+  onClick?: () => void;
+}
+
+/**
+ * 링크 주소를 표시하는 컴포넌트
+ * @param link 링크 주소
+ * @param onClick 링크 클릭 시 실행할 함수
+ */
+export default function LinkBar({ link, onClick }: LinkBarProps) {
+  return (
+    <div
+      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-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>
+    </div>
+  );
+}

pages/test/index.tsx

@@ -1,3 +1,5 @@
+import LinkBar from '@/components/LinkBar';
+
 export default function Test() {
   const commonCellClass = 'border-r border-gray-300';
   const commonRowClass = 'flex flex-wrap items-end gap-2';
@@ -13,12 +15,10 @@ export default function Test() {
         </thead>
         <tbody>
           <tr>
-            <td className={commonCellClass}>컴포넌트명 입력</td>
-            <td className={commonRowClass}>{/* 컴포넌트를 추가해주세요 */}</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>