Refactor(Callout): 컴포넌트 문서화 및 스타일 개선

apps/docs/src/stories/Callout.stories.tsx

@@ -1,73 +1,146 @@
-import { Callout } from "@sopt-makers/ui";
-import { Meta, StoryObj } from "@storybook/react";
+import { Callout } from '@sopt-makers/ui';
+import { Meta, StoryObj } from '@storybook/react';
+import type React from 'react';
 
-interface CalloutProps {
-  children: React.ReactNode;
-  type: "danger" | "information" | "warning";
-  hasIcon?: boolean;
-  buttonLabel?: string;
-  isButtonDisabled?: boolean;
-  onClick?: () => void;
-}
+type CalloutProps = React.ComponentProps<typeof Callout>;
 
 export default {
-  title: "Components/Callout",
+  title: 'Components/Callout',
   component: Callout,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
-    type: { control: 'radio', options: ['danger', 'information', 'warning'] },
-  }
+    children: {
+      description: '콜아웃의 내용을 작성합니다.',
+      control: 'text',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+    type: {
+      description: '콜아웃의 타입을 지정합니다. 타입에 따라 색상과 아이콘이 변경됩니다.',
+      control: 'radio',
+      options: ['danger', 'information', 'warning'],
+      table: {
+        type: { summary: 'danger | information | warning' },
+      },
+    },
+    hasIcon: {
+      description: '아이콘 표시 여부를 지정합니다. buttonLabel이 있으면 이 옵션과 무관하게 아이콘이 항상 표시됩니다.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    buttonLabel: {
+      description: '버튼의 텍스트를 지정합니다. 지정하면 버튼이 표시됩니다.',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    isButtonDisabled: {
+      description: '버튼의 비활성화 상태를 지정합니다.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onClick: {
+      description: '버튼 클릭 시 실행할 함수를 지정합니다.',
+      action: 'clicked',
+      table: {
+        type: { summary: '() => void' },
+      },
+    },
+  },
 } as Meta<CalloutProps>;
 
+const content = (
+  <>
+    hasIcon 옵션으로 통해 아이콘을 표시할 수 있으며 <br />
+    buttonLabel과 onClick 옵션을 통해 버튼의 text와 클릭 핸들러를 설정할 수 있어요
+  </>
+);
 // danger 콜아웃 스토리
 export const Danger: StoryObj<CalloutProps> = {
   args: {
-    children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요",
-    type: "danger",
+    children: content,
+    type: 'danger',
     hasIcon: false,
   },
 };
 // information 콜아웃 스토리
 export const Information: StoryObj<CalloutProps> = {
   args: {
-    children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요",
-    type: "information",
+    children: 'hasIcon 옵션으로 통해 아이콘을 표시할 수 있으며  ',
+    type: 'information',
     hasIcon: false,
   },
 };
 // warning 콜아웃 스토리
 export const Warning: StoryObj<CalloutProps> = {
   args: {
-    children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요",
-    type: "warning",
+    children: 'buttonLabel과 onClick 옵션을 통해 버튼의 text와 클릭 핸들러를 설정할 수 있어요',
+    type: 'warning',
     hasIcon: false,
   },
 };
+// danger+icon 콜아웃 스토리
+export const MultipleIconCallouts: StoryObj<CalloutProps> = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Callout {...(Danger.args as CalloutProps)} hasIcon />
+      <Callout {...(Information.args as CalloutProps)} hasIcon />
+      <Callout {...(Warning.args as CalloutProps)} hasIcon />
+    </div>
+  ),
+};
 
