Merge pull request #298 from TripInfoWeb/dev_support

Dev support

src/app/support/qna/detail/[id]/page.tsx

@@ -1,6 +1,5 @@
 import SupportQnADetailEditContainer from "@/containers/support/qna/SupportQnADetailEditContainer";
-import { QnADetailType } from "@/types/QnADto";
-import { fetchWithAuth } from "@/utils/fetchWithAuth";
+import { fetchWithTokenRefreshSSR } from "@/utils/getNewAccessTokenAndRerequest";
 import { cookies } from "next/headers";
 
 interface Props {
@@ -14,26 +13,20 @@ export async function generateMetadata({ params: { id } }: Props) {
   }
 
   return {
-    title: `공지사항 조회`,
-    description: "공지사항 상세조회",
+    title: `QnA 상세 조회`,
+    description: "QnA 상세 조회",
   };
 }
 
 async function fetchData(id: number) {
-  const cookie = cookies().get("access_token");
+  const accessToken = cookies().get("access_token");
+  const refreshToken = cookies().get("refresh_token");
 
-  const res = await fetchWithAuth(`${process.env.BACKEND_URL}/api/qna/${id}`, {
-    headers: {
-      "Content-Type": "application/json",
-      Cookie: `${cookie?.name}=${cookie?.value}`,
-    },
+  return fetchWithTokenRefreshSSR({
+    url: `${process.env.BACKEND_URL}/api/qna/${id}`,
+    accessToken: accessToken,
+    refreshToken: refreshToken,
   });
-
-  if (!res.ok) {
-    throw new Error(`Failed to fetch data: ${res.statusText}`);
-  }
-
-  return res.json();
 }
 
 export default async function Page({ params: { id } }: Props) {
@@ -42,7 +35,7 @@ export default async function Page({ params: { id } }: Props) {
     throw Error("Not Found");
   }
 
-  const data: QnADetailType = await fetchData(qnaId);
+  const data = await fetchData(qnaId);
 
   return (
     <main className="mb-8 w-full">

src/components/support/SupportFAQList.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+
+interface FAQ {
+  topic: string;
+  question: string;
+  answer: string;
+}
+
+const faqData: FAQ[] = [
+  {
+    topic: "정보 서비스",
+    question: "",
+    answer:
+      "",
+  },
+  {
+    topic: "모임 서비스",
+    question: "",
+    answer:
+      "",
+  },
+  {
+    topic: "여행일기 서비스",
+    question: "",
+    answer:
+      "",
+  },
+  {
+    topic: "회원",
+    question: "회원탈퇴는 어떻게 하나요?",
+    answer:
+      "우측 상단 프로필 이미지(마이페이지) - 프로필 이미지 우측 하단 설정 아이콘 - 페이지 우측 하단 '회원탈퇴'를 클릭하시면 됩니다.",
+  },
+];
+
+const SupportFAQList = () => {
+  const [expandedTopic, setExpandedTopic] = useState<string | null>(null);
+
+  const handleToggle = (topic: string) => {
+    setExpandedTopic(expandedTopic === topic ? null : topic);
+  };
+
+  return (
+    <div className="flex w-full flex-col border-t-2 border-t-black">
+      {Array.from(new Set(faqData.map((faq) => faq.topic))).map((topic) => (
+        <div
+          key={topic}
+          className="flex w-full flex-col border-b-2 border-b-gray3 px-5"
+        >
+          <button
+            className="grid h-[4.625rem] w-full grid-cols-[6.0625rem_auto] items-center rounded-md"
+            onClick={() => handleToggle(topic)}
+          >
+            <div className={"text-start font-bold text-main"}> Q </div>
+            <div className={"text-start text-lg font-bold"}> {topic} </div>
+          </button>
+          <div
+            className={`overflow-hidden transition-all duration-300 ease-in-out flex flex-col ${
+              expandedTopic === topic ? "max-h-screen py-2 gap-y-2" : "max-h-0"
+            }`}
+          >
+            {faqData
+              .filter((faq) => faq.topic === topic)
+              .map((faq, index) => (
+                <div
+                  key={index}
+                  className="rounded-lg border border-gray-200 p-4 shadow-sm transition-shadow duration-300 ease-in-out hover:shadow-lg"
+                >
+                  <h3 className="mb-2 text-lg font-semibold">{faq.question}</h3>
+                  <p>{faq.answer}</p>
+                </div>
+              ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SupportFAQList;

src/components/support/SupportHeader.tsx

@@ -1,57 +1,42 @@
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
 
 interface ISupportHeader {
-  tabs: { name: string; value: string }[];
   active: string | null;
 }
 
-const SupportHeader = ({ tabs, active }: ISupportHeader) => {
-  const router = useRouter();
-  const [selectedValue, setSelectedValue] = useState<string>(active || "");
+const tabs = [
+  { name: "서비스소개", value: "about" },
+  { name: "공지사항", value: "notice" },
+  { name: "FAQ", value: "faq" },
+  { name: "1:1 문의", value: "qna" },
+  // { name: "1:1 문의", value: "contact" },
+  { name: "이용약관", value: "terms" },
+];
 
-  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const newValue = event.target.value;
-    setSelectedValue(newValue);
-    router.push(`/support?menu=${newValue}`);
-  };
+const SupportHeader = ({ active }: ISupportHeader) => {
 
   return (
-    <div className="mb-4 flex w-full flex-col items-center py-1">
-      <article className="flex w-full flex-col justify-start">
-        <h1 className="flex items-center justify-center py-8 text-3xl font-bold text-gray-800">
-          {tabs.find((i) => i.value === `${active}`)?.name || "Default Title"}
+    <div className="mb-4 flex w-full flex-col items-start py-1">
+      <div className={"flex w-full flex-col items-start gap-y-4 pt-[2.375rem]"}>
+        <h1 className={"w-full text-start text-[1.75rem] font-bold text-black"}>
+          고객지원
         </h1>
-        <div className="w-full min-[361px]:hidden">
-          <select
-            value={selectedValue}
-            onChange={handleSelectChange}
-            className="w-full rounded-md border border-gray-300 px-4 py-2 text-gray-700"
+        <p className={"text-gray1"}> 솔리투어 고객지원에서 도와드릴게요 </p>
+      </div>
+      <article className="flex justify-start gap-1 pt-12 max-w-full overflow-x-scroll scrollbar-hide">
+        {tabs.map((tab) => (
+          <Link
+            key={tab.value}
+            href={`/support?menu=${tab.value}`}
+            className={`flex max-w-fit flex-shrink-0 transform items-center justify-center rounded-full px-6 py-3 text-lg font-medium outline-[1px] outline-offset-[-1px] outline-[#e3e3e3b8] transition-transform duration-300 ease-in-out ${
+              tab.value === `${active}`
+                ? "bg-main text-white outline-0"
+                : "text-gray-700 outline hover:bg-gray-200 hover:text-main"
+            }`}
           >
-            {tabs.map((tab) => (
-              <option key={tab.value} value={tab.value}>
-                {tab.name}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <ul className="grid w-full gap-2 rounded-[1rem] px-2 py-3 outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3] max-[900px]:grid-cols-3 max-[500px]:grid-cols-2 max-[360px]:hidden min-[900px]:grid-cols-6">
-          {tabs.map((tab) => (
-            <Link
-              key={tab.value}
-              href={`/support?menu=${tab.value}`}
-              className={`flex w-full transform items-center justify-center rounded-md py-2 text-lg font-medium transition-transform duration-300 ease-in-out outline outline-[1px] outline-offset-[-1px] outline-[#e3e3e3b8] ${
-                tab.value === `${active}`
-                  ? "bg-main text-white"
-                  : "text-gray-700 hover:bg-gray-200 hover:text-main"
-              }`}
-            >
-              {tab.name}
-            </Link>
-          ))}
-        </ul>
+            {tab.name}
+          </Link>
+        ))}
       </article>
     </div>
   );