230912 개발일지 TIL - React와 Firebase, Ant Design을 이용한 FAQ 만드는 법

React와 Firebase, Ant Design을 이용한 FAQ 만드는 법

import React, { useEffect, useState } from 'react';
import { Collapse } from 'antd';
import { auth, db } from '../firebase/firebaseConfig';
import { collection, getDocs, query, where } from 'firebase/firestore';

const CustomerFaq = () => {
  const [faqs, setFaqs] = useState([]);
  const [activeKey, setActiveKey] = useState(null);

  const userUid = auth.currentUser?.uid;

  useEffect(() => {
    const fetchData = async () => {
      if (userUid) {
        const q = query(
          collection(db, 'template'),
          where('userId', '==', userUid),
        );

        const querySnapshot = await getDocs(q);
        const fetchedFaqs = querySnapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));

        for (let i = 0; i < fetchedFaqs.length; i++) {
          if (fetchedFaqs[i].faqs.length > 0) {
            setActiveKey(fetchedFaqs[i].faqs[0].faqId);
            break;
          }
        }

        setFaqs(fetchedFaqs);
      }
    };

    fetchData();
  }, [userUid]);

  // faq 데이터를 items 형식으로 변환
  const items = faqs.flatMap((faq) =>
    faq.faqs.map((innerFaq) => ({
      key: innerFaq.faqId,
      label: innerFaq.question,
      children: <p>{innerFaq.answer}</p>,
    })),
  );

  return (
    <>
      <Collapse activeKey={activeKey} onChange={setActiveKey} accordion>
         {items.map((item) => (
           <Collapse.Panel header={item.label} key={item.key}>
             {item.children}
           </Collapse.Panel>
         ))}
       </Collapse>
     </>
   );
};

export default CustomerFaq;

먼저 현재 로그인한 사용자의 uid를 가져와서 이 uid를 이용하여 Firebase에서 해당 사용자가 작성한 FAQ 목록을 가져온다.
이후에는 가져온 FAQ 데이터를 Ant Design의 Collapse 컴포넌트가 사용할 수 있는 형태로 변환하고, 화면에 표시해준다.