✨ feat: Accordion 컴포넌트에 id 인자 추가 및 접근성 개선

src/components/Accordion/index.stories.tsx

@@ -13,13 +13,15 @@ type Story = StoryObj<typeof meta>;
 
 export const 짧은_문장: Story = {
   args: {
-    text: '짧은 문장입니다. 세 줄이 넘어가면 "펼치기" 버튼이 생깁니다. 그리고 스토리북에서 날짜 바꾸면 에러 발생합니다. 화면 사이즈를 줄여서 세 줄이 넘어가면 "펼치기" 버튼이 생깁니다.',
+    id: '1',
+    text: '세 줄이 넘어가면 "펼치기" 버튼이 생깁니다. 그리고 스토리북에서 날짜 바꾸면 에러 발생합니다. 화면 사이즈를 줄여서 세 줄이 넘어가면 "펼치기" 버튼이 생깁니다.',
     date: new Date(),
   },
 };
 
 export const 긴_문장: Story = {
   args: {
+    id: '2',
     text: '여기까지가 끝인가 보오 이제 나는 돌아서겠소 억지 노력으로 인연을 거슬러 괴롭히지는 않겠소 하고 싶은 말 하려 했던 말 이대로 다 남겨두고서 혹시나 기대도 포기하려 하오 그대로 남겨두고서 혹시나 기대도 포기하려 하오 그대 부디 잘 지내시오 기나긴 그대 침묵을 이별로 받아두겠소 행여 이 맘 다칠까 근심은 접어두오 오 사랑한 사람이여 더 이상 못보아도 사실 그대 있음으로 힘겨운 날들을 견뎌 왔음에 감사하오 좋은 사람 만나오 사는 동안 날 잊고 사시오 진정 행복하길 바라겠소 이 맘만 가져가오 기나긴 그대 침묵을 이별로 받아두겠소 행여 이 맘 다칠까 근심은 접어두오 오 사랑한 사람이여 더 이상 못보아도 사실 그대 있음으로 힘겨운 날들을 견뎌 왔음에 감사하오 좋은 사람 만나오 사는 동안 날 잊고 사시오 진정 행복하길 바라겠소 이 맘만 가져가오',
     date: new Date(),
   },

src/components/Accordion/index.tsx

@@ -1,40 +1,23 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import DownArrow from '@/assets/icons/downArrow.svg?react';
 import formatDate from '@/utils/dateUtils';
+import useCheckTextLines from '@/hooks/useCheckTextLines';
 import style from './styles';
 
 interface AccordionProps {
+  /** Accordion 컴포넌트의 id 값 입니다. */
+  id: string;
   /** Accordion 컴포넌트에 들어갈 편지 내용입니다. */
   text: string;
   /** Accordion 컴포넌트에 들어갈 날짜 입니다. */
   date: Date;
 }
 
-const Accordion = ({ text, date }: AccordionProps) => {
+const Accordion = ({ id, text, date }: AccordionProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [showButton, setShowButton] = useState(false);
   const textContainerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const checkTextLines = () => {
-      if (textContainerRef.current) {
-        const element = textContainerRef.current;
-        const lineHeight = parseInt(
-          window.getComputedStyle(element).lineHeight,
-          10,
-        );
-        const lines = Math.ceil(element.scrollHeight / lineHeight);
-        setShowButton(lines > 4);
-      }
-    };
-
-    checkTextLines();
-
-    window.addEventListener('resize', checkTextLines);
-
-    return () => window.removeEventListener('resize', checkTextLines);
-  }, [text]);
+  const showButton = useCheckTextLines(textContainerRef, text);
 
   const toggleAccordion = () => setIsOpen(!isOpen);
 
@@ -44,7 +27,7 @@ const Accordion = ({ text, date }: AccordionProps) => {
   };
 
   return (
-    <div css={style.container}>
+    <div css={style.container} id={id}>
       <div css={style.contentText}>
         <AnimatePresence>
           {isOpen && (
@@ -72,7 +55,12 @@ const Accordion = ({ text, date }: AccordionProps) => {
       {showButton && (
         <div css={style.bottom}>
           <div css={style.line} />
-          <div onClick={toggleAccordion} css={style.button}>
+          <div
+            role="button"
+            aria-expanded={isOpen}
+            onClick={toggleAccordion}
+            css={style.button}
+          >
             {isOpen ? '접기' : '펼치기'}
             <DownArrow css={style.arrow(isOpen)} />
           </div>

src/components/Accordion/styles.ts

@@ -5,7 +5,6 @@ const style = {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    height: 500px;
     padding-inline: 10px;
   `,
   contentText: css`