Merge pull request #147 from DaleStudy/35-link-component-design

Link component design

Author: hyoseong1994

src/components/Link/Link.test.tsx

@@ -0,0 +1,19 @@
+import { test } from "vitest";
+
+test.todo("renders children correctly");
+
+test.todo("applies the correct tone based on the 'tone' prop");
+
+test.todo("applies the correct font size based on the 'size' prop");
+
+test.todo("applies the correct font weight based on the 'weight' prop");
+
+test.todo("renders with reduced contrast when 'muted' is true");
+
+test.todo("renders with underline when 'underline' is true");
+
+test.todo("forwards additional anchor props like 'href' and 'target'");
+
+test.todo("adds rel='noopener noreferrer' when target is '_blank'");
+
+test.todo("can be used with Icon component");

src/components/Link/Link.tsx

@@ -0,0 +1,20 @@
+import type { AnchorHTMLAttributes, PropsWithChildren } from "react";
+import type { Tone } from "../../tokens/colors";
+import type { FontSize, FontWeight } from "../../tokens/typography";
+
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** 색조 */
+  tone?: Tone;
+  /** 크기 */
+  size?: FontSize;
+  /** 굵기 */
+  weight?: FontWeight;
+  /** 명암비 낮출지 */
+  muted?: boolean;
+  /** 링크에 밑줄 표시 여부 */
+  underline?: boolean;
+}
+
+export function Link({ children }: PropsWithChildren<LinkProps>) {
+  return <>{children}</>;
+}