-// warning+icon+button 콜아웃 스토리
-export const CalloutWithBtn: StoryObj<CalloutProps> = {
+export const MultipleButtonCallouts: StoryObj<CalloutProps> = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Callout {...(Danger.args as CalloutProps)} buttonLabel='hover, press 해보세요!'>
+        <>
+          버튼이 있는 경우 hasIcon과 무관하게 아이콘이 항상 표시돼요. <br />
+          isButtonDisabled 옵션으로 disabled state를 확인해보세요.
+        </>
+      </Callout>
+      <Callout {...(Information.args as CalloutProps)} buttonLabel='hover, press 해보세요!'>
+        <>
+          버튼이 있는 경우 hasIcon과 무관하게 아이콘이 항상 표시돼요. <br />
+          isButtonDisabled 옵션으로 disabled state를 확인해보세요.
+        </>
+      </Callout>
+      <Callout {...(Warning.args as CalloutProps)} buttonLabel='hover, press 해보세요!'>
+        <>
+          버튼이 있는 경우 hasIcon과 무관하게 아이콘이 항상 표시돼요. <br />
+          isButtonDisabled 옵션으로 disabled state를 확인해보세요.
+        </>
+      </Callout>
+    </div>
+  ),
+};
+
+// 여러줄 텍스트 콜아웃 스토리
+export const CalloutWithLongText: StoryObj<CalloutProps> = {
   args: {
-    children: (
-      <>
-        버튼이 있는 경우 hasIcon과 무관하게 아이콘이 항상 표시돼요. <br />
-        isButtonDisabled 옵션으로 disabled state를 확인해보세요.
-      </>
-    ),
-    type: "warning",
+    children:
+      'Facebook 정책이 변경되어, 앞으로 Facebook 로그인이 불가해요. 다른 계정으로 재설정 부탁드려요. Facebook 정책이 변경되어, 앞으로 Facebook 로그인이 불가해요. 다른 계정으로 재설정 부탁드려요.',
+    type: 'information',
     hasIcon: true,
-    buttonLabel: "hover, press 해보세요!",
+    buttonLabel: '소셜 계정 재설정하기',
     isButtonDisabled: false,
   },
 };
 
