첫 커밋

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

@@ -0,0 +1,37 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { 
+  AccountTabKeys, 
+  AccountTabProps 
+} from '../model/types';
+
+export const AccountTab = ({
+  activeTab
+}: AccountTabProps) => {
+  const { navigate } = useNavigate();
+
+  const onClickToNavigation = (tab: AccountTabKeys) => {
+    if(activeTab !== tab){
+      if(tab === AccountTabKeys.UserManage){
+        navigate(PATHS.account.user.manage);
+      }
+      else if(tab === AccountTabKeys.PasswordManage){
+        navigate(PATHS.account.password.manage);
+      }
+    }
+  };
+  return(
+    <>
+      <div className="subTab">
+        <button 
+          className={`subtab-btn ${(activeTab === AccountTabKeys.UserManage)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(AccountTabKeys.UserManage) } 
+        >사용자 관리</button>
+        <button 
+          className={`subtab-btn ${(activeTab === AccountTabKeys.PasswordManage)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(AccountTabKeys.PasswordManage) } 
+        >비밀번호 관리</button>
+      </div>
+    </>
+  );
+};

src/entities/account/ui/account-user-tab.tsx

@@ -0,0 +1,46 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { 
+  AccountUserTabKeys,
+  AccountUserTabProps 
+} from '../model/types';
+
+export const AccountUserTab = ({
+  activeTab,
+  tid
+}: AccountUserTabProps) => {
+  const { navigate } = useNavigate();
+
+  const onClickToNavigation = (tab: AccountUserTabKeys) => {
+    if(activeTab !== tab){
+      if(tab === AccountUserTabKeys.LoginAuthInfo){
+        navigate(PATHS.account.user.loginAuthInfo, {
+          state: {
+            tid: tid
+          }
+        });
+      }
+      else if(tab === AccountUserTabKeys.AccountAuth){
+        navigate(PATHS.account.user.accountAuth, {
+          state: {
+            tid: tid
+          }
+        });
+      }
+    }
+  };
+  return(
+    <>
+      <div className="subTab">
+        <button 
+          className={`subtab-btn ${(activeTab === AccountUserTabKeys.LoginAuthInfo)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(AccountUserTabKeys.LoginAuthInfo) } 
+        >로그인 인증정보</button>
+        <button 
+          className={`subtab-btn ${(activeTab === AccountUserTabKeys.AccountAuth)? 'active': ''}` }
+          onClick={ () => onClickToNavigation( AccountUserTabKeys.AccountAuth) } 
+        >계정권한</button>
+      </div>
+    </>
+  );
+};

src/entities/account/ui/password-manage-wrap.tsx

@@ -0,0 +1,29 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+
+export const PasswordManageWrap = () => {
+  const { navigate } = useNavigate();
+
+  const onClickTonavigation = () => {
+    navigate(PATHS.account.password.modifyLoginPassword);
+  };
+  return (
+    <>
+      <div className="ing-list">
+        <div className="pwd-manage mt-20">
+          <div className="pwd-buttons">
+            <button 
+              className="btn-44 btn-white pwd-btn"
+              type="button"
+              onClick={ () => onClickTonavigation() }
+            >로그인 비밀번호 변경</button>
+            <button 
+              className="btn-44 btn-white pwd-btn"
+              type="button"
+            >거래취소 비밀번호 변경</button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+};

src/entities/account/ui/user-account-auth-perm-item.tsx

@@ -0,0 +1,31 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { UserAccountAuthPermItemProps } from '../model/types';
+
+export const UserAccountAuthPermItem = ({
+  tid,
+  menuId,
+  permName
+}: UserAccountAuthPermItemProps) => {
+  const { navigate } = useNavigate();
+
+  const onClickToNavigation = () => {
+    navigate(PATHS.account.user.menuAuth, {
+      state: {
+        tid: tid,
+        menuId: menuId
+      }
+    })
+  };
+  return (
+    <>
+      <div 
+        className="perm-item"
+        onClick={ () => onClickToNavigation() }
+      >
+        <span className="perm-name">{ permName }</span>
+        <span className="ic20 arrow-right"></span>
+      </div>
+    </>
+  );
+};

src/entities/account/ui/user-account-auth-perm-list.tsx

@@ -0,0 +1,30 @@
+import { UserAccountAuthPermListProps } from '../model/types';
+import { UserAccountAuthPermItem } from './user-account-auth-perm-item';
+export const UserAccountAuthPermList = ({
+  tid,
+  permItems
+}: UserAccountAuthPermListProps) => {
+
+  const getPermItems = () => {
+    let rs = [];
+    for(let i=0;i<permItems.length;i++){
+      rs.push(
+        <UserAccountAuthPermItem
+          key={ 'key-perm-item-' + i }
+          tid={ tid }
+          menuId={ permItems[i]?.menuId }
+          permName={ permItems[i]?.permName }
+        ></UserAccountAuthPermItem>
+      );
+    }
+    return rs;
+  };
+
+  return (
+    <>
+      <div className="perm-list">
+        { getPermItems() }
+      </div>
+    </>
+  );
+};

src/entities/account/ui/user-account-auth-wrap.tsx

@@ -0,0 +1,58 @@
+import { UserAccountAuthWrapProps } from '../model/types';
+import { UserAccountAuthPermList } from './user-account-auth-perm-list';
+
+export const UserAccountAuthWrap = ({
+  tid
+}: UserAccountAuthWrapProps) => {
+  let menuItems = [
+    {menuId: 'menu1', permName: '거래조회'},
+    {menuId: 'menu2', permName: '정산조회'},
+    {menuId: 'menu3', permName: '가맹점 관리'},
+    {menuId: 'menu4', permName: '결제 관리'},
+    {menuId: 'menu5', permName: '계정 관리'},
+    {menuId: 'menu6', permName: '부가세 신고 자료'},
+    {menuId: 'menu7', permName: '부가서비스'},
+    {menuId: 'menu8', permName: '고객지원'},
+  ];
+  return (
+    <>
+      <div className="ing-list pdtop">
+        <div className="perm-form">
+          <div className="perm-field">
+            <div className="perm-label">계정 상태</div>
+            <div className="perm-control">
+              <select>
+                <option selected>사용</option>
+                <option>미사용</option>
+              </select>
+            </div>
+          </div>
+          <div className="perm-field">
+            <div className="perm-label">로그인 범위</div>
+            <div className="perm-control">
+              <select>
+                <option>MID</option>
+                <option>GID</option>
+                <option selected>MID + GID</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div className="ing-title fs18">메뉴별 권한 설정</div>
+
+        <UserAccountAuthPermList
+          tid={ tid }
+          permItems={ menuItems }
+        ></UserAccountAuthPermList>
+
+        <div className="apply-row bottom-padding">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            type="button" 
+          >저장</button>
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/account/ui/user-login-auth-info-wrap.tsx

@@ -0,0 +1,100 @@
+import { UserLoginAuthInfoWrapProps } from '../model/types';
+
+export const UserLoginAuthInfoWrap = ({
+  tid
+}: UserLoginAuthInfoWrapProps) => {
+
+  return (
+    <>
+      <div className="ing-list pdtop">
+        <div className="settings-login-auth">
+          <div className="group">
+            <div className="group-header">
+              <div className="title">이메일 주소</div>
+              <button 
+                className="ic20 plus" 
+                type="button" 
+                aria-label="추가"
+              ></button>
+            </div>
+            <div className="input-row">
+              <input 
+                type="text" 
+                value="nicetest01@nicepay.co.kr" 
+                placeholder="example@domain.com" 
+              />
+              <button 
+                className="icon-btn minus" 
+                type="button" 
+                aria-label="삭제"
+              ></button>
+            </div>
+            <div className="input-row">
+              <input 
+                type="text" 
+                value="nicetest01@nicepay.co.kr"
+                placeholder="example@domain.com" 
+              />
+              <button 
+                className="icon-btn minus" 
+                type="button" 
+                aria-label="삭제"
+              ></button>
+            </div>
+            <div className="input-row">
+              <input 
+                type="text" 
+                placeholder="example@domain.com" 
+              />
+              <button 
+                className="icon-btn minus" 
+                type="button" 
+                aria-label="삭제"
+              ></button>
+            </div>
+          </div>
+
+          <div className="group">
+            <div className="group-header">
+              <div className="title">휴대폰 번호</div>
+              <button 
+                className="ic20 plus" 
+                type="button" 
+                aria-label="추가"
+              ></button>
+            </div>
+            <div className="input-row">
+              <input 
+                type="text" 
+                value="01012345678" 
+                placeholder="휴대폰 번호 입력" 
+              />
+              <button 
+                className="icon-btn minus" 
+                type="button" 
+                aria-label="삭제"
+              ></button>
+            </div>
+            <div className="input-row">
+              <input 
+                type="text" 
+                value="01012345678" 
+                placeholder="휴대폰 번호 입력" 
+                readOnly={ true } 
+              />
+              <button 
+                className="icon-btn minus" 
+                type="button" 
+                aria-label="삭제"
+              ></button>
+            </div>
+            <div className="notice-bar">※ 탭을 변경하면 미저장 내용은 초기화됩니다.</div>
+          </div>
+        </div>
+        <div className="apply-row bottom-padding">
+          <button className="btn-50 btn-blue flex-1">저장</button>
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/account/ui/user-manage-auth-item.tsx

@@ -0,0 +1,33 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { UserManageAuthItemProps } from '../model/types';
+
+export const UserManageAuthItem = ({
+  useYn,
+  authName,
+  tid
+}: UserManageAuthItemProps) => {
+  const { navigate } = useNavigate();
+
+  const onClickToNavigation = () => {
+    navigate(PATHS.account.user.loginAuthInfo, {
+      state: {
+        tid: tid
+      }
+    });
+  };
+  return (
+    <>
+      <div 
+        className="auth-item"
+        onClick={ () => onClickToNavigation() }
+      >
+        <div className="auth-item-left">
+          <span className={ `tag-pill ${(!!useYn)? '': 'red'}` }>{ (!!useYn)? '사용': '미사용' }</span>
+          <span className="auth-name">{ authName }</span>
+        </div>
+        <span className="ic20 arrow-right"></span>
+      </div>
+    </>
+  );
+};

src/entities/account/ui/user-manage-auth-list.tsx

@@ -0,0 +1,29 @@
+import { UserManageAuthItem } from './user-manage-auth-item';
+import { UserManageAuthListProps } from '../model/types';
+
+export const UserManageAuthList = ({
+  authItems
+}: UserManageAuthListProps) => {
+  
+  const getUserManageAuthItems = () => {
+    let rs = [];
+    for(let i=0;i<authItems.length;i++){
+      rs.push(
+        <UserManageAuthItem
+          key={ 'UserManageAuthItem-key-' + i }
+          useYn={ authItems[i]?.useYn }
+          authName= { authItems[i]?.authName }
+          tid= { authItems[i]?.tid }
+        ></UserManageAuthItem>
+      );
+    }
+    return rs;
+  }
+  return (
+    <>
+      <div className="auth-list">
+      { getUserManageAuthItems() }
+      </div>
+    </>
+  );
+};

src/entities/account/ui/user-manage-wrap.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { AuthItem } from '../model/types';
+import { UserManageAuthList } from './user-manage-auth-list';
+
+export const UserManageWrap = () => {
+  const { navigate } = useNavigate();
+
+  const [authItems, setAuthItems] = useState<Array<AuthItem>>([]);
+
+  const callAuthList = () => {
+    setAuthItems([
+      {useYn: true, authName: 'test01', tid: 'A12334556'},
+      {useYn: true, authName: 'test02', tid: 'A33334556'},
+      {useYn: true, authName: 'test03', tid: 'A12345556'},
+      {useYn: true, authName: 'test04', tid: 'A12978676'},
+      {useYn: false, authName: 'test05', tid: 'A12344444'},
+    ]);
+  };
+
+  const onClickToNavigation = () => {
+    navigate(PATHS.account.user.addAccount);
+  };
+
+  useEffect(() => {
+    callAuthList();
+  }, []);
+  return (
+    <>
+      <div className="ing-list">
+        <div className="input-wrapper top-select mt-16">
+          <select>
+            <option>nicetest00m</option>
+          </select>
+        </div>
+
+        <div className="ing-title">등록 현황</div>
+        { (!!authItems && authItems.length > 0) &&
+          <UserManageAuthList
+            authItems={ authItems }
+          ></UserManageAuthList>
+        }
+        <div className="apply-row bottom-padding">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToNavigation() }
+          >사용자 추가</button>
+        </div>
+      </div>
+    </>
+  );
+};