Merge pull request #1040 from seoyeon039/part3-양서연-week16

[양서연] Week16
codeit-bootcamp-frontend · Apr 29, 2024 · e5cf308 · e5cf308
2 parents 4b62adc + 81c111d
commit e5cf308
Show file tree

Hide file tree

Showing 33 changed files with 434 additions and 262 deletions.
diff --git a/components/AddLinkIcon.tsx b/components/AddLinkIcon.tsx
diff --git a/components/FolderList.tsx b/components/FolderList.tsx
@@ -1,12 +1,11 @@
 import { useState } from "react";
 import { LinkCardData } from "@/types/type";
-import Button from "./Button";
-import styles from "@/styles/FolderList.module.css";
-import plusIcon from "@/public/images/Icon_plus.svg";
 import LinkList from "./LinkList";
-import AddModal from "@/modal/addModal/AddModal";
 import FolderMenu from "./FolderMenu";
-import Image from "next/image";
+import AddModal from "@/modal/addModal/AddModal";
+import PlusIcon from "@/public/images/Icon_plus.svg";
+import Button from "./Button";
+import styles from "@/styles/FolderList.module.css";
 
 const FIRST_SELECTED_FOLDER = "전체";
 
@@ -47,7 +46,7 @@ function FolderList({ keyword, linkData, folderNameList, currentId, folderName,
         </div>
           <button className={styles.addFolderBtn} type="button" onClick={openAddModal}>
             폴더 추가
-            <Image src={plusIcon} alt="plus-Icon" />
+            <PlusIcon className={styles.addFolderBtnImg} />
           </button>
           <AddModal isOpenModal={isAddModalOpen} closeModal={closeAddModal}/>
       </div>

diff --git a/components/FolderMenu.tsx b/components/FolderMenu.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
-import shareIcon from "@/public/images/Icon_share.svg";
-import editIcon from "@/public/images/Icon_edit.svg";
-import deleteIcon from "@/public/images/Icon_delete.svg";
+import ShareIcon from "@/public/images/Icon_share.svg";
+import EditIcon from "@/public/images/Icon_edit.svg";
+import DeleteIcon from "@/public/images/Icon_delete.svg";
 import DeleteModal from "@/modal/deleteModal/DeleteModal";
 import EditModal from "@/modal/editModal/EditModal";
 import ShareModal from "@/modal/shareModal/ShareModal";
@@ -29,17 +29,17 @@ function FolderMenu({ placeholder }: Props) {
   return (
     <div className={styles.controlBtns}>
       <button className={styles.shareBtn} type="button" onClick={openShareModal}>
-        <Image src={shareIcon} alt="share-Icon" />
+        <ShareIcon className={styles.folderMenuBtnImg} />
         공유
       </button>
       <ShareModal isOpenModal={isShareModalOpen} closeModal={closeShareModal} />
       <button className={styles.editBtn} type="button" onClick={openEditModal}>
-        <Image src={editIcon} alt="edit-Icon" />
+        <EditIcon className={styles.folderMenuBtnImg} />
         이름 변경
       </button>
       <EditModal isOpenModal={isEditModalOpen} closeModal={closeEditModal} placeholder={placeholder}/>
       <button className={styles.deleteBtn} type="button" onClick={openDeleteModal}>
-        <Image src={deleteIcon} alt="delete-Icon" />
+        <DeleteIcon className={styles.folderMenuBtnImg} />
         삭제
       </button>
       <DeleteModal isOpenModal={isDeleteModalOpen} closeModal={closeDeleteModal}/>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,7 +1,7 @@
-import facebook from '@/public/images/facebook.svg';
-import twitter from '@/public/images/twitter.svg';
-import youtube from '@/public/images/youtube.svg';
-import instagram from '@/public/images/instagram.svg';
+import Facebook from '@/public/images/facebook.svg';
+import Twitter from '@/public/images/twitter.svg';
+import Youtube from '@/public/images/youtube.svg';
+import Instagram from '@/public/images/instagram.svg';
 import styles from '@/styles/Footer.module.css';
 import Link from 'next/link';
 import Image from 'next/image';
@@ -17,16 +17,16 @@ function Footer() {
         </div>
         <div className={styles.snsLinks}>
           <Link href="https://www.facebook.com/" target='_blank' rel='noreferrer'>
-            <Image src={facebook} width={20} height={20} alt="facebook" />
+            <Facebook className={styles.snsLinkImg} />
           </Link>
           <Link href="https://twitter.com/" target='_blank' rel='noreferrer'>
-            <Image src={twitter} width={20} height={20} alt="twitter" />
+            <Twitter className={styles.snsLinkImg} />
           </Link>
           <Link href="https://www.youtube.com/" target='_blank' rel='noreferrer'>
-            <Image src={youtube} width={20} height={20} alt="youtube" />
+            <Youtube className={styles.snsLinkImg} />
           </Link>
           <Link href="https://www.instagram.com/" target='_blank' rel='noreferrer'>
-            <Image src={instagram} width={20} height={20} alt="instagram" />
+            <Instagram className={styles.snsLinkImg} />
           </Link>
         </div>
       </div>

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -6,15 +6,21 @@ interface Props {
     name: string,
   };
   folderOwnerData:{
-    profileImageSource: string,
+    image_source: string,
     name: string,
   };
 }
 
 function Header({folderData, folderOwnerData}: Props) {
   return (
     <header className={styles.headerItems}>
-      <Image src={folderOwnerData.profileImageSource} width={64} height={64} alt="userProfile" />
+      <Image
+        src={folderOwnerData.image_source}
+        className={styles.headerItemImg}
+        width={64}
+        height={64}
+        alt="userProfile"
+      />
       <div className={styles.username}>{folderOwnerData.name}</div>
       <div className={styles.folderName}>{folderData.name}</div>
     </header>

diff --git a/components/LinkAdd.tsx b/components/LinkAdd.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import styles from '@/styles/LinkAdd.module.css';
 import AddLinkModal from '@/modal/addLinkModal/AddLinkModal';
-import LinkIcon from './AddLinkIcon';
+import LinkIcon from '@/public/images/Icon_link.svg';
 
 function LinkAdd() {
   const [isAddLinkModalOpen, setIsAddLinkModalOpen] = useState(false);

diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
@@ -2,20 +2,18 @@ import { MouseEvent, useState } from 'react';
 import { LinkCardData } from '@/types/type';
 import formatDate from '@/utils/formatDate';
 import diffTime from '@/utils/diffTime';
-import star from '@/public/images/Icon_star.svg';
-import kebab from '@/public/images/Icon_kebab.svg'
-import noImg from '@/public/images/noImg.svg';
-import styles from '@/styles/LinkCard.module.css';
 import Popover from './Popover';
-import Image from 'next/image';
 import Link from 'next/link';
+import Star from '@/public/images/Icon_star.svg';
+import Kebab from '@/public/images/Icon_kebab.svg'
+import styles from '@/styles/LinkCard.module.css';
 
 
 interface Props {
   item: LinkCardData
 }
 
-function LinkCard({item: {url, id, imageSource, createdAt, description}}: Props) {
+function LinkCard({item: {url, id, image_source, created_at, description}}: Props) {
   const [isOpen, setIsOpen] = useState(false);
 
   const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
@@ -26,19 +24,19 @@ function LinkCard({item: {url, id, imageSource, createdAt, description}}: Props)
   return (
     <Link href={url} target='_blank'>
     <div className={styles.card} key={id}>
-      <Image className={styles.star} src={star} alt='star' />
+      <Star className={styles.star} />
       <div
         className={styles.previewImg}
-        style={{ backgroundImage: imageSource ? `url(${imageSource})` : `url(${noImg.src})`}}
+        style={{ backgroundImage: image_source ? `url(${image_source})` : `url('/images/noImg.svg')`}}
       />
       <div className={styles.linkContent}>
         <button type='button' className={styles.kebab} onClick={handleClick}>
-          <Image src={kebab} alt='kebab' />
+          <Kebab />
         </button>
         <Popover isOpen={ isOpen } url={url} />
-        <p className={styles.updateTime}>{diffTime(createdAt)}</p>
+        <p className={styles.updateTime}>{diffTime(created_at)}</p>
         <p className={styles.linkDescription}>{description}</p>
-        <p className={styles.linkCreatedDate}>{formatDate(createdAt)}</p>
+        <p className={styles.linkCreatedDate}>{formatDate(created_at)}</p>
       </div>
     </div>
     </Link>

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import linkbraryLogo from '@/public/images/logo.svg';
+import LinkbraryLogo from '@/public/images/logo.svg';
 import styles from '@/styles/Navbar.module.css';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -7,18 +7,20 @@ interface Props {
   className: string;
   profileData: {
     email: string,
-    profileImageSource: string,
+    image_source: string,
   };
   isLoginStatus: boolean;
   }
 
 function NavigationBar({ className, profileData, isLoginStatus }: Props) {
   return (
     <nav className={`${styles.nav} ${styles[className]}`}>
-      <Link href='/'><Image src={linkbraryLogo} width={132} height={24} alt='logo'/></Link>
+      <Link href='/'>
+        <LinkbraryLogo width={133}/>
+      </Link>
       {isLoginStatus ? (
         <div className={styles.account}>
-          <Image src={profileData.profileImageSource} width={32} height={32} alt='profile' />
+          <Image src={profileData.image_source} width={32} height={32} alt='profile' />
           <p>{profileData.email}</p>
         </div>
       )

diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, KeyboardEvent, MouseEvent } from 'react';
 import styles from '@/styles/SearchBar.module.css';
-import CloseIconImage from './CloseIconImage';
-import SearchIconImage from './SearchIconImage';
+import CloseIcon from '@/public/images/Icon_close.svg';
+import SearchIcon from '@/public/images/Icon_search.svg';
 
 interface Props {
   inputValue: string;
@@ -28,7 +28,7 @@ function SearchBar({ inputValue, searchWord, onChange, onClick, onSubmit }: Prop
       <form className={styles.container} onKeyDown={handleSubmit}>
         <div className={styles.searchBar}>
           <div className={styles.searchIcon}>
-            <SearchIconImage stroke={color}/>
+            <SearchIcon stroke={color}/>
           </div>
           <input
             type="text"
@@ -43,7 +43,7 @@ function SearchBar({ inputValue, searchWord, onChange, onClick, onSubmit }: Prop
               className={styles.closeBtn}
               onClick={onClick}
             >
-              <CloseIconImage fill={closeBtnBackground} stroke={closeBtnIcon}/>
+              <CloseIcon fill={closeBtnBackground} stroke={closeBtnIcon}/>
             </button>
             )
           }

diff --git a/components/SearchIconImage.tsx b/components/SearchIconImage.tsx
diff --git a/components/SignInput.tsx b/components/SignInput.tsx
@@ -1,8 +1,7 @@
 import { ChangeEvent, MouseEvent, useState } from 'react';
 import styles from '@/styles/SignInput.module.css';
-import eyeOff from '@/public/images/Icon_eye-off.svg';
-import eyeOn from '@/public/images/Icon_eye-on.svg';
-import Image from 'next/image';
+import EyeOff from '@/public/images/Icon_eye-off.svg';
+import EyeOn from '@/public/images/Icon_eye-on.svg';
 
 interface Props {
   item: {
@@ -36,7 +35,7 @@ function SignInput({ item, onChange, onBlur, errorMsg }: Props) {
           placeholder={item.placeholder}/>
         {item.type === "password" &&
           <button className={styles.pwHiddenBtn} type="button" onClick={handleClick}>
-            <Image src={isHidden === "password" ? eyeOff : eyeOn} alt="eye-btn" />
+            {isHidden === "password" ? <EyeOff /> : <EyeOn />}
           </button>
         }
         {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}

diff --git a/constants/folderlist_mock_data.ts b/constants/folderlist_mock_data.ts
@@ -1,6 +1,6 @@
 export const DATA = [
-  {folderName: '코딩팁', linkCount: 7,},
-  {folderName: '채용 사이트', linkCount: 12,},
-  {folderName: '유용한 글', linkCount: 30,},
-  {folderName: '나만의 장소', linkCount: 3,},
+  {id: 1, folderName: '코딩팁', linkCount: 7,},
+  {id: 2, folderName: '채용 사이트', linkCount: 12,},
+  {id: 3, folderName: '유용한 글', linkCount: 30,},
+  {id: 4, folderName: '나만의 장소', linkCount: 3,},
 ]
diff --git a/constants/signInput_constant.ts b/constants/signInput_constant.ts
@@ -1,4 +1,4 @@
-export const SIGNIN = {
+export const SIGN_IN_INIT_INFO = {
   email: {
     id: "email",
     label: '이메일',
@@ -13,7 +13,7 @@ export const SIGNIN = {
   },
 }
 
-export const SIGNUP = {
+export const SIGN_UP_INIT_INFO = {
   email: {
     id: "email",
     label: '이메일',

diff --git a/modal/addLinkModal/AddLinkModal.tsx b/modal/addLinkModal/AddLinkModal.tsx
@@ -5,7 +5,6 @@ import { DATA } from "@/constants/folderList_mock_data";
 import { ModalBaseProps } from "@/types/type";
 import IconCheck from "@/public/images/Icon_check.svg";
 import styles from "./AddLinkModal.module.css";
-import Image from "next/image";
 
 function AddLinkModal({ isOpenModal, closeModal }: ModalBaseProps) {
   const [clickItem, setClickItem] = useState('');
@@ -28,7 +27,7 @@ function AddLinkModal({ isOpenModal, closeModal }: ModalBaseProps) {
             <>
               <button
                 type="button"
-                key={item.folderName}
+                key={item.id}
                 className={clickItem === item.folderName ? styles.folderClicked : styles.folder}
                 onClick={() => handleClick(item.folderName)}
               >
@@ -40,7 +39,9 @@ function AddLinkModal({ isOpenModal, closeModal }: ModalBaseProps) {
                   </span>
                   <span className={styles.linkCount}>{item.linkCount}개 링크</span>
                 </div>
-                {clickItem === item.folderName && <Image src={IconCheck} width={14} height={14} alt="Icon-check" />}
+                {clickItem === item.folderName &&
+                  <IconCheck />
+                }
               </button>
             </>
           )

diff --git a/modal/shareModal/ShareModal.tsx b/modal/shareModal/ShareModal.tsx
@@ -4,9 +4,6 @@ import { useScript } from "@/utils/hooks/useScript";
 import { useEffect, useState } from "react";
 import { FacebookShareButton } from "react-share";
 import ModalLayout from "@/modal/ModalLayout";
-import IconKakao from "@/public/images/Icon_Kakao.svg";
-import IconFacebook from "@/public/images/Icon_Facebook.svg";
-import IconLink from "@/public/images/Icon_link.svg";
 import styles from "./ShareModal.module.css";
 import Image from "next/image";
 
@@ -58,14 +55,14 @@ function ShareModal({ isOpenModal, closeModal }: ModalBaseProps) {
             className={styles.shareKakao}
             type="button"
             onClick={handleKakaoButton}>
-            <Image src={IconKakao} alt={IconKakao} />
+            <Image src='/images/Icon_Kakao.svg' width={18} height={18} alt='IconKakao' />
           </button>
           <p className={styles.linkButtonName}>카카오톡</p>
         </div>
         <FacebookShareButton url={currentUrl}>
           <div className={styles.shareButton}>
             <button className={styles.shareFacebook} type="button">
-              <Image src={IconFacebook} alt={IconFacebook} />
+              <Image src='/images/Icon_Facebook.svg' width={18} height={18} alt='IconFacebook' />
             </button>
             <p className={styles.linkButtonName}>페이스북</p>
           </div>
@@ -75,7 +72,7 @@ function ShareModal({ isOpenModal, closeModal }: ModalBaseProps) {
             className={styles.copyLink}
             type="button"
             onClick={() => handleCopyClipBoard(currentUrl)}>
-            <Image src={IconLink} alt={IconLink} />
+            <Image src='/images/Icon_link.svg' width={18} height={18} alt='IconLink' />
           </button>
           <p className={styles.linkButtonName}>링크 복사</p>
         </div>