From 6216decef095547fb886fbf75e33a6586145f439 Mon Sep 17 00:00:00 2001
From: Soyeon Choe <soy2302ten@gmail.com>
Date: Wed, 16 Oct 2024 18:08:33 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20Top=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Design/components/Top/Line.tsx    |  1 +
 .../src/components/Design/components/Top/Top.tsx | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/client/src/components/Design/components/Top/Line.tsx b/client/src/components/Design/components/Top/Line.tsx
index 06669eb1b..f2e9081a5 100644
--- a/client/src/components/Design/components/Top/Line.tsx
+++ b/client/src/components/Design/components/Top/Line.tsx
@@ -31,6 +31,7 @@ export default function Line({text, emphasize = []}: Props) {
             size="subTitle"
             textColor={emphasize.includes(text) ? 'black' : 'gray'}
             style={{whiteSpace: 'pre'}}
+            aria-hidden={true}
           >
             {`${text}`}
           </Text>
diff --git a/client/src/components/Design/components/Top/Top.tsx b/client/src/components/Design/components/Top/Top.tsx
index 56c41eb6e..f8f5a2b32 100644
--- a/client/src/components/Design/components/Top/Top.tsx
+++ b/client/src/components/Design/components/Top/Top.tsx
@@ -1,5 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import {css} from '@emotion/react';
+import {useEffect, useState} from 'react';
+import React from 'react';
 
 import Line from './Line';
 import EditableLine from './EditableLine';
@@ -8,12 +10,26 @@ Top.Line = Line;
 Top.EditableLine = EditableLine;
 
 export default function Top({children}: React.PropsWithChildren) {
+  const [childrenTexts, setChildrenTexts] = useState<string[]>([]);
+
+  useEffect(() => {
+    const collectedTexts: string[] = [];
+    React.Children.forEach(children, child => {
+      if (React.isValidElement(child) && child.type === Top.Line) {
+        collectedTexts.push(child.props.text);
+      }
+    });
+    setChildrenTexts(collectedTexts);
+  }, [children]);
+
   return (
     <div
       css={css`
         display: flex;
         flex-direction: column;
       `}
+      aria-label={childrenTexts.join(' ')}
+      tabIndex={0}
     >
       {children}
     </div>

From 1cb6776dfc52690ac11104e2ede7b93144df9928 Mon Sep 17 00:00:00 2001
From: Soyeon Choe <soy2302ten@gmail.com>
Date: Thu, 17 Oct 2024 13:37:32 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C?=
 =?UTF-8?q?=20useState=EC=99=80=20useEffect=EB=A5=BC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Design/components/Top/Top.tsx   | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Design/components/Top/Top.tsx b/client/src/components/Design/components/Top/Top.tsx
index f8f5a2b32..11b2b9586 100644
--- a/client/src/components/Design/components/Top/Top.tsx
+++ b/client/src/components/Design/components/Top/Top.tsx
@@ -1,6 +1,5 @@
 /** @jsxImportSource @emotion/react */
 import {css} from '@emotion/react';
-import {useEffect, useState} from 'react';
 import React from 'react';
 
 import Line from './Line';
@@ -10,17 +9,12 @@ Top.Line = Line;
 Top.EditableLine = EditableLine;
 
 export default function Top({children}: React.PropsWithChildren) {
-  const [childrenTexts, setChildrenTexts] = useState<string[]>([]);
-
-  useEffect(() => {
-    const collectedTexts: string[] = [];
-    React.Children.forEach(children, child => {
-      if (React.isValidElement(child) && child.type === Top.Line) {
-        collectedTexts.push(child.props.text);
-      }
-    });
-    setChildrenTexts(collectedTexts);
-  }, [children]);
+  const childrenTexts: string[] = [];
+  React.Children.forEach(children, child => {
+    if (React.isValidElement(child) && child.type === Top.Line) {
+      childrenTexts.push(child.props.text);
+    }
+  });
 
   return (
     <div