첫 커밋

src/pages/account/account-pages.tsx

@@ -0,0 +1,31 @@
+import { Route } from 'react-router-dom';
+import { SentryRoutes } from '@/shared/configs/sentry';
+import { ROUTE_NAMES } from '@/shared/constants/route-names';
+import { UserManagePage } from './user/manage-page';
+import { UserLoginAuthInfoPage } from './user/login-auth-info-page';
+import { UserAccountAuthPage } from './user/account-auth-page';
+import { UserMenuAuthPage } from './user/menu-auth-page';
+import { UserAddAccountPage } from './user/add-account-page';
+import { PasswordManagePage } from './password/manage-page';
+import { PasswordModifyLoginPasswordPage } from './password/modify-login-password-page';
+
+export const AccountPages = () => {
+  
+  return (
+    <>
+      <SentryRoutes>
+        <Route path={ROUTE_NAMES.account.user.base}>
+          <Route path={ROUTE_NAMES.account.user.manage} element={<UserManagePage />} />
+          <Route path={ROUTE_NAMES.account.user.loginAuthInfo} element={<UserLoginAuthInfoPage />} />
+          <Route path={ROUTE_NAMES.account.user.accountAuth} element={<UserAccountAuthPage />} />
+          <Route path={ROUTE_NAMES.account.user.menuAuth} element={<UserMenuAuthPage />} />
+          <Route path={ROUTE_NAMES.account.user.addAccount} element={<UserAddAccountPage />} />
+        </Route>
+        <Route path={ROUTE_NAMES.account.password.base}>
+          <Route path={ROUTE_NAMES.account.password.manage} element={<PasswordManagePage />} />
+          <Route path={ROUTE_NAMES.account.password.modifyLoginPassword} element={<PasswordModifyLoginPasswordPage />} />
+        </Route>
+      </SentryRoutes>
+    </>
+  );
+};

src/pages/account/password/manage-page.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { AccountTab } from '@/entities/account/ui/account-tab';
+import { PasswordManageWrap } from '@/entities/account/ui/password-manage-wrap';
+import { AccountTabKeys } from '@/entities/account/model/types';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const PasswordManagePage = () => {
+  const { navigate } = useNavigate();
+
+  const [activeTab, setActiveTab] = useState<AccountTabKeys>(AccountTabKeys.PasswordManage);
+  useSetHeaderTitle('계정 관리');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active" id="tab1">
+            <AccountTab activeTab={ activeTab }></AccountTab>
+            <PasswordManageWrap></PasswordManageWrap>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/account/password/modify-login-password-page.tsx

@@ -0,0 +1,72 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const PasswordModifyLoginPasswordPage = () => {
+  const { navigate } = useNavigate();
+
+  useSetHeaderTitle('로그인 비밀번호 변경');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.account.password.manage);
+  });
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="ing-list add">
+              <div className="user-add">
+                <div className="ua-row">
+                  <div className="ua-label">가맹점 <span className="red">*</span></div>
+                  <select className="wid-100">
+                    <option>nictest01g</option>
+                  </select>
+                </div>
+                <div className="ua-row">
+                  <div className="ua-label">기존 비밀번호 <span className="red">*</span></div>
+                  <input 
+                    className="wid-100"
+                    type="password"
+                    placeholder=""
+                  />
+                </div>
+                <div className="ua-row">
+                  <div className="ua-label">변경 비밀번호 <span className="red">*</span></div>
+                  <input 
+                    className="wid-100 error"
+                    type="password"
+                    placeholder=""
+                  />
+                </div>
+                <div className="ua-help error">입력 정보 불일치</div>
+                <div className="ua-row">
+                  <div className="ua-label">변경 비밀번호 재입력 <span className="red">*</span></div>
+                  <input 
+                    className="wid-100 error"
+                    type="password"
+                    placeholder=""
+                  />
+                </div>
+              </div>
+
+              <div className="apply-row">
+                <button 
+                  className="btn-50 btn-blue flex-1"
+                  type="button"
+                >저장</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/account/user/account-auth-page.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { AccountUserTab } from '@/entities/account/ui/account-user-tab';
+import { UserAccountAuthWrap } from '@/entities/account/ui/user-account-auth-wrap';
+import { AccountUserTabKeys } from '@/entities/account/model/types';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const UserAccountAuthPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+  const [tid, setTid] = useState<string>(location?.state.tid);
+
+  const [activeTab, setActiveTab] = useState<AccountUserTabKeys>(AccountUserTabKeys.AccountAuth);
+  useSetHeaderTitle('사용자 설정');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.account.user.manage);
+  });
+
+  useEffect(() => {
+    console.log('tid : ', tid);
+  });
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <AccountUserTab 
+              activeTab={ activeTab }
+              tid={ tid }
+            ></AccountUserTab>
+            <UserAccountAuthWrap
+              tid={ tid }
+            ></UserAccountAuthWrap>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/account/user/add-account-page.tsx

