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,17 +197,30 @@ function FaqPage({ bbsId }: { bbsId: string }) {
                       value={item.pstNo.toString()}
                       className="w-full"
                     >
-                      <AccordionTrigger>
-                        <div className="flex flex-1 items-center justify-between">
-                          <div className="flex items-center gap-4">
-                            <span className="text-primary">Q</span>
-                            <span>{item.pstTtl}</span>
-                          </div>
-                          <span className="px-4 text-[1.2rem] font-normal text-label">
-                            등록일: {dayjs(item.regDt).format("YYYY-MM-DD")}
-                          </span>
-                        </div>
-                      </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>
+                                <span>{item.pstTtl}</span>
+                              </div>
+                              <span className="px-4 text-[1.2rem] font-normal text-label">
+                                등록일: {dayjs(item.regDt).format("YYYY-MM-DD")}
+                              </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">