faq 추가

src/pages/support/faq/detail-page.tsx

@@ -1,18 +1,46 @@
+import { useEffect, useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useLocation } from 'react-router';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
   useSetHeaderTitle,
   useSetHeaderType,
-  useSetFooterMode
+  useSetFooterMode,
+  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 
 export const FaqDetailPage = () => {
-  useSetHeaderTitle('자주 묻는 질문');
-  useSetHeaderType(HeaderType.RightClose);
-  useSetFooterMode(false);
+  const { navigate } = useNavigate();
+  const location = useLocation();
 
+  const [title, setTitle] = useState<string>('');
+  const [contents, setContents] = useState<string>('');
+
+  useSetHeaderTitle('자주 묻는 질문');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.support.faq.list);
+  });
+
+  useEffect(() => {
+    setTitle(location?.state.title);
+    setContents(location?.state.contents);
+  }, []);
   return (
     <>
-
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="faq-detail">
+              <div className="faq-detail__title">{ title }</div>
+              <div className="faq-detail__divider"></div>
+              <div className="faq-detail__body">{ contents }</div>
+            </div>
+          </div>
+        </div>
+      </main>
     </>
   );
 };