가맹점 정보, 일부 상수 및 공용 변경

src/entities/merchant/ui/info-wrap.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react';
+import { useMerchantMidMutation } from '../api/use-merchant-mid-mutation';
+import { BusinessInfoWrap } from './info-wrap/business-info-wrap';
+import { ManagerInfoWrap } from './info-wrap/manager-info-wrap';
+
+import {
+  InfoWrapKeys,
+  MerchantMidParams,
+  MerchantMidResponse
+} from '../model/types';
+
+export const InfoWrap = () => {
+
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [data, setData] = useState<MerchantMidResponse>();
+
+  const [openChild, setOpenChild] = useState<InfoWrapKeys | null>(null);
+  const { mutateAsync: merchantMid } = useMerchantMidMutation();
+
+  const callInfo = () => {
+    let params: MerchantMidParams = {
+      mid: mid,
+    };
+    merchantMid(params).then((rs: MerchantMidResponse) => {
+      setData(rs);
+    });
+  };
+
+  useEffect(() => {
+    callInfo();
+  }, []);
+
+  return (
+    <>
+      <div className="input-wrapper top-select mt-30">
+        <select>
+          <option value="1">nicetest00g</option>
+          <option value="2">nicetest00g</option>
+          <option value="3">nicetest00g</option>
+        </select>
+      </div>
+
+      <div className="merchant-info">
+        <BusinessInfoWrap
+          data={ data }
+        ></BusinessInfoWrap>
+        <div className="info-divider mb-16"></div>
+        <ManagerInfoWrap
+          type={ InfoWrapKeys.Merchant }
+          title='계약 담당자'
+          manager={ data?.merchantManager }
+          managerTelephone={ data?.merchantManagerTelephone }
+          managetEmail={ data?.merchantManagerEmail }
+          openChild={ openChild }
+          setOpenChild={ setOpenChild }
+        ></ManagerInfoWrap>
+        <div className="info-divider mb-16"></div>
+        <ManagerInfoWrap
+          type={ InfoWrapKeys.Technical }
+          title='기술 담당자'
+          manager={ data?.technicalManager }
+          managerTelephone={ data?.technicalManagerTelephone }
+          managetEmail={ data?.technicalManagerEmail }
+          openChild={ openChild }
+          setOpenChild={ setOpenChild }
+        ></ManagerInfoWrap>
+        <div className="info-divider mb-16"></div>
+        <ManagerInfoWrap
+          type={ InfoWrapKeys.Settlement }
+          title='정산 담당자'
+          manager={ data?.settlementManager }
+          managerTelephone={ data?.settlementManagerTelephone }
+          managetEmail={ data?.settlementManagerEmail }
+          openChild={ openChild }
+          setOpenChild={ setOpenChild }
+        ></ManagerInfoWrap>
+        <div className="info-divider mb-16"></div>
+        
+        <div className="notice-bottom left-align">
+          <p className="notice-tip">※ 가맹점 정보는 앱에서 수정할 수 없습니다.<br/>PC 가맹점 관리자에서 설정해 주세요.</p>
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/merchant/ui/info-wrap/business-info-wrap.tsx

@@ -0,0 +1,70 @@
+import { MerchantMidResponse } from '../../model/types';
+
+export interface BusinessInfoWrapProps {
+  data?: MerchantMidResponse
+};
+
+export const BusinessInfoWrap = ({
+  data
+}: BusinessInfoWrapProps) => {
+
+  return (
+    <>
+      <div className="section">
+        <div className="section-title">기본정보</div>
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">상호</span>
+            <span className="v">{ data?.businessCompanyName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">사업자번호</span>
+            <span className="v">{ data?.businessRegistrationNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">사업자속성</span>
+            <span className="v">{ data?.businessScaleTypeName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">업종</span>
+            <span className="v">{ data?.businessType }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">업태</span>
+            <span className="v">{ data?.businessCategory }</span>
+          </li>
+        </ul>
+      </div>
+      <div className="info-divider mb-16"></div>
+      <div className="section">
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">대표자명</span>
+            <span className="v">{ data?.representativeName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">대표 연락처</span>
+            <span className="v">{ data?.telephoneNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">대표 이메일</span>
+            <span className="v">{ data?.email }</span>
+          </li>
+        </ul>
+      </div>
+      <div className="info-divider mb-16"></div>
+      <div className="section">
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">사업장주소</span>
+            <span className="v">{ data?.businessAddress }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">홈페이지 주소</span>
+            <span className="v">{ data?.url }</span>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+};

src/entities/merchant/ui/info-wrap/manager-info-wrap.tsx

@@ -0,0 +1,75 @@
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { InfoWrapKeys, MerchantMidResponse } from '../../model/types';
+import SlideDown from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+import { useEffect, useState } from 'react';
+
+export interface ManagerInfoWrapProps {
+  type: InfoWrapKeys;
+  title?: string;
+  manager?: string;
+  managerTelephone?: string;
+  managetEmail?: string;
+  openChild: InfoWrapKeys | null;
+  setOpenChild: (openChild: InfoWrapKeys | null) => void;
+};
+
+export const ManagerInfoWrap = ({
+  type,
+  title,
+  manager,
+  managerTelephone,
+  managetEmail,
+  openChild,
+  setOpenChild
+}: ManagerInfoWrapProps) => {
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const opeSection = () => {
+    const staus = !isOpen;
+    setIsOpen(staus);
+    if(!!staus){
+      setOpenChild(type);  
+    }
+    else {
+      setOpenChild(null)
+    }
+  };
+
+  useEffect(() => {
+    if(!!openChild && openChild !== type){
+    setIsOpen(false);
+    }
+  }, [openChild]);
+  
+  return (
+    <>
+      <div className="section">
+        <div className="section-title"
+          onClick={ () => opeSection() }
+        >
+          { title } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+        </div>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { isOpen &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">{ manager }</span>
+              <span className="v"></span>
+            </li>
+            <li className="kv-row">
+              <span className="k">{ managerTelephone }</span>
+              <span className="v"></span>
+            </li>
+            <li className="kv-row">
+              <span className="k">{ managetEmail }</span>
+              <span className="v"></span>
+            </li>
+          </ul>
+        }
+        </SlideDown> 
+      </div>
+    </>
+  );
+};

src/entities/merchant/ui/merchant-tab.tsx

@@ -0,0 +1,37 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import {
+  MerchantTabKeys,
+  MerchantTabProps
+} from '../model/types';
+
+export const MerchantTab = ({
+  activeTab
+}: MerchantTabProps) => {
+  const { navigate } = useNavigate();
+
+  const onClickToNavigation = (tab: MerchantTabKeys) => {
+    if(activeTab !== tab){
+      if(tab === MerchantTabKeys.Info){
+        navigate(PATHS.merchant.info);
+      }
+      else if(tab === MerchantTabKeys.RegistrationStatus){
+        navigate(PATHS.merchant.registrationStatus);
+      }
+    }
+  };
+  return(
+    <>
+      <div className="subTab">
+        <button 
+          className={`subtab-btn ${(activeTab === MerchantTabKeys.Info)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(MerchantTabKeys.Info) } 
+        >가맹점 정보</button>
+        <button 
+          className={`subtab-btn ${(activeTab === MerchantTabKeys.RegistrationStatus)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(MerchantTabKeys.RegistrationStatus) } 
+        >등록현황</button>
+      </div>
+    </>
+  );
+};

src/entities/merchant/ui/registration-status-wrap.tsx

@@ -0,0 +1,8 @@
+export const RegistrationStatusWrap = () => {
+
+  return (
+    <>
+    
+    </>
+  );
+};