qna 등록

src/pages/support/qna/list-page.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
@@ -6,7 +6,6 @@ import { useQnaListMutation } from '@/entities/support/api/use-qna-list-mutation
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
 import { QnaItem } from '@/entities/support/model/types';
 import { SupportQnaItem } from '@/entities/support/ui/qna-item';
-
 import { 
 	useSetHeaderTitle,
 	useSetHeaderType,
@@ -18,7 +17,6 @@ export const QnaListPage = () => {
   const { navigate } = useNavigate();
 
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-  const [searchValue, setSearchValue] = useState<string>('');
   const [resultList, setResultList] = useState<Array<QnaItem>>([]);
 
   useSetHeaderTitle('1:1 문의');
@@ -95,7 +93,7 @@ export const QnaListPage = () => {
             <div className="apply-row bottom-padding">
               <button 
                 className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToNavigation }
+                onClick={ () => onClickToNavigation() }
               >1:1 문의하기</button>
             </div>
           </div>

src/pages/support/qna/register-page.tsx

@@ -0,0 +1,182 @@
+import { ChangeEvent, useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useQnaSaveMutation } from '@/entities/support/api/use-qna-save-mutation';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export enum QnaRegisterPropsName {
+  Mid = 'Mid',
+  CounselType = 'CounselType',
+  RequestName = 'RequestName',
+  RequestTel = 'RequestTel',
+  RequestEmail = 'RequestEmail',
+  Title = 'Title',
+  Contents = 'Contents',
+};
+
+export const QnaRegisterPage = () => {
+  const { navigate } = useNavigate();
+
+  const [mid, setMid] = useState<string>('string');
+  const [counselType, setCounselType] = useState<string>('st');
+  const [requestName, setRequestName] = useState<string>('');
+  const [requestTel, setRequestTel] = useState<string>('');
+  const [requestEmail, setRequestEmail] = useState<string>('');
+  const [title, setTitle] = useState<string>('');
+  const [contents, setContents] = useState<string>('');
+
+  useSetHeaderTitle('1:1 문의');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.support.qna.list);
+  });
+
+  const { mutateAsync: qnaSave } = useQnaSaveMutation();
+
+  const setInputValue = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
+    key: string
+  ) => {
+    let value = e.target.value;
+    if(key === QnaRegisterPropsName.Mid){
+      setMid(value);
+    }
+    else if(key === QnaRegisterPropsName.CounselType){
+      setCounselType(value);
+    }
+    else if(key === QnaRegisterPropsName.RequestName){
+      setRequestName(value);
+    }
+    else if(key === QnaRegisterPropsName.RequestTel){
+      setRequestTel(value);
+    }
+    else if(key === QnaRegisterPropsName.RequestEmail){
+      setRequestEmail(value);
+    }
+    else if(key === QnaRegisterPropsName.Title){
+      setTitle(value);
+    }
+    else if(key === QnaRegisterPropsName.Contents){
+      setContents(value);
+    }
+  };
+
+  const callRegister = () => {
+    let params = {
+      mid: mid,
+      counselType: counselType,
+      requestName: requestName,
+      requestTel: requestTel,
+      requestEmail: requestEmail,
+      title: title,
+      contents: contents,
+    };
+    qnaSave(params).then((rs) => {  
+      console.log(rs);
+      alert('성공');
+      navigate(PATHS.support.qna.list);
+    });
+  };
+
+  const onClickToRegisterQna = () => {
+    callRegister();
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane active">
+            <div className="inq-form">
+              <div className="inq-field">
+                <div className="inq-label">
+                  제목 <span className="red">*</span>
+                </div>
+                <div className="inq-control">
+                  <input 
+                    type="text" 
+                    value={ title }
+                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.Title) }
+                  />
+                </div>
+              </div>
+              <div className="inq-field">
+                <div className="inq-label">
+                  문의유형 <span className="red">*</span>
+                </div>
+                <div className="inq-control">
+                  <select
+                    value={ counselType }
+                    onChange={ (e: ChangeEvent<HTMLSelectElement>) => setInputValue(e, QnaRegisterPropsName.CounselType) } 
+                  >
+                    <option>선택</option>
+                  </select>
+                </div>
+              </div>
+              <div className="inq-field">
+                <div className="inq-label">
+                  요청자명 <span className="red">*</span>
+                </div>
+                <div className="inq-control">
+                  <input 
+                    type="text" 
+                    value={ requestName }
+                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestName) }
+                  />
+                </div>
+              </div>
+              <div className="inq-field">
+                <div className="inq-label">
+                  휴대폰번호 <span className="red">*</span>
+                </div>
+                <div className="inq-control">
+                  <input 
+                    type="text"
+                    placeholder="‘-’를 빼고 입력하세요"
+                    value={ requestTel }
+                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestTel) }
+                  />
+                </div>
+              </div>
+              <div className="inq-field">
+                <div className="inq-label">이메일 주소</div>
+                <div className="inq-control">
+                  <input 
+                    type="text"
+                    placeholder="TEST123@nicepay.com"
+                    value={ requestEmail }
+                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestEmail) }
+                  />
+                </div>
+              </div>
+              <div className="inq-text">
+                <div className="inq-text-label">
+                  문의내용 <span className="red">*</span>
+                </div>
+                <div className="inq-text-body">
+                  <textarea
+                    value={ contents }
+                    onChange={ (e: ChangeEvent<HTMLTextAreaElement>) => setInputValue(e, QnaRegisterPropsName.Contents) }
+                  ></textarea>
+                </div>
+              </div>
+            </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToRegisterQna() }
+              >요청</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/support/support-pages.tsx

@@ -7,6 +7,7 @@ import { FaqListPage } from './faq/list-page';
 import { FaqDetailPage } from './faq/detail-page';
 import { QnaListPage } from './qna/list-page';
 import { QnaDetailPage } from './qna/detail-page';
+import { QnaRegisterPage } from './qna/register-page';
 
 export const SupportPages = () => {
   return (
@@ -23,6 +24,7 @@ export const SupportPages = () => {
         <Route path={ROUTE_NAMES.support.qna.base}>
           <Route path={ROUTE_NAMES.support.qna.list} element={<QnaListPage />} />
           <Route path={ROUTE_NAMES.support.qna.detail} element={<QnaDetailPage />} />
+          <Route path={ROUTE_NAMES.support.qna.register} element={<QnaRegisterPage />} />
         </Route>
       </SentryRoutes>
     </>