refactor(ui/react): Text 기능을 상속하는 Link로 개편 (#283)

* refactor(ui/react): Text 기능을 상속하는 Link로 개편

* refactor(ui/react): Toast에 Link 변경사항 반영

* refactor(ui/react): components의 index.ts에 link 제거

packages/ui/react/src/components/index.ts

@@ -2,7 +2,6 @@
 export * from './button';
 export * from './input';
 export * from './layout';
-export * from './link';
 export * from './menu';
 export * from './modal';
 export * from './portal';

packages/ui/react/src/components/toast/toast.tsx

@@ -2,8 +2,7 @@ import { cx } from '@favolink-ui/utils';
 import { useEffect } from 'react';
 import { type Toast, toastStore } from './toast.store';
 import * as styles from './toast.styles.css';
-import { Link } from '../link';
-import { Heading } from '../typography';
+import { Heading, Link } from '../typography';
 
 export type ToastProps = Toast;
 
@@ -32,7 +31,7 @@ export function Toast(props: ToastProps) {
         {message}
       </Heading>
       {link && (
-        <Link color="gray" href={link}>
+        <Link color="gray400" href={link}>
           바로가기
         </Link>
       )}

packages/ui/react/src/components/typography/heading.tsx

@@ -4,7 +4,7 @@ import * as styles from './heading.css';
 import * as commonStyles from './typography.css';
 
 export type HeadingProps = commonStyles.TypographyVariants &
-  HTMLFavolinkProps<'h2'> &
+  HTMLFavolinkProps<'h1'> &
   styles.HeadingVariants;
 
 export const Heading = forwardRef<HeadingProps, 'h1'>(

packages/ui/react/src/components/typography/index.ts

@@ -1,4 +1,4 @@
 /* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */
 export { Heading, type HeadingProps } from './heading';
-
+export { Link, type LinkProps } from './link';
 export { Text, type TextProps } from './text';

packages/ui/react/src/components/typography/link.css.ts

@@ -0,0 +1,34 @@
+import { createVar, style } from '@vanilla-extract/css';
+import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
+
+const textDecorationLine = createVar();
+
+const base = style({
+  textDecorationColor: 'currentcolor',
+  textDecorationLine: 'none',
+  textDecorationStyle: 'solid',
+  vars: {
+    [textDecorationLine]: 'underline',
+  },
+});
+
+export const linkVariants = recipe({
+  base,
+
+  variants: {
+    underline: {
+      always: { textDecorationLine },
+      hover: { ':hover': { textDecorationLine } },
+      none: {},
+    },
+  },
+
+  defaultVariants: {
+    underline: 'hover',
+  },
+});
+
+export type LinkVariants = Exclude<
+  RecipeVariants<typeof linkVariants>,
+  undefined
+>;

packages/ui/react/src/components/typography/link.tsx

@@ -0,0 +1,35 @@
+import {
+  type HTMLFavolinkProps,
+  type RightJoinProps,
+  forwardRef,
+} from '@favolink-ui/system';
+import { cx } from '@favolink-ui/utils';
+import * as styles from './link.css';
+import { Text, type TextProps } from './text';
+
+export type LinkProps = RightJoinProps<
+  Omit<TextProps, 'as'>,
+  Omit<HTMLFavolinkProps<'a'>, 'color'>
+> &
+  styles.LinkVariants;
+
+export const Link = forwardRef<LinkProps, 'a'>(
+  function Link(props, forwardedRef) {
+    const { children, className, asChild, underline, ...restProps } = props;
+
+    return (
+      <Text
+        {...restProps}
+        ref={forwardedRef}
+        asChild
+        className={cx(
+          'favolink-link',
+          styles.linkVariants({ underline }),
+          className,
+        )}
+      >
+        {asChild ? children : <a>{children}</a>}
+      </Text>
+    );
+  },
+);