Merge pull request #1027 from ayoung-iya/part3-윤아영-week15

[윤아영] week15
codeit-bootcamp-frontend · Apr 17, 2024 · 3beaf53 · 3beaf53
2 parents 8103962 + 79c0fc5
commit 3beaf53
Show file tree

Hide file tree

Showing 29 changed files with 469 additions and 64 deletions.
diff --git a/api/api.ts b/api/api.ts
@@ -1,5 +1,5 @@
 import { USER_ID, totalFolderId } from '@/util/constants';
-import { Folder, FolderAPI, LinkTypes, LinkAPITypes, User } from '@/types/types';
+import type { Folder, FolderAPI, LinkTypes, LinkAPITypes, User } from '@/types/types';
 
 const BASE_URL = 'https://bootcamp-api.codeit.kr/api';
 

diff --git a/components/common/FolderList.tsx b/components/common/FolderList.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import LinkCard from './LinkCard';
 import { useContext, useEffect, useState } from 'react';
-import { LinkTypes } from '@/types/types';
+import type { LinkTypes } from '@/types/types';
 import { LinkListContext } from '@/context/createContext.';
 
 const List = styled.ul`

diff --git a/components/common/LinkCard.tsx b/components/common/LinkCard.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import LinkImage, { ImageCard } from './LinkImage';
 import LinkInfo, { InfoGroup } from './LinkInfo';
 import Link from 'next/link';
-import { LinkTypes } from '@/types/types';
+import type { LinkTypes } from '@/types/types';
 
 const LinkItem = styled.li`
   width: calc(100% / 3 - 4rem / 3);

diff --git a/components/common/LinkInfo.tsx b/components/common/LinkInfo.tsx
@@ -3,7 +3,7 @@ import { format, formatDistanceToNowStrict } from 'date-fns';
 import { useState, MouseEvent } from 'react';
 import { modalTypes } from '../../util/constants';
 import Popover from './Popover';
