Merge pull request #95 from Try-AngIe/feat/login

Feat/login
Try-AngIe · Jul 15, 2024 · fe5e459 · fe5e459
2 parents 7fc0d75 + c451cb8
commit fe5e459
Show file tree

Hide file tree

Showing 22 changed files with 616 additions and 423 deletions.
diff --git 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 (
     <div className='flex h-full w-full justify-center'>
       <AlertDialog>
-        <ConfirmDialog>
-          <RouterProvider router={root} />
-        </ConfirmDialog>
+        <AlertWidthDialog>
+          <ConfirmDialog>
+            <RouterProvider router={root} />
+          </ConfirmDialog>
+        </AlertWidthDialog>
       </AlertDialog>
     </div>
   );

diff --git a/client/src/assets/Home.jsx b/client/src/assets/Home.jsx
@@ -1,13 +1,16 @@
-const Home = props => (
-  <svg
-    width='15'
-    height='15'
-    viewBox='0 0 15 14'
-    xmlns='http://www.w3.org/2000/svg'
-    {...props} // props를 통해 스타일이나 클래스 등을 전달할 수 있습니다.
-  >
-    <path d='M14.4704 5.11124C14.3744 5.25573 14.2154 5.33373 14.0539 5.33373C13.959 5.33373 13.8625 5.30623 13.777 5.24973L7.5547 1.10135L1.33244 5.24973C1.10145 5.40223 0.791964 5.34073 0.63897 5.11124C0.485476 4.88124 0.547474 4.57125 0.777465 4.41776L7.27721 0.0843727C7.4452 -0.0281243 7.6637 -0.0281243 7.83169 0.0843727L14.3314 4.41776C14.5619 4.57125 14.6239 4.88124 14.4704 5.11124ZM1.55493 5.50023V8.50015V11.0001V13C1.55493 13.55 2.00492 14 2.5549 14H6.05476V9.50012C6.05476 9.22513 6.27975 9.00013 6.55474 9.00013H8.55466C8.82965 9.00013 9.05464 9.22513 9.05464 9.50012V14H12.5545C13.1045 14 13.5545 13.55 13.5545 13V11.0001V8.50015V5.50023L7.5547 1.50033L1.55493 5.50023Z' />
-  </svg>
-);
-
-export default Home;
+const Home = props => (
+  <svg
+    width='15'
+    height='15'
+    viewBox='0 0 15 14'
+    xmlns='http://www.w3.org/2000/svg'
+    {...props} // props를 통해 스타일이나 클래스 등을 전달할 수 있습니다.
+  >
+    <path
+      d='M14.4704 5.11124C14.3744 5.25573 14.2154 5.33373 14.0539 5.33373C13.959 5.33373 13.8625 5.30623 13.777 5.24973L7.5547 1.10135L1.33244 5.24973C1.10145 5.40223 0.791964 5.34073 0.63897 5.11124C0.485476 4.88124 0.547474 4.57125 0.777465 4.41776L7.27721 0.0843727C7.4452 -0.0281243 7.6637 -0.0281243 7.83169 0.0843727L14.3314 4.41776C14.5619 4.57125 14.6239 4.88124 14.4704 5.11124ZM1.55493 5.50023V8.50015V11.0001V13C1.55493 13.55 2.00492 14 2.5549 14H6.05476V9.50012C6.05476 9.22513 6.27975 9.00013 6.55474 9.00013H8.55466C8.82965 9.00013 9.05464 9.22513 9.05464 9.50012V14H12.5545C13.1045 14 13.5545 13.55 13.5545 13V11.0001V8.50015V5.50023L7.5547 1.50033L1.55493 5.50023Z'
+      fill={props.color}
+    />
+  </svg>
+);
+
+export default Home;
diff --git a/client/src/assets/Item.jsx b/client/src/assets/Item.jsx
@@ -1,22 +1,31 @@
-const Item = props => (
-  <svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' {...props}>
-    <path
-      d='M2.74805 7.33325V12.6666C2.74805 13.0202 2.87993 13.3593 3.11469 13.6094C3.34945 13.8594 3.66784 13.9999 3.99984 13.9999H11.5106C11.8426 13.9999 12.161 13.8594 12.3958 13.6094C12.6305 13.3593 12.7624 13.0202 12.7624 12.6666V7.33325'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-    <path
-      d='M7.75538 3.66659C7.75538 3.04775 7.52458 2.45425 7.11376 2.01667C6.70293 1.57908 6.14574 1.33325 5.56474 1.33325C5.14975 1.33325 4.75175 1.50885 4.4583 1.82141C4.16486 2.13397 4 2.55789 4 2.99992C4 3.44195 4.16486 3.86587 4.4583 4.17843C4.75175 4.49099 5.14975 4.66659 5.56474 4.66659H7.75538M7.75538 3.66659V4.66659M7.75538 3.66659C7.75538 3.04775 7.98618 2.45425 8.39701 2.01667C8.80783 1.57908 9.36503 1.33325 9.94602 1.33325C10.361 1.33325 10.759 1.50885 11.0525 1.82141C11.3459 2.13397 11.5108 2.55789 11.5108 2.99992C11.5108 3.21879 11.4703 3.43551 11.3917 3.63772C11.313 3.83993 11.1978 4.02367 11.0525 4.17843C10.9072 4.33319 10.7347 4.45596 10.5448 4.53972C10.355 4.62348 10.1515 4.66659 9.94602 4.66659H7.75538'
-      strokeLinejoin='round'
-    />
-    <path
-      d='M7.75612 7.33317V13.9998M2.12305 4.6665H13.3892V7.33317H2.12305V4.6665Z'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-  </svg>
-);
-
-export default Item;
+const Item = props => (
+  <svg
+    width='16'
+    height='16'
+    viewBox='0 0 16 16'
+    fill={!props.fill}
+    xmlns='http://www.w3.org/2000/svg'
+    {...props}>
+    <path
+      d='M2.74805 7.33325V12.6666C2.74805 13.0202 2.87993 13.3593 3.11469 13.6094C3.34945 13.8594 3.66784 13.9999 3.99984 13.9999H11.5106C11.8426 13.9999 12.161 13.8594 12.3958 13.6094C12.6305 13.3593 12.7624 13.0202 12.7624 12.6666V7.33325'
+      stroke={props.stroke ? '#ffffff' : '#7B809A'}
+      strokeWidth='1.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+    <path
+      d='M7.75538 3.66659C7.75538 3.04775 7.52458 2.45425 7.11376 2.01667C6.70293 1.57908 6.14574 1.33325 5.56474 1.33325C5.14975 1.33325 4.75175 1.50885 4.4583 1.82141C4.16486 2.13397 4 2.55789 4 2.99992C4 3.44195 4.16486 3.86587 4.4583 4.17843C4.75175 4.49099 5.14975 4.66659 5.56474 4.66659H7.75538M7.75538 3.66659V4.66659M7.75538 3.66659C7.75538 3.04775 7.98618 2.45425 8.39701 2.01667C8.80783 1.57908 9.36503 1.33325 9.94602 1.33325C10.361 1.33325 10.759 1.50885 11.0525 1.82141C11.3459 2.13397 11.5108 2.55789 11.5108 2.99992C11.5108 3.21879 11.4703 3.43551 11.3917 3.63772C11.313 3.83993 11.1978 4.02367 11.0525 4.17843C10.9072 4.33319 10.7347 4.45596 10.5448 4.53972C10.355 4.62348 10.1515 4.66659 9.94602 4.66659H7.75538'
+      stroke={props.stroke ? '#ffffff' : '#7B809A'}
+      strokeLinejoin='round'
+    />
+    <path
+      d='M7.75612 7.33317V13.9998M2.12305 4.6665H13.3892V7.33317H2.12305V4.6665Z'
+      stroke={props.stroke ? '#ffffff' : '#7B809A'}
+      strokeWidth='1.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default Item;
diff --git a/client/src/components/LoginForm.jsx b/client/src/components/LoginForm.jsx
@@ -80,7 +80,9 @@ const LoginForm = () => {
           <span className='mx-1'>/</span>
           <span onClick={() => setIsShowPasswordModal(true)}>비밀번호 찾기</span>
         </div>
-        <button className='font-700 bg-mint px-4 py-3  text-white rounded-lg  hover:bg-mint_hover'>
+        <button
+          className='font-700 bg-mint px-4 py-3  text-white rounded-lg  
+                    transition-all duration-200 hover:bg-mint_hover'>
           로그인
         </button>
         <div className='border border-ipt_disa w-full' />

diff --git 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 = () => {
         </div>
         <button
           className={`px-6 py-3 rounded-lg text-white text-sm font-700 absolute right-6 bottom-8 cursor-pointer
-            ${isSignupBtnActive() ? 'bg-mint hover:bg-mint_hover' : 'bg-btn_disa '}`}
+            ${isSignupBtnActive() ? 'bg-mint hover:bg-mint_hover transition-all duration-200' : 'bg-btn_disa '}`}
           onClick={handleSubmit}>
           아이디 만들기
         </button>

diff --git a/client/src/components/common/BreadCrumb.jsx b/client/src/components/common/BreadCrumb.jsx
@@ -1,15 +1,79 @@
-import User from '@/assets/User';
-
-const BreadCrumb = () => {
-  return (
-    <div className='h-12 w-48 flex border border-red-400'>
-      <div>
-        <User />
-      </div>
-      /
-      <div>회원목록</div>
-    </div>
-  );
-};
-
-export default BreadCrumb;
+import vendorRoute from '@/routes/vendorRoute';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const BreadCrumb = () => {
+  const [currentRoutes, setCurrentRoutes] = useState({
+    icon: '',
+    name: [],
+  });
+
+  const location = useLocation();
+
+  const currentPaths = location.pathname
+    .split('/')
+    .filter(path => path)
+    .slice(1);
+
+  const breadCrumbTitle = () => {
+    for (const route of vendorRoute()) {
+      if (currentPaths[0] === route.path) {
+        setCurrentRoutes({
+          icon: route.icon,
+          name: [route.name],
+        });
+
+        return route;
+      }
+    }
+  };
+
+  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;
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    const route = breadCrumbTitle();
+    breadCrumbMenu(route, 1);
+    console.log(currentRoutes.name);
+  }, [location]);
+
+  return (
+    <div className='h-14 flex flex-col'>
+      <div className='flex items-center text-text_grey mb-1'>
+        <div className='mr-3'>{currentRoutes.icon}</div>
+        {currentRoutes.name.map((name, idx) => (
+          <>
+            <p className='mr-3'>/</p>
+            <p className={`mr-3 font-700 ${idx > 0 && 'text-text_black'}`}>{name}</p>
+          </>
+        ))}
+      </div>
+      <p className='text-text_black text-xl font-800'>
+        {currentRoutes.name[currentRoutes.name.length - 1]}
+      </p>
+    </div>
+  );
+};
+
+export default BreadCrumb;
+
diff --git a/client/src/components/common/SelectField.jsx b/client/src/components/common/SelectField.jsx
@@ -1,44 +1,73 @@
-import React from 'react';
-
-const SelectField = ({ label, required, options, ...props }) => (
-  <div className='mb-4'>
-    <label className='mb-1 block text-sm font-medium text-gray-700'>
-      {required && (
-        <span
-          className={`block text-sm font-medium text-slate-700 ${required ? "after:ml-0.5 after:text-red-500 after:content-['*']" : ''}`}>
-          {label}
-        </span>
-      )}
-    </label>
-
-    <div className='relative'>
-      <select
-        className='w-full appearance-none rounded-md border border-gray-300 bg-white p-2 pr-10 text-sm focus:border-mint focus:outline-none focus:ring-mint'
-        style={{
-          WebkitAppearance: 'none',
-
-          MozAppearance: 'none',
-
-          appearance: 'none',
-        }}
-        {...props}>
-        {options.map((option, index) => (
-          <option key={index} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-
-      <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
-        <svg className='h-5 w-5 fill-current' viewBox='0 0 20 20'>
-          <path
-            d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'
-            clipRule='evenodd'
-            fillRule='evenodd'></path>
-        </svg>
-      </div>
-    </div>
-  </div>
-);
-
-export default SelectField;
+import React, { useState } from 'react';
+import Checkbox from '@/components/common/inputs/CheckBox';
+
+const SelectField = ({ label, required, options, onChange, selectedOptions, ...props }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredOptions = options.filter(option =>
+    option.label.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const toggleOption = value => {
+    const newSelectedOptions = selectedOptions.includes(value)
+      ? selectedOptions.filter(v => v !== value)
+      : [...selectedOptions, value];
+    onChange(newSelectedOptions);
+  };
+
+  return (
+    <div className='mb-4 relative'>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className='text-grey border border-gray-300 bg-white focus:ring-1 focus:outline-none focus:ring-mint focus:border-mint_hover font-medium rounded-lg text-base px-5 py-2.5 text-center inline-flex items-center'
+        type='button'>
+        {label}
+        <svg
+          className='w-2.5 h-2.5 ms-3'
+          aria-hidden='true'
+          xmlns='http://www.w3.org/2000/svg'
+          fill='none'
+          viewBox='0 0 10 6'>
+          <path
+            stroke='currentColor'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+            strokeWidth='2'
+            d='m1 1 4 4 4-4'
+          />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className='z-10 absolute mt-1 bg-white rounded-lg shadow w-60'>
+          <div className='p-3'>
+            <input
+              type='text'
+              className='block w-full p-2 ps-5 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-1 focus:outline-none focus:ring-mint focus:border-mint_hover'
+              placeholder='검색'
+              value={searchTerm}
+              onChange={e => setSearchTerm(e.target.value)}
+            />
+          </div>
+          <ul className='h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700'>
+            {filteredOptions.map((option, index) => (
+              <li key={index}>
+                <div className='flex items-center font-medium p-2 ps-2 rounded hover:bg-gray-100'>
+                  <Checkbox
+                    name={`checkbox-item-${index}`}
+                    label={option.label}
+                    checked={selectedOptions.includes(option.value)}
+                    onChange={() => toggleOption(option.value)}
+                  />
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SelectField;
diff --git 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}
         />
         <button
-          className='font-700 bg-mint px-4 py-3  text-white rounded-xl  hover:bg-mint_hover'
+          className='font-700 bg-mint px-4 py-3  text-white rounded-xl  
+                    hover:bg-mint_hover  transition-all duration-200'
           onClick={handleMoveResetPassword}>
           비밀번호 찾기
         </button>

diff --git 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}
         />
-        <button className='font-700 bg-mint px-4 py-3  text-white rounded-xl  hover:bg-mint_hover'>
+        <button
+          className='font-700 bg-mint px-4 py-3  text-white rounded-xl 
+              transition-all duration-200 hover:bg-mint_hover'>
           아이디 찾기
         </button>
       </div>

diff --git 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}
         />
-        <button className='font-700 bg-mint px-4 py-3  text-white rounded-xl  hover:bg-mint_hover'>
+        <button
+          className='font-700 bg-mint px-4 py-3  text-white rounded-xl  
+            transition-all duration-200 hover:bg-mint_hover'>
           비밀번호 재설정
         </button>
       </div>