From 9d774bfa2205fe57b8f683f5f85886953cdc4076 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=9A=B0?= <122512457+hyo-nu@users.noreply.github.com> Date: Sun, 14 Jul 2024 10:21:39 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[KAN-192]=20feat(login):=20Alert,=20Confirm?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/App.jsx | 9 ++-- client/src/components/LoginForm.jsx | 4 +- client/src/components/SignupForm.jsx | 4 +- .../vendor/modal/FIndVendorPasswordModal.jsx | 5 +- .../vendor/modal/FindVendorIdModal.jsx | 6 ++- .../vendor/modal/ResetPasswordModal.jsx | 4 +- client/src/pages/vendor/DashBoardPage.jsx | 53 ++++++++++++------- client/src/utils/dialog/alert/Alert.jsx | 21 ++++---- .../utils/dialog/alertwidth/AlertWidth.jsx | 36 +++++++++++++ .../dialog/alertwidth/AlertWidthContext.js | 7 +++ .../dialog/alertwidth/AlertWidthDialog.jsx | 28 ++++++++++ client/src/utils/dialog/confirm/Confirm.jsx | 24 +++++---- client/tailwind.config.js | 2 + 13 files changed, 154 insertions(+), 49 deletions(-) create mode 100644 client/src/utils/dialog/alertwidth/AlertWidth.jsx create mode 100644 client/src/utils/dialog/alertwidth/AlertWidthContext.js create mode 100644 client/src/utils/dialog/alertwidth/AlertWidthDialog.jsx diff --git a/client/src/App.jsx b/client/src/App.jsx index c9b9ba50..738efa18 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -2,14 +2,17 @@ import root from '@/routes/root'; import { RouterProvider } from 'react-router-dom'; import ConfirmDialog from '@/utils/dialog/confirm/ConfirmDialog'; import AlertDialog from './utils/dialog/alert/AlertDialog'; +import AlertWidthDialog from './utils/dialog/alertwidth/AlertWidthDialog'; const App = () => { return (
- - - + + + + +
); diff --git a/client/src/components/LoginForm.jsx b/client/src/components/LoginForm.jsx index 7ace3d2e..791925d9 100644 --- a/client/src/components/LoginForm.jsx +++ b/client/src/components/LoginForm.jsx @@ -80,7 +80,9 @@ const LoginForm = () => { / setIsShowPasswordModal(true)}>비밀번호 찾기 -
diff --git a/client/src/components/SignupForm.jsx b/client/src/components/SignupForm.jsx index b6f04cf3..a752b058 100644 --- a/client/src/components/SignupForm.jsx +++ b/client/src/components/SignupForm.jsx @@ -145,7 +145,7 @@ const SignupForm = () => { className={`ml-3 w-32 rounded-lg text-white text-sm font-700 h-46 ${ vendorFormData.username !== null && vendorFormData.username.length > 4 - ? 'bg-mint hover:bg-mint_hover' + ? 'bg-mint hover:bg-mint_hover transition-all duration-200 ' : 'bg-btn_disa' } `} onClick={handleCheckUsername}> @@ -244,7 +244,7 @@ const SignupForm = () => {
diff --git a/client/src/components/vendor/modal/FIndVendorPasswordModal.jsx b/client/src/components/vendor/modal/FIndVendorPasswordModal.jsx index 5b787fa5..5d07ddf7 100644 --- a/client/src/components/vendor/modal/FIndVendorPasswordModal.jsx +++ b/client/src/components/vendor/modal/FIndVendorPasswordModal.jsx @@ -72,7 +72,7 @@ const FindVendoPasswordModal = ({ ${ vendorPasswordFormData.phonePassword !== null && vendorPasswordFormData.phonePassword.length > 0 - ? 'bg-mint hover:bg-mint_hover' + ? 'bg-mint hover:bg-mint_hover transition-all duration-200' : 'bg-btn_disa' } `}> 인증번호 받기 @@ -88,7 +88,8 @@ const FindVendoPasswordModal = ({ onKeyDown={handleKeyDown} /> diff --git a/client/src/components/vendor/modal/FindVendorIdModal.jsx b/client/src/components/vendor/modal/FindVendorIdModal.jsx index 29372e48..98c2754d 100644 --- a/client/src/components/vendor/modal/FindVendorIdModal.jsx +++ b/client/src/components/vendor/modal/FindVendorIdModal.jsx @@ -57,7 +57,7 @@ const FindVendorIdModal = ({ icon, isShowModal, setIsShowModal, modalTitle }) => className={`ml-3 w-3/12 disabled: text-white text-base font-700 h-54 rounded-xl ${ vendorIdFormData.phoneId !== null && vendorIdFormData.phoneId.length > 0 - ? 'bg-mint hover:bg-mint_hover' + ? 'bg-mint hover:bg-mint_hover transition-all duration-200' : 'bg-btn_disa' } `}> 인증번호 받기 @@ -72,7 +72,9 @@ const FindVendorIdModal = ({ icon, isShowModal, setIsShowModal, modalTitle }) => onChange={handleChangeValue} onKeyDown={handleKeyDown} /> - diff --git a/client/src/components/vendor/modal/ResetPasswordModal.jsx b/client/src/components/vendor/modal/ResetPasswordModal.jsx index f43928fe..ee35f101 100644 --- a/client/src/components/vendor/modal/ResetPasswordModal.jsx +++ b/client/src/components/vendor/modal/ResetPasswordModal.jsx @@ -50,7 +50,9 @@ const ResetPasswordModal = ({ icon, isShowModal, setIsShowModal, modalTitle }) = onChange={handleChangeValue} onKeyDown={handleKeyDown} /> - diff --git a/client/src/pages/vendor/DashBoardPage.jsx b/client/src/pages/vendor/DashBoardPage.jsx index 8d2632ce..86113a7f 100644 --- a/client/src/pages/vendor/DashBoardPage.jsx +++ b/client/src/pages/vendor/DashBoardPage.jsx @@ -1,30 +1,29 @@ import { getMemberList } from '@/apis/member'; +import { useContext } from 'react'; import AlertContext from '@/utils/dialog/alert/AlertContext'; +import AlertWdithContext from '@/utils/dialog/alertwidth/AlertWidthContext'; import ConfirmContext from '@/utils/dialog/confirm/ConfirmContext'; -import { useContext } from 'react'; const DashBoardPage = () => { - // 회원 목록 조회 - const axiosMemberList = async () => { - try { - const res = await getMemberList(); - console.log('!----회원 목록 조회 성공----!'); // 삭제예정 - console.log(res.data); - } catch (err) { - console.error('axiosMemberList => ', err.response.data); - } - }; - const { alert: alertComp } = useContext(AlertContext); const onAlertClick = async () => { - const result = await alertComp('hello world'); + const result = await alertComp('인증번호가 전송되었습니다!'); + console.log('onAlertClick : ', result); + }; + + const { alertWidth: alertCompWidth } = useContext(AlertWdithContext); + + const onAlertWidthClick = async () => { + const result = await alertCompWidth('hello world Width'); + console.log('onAlertWidthClick : ', result); }; const { confirm: confirmComp } = useContext(ConfirmContext); const onConfirmClick = async () => { - const result = await confirmComp('are you sure?'); + const result = await confirmComp('상품을 삭제 하시겠습니까?'); + console.log('onConfirmClick : ', result); }; return ( @@ -44,12 +43,26 @@ const DashBoardPage = () => {
-

DashBoard

- -
- -
- +

DashBoard

+
+ +
+ +
+ +
); diff --git a/client/src/utils/dialog/alert/Alert.jsx b/client/src/utils/dialog/alert/Alert.jsx index 2ce93739..047bead3 100644 --- a/client/src/utils/dialog/alert/Alert.jsx +++ b/client/src/utils/dialog/alert/Alert.jsx @@ -14,19 +14,22 @@ const Alert = ({ message, onClose }) => { }, [onClose]); return ( -
-
e.stopPropagation()} /> -
-

Alert

-
{message}
+
+
e.stopPropagation()} /> +
+

+ 효성 CMS# +

+
+

{message}

+
diff --git a/client/src/utils/dialog/alertwidth/AlertWidth.jsx b/client/src/utils/dialog/alertwidth/AlertWidth.jsx new file mode 100644 index 00000000..a0993410 --- /dev/null +++ b/client/src/utils/dialog/alertwidth/AlertWidth.jsx @@ -0,0 +1,36 @@ +import { useEffect } from 'react'; + +const AlertWidth = ({ message, onClose }) => { + useEffect(() => { + const handleEscape = e => { + if (e.key === 'Escape') { + onClose(); + } + }; + + document.addEventListener('keydown', handleEscape); + + return () => document.removeEventListener('keydown', handleEscape); + }, [onClose]); + + return ( +
+
e.stopPropagation()} /> +
+

효성 CMS#

+
{message}
+
+ +
+
+
+ ); +}; + +export default AlertWidth; diff --git a/client/src/utils/dialog/alertwidth/AlertWidthContext.js b/client/src/utils/dialog/alertwidth/AlertWidthContext.js new file mode 100644 index 00000000..c6542050 --- /dev/null +++ b/client/src/utils/dialog/alertwidth/AlertWidthContext.js @@ -0,0 +1,7 @@ +import { createContext } from 'react'; + +const AlertWdithContext = createContext({ + alertWidth: () => new Promise((_, reject) => reject()), +}); + +export default AlertWdithContext; diff --git a/client/src/utils/dialog/alertwidth/AlertWidthDialog.jsx b/client/src/utils/dialog/alertwidth/AlertWidthDialog.jsx new file mode 100644 index 00000000..15dacb9b --- /dev/null +++ b/client/src/utils/dialog/alertwidth/AlertWidthDialog.jsx @@ -0,0 +1,28 @@ +import { useState } from 'react'; +import AlertWidthContext from './AlertWidthContext'; +import AlertWidth from './AlertWidth'; + +const AlertWidthDialog = ({ children }) => { + const [state, setState] = useState(); + + const alertWidth = message => { + return new Promise(resolve => { + setState({ + message: message !== undefined ? `${message}` : '', + onClose: () => { + setState(undefined); + resolve(undefined); + }, + }); + }); + }; + + return ( + + {children} + {state && } + + ); +}; + +export default AlertWidthDialog; diff --git a/client/src/utils/dialog/confirm/Confirm.jsx b/client/src/utils/dialog/confirm/Confirm.jsx index 6ae64dad..8278aad9 100644 --- a/client/src/utils/dialog/confirm/Confirm.jsx +++ b/client/src/utils/dialog/confirm/Confirm.jsx @@ -14,22 +14,28 @@ const Confirm = ({ message, onClickOK, onClickCancel }) => { }, [onClickCancel]); return ( -
-
e.stopPropagation()} /> -
-

Confirm

-
{message}
+
+
e.stopPropagation()} /> +
+

+ 효성 CMS# +

+
+

{message}

+
diff --git a/client/tailwind.config.js b/client/tailwind.config.js index d7d11335..e744d762 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -13,6 +13,7 @@ export default { ipt_disa: '#F1F1F1', // 입력창 비활성화 essential: '#FF0000', // 필수정보 별태그 btn_disa: '#C4C4C4', // 버튼 비활성화 + negative: '#F14141', // 취소, 실패 버튼 }, screens: { @@ -44,6 +45,7 @@ export default { 'dash-sub': '0px 1px 6px 0px #DADBDC', // 서브 대시보드 그림자 sidebars: '0 1px 3.5px 0 rgba(218, 219, 220, 1)', // 사이드바 아이콘 그림자 modal: '0 3px 10px rgba(209, 209, 209, 1)', + dialog: '0 0 15px rgba(0, 0, 0, 0.1)', // alert, confirm }, fontWeight: { From 8f6fdcef3ed9789b3442d118a4a5b14f8d294316 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=9A=B0?= <122512457+hyo-nu@users.noreply.github.com> Date: Mon, 15 Jul 2024 09:19:48 +0900 Subject: [PATCH 2/4] =?UTF-8?q?[KAN-149]=20feat(login):=20bradCrumb=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/common/BreadCrumb.jsx | 79 ++++++++++++++++-- client/src/components/common/SelectField.jsx | 2 +- client/src/layouts/Header.jsx | 9 +- client/src/pages/vendor/DashBoardPage.jsx | 1 - client/src/routes/memberRoute.jsx | 27 +++--- client/src/routes/root.jsx | 19 ++--- client/src/routes/vendorRoute.jsx | 87 +++++++++----------- 7 files changed, 134 insertions(+), 90 deletions(-) diff --git a/client/src/components/common/BreadCrumb.jsx b/client/src/components/common/BreadCrumb.jsx index c08fec73..4d0995ff 100644 --- a/client/src/components/common/BreadCrumb.jsx +++ b/client/src/components/common/BreadCrumb.jsx @@ -1,13 +1,80 @@ -import User from '@/assets/User'; +import vendorRoute from '@/routes/vendorRoute'; +import { useEffect, useState } from 'react'; +import { useLocation } from 'react-router-dom'; const BreadCrumb = () => { + const [currentRoute, setCurrentRoute] = useState({ + icon: '', + name: '', + childName: '', + }); + + const location = useLocation(); + + const currentPaths = location.pathname.split('/').filter(path => path); + + const breadCrumbTitle = () => { + for (const route of vendorRoute()) { + if (currentPaths[1] === route.path) { + setCurrentRoute({ + icon: route.icon, + name: route.name, + childName: '', + }); + } + } + }; + + const breadCrumbSetting = () => { + for (const route of vendorRoute()) { + if (currentPaths[1] === route.path) { + setCurrentRoute({ + icon: route.icon, + name: route.name, + childName: route.name, + }); + + if (route.children) { + if (!currentPaths[2]) { + setCurrentRoute({ + icon: route.icon, + name: route.name, + childName: route.children[0].name, + }); + return; + } else { + for (const child of route.children) { + if (child.path.indexOf(currentPaths[2]) != -1) { + setCurrentRoute({ + icon: route.icon, + name: route.name, + childName: child.name, + }); + return; + } + } + } + } + return; + } + } + }; + + useEffect(() => { + breadCrumbSetting(); + }, [location]); + return ( -
-
- +
+
+
{currentRoute.icon}
+ +

/

+

{currentRoute.name}

+

/

+

{currentRoute.childName}

- / -
회원목록
+

{currentRoute.childName}

); }; diff --git a/client/src/components/common/SelectField.jsx b/client/src/components/common/SelectField.jsx index cd51f825..c24834f4 100644 --- a/client/src/components/common/SelectField.jsx +++ b/client/src/components/common/SelectField.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import Checkbox from '@/components/common/CheckBox'; +import Checkbox from '@/components/common/inputs/CheckBox'; const SelectField = ({ label, required, options, onChange, selectedOptions, ...props }) => { const [isOpen, setIsOpen] = useState(false); diff --git a/client/src/layouts/Header.jsx b/client/src/layouts/Header.jsx index 3b22f6f9..c16e76bd 100644 --- a/client/src/layouts/Header.jsx +++ b/client/src/layouts/Header.jsx @@ -1,15 +1,8 @@ import BreadCrumb from '@/components/common/BreadCrumb'; -import vendorRoute from '@/routes/vendorRoute'; const Header = () => { - const tmp = () => { - for (const roots of vendorRoute()) { - console.log(roots); - } - }; - return ( -
+
); diff --git a/client/src/pages/vendor/DashBoardPage.jsx b/client/src/pages/vendor/DashBoardPage.jsx index 86113a7f..dac606c1 100644 --- a/client/src/pages/vendor/DashBoardPage.jsx +++ b/client/src/pages/vendor/DashBoardPage.jsx @@ -1,4 +1,3 @@ -import { getMemberList } from '@/apis/member'; import { useContext } from 'react'; import AlertContext from '@/utils/dialog/alert/AlertContext'; import AlertWdithContext from '@/utils/dialog/alertwidth/AlertWidthContext'; diff --git a/client/src/routes/memberRoute.jsx b/client/src/routes/memberRoute.jsx index 22038185..67cca8af 100644 --- a/client/src/routes/memberRoute.jsx +++ b/client/src/routes/memberRoute.jsx @@ -1,13 +1,10 @@ import { Navigate } from 'react-router-dom'; -import { lazy } from 'react'; -import LazyComponentWrapper from '@/pages/utils/LazyComponentWrapper'; - -const SimpConsent = lazy(() => import('@/pages/member/SimpConsentPage')); // 간편동의 등록 -const Invoice = lazy(() => import('@/pages/member/InvoicePage')); // 청구서 상세조회 -const PaymentChoose = lazy(() => import('@/pages/member/PaymentChoosePage')); // 청구서 결제수단 선택 -const PaymentCard = lazy(() => import('@/pages/member/PaymentCardPage')); // 납부자결제 (카드) -const PaymentAccount = lazy(() => import('@/pages/member/PaymentAccountPage')); // 납부자결제 (계좌) -const PaymentVirtual = lazy(() => import('@/pages/member/PaymentVirtualPage')); // 가상계좌결제 +import SimpConsent from '@/pages/member/SimpConsentPage'; // 간편동의 등록 +import Invoice from '@/pages/member/InvoicePage'; // 청구서 상세조회 +import PaymentChoose from '@/pages/member/PaymentChoosePage'; // 청구서 결제수단 선택 +import PaymentCard from '@/pages/member/PaymentCardPage'; // 납부자결제 (카드) +import PaymentAccount from '@/pages/member/PaymentAccountPage'; // 납부자결제 (계좌) +import PaymentVirtual from '@/pages/member/PaymentVirtualPage'; // 가상계좌결제 const memberRoute = () => { return [ @@ -17,27 +14,27 @@ const memberRoute = () => { }, { path: 'simpconsent/:memberid?', - element: , + element: , }, { path: 'invoice/:invoiceId', - element: , + element: , }, { path: 'invoice/payment', - element: , + element: , }, { path: 'invoice/payment/card', - element: , + element: , }, { path: 'invoice/payment/account', - element: , + element: , }, { path: 'invoice/payment/virtual', - element: , + element: , }, ]; }; diff --git a/client/src/routes/root.jsx b/client/src/routes/root.jsx index 3be52a8e..bc9dc003 100644 --- a/client/src/routes/root.jsx +++ b/client/src/routes/root.jsx @@ -1,13 +1,10 @@ -import { lazy } from 'react'; import { Navigate, createBrowserRouter } from 'react-router-dom'; -import LazyComponentWrapper from '@/pages/utils/LazyComponentWrapper'; import vendorRoute from './vendorRoute'; import memberRoute from './memberRoute'; - -const Login = lazy(() => import('@/pages/LoginPage')); // 로그인 -const Signup = lazy(() => import('@/pages/SignupPage')); // 회원가입 -const VendorIndex = lazy(() => import('@/pages/vendor/VenIndexPage')); // 고객 중첩 라우팅 -const MemberIndex = lazy(() => import('@/pages/member/MemIndexPage')); // 회원 중첩 라우팅 +import Login from '@/pages/LoginPage'; // 로그인 +import Signup from '@/pages/SignupPage'; // 회원가입 +import VendorIndex from '@/pages/vendor/VenIndexPage'; // 고객 중첩 라우팅 +import MemberIndex from '@/pages/member/MemIndexPage'; // 회원 중첩 라우팅 const root = createBrowserRouter([ { @@ -16,20 +13,20 @@ const root = createBrowserRouter([ }, { path: 'login', - element: , + element: , }, { path: 'signup', - element: , + element: , }, { path: 'vendor', - element: , + element: , children: vendorRoute(), }, { path: 'member', - element: , + element: , children: memberRoute(), }, ]); diff --git a/client/src/routes/vendorRoute.jsx b/client/src/routes/vendorRoute.jsx index c5bcb216..bfca1f7c 100644 --- a/client/src/routes/vendorRoute.jsx +++ b/client/src/routes/vendorRoute.jsx @@ -1,38 +1,29 @@ import { Navigate } from 'react-router-dom'; -import { lazy } from 'react'; -import LazyComponentWrapper from '@/pages/utils/LazyComponentWrapper'; import User from '@/assets/User'; import Home from '@/assets/Home'; import File from '@/assets/File'; import Card from '@/assets/Card'; import Item from '@/assets/Item'; import Setting from '@/assets/Setting'; -import ProductListPage from '@/pages/vendor/product/ProductListPage'; - -const DashBoard = lazy(() => import('@/pages/vendor/DashBoardPage')); // 대시보드 - -const MemberIndex = lazy(() => import('@/pages/vendor/member/MemberIndex')); // 회원 -const MemberList = lazy(() => import('@/pages/vendor/member/MemberListPage')); // 회원목록 -const MemberDetail = lazy(() => import('@/pages/vendor/member/MemberDetailPage')); // 회원상세 -const MemberRegister = lazy(() => import('@/pages/vendor/member/MemberRegisterPage')); // 회원등록 -const MemberIngoUpdate = lazy(() => import('@/pages/vendor/member/MemberInfoUpdatePage')); // 회원수정 - -const ContractIndex = lazy(() => import('@/pages/vendor/contract/ContractIndex')); // 계약 -const ContractList = lazy(() => import('@/pages/vendor/contract/ContractListPage')); // 계약목록 -const ContractDetail = lazy(() => import('@/pages/vendor/contract/ContractDetailPage')); // 계약상세 -const ProductInfoUpdate = lazy(() => import('@/pages/vendor/contract/ProductInfoUpdatePage')); // 상품수정 -const BillingInfoUpdate = lazy(() => import('@/pages/vendor/contract/BillingInfoUpdatePage')); // 청구수정 -const PaymentInfoUpdate = lazy(() => import('@/pages/vendor/contract/PaymentInfoUpdatePage')); // 결제수정 - -const BillingtIndex = lazy(() => import('@/pages/vendor/billing/BillingIndex')); // 청구 -const BillingList = lazy(() => import('@/pages/vendor/billing/BillingListPage')); // 청구목록 -const BillingDetail = lazy(() => import('@/pages/vendor/billing/BillingDetailPage')); // 청구상세 - -const ProductIndex = lazy(() => import('@/pages/vendor/product/ProductIndex')); // 상품 -const ProductList = lazy(() => import('@/pages/vendor/product/ProductListPage')); // 상품목록 - -const SettingIndex = lazy(() => import('@/pages/vendor/setting/SettingIndex')); // 간편서명동의설정 -const SettingSimpConsent = lazy(() => import('@/pages/vendor/setting/SettingSimpConsentPage')); // 간편서명동의설정 +import DashBoard from '@/pages/vendor/DashBoardPage'; +import MemberIndex from '@/pages/vendor/member/MemberIndex'; +import MemberList from '@/pages/vendor/member/MemberListPage'; +import MemberDetail from '@/pages/vendor/member/MemberDetailPage'; +import MemberRegister from '@/pages/vendor/member/MemberRegisterPage'; +import MemberInfoUpdate from '@/pages/vendor/member/MemberInfoUpdatePage'; +import ContractIndex from '@/pages/vendor/contract/ContractIndex'; +import ContractList from '@/pages/vendor/contract/ContractListPage'; +import ContractDetail from '@/pages/vendor/contract/ContractDetailPage'; +import ProductInfoUpdate from '@/pages/vendor/contract/ProductInfoUpdatePage'; +import BillingInfoUpdate from '@/pages/vendor/contract/BillingInfoUpdatePage'; +import PaymentInfoUpdate from '@/pages/vendor/contract/PaymentInfoUpdatePage'; +import BillingIndex from '@/pages/vendor/billing/BillingIndex'; +import BillingList from '@/pages/vendor/billing/BillingListPage'; +import BillingDetail from '@/pages/vendor/billing/BillingDetailPage'; +import ProductIndex from '@/pages/vendor/product/ProductIndex'; +import ProductList from '@/pages/vendor/product/ProductListPage'; +import SettingIndex from '@/pages/vendor/setting/SettingIndex'; +import SettingSimpConsent from '@/pages/vendor/setting/SettingSimpConsentPage'; const vendorRoute = () => { return [ @@ -44,37 +35,37 @@ const vendorRoute = () => { path: 'dashboard', name: '대시보드', icon: , - element: , + element: , }, { path: 'members', name: '회원', icon: , - element: , + element: , children: [ { path: '', name: '회원 목록', menu: true, - element: , + element: , }, { path: 'detail/:id', name: '회원 상세 정보', menu: false, - element: , + element: , }, { path: 'register', name: '회원 등록', menu: false, - element: , + element: , }, { path: 'update/:id', name: '회원 정보 수정', menu: false, - element: , + element: , }, ], }, @@ -82,37 +73,37 @@ const vendorRoute = () => { path: 'contracts', name: '계약', icon: , - element: , + element: , children: [ { path: '', name: '계약 목록', menu: true, - element: , + element: , }, { path: 'detail/:id', name: '계약 상세 정보', menu: false, - element: , + element: , }, { path: 'Product/update/:id', name: '상품 정보 수정', menu: false, - element: , + element: , }, { path: 'payment/update/:id', name: '결제 정보 수정', menu: false, - element: , + element: , }, { path: 'billings/update/:id', - name: '청구 정보 수저', + name: '청구 정보 수정', menu: false, - element: , + element: , }, ], }, @@ -120,19 +111,19 @@ const vendorRoute = () => { path: 'billings', name: '청구', icon: , - element: , + element: , children: [ { path: '', name: '청구 목록', menu: true, - element: , + element: , }, { path: 'detail/:id', name: '청구 상세 정보', menu: false, - element: , + element: , }, ], }, @@ -140,13 +131,13 @@ const vendorRoute = () => { path: 'products', name: '상품', icon: , - element: , + element: , children: [ { path: '', name: '상품 목록', menu: true, - element: , + element: , }, ], }, @@ -154,7 +145,7 @@ const vendorRoute = () => { path: 'setting', name: '설정', icon: , - element: , + element: , children: [ { path: '', @@ -166,7 +157,7 @@ const vendorRoute = () => { path: 'simpconsent', name: '간편서명동의 설정', menu: true, - element: , + element: , }, ], }, From affbf5b78a2185b20b20af0109333b319ab1bffc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=9A=B0?= <122512457+hyo-nu@users.noreply.github.com> Date: Mon, 15 Jul 2024 11:01:02 +0900 Subject: [PATCH 3/4] =?UTF-8?q?[KAN-149]=20feat(login):=20breadCrumb=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/common/BreadCrumb.jsx | 24 +++++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/client/src/components/common/BreadCrumb.jsx b/client/src/components/common/BreadCrumb.jsx index 4d0995ff..105e73e0 100644 --- a/client/src/components/common/BreadCrumb.jsx +++ b/client/src/components/common/BreadCrumb.jsx @@ -5,26 +5,35 @@ import { useLocation } from 'react-router-dom'; const BreadCrumb = () => { const [currentRoute, setCurrentRoute] = useState({ icon: '', - name: '', - childName: '', + name: [], }); const location = useLocation(); - const currentPaths = location.pathname.split('/').filter(path => path); + const currentPaths = location.pathname + .split('/') + .filter(path => path) + .slice(1); const breadCrumbTitle = () => { for (const route of vendorRoute()) { - if (currentPaths[1] === route.path) { + if (currentPaths[0] === route.path) { setCurrentRoute({ icon: route.icon, - name: route.name, - childName: '', + name: [route.name], }); + + return route; } } }; + const breadCrumbMenu = route => { + if (route.child) { + setCurrentRoute({}); + } + }; + const breadCrumbSetting = () => { for (const route of vendorRoute()) { if (currentPaths[1] === route.path) { @@ -61,7 +70,8 @@ const BreadCrumb = () => { }; useEffect(() => { - breadCrumbSetting(); + const route = breadCrumbTitle(); + breadCrumbSetting(route); }, [location]); return ( From 5dc9f9d5dc079e71a3012d77c645f066c7f252ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=9A=B0?= <122512457+hyo-nu@users.noreply.github.com> Date: Mon, 15 Jul 2024 14:44:51 +0900 Subject: [PATCH 4/4] =?UTF-8?q?[KAN-149]=20feat(login):=20breadCrumb=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/assets/Home.jsx | 5 +- client/src/assets/Item.jsx | 11 ++- client/src/components/common/BreadCrumb.jsx | 78 +++++++++------------ client/src/layouts/SideBar.jsx | 11 ++- client/src/routes/vendorRoute.jsx | 12 ++-- 5 files changed, 60 insertions(+), 57 deletions(-) diff --git a/client/src/assets/Home.jsx b/client/src/assets/Home.jsx index eec9bd95..75f6f1f8 100644 --- a/client/src/assets/Home.jsx +++ b/client/src/assets/Home.jsx @@ -6,7 +6,10 @@ const Home = props => ( xmlns='http://www.w3.org/2000/svg' {...props} // props를 통해 스타일이나 클래스 등을 전달할 수 있습니다. > - + ); diff --git a/client/src/assets/Item.jsx b/client/src/assets/Item.jsx index 0ad585de..97d0dd8b 100644 --- a/client/src/assets/Item.jsx +++ b/client/src/assets/Item.jsx @@ -1,17 +1,26 @@ const Item = props => ( - + { - const [currentRoute, setCurrentRoute] = useState({ + const [currentRoutes, setCurrentRoutes] = useState({ icon: '', name: [], }); @@ -18,7 +18,7 @@ const BreadCrumb = () => { const breadCrumbTitle = () => { for (const route of vendorRoute()) { if (currentPaths[0] === route.path) { - setCurrentRoute({ + setCurrentRoutes({ icon: route.icon, name: [route.name], }); @@ -28,63 +28,49 @@ const BreadCrumb = () => { } }; - const breadCrumbMenu = route => { - if (route.child) { - setCurrentRoute({}); - } - }; - - const breadCrumbSetting = () => { - for (const route of vendorRoute()) { - if (currentPaths[1] === route.path) { - setCurrentRoute({ - icon: route.icon, - name: route.name, - childName: route.name, - }); - - if (route.children) { - if (!currentPaths[2]) { - setCurrentRoute({ - icon: route.icon, - name: route.name, - childName: route.children[0].name, - }); - return; - } else { - for (const child of route.children) { - if (child.path.indexOf(currentPaths[2]) != -1) { - setCurrentRoute({ - icon: route.icon, - name: route.name, - childName: child.name, - }); - return; - } - } - } + const breadCrumbMenu = (route, idx) => { + if (route.children) { + for (const child of route.children) { + console.log(child.name); + console.log(currentPaths.length); + if (currentPaths.length === 1) { + setCurrentRoutes(prevState => ({ + ...prevState, + name: [...prevState.name, child.name], + })); + return; + } else if (child.path.includes(currentPaths[idx])) { + setCurrentRoutes(prevState => ({ + ...prevState, + name: [...prevState.name, child.name], + })); + breadCrumbMenu(child, idx + 1); + return; } - return; } } }; useEffect(() => { const route = breadCrumbTitle(); - breadCrumbSetting(route); + breadCrumbMenu(route, 1); + console.log(currentRoutes.name); }, [location]); return (
-
{currentRoute.icon}
- -

/

-

{currentRoute.name}

-

/

-

{currentRoute.childName}

+
{currentRoutes.icon}
+ {currentRoutes.name.map((name, idx) => ( + <> +

/

+

0 && 'text-text_black'}`}>{name}

+ + ))}
-

{currentRoute.childName}

+

+ {currentRoutes.name[currentRoutes.name.length - 1]} +

); }; diff --git a/client/src/layouts/SideBar.jsx b/client/src/layouts/SideBar.jsx index d9f255fd..bbda7967 100644 --- a/client/src/layouts/SideBar.jsx +++ b/client/src/layouts/SideBar.jsx @@ -1,14 +1,18 @@ -import { NavLink } from 'react-router-dom'; +import { NavLink, useNavigate } from 'react-router-dom'; import vendorRoute from '@/routes/vendorRoute'; import React from 'react'; import { useSideBarActiveStore } from '@/stores/useSideBarActiveStore'; const SideBar = () => { + const navigate = useNavigate(); + const { sideBarMenus, toggle } = useSideBarActiveStore(); return (
-
+
navigate('/vendor')}> logo

HYOSUNG CMS#

@@ -29,7 +33,8 @@ const SideBar = () => { className={`mr-4 flex h-9 w-9 items-center justify-center rounded-xl ${isActive ? 'bg-mint' : 'bg-white shadow-sidebars'}`}> {React.cloneElement(route.icon, { className: 'h-4 w-4', - fill: isActive ? 'white' : '#4FD1C5', + fill: isActive ? '#ffffff' : '#4FD1C5', + stroke: '#ffffff', })}

{ { path: 'dashboard', name: '대시보드', - icon: , + icon: , element: , }, { path: 'members', name: '회원', - icon: , + icon: , element: , children: [ { @@ -72,7 +72,7 @@ const vendorRoute = () => { { path: 'contracts', name: '계약', - icon: , + icon: , element: , children: [ { @@ -110,7 +110,7 @@ const vendorRoute = () => { { path: 'billings', name: '청구', - icon: , + icon: , element: , children: [ { @@ -130,7 +130,7 @@ const vendorRoute = () => { { path: 'products', name: '상품', - icon: , + icon: , element: , children: [ { @@ -144,7 +144,7 @@ const vendorRoute = () => { { path: 'setting', name: '설정', - icon: , + icon: , element: , children: [ {