-import { LinkTypes } from '@/types/types';
+import type { LinkTypes } from '@/types/types';
 
 export const InfoGroup = styled.div`
   display: flex;

diff --git a/components/common/Popover.tsx b/components/common/Popover.tsx
@@ -1,9 +1,10 @@
-import { useState, MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import { createPortal } from 'react-dom';
 import { modalTypes } from '@/util/constants';
 import styles from './Popover.module.css';
 import DeleteLink from './modal/DeleteLink';
 import Add from './modal/Add';
+import { useOpenModal } from '@/hooks/modal';
 
 interface PopoverProps {
   url: string;
@@ -12,42 +13,27 @@ interface PopoverProps {
 }
 
 const Popover = ({ url, show, onPopoverClick }: PopoverProps) => {
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [showAddModal, setShowAddModal] = useState(false);
-
-  const handleShowDeleteModal = () => {
-    setShowDeleteModal(true);
-  };
-
-  const handleShowAddModal = () => {
-    setShowAddModal(true);
-  };
-
-  const handleCloseDeleteModal = () => {
-    setShowDeleteModal(false);
-  };
-
-  const handleCloseAddModal = () => {
-    setShowAddModal(false);
-  };
+  const {
+    isOpenModal: isOpenDeleteModal,
+    openModal: openDeleteModal,
+    closeModal: closeDeleteModal,
+  } = useOpenModal(false);
+  const { isOpenModal: isOpenAddModal, openModal: openAddModal, closeModal: closeAddModal } = useOpenModal(false);
 
   return (
     <>
       {show && (
         <div className={styles.container} onClick={onPopoverClick}>
-          <button
-            className={`popover-item ${styles.btn}`}
-            data-modal={modalTypes.deleteLink}
-            onClick={handleShowDeleteModal}>
+          <button className={`popover-item ${styles.btn}`} data-modal={modalTypes.deleteLink} onClick={openDeleteModal}>
             삭제하기
           </button>
-          <button className={`popover-item ${styles.btn}`} data-modal={modalTypes.add} onClick={handleShowAddModal}>
+          <button className={`popover-item ${styles.btn}`} data-modal={modalTypes.add} onClick={openAddModal}>
             폴더에 추가
           </button>
         </div>
       )}
-      {showDeleteModal && createPortal(<DeleteLink link={url} onCloseModal={handleCloseDeleteModal} />, document.body)}
-      {showAddModal && createPortal(<Add link={url} onCloseModal={handleCloseAddModal} />, document.body)}
+      {isOpenDeleteModal && createPortal(<DeleteLink link={url} onCloseModal={closeDeleteModal} />, document.body)}
+      {isOpenAddModal && createPortal(<Add link={url} onCloseModal={closeAddModal} />, document.body)}
     </>
   );
 };

diff --git a/components/common/modal/Add.tsx b/components/common/modal/Add.tsx
@@ -4,7 +4,7 @@ import Title from './title/Title';
 import SubmitButton from './submitButton/SubmitButton';
 import styles from './Add.module.css';
 import { FoldersContext } from '@/context/createContext.';
-import { Modal } from '@/types/types';
+import type { Modal } from '@/types/types';
 
 interface AddProps {
   link: string;

diff --git a/components/common/modal/AddFolder.tsx b/components/common/modal/AddFolder.tsx
@@ -1,8 +1,8 @@
-import { Modal } from '@/types/types';
 import FolderNameInput from './folderNameInput/folderNameInput';
 import Frame from './frame/Frame';
 import SubmitButton from './submitButton/SubmitButton';
 import Title from './title/Title';
+import type { Modal } from '@/types/types';
 
 interface AddFolderProps {
   onCloseModal: Modal['closeModal'];

diff --git a/components/common/modal/DeleteFolder.tsx b/components/common/modal/DeleteFolder.tsx
@@ -1,7 +1,7 @@
 import Title from './title/Title';
 import Frame from './frame/Frame';
 import SubmitButton from './submitButton/SubmitButton';
-import { Modal } from '@/types/types';
+import type { Modal } from '@/types/types';
 
 interface DeleteFolder {
   selectedFolderName: string;

diff --git a/components/common/modal/DeleteLink.tsx b/components/common/modal/DeleteLink.tsx
@@ -1,4 +1,4 @@
-import { Modal } from '@/types/types';
+import type { Modal } from '@/types/types';
 import Frame from './frame/Frame';
 import SubmitButton from './submitButton/SubmitButton';
 import Title from './title/Title';

diff --git a/components/common/modal/Edit.tsx b/components/common/modal/Edit.tsx
@@ -1,4 +1,4 @@
-import { Modal } from '@/types/types';
+import type { Modal } from '@/types/types';
 import FolderNameInput from './folderNameInput/folderNameInput';
 import Frame from './frame/Frame';
 import SubmitButton from './submitButton/SubmitButton';

diff --git a/components/common/modal/Share.tsx b/components/common/modal/Share.tsx
@@ -6,7 +6,7 @@ import styles from './Share.module.css';
 import ShareBtn from './shareBtn/ShareBtn';
 import { sampleUrl } from '@/util/constants';
 import { useKaKaoScript } from '@/hooks/kakao';
-import { Modal } from '@/types/types';
+import type { Modal } from '@/types/types';
 
 interface ShareProps {
   currentId: string;

diff --git a/components/common/modal/frame/Frame.tsx b/components/common/modal/frame/Frame.tsx
@@ -1,7 +1,7 @@
 import { MouseEvent, PropsWithChildren, ReactNode } from 'react';
 import styles from './Frame.module.css';
 import { exitBtnId, modalBackground } from '@/util/constants';
-import { Modal } from '@/types/types';
+import type { Modal } from '@/types/types';
 
 interface FrameProps {
   onCloseModal: Modal['closeModal'];

diff --git a/components/layout/Layout.tsx b/components/layout/Layout.tsx
@@ -1,8 +1,15 @@
 import Header from './header/Header';
 import Footer from './footer/Footer';
 import { PropsWithChildren } from 'react';
+import { useRouter } from 'next/router';
 
 function Layout({ children }: PropsWithChildren) {
+  const { pathname } = useRouter();
+
+  if (pathname === '/signin' || pathname === '/signup') {
+    return <>{children}</>;
+  }
+
   return (
     <>
       <Header />

diff --git a/components/layout/footer/IconWithLink.tsx b/components/layout/footer/IconWithLink.tsx
@@ -1,4 +1,4 @@
-import { FooterItem } from '@/types/types';
+import type { FooterItem } from '@/types/types';
 import styles from './IconWithLink.module.css';
 import Link from 'next/link';
 import Image from 'next/image';

diff --git a/components/layout/header/Header.tsx b/components/layout/header/Header.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import styles from './Header.module.css';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import { User } from '@/types/types';
+import type { User } from '@/types/types';
 import { getUser } from '@/api/api';
 import Image from 'next/image';
 
@@ -38,7 +38,7 @@ function Header() {
               <span className={styles.userEmail}>{user.email}</span>
             </>
           ) : (
-            <Link className={styles.btn} href="/signin.html">
+            <Link className={styles.btn} href="/signin">
               로그인
             </Link>
           )}

diff --git a/components/pages/folder/LinkList.tsx b/components/pages/folder/LinkList.tsx
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import { useContext, useEffect, useState } from 'react';
+import { useContext } from 'react';
 import UpdateBtnList from './UpdateBtnList';
-import { Folder, LinkTypes } from '@/types/types';
+import type { Folder } from '@/types/types';
 import { totalFolderId, totalFolderName } from '@/util/constants';
-import { FoldersContext, LinkListContext } from '@/context/createContext.';
+import { FoldersContext } from '@/context/createContext.';
 import FolderList from '@/components/common/FolderList';
 import { useRouter } from 'next/router';
 

diff --git a/components/pages/sign/InputGroup.tsx b/components/pages/sign/InputGroup.tsx
@@ -0,0 +1,38 @@
+import { useFormContext } from 'react-hook-form';
+import styles from '@/styles/sign.module.css';
+import { useState } from 'react';
+
+const InputGroup = ({ info }: any) => {
+  const {
+    register,
+    trigger,
+    formState: { errors },
+  } = useFormContext();
+  const [showText, setShowText] = useState(() => (info.id !== 'email' ? false : true));
+  const type = info.id === 'email' ? info.type : showText ? 'text' : info.type;
+  const eyeClassName = `${styles.iconEye} ${showText ? styles.on : ''}`;
+  const inputClassName = `${styles.input} ${errors[info.id]?.message ? styles.error : ''}`;
+
+  return (
+    <>
+      <label className={styles.label} htmlFor={info.id}>
+        {info.label}
+      </label>
+      <div className={styles.inputGroup}>
+        <input
+          type={type}
+          id={info.id}
+          {...register(info.id, { ...info.validation, onBlur: async () => await trigger(info.id) })}
+          placeholder={info.placeholder}
+          className={inputClassName}
+        />
+        {info.type === 'password' && (
+          <button type="button" className={eyeClassName} onClick={() => setShowText(!showText)} />
+        )}
+      </div>
+      {errors?.[info.id] && <p className={styles.messageError}>{errors[info.id]?.message as string}</p>}
+    </>
+  );
+};
+
+export default InputGroup;
diff --git a/constants/footerItems.ts b/constants/footerItems.ts
@@ -1,4 +1,4 @@
-import { FooterItem } from "@/types/types";
+import type { FooterItem } from "@/types/types";
 
 export const SNS_ITEMS: FooterItem[] = [
   {

diff --git a/constants/sign.ts b/constants/sign.ts
@@ -0,0 +1,69 @@
+export const ERROR_MESSAGE = {
+  email: {
+    pattern: '올바른 이메일 주소가 아닙니다.',
+    required: '이메일을 입력해 주세요.',
+    checkRight: '이메일을 확인해 주세요.',
+  },
+  password: {
+    pattern: '비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.',
+    required: '비밀번호를 입력해 주세요',
+    checkSame: '비밀번호가 일치하지 않아요',
+    checkRight: '비밀번호를 확인해 주세요.',
+  },
+};
+
+export const INPUT_INFO = {
+  email: {
+    id: 'email',
+    type: 'email',
+    label: '이메일',
+    placeholder: '이메일를 입력해 주세요.',
+    validation: {
+      pattern: {
+        value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+        message: ERROR_MESSAGE.email.pattern,
+      },
+      required: ERROR_MESSAGE.email.required,
+    },
+  },
+  password: {
+    signIn: {
+      id: 'password',
+      type: 'password',
+      label: '비밀번호',
+      placeholder: '비밀번호를 입력해 주세요.',
+      validation: {
+        required: ERROR_MESSAGE.password.required,
+      },
+    },
+    signUp: {
+      id: 'password',
+      type: 'password',
+      label: '비밀번호  ',
+      placeholder: '비밀번호를 입력해 주세요.',
+      validation: {
+        pattern: {
+          value: /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,}$/,
+          message: ERROR_MESSAGE.password.pattern,
+        },
+        required: ERROR_MESSAGE.password.required,
+      },
+    },
+  },
+  passwordCheck: {
+    id: 'passwordCheck',
+    type: 'password',
+    label: '비밀번호 확인',
+    placeholder: '비밀번호와 일치하는 값을 입력해주세요.',
+    validation: {
+      validate: (value: any, formValues: any) => {
+        if (value.length === 0 && formValues.password.length === 0) return ERROR_MESSAGE.password.required;
+        return value !== formValues.password && ERROR_MESSAGE.password.checkSame;
+      },
+      pattern: {
+        value: /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,}$/,
+        message: ERROR_MESSAGE.password.pattern,
+      },
+    },
+  },
+};
diff --git a/context/createContext..tsx b/context/createContext..tsx
@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { Folder, LinkTypes } from '@/types/types';
+import type { Folder, LinkTypes } from '@/types/types';
 
 export const FoldersContext = createContext<Folder[]>([]);
 

diff --git a/context/sampleFolderContext.tsx b/context/sampleFolderContext.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren, createContext, useEffect, useState } from 'react';
 import { getSampleFolder } from '@/api/api';
-import { LinkTypes } from '@/types/types';
+import type { LinkTypes } from '@/types/types';
 
 interface SampleFolderContext {
   folderName: string;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "react": "^18",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.2",
     "react-router-dom": "^6.22.3",
     "styled-components": "^6.1.8",
     "uuid": "^9.0.1"