첫 커밋

src/entities/business-member/ui/business-member-tab.tsx

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

src/entities/business-member/ui/info-arrow.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { InfoArrowProps } from '../model/types';
+
+export const InfoArrow = ({ show }: InfoArrowProps) => {
+  const [altMsg, setAltMsg] = useState<'접기' | '펼치기'>('접기');
+  const [className, setClassName] = useState<string>('ic20 rot-180');
+
+  useEffect(() => {
+    setAltMsg((show)? '접기': '펼치기');
+    setClassName(`ic20 ${(show)? 'rot-180': ''}`);
+  }, [show]);
+
+  return (
+    <>
+      <img
+        className={ className }
+        src={ IMAGE_ROOT + '/select_arrow.svg' } 
+        alt={ altMsg }
+      />
+    </>
+  );
+};

src/entities/business-member/ui/info-basic-info.tsx

@@ -0,0 +1,36 @@
+import { InfoProps } from '../model/types';
+
+export const InfoBasicInfo = ({
+  InfoBasicInfo
+}: InfoProps) => {
+
+  return (
+    <>
+      <div className="section">
+        <div className="section-title">기본정보</div>
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">상호</span>
+            <span className="v">나이스테스트</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">사업자번호</span>
+            <span className="v">123-45-16798</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">사업자속성</span>
+            <span className="v">일반</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">업종</span>
+            <span className="v">식품</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">업태</span>
+            <span className="v">식품</span>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+};

src/entities/business-member/ui/info-company-info.tsx

@@ -0,0 +1,23 @@
+import { InfoProps } from '../model/types';
+
+export const InfoCompanyInfo = ({
+  InfoCompanyInfo
+}: InfoProps) => {
+
+  return (
+    <>
+      <div className="section">
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">사업장주소</span>
+            <span className="v">서울특별시 마포구 마포대로 217(아현동)</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">홈페이지 주소</span>
+            <span className="v">https://adm.dev-nicepay.co.kr:8011</span>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+};

src/entities/business-member/ui/info-contract-manager.tsx

@@ -0,0 +1,53 @@
+import { motion } from 'framer-motion';
+import { BusinessMemberInfoKeys, InfoProps } from '../model/types';
+import { InfoArrow } from './info-arrow';
+
+export const InfoContractManager = ({
+  infoContractManager,
+  show,
+  onClickToShowInfo
+}: InfoProps) => {
+
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(BusinessMemberInfoKeys.InfoContractManager);
+    }
+  };
+
+  return (
+    <>
+      <div className="section">
+        <div className="section-title"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          계약 담당자 <InfoArrow show={ show }></InfoArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <li className="kv-row">
+            <span className="k">김테스트</span>
+            <span className="v"></span>
+          </li>
+          <li className="kv-row">
+            <span className="k">010-1234-****</span>
+            <span className="v"></span>
+          </li>
+          <li className="kv-row">
+            <span className="k">testkim@nicepay.co.kr</span>
+            <span className="v"></span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  );
+};

src/entities/business-member/ui/info-owner-info.tsx

@@ -0,0 +1,27 @@
+import { InfoProps } from '../model/types';
+
+export const InfoOwnerInfo = ({
+  InfoOwnerInfo
+}: InfoProps) => {
+
+  return (
+    <>
+      <div className="section">
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">대표자명</span>
+            <span className="v">김테스트</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">대표 연락처</span>
+            <span className="v">010-1234-1234</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">대표 이메일</span>
+            <span className="v">testkim@nicepay.co.kr</span>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+};

src/entities/business-member/ui/info-settlement-account.tsx

@@ -0,0 +1,53 @@
+import { motion } from 'framer-motion';
+import { BusinessMemberInfoKeys, InfoProps } from '../model/types';
+import { InfoArrow } from './info-arrow';
+
+export const InfoSettlementAccount = ({
+  infoSettlementAccount,
+  show,
+  onClickToShowInfo
+}: InfoProps) => {
+
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(BusinessMemberInfoKeys.InfoSettlementAccount);
+    }
+  };
+
+  return (
+    <>
+      <div className="section">
+        <div className="section-title"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          정산계좌 <InfoArrow show={ show }></InfoArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <li className="kv-row">
+            <span className="k">은행</span>
+            <span className="v">신한은행</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">계좌번호</span>
+            <span className="v">123-45-16798</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">예금주</span>
+            <span className="v">김테스트</span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  );
+};

src/entities/business-member/ui/info-settlement-manager.tsx

@@ -0,0 +1,53 @@
+import { motion } from 'framer-motion';
+import { BusinessMemberInfoKeys, InfoProps } from '../model/types';
+import { InfoArrow } from './info-arrow';
+
+export const InfoSettlementManager = ({
+  infoSettlementManager,
+  show,
+  onClickToShowInfo
+}: InfoProps) => {
+
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(BusinessMemberInfoKeys.InfoSettlementManager);
+    }
+  };
+
+  return (
+    <>
+      <div className="section">
+        <div className="section-title"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          정산 담당자 <InfoArrow show={ show }></InfoArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <li className="kv-row">
+            <span className="k">김테스트</span>
+            <span className="v"></span>
+          </li>
+          <li className="kv-row">
+            <span className="k">010-1234-****</span>
+            <span className="v"></span>
+          </li>
+          <li className="kv-row">
+            <span className="k">testkim@nicepay.co.kr</span>
+            <span className="v"></span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  );
+};

src/entities/business-member/ui/info-technical-manager.tsx

