[TIL/React] 2023/09/22

1. QnA Page 경로 지정 🟢

2. QnA Page 셋팅 🟢

import React, { useState } from "react";
import styled from "@emotion/styled";
import ComponentWrapper from "../components/common/ComponentWrapper";
import { QnALists } from "../data/QnAList";
import { QnAListDetailData } from "../data/QnAListDetail";

const QnABoxWrapper = styled.div`
  width: 100%;
`;

const QuestionBox = styled.div`
  width: 100%;
  height: 100px;
  cursor: pointer;
  border: 1px solid black;
`;

const AnswerBox = styled.div`
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;
  border: 1px solid black;
  border-top: none;
  overflow: hidden;
  transition: height 0.4s ease-in-out;
  ${({ isVisible }) => (isVisible ? "height: 100px;" : "height: 0;")}
`;

const CategoryButton = styled.div`
  cursor: pointer;
`;

const QnAPage = () => {
  const [visibleCards, setVisibleCards] = useState({});

  const handleCardClick = (cardId) => {
    setVisibleCards((prevVisibleCards) => ({
      ...prevVisibleCards,
      [cardId]: !prevVisibleCards[cardId],
    }));
  };

  const [category, setCategory] = useState("상품관련");

  const handleSetCategory = (category) => {
    setCategory(category);
  };

  const MapData = QnAListDetailData[category];

  return (
    <>
      {/* 제목과 카테고리 버튼 */}
      <ComponentWrapper>
        <p>자주 묻는 질문</p>
        <>
          {QnALists?.map((elem) => (
            <CategoryButton
              key={elem.id}
              onClick={() => handleSetCategory(elem.category)}
              style={{ border: "1px solid black" }}
            >
              {elem.title}
            </CategoryButton>
          ))}
        </>
      </ComponentWrapper>
      {/* 카드 영역 */}
      <ComponentWrapper
        style={{
          backgroundColor: "yellow",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          marginTop: "70px",
        }}
      >
        {MapData?.map((elem) => (
          <QnABoxWrapper key={elem?.id}>
            <QuestionBox onClick={() => handleCardClick(elem?.id)}>
              <p>{elem?.title}</p>
              <p>{elem?.content}</p>
            </QuestionBox>
            <AnswerBox isVisible={visibleCards[elem?.id]}>
              <p>{elem?.reply}</p>
            </AnswerBox>
          </QnABoxWrapper>
        ))}
      </ComponentWrapper>
    </>
  );
};

export default QnAPage;

3. QnA List 셋팅 🟢

export const QnALists = [
  {
    id: "1",
    title: "상품관련",
    category: "상품관련",
  },
  {
    id: "2",
    title: "주문/결제",
    category: "주문/결제",
  },
  {
    id: "3",
    title: "배송",
    category: "배송",
  },
  {
    id: "4",
    title: "변경/취소/반품",
    category: "변경/취소/반품",
  },
  {
    id: "5",
    title: "회원정보",
    category: "회원정보",
  },
  {
    id: "6",
    title: "서비스이용",
    category: "서비스이용",
  },
];

4. QnA List Detail 셋팅 🟢

const productQnA = [
  {
    id: "1",
    title: "상품관련",
    content: "이거 모르겠어요1",
    reply: "이것도 모르냐 바보얌1",
  },
  {
    id: "2",
    title: "상품관련",
    content: "이거 모르겠어요2",
    reply: "이것도 모르냐 바보얌2",
  },
  {
    id: "3",
    title: "상품관련",
    content: "이거 모르겠어요3",
    reply: "이것도 모르냐 바보얌3",
  },
  {
    id: "4",
    title: "상품관련",
    content: "이거 모르겠어요4",
    reply: "이것도 모르냐 바보얌4",
  },
  {
    id: "5",
    title: "상품관련",
    content: "이거 모르겠어요5",
    reply: "이것도 모르냐 바보얌5",
  },
  {
    id: "6",
    title: "상품관련",
    content: "이거 모르겠어요6",
    reply: "이것도 모르냐 바보얌6",
  },
  {
    id: "7",
    title: "상품관련",
    content: "이거 모르겠어요7",
    reply: "이것도 모르냐 바보얌7",
  },
  {
    id: "8",
    title: "상품관련",
    content: "이거 모르겠어요8",
    reply: "이것도 모르냐 바보얌8",
  },
  {
    id: "9",
    title: "상품관련",
    content: "이거 모르겠어요9",
    reply: "이것도 모르냐 바보얌9",
  },
  {
    id: "10",
    title: "상품관련",
    content: "이거 모르겠어요10",
    reply: "이것도 모르냐 바보얌10",
  },
];

const orderAndPayQnA = [
  {
    id: "1",
    title: "주문/결제",
    content: "이거 모르겠어요",
    reply: "이것도 모르냐 바보얌",
  },
];

const deliveryQnA = [
  {
    id: "1",
    title: "배송",
    content: "이거 모르겠어요",
    reply: "이것도 모르냐 바보얌",
  },
];

const modificationEtcQnA = [
  {
    id: "1",
    title: "변경/취소/반품",
    content: "이거 모르겠어요",
    reply: "이것도 모르냐 바보얌",
  },
];

const userInfoQnA = [
  {
    id: "1",
    title: "회원정보",
    content: "이거 모르겠어요",
    reply: "이것도 모르냐 바보얌",
  },
];

const serviceUsageQnA = [
  {
    id: "1",
    title: "서비스이용",
    content: "이거 모르겠어요",
    reply: "이것도 모르냐 바보얌",
  },
];

export const QnAListDetailData = {
  상품관련: productQnA,
  "주문/결제": orderAndPayQnA,
  배송: deliveryQnA,
  "변경/취소/반품": modificationEtcQnA,
  회원정보: userInfoQnA,
  서비스이용: serviceUsageQnA,
};

5. 현재 모습 🟢