From 092833155193c07a0ae803beba7fb0b3480f12a1 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Thu, 18 Jun 2026 23:05:30 +0900
Subject: [PATCH 1/8] =?UTF-8?q?=E2=9C=A8=20Feat:=20Spinner=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/spinner/Spinner.tsx | 41 +++++++++++++++++++++++++++++++
 src/shared/ui/spinner/index.ts    |  2 ++
 2 files changed, 43 insertions(+)
 create mode 100644 src/shared/ui/spinner/Spinner.tsx
 create mode 100644 src/shared/ui/spinner/index.ts

diff --git a/src/shared/ui/spinner/Spinner.tsx b/src/shared/ui/spinner/Spinner.tsx
new file mode 100644
index 0000000..a1be846
--- /dev/null
+++ b/src/shared/ui/spinner/Spinner.tsx
@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from 'react';
+
+import { cn } from '@/shared/styles/utils/cn';
+
+type SpinnerProps = HTMLAttributes<HTMLSpanElement>;
+
+/**
+ * ## Spinner
+ *
+ * @description
+ * 비동기 작업이 진행 중임을 시각적으로 표시하는 공통 로딩 컴포넌트입니다.
+ * 단독 상태 안내가 필요한 경우에는 스크린 리더용 문구를 별도로 제공합니다.
+ *
+ * ### 접근성
+ *
+ * Spinner 자체는 장식 요소이므로 스크린 리더에서 제외됩니다.
+ *
+ * @param className - 크기와 색상 등 기본 스타일을 확장할 클래스
+ *
+ * @example
+ * ```tsx
+ * <span role="status">
+ *   <Spinner />
+ *   <span className="sr-only">불러오는 중</span>
+ * </span>
+ * ```
+ */
+export default function Spinner({ className, ...props }: SpinnerProps) {
+  return (
+    <span
+      {...props}
+      aria-hidden="true"
+      className={cn(
+        'size-4 animate-spin rounded-full border-2 border-current border-t-transparent',
+        className
+      )}
+    />
+  );
+}
+
+export type { SpinnerProps };
diff --git a/src/shared/ui/spinner/index.ts b/src/shared/ui/spinner/index.ts
new file mode 100644
index 0000000..0ebfa69
--- /dev/null
+++ b/src/shared/ui/spinner/index.ts
@@ -0,0 +1,2 @@
+export { default as Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';

From 8203c1c1b9a9ca676212123879c3a6fe0be597b6 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Thu, 18 Jun 2026 23:07:45 +0900
Subject: [PATCH 2/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20prop=20typ?=
 =?UTF-8?q?e=20export=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/spinner/Spinner.tsx | 2 --
 src/shared/ui/spinner/index.ts    | 1 -
 2 files changed, 3 deletions(-)

diff --git a/src/shared/ui/spinner/Spinner.tsx b/src/shared/ui/spinner/Spinner.tsx
index a1be846..ef824be 100644
--- a/src/shared/ui/spinner/Spinner.tsx
+++ b/src/shared/ui/spinner/Spinner.tsx
@@ -37,5 +37,3 @@ export default function Spinner({ className, ...props }: SpinnerProps) {
     />
   );
 }
-
-export type { SpinnerProps };
diff --git a/src/shared/ui/spinner/index.ts b/src/shared/ui/spinner/index.ts
index 0ebfa69..a82c400 100644
--- a/src/shared/ui/spinner/index.ts
+++ b/src/shared/ui/spinner/index.ts
@@ -1,2 +1 @@
 export { default as Spinner } from './Spinner';
-export type { SpinnerProps } from './Spinner';

From 7598d013702d9536d6e0123b82e7f0300d986451 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Fri, 19 Jun 2026 01:05:42 +0900
Subject: [PATCH 3/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=86=8D=EC=84=B1=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/styles/globals.css | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/shared/styles/globals.css b/src/shared/styles/globals.css
index b53be8e..d443122 100644
--- a/src/shared/styles/globals.css
+++ b/src/shared/styles/globals.css
@@ -9,11 +9,3 @@ button {
 button:disabled {
   cursor: not-allowed;
 }
-
-button[data-disabled='true'] {
-  cursor: not-allowed;
-}
-
-button[data-loading='true'] {
-  cursor: wait;
-}

From 11fd4c27698a7ce4103bb7ff33a4a2cbc8f20108 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Fri, 19 Jun 2026 01:17:22 +0900
Subject: [PATCH 4/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20Spinner=20?=
 =?UTF-8?q?=EC=86=8D=EC=84=B1=20=ED=83=80=EC=9E=85=20=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

장식용 빈 요소라는 컴포넌트 계약을 명확히 하기 위해 children과 aria-hidden 속성을 외부 props에서 제외했습니다.
---
 src/shared/ui/spinner/Spinner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/ui/spinner/Spinner.tsx b/src/shared/ui/spinner/Spinner.tsx
index ef824be..573ede8 100644
--- a/src/shared/ui/spinner/Spinner.tsx
+++ b/src/shared/ui/spinner/Spinner.tsx
@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'react';
 
 import { cn } from '@/shared/styles/utils/cn';
 
-type SpinnerProps = HTMLAttributes<HTMLSpanElement>;
+type SpinnerProps = Omit<HTMLAttributes<HTMLSpanElement>, 'aria-hidden' | 'children'>;
 
 /**
  * ## Spinner

From b7a08a32081463e87f93187fe6e2b689b7f2f1b2 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Fri, 19 Jun 2026 01:17:47 +0900
Subject: [PATCH 5/8] =?UTF-8?q?=E2=9C=A8=20Feat:=20Button=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

버튼 variant와 size, disabled 및 loading 상태를 공통화했습니다. 아이콘 전용 버튼의 접근성 이름을 타입으로 강제하고 native button의 기본 동작과 확장 가능한 className을 제공합니다.
---
 src/shared/ui/button/Button.tsx        | 69 ++++++++++++++++++++++++++
 src/shared/ui/button/Button.types.ts   | 19 +++++++
 src/shared/ui/button/ButtonContent.tsx | 21 ++++++++
 src/shared/ui/button/buttonVariants.ts | 39 +++++++++++++++
 src/shared/ui/button/index.ts          |  1 +
 5 files changed, 149 insertions(+)
 create mode 100644 src/shared/ui/button/Button.tsx
 create mode 100644 src/shared/ui/button/Button.types.ts
 create mode 100644 src/shared/ui/button/ButtonContent.tsx
 create mode 100644 src/shared/ui/button/buttonVariants.ts
 create mode 100644 src/shared/ui/button/index.ts

diff --git a/src/shared/ui/button/Button.tsx b/src/shared/ui/button/Button.tsx
new file mode 100644
index 0000000..f3d6574
--- /dev/null
+++ b/src/shared/ui/button/Button.tsx
@@ -0,0 +1,69 @@
+import type { ButtonHTMLAttributes } from 'react';
+
+import { cn } from '@/shared/styles/utils/cn';
+
+import ButtonContent from './ButtonContent';
+import { buttonVariants, type ButtonVariantProps } from './buttonVariants';
+
+import type { ButtonAccessibilityProps, ButtonStateProps } from './Button.types';
+
+type ButtonProps = ButtonVariantProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'children' | 'disabled'> &
+  ButtonStateProps &
+  ButtonAccessibilityProps;
+
+/**
+ * ## Button
+ *
+ * @description
+ * 저장, 삭제, 제출처럼 현재 화면에서 동작을 실행할 때 사용하는 공통 버튼 컴포넌트입니다.
+ * 페이지 이동에는 `Button` 대신 `LinkButton`을 사용합니다.
+ *
+ * ### 주요 내용
+ *
+ * `variant`와 `size`로 형태를 제어하며, `isLoading` 상태에서는 중복 실행을 막기 위해 버튼을
+ * 비활성화하고 로딩 표시를 제공합니다. 아이콘만 표시할 때는 `iconOnly`를 사용합니다.
+ *
+ * ### 접근성
+ *
+ * `iconOnly` 버튼에는 동작을 설명하는 `aria-label`을 반드시 전달해야 합니다.
+ *
+ * @param isLoading - 비동기 작업 진행 여부. 활성화하면 버튼이 비활성화됩니다.
+ * @param iconOnly - 텍스트 없이 아이콘만 표시하는 버튼인지 여부
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" isLoading={isSaving} onClick={handleSave}>
+ *   저장하기
+ * </Button>
+ * ```
+ */
+export default function Button({
+  children,
+  className,
+  disabled = false,
+  iconOnly = false,
+  isLoading = false,
+  size,
+  type = 'button',
+  variant,
+  ...buttonProps
+}: ButtonProps) {
+  const isDisabled = disabled || isLoading;
+  const resolvedSize = iconOnly ? 'icon' : size;
+  const buttonClassName = cn(buttonVariants({ variant, size: resolvedSize }), className);
+
+  return (
+    <button
+      {...buttonProps}
+      aria-busy={isLoading || undefined}
+      className={buttonClassName}
+      data-disabled={isDisabled}
+      data-loading={isLoading || undefined}
+      disabled={isDisabled}
+      type={type}
+    >
+      <ButtonContent isLoading={isLoading}>{children}</ButtonContent>
+    </button>
+  );
+}
diff --git a/src/shared/ui/button/Button.types.ts b/src/shared/ui/button/Button.types.ts
new file mode 100644
index 0000000..e7f7488
--- /dev/null
+++ b/src/shared/ui/button/Button.types.ts
@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+interface ButtonStateProps {
+  children: ReactNode;
+  disabled?: boolean;
+  isLoading?: boolean;
+}
+
+type ButtonAccessibilityProps =
+  | {
+      'aria-label': string;
+      iconOnly: true;
+    }
+  | {
+      'aria-label'?: string;
+      iconOnly?: false;
+    };
+
+export type { ButtonAccessibilityProps, ButtonStateProps };
diff --git a/src/shared/ui/button/ButtonContent.tsx b/src/shared/ui/button/ButtonContent.tsx
new file mode 100644
index 0000000..c6a05b5
--- /dev/null
+++ b/src/shared/ui/button/ButtonContent.tsx
@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+import { Spinner } from '@/shared/ui/spinner';
+
+interface ButtonContentProps {
+  children: ReactNode;
+  isLoading: boolean;
+}
+
+export default function ButtonContent({ children, isLoading }: ButtonContentProps) {
+  if (isLoading) {
+    return (
+      <>
+        <Spinner />
+        <span className="sr-only">{children}</span>
+      </>
+    );
+  }
+
+  return <>{children}</>;
+}
diff --git a/src/shared/ui/button/buttonVariants.ts b/src/shared/ui/button/buttonVariants.ts
new file mode 100644
index 0000000..987badc
--- /dev/null
+++ b/src/shared/ui/button/buttonVariants.ts
@@ -0,0 +1,39 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const buttonVariants = cva(
+  [
+    'inline-flex shrink-0 items-center justify-center gap-2 rounded-lg font-medium',
+    'transition-colors duration-150 outline-none select-none whitespace-nowrap',
+    'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-black',
+    'data-[loading=true]:cursor-wait',
+  ],
+  {
+    variants: {
+      variant: {
+        primary:
+          'bg-primary-500 text-white data-[disabled=false]:hover:bg-primary-600 data-[disabled=false]:active:bg-primary-700 disabled:bg-gray-700 aria-disabled:cursor-not-allowed aria-disabled:bg-gray-700',
+        secondary:
+          'border-2 border-gray-300 bg-black text-white data-[disabled=false]:hover:bg-gray-900 data-[disabled=false]:active:bg-gray-800 disabled:border-gray-600 disabled:text-gray-500 aria-disabled:cursor-not-allowed aria-disabled:border-gray-600 aria-disabled:text-gray-500',
+        ghost:
+          'border-2 border-transparent bg-transparent text-white data-[disabled=false]:hover:text-primary-500 data-[disabled=false]:active:bg-primary-600 disabled:text-gray-500 aria-disabled:cursor-not-allowed aria-disabled:text-gray-500',
+        outline:
+          'border-2 border-primary-500 bg-transparent text-primary-500 data-[disabled=false]:hover:bg-primary-300/50 data-[disabled=false]:active:bg-primary-300/60 disabled:border-gray-500 disabled:text-gray-500 aria-disabled:cursor-not-allowed aria-disabled:border-gray-500 aria-disabled:text-gray-500',
+      },
+      size: {
+        sm: 'h-7 w-16 body-14',
+        md: 'h-11 w-88 body-14',
+        lg: 'h-12 w-133 body-16',
+        icon: 'size-10 p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+    },
+  }
+);
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+export { buttonVariants };
+export type { ButtonVariantProps };
diff --git a/src/shared/ui/button/index.ts b/src/shared/ui/button/index.ts
new file mode 100644
index 0000000..eae9c8e
--- /dev/null
+++ b/src/shared/ui/button/index.ts
@@ -0,0 +1 @@
+export { default as Button } from './Button';

From ae70a2bb74f60d7d3ab499ab0ca5ae2ead5bbf92 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Fri, 19 Jun 2026 01:18:15 +0900
Subject: [PATCH 6/8] =?UTF-8?q?=E2=9C=A8=20Feat:=20LinkButton=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

페이지 이동과 사용자 동작의 의미를 분리하기 위해 버튼형 링크를 추가했습니다. 내부 링크는 Next.js Link를 사용하고 외부 링크는 명시적인 external 속성으로 anchor를 렌더링합니다. disabled와 loading 상태에서는 이동과 이벤트 전파를 차단합니다.
---
 src/shared/ui/button/LinkButton.tsx | 128 ++++++++++++++++++++++++++++
 src/shared/ui/button/index.ts       |   1 +
 2 files changed, 129 insertions(+)
 create mode 100644 src/shared/ui/button/LinkButton.tsx

diff --git a/src/shared/ui/button/LinkButton.tsx b/src/shared/ui/button/LinkButton.tsx
new file mode 100644
index 0000000..8c2328d
--- /dev/null
+++ b/src/shared/ui/button/LinkButton.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import type { AnchorHTMLAttributes, MouseEvent } from 'react';
+
+import Link, { type LinkProps } from 'next/link';
+
+import { cn } from '@/shared/styles/utils/cn';
+
+import ButtonContent from './ButtonContent';
+import { buttonVariants, type ButtonVariantProps } from './buttonVariants';
+
+import type { ButtonAccessibilityProps, ButtonStateProps } from './Button.types';
+
+interface InternalLinkProps extends Pick<LinkProps, 'prefetch' | 'replace' | 'onNavigate'> {
+  external?: false;
+  href: string;
+}
+
+interface ExternalLinkProps {
+  external: true;
+  href: string;
+  onNavigate?: never;
+  prefetch?: never;
+  replace?: never;
+}
+
+type LinkButtonProps = ButtonVariantProps &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label' | 'children' | 'href'> &
+  ButtonStateProps &
+  ButtonAccessibilityProps &
+  (InternalLinkProps | ExternalLinkProps);
+
+/**
+ * ## LinkButton
+ *
+ * @description
+ * 페이지 이동이 필요하지만 버튼 형태로 표현해야 할 때 사용하는 공통 링크 컴포넌트입니다.
+ * 내부 경로는 Next.js `Link`, HTTP(S) 외부 URL은 `a` 요소로 렌더링합니다.
+ *
+ * ### 주요 내용
+ *
+ * 외부 URL은 `external`을 반드시 전달하여 네이티브 `a` 요소로 렌더링합니다.
+ *
+ * ### 주의할 점
+ *
+ * 현재 화면에서 동작을 실행하는 용도에는 `LinkButton` 대신 `Button`을 사용합니다.
+ * `disabled` 또는 `isLoading` 상태에서는 링크 이동과 키보드 포커스를 차단합니다.
+ *
+ * @param href - 이동할 내부 경로 또는 HTTP(S) 외부 URL
+ * @param external - 외부 링크일 때 반드시 `true`로 지정하는 값
+ * @param isLoading - 비동기 작업 진행 여부. 활성화하면 링크 이동이 차단됩니다.
+ *
+ * @example
+ * ```tsx
+ * <LinkButton href="/writing" variant="outline">
+ *   자기소개서 목록
+ * </LinkButton>
+ *
+ * <LinkButton external href="https://github.com/Rewrite-Team/Rewrite-FE" target="_blank">
+ *   GitHub로 이동
+ * </LinkButton>
+ * ```
+ */
+export default function LinkButton({
+  children,
+  className,
+  disabled = false,
+  external,
+  href,
+  iconOnly = false,
+  isLoading = false,
+  onClick,
+  onNavigate,
+  prefetch,
+  rel,
+  replace,
+  size,
+  target,
+  variant,
+  ...anchorProps
+}: LinkButtonProps) {
+  const isDisabled = disabled || isLoading;
+  const resolvedSize = iconOnly ? 'icon' : size;
+  const classNames = cn(buttonVariants({ variant, size: resolvedSize }), className);
+  const safeRel = target === '_blank' ? 'noopener noreferrer' : rel;
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    if (isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    onClick?.(event);
+  };
+  const commonProps = {
+    ...anchorProps,
+    'aria-busy': isLoading || undefined,
+    'aria-disabled': isDisabled || undefined,
+    className: classNames,
+    'data-disabled': isDisabled,
+    'data-loading': isLoading || undefined,
+    onClick: handleClick,
+    rel: safeRel,
+    tabIndex: isDisabled ? -1 : anchorProps.tabIndex,
+    target,
+  };
+  const content = <ButtonContent isLoading={isLoading}>{children}</ButtonContent>;
+
+  if (external) {
+    return (
+      <a href={href} {...commonProps}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <Link
+      href={href}
+      onNavigate={onNavigate}
+      prefetch={prefetch}
+      replace={replace}
+      {...commonProps}
+    >
+      {content}
+    </Link>
+  );
+}
diff --git a/src/shared/ui/button/index.ts b/src/shared/ui/button/index.ts
index eae9c8e..7c00691 100644
--- a/src/shared/ui/button/index.ts
+++ b/src/shared/ui/button/index.ts
@@ -1 +1,2 @@
 export { default as Button } from './Button';
+export { default as LinkButton } from './LinkButton';

From 5bd6c177edc9da47aa9df030993536cca8f41b04 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Fri, 19 Jun 2026 01:18:50 +0900
Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=93=9D=20Docs:=20Button=20Storybook?=
 =?UTF-8?q?=20=EC=98=88=EC=A0=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Button의 variant, size, loading, disabled, iconOnly 상태를 문서화했습니다. LinkButton의 내부 경로와 외부 GitHub 이동 예제를 함께 추가했습니다.
---
 src/shared/ui/button/Button.stories.tsx | 109 ++++++++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 src/shared/ui/button/Button.stories.tsx

diff --git a/src/shared/ui/button/Button.stories.tsx b/src/shared/ui/button/Button.stories.tsx
new file mode 100644
index 0000000..41c52b9
--- /dev/null
+++ b/src/shared/ui/button/Button.stories.tsx
@@ -0,0 +1,109 @@
+import { Button, LinkButton } from './index';
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+
+const meta = {
+  title: 'Shared/Button',
+  component: Button,
+  args: {
+    children: '저장하기',
+    size: 'md',
+    variant: 'primary',
+  },
+  argTypes: {
+    size: {
+      control: 'inline-radio',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'inline-radio',
+      options: ['primary', 'secondary', 'ghost', 'outline'],
+    },
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+export const Secondary: Story = {
+  args: {
+    children: '임시 저장',
+    variant: 'secondary',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: 'AI 첨삭 다시 받기',
+    variant: 'ghost',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: '문항 추가',
+    variant: 'outline',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Button size="sm">적용</Button>
+      <Button size="md">다음</Button>
+      <Button size="lg">저장하기</Button>
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  args: {
+    children: '저장하기',
+    isLoading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: '다음',
+    disabled: true,
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    'aria-label': '업로드',
+    children: '+',
+    iconOnly: true,
+    variant: 'outline',
+  },
+};
+
+export const InternalLink: Story = {
+  render: () => (
+    <LinkButton href="/writing" variant="outline">
+      자기소개서 목록
+    </LinkButton>
+  ),
+};
+
+export const ExternalLink: Story = {
+  render: () => (
+    <LinkButton
+      external
+      href="https://github.com/Rewrite-Team/Rewrite-FE"
+      target="_blank"
+      variant="secondary"
+    >
+      GitHub로 이동
+    </LinkButton>
+  ),
+};

From 3ff54a1ab3c656569ab7e3254d78f5a0deacb541 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Fri, 19 Jun 2026 01:39:07 +0900
Subject: [PATCH 8/8] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20LinkButton=20rel=20?=
 =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EB=B3=91=ED=95=A9=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

새 창 링크에서 호출자가 전달한 rel 값을 보존하면서 noopener와
noreferrer를 중복 없이 추가하도록 수정했습니다.
---
 src/shared/ui/button/LinkButton.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/shared/ui/button/LinkButton.tsx b/src/shared/ui/button/LinkButton.tsx
index 8c2328d..5f76e24 100644
--- a/src/shared/ui/button/LinkButton.tsx
+++ b/src/shared/ui/button/LinkButton.tsx
@@ -30,6 +30,12 @@ type LinkButtonProps = ButtonVariantProps &
   ButtonAccessibilityProps &
   (InternalLinkProps | ExternalLinkProps);
 
+const mergeSecurityRel = (rel?: string) => {
+  const relTokens = rel?.split(/\s+/).filter(Boolean) ?? [];
+
+  return [...new Set([...relTokens, 'noopener', 'noreferrer'])].join(' ');
+};
+
 /**
  * ## LinkButton
  *
@@ -82,7 +88,7 @@ export default function LinkButton({
   const isDisabled = disabled || isLoading;
   const resolvedSize = iconOnly ? 'icon' : size;
   const classNames = cn(buttonVariants({ variant, size: resolvedSize }), className);
-  const safeRel = target === '_blank' ? 'noopener noreferrer' : rel;
+  const safeRel = target === '_blank' ? mergeSecurityRel(rel) : rel;
   const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
     if (isDisabled) {
       event.preventDefault();