@@ -0,0 +1,53 @@
+import { motion } from 'framer-motion';
+import { BusinessMemberInfoKeys, InfoProps } from '../model/types';
+import { InfoArrow } from './info-arrow';
+
+export const InfoTechnicalManager = ({
+  infoTechnicalManager,
+  show,
+  onClickToShowInfo
+}: InfoProps) => {
+
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(BusinessMemberInfoKeys.InfoTechnicalManager);
+    }
+  };
+
+  return (
+    <>
+      <div className="section">
+        <div className="section-title"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          기술 담당자 <InfoArrow show={ show }></InfoArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <li className="kv-row">
+            <span className="k">김테스트</span>
+            <span className="v"></span>
+          </li>
+          <li className="kv-row">
+            <span className="k">010-1234-****</span>
+            <span className="v"></span>
+          </li>
+          <li className="kv-row">
+            <span className="k">testkim@nicepay.co.kr</span>
+            <span className="v"></span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,121 @@
+import { useEffect, useState } from 'react';
+import { useBusinessMemberInfoMutation } from '../api/use-business-member-info-mutation';
+import { InfoBasicInfo } from './info-basic-info';
+import { InfoOwnerInfo } from './info-owner-info';
+import { InfoCompanyInfo } from './info-company-info';
+import { InfoContractManager } from './info-contract-manager';
+import { InfoTechnicalManager } from './info-technical-manager';
+import { InfoSettlementManager } from './info-settlement-manager';
+import { InfoSettlementAccount } from './info-settlement-account';
+import {
+  BusinessMemberInfoParams,
+  BusinessMemberInfoResponse,
+  InfoContractManagerProps,
+  InfoTechnicalManagerProps,
+  InfoSettlementManagerProps,
+  InfoSettlementAccountProps,
+  BusinessMemberInfoKeys
+} from '../model/types';
+
+export const InfoWrap = () => {
+  const [infoContractManager, setInfoContractManager] = useState<InfoContractManagerProps>();
+  const [infoTechnicalManager, setInfoTechnicalManager] = useState<InfoTechnicalManagerProps>();
+  const [infoSettlementManager, setInfoSettlementManager] = useState<InfoSettlementManagerProps>();
+  const [infoSettlementAccount, setInfoSettlementAccount] = useState<InfoSettlementAccountProps>();
+  const [showInfoContractManager, setShowInfoContractManager] = useState<boolean>(false);
+  const [showInfoTechnicalManager, setShowInfoTechnicalManager] = useState<boolean>(false);
+  const [showInfoSettlementManager, setShowInfoSettlementManager] = useState<boolean>(false);
+  const [showInfoSettlementAccount, setShowInfoSettlemenAccount] = useState<boolean>(false);
+
+  const { mutateAsync: businessMemberInfo } = useBusinessMemberInfoMutation();
+
+  const callInfo = () => {
+    let businessMemberInfoParams: BusinessMemberInfoParams = {
+      svcCd: 'st',
+    };
+    businessMemberInfo(businessMemberInfoParams).then((rs: BusinessMemberInfoResponse) => {
+      setInfoContractManager(rs.infoContractManager);
+      setInfoTechnicalManager(rs.infoTechnicalManager);
+      setInfoSettlementManager(rs.infoSettlementManager);
+      setInfoSettlementAccount(rs.infoSettlementAccount);
+    });
+  };
+
+  const onClickToShowInfo = (info: BusinessMemberInfoKeys) => {
+    if(info === BusinessMemberInfoKeys.InfoContractManager){
+      setShowInfoContractManager(!showInfoContractManager);
+    }
+    else if(info === BusinessMemberInfoKeys.InfoTechnicalManager){
+      setShowInfoTechnicalManager(!showInfoTechnicalManager);
+    }
+    else if(info === BusinessMemberInfoKeys.InfoSettlementManager){
+      setShowInfoSettlementManager(!showInfoSettlementManager);
+    }
+    else if(info === BusinessMemberInfoKeys.InfoSettlementAccount){
+      setShowInfoSettlemenAccount(!showInfoSettlementAccount);
+    }
+  };
+
+  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">
+        <InfoBasicInfo></InfoBasicInfo>
+        <div className="info-divider mb-16"></div>
+
+        <InfoOwnerInfo></InfoOwnerInfo>
+
+        <div className="info-divider mb-16"></div>
+
+        <InfoCompanyInfo></InfoCompanyInfo>
+
+        <div className="info-divider mb-16"></div>
+
+        <InfoContractManager
+          infoContractManager={ infoContractManager }
+          show={ showInfoContractManager }
+          onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+        ></InfoContractManager>
+
+        <div className="info-divider mb-16"></div>
+
+        <InfoTechnicalManager
+          infoTechnicalManager={ infoTechnicalManager }
+          show={ showInfoTechnicalManager }
+          onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+        ></InfoTechnicalManager>
+
+        <div className="info-divider mb-16"></div>
+
+        <InfoSettlementManager
+          infoSettlementManager={ infoSettlementManager }
+          show={ showInfoSettlementManager }
+          onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+        ></InfoSettlementManager>
+
+        <div className="info-divider mb-16"></div>
+
+        <InfoSettlementAccount
+          infoSettlementManager={ infoSettlementAccount }
+          show={ showInfoSettlementAccount }
+          onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+        ></InfoSettlementAccount>
+
+        <div className="notice-bottom left-align">
+          <p className="notice-tip">※ 가맹점 정보는 앱에서 수정할 수 없습니다.<br/>PC 가맹점 관리자에서 설정해 주세요.</p>
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/business-member/ui/registration-status-wrap.tsx

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