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

[KAN-180] feat(login): 회원가입, 로그인 페이지 레이아웃

client/src/assets/UpArrow.jsx

@@ -1,7 +1,7 @@
 const UpArrow = ({ rotation = -180, ...props }) => (
   <svg
-    width='15'
-    height='15'
+    width='10'
+    height='10'
     viewBox='0 0 12 7'
     fill='none'
     xmlns='http://www.w3.org/2000/svg'

client/src/components/LoginForm.jsx

@@ -0,0 +1,53 @@
+import { useNavigate } from 'react-router-dom';
+import InputWeb from './common/InputWeb';
+
+const LoginForm = () => {
+  const navigate = useNavigate();
+
+  const handleMoveSignup = () => {
+    navigate('/signup');
+  };
+
+  return (
+    <div className='absolute left-0 top-0 h-[100vh] mobile:h-full w-full mobile:w-[56vw] flex justify-center items-center'>
+      <div className=' w-480 h-640 flex flex-col justify-around p-16'>
+        <p className='text-mint font-900 text-3xl'>Hyosung CMS#</p>
+        <p className='text-text_grey font-800 mb-3'>수납 및 자금 관리 통합 비즈니스 솔루션</p>
+        <div>
+          <InputWeb
+            id='username'
+            label='아이디'
+            type='text'
+            placeholder='아이디를 입력해 주세요.'
+            classInput='mb-4'
+          />
+          <InputWeb
+            id='password'
+            label='비밀번호'
+            type='password'
+            placeholder='비밀번호를 입력해 주세요.'
+          />
+        </div>
+        <div className='text-text_grey text-sm  w-full flex justify-end cursor-pointer'>
+          <span>아이디 찾기</span>
+          <span className='mx-1'>/</span>
+          <span>비밀번호 찾기</span>
+        </div>
+        <button className='font-700 bg-mint px-4 py-3  text-white rounded-lg'>로그인</button>
+        <div className='border border-ipt_disa w-full' />
+        <div className='w-full flex justify-center text-xs'>
+          <span>아직 회원이 아니신가요?</span>
+          <span
+            className='ml-2 font-800 text-mint cursor-pointer underline'
+            onClick={() => {
+              handleMoveSignup();
+            }}>
+            아이디 만들기
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginForm;

client/src/components/SignupForm.jsx

@@ -0,0 +1,132 @@
+import { useNavigate } from 'react-router-dom';
+import InputWeb from './common/InputWeb';
+
+const SignupForm = () => {
+  const navigate = useNavigate();
+
+  const handleMoveLogin = () => {
+    navigate('/login');
+  };
+
+  return (
+    <div className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-full flex flex-col justify-around items-center py-16'>
+      <p className='text-white font-900 text-3xl'>Hyosung CMS+</p>
+      <div className='text-white font-700 text-sm flex flex-col items-center'>
+        <p>안녕하세요 효성CMS+입니다.</p>
+        <p>아이디 만들기는 효성 FMS의 미리 계약된 고객만</p>
+        <p>진행하실 수 있습니다.</p>
+      </div>
+      <div className='h-580 w-680 shadow-modal bg-white rounded-xl w- p-6 flex flex-col items-center justify-around relative'>
+        <p className='text-text_black text-xl  font-800'>아이디 만들기</p>
+        <div className='w-full justify-between flex'>
+          <InputWeb
+            id='name'
+            label='회원명'
+            type='text'
+            placeholder='회원명'
+            required
+            classContainer='w-1/2 mr-5'
+            classLabel='text-sm'
+            classInput='py-3'
+          />
+          <div className='w-1/2 flex items-end'>
+            <InputWeb
+              id='username'
+              label='아이디'
+              type='text'
+              placeholder='아이디(영문, 숫자 조합 5~20)'
+              required
+              classContainer='w-full'
+              classLabel='text-sm'
+              classInput='py-3'
+            />
+            <button className='bg-btn_disa ml-3  w-32 rounded-lg text-white text-sm font-700 cursor-pointer h-46'>
+              중복확인
+            </button>
+          </div>
+        </div>
+        <div className='w-full justify-between flex'>
+          <InputWeb
+            id='password'
+            label='비밀번호'
+            type='password'
+            placeholder='비밀번호(숫자, 영문, 특수문자 조합 8 ~ 16)'
+            required
+            classContainer='w-1/2 mr-5'
+            classLabel='text-sm'
+            classInput='py-3'
+          />
+          <InputWeb
+            id='password-check'
+            label='비밀번호 확인'
+            type='password'
+            placeholder='비밀번호(숫자, 영문, 특수문자 조합 8 ~ 16)'
+            required
+            classContainer='w-1/2'
+            classLabel='text-sm'
+            classInput='py-3'
+          />
+        </div>
+        <div className='w-full justify-between flex'>
+          <InputWeb
+            id='email'
+            label='이메일'
+            type='text'
+            placeholder='ex) [email protected]'
+            required
+            classContainer='w-1/2 mr-5'
+            classLabel='text-sm'
+            classInput='py-3'
+          />
+          <InputWeb
+            id='phone'
+            label='휴대전화번호'
+            type='number'
+            placeholder='휴대전화번호'
+            required
+            classContainer='w-1/2'
+            classLabel='text-sm'
+            classInput='py-3'
+          />
+        </div>
+        <div className='w-full justify-between flex'>
+          <InputWeb
+            id='department'
+            label='부서명'
+            type='text'
+            placeholder='부서명'
+            required
+            classContainer='w-1/2 mr-5'
+            classLabel='text-sm'
+            classInput='py-3'
+          />
+          <InputWeb
+            id='homePhone'
+            label='유선전화번호'
+            type='number'
+            placeholder='유선전화번호'
+            classContainer='w-1/2'
+            classLabel='text-sm'
+            classInput='py-3'
+          />
+        </div>
+
+        <div className='text-sm font-700'>
+          <span className='text-text_black'>이미 아이디가 있으신가요? </span>
+          <span
+            className='text-mint underline cursor-pointer'
+            onClick={() => {
+              handleMoveLogin();
+            }}>
+            로그인
+          </span>
+        </div>
+        <button className='bg-btn_disa px-6 py-3 rounded-lg text-white text-sm font-700 absolute right-6 bottom-8 cursor-pointer'>
+          아이디 만들기
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SignupForm;

client/src/components/common/InputWeb.jsx

@@ -0,0 +1,28 @@
+const InputWeb = ({
+  id,
+  label,
+  required,
+  type = 'text',
+  placeholder,
+  classContainer = '',
+  classLabel = '',
+  classInput = '',
+}) => {
+  return (
+    <div className={`${classContainer}`}>
+      <label
+        className={`${classLabel} block text-text_black text-15 font-700 mb-2 ml-2 ${required ? "before:mr-1 before:text-red-500 before:content-['*']" : ''}`}
+        htmlFor={id}>
+        {label}
+      </label>
+      <input
+        className={`${classInput} placeholder:text-text_grey text-black border border-ipt_border focus:border-mint focus:outline-none focus:ring-mint focus:ring-1 placeholder:text-xs text-sm p-4  rounded-lg w-full`}
+        id={id}
+        type={type}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+};
+
+export default InputWeb;

client/src/components/common/Table.jsx

@@ -41,8 +41,9 @@ const Table = ({ cols, search, items, handleSearchChange, show }) => {
       />
       <tbody>
         <TableSearch search={search} handleSearchChange={handleSearchChange} show={show} />
-        {items.map(item => (
+        {items.map((item, idx) => (
           <TableRow
+            key={idx}
             item={item}
             cols={cols}
             itemKey={itemKey}

client/src/components/common/TableCol.jsx

@@ -4,8 +4,10 @@ const TableCol = ({ cols, isSelectedAll, handleClickCheckBoxAll }) => (
       <th className='text-left px-4 py-3'>
         <input type='checkbox' checked={isSelectedAll()} onChange={handleClickCheckBoxAll} />
       </th>
-      {cols.map(col => (
-        <th className='text-left p-2 '>{col}</th>
+      {cols.map((col, idx) => (
+        <th key={idx} className='text-left p-2 '>
+          {col}
+        </th>
       ))}
     </tr>
   </thead>

client/src/components/common/TableSearch.jsx

@@ -1,8 +1,8 @@
 const TableSearch = ({ search, handleSearchChange, show }) => {
   return (
     <tr className='text-sm'>
-      {search.map(searchItem => (
-        <th className='text-left py-3'>
+      {search.map((searchItem, idx) => (
+        <th key={idx} className='text-left py-3'>
           {searchItem.type === 'select' ? (
             <select
               className='px-3 py-1  border border-text_grey rounded-md'

client/src/layouts/Header.jsx

@@ -9,7 +9,7 @@ const Header = () => {
   };
 
   return (
-    <div className='flex h-24 items-end pl-8' style={{ border: '1px solid blue' }}>
+    <div className='flex h-24 items-end pl-8'>
       <BreadCrumb />
     </div>
   );