FAQ 웹접근성(툴팁)

apps/common/features/src/pages/(post)/faq/ui/faq-page.tsx

@@ -18,6 +18,9 @@ import {
   SelectTrigger,
   SelectValue,
   Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from "@common/components";
 import { AttachmentApi } from "@/entities/attachment";
 import { PostApi, PostPageGuard, type PostParams } from "@/entities/post";
@@ -40,6 +43,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
     keyword: "",
   });
   const [selectedPostNumbers, setSelectedPostNumbers] = useState<number[]>([]);
+  const [expandedFaqs, setExpandedFaqs] = useState<string[]>([]);
 
   const {
     data: postList,
@@ -174,6 +178,8 @@ function FaqPage({ bbsId }: { bbsId: string }) {
             {isFetched ? (
               <Accordion
                 type="multiple"
+                value={expandedFaqs}
+                onValueChange={setExpandedFaqs}
                 className="secondary flex flex-col gap-4"
               >
                 {postList?.content.map((item) => (
@@ -191,7 +197,13 @@ function FaqPage({ bbsId }: { bbsId: string }) {
                       value={item.pstNo.toString()}
                       className="w-full"
                     >
-                      <AccordionTrigger>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <AccordionTrigger
+                            aria-expanded={expandedFaqs.includes(
+                              item.pstNo.toString(),
+                            )}
+                          >
                             <div className="flex flex-1 items-center justify-between">
                               <div className="flex items-center gap-4">
                                 <span className="text-primary">Q</span>
@@ -202,6 +214,13 @@ function FaqPage({ bbsId }: { bbsId: string }) {
                               </span>
                             </div>
                           </AccordionTrigger>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          {expandedFaqs.includes(item.pstNo.toString())
+                            ? "접기"
+                            : "펼치기"}
+                        </TooltipContent>
+                      </Tooltip>
                       <AccordionContent>
                         <div className="flex items-start gap-4">
                           <span className="text-[1.4rem] font-bold text-label">