[React] Drawer와 Tab, Accordian으로 FAQ 구현하기

2025년 02월 03일

• Mui의 Accordion 컴포넌트 사용
• Help Container에서 해당하는 버튼을 선택하면 Drawer가 나오도록 설정
• Drawer안에는 Tabs를 4가지로 구성
• 각 Tab안에는 Questions의 리스트가 나오도록 하였음
  • question은 길이와 expand시 bold체에 따라 한줄~두줄로 설정될 수 있음 → useEffect를 사용하여 expand되는 question 혹은 tab이 바뀔때마다 question의 wrapper라고 할 수 있는 AccordionSummary 컴포넌트의 height을 조정함
  • 호버 시, 글자색과 AccordionSummary 배경색상을 변경하여 가시적으로 표현함
• Question은 선택 시 Accordian 형태로 answer가 dropdown되도록 설정하였음
  • 질문과 답변의 갯수가 많으므로 FaqsDatas라는 파일로 따로 분리하여 개발을 진행
  • 하지만 몇 개의 answer에 이미지가 포함되는데, 영어/한국어에 따라 첨부되는 이미지가 다르므로, 다국어 처리를 실시간으로 반영하기 위하여 컴포넌트 형식 (함수 형식)의 파일로 분리
• 다국어 처리를 위해 줄띄움을 기준으로 각 Typography 컴포넌트로 설정함
• 각 Typography별로 type을 1. text, 2. indent, 3. br로 설정하여
  • 줄띄움은 br 타입으로
  • 기본 텍스트는 text 타입으로
  • 들여쓰기가 필요할 시 indent로 설정

 

참고문헌 :

MUI_hqReact Accordion component - Material UI​