From 90b8a175093c69e38c265f88e9b21d7f7a5f4a9a Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Tue, 2 Apr 2024 12:19:11 +0900
Subject: [PATCH 01/28] =?UTF-8?q?Refactor:=20api=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=ED=95=A8=EC=88=98=EB=A1=9C=20=EB=AC=B6?=
 =?UTF-8?q?=EC=96=B4=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/api.ts | 38 +++++++++++++-------------------------
 1 file changed, 13 insertions(+), 25 deletions(-)

diff --git a/api/api.ts b/api/api.ts
index a4be6efc9..eb39c62c0 100644
--- a/api/api.ts
+++ b/api/api.ts
@@ -1,44 +1,32 @@
 const BASE_URL = "https://bootcamp-api.codeit.kr/api/";
 
-export const getFolderInfo = async () => {
+const fetchJson = async (url: string) => {
   try {
-    const response = await fetch(`${BASE_URL}sample/folder`);
-    const result = await response.json(); // 재사용성을 위해 response.json()으로 끝맺는게 좋음
+    const response = await fetch(url);
+    const result = await response.json();
     return result;
   } catch (error) {
     console.log(error);
   }
 };
 
+export const getFolderInfo = async () => {
+  const url = `${BASE_URL}sample/folder`;
+  return await fetchJson(url);
+};
+
 export const getUserInfo = async () => {
-  try {
-    const response = await fetch(`${BASE_URL}sample/user`);
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    console.log(error);
-  }
+  const url = `${BASE_URL}sample/user`;
+  return await fetchJson(url);
 };
 
 export const getFolderList = async () => {
-  try {
-    const response = await fetch(`${BASE_URL}users/1/folders`);
-    const result = await response.json(); // 재사용성을 위해 response.json()으로 끝맺는게 좋음
-    // console.log(result);
-    return result;
-  } catch (error) {
-    console.log(error);
-  }
+  const url = `${BASE_URL}users/1/folders`;
+  return fetchJson(url);
 };
 export const getAllLinkData = async (id: string) => {
   const url = id
     ? `${BASE_URL}users/1/folders/${id}`
     : `${BASE_URL}users/1/links`;
-  try {
-    const response = await fetch(url);
-    const result = await response.json(); // 재사용성을 위해 response.json()으로 끝맺는게 좋음
-    return result;
-  } catch (error) {
-    console.log(error);
-  }
+  return fetchJson(url);
 };

From 57880c7f9ab0909dbafd89d3405df55769163e3e Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Tue, 2 Apr 2024 12:20:29 +0900
Subject: [PATCH 02/28] =?UTF-8?q?Refactor:=20let=20=EB=B3=80=EC=88=98?=
 =?UTF-8?q?=EB=A5=BC=20const=20=EC=83=81=EC=88=98=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=ED=99=98=20=ED=9B=84=20||=20=EB=A5=BC=20=ED=86=B5=ED=95=9C=20?=
 =?UTF-8?q?=EA=B0=92=20=ED=95=A0=EB=8B=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/FolderItem.tsx | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/components/common/FolderItem.tsx b/components/common/FolderItem.tsx
index e0db3e2a3..80d7cde03 100644
--- a/components/common/FolderItem.tsx
+++ b/components/common/FolderItem.tsx
@@ -24,16 +24,9 @@ function FolderItem({
   const { created_at, favorite, image_source } = item;
   const [isPopOverVisible, setIsPopOverVisible] = useState(false);
 
-  let time = "";
-  let img_src: string;
-
-  if (created_at) {
-    time = CalcTime(created_at);
-    img_src = image_source ?? "";
-  } else {
-    time = CalcTime(createdAt);
-    img_src = imageSource ?? "";
-  }
+  const time = CalcTime(created_at || createdAt);
+  const img_src = image_source || imageSource;
+
   return (
     <a href={url} target="_blank" rel="noreferrer">
       <Folder>

From 368d2000f037f3dd5e02c09fe86ddab3f5d13553 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Tue, 2 Apr 2024 12:29:04 +0900
Subject: [PATCH 03/28] =?UTF-8?q?Refactor:=20=EB=8B=A8=EC=9D=BC=20?=
 =?UTF-8?q?=ED=83=9C=EA=B7=B8=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SignIn_Up/EmailPwdInput.tsx      |  2 +-
 components/common/BlueButton.tsx            |  2 +-
 components/common/FolderItem.tsx            |  6 +++---
 components/common/FolderList.tsx            |  2 +-
 components/common/HeaderElement.tsx         |  4 ++--
 components/common/modals/AddFolderModal.tsx |  4 ++--
 components/common/modals/AddToFolder.tsx    |  2 +-
 components/common/modals/DeleteModal.tsx    |  2 +-
 components/common/modals/EditNameModal.tsx  |  2 +-
 components/common/modals/PopOver.tsx        |  4 ++--
 components/common/modals/SharedModal.tsx    |  2 +-
 components/folder/FolderInput.tsx           |  2 +-
 components/shared/SharedSection.tsx         |  5 +----
 pages/Folder.tsx                            | 24 +++++++++++----------
 pages/Shared.tsx                            |  6 +++---
 15 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/components/SignIn_Up/EmailPwdInput.tsx b/components/SignIn_Up/EmailPwdInput.tsx
index 437be48aa..da0bc7b4a 100644
--- a/components/SignIn_Up/EmailPwdInput.tsx
+++ b/components/SignIn_Up/EmailPwdInput.tsx
@@ -15,7 +15,7 @@ const EmailPwdInput = ({ title, type, isEyeIcon }: EmailPwdInputPropsType) => {
       <EmailPasswordInput type={type} />
       {isEyeIcon && (
         <EyeIconDiv>
-          <Image src={eyeoff} alt="eye_off_icon"></Image>
+          <Image src={eyeoff} alt="eye_off_icon" />
         </EyeIconDiv>
       )}
     </InputDiv>
diff --git a/components/common/BlueButton.tsx b/components/common/BlueButton.tsx
index a7ca8f684..dfddb7671 100644
--- a/components/common/BlueButton.tsx
+++ b/components/common/BlueButton.tsx
@@ -21,7 +21,7 @@ export const BlueButton = ({
       color={COLORS.White}
       fontSize={fontSize}
       radius={radius}
-      onClick={() => (onBtnHandle ? onBtnHandle() : null)}
+      onClick={() => onBtnHandle?.()}
     >
       {text}
     </Button>
diff --git a/components/common/FolderItem.tsx b/components/common/FolderItem.tsx
index 80d7cde03..94f82988d 100644
--- a/components/common/FolderItem.tsx
+++ b/components/common/FolderItem.tsx
@@ -32,7 +32,7 @@ function FolderItem({
       <Folder>
         <ImageContainer>
           {img_src ? (
-            <Image fill src={img_src} alt="이미지" id="folderImage"></Image>
+            <Image fill src={img_src} alt="이미지" id="folderImage" />
           ) : (
             <DefaultImage>
               <Image src={logo} alt="logo" id="defaultImage" />
@@ -48,7 +48,7 @@ function FolderItem({
                 e.preventDefault();
                 setIsPopOverVisible(!isPopOverVisible);
               }}
-            ></Kebab>
+            />
             <PopOver
               $isPopOverVisible={isPopOverVisible}
               setIsPopOverVisible={setIsPopOverVisible}
@@ -58,7 +58,7 @@ function FolderItem({
               $right="0px"
               $isModalVisible={$isModalVisible}
               setIsModalVisible={setIsModalVisible}
-            ></PopOver>
+            />
           </TimeContainer>
           <Description>{description}</Description>
 
diff --git a/components/common/FolderList.tsx b/components/common/FolderList.tsx
index 8d6fc7a13..1f9d74ff5 100644
--- a/components/common/FolderList.tsx
+++ b/components/common/FolderList.tsx
@@ -24,7 +24,7 @@ function FolderList({
                 key={item.id}
                 $isModalVisible={$isModalVisible}
                 setIsModalVisible={setIsModalVisible}
-              ></FolderItem>
+              />
             );
           }
         })}
diff --git a/components/common/HeaderElement.tsx b/components/common/HeaderElement.tsx
index 712e95282..df2852d5c 100644
--- a/components/common/HeaderElement.tsx
+++ b/components/common/HeaderElement.tsx
@@ -27,14 +27,14 @@ function HeaderElement({ $positionval }: propTypes) {
                   height={28}
                   src={profileImageSource}
                   alt="myProfile-img"
-                ></Image>
+                />
               ) : (
                 <Image
                   width={18}
                   height={18}
                   src={profile}
                   alt="myProfile-img"
-                ></Image>
+                />
               )}
             </MyProfileImageContainerDiv>
             <span id="myEmail">{email}</span>
diff --git a/components/common/modals/AddFolderModal.tsx b/components/common/modals/AddFolderModal.tsx
index f5652e6e2..0ede85b0c 100644
--- a/components/common/modals/AddFolderModal.tsx
+++ b/components/common/modals/AddFolderModal.tsx
@@ -9,7 +9,7 @@ export const AddFolderModal = ({
   setIsModalVisible,
 }: CommonModalProps) => {
   const handleCloseBtn = () => {
-    setIsModalVisible(null);
+    setIsModalVisible("");
   };
 
   return (
@@ -28,7 +28,7 @@ export const AddFolderModal = ({
           padding="16px 20px"
           fontSize="16px"
           radius="8px"
-        ></BlueButton>
+        />
       </Modal>
     </Background>
   );
diff --git a/components/common/modals/AddToFolder.tsx b/components/common/modals/AddToFolder.tsx
index a2783d970..b9d399912 100644
--- a/components/common/modals/AddToFolder.tsx
+++ b/components/common/modals/AddToFolder.tsx
@@ -53,7 +53,7 @@ export const AddToFolder = ({
           padding="16px 20px"
           fontSize="16px"
           radius="8px"
-        ></BlueButton>
+        />
       </Modal>
     </Background>
   );
diff --git a/components/common/modals/DeleteModal.tsx b/components/common/modals/DeleteModal.tsx
index 9aff6fed7..f9d7b10b8 100644
--- a/components/common/modals/DeleteModal.tsx
+++ b/components/common/modals/DeleteModal.tsx
@@ -35,7 +35,7 @@ export const DeleteModal = ({
           padding="16px 20px"
           fontSize="16px"
           radius="8px"
-        ></RedButton>
+        />
       </Modal>
     </Background>
   );
diff --git a/components/common/modals/EditNameModal.tsx b/components/common/modals/EditNameModal.tsx
index c5fcae786..d4f2404d6 100644
--- a/components/common/modals/EditNameModal.tsx
+++ b/components/common/modals/EditNameModal.tsx
@@ -28,7 +28,7 @@ export const EditNameModal = ({
           padding="16px 20px"
           fontSize="16px"
           radius="8px"
-        ></BlueButton>
+        />
       </Modal>
     </Background>
   );
diff --git a/components/common/modals/PopOver.tsx b/components/common/modals/PopOver.tsx
index 53b9f68af..23b36449a 100644
--- a/components/common/modals/PopOver.tsx
+++ b/components/common/modals/PopOver.tsx
@@ -27,11 +27,11 @@ export const PopOver = ({
       <DeleteModal
         isModalVisible={$isModalVisible}
         setIsModalVisible={setIsModalVisible}
-      ></DeleteModal>
+      />
       <AddToFolder
         isModalVisible={$isModalVisible}
         setIsModalVisible={setIsModalVisible}
-      ></AddToFolder>
+      />
       <MenuOptions $isVisible={$isPopOverVisible} $top={$top} $right={$right}>
         {$options.map((option, index) => (
           <Option
diff --git a/components/common/modals/SharedModal.tsx b/components/common/modals/SharedModal.tsx
index 5474bbcd1..281768863 100644
--- a/components/common/modals/SharedModal.tsx
+++ b/components/common/modals/SharedModal.tsx
@@ -28,7 +28,7 @@ export const SharedModal = ({
   ];
 
   const handleCloseBtn = () => {
-    setIsModalVisible(null);
+    setIsModalVisible("");
   };
 
   return (
diff --git a/components/folder/FolderInput.tsx b/components/folder/FolderInput.tsx
index 422e5bd9c..f8ed3833d 100644
--- a/components/folder/FolderInput.tsx
+++ b/components/folder/FolderInput.tsx
@@ -19,7 +19,7 @@ const FolderInput = forwardRef<HTMLDivElement, PropsType>(
           <BackGroundFixed>
             <InputBoxFixed>
               <Link />
-              <Input placeholder="링크를 추가해 보세요."></Input>
+              <Input placeholder="링크를 추가해 보세요." />
               <BlueButton
                 width="80px"
                 height="auto"
diff --git a/components/shared/SharedSection.tsx b/components/shared/SharedSection.tsx
index 1c2eb235c..063d6b683 100644
--- a/components/shared/SharedSection.tsx
+++ b/components/shared/SharedSection.tsx
@@ -21,10 +21,7 @@ const SharedSection = () => {
 
   return (
     <section className="codeit-mark-section">
-      <OwnerProfile
-        src={profileImageSource || smileIcon}
-        alt={"smile icon"}
-      ></OwnerProfile>
+      <OwnerProfile src={profileImageSource || smileIcon} alt={"smile icon"} />
       <span>{name}</span>
       <div id="favorites">
         <h1>{folderName}</h1>
diff --git a/pages/Folder.tsx b/pages/Folder.tsx
index 65795f284..5eb5ece2b 100644
--- a/pages/Folder.tsx
+++ b/pages/Folder.tsx
@@ -34,16 +34,18 @@ const Folder = () => {
   const [isModalVisible, setIsModalVisible] = useState("");
   const [searchInputValue, setSearchInputValue] = useState("");
 
-  const fetchData = async () => {
-    try {
-      const response = await getAllLinkData(listId);
-      const result = await response.data;
-      setData(result);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  fetchData();
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await getAllLinkData(listId);
+        const result = await response.data;
+        setData(result);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    fetchData();
+  });
 
   const addLinkDivRef = useRef(null);
   const footerDivRef = useRef(null);
@@ -137,7 +139,7 @@ const Folder = () => {
           items={data}
           $isModalVisible={isModalVisible}
           setIsModalVisible={setIsModalVisible}
-        ></FolderList>
+        />
       ) : (
         <NoLinkMsg>저장된 링크가 없습니다.</NoLinkMsg>
       )}
diff --git a/pages/Shared.tsx b/pages/Shared.tsx
index 09ba1a554..e0f7151fd 100644
--- a/pages/Shared.tsx
+++ b/pages/Shared.tsx
@@ -27,7 +27,7 @@ function Shared() {
         setIsModalVisible={setIsModalVisible}
       />
       <HeaderElement $positionval="" />
-      <SharedSection></SharedSection>
+      <SharedSection />
       <Input
         inputValue={searchInputValue}
         setInputValue={setSearchInputValue}
@@ -37,8 +37,8 @@ function Shared() {
         items={folders}
         $isModalVisible={isModalVisible}
         setIsModalVisible={setIsModalVisible}
-      ></FolderList>
-      <FooterElement></FooterElement>
+      />
+      <FooterElement />
     </>
   );
 }

From cb5267a701ab9eeda262991f032a045f99b85af7 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Tue, 2 Apr 2024 12:30:30 +0900
Subject: [PATCH 04/28] =?UTF-8?q?Refactor:=20=ED=95=A8=EC=88=98=EB=A5=BC?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=96=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/modals/SharedModal.tsx | 34 ++++++++++++------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/components/common/modals/SharedModal.tsx b/components/common/modals/SharedModal.tsx
index 281768863..cc1797443 100644
--- a/components/common/modals/SharedModal.tsx
+++ b/components/common/modals/SharedModal.tsx
@@ -10,23 +10,6 @@ export const SharedModal = ({
   isModalVisible,
   setIsModalVisible,
 }: CommonModalProps) => {
-  const ICONS = [
-    {
-      name: "카카오톡",
-      backgroundColor: "#F5E14B",
-      imgUrl: kakao,
-    },
-    {
-      name: "페이스북",
-      backgroundColor: "#1877F2",
-      imgUrl: facebook,
-    },
-    {
-      name: "링크 복사",
-      imgUrl: link,
-    },
-  ];
-
   const handleCloseBtn = () => {
     setIsModalVisible("");
   };
@@ -56,6 +39,23 @@ export const SharedModal = ({
   );
 };
 
+const ICONS = [
+  {
+    name: "카카오톡",
+    backgroundColor: "#F5E14B",
+    imgUrl: kakao,
+  },
+  {
+    name: "페이스북",
+    backgroundColor: "#1877F2",
+    imgUrl: facebook,
+  },
+  {
+    name: "링크 복사",
+    imgUrl: link,
+  },
+];
+
 type BackgroundPropsType = {
   $isVisible?: string;
   $backgroundColor?: string;

From f77b6e8fb0767ff8aa887f0b9c282618bab73efa Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Tue, 2 Apr 2024 13:20:09 +0900
Subject: [PATCH 05/28] =?UTF-8?q?Refator:=20=EC=9E=91=EC=9D=80=20=ED=94=BC?=
 =?UTF-8?q?=EB=93=9C=EB=B0=B1=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/folder/FolderTitle.tsx | 30 +++++++++++++++---------------
 pages/Folder.tsx                  |  2 +-
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/folder/FolderTitle.tsx b/components/folder/FolderTitle.tsx
index 738a38075..c574878ba 100644
--- a/components/folder/FolderTitle.tsx
+++ b/components/folder/FolderTitle.tsx
@@ -9,6 +9,21 @@ type FolderTitlePropsType = {
 };
 
 const FolderTitle = ({ titleName, setIsModal }: FolderTitlePropsType) => {
+  const titles = [
+    {
+      name: "공유",
+      svg: <Share />,
+    },
+    {
+      name: "이름 변경",
+      svg: <Pen />,
+    },
+    {
+      name: "삭제",
+      svg: <Trash />,
+    },
+  ];
+
   return (
     <Container>
       <Title>{titleName}</Title>
@@ -31,21 +46,6 @@ const FolderTitle = ({ titleName, setIsModal }: FolderTitlePropsType) => {
   );
 };
 
-const titles = [
-  {
-    name: "공유",
-    svg: <Share />,
-  },
-  {
-    name: "이름 변경",
-    svg: <Pen />,
-  },
-  {
-    name: "삭제",
-    svg: <Trash />,
-  },
-];
-
 const Container = styled.div`
   width: 1060px;
   display: flex;
diff --git a/pages/Folder.tsx b/pages/Folder.tsx
index 5eb5ece2b..1b38a1d8f 100644
--- a/pages/Folder.tsx
+++ b/pages/Folder.tsx
@@ -45,7 +45,7 @@ const Folder = () => {
       }
     };
     fetchData();
-  });
+  }, []);
 
   const addLinkDivRef = useRef(null);
   const footerDivRef = useRef(null);

From 31aa7ac4e6586bee04f4031d291e147c311b0579 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Tue, 2 Apr 2024 13:22:05 +0900
Subject: [PATCH 06/28] =?UTF-8?q?Refactor:=20lists=20=EB=B3=80=EC=88=98?=
 =?UTF-8?q?=EC=97=90=20=EB=B3=80=EA=B2=BD=EB=90=98=EB=8A=94=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=EC=9D=84=20=ED=95=A8=EC=88=98=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/folder/Menus.tsx | 51 ++++++++++++++++++++++++-------------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/components/folder/Menus.tsx b/components/folder/Menus.tsx
index 9619496dd..340ee053c 100644
--- a/components/folder/Menus.tsx
+++ b/components/folder/Menus.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { getFolderList } from "../../api/api";
 import styled from "styled-components";
 import Union from "@/assets/icons/Union.svg";
@@ -12,38 +12,55 @@ type MenusPropsType = {
 };
 
 const Menus = ({ changeTitle, changeID, setIsVisible }: MenusPropsType) => {
-  const listsData: any = useGetPromise(getFolderList);
-  const lists = listsData?.data ?? [];
-  if (lists[0]) {
-    lists[0].name === "전체" || lists.unshift({ id: 0, name: "전체" });
-  }
+  const [buttonColors, setButtonColors] = useState([]);
+  const fetchedMenuData: any = useGetPromise(getFolderList);
+  const menulists = fetchedMenuData?.data ?? [];
 
-  const initialButtonColors = lists.reduce((colors: any, list: any) => {
-    colors[list.name] = COLORS.White;
-    return colors;
-  }, {});
+  useEffect(() => {
+    addEntireMenu();
 
-  const [buttonColors, setButtonColors] = useState(initialButtonColors);
+    const initialButtonColors = setAllWhiteButtonColor();
+    setButtonColors(initialButtonColors);
+  }, []);
 
-  const handleClick = async (name: string, id: number) => {
-    changeTitle(name);
-    changeID(id);
+  const addEntireMenu = () => {
+    if (menulists[0] && menulists[0].name !== "전체") {
+      menulists.unshift({ id: 0, name: "전체" });
+    }
+  };
+
+  const setAllWhiteButtonColor = () => {
+    const initialButtonColors = menulists.reduce((colors: any, list: any) => {
+      colors[list.name] = COLORS.White;
+      return colors;
+    }, {});
+    return initialButtonColors;
+  };
+
+  const changeButtonColor = (name: string) => {
+    let allWhiteButtonColorArray = setAllWhiteButtonColor();
     setButtonColors((prevColors: any) => {
       return {
-        ...initialButtonColors,
+        ...allWhiteButtonColorArray,
         [name]:
           prevColors[name] === COLORS.White ? COLORS.Primary : COLORS.White,
       };
     });
   };
 
+  const onMenuButtonClick = (name: string, id: number) => {
+    changeTitle(name);
+    changeID(id);
+    changeButtonColor(name);
+  };
+
   return (
     <Container>
       <ButtonDiv>
-        {lists.map((val: any) => (
+        {menulists.map((val: any) => (
           <Button
             key={val.id}
-            onClick={() => handleClick(val.name, val.id)}
+            onClick={() => onMenuButtonClick(val.name, val.id)}
             color={buttonColors[val.name]}
             id={val.name}
           >

From b99518b4c251d12e77d78332e150a3b9e60edb1e Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Tue, 2 Apr 2024 13:37:59 +0900
Subject: [PATCH 07/28] =?UTF-8?q?Design:=20=EC=BB=A4=EC=84=9C=20=ED=8F=AC?=
 =?UTF-8?q?=EC=9D=B8=ED=84=B0=EB=A1=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/Input.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/common/Input.tsx b/components/common/Input.tsx
index 9be51c007..64f30f5bc 100644
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -88,6 +88,10 @@ const DeleteAllButton = styled.button`
   align-items: center;
   color: white;
 
+  &:hover {
+    cursor: pointer;
+  }
+
   @media (max-width: 767px) {
     width: 29px;
     height: 25px;

From 8b0aef85f73273bcecf5fbc83c71b8e3cb75af1a Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Tue, 2 Apr 2024 13:40:37 +0900
Subject: [PATCH 08/28] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=9C=A0?=
 =?UTF-8?q?=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/folder/Menus.tsx |  9 ++-------
 pages/Folder.tsx            |  2 +-
 utils/validation.ts         | 18 ++++++++++++++++++
 3 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 utils/validation.ts

diff --git a/components/folder/Menus.tsx b/components/folder/Menus.tsx
index 340ee053c..e01a7ce9d 100644
--- a/components/folder/Menus.tsx
+++ b/components/folder/Menus.tsx
@@ -17,19 +17,14 @@ const Menus = ({ changeTitle, changeID, setIsVisible }: MenusPropsType) => {
   const menulists = fetchedMenuData?.data ?? [];
 
   useEffect(() => {
-    addEntireMenu();
-
     const initialButtonColors = setAllWhiteButtonColor();
     setButtonColors(initialButtonColors);
-  }, []);
+  }, [menulists]);
 
-  const addEntireMenu = () => {
+  const setAllWhiteButtonColor = () => {
     if (menulists[0] && menulists[0].name !== "전체") {
       menulists.unshift({ id: 0, name: "전체" });
     }
-  };
-
-  const setAllWhiteButtonColor = () => {
     const initialButtonColors = menulists.reduce((colors: any, list: any) => {
       colors[list.name] = COLORS.White;
       return colors;
diff --git a/pages/Folder.tsx b/pages/Folder.tsx
index 1b38a1d8f..0c495cb3b 100644
--- a/pages/Folder.tsx
+++ b/pages/Folder.tsx
@@ -45,7 +45,7 @@ const Folder = () => {
       }
     };
     fetchData();
-  }, []);
+  }, [listId]);
 
   const addLinkDivRef = useRef(null);
   const footerDivRef = useRef(null);
diff --git a/utils/validation.ts b/utils/validation.ts
new file mode 100644
index 000000000..2897beafe
--- /dev/null
+++ b/utils/validation.ts
@@ -0,0 +1,18 @@
+// 이메일 유효성 검사
+function emailCheck(email_address: string) {
+  let email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
+  return Boolean(email_regex.test(email_address));
+}
+
+// 비밀번호 유효성 검사
+function passwordCheck(password: string) {
+  let password_regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
+  return password_regex.test(password);
+}
+
+// 비밀번호 중복 확인
+export function isMatch(password1: string, password2: string) {
+  return password1 === password2;
+}
+
+export { emailCheck, passwordCheck };

From eee1b181c4431a730c81c7849d7091534cd1f30e Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Wed, 3 Apr 2024 20:34:57 +0900
Subject: [PATCH 09/28] =?UTF-8?q?Feat:=20input=20=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=EC=83=81=EC=88=98=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 constants/inputStatus.ts | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 constants/inputStatus.ts

diff --git a/constants/inputStatus.ts b/constants/inputStatus.ts
new file mode 100644
index 000000000..7405b58a6
--- /dev/null
+++ b/constants/inputStatus.ts
@@ -0,0 +1,35 @@
+import { ERROR_MESSAGE } from "./errorMessage";
+
+const INPUT_STATUS = {
+  noEmail: {
+    errorName: "noEmail",
+    type: "email",
+    message: ERROR_MESSAGE.email.empty,
+  },
+  wrongEmail: {
+    errorName: "wrongEmail",
+    type: "email",
+    message: ERROR_MESSAGE.email.invalid,
+  },
+  inUseEmail: {
+    errorName: "inUseEmail",
+    type: "email",
+    message: ERROR_MESSAGE.email.inUse,
+  },
+  noPassword: {
+    errorName: "noPassword",
+    type: "password",
+    message: ERROR_MESSAGE.password.empty,
+  },
+  wrongPassword: {
+    errorName: "wrongPassword",
+    type: "password",
+    message: ERROR_MESSAGE.password.invalid,
+  },
+  noMatchPassword: {
+    errorName: "noMatchPassword",
+    type: "password",
+    message: ERROR_MESSAGE.password.recheck,
+  },
+};
+export default INPUT_STATUS;

From 012a75d3cc699be8dfb195a0d1d53ce0faa98071 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Wed, 3 Apr 2024 20:36:11 +0900
Subject: [PATCH 10/28] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B9=88input=20=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=84=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=B6=9C=EB=A0=A5=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SignInUp/EmailPwdInput.tsx  | 160 +++++++++++++++++++++++++
 components/SignIn_Up/EmailPwdInput.tsx |  59 ---------
 pages/Signin.tsx                       |   2 +-
 pages/Signup.tsx                       |  27 ++++-
 4 files changed, 183 insertions(+), 65 deletions(-)
 create mode 100644 components/SignInUp/EmailPwdInput.tsx
 delete mode 100644 components/SignIn_Up/EmailPwdInput.tsx

diff --git a/components/SignInUp/EmailPwdInput.tsx b/components/SignInUp/EmailPwdInput.tsx
new file mode 100644
index 000000000..8b610fe1e
--- /dev/null
+++ b/components/SignInUp/EmailPwdInput.tsx
@@ -0,0 +1,160 @@
+import { useState, useEffect, ChangeEvent } from "react";
+import styled from "styled-components";
+import Image from "next/image";
+import eyeoff from "@/assets/icons/eye-off.png";
+import { changeInputBorderColor } from "@/utils/commonSigninupFunc";
+import { emailCheck, passwordCheck } from "@/utils/validation";
+import { ERROR_MESSAGE } from "@/constants/errorMessage";
+import INPUT_STATUS from "@/constants/inputStatus";
+
+type EmailPwdInputPropsType = {
+  title: string;
+  type: string;
+  isEyeIcon?: boolean;
+  setEmailValue?: React.Dispatch<React.SetStateAction<string>>;
+  emailValue?: string | "";
+  setPasswordValue?: React.Dispatch<React.SetStateAction<string>>;
+  passwordValue?: string | "";
+  setPassword2Value?: React.Dispatch<React.SetStateAction<string>>;
+  password2Value?: string | "";
+};
+
+const EmailPwdInput = ({
+  title,
+  type,
+  isEyeIcon,
+  setEmailValue,
+  emailValue,
+  setPasswordValue,
+  passwordValue,
+  setPassword2Value,
+  password2Value,
+}: EmailPwdInputPropsType) => {
+  const [inputStatus, setInputStatus] = useState("default");
+  const [inputErrorMessage, setInputErrorMessage] = useState("");
+
+  const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {};
+
+  const onInputFocusOutHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+
+    if (type === "email") {
+      const emailInputStatus = emailInputcheck(inputValue);
+      setInputStatusAndErrorMessage(emailInputStatus);
+    } else if (type === "password") {
+      const passwordInputStatus = passwordInputcheck(inputValue);
+      setInputStatusAndErrorMessage(passwordInputStatus);
+    } else if (type === "password2") {
+      console.log(passwordValue);
+    }
+  };
+
+  const emailInputcheck = (email: string): ErrorType => {
+    let status: ErrorType;
+    if (!email) {
+      status = INPUT_STATUS.noEmail;
+    } else if (!emailCheck(email)) {
+      status = INPUT_STATUS.wrongEmail;
+    } else {
+      status = "normal";
+    }
+    setEmailValue?.(email);
+    return status;
+  };
+
+  const passwordInputcheck = (
+    password: string,
+    password2?: string
+  ): ErrorType => {
+    let status: ErrorType;
+    if (!password) {
+      status = INPUT_STATUS.noPassword;
+    } else if (password2 && password !== password2) {
+      status = INPUT_STATUS.noMatchPassword;
+    } else {
+      status = "normal";
+    }
+    setPasswordValue?.(password);
+    return status;
+  };
+
+  const setInputStatusAndErrorMessage = (status: "normal" | ErrorType) => {
+    status === "normal"
+      ? setInputStatus("default")
+      : (setInputStatus("error"), setInputErrorMessage(status.message));
+  };
+
+  const onInputFocusHandler = () => {
+    setInputStatus("writing");
+  };
+
+  return (
+    <InputDiv>
+      <p>{title}</p>
+      <EmailPasswordInput
+        type={type}
+        status={inputStatus}
+        onChange={onInputChangeHandler}
+        onBlur={onInputFocusOutHandler}
+        onFocus={onInputFocusHandler}
+      />
+      {isEyeIcon && (
+        <EyeIconDiv>
+          <Image src={eyeoff} alt="eye_off_icon" />
+        </EyeIconDiv>
+      )}
+      {inputStatus === "error" && (
+        <ErrorMessageDiv>{inputErrorMessage}</ErrorMessageDiv>
+      )}
+    </InputDiv>
+  );
+};
+
+type ErrorType =
+  | {
+      errorName: string;
+      type: string;
+      message: string;
+    }
+  | "normal";
+
+const InputDiv = styled.div`
+  width: 100%;
+  margin-bottom: 24px;
+  position: relative;
+`;
+const EmailPasswordInput = styled.input<{ status: string }>`
+  width: 100%;
+  padding: 18px 15px;
+  border: ${({ status }) =>
+    `1px solid ${changeInputBorderColor(status) ?? "var(--Grey_300)"}`};
+  border-radius: 8px;
+  outline: none;
+  margin-top: 12px;
+
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+`;
+
+const EyeIconDiv = styled.div`
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 53px;
+  right: 16px;
+  cursor: pointer;
+`;
+
+const ErrorMessageDiv = styled.div`
+  color: var(--Red);
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-top: 6px;
+`;
+export default EmailPwdInput;
diff --git a/components/SignIn_Up/EmailPwdInput.tsx b/components/SignIn_Up/EmailPwdInput.tsx
deleted file mode 100644
index da0bc7b4a..000000000
--- a/components/SignIn_Up/EmailPwdInput.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import styled from "styled-components";
-import Image from "next/image";
-import eyeoff from "@/assets/icons/eye-off.png";
-
-type EmailPwdInputPropsType = {
-  title: string;
-  type: string;
-  isEyeIcon?: boolean;
-};
-
-const EmailPwdInput = ({ title, type, isEyeIcon }: EmailPwdInputPropsType) => {
-  return (
-    <InputDiv>
-      <p>{title}</p>
-      <EmailPasswordInput type={type} />
-      {isEyeIcon && (
-        <EyeIconDiv>
-          <Image src={eyeoff} alt="eye_off_icon" />
-        </EyeIconDiv>
-      )}
-    </InputDiv>
-  );
-};
-
-const InputDiv = styled.div`
-  width: 100%;
-  margin-bottom: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  position: relative;
-`;
-const EmailPasswordInput = styled.input`
-  width: 100%;
-  padding: 18px 15px;
-  border: 1px solid var(--Grey_300);
-  border-radius: 8px;
-
-  font-family: Pretendard;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-
-  &:focus {
-    outline: none;
-    border: 1px solid var(--Primary);
-  }
-`;
-
-const EyeIconDiv = styled.div`
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  top: 53px;
-  right: 16px;
-  cursor: pointer;
-`;
-export default EmailPwdInput;
diff --git a/pages/Signin.tsx b/pages/Signin.tsx
index 5382abe42..656c6f115 100644
--- a/pages/Signin.tsx
+++ b/pages/Signin.tsx
@@ -6,7 +6,7 @@ import login_logo from "@/assets/login_logo.png";
 import icon_google from "@/assets/icons/icon_google.png";
 import icon_kakao from "@/assets/icons/icon_kakao.png";
 import { BlueButton } from "@/components/common/BlueButton";
-import EmailPwdInput from "@/components/SignIn_Up/EmailPwdInput";
+import EmailPwdInput from "@/components/SignInUp/EmailPwdInput";
 
 export default function LogIn() {
   return (
diff --git a/pages/Signup.tsx b/pages/Signup.tsx
index d803845f9..b7a14e0e4 100644
--- a/pages/Signup.tsx
+++ b/pages/Signup.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import Image from "next/image";
 import Link from "next/link";
@@ -6,9 +6,13 @@ import login_logo from "@/assets/login_logo.png";
 import icon_google from "@/assets/icons/icon_google.png";
 import icon_kakao from "@/assets/icons/icon_kakao.png";
 import { BlueButton } from "@/components/common/BlueButton";
-import EmailPwdInput from "@/components/SignIn_Up/EmailPwdInput";
+import EmailPwdInput from "@/components/SignInUp/EmailPwdInput";
 
 export default function Signup() {
+  const [emailValue, setEmailValue] = useState("");
+  const [passwordValue, setPasswordValue] = useState("");
+  const [password2Value, setPassword2Value] = useState("");
+
   return (
     <BackgroundDiv>
       <ContainerDiv>
@@ -24,12 +28,25 @@ export default function Signup() {
           </p>
         </TitleDiv>
         <InputBoxDiv>
-          <EmailPwdInput title="이메일" type="email" />
-          <EmailPwdInput title="비밀번호" type="password" isEyeIcon={true} />
           <EmailPwdInput
-            title="비밀번호 확인"
+            title="이메일"
+            type="email"
+            setEmailValue={setEmailValue}
+            emailValue={emailValue}
+          />
+          <EmailPwdInput
+            title="비밀번호"
             type="password"
             isEyeIcon={true}
+            setPasswordValue={setPasswordValue}
+            passwordValue={passwordValue}
+          />
+          <EmailPwdInput
+            title="비밀번호 확인"
+            type="password2"
+            setPassword2Value={setPassword2Value}
+            password2Value={password2Value}
+            isEyeIcon={true}
           />
         </InputBoxDiv>
         <BlueButton

From 173d34941a416b8d9f5ce9653b4cb705e0937473 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Wed, 3 Apr 2024 20:37:17 +0900
Subject: [PATCH 11/28] =?UTF-8?q?Feat:=20=EC=97=90=EB=9F=AC=20=EB=A9=94?=
 =?UTF-8?q?=EC=84=B8=EC=A7=80=20=EC=83=81=EC=88=98=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A5=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 constants/errorMessage.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 constants/errorMessage.ts

diff --git a/constants/errorMessage.ts b/constants/errorMessage.ts
new file mode 100644
index 000000000..5555e6f67
--- /dev/null
+++ b/constants/errorMessage.ts
@@ -0,0 +1,16 @@
+const ERROR_MESSAGE = {
+  email: {
+    empty: "이메일을 입력해주세요.",
+    invalid: "올바른 이메일이 아닙니다.",
+    check: "이메일을 확인해 주세요.",
+    inUse: "이미 존재하는 이메일입니다.",
+  },
+  password: {
+    empty: "비밀번호을 입력해 주세요",
+    invalid: "비밀번호는 영문,숫자 조합 8자 이상 입력해주세요.",
+    check: "비밀번호을 확인해 주세요",
+    recheck: "비밀번호가 일치하지 않아요.",
+  },
+};
+
+export { ERROR_MESSAGE };

From 63679b4237cde6ee3d56679266dcf7cbce508a50 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Sat, 6 Apr 2024 01:16:51 +0900
Subject: [PATCH 12/28] =?UTF-8?q?Feat:=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=ED=99=95=EC=9D=B8=20input=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=9C=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SignInUp/EmailPwdInput.tsx | 57 ++++++++-------------------
 constants/errorMsg.ts                 | 16 --------
 pages/Signup.tsx                      |  5 +--
 utils/validation.ts                   | 37 +++++++++++++++++
 4 files changed, 54 insertions(+), 61 deletions(-)
 delete mode 100644 constants/errorMsg.ts

diff --git a/components/SignInUp/EmailPwdInput.tsx b/components/SignInUp/EmailPwdInput.tsx
index 8b610fe1e..fe269cd17 100644
--- a/components/SignInUp/EmailPwdInput.tsx
+++ b/components/SignInUp/EmailPwdInput.tsx
@@ -3,9 +3,10 @@ import styled from "styled-components";
 import Image from "next/image";
 import eyeoff from "@/assets/icons/eye-off.png";
 import { changeInputBorderColor } from "@/utils/commonSigninupFunc";
-import { emailCheck, passwordCheck } from "@/utils/validation";
-import { ERROR_MESSAGE } from "@/constants/errorMessage";
-import INPUT_STATUS from "@/constants/inputStatus";
+import {
+  emailInputValidationcheck,
+  passwordInputValidationcheck,
+} from "@/utils/validation";
 
 type EmailPwdInputPropsType = {
   title: string;
@@ -13,10 +14,8 @@ type EmailPwdInputPropsType = {
   isEyeIcon?: boolean;
   setEmailValue?: React.Dispatch<React.SetStateAction<string>>;
   emailValue?: string | "";
-  setPasswordValue?: React.Dispatch<React.SetStateAction<string>>;
-  passwordValue?: string | "";
-  setPassword2Value?: React.Dispatch<React.SetStateAction<string>>;
-  password2Value?: string | "";
+  setPasswordValue?: React.Dispatch<React.SetStateAction<string | undefined>>;
+  passwordValue?: string | undefined;
 };
 
 const EmailPwdInput = ({
@@ -27,8 +26,6 @@ const EmailPwdInput = ({
   emailValue,
   setPasswordValue,
   passwordValue,
-  setPassword2Value,
-  password2Value,
 }: EmailPwdInputPropsType) => {
   const [inputStatus, setInputStatus] = useState("default");
   const [inputErrorMessage, setInputErrorMessage] = useState("");
@@ -39,43 +36,21 @@ const EmailPwdInput = ({
     const inputValue = e.target.value;
 
     if (type === "email") {
-      const emailInputStatus = emailInputcheck(inputValue);
+      const emailInputStatus = emailInputValidationcheck(inputValue);
       setInputStatusAndErrorMessage(emailInputStatus);
+      setEmailValue?.(inputValue);
     } else if (type === "password") {
-      const passwordInputStatus = passwordInputcheck(inputValue);
+      const passwordInputStatus = passwordInputValidationcheck(inputValue);
       setInputStatusAndErrorMessage(passwordInputStatus);
+      setPasswordValue?.(inputValue);
     } else if (type === "password2") {
-      console.log(passwordValue);
-    }
-  };
-
-  const emailInputcheck = (email: string): ErrorType => {
-    let status: ErrorType;
-    if (!email) {
-      status = INPUT_STATUS.noEmail;
-    } else if (!emailCheck(email)) {
-      status = INPUT_STATUS.wrongEmail;
-    } else {
-      status = "normal";
-    }
-    setEmailValue?.(email);
-    return status;
-  };
-
-  const passwordInputcheck = (
-    password: string,
-    password2?: string
-  ): ErrorType => {
-    let status: ErrorType;
-    if (!password) {
-      status = INPUT_STATUS.noPassword;
-    } else if (password2 && password !== password2) {
-      status = INPUT_STATUS.noMatchPassword;
-    } else {
-      status = "normal";
+      const passwordInputStatus = passwordInputValidationcheck(
+        passwordValue,
+        inputValue
+      );
+      setInputStatusAndErrorMessage(passwordInputStatus);
+      setPasswordValue?.(inputValue);
     }
-    setPasswordValue?.(password);
-    return status;
   };
 
   const setInputStatusAndErrorMessage = (status: "normal" | ErrorType) => {
diff --git a/constants/errorMsg.ts b/constants/errorMsg.ts
deleted file mode 100644
index 5555e6f67..000000000
--- a/constants/errorMsg.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-const ERROR_MESSAGE = {
-  email: {
-    empty: "이메일을 입력해주세요.",
-    invalid: "올바른 이메일이 아닙니다.",
-    check: "이메일을 확인해 주세요.",
-    inUse: "이미 존재하는 이메일입니다.",
-  },
-  password: {
-    empty: "비밀번호을 입력해 주세요",
-    invalid: "비밀번호는 영문,숫자 조합 8자 이상 입력해주세요.",
-    check: "비밀번호을 확인해 주세요",
-    recheck: "비밀번호가 일치하지 않아요.",
-  },
-};
-
-export { ERROR_MESSAGE };
diff --git a/pages/Signup.tsx b/pages/Signup.tsx
index b7a14e0e4..18a3f6fd8 100644
--- a/pages/Signup.tsx
+++ b/pages/Signup.tsx
@@ -10,8 +10,7 @@ import EmailPwdInput from "@/components/SignInUp/EmailPwdInput";
 
 export default function Signup() {
   const [emailValue, setEmailValue] = useState("");
-  const [passwordValue, setPasswordValue] = useState("");
-  const [password2Value, setPassword2Value] = useState("");
+  const [passwordValue, setPasswordValue] = useState<string | undefined>("");
 
   return (
     <BackgroundDiv>
@@ -44,8 +43,6 @@ export default function Signup() {
           <EmailPwdInput
             title="비밀번호 확인"
             type="password2"
-            setPassword2Value={setPassword2Value}
-            password2Value={password2Value}
             isEyeIcon={true}
           />
         </InputBoxDiv>
diff --git a/utils/validation.ts b/utils/validation.ts
index 2897beafe..22c228d80 100644
--- a/utils/validation.ts
+++ b/utils/validation.ts
@@ -1,9 +1,46 @@
+import INPUT_STATUS from "@/constants/inputStatus";
+
 // 이메일 유효성 검사
 function emailCheck(email_address: string) {
   let email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
   return Boolean(email_regex.test(email_address));
 }
 
+type ErrorType =
+  | {
+      errorName: string;
+      type: string;
+      message: string;
+    }
+  | "normal";
+
+export const emailInputValidationcheck = (email: string): ErrorType => {
+  let status: ErrorType;
+  if (!email) {
+    status = INPUT_STATUS.noEmail;
+  } else if (!emailCheck(email)) {
+    status = INPUT_STATUS.wrongEmail;
+  } else {
+    status = "normal";
+  }
+  return status;
+};
+
+export const passwordInputValidationcheck = (
+  password: string | undefined,
+  password2?: string | undefined
+): ErrorType => {
+  let status: ErrorType;
+  if (!password) {
+    status = INPUT_STATUS.noPassword;
+  } else if (password2 && password !== password2) {
+    status = INPUT_STATUS.noMatchPassword;
+  } else {
+    status = "normal";
+  }
+  return status;
+};
+
 // 비밀번호 유효성 검사
 function passwordCheck(password: string) {
   let password_regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;

From d832f3cfadfc539f8a99aeca0f2936e9a922966a Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Sat, 6 Apr 2024 02:58:14 +0900
Subject: [PATCH 13/28] =?UTF-8?q?Feat:=20enter=20=ED=82=A4=20or=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=8B=9C?=
 =?UTF-8?q?=EB=8F=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/api.ts                            | 23 ++++++++
 components/SignInUp/EmailPwdInput.tsx | 22 +++++--
 components/common/BlueButton.tsx      |  2 +-
 constants/commonTypes.ts              |  2 +-
 pages/Signin.tsx                      | 34 ++++++++++-
 pages/Signup.tsx                      |  8 +++
 utils/commonSigninupFunc.ts           | 85 +++++++++++++++++++++++++++
 7 files changed, 165 insertions(+), 11 deletions(-)
 create mode 100644 utils/commonSigninupFunc.ts

diff --git a/api/api.ts b/api/api.ts
index eb39c62c0..29f106b95 100644
--- a/api/api.ts
+++ b/api/api.ts
@@ -10,6 +10,22 @@ const fetchJson = async (url: string) => {
   }
 };
 
+const fetchPOSTJson = async (url: string, data: any) => {
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
 export const getFolderInfo = async () => {
   const url = `${BASE_URL}sample/folder`;
   return await fetchJson(url);
@@ -24,9 +40,16 @@ export const getFolderList = async () => {
   const url = `${BASE_URL}users/1/folders`;
   return fetchJson(url);
 };
+
 export const getAllLinkData = async (id: string) => {
   const url = id
     ? `${BASE_URL}users/1/folders/${id}`
     : `${BASE_URL}users/1/links`;
   return fetchJson(url);
 };
+
+export const postSignIn = async (data: any) => {
+  console.log(data);
+  const url = `${BASE_URL}sign-in`;
+  return fetchPOSTJson(url, data);
+};
diff --git a/components/SignInUp/EmailPwdInput.tsx b/components/SignInUp/EmailPwdInput.tsx
index fe269cd17..989234d69 100644
--- a/components/SignInUp/EmailPwdInput.tsx
+++ b/components/SignInUp/EmailPwdInput.tsx
@@ -1,8 +1,8 @@
-import { useState, useEffect, ChangeEvent } from "react";
+import { useState, useEffect, ChangeEvent, KeyboardEvent } from "react";
 import styled from "styled-components";
 import Image from "next/image";
 import eyeoff from "@/assets/icons/eye-off.png";
-import { changeInputBorderColor } from "@/utils/commonSigninupFunc";
+import { changeInputBorderColor, EnterLogin } from "@/utils/commonSigninupFunc";
 import {
   emailInputValidationcheck,
   passwordInputValidationcheck,
@@ -16,6 +16,7 @@ type EmailPwdInputPropsType = {
   emailValue?: string | "";
   setPasswordValue?: React.Dispatch<React.SetStateAction<string | undefined>>;
   passwordValue?: string | undefined;
+  onEnterButtonClick: () => void;
 };
 
 const EmailPwdInput = ({
@@ -26,11 +27,19 @@ const EmailPwdInput = ({
   emailValue,
   setPasswordValue,
   passwordValue,
+  onEnterButtonClick,
 }: EmailPwdInputPropsType) => {
   const [inputStatus, setInputStatus] = useState("default");
   const [inputErrorMessage, setInputErrorMessage] = useState("");
 
-  const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {};
+  const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    if (type === "email") {
+      setEmailValue?.(inputValue);
+    } else if (type === "password") {
+      setPasswordValue?.(inputValue);
+    }
+  };
 
   const onInputFocusOutHandler = (e: ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
@@ -38,18 +47,16 @@ const EmailPwdInput = ({
     if (type === "email") {
       const emailInputStatus = emailInputValidationcheck(inputValue);
       setInputStatusAndErrorMessage(emailInputStatus);
-      setEmailValue?.(inputValue);
     } else if (type === "password") {
       const passwordInputStatus = passwordInputValidationcheck(inputValue);
       setInputStatusAndErrorMessage(passwordInputStatus);
-      setPasswordValue?.(inputValue);
     } else if (type === "password2") {
+      console.log(passwordValue);
       const passwordInputStatus = passwordInputValidationcheck(
         passwordValue,
         inputValue
       );
       setInputStatusAndErrorMessage(passwordInputStatus);
-      setPasswordValue?.(inputValue);
     }
   };
 
@@ -69,6 +76,9 @@ const EmailPwdInput = ({
       <EmailPasswordInput
         type={type}
         status={inputStatus}
+        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+          EnterLogin(e.key, onEnterButtonClick);
+        }}
         onChange={onInputChangeHandler}
         onBlur={onInputFocusOutHandler}
         onFocus={onInputFocusHandler}
diff --git a/components/common/BlueButton.tsx b/components/common/BlueButton.tsx
index dfddb7671..9c2fe6640 100644
--- a/components/common/BlueButton.tsx
+++ b/components/common/BlueButton.tsx
@@ -21,7 +21,7 @@ export const BlueButton = ({
       color={COLORS.White}
       fontSize={fontSize}
       radius={radius}
-      onClick={() => onBtnHandle?.()}
+      onClick={onBtnHandle}
     >
       {text}
     </Button>
diff --git a/constants/commonTypes.ts b/constants/commonTypes.ts
index c58e6ee98..c5d072314 100644
--- a/constants/commonTypes.ts
+++ b/constants/commonTypes.ts
@@ -22,5 +22,5 @@ export interface CommonButtonCustomProps {
   padding?: string;
   fontSize?: string;
   radius?: string;
-  onBtnHandle?: () => {};
+  onBtnHandle?: () => void;
 }
diff --git a/pages/Signin.tsx b/pages/Signin.tsx
index 656c6f115..060cff3e0 100644
--- a/pages/Signin.tsx
+++ b/pages/Signin.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import Image from "next/image";
 import Link from "next/link";
@@ -7,8 +7,18 @@ import icon_google from "@/assets/icons/icon_google.png";
 import icon_kakao from "@/assets/icons/icon_kakao.png";
 import { BlueButton } from "@/components/common/BlueButton";
 import EmailPwdInput from "@/components/SignInUp/EmailPwdInput";
+import { postSignIn } from "@/api/api";
 
 export default function LogIn() {
+  const [emailValue, setEmailValue] = useState("");
+  const [passwordValue, setPasswordValue] = useState<string | undefined>("");
+
+  const tryLogin = () => {
+    const postJsonValue = { email: emailValue, password: passwordValue };
+    console.log(postJsonValue);
+    postSignIn(postJsonValue);
+  };
+
   return (
     <BackgroundDiv>
       <ContainerDiv>
@@ -24,8 +34,25 @@ export default function LogIn() {
           </p>
         </TitleDiv>
         <InputBoxDiv>
-          <EmailPwdInput title="이메일" type="email" />
-          <EmailPwdInput title="비밀번호" type="password" isEyeIcon={true} />
+          <EmailPwdInput
+            title="이메일"
+            type="email"
+            setEmailValue={setEmailValue}
+            emailValue={emailValue}
+            setPasswordValue={setPasswordValue}
+            passwordValue={passwordValue}
+            onEnterButtonClick={tryLogin}
+          />
+          <EmailPwdInput
+            title="비밀번호"
+            type="password"
+            isEyeIcon={true}
+            setEmailValue={setEmailValue}
+            emailValue={emailValue}
+            setPasswordValue={setPasswordValue}
+            passwordValue={passwordValue}
+            onEnterButtonClick={tryLogin}
+          />
         </InputBoxDiv>
         <BlueButton
           text="로그인"
@@ -34,6 +61,7 @@ export default function LogIn() {
           padding="16px 20px"
           radius="8px"
           fontSize="18px"
+          onBtnHandle={tryLogin}
         />
         <SocialLoginDiv>
           <span>소셜 로그인</span>
diff --git a/pages/Signup.tsx b/pages/Signup.tsx
index 18a3f6fd8..302b02ba4 100644
--- a/pages/Signup.tsx
+++ b/pages/Signup.tsx
@@ -32,11 +32,15 @@ export default function Signup() {
             type="email"
             setEmailValue={setEmailValue}
             emailValue={emailValue}
+            setPasswordValue={setPasswordValue}
+            passwordValue={passwordValue}
           />
           <EmailPwdInput
             title="비밀번호"
             type="password"
             isEyeIcon={true}
+            setEmailValue={setEmailValue}
+            emailValue={emailValue}
             setPasswordValue={setPasswordValue}
             passwordValue={passwordValue}
           />
@@ -44,6 +48,10 @@ export default function Signup() {
             title="비밀번호 확인"
             type="password2"
             isEyeIcon={true}
+            setEmailValue={setEmailValue}
+            emailValue={emailValue}
+            setPasswordValue={setPasswordValue}
+            passwordValue={passwordValue}
           />
         </InputBoxDiv>
         <BlueButton
diff --git a/utils/commonSigninupFunc.ts b/utils/commonSigninupFunc.ts
new file mode 100644
index 000000000..cbc0508a3
--- /dev/null
+++ b/utils/commonSigninupFunc.ts
@@ -0,0 +1,85 @@
+import { ERROR_MESSAGE } from "@/constants/errorMessage";
+// import { pwdInput, pwdEyeIcon } from "../declaration.js";
+
+// enter키 입력으로 로그인 실행
+export function EnterLogin(key: string, func: () => void) {
+  if (key === "Enter") {
+    func();
+  }
+}
+
+export const changeInputBorderColor = (status: string | undefined) => {
+  switch (status) {
+    case "default":
+      return "var(--Grey_300)";
+    case "writing":
+      return "var(--Primary)";
+    default:
+      return "var(--Red)";
+  }
+};
+
+// 에러 메세지 출력 함수
+// export function errorMsg(errorCase: string) {
+//   let newNode = document.createElement("div");
+
+//   switch (errorCase) {
+//     case "NoEmail":
+//       inputAddNode({
+//         type: "email",
+//         message: ERROR_MESSAGE.email.empty,
+//         errorCase: errorCase,
+//       });
+//       break;
+//     case "wrongEmail":
+//       inputAddNode({
+//         type: "email",
+//         message: ERROR_MESSAGE.email.invalid,
+//         errorCase: errorCase,
+//       });
+//       break;
+//     case "inUseEmail":
+//       inputAddNode({
+//         type: "email",
+//         message: ERROR_MESSAGE.email.inUse,
+//         errorCase: errorCase,
+//       });
+//       break;
+//     case "NoPwd":
+//       inputAddNode({
+//         type: "password",
+//         message: ERROR_MESSAGE.password.empty,
+//         errorCase: errorCase,
+//       });
+//       break;
+//     case "wrongPwd":
+//       inputAddNode({
+//         type: "password",
+//         message: ERROR_MESSAGE.password.invalid,
+//         errorCase: errorCase,
+//       });
+//       break;
+//     case "noMatchPwd":
+//       inputAddNode({
+//         type: "password2",
+//         message: ERROR_MESSAGE.password.recheck,
+//         errorCase: errorCase,
+//       });
+//       break;
+//     case "Other":
+//       inputAddNode({
+//         type: "email",
+//         message: ERROR_MESSAGE.email.check,
+//         errorCase: errorCase,
+//       });
+//       inputAddNode({
+//         type: "password",
+//         message: ERROR_MESSAGE.password.check,
+//         errorCase: errorCase,
+//       });
+//       break;
+//   }
+// }
+
+// // password input 눈모양 클릭 실행 함수
+// export function EyePwd(EyeStatus: string) {}

From 048320efeb7466b167cf5b2cab70d91f81fe10ec Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Sat, 6 Apr 2024 11:55:16 +0900
Subject: [PATCH 14/28] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=84=B1=EA=B3=B5=EA=B3=BC=20=EC=8B=A4=ED=8C=A8=20=EC=8B=9C=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SignInUp/EmailPwdInput.tsx | 13 +++++++++++++
 constants/inputStatus.ts              | 10 ++++++++++
 pages/Signin.tsx                      | 24 +++++++++++++++++++++---
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/components/SignInUp/EmailPwdInput.tsx b/components/SignInUp/EmailPwdInput.tsx
index 989234d69..eede6994e 100644
--- a/components/SignInUp/EmailPwdInput.tsx
+++ b/components/SignInUp/EmailPwdInput.tsx
@@ -7,6 +7,7 @@ import {
   emailInputValidationcheck,
   passwordInputValidationcheck,
 } from "@/utils/validation";
+import { ERROR_MESSAGE } from "@/constants/errorMessage";
 
 type EmailPwdInputPropsType = {
   title: string;
@@ -17,6 +18,7 @@ type EmailPwdInputPropsType = {
   setPasswordValue?: React.Dispatch<React.SetStateAction<string | undefined>>;
   passwordValue?: string | undefined;
   onEnterButtonClick: () => void;
+  loginStatus: string;
 };
 
 const EmailPwdInput = ({
@@ -28,6 +30,7 @@ const EmailPwdInput = ({
   setPasswordValue,
   passwordValue,
   onEnterButtonClick,
+  loginStatus,
 }: EmailPwdInputPropsType) => {
   const [inputStatus, setInputStatus] = useState("default");
   const [inputErrorMessage, setInputErrorMessage] = useState("");
@@ -66,6 +69,16 @@ const EmailPwdInput = ({
       : (setInputStatus("error"), setInputErrorMessage(status.message));
   };
 
+  useEffect(() => {
+    if (loginStatus === "fail") {
+      type === "email"
+        ? (setInputStatus("error"),
+          setInputErrorMessage(ERROR_MESSAGE.email.check))
+        : (setInputStatus("error"),
+          setInputErrorMessage(ERROR_MESSAGE.password.check));
+    }
+  }, [loginStatus]);
+
   const onInputFocusHandler = () => {
     setInputStatus("writing");
   };
diff --git a/constants/inputStatus.ts b/constants/inputStatus.ts
index 7405b58a6..d9f986525 100644
--- a/constants/inputStatus.ts
+++ b/constants/inputStatus.ts
@@ -16,6 +16,11 @@ const INPUT_STATUS = {
     type: "email",
     message: ERROR_MESSAGE.email.inUse,
   },
+  failLoginEmail: {
+    errorName: "failLoginEmail",
+    type: "email",
+    message: ERROR_MESSAGE.email.check,
+  },
   noPassword: {
     errorName: "noPassword",
     type: "password",
@@ -31,5 +36,10 @@ const INPUT_STATUS = {
     type: "password",
     message: ERROR_MESSAGE.password.recheck,
   },
+  failLoginPassword: {
+    errorName: "failLoginPassword",
+    type: "password",
+    message: ERROR_MESSAGE.password.check,
+  },
 };
 export default INPUT_STATUS;
diff --git a/pages/Signin.tsx b/pages/Signin.tsx
index 060cff3e0..64b4f1e57 100644
--- a/pages/Signin.tsx
+++ b/pages/Signin.tsx
@@ -12,11 +12,27 @@ import { postSignIn } from "@/api/api";
 export default function LogIn() {
   const [emailValue, setEmailValue] = useState("");
   const [passwordValue, setPasswordValue] = useState<string | undefined>("");
+  const [loginStatus, setLoginStatus] = useState("normal");
 
-  const tryLogin = () => {
+  const tryLogin = async () => {
     const postJsonValue = { email: emailValue, password: passwordValue };
-    console.log(postJsonValue);
-    postSignIn(postJsonValue);
+    let result;
+    try {
+      result = await postSignIn(postJsonValue);
+    } catch (error) {
+      console.error(error);
+    }
+
+    if (result.data) successLogin();
+    else failLogin();
+  };
+
+  const successLogin = () => {
+    setLoginStatus("success");
+  };
+
+  const failLogin = () => {
+    setLoginStatus("fail");
   };
 
   return (
@@ -42,6 +58,7 @@ export default function LogIn() {
             setPasswordValue={setPasswordValue}
             passwordValue={passwordValue}
             onEnterButtonClick={tryLogin}
+            loginStatus={loginStatus}
           />
           <EmailPwdInput
             title="비밀번호"
@@ -52,6 +69,7 @@ export default function LogIn() {
             setPasswordValue={setPasswordValue}
             passwordValue={passwordValue}
             onEnterButtonClick={tryLogin}
+            loginStatus={loginStatus}
           />
         </InputBoxDiv>
         <BlueButton

From 49d1e19b3fab040c3f86fb109eb863f73b183ce9 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Sat, 6 Apr 2024 12:10:36 +0900
Subject: [PATCH 15/28] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=84=B1=EA=B3=B5=20=EC=8B=9C=20=EB=A1=9C=EC=BB=AC=20=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A0=EB=A6=AC=EC=A7=80=20=EC=A0=80=EC=9E=A5=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=9E=90=EB=8F=99=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/Signin.tsx      | 13 ++++++++++---
 utils/localStorage.ts | 14 ++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 utils/localStorage.ts

diff --git a/pages/Signin.tsx b/pages/Signin.tsx
index 64b4f1e57..1e0d43ee5 100644
--- a/pages/Signin.tsx
+++ b/pages/Signin.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import Image from "next/image";
 import Link from "next/link";
@@ -8,12 +8,17 @@ import icon_kakao from "@/assets/icons/icon_kakao.png";
 import { BlueButton } from "@/components/common/BlueButton";
 import EmailPwdInput from "@/components/SignInUp/EmailPwdInput";
 import { postSignIn } from "@/api/api";
+import { localStorage } from "@/utils/localStorage";
 
 export default function LogIn() {
   const [emailValue, setEmailValue] = useState("");
   const [passwordValue, setPasswordValue] = useState<string | undefined>("");
   const [loginStatus, setLoginStatus] = useState("normal");
 
+  useEffect(() => {
+    localStorage.get("accessToken") && location.assign("/Folder");
+  }, []);
+
   const tryLogin = async () => {
     const postJsonValue = { email: emailValue, password: passwordValue };
     let result;
@@ -23,12 +28,14 @@ export default function LogIn() {
       console.error(error);
     }
 
-    if (result.data) successLogin();
+    if (result.data) successLogin(result);
     else failLogin();
   };
 
-  const successLogin = () => {
+  const successLogin = (result: any) => {
     setLoginStatus("success");
+    localStorage.save("accessToken", result.data.accessToken);
+    location.assign("/Folder");
   };
 
   const failLogin = () => {
diff --git a/utils/localStorage.ts b/utils/localStorage.ts
new file mode 100644
index 000000000..026ba0639
--- /dev/null
+++ b/utils/localStorage.ts
@@ -0,0 +1,14 @@
+// 로컬 스토리지에 저장하는 함수
+const localStorage = {
+  save: function (key: string, value: string) {
+    return window.localStorage.setItem(key, value);
+  },
+  get: function (key: string) {
+    return window.localStorage.getItem(key);
+  },
+  remove: function (key: string) {
+    return window.localStorage.removeItem(key);
+  },
+};
+
+export { localStorage };

From 4873f81f556c095f28479fb99c124ae32602d00f Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Sat, 6 Apr 2024 14:15:50 +0900
Subject: [PATCH 16/28] =?UTF-8?q?Feat:=20enter=ED=82=A4=EB=A5=BC=20?=
 =?UTF-8?q?=EC=9D=B4=EC=9A=A9=ED=95=9C=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=8B=9C=EB=8F=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SignInUp/EmailPwdInput.tsx  | 95 ++++++++++++++++++--------
 pages/Signin.tsx                       | 92 ++++++++-----------------
 pages/Signup.tsx                       | 82 ++++++++++++++++++----
 utils/{calculator.js => calculator.ts} |  0
 utils/commonSigninupFunc.ts            |  7 --
 utils/validation.ts                    | 25 +++++--
 6 files changed, 182 insertions(+), 119 deletions(-)
 rename utils/{calculator.js => calculator.ts} (100%)

diff --git a/components/SignInUp/EmailPwdInput.tsx b/components/SignInUp/EmailPwdInput.tsx
index eede6994e..16396320b 100644
--- a/components/SignInUp/EmailPwdInput.tsx
+++ b/components/SignInUp/EmailPwdInput.tsx
@@ -2,10 +2,11 @@ import { useState, useEffect, ChangeEvent, KeyboardEvent } from "react";
 import styled from "styled-components";
 import Image from "next/image";
 import eyeoff from "@/assets/icons/eye-off.png";
-import { changeInputBorderColor, EnterLogin } from "@/utils/commonSigninupFunc";
+import { changeInputBorderColor } from "@/utils/commonSigninupFunc";
 import {
   emailInputValidationcheck,
-  passwordInputValidationcheck,
+  loginPasswordInputValidationcheck,
+  signInPasswordInputValidationcheck,
 } from "@/utils/validation";
 import { ERROR_MESSAGE } from "@/constants/errorMessage";
 
@@ -18,7 +19,10 @@ type EmailPwdInputPropsType = {
   setPasswordValue?: React.Dispatch<React.SetStateAction<string | undefined>>;
   passwordValue?: string | undefined;
   onEnterButtonClick: () => void;
-  loginStatus: string;
+  loginStatus?: string;
+  setIsEmailValid?: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsPasswordValid?: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsPasswordConfirmValid?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const EmailPwdInput = ({
@@ -31,7 +35,14 @@ const EmailPwdInput = ({
   passwordValue,
   onEnterButtonClick,
   loginStatus,
+  setIsEmailValid,
+  setIsPasswordValid,
+  setIsPasswordConfirmValid,
 }: EmailPwdInputPropsType) => {
+  const INPUT_STATUS_VALUE = {
+    default: "default",
+    error: "error",
+  };
   const [inputStatus, setInputStatus] = useState("default");
   const [inputErrorMessage, setInputErrorMessage] = useState("");
 
@@ -44,37 +55,58 @@ const EmailPwdInput = ({
     }
   };
 
+  const setInputStatusAndErrorMessage = (status: "valid" | ErrorType) => {
+    status === "valid"
+      ? setInputStatus(INPUT_STATUS_VALUE.default)
+      : (setInputStatus(INPUT_STATUS_VALUE.error),
+        setInputErrorMessage(status.message));
+  };
+
   const onInputFocusOutHandler = (e: ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
 
-    if (type === "email") {
-      const emailInputStatus = emailInputValidationcheck(inputValue);
-      setInputStatusAndErrorMessage(emailInputStatus);
-    } else if (type === "password") {
-      const passwordInputStatus = passwordInputValidationcheck(inputValue);
-      setInputStatusAndErrorMessage(passwordInputStatus);
-    } else if (type === "password2") {
-      console.log(passwordValue);
-      const passwordInputStatus = passwordInputValidationcheck(
-        passwordValue,
-        inputValue
-      );
-      setInputStatusAndErrorMessage(passwordInputStatus);
+    switch (type) {
+      case "email":
+        const emailInputStatus = emailInputValidationcheck(inputValue);
+        setInputStatusAndErrorMessage(emailInputStatus);
+        emailInputStatus === "valid"
+          ? setIsEmailValid?.(true)
+          : setIsEmailValid?.(false);
+        break;
+      case "password": {
+        let passwordInputStatus;
+        if (loginStatus) {
+          passwordInputStatus = loginPasswordInputValidationcheck(inputValue);
+        } else {
+          passwordInputStatus = signInPasswordInputValidationcheck(inputValue);
+        }
+        setInputStatusAndErrorMessage(passwordInputStatus);
+        passwordInputStatus === "valid"
+          ? setIsPasswordValid?.(true)
+          : setIsPasswordValid?.(false);
+        break;
+      }
+      case "password2":
+        const passwordInputStatus = signInPasswordInputValidationcheck(
+          passwordValue,
+          inputValue
+        );
+        setInputStatusAndErrorMessage(passwordInputStatus);
+        passwordInputStatus === "valid"
+          ? setIsPasswordConfirmValid?.(true)
+          : setIsPasswordConfirmValid?.(false);
+        break;
+      default:
+        null;
     }
   };
 
-  const setInputStatusAndErrorMessage = (status: "normal" | ErrorType) => {
-    status === "normal"
-      ? setInputStatus("default")
-      : (setInputStatus("error"), setInputErrorMessage(status.message));
-  };
-
   useEffect(() => {
     if (loginStatus === "fail") {
       type === "email"
-        ? (setInputStatus("error"),
+        ? (setInputStatus(INPUT_STATUS_VALUE.error),
           setInputErrorMessage(ERROR_MESSAGE.email.check))
-        : (setInputStatus("error"),
+        : (setInputStatus(INPUT_STATUS_VALUE.error),
           setInputErrorMessage(ERROR_MESSAGE.password.check));
     }
   }, [loginStatus]);
@@ -83,15 +115,22 @@ const EmailPwdInput = ({
     setInputStatus("writing");
   };
 
+  const KeyEventHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    const inputElement = e.target as HTMLInputElement;
+    if (e.key === "Enter") {
+      onEnterButtonClick();
+      inputElement.blur();
+      console.log("dd");
+    }
+  };
+
   return (
     <InputDiv>
       <p>{title}</p>
       <EmailPasswordInput
         type={type}
         status={inputStatus}
-        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
-          EnterLogin(e.key, onEnterButtonClick);
-        }}
+        onKeyDown={KeyEventHandler}
         onChange={onInputChangeHandler}
         onBlur={onInputFocusOutHandler}
         onFocus={onInputFocusHandler}
@@ -114,7 +153,7 @@ type ErrorType =
       type: string;
       message: string;
     }
-  | "normal";
+  | "valid";
 
 const InputDiv = styled.div`
   width: 100%;
diff --git a/pages/Signin.tsx b/pages/Signin.tsx
index 1e0d43ee5..7869762b6 100644
--- a/pages/Signin.tsx
+++ b/pages/Signin.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import Image from "next/image";
 import Link from "next/link";
@@ -7,39 +7,18 @@ import icon_google from "@/assets/icons/icon_google.png";
 import icon_kakao from "@/assets/icons/icon_kakao.png";
 import { BlueButton } from "@/components/common/BlueButton";
 import EmailPwdInput from "@/components/SignInUp/EmailPwdInput";
-import { postSignIn } from "@/api/api";
-import { localStorage } from "@/utils/localStorage";
 
-export default function LogIn() {
+export default function Signup() {
   const [emailValue, setEmailValue] = useState("");
   const [passwordValue, setPasswordValue] = useState<string | undefined>("");
-  const [loginStatus, setLoginStatus] = useState("normal");
+  const [isEmailValid, setIsEmailValid] = useState(false);
+  const [isPasswordValid, setIsPasswordValid] = useState(false);
+  const [isPasswordConfirmValid, setIsPasswordConfirmValid] = useState(false);
 
-  useEffect(() => {
-    localStorage.get("accessToken") && location.assign("/Folder");
-  }, []);
-
-  const tryLogin = async () => {
-    const postJsonValue = { email: emailValue, password: passwordValue };
-    let result;
-    try {
-      result = await postSignIn(postJsonValue);
-    } catch (error) {
-      console.error(error);
+  const trySignin = () => {
+    if (isEmailValid && isPasswordValid && isPasswordConfirmValid) {
+      console.log("회원가입 시도");
     }
-
-    if (result.data) successLogin(result);
-    else failLogin();
-  };
-
-  const successLogin = (result: any) => {
-    setLoginStatus("success");
-    localStorage.save("accessToken", result.data.accessToken);
-    location.assign("/Folder");
-  };
-
-  const failLogin = () => {
-    setLoginStatus("fail");
   };
 
   return (
@@ -50,9 +29,9 @@ export default function LogIn() {
             <Image src={login_logo} alt="login log" />
           </Link>
           <p>
-            회원이 아니신가요?{" "}
+            이미 회원이신가요?{" "}
             <Link href="./Signup" id="header-link">
-              <span>회원 가입하기</span>
+              <span>로그인 하기</span>
             </Link>
           </p>
         </TitleDiv>
@@ -64,8 +43,8 @@ export default function LogIn() {
             emailValue={emailValue}
             setPasswordValue={setPasswordValue}
             passwordValue={passwordValue}
-            onEnterButtonClick={tryLogin}
-            loginStatus={loginStatus}
+            onEnterButtonClick={trySignin}
+            setIsEmailValid={setIsEmailValid}
           />
           <EmailPwdInput
             title="비밀번호"
@@ -75,21 +54,32 @@ export default function LogIn() {
             emailValue={emailValue}
             setPasswordValue={setPasswordValue}
             passwordValue={passwordValue}
-            onEnterButtonClick={tryLogin}
-            loginStatus={loginStatus}
+            onEnterButtonClick={trySignin}
+            setIsPasswordValid={setIsPasswordValid}
+          />
+          <EmailPwdInput
+            title="비밀번호 확인"
+            type="password2"
+            isEyeIcon={true}
+            setEmailValue={setEmailValue}
+            emailValue={emailValue}
+            setPasswordValue={setPasswordValue}
+            passwordValue={passwordValue}
+            onEnterButtonClick={trySignin}
+            setIsPasswordConfirmValid={setIsPasswordConfirmValid}
           />
         </InputBoxDiv>
         <BlueButton
-          text="로그인"
+          text="회원가입"
           width="100%"
           margin="0px 0px 32px"
           padding="16px 20px"
           radius="8px"
           fontSize="18px"
-          onBtnHandle={tryLogin}
+          onBtnHandle={trySignin}
         />
         <SocialLoginDiv>
-          <span>소셜 로그인</span>
+          <span>다른 방식으로 가입하기</span>
           <SocialIconDiv>
             <div id="googleIconBackGround">
               <Link href="https://www.google.com/">
@@ -170,23 +160,6 @@ const InputDiv = styled.div`
   gap: 12px;
   position: relative;
 `;
-const EmailPasswordInput = styled.input`
-  width: 100%;
-  padding: 18px 15px;
-  border: 1px solid var(--Grey_300);
-  border-radius: 8px;
-
-  font-family: Pretendard;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-
-  &:focus {
-    outline: none;
-    border: 1px solid var(--Primary);
-  }
-`;
 
 const SocialLoginDiv = styled.div`
   width: 100%;
@@ -227,12 +200,3 @@ const SocialIconDiv = styled.div`
     background-color: #f5e14b;
   }
 `;
-
-const EyeIconDiv = styled.div`
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  top: 53px;
-  right: 16px;
-  cursor: pointer;
-`;
diff --git a/pages/Signup.tsx b/pages/Signup.tsx
index 302b02ba4..dd9658fd5 100644
--- a/pages/Signup.tsx
+++ b/pages/Signup.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import Image from "next/image";
 import Link from "next/link";
@@ -7,10 +7,40 @@ import icon_google from "@/assets/icons/icon_google.png";
 import icon_kakao from "@/assets/icons/icon_kakao.png";
 import { BlueButton } from "@/components/common/BlueButton";
 import EmailPwdInput from "@/components/SignInUp/EmailPwdInput";
+import { postSignIn } from "@/api/api";
+import { localStorage } from "@/utils/localStorage";
 
-export default function Signup() {
+export default function LogIn() {
   const [emailValue, setEmailValue] = useState("");
   const [passwordValue, setPasswordValue] = useState<string | undefined>("");
+  const [loginStatus, setLoginStatus] = useState("normal");
+
+  useEffect(() => {
+    localStorage.get("accessToken") && location.assign("/Folder");
+  }, []);
+
+  const tryLogin = async () => {
+    const postJsonValue = { email: emailValue, password: passwordValue };
+    let result;
+    try {
+      result = await postSignIn(postJsonValue);
+    } catch (error) {
+      console.error(error);
+    }
+
+    if (result.data) successLogin(result);
+    else failLogin();
+  };
+
+  const successLogin = (result: any) => {
+    setLoginStatus("success");
+    localStorage.save("accessToken", result.data.accessToken);
+    location.assign("/Folder");
+  };
+
+  const failLogin = () => {
+    setLoginStatus("fail");
+  };
 
   return (
     <BackgroundDiv>
@@ -20,9 +50,9 @@ export default function Signup() {
             <Image src={login_logo} alt="login log" />
           </Link>
           <p>
-            이미 회원이신가요?{" "}
+            회원이 아니신가요?{" "}
             <Link href="./Signin" id="header-link">
-              <span>로그인 하기</span>
+              <span>회원 가입하기</span>
             </Link>
           </p>
         </TitleDiv>
@@ -34,6 +64,8 @@ export default function Signup() {
             emailValue={emailValue}
             setPasswordValue={setPasswordValue}
             passwordValue={passwordValue}
+            onEnterButtonClick={tryLogin}
+            loginStatus={loginStatus}
           />
           <EmailPwdInput
             title="비밀번호"
@@ -43,27 +75,21 @@ export default function Signup() {
             emailValue={emailValue}
             setPasswordValue={setPasswordValue}
             passwordValue={passwordValue}
-          />
-          <EmailPwdInput
-            title="비밀번호 확인"
-            type="password2"
-            isEyeIcon={true}
-            setEmailValue={setEmailValue}
-            emailValue={emailValue}
-            setPasswordValue={setPasswordValue}
-            passwordValue={passwordValue}
+            onEnterButtonClick={tryLogin}
+            loginStatus={loginStatus}
           />
         </InputBoxDiv>
         <BlueButton
-          text="회원가입"
+          text="로그인"
           width="100%"
           margin="0px 0px 32px"
           padding="16px 20px"
           radius="8px"
           fontSize="18px"
+          onBtnHandle={tryLogin}
         />
         <SocialLoginDiv>
-          <span>다른 방식으로 가입하기</span>
+          <span>소셜 로그인</span>
           <SocialIconDiv>
             <div id="googleIconBackGround">
               <Link href="https://www.google.com/">
@@ -144,6 +170,23 @@ const InputDiv = styled.div`
   gap: 12px;
   position: relative;
 `;
+const EmailPasswordInput = styled.input`
+  width: 100%;
+  padding: 18px 15px;
+  border: 1px solid var(--Grey_300);
+  border-radius: 8px;
+
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+
+  &:focus {
+    outline: none;
+    border: 1px solid var(--Primary);
+  }
+`;
 
 const SocialLoginDiv = styled.div`
   width: 100%;
@@ -184,3 +227,12 @@ const SocialIconDiv = styled.div`
     background-color: #f5e14b;
   }
 `;
+
+const EyeIconDiv = styled.div`
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 53px;
+  right: 16px;
+  cursor: pointer;
+`;
diff --git a/utils/calculator.js b/utils/calculator.ts
similarity index 100%
rename from utils/calculator.js
rename to utils/calculator.ts
diff --git a/utils/commonSigninupFunc.ts b/utils/commonSigninupFunc.ts
index cbc0508a3..cd54b7c8c 100644
--- a/utils/commonSigninupFunc.ts
+++ b/utils/commonSigninupFunc.ts
@@ -1,13 +1,6 @@
 import { ERROR_MESSAGE } from "@/constants/errorMessage";
 // import { pwdInput, pwdEyeIcon } from "../declaration.js";
 
-// enter키 입력으로 로그인 실행
-export function EnterLogin(key: string, func: () => void) {
-  if (key === "Enter") {
-    func();
-  }
-}
-
 export const changeInputBorderColor = (status: string | undefined) => {
   switch (status) {
     case "default":
diff --git a/utils/validation.ts b/utils/validation.ts
index 22c228d80..189b7d8b7 100644
--- a/utils/validation.ts
+++ b/utils/validation.ts
@@ -12,7 +12,7 @@ type ErrorType =
       type: string;
       message: string;
     }
-  | "normal";
+  | "valid";
 
 export const emailInputValidationcheck = (email: string): ErrorType => {
   let status: ErrorType;
@@ -21,28 +21,43 @@ export const emailInputValidationcheck = (email: string): ErrorType => {
   } else if (!emailCheck(email)) {
     status = INPUT_STATUS.wrongEmail;
   } else {
-    status = "normal";
+    status = "valid";
   }
   return status;
 };
 
-export const passwordInputValidationcheck = (
+export const loginPasswordInputValidationcheck = (
+  password: string | undefined
+): ErrorType => {
+  let status: ErrorType;
+  if (!password) {
+    status = INPUT_STATUS.noPassword;
+  } else {
+    status = "valid";
+  }
+  return status;
+};
+
+export const signInPasswordInputValidationcheck = (
   password: string | undefined,
   password2?: string | undefined
 ): ErrorType => {
   let status: ErrorType;
   if (!password) {
     status = INPUT_STATUS.noPassword;
+  } else if (!passwordCheck(password)) {
+    console.log(password);
+    status = INPUT_STATUS.wrongPassword;
   } else if (password2 && password !== password2) {
     status = INPUT_STATUS.noMatchPassword;
   } else {
-    status = "normal";
+    status = "valid";
   }
   return status;
 };
 
 // 비밀번호 유효성 검사
-function passwordCheck(password: string) {
+function passwordCheck(password: string): boolean {
   let password_regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
   return password_regex.test(password);
 }

From 74ecf918602f5a7a78f37074a1b44c1547d07316 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Sat, 6 Apr 2024 14:16:44 +0900
Subject: [PATCH 17/28] =?UTF-8?q?Refactor:=20=EC=BD=98=EC=86=94=20?=
 =?UTF-8?q?=EC=B6=9C=EB=A0=A5=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SignInUp/EmailPwdInput.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/SignInUp/EmailPwdInput.tsx b/components/SignInUp/EmailPwdInput.tsx
index 16396320b..9dc0be45d 100644
--- a/components/SignInUp/EmailPwdInput.tsx
+++ b/components/SignInUp/EmailPwdInput.tsx
@@ -120,7 +120,6 @@ const EmailPwdInput = ({
     if (e.key === "Enter") {
       onEnterButtonClick();
       inputElement.blur();
-      console.log("dd");
     }
   };
 

From b8cbeae824e3dd714d620502301e049275f4ddf5 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Sat, 6 Apr 2024 14:45:40 +0900
Subject: [PATCH 18/28] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=A4=91=EB=B3=B5=20=EA=B2=80=EC=82=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/api.ts                            |  6 +++++-
 components/SignInUp/EmailPwdInput.tsx | 26 +++++++++++++++++++++-----
 pages/Signin.tsx                      |  6 ++++++
 utils/validation.ts                   | 13 +++++++++++++
 4 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/api/api.ts b/api/api.ts
index 29f106b95..5163a332d 100644
--- a/api/api.ts
+++ b/api/api.ts
@@ -49,7 +49,11 @@ export const getAllLinkData = async (id: string) => {
 };
 
 export const postSignIn = async (data: any) => {
-  console.log(data);
   const url = `${BASE_URL}sign-in`;
   return fetchPOSTJson(url, data);
 };
+
+export const postCheckDuplicationEmail = async (data: any) => {
+  const url = `${BASE_URL}check-email`;
+  return fetchPOSTJson(url, data);
+};
diff --git a/components/SignInUp/EmailPwdInput.tsx b/components/SignInUp/EmailPwdInput.tsx
index 9dc0be45d..ab14df549 100644
--- a/components/SignInUp/EmailPwdInput.tsx
+++ b/components/SignInUp/EmailPwdInput.tsx
@@ -7,8 +7,11 @@ import {
   emailInputValidationcheck,
   loginPasswordInputValidationcheck,
   signInPasswordInputValidationcheck,
+  emailDuplicationCheck,
 } from "@/utils/validation";
 import { ERROR_MESSAGE } from "@/constants/errorMessage";
+import { postCheckDuplicationEmail } from "@/api/api";
+import INPUT_STATUS from "@/constants/inputStatus";
 
 type EmailPwdInputPropsType = {
   title: string;
@@ -20,6 +23,7 @@ type EmailPwdInputPropsType = {
   passwordValue?: string | undefined;
   onEnterButtonClick: () => void;
   loginStatus?: string;
+  signInStatus?: string;
   setIsEmailValid?: React.Dispatch<React.SetStateAction<boolean>>;
   setIsPasswordValid?: React.Dispatch<React.SetStateAction<boolean>>;
   setIsPasswordConfirmValid?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -35,6 +39,7 @@ const EmailPwdInput = ({
   passwordValue,
   onEnterButtonClick,
   loginStatus,
+  signInStatus,
   setIsEmailValid,
   setIsPasswordValid,
   setIsPasswordConfirmValid,
@@ -67,11 +72,7 @@ const EmailPwdInput = ({
 
     switch (type) {
       case "email":
-        const emailInputStatus = emailInputValidationcheck(inputValue);
-        setInputStatusAndErrorMessage(emailInputStatus);
-        emailInputStatus === "valid"
-          ? setIsEmailValid?.(true)
-          : setIsEmailValid?.(false);
+        emailInputFocusOutHandler(inputValue);
         break;
       case "password": {
         let passwordInputStatus;
@@ -101,6 +102,21 @@ const EmailPwdInput = ({
     }
   };
 
+  const emailInputFocusOutHandler = async (email: string) => {
+    const emailInputStatus = emailInputValidationcheck(email);
+    setInputStatusAndErrorMessage(emailInputStatus);
+    if (emailInputStatus === "valid") {
+      setIsEmailValid?.(true);
+      if (signInStatus) {
+        const isDuplicateEmail = await emailDuplicationCheck(email);
+        isDuplicateEmail &&
+          setInputStatusAndErrorMessage(INPUT_STATUS.inUseEmail);
+      }
+    } else {
+      setIsEmailValid?.(false);
+    }
+  };
+
   useEffect(() => {
     if (loginStatus === "fail") {
       type === "email"
diff --git a/pages/Signin.tsx b/pages/Signin.tsx
index 7869762b6..22e0d7384 100644
--- a/pages/Signin.tsx
+++ b/pages/Signin.tsx
@@ -14,10 +14,13 @@ export default function Signup() {
   const [isEmailValid, setIsEmailValid] = useState(false);
   const [isPasswordValid, setIsPasswordValid] = useState(false);
   const [isPasswordConfirmValid, setIsPasswordConfirmValid] = useState(false);
+  const [signInStatus, setSignInStatus] = useState("normal");
 
   const trySignin = () => {
     if (isEmailValid && isPasswordValid && isPasswordConfirmValid) {
       console.log("회원가입 시도");
+    } else {
+      setSignInStatus("fail");
     }
   };
 
@@ -45,6 +48,7 @@ export default function Signup() {
             passwordValue={passwordValue}
             onEnterButtonClick={trySignin}
             setIsEmailValid={setIsEmailValid}
+            signInStatus={signInStatus}
           />
           <EmailPwdInput
             title="비밀번호"
@@ -56,6 +60,7 @@ export default function Signup() {
             passwordValue={passwordValue}
             onEnterButtonClick={trySignin}
             setIsPasswordValid={setIsPasswordValid}
+            signInStatus={signInStatus}
           />
           <EmailPwdInput
             title="비밀번호 확인"
@@ -67,6 +72,7 @@ export default function Signup() {
             passwordValue={passwordValue}
             onEnterButtonClick={trySignin}
             setIsPasswordConfirmValid={setIsPasswordConfirmValid}
+            signInStatus={signInStatus}
           />
         </InputBoxDiv>
         <BlueButton
diff --git a/utils/validation.ts b/utils/validation.ts
index 189b7d8b7..5c6b073f6 100644
--- a/utils/validation.ts
+++ b/utils/validation.ts
@@ -1,4 +1,5 @@
 import INPUT_STATUS from "@/constants/inputStatus";
+import { postCheckDuplicationEmail } from "@/api/api";
 
 // 이메일 유효성 검사
 function emailCheck(email_address: string) {
@@ -14,6 +15,7 @@ type ErrorType =
     }
   | "valid";
 
+// 이메일 에러 검사
 export const emailInputValidationcheck = (email: string): ErrorType => {
   let status: ErrorType;
   if (!email) {
@@ -26,6 +28,16 @@ export const emailInputValidationcheck = (email: string): ErrorType => {
   return status;
 };
 
+// 이메일 중복 검사
+export const emailDuplicationCheck = async (email: string) => {
+  const postJsonEmail = { email };
+  const checkDuplication = await postCheckDuplicationEmail(postJsonEmail);
+  if (checkDuplication.error) {
+    return true;
+  } else return false;
+};
+
+// 로그인할 때 비밀번호 에러 검사
 export const loginPasswordInputValidationcheck = (
   password: string | undefined
 ): ErrorType => {
@@ -38,6 +50,7 @@ export const loginPasswordInputValidationcheck = (
   return status;
 };
 
+// 회원가입할 때 비밀번호 에러 검사
 export const signInPasswordInputValidationcheck = (
   password: string | undefined,
   password2?: string | undefined

From 268954faf35249dcd5a2dc7ef74dd48521c31e48 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Sat, 6 Apr 2024 15:21:17 +0900
Subject: [PATCH 19/28] =?UTF-8?q?Feat:=20=EB=88=88=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=ED=81=B4=EB=A6=AD=EC=97=90=20=EB=94=B0=EB=A5=B8=20?=
 =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EA=B0=80=EC=8B=9C?=
 =?UTF-8?q?=EC=84=B1=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SignInUp/EmailPwdInput.tsx | 24 ++++++++++++++++--------
 pages/Signin.tsx                      |  6 +++++-
 pages/Signup.tsx                      |  5 ++++-
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/components/SignInUp/EmailPwdInput.tsx b/components/SignInUp/EmailPwdInput.tsx
index ab14df549..3bae73bb0 100644
--- a/components/SignInUp/EmailPwdInput.tsx
+++ b/components/SignInUp/EmailPwdInput.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, ChangeEvent, KeyboardEvent } from "react";
 import styled from "styled-components";
 import Image from "next/image";
 import eyeoff from "@/assets/icons/eye-off.png";
+import eyeon from "@/assets/icons/eye-on.png";
 import { changeInputBorderColor } from "@/utils/commonSigninupFunc";
 import {
   emailInputValidationcheck,
@@ -10,12 +11,12 @@ import {
   emailDuplicationCheck,
 } from "@/utils/validation";
 import { ERROR_MESSAGE } from "@/constants/errorMessage";
-import { postCheckDuplicationEmail } from "@/api/api";
 import INPUT_STATUS from "@/constants/inputStatus";
 
 type EmailPwdInputPropsType = {
   title: string;
   type: string;
+  valueType: string;
   isEyeIcon?: boolean;
   setEmailValue?: React.Dispatch<React.SetStateAction<string>>;
   emailValue?: string | "";
@@ -32,6 +33,7 @@ type EmailPwdInputPropsType = {
 const EmailPwdInput = ({
   title,
   type,
+  valueType,
   isEyeIcon,
   setEmailValue,
   emailValue,
@@ -51,11 +53,13 @@ const EmailPwdInput = ({
   const [inputStatus, setInputStatus] = useState("default");
   const [inputErrorMessage, setInputErrorMessage] = useState("");
 
+  const [isViewPassword, setIsViewPassword] = useState(false);
+
   const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
-    if (type === "email") {
+    if (valueType === "email") {
       setEmailValue?.(inputValue);
-    } else if (type === "password") {
+    } else if (valueType === "password") {
       setPasswordValue?.(inputValue);
     }
   };
@@ -70,7 +74,7 @@ const EmailPwdInput = ({
   const onInputFocusOutHandler = (e: ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
 
-    switch (type) {
+    switch (valueType) {
       case "email":
         emailInputFocusOutHandler(inputValue);
         break;
@@ -119,7 +123,7 @@ const EmailPwdInput = ({
 
   useEffect(() => {
     if (loginStatus === "fail") {
-      type === "email"
+      valueType === "email"
         ? (setInputStatus(INPUT_STATUS_VALUE.error),
           setInputErrorMessage(ERROR_MESSAGE.email.check))
         : (setInputStatus(INPUT_STATUS_VALUE.error),
@@ -143,7 +147,7 @@ const EmailPwdInput = ({
     <InputDiv>
       <p>{title}</p>
       <EmailPasswordInput
-        type={type}
+        type={isViewPassword ? "text" : type}
         status={inputStatus}
         onKeyDown={KeyEventHandler}
         onChange={onInputChangeHandler}
@@ -151,8 +155,12 @@ const EmailPwdInput = ({
         onFocus={onInputFocusHandler}
       />
       {isEyeIcon && (
-        <EyeIconDiv>
-          <Image src={eyeoff} alt="eye_off_icon" />
+        <EyeIconDiv
+          onClick={() => {
+            setIsViewPassword(!isViewPassword);
+          }}
+        >
+          <Image src={isViewPassword ? eyeon : eyeoff} alt="eye_off_icon" />
         </EyeIconDiv>
       )}
       {inputStatus === "error" && (
diff --git a/pages/Signin.tsx b/pages/Signin.tsx
index 22e0d7384..87d3da8fe 100644
--- a/pages/Signin.tsx
+++ b/pages/Signin.tsx
@@ -19,6 +19,7 @@ export default function Signup() {
   const trySignin = () => {
     if (isEmailValid && isPasswordValid && isPasswordConfirmValid) {
       console.log("회원가입 시도");
+      location.assign("/Folder");
     } else {
       setSignInStatus("fail");
     }
@@ -42,6 +43,7 @@ export default function Signup() {
           <EmailPwdInput
             title="이메일"
             type="email"
+            valueType="email"
             setEmailValue={setEmailValue}
             emailValue={emailValue}
             setPasswordValue={setPasswordValue}
@@ -53,6 +55,7 @@ export default function Signup() {
           <EmailPwdInput
             title="비밀번호"
             type="password"
+            valueType="password"
             isEyeIcon={true}
             setEmailValue={setEmailValue}
             emailValue={emailValue}
@@ -64,7 +67,8 @@ export default function Signup() {
           />
           <EmailPwdInput
             title="비밀번호 확인"
-            type="password2"
+            type="password"
+            valueType="password2"
             isEyeIcon={true}
             setEmailValue={setEmailValue}
             emailValue={emailValue}
diff --git a/pages/Signup.tsx b/pages/Signup.tsx
index dd9658fd5..22be9443b 100644
--- a/pages/Signup.tsx
+++ b/pages/Signup.tsx
@@ -16,7 +16,8 @@ export default function LogIn() {
   const [loginStatus, setLoginStatus] = useState("normal");
 
   useEffect(() => {
-    localStorage.get("accessToken") && location.assign("/Folder");
+    localStorage.remove("accssToken");
+    // localStorage.get("accessToken") && location.assign("/Folder");
   }, []);
 
   const tryLogin = async () => {
@@ -60,6 +61,7 @@ export default function LogIn() {
           <EmailPwdInput
             title="이메일"
             type="email"
+            valueType="email"
             setEmailValue={setEmailValue}
             emailValue={emailValue}
             setPasswordValue={setPasswordValue}
@@ -70,6 +72,7 @@ export default function LogIn() {
           <EmailPwdInput
             title="비밀번호"
             type="password"
+            valueType="password"
             isEyeIcon={true}
             setEmailValue={setEmailValue}
             emailValue={emailValue}

From 71cd125c78e78a969d1f9351907b90bbc42ec57a Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Sat, 6 Apr 2024 15:27:26 +0900
Subject: [PATCH 20/28] =?UTF-8?q?Refactor:=20focus=20out=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SignInUp/EmailPwdInput.tsx | 44 ++++++++++++++++-----------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/components/SignInUp/EmailPwdInput.tsx b/components/SignInUp/EmailPwdInput.tsx
index 3bae73bb0..3c687de02 100644
--- a/components/SignInUp/EmailPwdInput.tsx
+++ b/components/SignInUp/EmailPwdInput.tsx
@@ -79,27 +79,11 @@ const EmailPwdInput = ({
         emailInputFocusOutHandler(inputValue);
         break;
       case "password": {
-        let passwordInputStatus;
-        if (loginStatus) {
-          passwordInputStatus = loginPasswordInputValidationcheck(inputValue);
-        } else {
-          passwordInputStatus = signInPasswordInputValidationcheck(inputValue);
-        }
-        setInputStatusAndErrorMessage(passwordInputStatus);
-        passwordInputStatus === "valid"
-          ? setIsPasswordValid?.(true)
-          : setIsPasswordValid?.(false);
+        passwordInputFocusOutHandler(inputValue);
         break;
       }
       case "password2":
-        const passwordInputStatus = signInPasswordInputValidationcheck(
-          passwordValue,
-          inputValue
-        );
-        setInputStatusAndErrorMessage(passwordInputStatus);
-        passwordInputStatus === "valid"
-          ? setIsPasswordConfirmValid?.(true)
-          : setIsPasswordConfirmValid?.(false);
+        passwordConfirmInputFocusOutHandler(inputValue);
         break;
       default:
         null;
@@ -121,6 +105,30 @@ const EmailPwdInput = ({
     }
   };
 
+  const passwordInputFocusOutHandler = async (password: string) => {
+    let passwordInputStatus;
+    if (loginStatus) {
+      passwordInputStatus = loginPasswordInputValidationcheck(password);
+    } else {
+      passwordInputStatus = signInPasswordInputValidationcheck(password);
+    }
+    setInputStatusAndErrorMessage(passwordInputStatus);
+    passwordInputStatus === "valid"
+      ? setIsPasswordValid?.(true)
+      : setIsPasswordValid?.(false);
+  };
+
+  const passwordConfirmInputFocusOutHandler = async (password2: string) => {
+    const passwordInputStatus = signInPasswordInputValidationcheck(
+      passwordValue,
+      password2
+    );
+    setInputStatusAndErrorMessage(passwordInputStatus);
+    passwordInputStatus === "valid"
+      ? setIsPasswordConfirmValid?.(true)
+      : setIsPasswordConfirmValid?.(false);
+  };
+
   useEffect(() => {
     if (loginStatus === "fail") {
       valueType === "email"

From 515b2d648db618fa306071f73e9e61c28ae0442c Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Sat, 6 Apr 2024 15:33:26 +0900
Subject: [PATCH 21/28] =?UTF-8?q?Comment:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 utils/commonSigninupFunc.ts | 68 -------------------------------------
 1 file changed, 68 deletions(-)

diff --git a/utils/commonSigninupFunc.ts b/utils/commonSigninupFunc.ts
index cd54b7c8c..fefc2cee7 100644
--- a/utils/commonSigninupFunc.ts
+++ b/utils/commonSigninupFunc.ts
@@ -1,6 +1,3 @@
-import { ERROR_MESSAGE } from "@/constants/errorMessage";
-// import { pwdInput, pwdEyeIcon } from "../declaration.js";
-
 export const changeInputBorderColor = (status: string | undefined) => {
   switch (status) {
     case "default":
@@ -11,68 +8,3 @@ export const changeInputBorderColor = (status: string | undefined) => {
       return "var(--Red)";
   }
 };
-
-// 에러 메세지 출력 함수
-// export function errorMsg(errorCase: string) {
-//   let newNode = document.createElement("div");
-
-//   switch (errorCase) {
-//     case "NoEmail":
-//       inputAddNode({
-//         type: "email",
-//         message: ERROR_MESSAGE.email.empty,
-//         errorCase: errorCase,
-//       });
-//       break;
-//     case "wrongEmail":
-//       inputAddNode({
-//         type: "email",
-//         message: ERROR_MESSAGE.email.invalid,
-//         errorCase: errorCase,
-//       });
-//       break;
-//     case "inUseEmail":
-//       inputAddNode({
-//         type: "email",
-//         message: ERROR_MESSAGE.email.inUse,
-//         errorCase: errorCase,
-//       });
-//       break;
-//     case "NoPwd":
-//       inputAddNode({
-//         type: "password",
-//         message: ERROR_MESSAGE.password.empty,
-//         errorCase: errorCase,
-//       });
-//       break;
-//     case "wrongPwd":
-//       inputAddNode({
-//         type: "password",
-//         message: ERROR_MESSAGE.password.invalid,
-//         errorCase: errorCase,
-//       });
-//       break;
-//     case "noMatchPwd":
-//       inputAddNode({
-//         type: "password2",
-//         message: ERROR_MESSAGE.password.recheck,
-//         errorCase: errorCase,
-//       });
-//       break;
-//     case "Other":
-//       inputAddNode({
-//         type: "email",
-//         message: ERROR_MESSAGE.email.check,
-//         errorCase: errorCase,
-//       });
-//       inputAddNode({
-//         type: "password",
-//         message: ERROR_MESSAGE.password.check,
-//         errorCase: errorCase,
-//       });
-//       break;
-//   }
-// }
-
-// // password input 눈모양 클릭 실행 함수
-// export function EyePwd(EyeStatus: string) {}

From 902768cc20f1fa659fccf1a9821f4f50e18625e2 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Mon, 8 Apr 2024 15:25:09 +0900
Subject: [PATCH 22/28] =?UTF-8?q?Chore:=20=EC=99=B8=EB=B6=80=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EA=B2=BD=EB=A1=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next.config.js | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/next.config.js b/next.config.js
index ef1f40636..ccde0b0e2 100644
--- a/next.config.js
+++ b/next.config.js
@@ -18,9 +18,44 @@ const nextConfig = {
       {
         protocol: "https",
         hostname: "jasonwatmore.com",
-        port: "",
         pathname: "/_content/images/**",
       },
+      {
+        protocol: "https",
+        hostname: "codeit-frontend.codeit.com",
+      },
+      {
+        protocol: "https",
+        hostname: "reactjs.org",
+      },
+      {
+        protocol: "https",
+        hostname: "assets.vercel.com",
+      },
+      {
+        protocol: "https",
+        hostname: "tanstack.com",
+      },
+      {
+        protocol: "https",
+        hostname: "storybook.js.org",
+      },
+      {
+        protocol: "https",
+        hostname: "testing-library.com",
+      },
+      {
+        protocol: "https",
+        hostname: "static.cdninstagram.com",
+      },
+      {
+        protocol: "https",
+        hostname: "testing-library.com",
+      },
+      {
+        protocol: "https",
+        hostname: "s.pstatic.net",
+      },
     ],
   },
 };

From 3f3528218579c3709fe23b2911af51651549c208 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Mon, 8 Apr 2024 15:25:40 +0900
Subject: [PATCH 23/28] =?UTF-8?q?Refactor:=20=EB=A6=AC=ED=80=98=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=9A=94=EC=B2=AD=20=ED=95=9C=20=EB=B2=88=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/shared/SharedSection.tsx | 29 ++++++---------
 constants/commonTypes.ts            |  6 ++++
 pages/Shared.tsx                    | 55 +++++++++++++++++++----------
 3 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/components/shared/SharedSection.tsx b/components/shared/SharedSection.tsx
index 063d6b683..83117511b 100644
--- a/components/shared/SharedSection.tsx
+++ b/components/shared/SharedSection.tsx
@@ -1,27 +1,20 @@
-import { useState, useEffect } from "react";
-import { getFolderInfo } from "../../api/api";
-import smileIcon from "../../assets/icons/icon_smile.png";
+import icon_smile from "@/assets/icons/icon_smile.png";
 import styled from "styled-components";
+import { OwnerProps } from "@/constants/commonTypes";
 
-const SharedSection = () => {
-  const [folderName, setFolderName] = useState([]);
-  const [owner, setOwner] = useState<any>([]);
+type useType = {
+  folderName: string;
+  owner: OwnerProps;
+};
+const SharedSection = ({ folderName, owner }: useType) => {
   const { profileImageSource, name } = owner;
 
-  async function handleLoad() {
-    const folderInfo = await getFolderInfo();
-    const { name, owner } = folderInfo.folder;
-    setFolderName(name);
-    setOwner(owner);
-  }
-
-  useEffect(() => {
-    handleLoad();
-  }, []);
-
   return (
     <section className="codeit-mark-section">
-      <OwnerProfile src={profileImageSource || smileIcon} alt={"smile icon"} />
+      <OwnerProfile
+        src={profileImageSource || icon_smile.toString()}
+        alt="smile icon"
+      />
       <span>{name}</span>
       <div id="favorites">
         <h1>{folderName}</h1>
diff --git a/constants/commonTypes.ts b/constants/commonTypes.ts
index c5d072314..9f9347813 100644
--- a/constants/commonTypes.ts
+++ b/constants/commonTypes.ts
@@ -24,3 +24,9 @@ export interface CommonButtonCustomProps {
   radius?: string;
   onBtnHandle?: () => void;
 }
+
+export type OwnerProps = {
+  id: number;
+  name: string;
+  profileImageSource: string;
+};
diff --git a/pages/Shared.tsx b/pages/Shared.tsx
index e0f7151fd..d79c20549 100644
--- a/pages/Shared.tsx
+++ b/pages/Shared.tsx
@@ -1,46 +1,65 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { getFolderInfo } from "@/api/api";
 import HeaderElement from "../components/common/HeaderElement";
 import FooterElement from "../components/common/FooterElement";
 import SharedSection from "../components/shared/SharedSection";
 import Input from "../components/common/Input";
 import FolderList from "../components/common/FolderList";
-import { DeleteModal } from "../components/common/modals/DeleteModal";
 import { AddFolderModal } from "../components/common/modals/AddFolderModal";
-import { useGetPromise } from "/hooks/uesGetPromise";
-import "../styles/shared.css";
+import { DeleteModal } from "@/components/common/modals/DeleteModal";
+import { OwnerProps } from "@/constants/commonTypes";
 
-function Shared() {
-  const foldersData: any = useGetPromise(getFolderInfo);
-  const folders = foldersData?.folder?.links || [];
+export default function Shared() {
   const [searchInputValue, setSearchInputValue] = useState("");
-  const [isModalVisible, setIsModalVisible] = useState(null);
+  const [isModalVisible, setIsModalVisible] = useState("");
+  const [data, setData] = useState([]);
+  const [folderName, setFolderName] = useState("");
+  const [owner, setOwner] = useState<OwnerProps>({
+    id: 0,
+    name: "",
+    profileImageSource: "",
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await getFolderInfo();
+        const { links, name, owner } = await response.folder;
+        setOwner(owner);
+        setFolderName(name);
+        setData(links);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    fetchData();
+  }, []);
 
   return (
     <>
       <DeleteModal
-        $isModalVisible={isModalVisible}
+        isModalVisible={isModalVisible}
         setIsModalVisible={setIsModalVisible}
       />
       <AddFolderModal
-        $isModalVisible={isModalVisible}
+        isModalVisible={isModalVisible}
         setIsModalVisible={setIsModalVisible}
       />
       <HeaderElement $positionval="" />
-      <SharedSection />
+      <SharedSection folderName={folderName} owner={owner} />
       <Input
         inputValue={searchInputValue}
         setInputValue={setSearchInputValue}
         onEnterButtonHandle={() => {}}
       />
-      <FolderList
-        items={folders}
-        $isModalVisible={isModalVisible}
-        setIsModalVisible={setIsModalVisible}
-      />
+      {data[0] ? (
+        <FolderList
+          items={data}
+          $isModalVisible={isModalVisible}
+          setIsModalVisible={setIsModalVisible}
+        />
+      ) : null}
       <FooterElement />
     </>
   );
 }
-
-export default Shared;

From a7ad151d14f37ac92aae7c46fc0aef2a963dfe7d Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Mon, 8 Apr 2024 15:31:18 +0900
Subject: [PATCH 24/28] =?UTF-8?q?Disign:=20Shared=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/shared/SharedSection.tsx | 31 +++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/components/shared/SharedSection.tsx b/components/shared/SharedSection.tsx
index 83117511b..2128e8129 100644
--- a/components/shared/SharedSection.tsx
+++ b/components/shared/SharedSection.tsx
@@ -10,19 +10,42 @@ const SharedSection = ({ folderName, owner }: useType) => {
   const { profileImageSource, name } = owner;
 
   return (
-    <section className="codeit-mark-section">
+    <Section className="codeit-mark-section">
       <OwnerProfile
         src={profileImageSource || icon_smile.toString()}
         alt="smile icon"
       />
       <span>{name}</span>
-      <div id="favorites">
+      <FolderNameDiv>
         <h1>{folderName}</h1>
-      </div>
-    </section>
+      </FolderNameDiv>
+    </Section>
   );
 };
 
+const Section = styled.section`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--Grey_100);
+  width: 100%;
+  padding-top: 20px;
+  padding-bottom: 60px;
+
+  & > span {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+  }
+`;
+
+const FolderNameDiv = styled.div`
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
 const OwnerProfile = styled.img`
   display: flex;
   justify-content: center;

From 8141b058c8c86330f5cb927d8643fd0c5530a787 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Mon, 8 Apr 2024 15:35:01 +0900
Subject: [PATCH 25/28] =?UTF-8?q?Refactor:=20=EC=86=8C=EC=85=9C=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=83=81=EC=88=98=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/modals/SharedModal.tsx | 23 ++---------------------
 constants/socialIcon.ts                  | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 21 deletions(-)
 create mode 100644 constants/socialIcon.ts

diff --git a/components/common/modals/SharedModal.tsx b/components/common/modals/SharedModal.tsx
index cc1797443..9fdcc85c7 100644
--- a/components/common/modals/SharedModal.tsx
+++ b/components/common/modals/SharedModal.tsx
@@ -1,10 +1,8 @@
 import styled from "styled-components";
 import closeIcon from "@/assets/icons/closeModal.png";
 import Image from "next/image";
-import kakao from "../../../assets/icons/icon_kakao.png";
-import facebook from "../../../assets/icons/icon_facebook.png";
-import link from "../../../assets/icons/link.png";
 import { CommonModalProps } from "@/constants/commonTypes";
+import { SOCIAL_ICONS } from "@/constants/socialIcon";
 
 export const SharedModal = ({
   isModalVisible,
@@ -25,7 +23,7 @@ export const SharedModal = ({
           <p>폴더명</p>
         </Title>
         <Icons>
-          {ICONS.map((icon) => (
+          {SOCIAL_ICONS.map((icon) => (
             <Icon key={icon.name}>
               <IconImg $backgroundColor={icon.backgroundColor}>
                 <Image src={icon.imgUrl} alt={icon.name} />
@@ -39,23 +37,6 @@ export const SharedModal = ({
   );
 };
 
-const ICONS = [
-  {
-    name: "카카오톡",
-    backgroundColor: "#F5E14B",
-    imgUrl: kakao,
-  },
-  {
-    name: "페이스북",
-    backgroundColor: "#1877F2",
-    imgUrl: facebook,
-  },
-  {
-    name: "링크 복사",
-    imgUrl: link,
-  },
-];
-
 type BackgroundPropsType = {
   $isVisible?: string;
   $backgroundColor?: string;
diff --git a/constants/socialIcon.ts b/constants/socialIcon.ts
new file mode 100644
index 000000000..3016809bd
--- /dev/null
+++ b/constants/socialIcon.ts
@@ -0,0 +1,20 @@
+import kakao from "../../../assets/icons/icon_kakao.png";
+import facebook from "../../../assets/icons/icon_facebook.png";
+import link from "../../../assets/icons/link.png";
+
+export const SOCIAL_ICONS = [
+  {
+    name: "카카오톡",
+    backgroundColor: "#F5E14B",
+    imgUrl: kakao,
+  },
+  {
+    name: "페이스북",
+    backgroundColor: "#1877F2",
+    imgUrl: facebook,
+  },
+  {
+    name: "링크 복사",
+    imgUrl: link,
+  },
+];

From c0d550a5e2bf66bd604bc40815c821cc16dd9480 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Mon, 8 Apr 2024 17:19:32 +0900
Subject: [PATCH 26/28] =?UTF-8?q?Fix:=20build=20=EC=8B=9C=20=EB=B0=9C?=
 =?UTF-8?q?=EC=83=9D=ED=95=9C=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/FolderItem.tsx |  3 ++-
 components/common/FolderList.tsx |  2 +-
 constants/commonTypes.ts         |  4 ++--
 constants/socialIcon.ts          |  6 +++---
 package.json                     |  3 ++-
 pages/Folder.tsx                 | 11 ++---------
 utils/calculator.ts              | 22 +++++++++++-----------
 7 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/components/common/FolderItem.tsx b/components/common/FolderItem.tsx
index 94f82988d..c28c1de70 100644
--- a/components/common/FolderItem.tsx
+++ b/components/common/FolderItem.tsx
@@ -23,8 +23,9 @@ function FolderItem({
   const { imageSource, createdAt, description, url, id } = item;
   const { created_at, favorite, image_source } = item;
   const [isPopOverVisible, setIsPopOverVisible] = useState(false);
+  const createdAtTime: string = String(createdAt ?? created_at);
 
-  const time = CalcTime(created_at || createdAt);
+  const time = CalcTime(createdAtTime);
   const img_src = image_source || imageSource;
 
   return (
diff --git a/components/common/FolderList.tsx b/components/common/FolderList.tsx
index 1f9d74ff5..b9691f6ac 100644
--- a/components/common/FolderList.tsx
+++ b/components/common/FolderList.tsx
@@ -3,7 +3,7 @@ import FolderItem from "./FolderItem";
 import { CommonFolderInfoProps } from "@/constants/commonTypes";
 
 type FolderPropsType = {
-  items: any;
+  items: CommonFolderInfoProps[];
   $isModalVisible: any;
   setIsModalVisible: any;
 };
diff --git a/constants/commonTypes.ts b/constants/commonTypes.ts
index 9f9347813..6a22a7985 100644
--- a/constants/commonTypes.ts
+++ b/constants/commonTypes.ts
@@ -6,8 +6,8 @@ export interface CommonModalProps {
 export interface CommonFolderInfoProps {
   imageSource?: string;
   image_source?: string;
-  createdAt?: Date | null;
-  created_at?: Date | null;
+  createdAt?: string;
+  created_at?: string;
   description: string;
   url: string;
   id: string;
diff --git a/constants/socialIcon.ts b/constants/socialIcon.ts
index 3016809bd..2ec482c63 100644
--- a/constants/socialIcon.ts
+++ b/constants/socialIcon.ts
@@ -1,6 +1,6 @@
-import kakao from "../../../assets/icons/icon_kakao.png";
-import facebook from "../../../assets/icons/icon_facebook.png";
-import link from "../../../assets/icons/link.png";
+import kakao from "@/assets/icons/icon_kakao.png";
+import facebook from "@/assets/icons/icon_facebook.png";
+import link from "@/assets/icons/link.png";
 
 export const SOCIAL_ICONS = [
   {
diff --git a/package.json b/package.json
index 1974545d6..a83f30bf7 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "vercel": "vercel dev"
   },
   "dependencies": {
     "next": "13.5.6",
diff --git a/pages/Folder.tsx b/pages/Folder.tsx
index 0c495cb3b..7cd2972f3 100644
--- a/pages/Folder.tsx
+++ b/pages/Folder.tsx
@@ -13,17 +13,10 @@ import { EditNameModal } from "../components/common/modals/EditNameModal";
 import { DeleteModal } from "../components/common/modals/DeleteModal";
 import { AddFolderModal } from "../components/common/modals/AddFolderModal";
 import { COLORS } from "../constants/colors";
+import { CommonFolderInfoProps } from "@/constants/commonTypes";
 
-interface dataType {
-  imageSource?: string;
-  image_source?: string;
-  createdAt?: Date | null;
-  created_at?: Date | null;
-  description: string;
+interface dataType extends CommonFolderInfoProps {
   title: string;
-  url: string;
-  id: string;
-  favorite: boolean;
   updated_at: string | null;
 }
 
diff --git a/utils/calculator.ts b/utils/calculator.ts
index d1b422fc0..8af6d0e8e 100644
--- a/utils/calculator.ts
+++ b/utils/calculator.ts
@@ -1,40 +1,40 @@
-function timeToString(time) {
-  let diffSec = parseInt(time / 1000);
+function timeToString(time: number) {
+  let diffSec = parseInt(String(time / 1000));
   // 2분 미만
   if (diffSec <= 120) {
     return "1 minute ago";
   }
-  let diffMinute = parseInt(diffSec / 60);
+  let diffMinute = parseInt(String(diffSec / 60));
   // 59분 이하
   if (diffMinute <= 59) {
     return `${diffMinute} minutes ago`;
   }
 
-  let diffHour = parseInt(diffMinute / 60);
+  let diffHour = parseInt(String(diffMinute / 60));
   // 23시간 이하
   if (diffHour <= 23) {
     return `${diffHour} hours ago`;
   }
   // 30일 이하
-  let diffDay = parseInt(diffHour / 24);
+  let diffDay = parseInt(String(diffHour / 24));
   if (diffDay <= 30) {
     return `${diffDay} days ago`;
   }
 
-  let diffMonth = parseInt(diffDay / 30);
+  let diffMonth = parseInt(String(diffDay / 30));
   // 11달 이하
   if (diffMonth <= 11) {
     return `${diffMonth} months ago`;
   }
   // 11달 이상
-  let diffYear = parseInt(diffMonth / 12);
+  let diffYear = parseInt(String(diffMonth / 12));
   return `${diffYear} years ago`;
 }
 
-export function CalcTime(time) {
-  let nowTime = Date.now();
-  let writingTime = Date.parse(time);
-  let diffTime = nowTime - writingTime;
+export function CalcTime(time: string) {
+  const nowTime = Date.now();
+  const writingTime = Date.parse(time);
+  const diffTime = nowTime - writingTime;
 
   let sentence = timeToString(diffTime);
   return sentence;

From 648c4463645e43473b4afa85c13620e0988ec75d Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Mon, 8 Apr 2024 17:20:02 +0900
Subject: [PATCH 27/28] =?UTF-8?q?Chore:=20vercel.json=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vercel.json | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 vercel.json

diff --git a/vercel.json b/vercel.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1 @@
+{}

From bae27014e3693d489a1ddca602a2daa66329a886 Mon Sep 17 00:00:00 2001
From: Kim Min Jeong <minjeong9919@naver.com>
Date: Mon, 8 Apr 2024 17:39:47 +0900
Subject: [PATCH 28/28] =?UTF-8?q?Rename:=20=ED=8C=8C=EC=9D=BC=20=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 {assets => public/assets}/Linkbrary.png             | Bin
 {assets => public/assets}/cards/card1-1.png         | Bin
 {assets => public/assets}/cards/card1-2.png         | Bin
 {assets => public/assets}/cards/card1-3.png         | Bin
 {assets => public/assets}/cards/card1.png           | Bin
 {assets => public/assets}/cards/card2.png           | Bin
 {assets => public/assets}/cards/card3.png           | Bin
 {assets => public/assets}/cards/card4.png           | Bin
 {assets => public/assets}/cards/cards_img.png       | Bin
 {assets => public/assets}/icons/Union.svg           |   0
 {assets => public/assets}/icons/card_star.svg       |   0
 {assets => public/assets}/icons/closeModal.png      | Bin
 {assets => public/assets}/icons/delete.svg          |   0
 {assets => public/assets}/icons/eye-off.png         | Bin
 {assets => public/assets}/icons/eye-on.png          | Bin
 {assets => public/assets}/icons/icon_box.png        | Bin
 .../assets}/icons/icon_box_primary_color.png        | Bin
 {assets => public/assets}/icons/icon_box_y.png      | Bin
 {assets => public/assets}/icons/icon_facebook.png   | Bin
 {assets => public/assets}/icons/icon_google.png     | Bin
 {assets => public/assets}/icons/icon_instagram.png  | Bin
 {assets => public/assets}/icons/icon_kakao.png      | Bin
 {assets => public/assets}/icons/icon_myprofile.png  | Bin
 {assets => public/assets}/icons/icon_search.png     | Bin
 {assets => public/assets}/icons/icon_smile.png      | Bin
 {assets => public/assets}/icons/icon_twitter.png    | Bin
 {assets => public/assets}/icons/icon_youtube.png    | Bin
 {assets => public/assets}/icons/kebab.svg           |   0
 {assets => public/assets}/icons/link.png            | Bin
 {assets => public/assets}/icons/link.svg            |   0
 {assets => public/assets}/icons/logo.png            | Bin
 {assets => public/assets}/icons/pen.svg             |   0
 {assets => public/assets}/icons/share.svg           |   0
 {assets => public/assets}/icons/trash.svg           |   0
 {assets => public/assets}/login_btn.png             | Bin
 {assets => public/assets}/login_logo.png            | Bin
 36 files changed, 0 insertions(+), 0 deletions(-)
 rename {assets => public/assets}/Linkbrary.png (100%)
 rename {assets => public/assets}/cards/card1-1.png (100%)
 rename {assets => public/assets}/cards/card1-2.png (100%)
 rename {assets => public/assets}/cards/card1-3.png (100%)
 rename {assets => public/assets}/cards/card1.png (100%)
 rename {assets => public/assets}/cards/card2.png (100%)
 rename {assets => public/assets}/cards/card3.png (100%)
 rename {assets => public/assets}/cards/card4.png (100%)
 rename {assets => public/assets}/cards/cards_img.png (100%)
 rename {assets => public/assets}/icons/Union.svg (100%)
 rename {assets => public/assets}/icons/card_star.svg (100%)
 rename {assets => public/assets}/icons/closeModal.png (100%)
 rename {assets => public/assets}/icons/delete.svg (100%)
 rename {assets => public/assets}/icons/eye-off.png (100%)
 rename {assets => public/assets}/icons/eye-on.png (100%)
 rename {assets => public/assets}/icons/icon_box.png (100%)
 rename {assets => public/assets}/icons/icon_box_primary_color.png (100%)
 rename {assets => public/assets}/icons/icon_box_y.png (100%)
 rename {assets => public/assets}/icons/icon_facebook.png (100%)
 rename {assets => public/assets}/icons/icon_google.png (100%)
 rename {assets => public/assets}/icons/icon_instagram.png (100%)
 rename {assets => public/assets}/icons/icon_kakao.png (100%)
 rename {assets => public/assets}/icons/icon_myprofile.png (100%)
 rename {assets => public/assets}/icons/icon_search.png (100%)
 rename {assets => public/assets}/icons/icon_smile.png (100%)
 rename {assets => public/assets}/icons/icon_twitter.png (100%)
 rename {assets => public/assets}/icons/icon_youtube.png (100%)
 rename {assets => public/assets}/icons/kebab.svg (100%)
 rename {assets => public/assets}/icons/link.png (100%)
 rename {assets => public/assets}/icons/link.svg (100%)
 rename {assets => public/assets}/icons/logo.png (100%)
 rename {assets => public/assets}/icons/pen.svg (100%)
 rename {assets => public/assets}/icons/share.svg (100%)
 rename {assets => public/assets}/icons/trash.svg (100%)
 rename {assets => public/assets}/login_btn.png (100%)
 rename {assets => public/assets}/login_logo.png (100%)

diff --git a/assets/Linkbrary.png b/public/assets/Linkbrary.png
similarity index 100%
rename from assets/Linkbrary.png
rename to public/assets/Linkbrary.png
diff --git a/assets/cards/card1-1.png b/public/assets/cards/card1-1.png
similarity index 100%
rename from assets/cards/card1-1.png
rename to public/assets/cards/card1-1.png
diff --git a/assets/cards/card1-2.png b/public/assets/cards/card1-2.png
similarity index 100%
rename from assets/cards/card1-2.png
rename to public/assets/cards/card1-2.png
diff --git a/assets/cards/card1-3.png b/public/assets/cards/card1-3.png
similarity index 100%
rename from assets/cards/card1-3.png
rename to public/assets/cards/card1-3.png
diff --git a/assets/cards/card1.png b/public/assets/cards/card1.png
similarity index 100%
rename from assets/cards/card1.png
rename to public/assets/cards/card1.png
diff --git a/assets/cards/card2.png b/public/assets/cards/card2.png
similarity index 100%
rename from assets/cards/card2.png
rename to public/assets/cards/card2.png
diff --git a/assets/cards/card3.png b/public/assets/cards/card3.png
similarity index 100%
rename from assets/cards/card3.png
rename to public/assets/cards/card3.png
diff --git a/assets/cards/card4.png b/public/assets/cards/card4.png
similarity index 100%
rename from assets/cards/card4.png
rename to public/assets/cards/card4.png
diff --git a/assets/cards/cards_img.png b/public/assets/cards/cards_img.png
similarity index 100%
rename from assets/cards/cards_img.png
rename to public/assets/cards/cards_img.png
diff --git a/assets/icons/Union.svg b/public/assets/icons/Union.svg
similarity index 100%
rename from assets/icons/Union.svg
rename to public/assets/icons/Union.svg
diff --git a/assets/icons/card_star.svg b/public/assets/icons/card_star.svg
similarity index 100%
rename from assets/icons/card_star.svg
rename to public/assets/icons/card_star.svg
diff --git a/assets/icons/closeModal.png b/public/assets/icons/closeModal.png
similarity index 100%
rename from assets/icons/closeModal.png
rename to public/assets/icons/closeModal.png
diff --git a/assets/icons/delete.svg b/public/assets/icons/delete.svg
similarity index 100%
rename from assets/icons/delete.svg
rename to public/assets/icons/delete.svg
diff --git a/assets/icons/eye-off.png b/public/assets/icons/eye-off.png
similarity index 100%
rename from assets/icons/eye-off.png
rename to public/assets/icons/eye-off.png
diff --git a/assets/icons/eye-on.png b/public/assets/icons/eye-on.png
similarity index 100%
rename from assets/icons/eye-on.png
rename to public/assets/icons/eye-on.png
diff --git a/assets/icons/icon_box.png b/public/assets/icons/icon_box.png
similarity index 100%
rename from assets/icons/icon_box.png
rename to public/assets/icons/icon_box.png
diff --git a/assets/icons/icon_box_primary_color.png b/public/assets/icons/icon_box_primary_color.png
similarity index 100%
rename from assets/icons/icon_box_primary_color.png
rename to public/assets/icons/icon_box_primary_color.png
diff --git a/assets/icons/icon_box_y.png b/public/assets/icons/icon_box_y.png
similarity index 100%
rename from assets/icons/icon_box_y.png
rename to public/assets/icons/icon_box_y.png
diff --git a/assets/icons/icon_facebook.png b/public/assets/icons/icon_facebook.png
similarity index 100%
rename from assets/icons/icon_facebook.png
rename to public/assets/icons/icon_facebook.png
diff --git a/assets/icons/icon_google.png b/public/assets/icons/icon_google.png
similarity index 100%
rename from assets/icons/icon_google.png
rename to public/assets/icons/icon_google.png
diff --git a/assets/icons/icon_instagram.png b/public/assets/icons/icon_instagram.png
similarity index 100%
rename from assets/icons/icon_instagram.png
rename to public/assets/icons/icon_instagram.png
diff --git a/assets/icons/icon_kakao.png b/public/assets/icons/icon_kakao.png
similarity index 100%
rename from assets/icons/icon_kakao.png
rename to public/assets/icons/icon_kakao.png
diff --git a/assets/icons/icon_myprofile.png b/public/assets/icons/icon_myprofile.png
similarity index 100%
rename from assets/icons/icon_myprofile.png
rename to public/assets/icons/icon_myprofile.png
diff --git a/assets/icons/icon_search.png b/public/assets/icons/icon_search.png
similarity index 100%
rename from assets/icons/icon_search.png
rename to public/assets/icons/icon_search.png
diff --git a/assets/icons/icon_smile.png b/public/assets/icons/icon_smile.png
similarity index 100%
rename from assets/icons/icon_smile.png
rename to public/assets/icons/icon_smile.png
diff --git a/assets/icons/icon_twitter.png b/public/assets/icons/icon_twitter.png
similarity index 100%
rename from assets/icons/icon_twitter.png
rename to public/assets/icons/icon_twitter.png
diff --git a/assets/icons/icon_youtube.png b/public/assets/icons/icon_youtube.png
similarity index 100%
rename from assets/icons/icon_youtube.png
rename to public/assets/icons/icon_youtube.png
diff --git a/assets/icons/kebab.svg b/public/assets/icons/kebab.svg
similarity index 100%
rename from assets/icons/kebab.svg
rename to public/assets/icons/kebab.svg
diff --git a/assets/icons/link.png b/public/assets/icons/link.png
similarity index 100%
rename from assets/icons/link.png
rename to public/assets/icons/link.png
diff --git a/assets/icons/link.svg b/public/assets/icons/link.svg
similarity index 100%
rename from assets/icons/link.svg
rename to public/assets/icons/link.svg
diff --git a/assets/icons/logo.png b/public/assets/icons/logo.png
similarity index 100%
rename from assets/icons/logo.png
rename to public/assets/icons/logo.png
diff --git a/assets/icons/pen.svg b/public/assets/icons/pen.svg
similarity index 100%
rename from assets/icons/pen.svg
rename to public/assets/icons/pen.svg
diff --git a/assets/icons/share.svg b/public/assets/icons/share.svg
similarity index 100%
rename from assets/icons/share.svg
rename to public/assets/icons/share.svg
diff --git a/assets/icons/trash.svg b/public/assets/icons/trash.svg
similarity index 100%
rename from assets/icons/trash.svg
rename to public/assets/icons/trash.svg
diff --git a/assets/login_btn.png b/public/assets/login_btn.png
similarity index 100%
rename from assets/login_btn.png
rename to public/assets/login_btn.png
diff --git a/assets/login_logo.png b/public/assets/login_logo.png
similarity index 100%
rename from assets/login_logo.png
rename to public/assets/login_logo.png