From e7d1199174235af97fbf0484511d98661de91053 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Wed, 24 Jun 2026 23:24:16 +0900
Subject: [PATCH 01/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20?=
 =?UTF-8?q?=ED=8F=BC=20=EB=9D=BC=EB=B2=A8=20=EA=B0=84=EA=B2=A9=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/form-control/FormControlLabel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/ui/form-control/FormControlLabel.tsx b/src/shared/ui/form-control/FormControlLabel.tsx
index 3ffbd94..75aae31 100644
--- a/src/shared/ui/form-control/FormControlLabel.tsx
+++ b/src/shared/ui/form-control/FormControlLabel.tsx
@@ -38,7 +38,7 @@ export function FormControlLabel({ children, className, ...props }: FormControlL
   return (
     <label
       {...props}
-      className={cn('mb-6 w-fit body-18 font-semibold text-white', className)}
+      className={cn('mb-3 w-fit body-18 font-semibold text-white', className)}
       htmlFor={fieldId}
     >
       {children}

From fa72b120f69de8b20f9af957cc536fd4c48f284f Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Wed, 24 Jun 2026 23:29:02 +0900
Subject: [PATCH 02/10] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=ED=99=94=EC=82=B4?=
 =?UTF-8?q?=ED=91=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=83=89=EC=83=81=20?=
 =?UTF-8?q?=EC=83=81=EC=86=8D=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/assets/icons/common/ic-alt-arrow-down.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/assets/icons/common/ic-alt-arrow-down.svg b/src/shared/assets/icons/common/ic-alt-arrow-down.svg
index ed0825f..14f21d0 100644
--- a/src/shared/assets/icons/common/ic-alt-arrow-down.svg
+++ b/src/shared/assets/icons/common/ic-alt-arrow-down.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M11.277 14.972c.362.4 1.084.4 1.446 0l4.549-5.042c.447-.495.022-1.203-.723-1.203H7.451c-.745 0-1.17.708-.723 1.203z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M11.277 14.972c.362.4 1.084.4 1.446 0l4.549-5.042c.447-.495.022-1.203-.723-1.203H7.451c-.745 0-1.17.708-.723 1.203z"/></svg>

From 0276c8cf87319c7f1ab04f9281a6e24ac5def4f3 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Wed, 24 Jun 2026 23:29:40 +0900
Subject: [PATCH 03/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=95=84=EC=BD=94?=
 =?UTF-8?q?=EB=94=94=EC=96=B8=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/accordion/Accordion.tsx        | 161 +++++++++++++++++++
 src/shared/ui/accordion/Accordion.types.ts   |  73 +++++++++
 src/shared/ui/accordion/AccordionContent.tsx |  46 ++++++
 src/shared/ui/accordion/AccordionContext.ts  |  25 +++
 src/shared/ui/accordion/AccordionHeader.tsx  |  34 ++++
 src/shared/ui/accordion/AccordionLabel.tsx   |  59 +++++++
 src/shared/ui/accordion/AccordionTrigger.tsx |  67 ++++++++
 src/shared/ui/accordion/index.ts             |   1 +
 8 files changed, 466 insertions(+)
 create mode 100644 src/shared/ui/accordion/Accordion.tsx
 create mode 100644 src/shared/ui/accordion/Accordion.types.ts
 create mode 100644 src/shared/ui/accordion/AccordionContent.tsx
 create mode 100644 src/shared/ui/accordion/AccordionContext.ts
 create mode 100644 src/shared/ui/accordion/AccordionHeader.tsx
 create mode 100644 src/shared/ui/accordion/AccordionLabel.tsx
 create mode 100644 src/shared/ui/accordion/AccordionTrigger.tsx
 create mode 100644 src/shared/ui/accordion/index.ts

diff --git a/src/shared/ui/accordion/Accordion.tsx b/src/shared/ui/accordion/Accordion.tsx
new file mode 100644
index 0000000..d214d42
--- /dev/null
+++ b/src/shared/ui/accordion/Accordion.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import { useCallback, useId, useMemo, useState } from 'react';
+
+import { cn } from '@/shared/styles/utils/cn';
+
+import { AccordionContent } from './AccordionContent';
+import { AccordionContext } from './AccordionContext';
+import { AccordionHeader } from './AccordionHeader';
+import { AccordionLabel } from './AccordionLabel';
+import { AccordionTrigger } from './AccordionTrigger';
+
+import type { AccordionContextValue, AccordionProps } from './Accordion.types';
+
+/**
+ * ## Accordion
+ *
+ * @description
+ * 하나의 입력 섹션을 접고 펼칠 때 사용하는 공통 Compound Accordion입니다.
+ * 자기소개서 문항, 수정본, 키워드 분석 입력처럼 사용자가 필요한 영역에 집중해야 하는
+ * 화면에서 사용합니다.
+ *
+ * ### 주요 내용
+ *
+ * `open`을 전달하면 controlled 방식으로 동작하고, 생략하면 `defaultOpen`을 기준으로
+ * 내부 상태를 관리합니다. 여러 Accordion 중 하나만 열어야 하는 정책은 페이지나 부모
+ * 컴포넌트에서 `open`과 `onOpenChange`로 제어합니다.
+ *
+ * ### 구조
+ *
+ * Header 조합 Accordion:
+ *
+ * ```tsx
+ * <Accordion defaultOpen>
+ *   <Accordion.Header>
+ *     <Input id="question" required>
+ *       <div className="flex items-center gap-2">
+ *         <Accordion.Trigger aria-label="질문 영역 열기" />
+ *         <Accordion.Label asChild>
+ *           <Input.Label>질문</Input.Label>
+ *         </Accordion.Label>
+ *       </div>
+ *       <Input.Field />
+ *     </Input>
+ *   </Accordion.Header>
+ *   <Accordion.Content>...</Accordion.Content>
+ * </Accordion>
+ * ```
+ *
+ * @param open - 외부에서 열림 상태를 제어할 때 사용하는 controlled 값
+ * @param defaultOpen - uncontrolled 방식에서 최초로 열어둘지 여부
+ * @param onOpenChange - 열림 상태가 바뀔 때 호출되는 콜백
+ * @param collapsible - 열린 Accordion을 다시 닫을 수 있는지 여부
+ * @param disabled - Trigger 동작을 비활성화할지 여부
+ *
+ * @example 기본 입력 섹션
+ * ```tsx
+ * <Accordion defaultOpen>
+ *   <Accordion.Header>
+ *     <Input id="question" required>
+ *       <div className="flex items-center gap-2">
+ *         <Accordion.Trigger aria-label="질문 영역 열기" />
+ *         <Accordion.Label asChild>
+ *           <Input.Label>질문</Input.Label>
+ *         </Accordion.Label>
+ *       </div>
+ *       <Input.Field />
+ *     </Input>
+ *   </Accordion.Header>
+ *   <Accordion.Content>
+ *     <TextArea>
+ *       <TextArea.Label>자기소개서 내용</TextArea.Label>
+ *       <TextArea.Field />
+ *     </TextArea>
+ *   </Accordion.Content>
+ * </Accordion>
+ * ```
+ *
+ * @example controlled Accordion
+ * ```tsx
+ * <Accordion open={isOpen} onOpenChange={setIsOpen}>
+ *   <Accordion.Header>
+ *     <Accordion.Trigger aria-label="답변 영역 열기" />
+ *     <Accordion.Label>답변</Accordion.Label>
+ *   </Accordion.Header>
+ *   <Accordion.Content>
+ *     <TextArea>
+ *       <TextArea.Label>자기소개서 내용</TextArea.Label>
+ *       <TextArea.Field />
+ *     </TextArea>
+ *   </Accordion.Content>
+ * </Accordion>
+ * ```
+ */
+function AccordionRoot({
+  children,
+  className,
+  collapsible = true,
+  defaultOpen = false,
+  disabled = false,
+  onOpenChange,
+  open,
+  ...props
+}: AccordionProps) {
+  const generatedId = useId();
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : uncontrolledOpen;
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  const contextValue = useMemo<AccordionContextValue>(
+    () => ({
+      contentId: `accordion-content-${generatedId}`,
+      disabled,
+      isLockedOpen: isOpen && !collapsible,
+      isOpen,
+      labelId: `accordion-label-${generatedId}`,
+      triggerId: `accordion-trigger-${generatedId}`,
+      toggleOpen: () => {
+        if (disabled || (isOpen && !collapsible)) {
+          return;
+        }
+
+        handleOpenChange(!isOpen);
+      },
+    }),
+    [collapsible, disabled, generatedId, handleOpenChange, isOpen]
+  );
+
+  return (
+    <AccordionContext value={contextValue}>
+      <div
+        {...props}
+        className={cn('flex w-full flex-col overflow-hidden rounded-lg bg-gray-800 p-6', className)}
+        data-disabled={disabled || undefined}
+        data-state={isOpen ? 'open' : 'closed'}
+      >
+        {children}
+      </div>
+    </AccordionContext>
+  );
+}
+
+const Accordion = Object.assign(AccordionRoot, {
+  Content: AccordionContent,
+  Header: AccordionHeader,
+  Label: AccordionLabel,
+  Trigger: AccordionTrigger,
+});
+
+export { Accordion };
diff --git a/src/shared/ui/accordion/Accordion.types.ts b/src/shared/ui/accordion/Accordion.types.ts
new file mode 100644
index 0000000..e418b59
--- /dev/null
+++ b/src/shared/ui/accordion/Accordion.types.ts
@@ -0,0 +1,73 @@
+import type {
+  ComponentPropsWithRef,
+  ComponentPropsWithoutRef,
+  ReactElement,
+  ReactNode,
+} from 'react';
+
+/** Accordion Root가 공유하는 공통 props입니다. */
+interface AccordionProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+  children: ReactNode;
+  collapsible?: boolean;
+  defaultOpen?: boolean;
+  disabled?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  open?: boolean;
+}
+
+/** Trigger와 항상 노출할 요약 영역을 함께 묶는 Header props입니다. */
+interface AccordionHeaderProps extends ComponentPropsWithoutRef<'div'> {
+  children: ReactNode;
+}
+
+interface AccordionLabelChildProps {
+  className?: string;
+  id?: string;
+}
+
+type AccordionLabelBaseProps = Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'id'>;
+
+/** Content region의 접근성 이름으로 연결되는 섹션 Label props입니다. */
+type AccordionLabelProps =
+  | (AccordionLabelBaseProps & {
+      asChild?: false;
+      children: ReactNode;
+    })
+  | (AccordionLabelBaseProps & {
+      asChild: true;
+      children: ReactElement<AccordionLabelChildProps>;
+    });
+
+/** 섹션을 열고 닫는 button 기반 Trigger props입니다. */
+interface AccordionTriggerProps extends Omit<
+  ComponentPropsWithRef<'button'>,
+  'aria-controls' | 'aria-expanded' | 'children' | 'disabled' | 'type'
+> {
+  'aria-label': string;
+}
+
+/** 열림 상태에 따라 확장되는 Content 영역 props입니다. */
+interface AccordionContentProps extends ComponentPropsWithoutRef<'div'> {
+  children: ReactNode;
+}
+
+/** Root가 Compound 하위 컴포넌트에 제공하는 상태와 동작입니다. */
+interface AccordionContextValue {
+  contentId: string;
+  disabled: boolean;
+  isLockedOpen: boolean;
+  isOpen: boolean;
+  labelId: string;
+  triggerId: string;
+  toggleOpen: () => void;
+}
+
+export type {
+  AccordionContentProps,
+  AccordionContextValue,
+  AccordionHeaderProps,
+  AccordionLabelChildProps,
+  AccordionLabelProps,
+  AccordionProps,
+  AccordionTriggerProps,
+};
diff --git a/src/shared/ui/accordion/AccordionContent.tsx b/src/shared/ui/accordion/AccordionContent.tsx
new file mode 100644
index 0000000..78da7b9
--- /dev/null
+++ b/src/shared/ui/accordion/AccordionContent.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { cn } from '@/shared/styles/utils/cn';
+
+import { useAccordionContext } from './AccordionContext';
+
+import type { AccordionContentProps } from './Accordion.types';
+
+/**
+ * ## Accordion.Content
+ *
+ * @description
+ * Accordion 섹션이 열렸을 때 표시되는 본문 영역입니다. Input, TextArea, 안내 문구 등
+ * 섹션 안의 실제 콘텐츠를 children으로 배치합니다.
+ *
+ * ### 접근성
+ *
+ * Header의 보이는 Label과 `aria-labelledby`로 연결된 `region`을 렌더링합니다. 닫힌 상태에서는
+ * `aria-hidden`과 `inert`를 적용해 스크린 리더와 키보드 탐색에서 제외하면서도 높이
+ * 애니메이션이 자연스럽게 동작하도록 DOM은 유지합니다.
+ */
+export function AccordionContent({ children, className, ...props }: AccordionContentProps) {
+  const { contentId, isOpen, labelId } = useAccordionContext();
+
+  return (
+    <div
+      {...props}
+      aria-hidden={!isOpen || undefined}
+      aria-labelledby={labelId}
+      className={cn(
+        'grid transition-[grid-template-rows,opacity] duration-200 ease-out motion-reduce:transition-none',
+        isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        isOpen ? 'opacity-100' : 'opacity-0',
+        className
+      )}
+      data-state={isOpen ? 'open' : 'closed'}
+      id={contentId}
+      inert={!isOpen ? true : undefined}
+      role="region"
+    >
+      <div className="min-h-0 overflow-hidden">
+        <div className="flex flex-col gap-8">{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/shared/ui/accordion/AccordionContext.ts b/src/shared/ui/accordion/AccordionContext.ts
new file mode 100644
index 0000000..36599be
--- /dev/null
+++ b/src/shared/ui/accordion/AccordionContext.ts
@@ -0,0 +1,25 @@
+import { createContext, use } from 'react';
+
+import type { AccordionContextValue } from './Accordion.types';
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+/**
+ * ## useAccordionContext
+ *
+ * @description
+ * Accordion Root가 제공하는 열림 상태, 연결 id, 토글 동작을 읽는 내부 훅입니다.
+ * Compound 하위 컴포넌트가 Root 밖에서 사용되는 실수를 빠르게 드러내기 위해 context가
+ * 없으면 명시적인 에러를 발생시킵니다.
+ */
+export function useAccordionContext() {
+  const context = use(AccordionContext);
+
+  if (!context) {
+    throw new Error('Accordion compound components must be used within Accordion.');
+  }
+
+  return context;
+}
+
+export { AccordionContext };
diff --git a/src/shared/ui/accordion/AccordionHeader.tsx b/src/shared/ui/accordion/AccordionHeader.tsx
new file mode 100644
index 0000000..92ab435
--- /dev/null
+++ b/src/shared/ui/accordion/AccordionHeader.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { cn } from '@/shared/styles/utils/cn';
+
+import { useAccordionContext } from './AccordionContext';
+
+import type { AccordionHeaderProps } from './Accordion.types';
+
+/**
+ * ## Accordion.Header
+ *
+ * @description
+ * Trigger와 닫힌 상태에서도 노출할 요약 입력 영역을 하나의 헤더로 묶는 선택적 Compound
+ * 컴포넌트입니다. 질문 input처럼 항상 보여야 하는 필드가 있을 때 사용합니다.
+ *
+ * ### 접근성
+ *
+ * Header 자체는 상호작용 요소가 아닙니다. 열림/닫힘 동작은 내부의 `Accordion.Trigger`가
+ * 담당하며, input과 button 같은 요소는 Trigger 밖에 배치해야 합니다.
+ */
+export function AccordionHeader({ children, className, ...props }: AccordionHeaderProps) {
+  const { disabled, isOpen } = useAccordionContext();
+
+  return (
+    <div
+      {...props}
+      className={cn(isOpen ? 'pb-8' : undefined, className)}
+      data-disabled={disabled || undefined}
+      data-state={isOpen ? 'open' : 'closed'}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/shared/ui/accordion/AccordionLabel.tsx b/src/shared/ui/accordion/AccordionLabel.tsx
new file mode 100644
index 0000000..e566677
--- /dev/null
+++ b/src/shared/ui/accordion/AccordionLabel.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { Children, cloneElement, isValidElement } from 'react';
+import type { ReactElement } from 'react';
+
+import { cn } from '@/shared/styles/utils/cn';
+
+import { useAccordionContext } from './AccordionContext';
+
+import type { AccordionLabelChildProps, AccordionLabelProps } from './Accordion.types';
+
+/**
+ * ## Accordion.Label
+ *
+ * @description
+ * Accordion Content region의 접근성 이름으로 연결되는 섹션 Label입니다.
+ * `Accordion.Content`가 `aria-labelledby`로 참조할 id를 자동으로 적용합니다.
+ * 실제 입력 필드의 Label이 섹션 제목이기도 한 경우 `asChild`로 `Input.Label` 또는
+ * `TextArea.Label`을 전달합니다.
+ *
+ * @param asChild - 자식 컴포넌트에 Accordion Label 속성을 위임할지 여부
+ * @param children - Accordion 섹션 제목
+ * @param className - Label의 기본 스타일을 확장하는 클래스 이름
+ */
+export function AccordionLabel({
+  asChild = false,
+  children,
+  className,
+  ...props
+}: AccordionLabelProps) {
+  const { labelId } = useAccordionContext();
+  const labelClassName = cn('mb-0 w-fit body-18 font-semibold text-current', className);
+
+  if (asChild) {
+    const childCount = Children.count(children);
+
+    if (childCount !== 1) {
+      throw new Error('Accordion.Label with asChild must receive exactly one React element child.');
+    }
+
+    const child = Children.only(children);
+
+    if (!isValidElement<AccordionLabelChildProps>(child)) {
+      throw new Error('Accordion.Label with asChild must receive a valid React element child.');
+    }
+
+    return cloneElement(child as ReactElement<AccordionLabelChildProps>, {
+      ...(props as AccordionLabelChildProps),
+      className: cn(labelClassName, child.props.className),
+      id: labelId,
+    });
+  }
+
+  return (
+    <span {...props} className={labelClassName} id={labelId}>
+      {children}
+    </span>
+  );
+}
diff --git a/src/shared/ui/accordion/AccordionTrigger.tsx b/src/shared/ui/accordion/AccordionTrigger.tsx
new file mode 100644
index 0000000..2d48ea9
--- /dev/null
+++ b/src/shared/ui/accordion/AccordionTrigger.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { AltArrowDownIcon } from '@/shared/assets/icons/common';
+import { cn } from '@/shared/styles/utils/cn';
+
+import { useAccordionContext } from './AccordionContext';
+
+import type { AccordionTriggerProps } from './Accordion.types';
+
+/**
+ * ## Accordion.Trigger
+ *
+ * @description
+ * Accordion 섹션을 열고 닫는 아이콘 button 컴포넌트입니다. Header 안에서 Label과 함께
+ * 배치해 섹션의 조작 지점을 만듭니다.
+ *
+ * ### 접근성
+ *
+ * `aria-expanded`와 `aria-controls`를 자동으로 설정해 Content와 연결합니다.
+ * input이나 button 같은 요소는 Trigger 안에 넣지 말고 `Accordion.Header`에서 Trigger 밖에
+ * 배치합니다.
+ *
+ */
+export function AccordionTrigger({ className, onClick, ref, ...props }: AccordionTriggerProps) {
+  const { contentId, disabled, isLockedOpen, isOpen, toggleOpen, triggerId } =
+    useAccordionContext();
+  const isAriaDisabled = disabled || isLockedOpen;
+
+  const handleClick: NonNullable<AccordionTriggerProps['onClick']> = (event) => {
+    onClick?.(event);
+
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+
+    toggleOpen();
+  };
+
+  return (
+    <button
+      {...props}
+      aria-controls={contentId}
+      aria-disabled={isAriaDisabled || undefined}
+      aria-expanded={isOpen}
+      className={cn(
+        'group inline-flex size-6 shrink-0 items-center justify-center bg-transparent p-0 text-gray-50 transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+        disabled ? 'text-gray-400' : undefined,
+        className
+      )}
+      data-state={isOpen ? 'open' : 'closed'}
+      disabled={disabled}
+      id={triggerId}
+      onClick={handleClick}
+      ref={ref}
+      type="button"
+    >
+      <AltArrowDownIcon
+        aria-hidden="true"
+        className={cn(
+          'size-6 shrink-0 text-gray-50 transition-transform duration-200',
+          isOpen ? 'rotate-0' : '-rotate-90',
+          disabled ? 'text-gray-400' : 'group-hover:text-primary-500'
+        )}
+      />
+    </button>
+  );
+}
diff --git a/src/shared/ui/accordion/index.ts b/src/shared/ui/accordion/index.ts
new file mode 100644
index 0000000..feee0c4
--- /dev/null
+++ b/src/shared/ui/accordion/index.ts
@@ -0,0 +1 @@
+export { Accordion } from './Accordion';

From 91b745d2fa0148dc2c45e8ef4fe88c354a88e79d Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Wed, 24 Jun 2026 23:30:19 +0900
Subject: [PATCH 04/10] =?UTF-8?q?=F0=9F=93=9D=20Docs:=20=EC=95=84=EC=BD=94?=
 =?UTF-8?q?=EB=94=94=EC=96=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20?=
 =?UTF-8?q?=EC=98=88=EC=8B=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/accordion/Accordion.stories.tsx | 314 ++++++++++++++++++
 1 file changed, 314 insertions(+)
 create mode 100644 src/shared/ui/accordion/Accordion.stories.tsx

diff --git a/src/shared/ui/accordion/Accordion.stories.tsx b/src/shared/ui/accordion/Accordion.stories.tsx
new file mode 100644
index 0000000..2760ec6
--- /dev/null
+++ b/src/shared/ui/accordion/Accordion.stories.tsx
@@ -0,0 +1,314 @@
+import { useState } from 'react';
+
+import { Button } from '@/shared/ui/button';
+import { Input } from '@/shared/ui/input';
+import { TextArea } from '@/shared/ui/textarea';
+
+import { Accordion } from './index';
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+
+interface AccordionPlaygroundProps {
+  disabled: boolean;
+}
+
+interface ExclusiveAccordionExampleProps {
+  disabled?: boolean;
+}
+
+function ExclusiveAccordionExample({ disabled = false }: ExclusiveAccordionExampleProps) {
+  const [openValue, setOpenValue] = useState<string | undefined>('first');
+
+  const handleOpenChange = (value: string) => (open: boolean) => {
+    setOpenValue(open ? value : undefined);
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Accordion
+        disabled={disabled}
+        onOpenChange={handleOpenChange('first')}
+        open={openValue === 'first'}
+      >
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="첫 번째 섹션 영역 열기" />
+            <Accordion.Label>첫 번째 섹션</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <p className="m-0 body-14 text-gray-100">처음에는 이 Accordion만 열린 상태입니다.</p>
+        </Accordion.Content>
+      </Accordion>
+
+      <Accordion
+        disabled={disabled}
+        onOpenChange={handleOpenChange('second')}
+        open={openValue === 'second'}
+      >
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="두 번째 섹션 영역 열기" />
+            <Accordion.Label>두 번째 섹션</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <p className="m-0 body-14 text-gray-100">
+            이 Accordion을 열면 첫 번째 Accordion은 닫힙니다.
+          </p>
+        </Accordion.Content>
+      </Accordion>
+
+      <Accordion
+        disabled={disabled}
+        onOpenChange={handleOpenChange('third')}
+        open={openValue === 'third'}
+      >
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="세 번째 섹션 영역 열기" />
+            <Accordion.Label>세 번째 섹션</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <p className="m-0 body-14 text-gray-100">
+            독립된 Accordion들이 하나의 exclusive 그룹처럼 동작합니다.
+          </p>
+        </Accordion.Content>
+      </Accordion>
+    </div>
+  );
+}
+
+function CoverLetterInputSections() {
+  return (
+    <Accordion defaultOpen>
+      <Accordion.Header>
+        <Input id="storybook-question" required>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="질문 영역 열기" />
+            <Accordion.Label asChild>
+              <Input.Label>질문</Input.Label>
+            </Accordion.Label>
+          </div>
+          <div className="pt-3">
+            <Input.Field aria-label="질문" placeholder="이름이 무엇입니까?" />
+            <Input.ErrorMessage>질문을 입력해 주세요.</Input.ErrorMessage>
+          </div>
+        </Input>
+      </Accordion.Header>
+
+      <Accordion.Content>
+        <TextArea id="storybook-original-answer" required>
+          <TextArea.Label>내가 쓴 자기소개서</TextArea.Label>
+          <TextArea.Field placeholder="이사람입니다람쥐~" recommendedLength={700} showCount />
+          <TextArea.ErrorMessage>자기소개서 내용을 입력해 주세요.</TextArea.ErrorMessage>
+        </TextArea>
+
+        <TextArea id="storybook-diff">
+          <TextArea.Label>Diff</TextArea.Label>
+          <TextArea.Field placeholder="이사람입니다람쥐~" />
+          <TextArea.ErrorMessage />
+        </TextArea>
+
+        <TextArea id="storybook-final-answer" required>
+          <div className="flex items-end justify-between gap-3">
+            <div>
+              <TextArea.Label className="mb-0">최종 작성본</TextArea.Label>
+              <p className="mt-1 mb-0 body-12 text-gray-100">
+                첨삭 내용을 참고하여 최종 작성본을 완성해 보세요.
+              </p>
+            </div>
+            <Button size="sm" type="button">
+              저장
+            </Button>
+          </div>
+          <div className="pt-3">
+            <TextArea.Field placeholder="이사람입니다람쥐~" recommendedLength={700} showCount />
+          </div>
+          <TextArea.ErrorMessage>최종 작성본을 입력해 주세요.</TextArea.ErrorMessage>
+        </TextArea>
+      </Accordion.Content>
+    </Accordion>
+  );
+}
+
+function IndependentControlledAccordionExample() {
+  const [isProfileOpen, setIsProfileOpen] = useState(true);
+  const [isResultOpen, setIsResultOpen] = useState(true);
+
+  return (
+    <div className="flex w-full flex-col gap-6">
+      <Accordion onOpenChange={setIsProfileOpen} open={isProfileOpen}>
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="프로필 입력 영역 열기" />
+            <Accordion.Label>프로필 입력</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <Input id="controlled-profile-title">
+            <Input.Label>자기소개서 제목</Input.Label>
+            <Input.Field placeholder="카카오 자기소개서" />
+            <Input.ErrorMessage />
+          </Input>
+        </Accordion.Content>
+      </Accordion>
+
+      <Accordion onOpenChange={setIsResultOpen} open={isResultOpen}>
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="분석 결과 영역 열기" />
+            <Accordion.Label>분석 결과</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <TextArea id="controlled-analysis-result">
+            <TextArea.Label>키워드 분석 메모</TextArea.Label>
+            <TextArea.Field placeholder="분석 결과를 메모해 주세요." />
+            <TextArea.ErrorMessage />
+          </TextArea>
+        </Accordion.Content>
+      </Accordion>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Shared/Accordion',
+  component: Accordion,
+  args: {
+    disabled: false,
+  },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: '전체 Accordion 비활성화 여부',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-200 max-w-[calc(100vw-2rem)] p-3">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<AccordionPlaygroundProps>;
+
+export const ExclusiveControlled: Story = {
+  render: ({ disabled }) => <ExclusiveAccordionExample disabled={disabled} />,
+};
+
+export const Independent: Story = {
+  render: ({ disabled }) => (
+    <div className="flex flex-col gap-6">
+      <Accordion defaultOpen disabled={disabled}>
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="질문 영역 열기" />
+            <Accordion.Label>질문</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <p className="m-0 body-14 text-gray-100">첫 번째 Accordion의 질문 영역입니다.</p>
+        </Accordion.Content>
+      </Accordion>
+
+      <Accordion defaultOpen disabled={disabled}>
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="답변 영역 열기" />
+            <Accordion.Label>답변</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <p className="m-0 body-14 text-gray-100">두 번째 Accordion의 답변 영역입니다.</p>
+        </Accordion.Content>
+      </Accordion>
+
+      <Accordion defaultOpen disabled={disabled}>
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="최종 작성본 영역 열기" />
+            <Accordion.Label>최종 작성본</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <p className="m-0 body-14 text-gray-100">세 번째 Accordion의 최종 작성본 영역입니다.</p>
+        </Accordion.Content>
+      </Accordion>
+    </div>
+  ),
+};
+
+export const DefaultOpen: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Accordion>
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="질문 영역 열기" />
+            <Accordion.Label>질문</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <p className="m-0 body-14 text-gray-100">defaultOpen이 없어 닫힌 상태로 시작합니다.</p>
+        </Accordion.Content>
+      </Accordion>
+
+      <Accordion defaultOpen>
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="내가 쓴 자기소개서 영역 열기" />
+            <Accordion.Label>내가 쓴 자기소개서</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <p className="m-0 body-14 text-gray-100">defaultOpen으로 열린 상태를 지정합니다.</p>
+        </Accordion.Content>
+      </Accordion>
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => <IndependentControlledAccordionExample />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Accordion defaultOpen>
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-white">
+            <Accordion.Trigger aria-label="활성 섹션 영역 열기" />
+            <Accordion.Label>활성 섹션</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <p className="m-0 body-14 text-gray-100">클릭과 키보드 입력이 가능합니다.</p>
+        </Accordion.Content>
+      </Accordion>
+
+      <Accordion disabled>
+        <Accordion.Header>
+          <div className="flex items-center gap-2 text-gray-400">
+            <Accordion.Trigger aria-label="비활성 섹션 영역 열기" />
+            <Accordion.Label>비활성 섹션</Accordion.Label>
+          </div>
+        </Accordion.Header>
+        <Accordion.Content>
+          <p className="m-0 body-14 text-gray-100">비활성 섹션은 열리지 않습니다.</p>
+        </Accordion.Content>
+      </Accordion>
+    </div>
+  ),
+};
+
+export const CoverLetterInputs: Story = {
+  render: () => <CoverLetterInputSections />,
+};

From d22f0a3276d78d153ae9cd99920a8dbc3e87810a Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Wed, 24 Jun 2026 23:30:37 +0900
Subject: [PATCH 05/10] =?UTF-8?q?=F0=9F=93=9D=20Docs:=20=EC=9E=85=EB=A0=A5?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=98=88=EC=8B=9C=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/input/Input.stories.tsx       | 186 ++++++--------------
 src/shared/ui/textarea/TextArea.stories.tsx | 169 ++++++++----------
 2 files changed, 124 insertions(+), 231 deletions(-)

diff --git a/src/shared/ui/input/Input.stories.tsx b/src/shared/ui/input/Input.stories.tsx
index cf7b528..93aed84 100644
--- a/src/shared/ui/input/Input.stories.tsx
+++ b/src/shared/ui/input/Input.stories.tsx
@@ -7,53 +7,13 @@ import { FormField } from '@/shared/ui/form-field';
 
 import { Input } from './index';
 
-import type { InputType } from './Input.types';
 import type { Meta, StoryObj } from '@storybook/nextjs';
 
-interface InputPlaygroundProps {
-  className: string;
-  defaultValue: string;
-  disabled: boolean;
-  errorMessage: string;
-  id: string;
-  invalid: boolean;
-  label: string;
-  placeholder: string;
-  required: boolean;
-  type: InputType;
-}
-
 interface ExampleFormValues {
   jobUrl: string;
   title: string;
 }
 
-function InputPlayground({
-  className,
-  defaultValue,
-  disabled,
-  errorMessage,
-  id,
-  invalid,
-  label,
-  placeholder,
-  required,
-  type,
-}: InputPlaygroundProps) {
-  return (
-    <Input className={className} disabled={disabled} id={id} invalid={invalid} required={required}>
-      <Input.Label>{label}</Input.Label>
-      <Input.Field
-        defaultValue={defaultValue || undefined}
-        key={`${type}-${defaultValue}`}
-        placeholder={placeholder}
-        type={type}
-      />
-      <Input.ErrorMessage>{errorMessage}</Input.ErrorMessage>
-    </Input>
-  );
-}
-
 function ReactHookFormExample() {
   const [submittedValues, setSubmittedValues] = useState<ExampleFormValues | null>(null);
   const { control, handleSubmit } = useForm<ExampleFormValues>({
@@ -122,61 +82,9 @@ function ReactHookFormExample() {
 
 const meta = {
   title: 'Shared/Input',
-  component: InputPlayground,
+  component: Input,
   args: {
-    className: '',
-    defaultValue: '',
-    disabled: false,
-    errorMessage: '입력값을 확인해 주세요.',
-    id: 'input-playground',
-    invalid: false,
-    label: '자기소개서 제목',
-    placeholder: '카카오 자기소개서',
-    required: false,
-    type: 'text',
-  },
-  argTypes: {
-    className: {
-      control: 'text',
-      description: 'Input Root의 기본 스타일을 확장하는 클래스 이름',
-    },
-    defaultValue: {
-      control: 'text',
-      description: 'Field의 초기 입력값',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Field 입력과 포커스 차단 여부',
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'invalid 상태에서 표시할 오류 문구',
-    },
-    id: {
-      control: 'text',
-      description: 'Label과 접근성 문구 연결에 사용하는 Field id',
-    },
-    invalid: {
-      control: 'boolean',
-      description: '유효성 검증 오류 상태',
-    },
-    label: {
-      control: 'text',
-      description: 'Field의 목적을 설명하는 Label',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Field 내부에 표시되는 짧은 입력 예시',
-    },
-    required: {
-      control: 'boolean',
-      description: '필수 입력 여부',
-    },
-    type: {
-      control: 'inline-radio',
-      description: 'Field의 HTML input 타입',
-      options: ['text', 'number', 'url'],
-    },
+    children: null,
   },
   decorators: [
     (Story) => (
@@ -185,66 +93,80 @@ const meta = {
       </div>
     ),
   ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Label, Field, ErrorMessage를 조합하는 Compound Input입니다. 버튼은 Input.FieldGroup 안에서 함께 구성하며, 폼 상태는 FormField를 통해 React Hook Form과 연결합니다.',
-      },
-    },
-  },
-} satisfies Meta<typeof InputPlayground>;
+} satisfies Meta<typeof Input>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  render: () => (
+    <Input id="input-default">
+      <Input.Label>자기소개서 제목</Input.Label>
+      <Input.Field placeholder="카카오 자기소개서" />
+      <Input.ErrorMessage>입력값을 확인해 주세요.</Input.ErrorMessage>
+    </Input>
+  ),
+};
 
 export const Required: Story = {
-  args: {
-    required: true,
-  },
+  render: () => (
+    <Input id="input-required" required>
+      <Input.Label>자기소개서 제목</Input.Label>
+      <Input.Field placeholder="카카오 자기소개서" />
+      <Input.ErrorMessage>입력값을 확인해 주세요.</Input.ErrorMessage>
+    </Input>
+  ),
 };
 
 export const Text: Story = {
-  args: {
-    label: '회사명',
-    placeholder: '지원할 회사명',
-    type: 'text',
-  },
+  render: () => (
+    <Input id="input-text">
+      <Input.Label>회사명</Input.Label>
+      <Input.Field placeholder="지원할 회사명" type="text" />
+      <Input.ErrorMessage>회사명을 입력해 주세요.</Input.ErrorMessage>
+    </Input>
+  ),
 };
 
 export const Number: Story = {
-  args: {
-    label: '제한 글자 수',
-    placeholder: '1000',
-    type: 'number',
-  },
+  render: () => (
+    <Input id="input-number">
+      <Input.Label>제한 글자 수</Input.Label>
+      <Input.Field placeholder="1000" type="number" />
+      <Input.ErrorMessage>0 이상의 글자 수를 입력해 주세요.</Input.ErrorMessage>
+    </Input>
+  ),
 };
 
 export const Url: Story = {
-  args: {
-    label: '채용 공고 링크',
-    placeholder: 'https://example.com/jobs/1',
-    type: 'url',
-  },
+  render: () => (
+    <Input id="input-url">
+      <Input.Label>채용 공고 링크</Input.Label>
+      <Input.Field placeholder="https://example.com/jobs/1" type="url" />
+      <Input.ErrorMessage>올바른 URL을 입력해 주세요.</Input.ErrorMessage>
+    </Input>
+  ),
 };
 
 export const Disabled: Story = {
-  args: {
-    defaultValue: '카카오 자기소개서',
-    disabled: true,
-  },
+  render: () => (
+    <Input disabled id="input-disabled">
+      <Input.Label>자기소개서 제목</Input.Label>
+      <Input.Field defaultValue="카카오 자기소개서" />
+      <Input.ErrorMessage>입력값을 확인해 주세요.</Input.ErrorMessage>
+    </Input>
+  ),
 };
 
 export const WithError: Story = {
-  args: {
-    errorMessage: '제목을 입력해 주세요.',
-    invalid: true,
-    placeholder: '',
-    required: true,
-  },
+  render: () => (
+    <Input id="input-error" invalid required>
+      <Input.Label>자기소개서 제목</Input.Label>
+      <Input.Field placeholder="" />
+      <Input.ErrorMessage>제목을 입력해 주세요.</Input.ErrorMessage>
+    </Input>
+  ),
 };
 
 export const WithButton: Story = {
diff --git a/src/shared/ui/textarea/TextArea.stories.tsx b/src/shared/ui/textarea/TextArea.stories.tsx
index e8b4aa5..44027c4 100644
--- a/src/shared/ui/textarea/TextArea.stories.tsx
+++ b/src/shared/ui/textarea/TextArea.stories.tsx
@@ -9,52 +9,10 @@ import { TextArea } from './index';
 
 import type { Meta, StoryObj } from '@storybook/nextjs';
 
-interface TextAreaPlaygroundProps {
-  defaultValue: string;
-  disabled: boolean;
-  errorMessage: string;
-  invalid: boolean;
-  label: string;
-  length: number;
-  lengthType: 'max' | 'recommended';
-  placeholder: string;
-  required: boolean;
-  showCount: boolean;
-}
-
 interface ExampleFormValues {
   answer: string;
 }
 
-function TextAreaPlayground({
-  defaultValue,
-  disabled,
-  errorMessage,
-  invalid,
-  label,
-  length,
-  lengthType,
-  placeholder,
-  required,
-  showCount,
-}: TextAreaPlaygroundProps) {
-  const lengthProps = lengthType === 'max' ? { maxLength: length } : { recommendedLength: length };
-
-  return (
-    <TextArea disabled={disabled} invalid={invalid} required={required}>
-      <TextArea.Label>{label}</TextArea.Label>
-      <TextArea.Field
-        defaultValue={defaultValue || undefined}
-        key={defaultValue}
-        placeholder={placeholder}
-        showCount={showCount}
-        {...lengthProps}
-      />
-      <TextArea.ErrorMessage>{errorMessage}</TextArea.ErrorMessage>
-    </TextArea>
-  );
-}
-
 function ReactHookFormExample() {
   const [submittedValue, setSubmittedValue] = useState('');
   const { control, handleSubmit } = useForm<ExampleFormValues>({
@@ -101,33 +59,9 @@ function ReactHookFormExample() {
 
 const meta = {
   title: 'Shared/TextArea',
-  component: TextAreaPlayground,
+  component: TextArea,
   args: {
-    defaultValue: '',
-    disabled: false,
-    errorMessage: '자기소개서 내용을 입력해 주세요.',
-    invalid: false,
-    label: '자기소개서 내용',
-    length: 1000,
-    lengthType: 'recommended',
-    placeholder: '자기소개서 내용을 입력해 주세요.',
-    required: false,
-    showCount: true,
-  },
-  argTypes: {
-    defaultValue: { control: 'text' },
-    disabled: { control: 'boolean' },
-    errorMessage: { control: 'text' },
-    invalid: { control: 'boolean' },
-    label: { control: 'text' },
-    length: { control: 'number' },
-    lengthType: {
-      control: 'inline-radio',
-      options: ['recommended', 'max'],
-    },
-    placeholder: { control: 'text' },
-    required: { control: 'boolean' },
-    showCount: { control: 'boolean' },
+    children: null,
   },
   decorators: [
     (Story) => (
@@ -136,56 +70,93 @@ const meta = {
       </div>
     ),
   ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '긴 텍스트 입력을 위한 Compound TextArea입니다. recommendedLength는 안내 기준이고 maxLength는 실제 입력 제한입니다.',
-      },
-    },
-  },
-} satisfies Meta<typeof TextAreaPlayground>;
+} satisfies Meta<typeof TextArea>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  render: () => (
+    <TextArea id="textarea-default">
+      <TextArea.Label>자기소개서 내용</TextArea.Label>
+      <TextArea.Field
+        placeholder="자기소개서 내용을 입력해 주세요."
+        recommendedLength={1000}
+        showCount
+      />
+      <TextArea.ErrorMessage>자기소개서 내용을 입력해 주세요.</TextArea.ErrorMessage>
+    </TextArea>
+  ),
+};
 
 export const WithoutCount: Story = {
-  args: {
-    showCount: false,
-  },
+  render: () => (
+    <TextArea id="textarea-without-count">
+      <TextArea.Label>자기소개서 내용</TextArea.Label>
+      <TextArea.Field placeholder="자기소개서 내용을 입력해 주세요." />
+      <TextArea.ErrorMessage>자기소개서 내용을 입력해 주세요.</TextArea.ErrorMessage>
+    </TextArea>
+  ),
 };
 
 export const RecommendedLengthExceeded: Story = {
-  args: {
-    defaultValue: '권장 길이를 초과한 자기소개서 내용입니다.',
-    length: 10,
-    lengthType: 'recommended',
-  },
+  render: () => (
+    <TextArea id="textarea-recommended-exceeded">
+      <TextArea.Label>자기소개서 내용</TextArea.Label>
+      <TextArea.Field
+        defaultValue="권장 길이를 초과한 자기소개서 내용입니다."
+        placeholder="자기소개서 내용을 입력해 주세요."
+        recommendedLength={10}
+        showCount
+      />
+      <TextArea.ErrorMessage>자기소개서 내용을 입력해 주세요.</TextArea.ErrorMessage>
+    </TextArea>
+  ),
 };
 
 export const MaxLengthReached: Story = {
-  args: {
-    defaultValue: '최대길이',
-    length: 5,
-    lengthType: 'max',
-  },
+  render: () => (
+    <TextArea id="textarea-max-length">
+      <TextArea.Label>자기소개서 내용</TextArea.Label>
+      <TextArea.Field
+        defaultValue="최대길이"
+        maxLength={5}
+        placeholder="자기소개서 내용을 입력해 주세요."
+        showCount
+      />
+      <TextArea.ErrorMessage>자기소개서 내용을 입력해 주세요.</TextArea.ErrorMessage>
+    </TextArea>
+  ),
 };
 
 export const WithError: Story = {
-  args: {
-    invalid: true,
-    required: true,
-  },
+  render: () => (
+    <TextArea id="textarea-error" invalid required>
+      <TextArea.Label>자기소개서 내용</TextArea.Label>
+      <TextArea.Field
+        placeholder="자기소개서 내용을 입력해 주세요."
+        recommendedLength={1000}
+        showCount
+      />
+      <TextArea.ErrorMessage>자기소개서 내용을 입력해 주세요.</TextArea.ErrorMessage>
+    </TextArea>
+  ),
 };
 
 export const Disabled: Story = {
-  args: {
-    defaultValue: '수정할 수 없는 자기소개서 내용입니다.',
-    disabled: true,
-  },
+  render: () => (
+    <TextArea disabled id="textarea-disabled">
+      <TextArea.Label>자기소개서 내용</TextArea.Label>
+      <TextArea.Field
+        defaultValue="수정할 수 없는 자기소개서 내용입니다."
+        placeholder="자기소개서 내용을 입력해 주세요."
+        recommendedLength={1000}
+        showCount
+      />
+      <TextArea.ErrorMessage>자기소개서 내용을 입력해 주세요.</TextArea.ErrorMessage>
+    </TextArea>
+  ),
 };
 
 export const ReactHookForm: Story = {

From 8279b2ae6cbd01970e332c83e5a89250a537ab43 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Wed, 24 Jun 2026 23:39:24 +0900
Subject: [PATCH 06/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20Accordio?=
 =?UTF-8?q?n=20Trigger=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=83=89=EC=83=81?=
 =?UTF-8?q?=20=EC=83=81=EC=86=8D=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/accordion/AccordionTrigger.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/ui/accordion/AccordionTrigger.tsx b/src/shared/ui/accordion/AccordionTrigger.tsx
index 2d48ea9..dc4822f 100644
--- a/src/shared/ui/accordion/AccordionTrigger.tsx
+++ b/src/shared/ui/accordion/AccordionTrigger.tsx
@@ -57,9 +57,9 @@ export function AccordionTrigger({ className, onClick, ref, ...props }: Accordio
       <AltArrowDownIcon
         aria-hidden="true"
         className={cn(
-          'size-6 shrink-0 text-gray-50 transition-transform duration-200',
+          'size-6 shrink-0 text-current transition-transform duration-200',
           isOpen ? 'rotate-0' : '-rotate-90',
-          disabled ? 'text-gray-400' : 'group-hover:text-primary-500'
+          !disabled && 'group-hover:text-primary-500'
         )}
       />
     </button>

From dce05e36585b5a7b8ace6d728b276f33bdea174b Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Wed, 24 Jun 2026 23:53:21 +0900
Subject: [PATCH 07/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20Accordio?=
 =?UTF-8?q?n=20Trigger=20aria-label=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/accordion/Accordion.stories.tsx | 26 +++++++++----------
 src/shared/ui/accordion/Accordion.tsx         |  6 ++---
 src/shared/ui/accordion/Accordion.types.ts    |  3 ++-
 src/shared/ui/accordion/AccordionTrigger.tsx  |  6 ++---
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/shared/ui/accordion/Accordion.stories.tsx b/src/shared/ui/accordion/Accordion.stories.tsx
index 2760ec6..b7c5f17 100644
--- a/src/shared/ui/accordion/Accordion.stories.tsx
+++ b/src/shared/ui/accordion/Accordion.stories.tsx
@@ -32,7 +32,7 @@ function ExclusiveAccordionExample({ disabled = false }: ExclusiveAccordionExamp
       >
         <Accordion.Header>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="첫 번째 섹션 영역 열기" />
+            <Accordion.Trigger aria-label="첫 번째 섹션 영역 접기/펼치기" />
             <Accordion.Label>첫 번째 섹션</Accordion.Label>
           </div>
         </Accordion.Header>
@@ -48,7 +48,7 @@ function ExclusiveAccordionExample({ disabled = false }: ExclusiveAccordionExamp
       >
         <Accordion.Header>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="두 번째 섹션 영역 열기" />
+            <Accordion.Trigger aria-label="두 번째 섹션 영역 접기/펼치기" />
             <Accordion.Label>두 번째 섹션</Accordion.Label>
           </div>
         </Accordion.Header>
@@ -66,7 +66,7 @@ function ExclusiveAccordionExample({ disabled = false }: ExclusiveAccordionExamp
       >
         <Accordion.Header>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="세 번째 섹션 영역 열기" />
+            <Accordion.Trigger aria-label="세 번째 섹션 영역 접기/펼치기" />
             <Accordion.Label>세 번째 섹션</Accordion.Label>
           </div>
         </Accordion.Header>
@@ -86,7 +86,7 @@ function CoverLetterInputSections() {
       <Accordion.Header>
         <Input id="storybook-question" required>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="질문 영역 열기" />
+            <Accordion.Trigger aria-label="질문 영역 접기/펼치기" />
             <Accordion.Label asChild>
               <Input.Label>질문</Input.Label>
             </Accordion.Label>
@@ -142,7 +142,7 @@ function IndependentControlledAccordionExample() {
       <Accordion onOpenChange={setIsProfileOpen} open={isProfileOpen}>
         <Accordion.Header>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="프로필 입력 영역 열기" />
+            <Accordion.Trigger aria-label="프로필 입력 영역 접기/펼치기" />
             <Accordion.Label>프로필 입력</Accordion.Label>
           </div>
         </Accordion.Header>
@@ -158,7 +158,7 @@ function IndependentControlledAccordionExample() {
       <Accordion onOpenChange={setIsResultOpen} open={isResultOpen}>
         <Accordion.Header>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="분석 결과 영역 열기" />
+            <Accordion.Trigger aria-label="분석 결과 영역 접기/펼치기" />
             <Accordion.Label>분석 결과</Accordion.Label>
           </div>
         </Accordion.Header>
@@ -209,7 +209,7 @@ export const Independent: Story = {
       <Accordion defaultOpen disabled={disabled}>
         <Accordion.Header>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="질문 영역 열기" />
+            <Accordion.Trigger aria-label="질문 영역 접기/펼치기" />
             <Accordion.Label>질문</Accordion.Label>
           </div>
         </Accordion.Header>
@@ -221,7 +221,7 @@ export const Independent: Story = {
       <Accordion defaultOpen disabled={disabled}>
         <Accordion.Header>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="답변 영역 열기" />
+            <Accordion.Trigger aria-label="답변 영역 접기/펼치기" />
             <Accordion.Label>답변</Accordion.Label>
           </div>
         </Accordion.Header>
@@ -233,7 +233,7 @@ export const Independent: Story = {
       <Accordion defaultOpen disabled={disabled}>
         <Accordion.Header>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="최종 작성본 영역 열기" />
+            <Accordion.Trigger aria-label="최종 작성본 영역 접기/펼치기" />
             <Accordion.Label>최종 작성본</Accordion.Label>
           </div>
         </Accordion.Header>
@@ -251,7 +251,7 @@ export const DefaultOpen: Story = {
       <Accordion>
         <Accordion.Header>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="질문 영역 열기" />
+            <Accordion.Trigger aria-label="질문 영역 접기/펼치기" />
             <Accordion.Label>질문</Accordion.Label>
           </div>
         </Accordion.Header>
@@ -263,7 +263,7 @@ export const DefaultOpen: Story = {
       <Accordion defaultOpen>
         <Accordion.Header>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="내가 쓴 자기소개서 영역 열기" />
+            <Accordion.Trigger aria-label="내가 쓴 자기소개서 영역 접기/펼치기" />
             <Accordion.Label>내가 쓴 자기소개서</Accordion.Label>
           </div>
         </Accordion.Header>
@@ -285,7 +285,7 @@ export const Disabled: Story = {
       <Accordion defaultOpen>
         <Accordion.Header>
           <div className="flex items-center gap-2 text-white">
-            <Accordion.Trigger aria-label="활성 섹션 영역 열기" />
+            <Accordion.Trigger aria-label="활성 섹션 영역 접기/펼치기" />
             <Accordion.Label>활성 섹션</Accordion.Label>
           </div>
         </Accordion.Header>
@@ -297,7 +297,7 @@ export const Disabled: Story = {
       <Accordion disabled>
         <Accordion.Header>
           <div className="flex items-center gap-2 text-gray-400">
-            <Accordion.Trigger aria-label="비활성 섹션 영역 열기" />
+            <Accordion.Trigger aria-label="비활성 섹션 영역 접기/펼치기" />
             <Accordion.Label>비활성 섹션</Accordion.Label>
           </div>
         </Accordion.Header>
diff --git a/src/shared/ui/accordion/Accordion.tsx b/src/shared/ui/accordion/Accordion.tsx
index d214d42..4d1b2ff 100644
--- a/src/shared/ui/accordion/Accordion.tsx
+++ b/src/shared/ui/accordion/Accordion.tsx
@@ -35,7 +35,7 @@ import type { AccordionContextValue, AccordionProps } from './Accordion.types';
  *   <Accordion.Header>
  *     <Input id="question" required>
  *       <div className="flex items-center gap-2">
- *         <Accordion.Trigger aria-label="질문 영역 열기" />
+ *         <Accordion.Trigger aria-label="질문 영역 접기/펼치기" />
  *         <Accordion.Label asChild>
  *           <Input.Label>질문</Input.Label>
  *         </Accordion.Label>
@@ -59,7 +59,7 @@ import type { AccordionContextValue, AccordionProps } from './Accordion.types';
  *   <Accordion.Header>
  *     <Input id="question" required>
  *       <div className="flex items-center gap-2">
- *         <Accordion.Trigger aria-label="질문 영역 열기" />
+ *         <Accordion.Trigger aria-label="질문 영역 접기/펼치기" />
  *         <Accordion.Label asChild>
  *           <Input.Label>질문</Input.Label>
  *         </Accordion.Label>
@@ -80,7 +80,7 @@ import type { AccordionContextValue, AccordionProps } from './Accordion.types';
  * ```tsx
  * <Accordion open={isOpen} onOpenChange={setIsOpen}>
  *   <Accordion.Header>
- *     <Accordion.Trigger aria-label="답변 영역 열기" />
+ *     <Accordion.Trigger aria-label="답변 영역 접기/펼치기" />
  *     <Accordion.Label>답변</Accordion.Label>
  *   </Accordion.Header>
  *   <Accordion.Content>
diff --git a/src/shared/ui/accordion/Accordion.types.ts b/src/shared/ui/accordion/Accordion.types.ts
index e418b59..bdfca42 100644
--- a/src/shared/ui/accordion/Accordion.types.ts
+++ b/src/shared/ui/accordion/Accordion.types.ts
@@ -38,11 +38,12 @@ type AccordionLabelProps =
       children: ReactElement<AccordionLabelChildProps>;
     });
 
-/** 섹션을 열고 닫는 button 기반 Trigger props입니다. */
+/** 섹션을 열고 닫는 아이콘 button 기반 Trigger props입니다. */
 interface AccordionTriggerProps extends Omit<
   ComponentPropsWithRef<'button'>,
   'aria-controls' | 'aria-expanded' | 'children' | 'disabled' | 'type'
 > {
+  /** 아이콘 전용 버튼의 접근성 이름입니다. */
   'aria-label': string;
 }
 
diff --git a/src/shared/ui/accordion/AccordionTrigger.tsx b/src/shared/ui/accordion/AccordionTrigger.tsx
index dc4822f..338bae2 100644
--- a/src/shared/ui/accordion/AccordionTrigger.tsx
+++ b/src/shared/ui/accordion/AccordionTrigger.tsx
@@ -16,9 +16,9 @@ import type { AccordionTriggerProps } from './Accordion.types';
  *
  * ### 접근성
  *
- * `aria-expanded`와 `aria-controls`를 자동으로 설정해 Content와 연결합니다.
- * input이나 button 같은 요소는 Trigger 안에 넣지 말고 `Accordion.Header`에서 Trigger 밖에
- * 배치합니다.
+ * 아이콘만 렌더링하는 button이므로 `aria-label`을 필수로 전달해야 합니다. `aria-expanded`와
+ * `aria-controls`는 자동으로 설정해 Content와 연결합니다. input이나 button 같은 요소는
+ * Trigger 안에 넣지 말고 `Accordion.Header`에서 Trigger 밖에 배치합니다.
  *
  */
 export function AccordionTrigger({ className, onClick, ref, ...props }: AccordionTriggerProps) {

From ca8d4330850abe189cb604efb7382b8f9fe362bc Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Wed, 24 Jun 2026 23:55:51 +0900
Subject: [PATCH 08/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20?=
 =?UTF-8?q?=EC=95=84=EC=BD=94=EB=94=94=EC=96=B8=20=ED=8A=B8=EB=A6=AC?=
 =?UTF-8?q?=EA=B1=B0=20=EB=B9=84=ED=99=9C=EC=84=B1=20=EC=A1=B0=EA=B1=B4=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/accordion/AccordionTrigger.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/shared/ui/accordion/AccordionTrigger.tsx b/src/shared/ui/accordion/AccordionTrigger.tsx
index 338bae2..f82935f 100644
--- a/src/shared/ui/accordion/AccordionTrigger.tsx
+++ b/src/shared/ui/accordion/AccordionTrigger.tsx
@@ -24,12 +24,12 @@ import type { AccordionTriggerProps } from './Accordion.types';
 export function AccordionTrigger({ className, onClick, ref, ...props }: AccordionTriggerProps) {
   const { contentId, disabled, isLockedOpen, isOpen, toggleOpen, triggerId } =
     useAccordionContext();
-  const isAriaDisabled = disabled || isLockedOpen;
+  const isInteractionDisabled = disabled || isLockedOpen;
 
   const handleClick: NonNullable<AccordionTriggerProps['onClick']> = (event) => {
     onClick?.(event);
 
-    if (event.defaultPrevented || disabled) {
+    if (event.defaultPrevented || isInteractionDisabled) {
       return;
     }
 
@@ -40,7 +40,7 @@ export function AccordionTrigger({ className, onClick, ref, ...props }: Accordio
     <button
       {...props}
       aria-controls={contentId}
-      aria-disabled={isAriaDisabled || undefined}
+      aria-disabled={isInteractionDisabled || undefined}
       aria-expanded={isOpen}
       className={cn(
         'group inline-flex size-6 shrink-0 items-center justify-center bg-transparent p-0 text-gray-50 transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',

From e06462a0eb0aa4501eebb1f437f67b0cfe5f1899 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Wed, 24 Jun 2026 23:58:55 +0900
Subject: [PATCH 09/10] =?UTF-8?q?=F0=9F=93=9D=20Docs:=20TsDocs=20=EB=82=B4?=
 =?UTF-8?q?=EC=9A=A9=20=EC=A4=84=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/accordion/Accordion.tsx        |  5 +++--
 src/shared/ui/accordion/AccordionContent.tsx | 10 +++++-----
 src/shared/ui/accordion/AccordionHeader.tsx  |  8 +++++---
 src/shared/ui/accordion/AccordionTrigger.tsx | 11 ++++++-----
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/shared/ui/accordion/Accordion.tsx b/src/shared/ui/accordion/Accordion.tsx
index 4d1b2ff..c32f328 100644
--- a/src/shared/ui/accordion/Accordion.tsx
+++ b/src/shared/ui/accordion/Accordion.tsx
@@ -23,8 +23,9 @@ import type { AccordionContextValue, AccordionProps } from './Accordion.types';
  * ### 주요 내용
  *
  * `open`을 전달하면 controlled 방식으로 동작하고, 생략하면 `defaultOpen`을 기준으로
- * 내부 상태를 관리합니다. 여러 Accordion 중 하나만 열어야 하는 정책은 페이지나 부모
- * 컴포넌트에서 `open`과 `onOpenChange`로 제어합니다.
+ * 내부 상태를 관리합니다.
+ * 여러 Accordion 중 하나만 열어야 하는 정책은 페이지나 부모 컴포넌트에서 `open`과
+ * `onOpenChange`로 제어합니다.
  *
  * ### 구조
  *
diff --git a/src/shared/ui/accordion/AccordionContent.tsx b/src/shared/ui/accordion/AccordionContent.tsx
index 78da7b9..4d36b18 100644
--- a/src/shared/ui/accordion/AccordionContent.tsx
+++ b/src/shared/ui/accordion/AccordionContent.tsx
@@ -10,14 +10,14 @@ import type { AccordionContentProps } from './Accordion.types';
  * ## Accordion.Content
  *
  * @description
- * Accordion 섹션이 열렸을 때 표시되는 본문 영역입니다. Input, TextArea, 안내 문구 등
- * 섹션 안의 실제 콘텐츠를 children으로 배치합니다.
+ * Accordion 섹션이 열렸을 때 표시되는 본문 영역입니다.
+ * Input, TextArea, 안내 문구 등 섹션 안의 실제 콘텐츠를 children으로 배치합니다.
  *
  * ### 접근성
  *
- * Header의 보이는 Label과 `aria-labelledby`로 연결된 `region`을 렌더링합니다. 닫힌 상태에서는
- * `aria-hidden`과 `inert`를 적용해 스크린 리더와 키보드 탐색에서 제외하면서도 높이
- * 애니메이션이 자연스럽게 동작하도록 DOM은 유지합니다.
+ * Header의 보이는 Label과 `aria-labelledby`로 연결된 `region`을 렌더링합니다.
+ * 닫힌 상태에서는 `aria-hidden`과 `inert`를 적용해 스크린 리더와 키보드 탐색에서
+ * 제외하면서도 높이 애니메이션이 자연스럽게 동작하도록 DOM은 유지합니다.
  */
 export function AccordionContent({ children, className, ...props }: AccordionContentProps) {
   const { contentId, isOpen, labelId } = useAccordionContext();
diff --git a/src/shared/ui/accordion/AccordionHeader.tsx b/src/shared/ui/accordion/AccordionHeader.tsx
index 92ab435..c657909 100644
--- a/src/shared/ui/accordion/AccordionHeader.tsx
+++ b/src/shared/ui/accordion/AccordionHeader.tsx
@@ -11,12 +11,14 @@ import type { AccordionHeaderProps } from './Accordion.types';
  *
  * @description
  * Trigger와 닫힌 상태에서도 노출할 요약 입력 영역을 하나의 헤더로 묶는 선택적 Compound
- * 컴포넌트입니다. 질문 input처럼 항상 보여야 하는 필드가 있을 때 사용합니다.
+ * 컴포넌트입니다.
+ * 질문 input처럼 항상 보여야 하는 필드가 있을 때 사용합니다.
  *
  * ### 접근성
  *
- * Header 자체는 상호작용 요소가 아닙니다. 열림/닫힘 동작은 내부의 `Accordion.Trigger`가
- * 담당하며, input과 button 같은 요소는 Trigger 밖에 배치해야 합니다.
+ * Header 자체는 상호작용 요소가 아닙니다.
+ * 열림/닫힘 동작은 내부의 `Accordion.Trigger`가 담당하며, input과 button 같은 요소는
+ * Trigger 밖에 배치해야 합니다.
  */
 export function AccordionHeader({ children, className, ...props }: AccordionHeaderProps) {
   const { disabled, isOpen } = useAccordionContext();
diff --git a/src/shared/ui/accordion/AccordionTrigger.tsx b/src/shared/ui/accordion/AccordionTrigger.tsx
index f82935f..324c906 100644
--- a/src/shared/ui/accordion/AccordionTrigger.tsx
+++ b/src/shared/ui/accordion/AccordionTrigger.tsx
@@ -11,14 +11,15 @@ import type { AccordionTriggerProps } from './Accordion.types';
  * ## Accordion.Trigger
  *
  * @description
- * Accordion 섹션을 열고 닫는 아이콘 button 컴포넌트입니다. Header 안에서 Label과 함께
- * 배치해 섹션의 조작 지점을 만듭니다.
+ * Accordion 섹션을 열고 닫는 아이콘 button 컴포넌트입니다.
+ * Header 안에서 Label과 함께 배치해 섹션의 조작 지점을 만듭니다.
  *
  * ### 접근성
  *
- * 아이콘만 렌더링하는 button이므로 `aria-label`을 필수로 전달해야 합니다. `aria-expanded`와
- * `aria-controls`는 자동으로 설정해 Content와 연결합니다. input이나 button 같은 요소는
- * Trigger 안에 넣지 말고 `Accordion.Header`에서 Trigger 밖에 배치합니다.
+ * 아이콘만 렌더링하는 button이므로 `aria-label`을 필수로 전달해야 합니다.
+ * `aria-expanded`와 `aria-controls`는 자동으로 설정해 Content와 연결합니다.
+ * input이나 button 같은 요소는 Trigger 안에 넣지 말고 `Accordion.Header`에서 Trigger 밖에
+ * 배치합니다.
  *
  */
 export function AccordionTrigger({ className, onClick, ref, ...props }: AccordionTriggerProps) {

From 04268858541bd61eba71c38596c28cccc99ebf97 Mon Sep 17 00:00:00 2001
From: Leeseojeong <sjung0314@gmail.com>
Date: Thu, 25 Jun 2026 00:17:53 +0900
Subject: [PATCH 10/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20TextArea?=
 =?UTF-8?q?=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EC=B5=9C=EB=8C=80=20=EA=B8=B8?=
 =?UTF-8?q?=EC=9D=B4=20=EB=8F=84=EB=8B=AC=20=EC=98=88=EC=8B=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/textarea/TextArea.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/ui/textarea/TextArea.stories.tsx b/src/shared/ui/textarea/TextArea.stories.tsx
index 44027c4..0f9ab25 100644
--- a/src/shared/ui/textarea/TextArea.stories.tsx
+++ b/src/shared/ui/textarea/TextArea.stories.tsx
@@ -120,7 +120,7 @@ export const MaxLengthReached: Story = {
     <TextArea id="textarea-max-length">
       <TextArea.Label>자기소개서 내용</TextArea.Label>
       <TextArea.Field
-        defaultValue="최대길이"
+        defaultValue="최대 길이"
         maxLength={5}
         placeholder="자기소개서 내용을 입력해 주세요."
         showCount