nice-app-web/src/pages/support/qna/register-page.tsx

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>
    </>
  );
};