Merge pull request #288 from DaleStudy/203-apply-link-component-to-website

Link 컴포넌트를 웹사이트에 적용

Author: RiaOh

src/App.tsx

@@ -2,6 +2,7 @@ import logo from "/logo.svg";
 import { css } from "../styled-system/css";
 import { Button } from "./components/Button/Button";
 import { Heading } from "./components/Heading/Heading";
+import { Link } from "./components/Link/Link";
 import { Text } from "./components/Text/Text";
 
 function App() {
@@ -13,42 +14,63 @@ function App() {
       })}
     >
       <header>
-        <a
-          href="/"
+        <Link
+          href={"/"}
           className={css({
             display: "flex",
             gap: "4",
           })}
         >
           <img src={logo} className="logo" alt="logo" />
           달레 UI
-        </a>
+        </Link>
       </header>
       <main>
         <Heading level={1}>Welcome Dale UI!</Heading>
         <section>
           <Heading level={2}>유용한 링크</Heading>
           <ul>
             <li>
-              <a href="https://main--675790d317ba346348aa3490.chromatic.com/">
+              <Link
+                href={"https://main--675790d317ba346348aa3490.chromatic.com/"}
+                underline={false}
+              >
                 스토리북
-              </a>
+              </Link>
             </li>
             <li>
-              <a href="https://github.com/DaleStudy/daleui">깃허브</a>
+              <Link
+                href={"https://github.com/DaleStudy/daleui"}
+                underline={false}
+              >
+                깃허브
+              </Link>
             </li>
             <li>
-              <a href="https://github.com/DaleStudy/daleui/wiki">위키</a>
+              <Link
+                href={"https://github.com/DaleStudy/daleui/wiki"}
+                underline={false}
+              >
+                위키
+              </Link>
             </li>
             <li>
-              <a href="https://github.com/DaleStudy/daleui/discussions">
+              <Link
+                href={"https://github.com/DaleStudy/daleui/discussions"}
+                underline={false}
+              >
                 게시판
-              </a>
+              </Link>
             </li>
             <li>
-              <a href="https://discord.com/channels/775115965964222492/1280152682044063837">
+              <Link
+                href={
+                  "https://discord.com/channels/775115965964222492/1280152682044063837"
+                }
+                underline={false}
+              >
                 채팅방
-              </a>
+              </Link>
             </li>
           </ul>
         </section>

src/components/Link/Link.tsx

@@ -1,9 +1,13 @@
-import { type AnchorHTMLAttributes, type PropsWithChildren } from "react";
+import { type AnchorHTMLAttributes } from "react";
 import type { Tone } from "../../tokens/colors";
 import { css, cva } from "../../../styled-system/css";
 import type { FontSize, FontWeight } from "../../tokens/typography";
 
 interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** 링크 URL (필수) */
+  href: string;
+  /** 링크 내용 (필수) */
+  children: React.ReactNode;
   /** 색조 */
   tone?: Tone;
   /** 크기 */
@@ -25,6 +29,7 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  */
 export function Link({
   children,
+  href,
   tone = "neutral",
   size,
   weight,
@@ -33,7 +38,7 @@ export function Link({
   target,
   rel,
   ...props
-}: PropsWithChildren<LinkProps>) {
+}: LinkProps) {
   return (
     <a
       className={css(
@@ -43,6 +48,7 @@ export function Link({
           fontWeight: weight,
         }),
       )}
+      href={href}
       target={target}
       rel={target === "_blank" ? "noopener noreferrer" : rel}
       {...props}

src/examples/Homepage/Homepage.stories.tsx

@@ -49,7 +49,7 @@ export const Default: StoryObj = {
             aria-label="주요 메뉴"
           >
             {MENU_ITEMS.map((item) => (
-              <Link key={item} underline={false}>
+              <Link key={item} underline={false} href={"#"}>
                 {item}
               </Link>
             ))}