-// 여러줄 텍스트 콜아웃 스토리
-export const CalloutWithLongText: StoryObj<CalloutProps> = {
+export const CalloutWithShortText: StoryObj<CalloutProps> = {
   args: {
-    children:
-      "Facebook 정책이 변경되어, 앞으로 Facebook 로그인이 불가해요. 다른 계정으로 재설정 부탁드려요. Facebook 정책이 변경되어, 앞으로 Facebook 로그인이 불가해요. 다른 계정으로 재설정 부탁드려요.",
-    type: "information",
+    children: '짧은 텍스트 ',
+    type: 'information',
     hasIcon: true,
-    buttonLabel: "소셜 계정 재설정하기",
+    buttonLabel: '짧은 라벨',
     isButtonDisabled: false,
   },
 };

packages/ui/Callout/Callout.tsx

@@ -1,18 +1,7 @@
-import {
-  IconAlertCircle,
-  IconChevronRight,
-  IconInfoCircle,
-} from "@sopt-makers/icons";
-import type { ReactNode } from "react";
-import {
-  buttonIcon,
-  button,
-  calloutVariant,
-  container,
-  iconVariant,
-  text,
-} from "./style.css";
-import type { CalloutType } from "./types";
+import { IconAlertCircle, IconChevronRight, IconInfoCircle } from '@sopt-makers/icons';
+import type { ReactNode } from 'react';
+import { buttonIcon, button, calloutVariant, container, iconVariant, text } from './style.css';
+import type { CalloutType } from './types';
 
 const icons = {
   danger: IconAlertCircle,
@@ -29,24 +18,18 @@ interface CalloutProps {
 }
 
 function Callout(props: CalloutProps) {
-  const { children, type, hasIcon, buttonLabel, isButtonDisabled, onClick } =
-    props;
+  const { children, type, hasIcon = true, buttonLabel, isButtonDisabled, onClick } = props;
   const Icon = icons[type];
 
   return (
     <aside className={calloutVariant[type]}>
-      {buttonLabel || hasIcon ? <Icon className={iconVariant[type]} /> : null}
+      {buttonLabel || hasIcon ? <Icon aria-hidden='true' className={iconVariant[type]} /> : null}
       <div className={container}>
         <span className={text}>{children}</span>
-        {buttonLabel ? (
-          <button
-            className={button}
-            disabled={isButtonDisabled}
-            onClick={onClick}
-            type="button"
-          >
+        {children && buttonLabel ? (
+          <button className={button} disabled={isButtonDisabled} onClick={onClick} type='button'>
             <span>{buttonLabel}</span>
-            <IconChevronRight className={buttonIcon} />
+            <IconChevronRight aria-hidden='true' className={buttonIcon} />
           </button>
         ) : null}
       </div>

packages/ui/Callout/constants.ts

@@ -1,6 +1,6 @@
-import type { CSSProperties } from "react";
-import theme from "../theme.css";
-import type { CalloutType } from "./types";
+import type { CSSProperties } from 'react';
+import theme from '../theme.css';
+import type { CalloutType } from './types';
 
 export const iconColors: Record<CalloutType, string> = {
   danger: theme.colors.red500,
@@ -18,7 +18,7 @@ export const calloutColors: Record<CalloutType, CSSProperties> = {
     borderColor: theme.colors.blueAlpha600,
   },
   warning: {
-    backgroundColor: "rgba(255, 194, 52, 0.1)",
+    backgroundColor: 'rgba(255, 194, 52, 0.1)',
     borderColor: theme.colors.yellow600,
   },
 };

packages/ui/Callout/index.tsx

@@ -1 +1 @@
-export { default } from "./Callout";
+export { default } from './Callout';

packages/ui/Callout/style.css.ts

@@ -1,47 +1,47 @@
-import { style, styleVariants } from "@vanilla-extract/css";
-import theme from "../theme.css";
-import { calloutColors, iconColors } from "./constants";
+import { style, styleVariants } from '@vanilla-extract/css';
+import theme from '../theme.css';
+import { calloutColors, iconColors } from './constants';
 
 export const container = style({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "flex-start",
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
   gap: 18,
 });
 
 export const text = style({
-  textAlign: "left",
+  textAlign: 'left',
   ...theme.fontsObject.BODY_3_14_M,
   color: theme.colors.gray30,
 });
 
 export const button = style({
-  display: "flex",
-  alignItems: "center",
+  'display': 'flex',
+  'alignItems': 'center',
 
-  paddingBottom: 4,
+  'paddingBottom': 4,
 
-  borderWidth: "0px 0px 0.8px 0px",
-  borderStyle: "solid",
-  borderColor: "transparent",
-  backgroundColor: "transparent",
+  'borderWidth': '0px 0px 0.8px 0px',
+  'borderStyle': 'solid',
+  'borderColor': 'transparent',
+  'backgroundColor': 'transparent',
 
-  cursor: "pointer",
-  color: theme.colors.gray30,
+  'cursor': 'pointer',
+  'color': theme.colors.gray30,
   ...theme.fontsObject.LABEL_4_12_SB,
 
-  ":hover": {
+  ':hover': {
     color: theme.colors.gray50,
     borderColor: theme.colors.gray50,
   },
-  ":active": {
+  ':active': {
     color: theme.colors.gray100,
     borderColor: theme.colors.gray100,
   },
-  ":disabled": {
+  ':disabled': {
     color: theme.colors.gray500,
-    borderColor: "transparent",
-    cursor: "default",
+    borderColor: 'transparent',
+    cursor: 'default',
   },
 });
 
@@ -67,26 +67,22 @@ const iconBase = style({
   width: 20,
 });
 
-export const iconVariant = styleVariants(iconColors, (color) => [
-  iconBase,
-  { color },
-]);
+export const iconVariant = styleVariants(iconColors, (color) => [iconBase, { color }]);
 
 // ▶️ callout styleVariants
 const calloutBase = style({
-  display: "flex",
+  display: 'flex',
   gap: 10,
-  alignItems: "flex-start",
-  padding: "14px 18px",
+  alignItems: 'flex-start',
+  padding: '14px 18px',
 
-  border: "1px solid",
+  minWidth: 358,
+  minHeight: 50,
+  border: '1px solid',
   borderRadius: 10,
 });
 
-export const calloutVariant = styleVariants(
-  calloutColors,
-  ({ backgroundColor, borderColor }) => [
-    calloutBase,
-    { backgroundColor, borderColor },
-  ]
-);
+export const calloutVariant = styleVariants(calloutColors, ({ backgroundColor, borderColor }) => [
+  calloutBase,
+  { backgroundColor, borderColor },
+]);

packages/ui/Callout/types.ts

@@ -1 +1 @@
-export type CalloutType = "danger" | "information" | "warning";
+export type CalloutType = 'danger' | 'information' | 'warning';