@@ -0,0 +1,120 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+export const UserAddAccountPage = () => {
+  const { navigate } = useNavigate();
+
+  useSetHeaderTitle('사용자 추가');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.account.user.manage);
+  });
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="ing-list add">
+              <div className="user-add">
+                <div className="ua-row">
+                  <div className="ua-label">사용자ID <span className="red">*</span></div>
+                  <input 
+                    className="wid-100 error"
+                    type="text"
+                    placeholder="ID를 입력해 주세요"
+                  />
+                </div>
+                <div className="ua-help error">동일한 ID가 이미 존재합니다.</div>
+
+                <div className="ua-row">
+                  <div className="ua-label">비밀번호 <span className="red">*</span></div>
+                  <input 
+                    className="wid-100 error"
+                    type="password"
+                    placeholder="8자리 이상 입력해 주세요"
+                  />
+                </div>
+                <div className="ua-help error">(오류 결과 메시지)</div>
+
+                <div className="ua-row">
+                  <div className="ua-label">로그인 범위</div>
+                  <select className="wid-100">
+                    <option>MID + GID</option>
+                  </select>
+                </div>
+              </div>
+              <div className="info-divider"></div>
+              <div className="user-add info">
+                <div className="ua-desc">
+                  <div className="ua-title">본인인증용 정보 입력</div>
+                  <p className="ua-note">입력하신 정보는 이후 로그인 및 가맹점 관련 자료 발송에 이용됩니다.</p>
+                </div>
+
+                <div className="ua-group">
+                  <div className="ua-group-header">
+                    <div className="ua-group-title">이메일 주소</div>
+                    <button 
+                      className="ic20 plus" 
+                      type="button" 
+                      aria-label="이메일 추가"
+                    ></button>
+                  </div>
+                  <div className="ua-input-row">
+                    <input 
+                      className="wid-100" 
+                      type="text" 
+                      placeholder="example@domain.com" 
+                    />
+                    <button 
+                      className="icon-btn minus" 
+                      type="button" 
+                      aria-label="삭제"
+                    ></button>
+                  </div>
+                </div>
+
+                <div className="ua-group">
+                  <div className="ua-group-header">
+                    <div className="ua-group-title">휴대폰 번호</div>
+                    <button 
+                      className="ic20 plus" 
+                      type="button" 
+                      aria-label="휴대폰 추가"
+                    ></button>
+                  </div>
+                  <div className="ua-input-row">
+                    <input 
+                      className="wid-100"
+                      type="text"
+                      placeholder="01012345678"
+                    />
+                    <button 
+                      className="icon-btn minus" 
+                      type="button" 
+                      aria-label="삭제"
+                    ></button>
+                  </div>
+                </div>
+              </div>
+
+              <div className="apply-row">
+                <button 
+                  className="btn-50 btn-blue flex-1"
+                  type="button" 
+                >저장</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/account/user/login-auth-info-page.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { AccountUserTab } from '@/entities/account/ui/account-user-tab';
+import { UserLoginAuthInfoWrap } from '@/entities/account/ui/user-login-auth-info-wrap';
+import { AccountUserTabKeys } from '@/entities/account/model/types';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const UserLoginAuthInfoPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+  const [tid, setTid] = useState<string>(location?.state.tid);
+
+  const [activeTab, setActiveTab] = useState<AccountUserTabKeys>(AccountUserTabKeys.LoginAuthInfo);
+  useSetHeaderTitle('사용자 설정');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.account.user.manage);
+  });
+
+  useEffect(() => {
+    console.log('tid : ', tid);
+  }, []);
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <AccountUserTab 
+              activeTab={ activeTab }
+              tid={ tid }
+            ></AccountUserTab>
+            <UserLoginAuthInfoWrap
+              tid={ tid }
+            ></UserLoginAuthInfoWrap>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/account/user/manage-page.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { AccountTab } from '@/entities/account/ui/account-tab';
+import { UserManageWrap } from '@/entities/account/ui/user-manage-wrap';
+import { AccountTabKeys } from '@/entities/account/model/types';
+import { FooterItemActiveKey } from '@/entities/common/model/types';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetFooterCurrentPage,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const UserManagePage = () => {
+  const { navigate } = useNavigate();
+
+  const [activeTab, setActiveTab] = useState<AccountTabKeys>(AccountTabKeys.UserManage);
+  useSetHeaderTitle('계정 관리');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetFooterCurrentPage(FooterItemActiveKey.Account);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active" id="tab1">
+            <AccountTab activeTab={ activeTab }></AccountTab>
+            <UserManageWrap></UserManageWrap>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/account/user/menu-auth-page.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const UserMenuAuthPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+  const [tid, setTid] = useState<string>(location?.state.tid);
+  const [menuId, setMenuId] = useState<string>(location?.state.menuId);
+
+  useSetHeaderTitle('사용자 설정');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.account.user.accountAuth, {
+      state: {
+        tid: tid
+      }
+    });
+  });
+
+  useEffect(() => {
+    console.log('tid : ', tid);
+    console.log('menuId : ', menuId);
+  });
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="ing-list sev">
+              <div className="desc service-tip">메뉴별 사용 권한을 설정해 주세요.</div>
+              <div className="desc service-tip">선택한 권한에 따라 기능 이용이 제한됩니다.</div>
+
+              <div className="settings-section nopadding">
+                <div className="settings-row">
+                  <div className="settings-row-title bd-style">거래내역 조회</div>
+                  <label className="settings-switch">
+                    <input 
+                      type="checkbox" 
+                      checked 
+                    />
+                    <span className="slider"></span>
+                  </label>
+                </div>
+                <div className="set-divider"></div>
+                <div className="settings-row">
+                  <span className="settings-row-title bd-sub dot">등록</span>
+                  <label className="settings-switch">
+                    <input 
+                      type="checkbox" 
+                      checked 
+                    />
+                    <span className="slider"></span>
+                  </label>
+                </div>
+                <div className="settings-row">
+                  <span className="settings-row-title bd-sub dot">수정</span>
+                  <label className="settings-switch">
+                    <input 
+                      type="checkbox" 
+                      checked 
+                    />
+                    <span className="slider"></span>
+                  </label>
+                </div>
+                <div className="settings-row">
+                  <span className="settings-row-title bd-sub dot">삭제</span>
+                  <label className="settings-switch">
+                    <input 
+                      type="checkbox" 
+                      checked 
+                    />
+                    <span className="slider"></span>
+                  </label>
+                </div>
+                <div className="settings-row">
+                  <span className="settings-row-title bd-sub dot">다운로드</span>
+                  <label className="settings-switch">
+                    <input 
+                      type="checkbox" 
+                      checked 
+                    />
+                    <span className="slider"></span>
+                  </label>
+                </div>
+              </div>
+              <div className="ht-20"></div>
+                <div className="settings-section">
+                  <div className="settings-row">
+                    <div className="settings-row-title bd-style">현금영수증 발행</div>
+                    <label className="settings-switch">
+                      <input type="checkbox" />
+                      <span className="slider"></span>
+                    </label>
+                  </div>
+                  <div className="settings-row">
+                    <div className="settings-row-title bd-style">에스크로</div>
+                    <label className="settings-switch">
+                      <input type="checkbox" />
+                      <span className="slider"></span>
+                    </label>
+                  </div>
+                  <div className="settings-row">
+                    <div className="settings-row-title bd-style">빌링</div>
+                    <label className="settings-switch">
+                      <input type="checkbox" />
+                      <span className="slider"></span>
+                    </label>
+                  </div>
+              </div>
+
+              <div className="apply-row">
+                <button 
+                  className="btn-50 btn-blue flex-1"
+                  type="button" 
+                >저장</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};