complete week15 mission

codeit-bootcamp-frontend · May 25, 2024 · d67b6f0 · d67b6f0
1 parent 354f802
commit d67b6f0
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 76 deletions.
diff --git a/component/FolderMain.tsx b/component/FolderMain.tsx
@@ -2,10 +2,10 @@ import { useEffect, useState } from "react";
 import LinkCardListByFolderId from "./LinkCardListByFolderId";
 import useSWR from "swr";
 import axios from "axios";
-import FolderButtons from "./FolderButtons";
+import FolderTabs from "./FolderTabs";
 import FolderTitlebar from "./FolderTitlebar";
 import { useRouter } from "next/router";
-import axiosInstance from "@/axios/axiosinstance";
+import axiosInstance from "@/axios/axiosInstance";
 import { fetchFolders } from "@/lib/folderFetcher";
 
 interface UserData {
@@ -82,7 +82,7 @@ export default function FolderMain({
     setModalStates({ ...modalStates, [modal]: false });
   };
 
-  const handleButtonClick = (folderId: number) => {
+  const handleButtonClick = (folderId: number): void => {
     setClickedButton(folderId);
     const clickedFolder = folders?.find(
       (folder: Folder) => folder.id === folderId
@@ -155,7 +155,7 @@ export default function FolderMain({
 
   return (
     <>
-      <FolderButtons
+      <FolderTabs
         clickedButton={clickedButton}
         handleButtonClick={handleButtonClick}
         handleAllButtonClick={handleAllButtonClick}

diff --git a/component/FolderButtons.tsx → component/FolderTabs.tsx b/component/FolderButtons.tsx → component/FolderTabs.tsx
@@ -8,7 +8,16 @@ interface Folder {
   favorite?: boolean;
 }
 
-export default function FolderButtons({
+interface ModalStates {
+  addModal: boolean;
+  shareModal: boolean;
+  editModal: boolean;
+  deleteModal: boolean;
+  addLinkModal: boolean;
+  deleteLinkModal: boolean;
+}
+
+export default function FolderTabs({
   clickedButton,
   handleButtonClick,
   handleAllButtonClick,
@@ -17,13 +26,13 @@ export default function FolderButtons({
   closeModal,
   modalStates,
 }: {
-  clickedButton: any;
-  handleButtonClick: any;
-  handleAllButtonClick: any;
-  folders: any;
-  openModal: any;
-  closeModal: any;
-  modalStates: any;
+  clickedButton: number | null;
+  handleButtonClick: (folderId: number) => void;
+  handleAllButtonClick: () => void;
+  folders: Folder[] | undefined | null;
+  openModal: (modal: keyof ModalStates) => void;
+  closeModal: (modal: keyof ModalStates) => void;
+  modalStates: ModalStates;
 }) {
   return (
     <div className="flex items-center justify-between mt-[40px] px-[32px] xl:px-[200px]">

diff --git a/component/FolderTitlebar.tsx b/component/FolderTitlebar.tsx
@@ -17,7 +17,7 @@ export default function FolderTitlebar({
     <div className="flex items-center justify-between mt-[40px] px-[32px] xl:px-[200px]">
       <div className="text-[30px] font-bold">{title}</div>
       <div className="flex space-x-2">
-        {title !== "전체" ? (
+        {title !== "전체" && (
           <>
             <ShareFolderModal
               openModal={openModal}
@@ -35,7 +35,7 @@ export default function FolderTitlebar({
               modalStates={modalStates}
             />
           </>
-        ) : null}
+        )}
       </div>
     </div>
   );

diff --git a/component/Navbar.tsx b/component/Navbar.tsx
@@ -1,4 +1,6 @@
+import { useState, useRef, useEffect } from "react";
 import Link from "next/link";
+import { useRouter } from "next/router";
 
 interface UserData {
   id: number;
@@ -8,25 +10,78 @@ interface UserData {
   image_source?: string;
 }
 
-export default function Navbar({ user }: { user: UserData }) {
+export default function Navbar({
+  user,
+}: {
+  user: UserData | null | undefined;
+}) {
+  const router = useRouter();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const handleLogout = () => {
+    localStorage.removeItem("accessToken");
+    setIsPopoverOpen(false);
+    alert("로그아웃 되었습니다.");
+    router.reload();
+  };
+
+  const togglePopover = () => {
+    setIsPopoverOpen((prev) => !prev);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      popoverRef.current &&
+      !popoverRef.current.contains(event.target as Node)
+    ) {
+      setIsPopoverOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   return (
     <div className="flex justify-between items-center px-[32px] lg:px-[32px] xl:px-[200px] py-5 bg-[#F0F6FF]">
       <Link href="/">
         <img src="/images/logo.svg" alt="logo" />
       </Link>
       {user ? (
-        <div className="flex">
+        <div className="relative flex items-center">
           <img
-            src={user.image_source}
+            src={user.image_source || user.profileImageSource}
             alt="profile"
-            className="w-[28px] h-[28px] mr-2 rounded-full"
+            className="w-[28px] h-[28px] mr-2 rounded-full cursor-pointer"
+            onClick={togglePopover}
           />
-          <div>{user.email}</div>
+          <div className="cursor-pointer" onClick={togglePopover}>
+            {user.email}
+          </div>
         </div>
       ) : (
-        <button className="px-5 py-4 w-[128px] bg-gradient-to-r from-[#6D6AFE] to-[#6AE3FE] rounded-md text-white text-sm font-bold">
-          로그인
-        </button>
+        <Link href="/signin">
+          <button className="px-5 py-4 w-[128px] bg-gradient-to-r from-[#6D6AFE] to-[#6AE3FE] rounded-md text-white text-sm font-bold">
+            로그인
+          </button>
+        </Link>
+      )}
+      {isPopoverOpen && (
+        <div
+          ref={popoverRef}
+          className="absolute right-0 mt-2 w-48 bg-white border rounded-md shadow-lg"
+        >
+          <button
+            onClick={handleLogout}
+            className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+          >
+            로그아웃
+          </button>
+        </div>
       )}
     </div>
   );

diff --git a/component/SignHeader.tsx b/component/SignHeader.tsx
@@ -10,10 +10,10 @@ export default function SignHeader() {
   return (
     <>
       <img
+        className="cursor-pointer"
         src="/images/logo.svg"
         alt="logo"
         width="210px"
-        className="cursor-pointer"
         onClick={() => router.push("/")}
       />
       <div className="flex mt-4">

diff --git a/component/SigninForm.tsx b/component/SigninForm.tsx
@@ -89,11 +89,11 @@ export default function SigninForm() {
           className="w-full mt-3 px-[15px] py-[18px] rounded-md"
         />
         <img
-          src={isClosed ? "/images/eye-off.svg" : "/images/eye-one.svg"}
-          alt="eye-off"
           className={`absolute right-3 ${
             errors.password?.message ? "bottom-10" : "bottom-5"
           }`}
+          src={isClosed ? "/images/eye-off.svg" : "/images/eye-one.svg"}
+          alt="eye-off"
           onClick={handleToggleImage}
         />
         <p className="text-[14px] text-[#FF5B56]">{errors.password?.message}</p>

diff --git a/component/SigninPasswordInput.tsx b/component/SigninPasswordInput.tsx
diff --git a/component/SignupForm.tsx b/component/SignupForm.tsx
@@ -109,11 +109,11 @@ export default function SignupForm() {
           className="w-full mt-3 px-[15px] py-[18px] rounded-md"
         />
         <img
-          src={isClosed ? "/images/eye-off.svg" : "/images/eye-one.svg"}
-          alt="eye-off"
           className={`absolute right-3 ${
             errors.password?.message ? "bottom-10" : "bottom-5"
           }`}
+          src={isClosed ? "/images/eye-off.svg" : "/images/eye-one.svg"}
+          alt="eye-off"
           onClick={handleToggleImage}
         />
         <p className="text-[14px] text-[#FF5B56]">{errors.password?.message}</p>
@@ -139,11 +139,11 @@ export default function SignupForm() {
           className="w-full mt-3 px-[15px] py-[18px] rounded-md"
         />
         <img
-          src={isClosed ? "/images/eye-off.svg" : "/images/eye-one.svg"}
-          alt="eye-off"
           className={`absolute right-3 ${
             errors.passwordCheck?.message ? "bottom-10" : "bottom-5"
           }`}
+          src={isClosed ? "/images/eye-off.svg" : "/images/eye-one.svg"}
+          alt="eye-off"
           onClick={handleToggleImage}
         />
         <p className="text-[14px] text-[#FF5B56]">

diff --git a/component/SocialLogin.tsx b/component/SocialLogin.tsx
@@ -15,18 +15,18 @@ export default function SocialLogin() {
         <Link href="https://www.google.com">
           <div className="bg-[white] rounded-full cursor-pointer">
             <img
+              className="p-[10px] w-[42px] h-[42px]"
               src="/images/google.png"
               alt="google"
-              className="p-[10px] w-[42px] h-[42px]"
             />
           </div>
         </Link>
         <Link href="https://www.kakaocorp.com/page">
           <div className="bg-[#F5E14B] rounded-full cursor-pointer">
             <img
+              className="p-[10px] w-[42px] h-[42px]"
               src="/images/kakao.svg"
               alt="kakao"
-              className="p-[10px] w-[42px] h-[42px]"
             />
           </div>
         </Link>

diff --git a/lib/folderFetcher.ts b/lib/folderFetcher.ts
@@ -1,4 +1,4 @@
-import axiosInstance from "@/axios/axiosinstance";
+import axiosInstance from "@/axios/axiosInstance";
 
 export const fetchFolders = async () => {
   try {

diff --git a/lib/linkFetcher.ts b/lib/linkFetcher.ts
@@ -1,4 +1,4 @@
-import axiosInstance from "@/axios/axiosinstance";
+import axiosInstance from "@/axios/axiosInstance";
 
 export const fetchLinks = async () => {
   try {

diff --git a/lib/userFetcher.ts b/lib/userFetcher.ts
@@ -1,4 +1,4 @@
-import axiosInstance from "@/axios/axiosinstance";
+import axiosInstance from "@/axios/axiosInstance";
 
 export const fetchUser = async () => {
   try {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -3,10 +3,36 @@ import Hero from "@/component/Hero";
 import LandingDescription from "@/component/LandingDescription";
 import LandingDescriptionMobile from "@/component/LandingDescriptionMobile";
 import Navbar from "@/component/Navbar";
-import useCurrentUser from "@/hooks/useCurrentUser";
+import { fetchUser } from "@/lib/userFetcher";
+import { useEffect, useState } from "react";
+
+interface UserData {
+  id: number;
+  name: string;
+  email: string;
+  profileImageSource: string;
+}
 
 export default function Home() {
-  const { data: user } = useCurrentUser();
+  const [user, setUser] = useState<UserData | undefined | null>();
+
+  useEffect(() => {
+    const getUsers = async () => {
+      try {
+        const { data } = await fetchUser();
+        setUser(data[0]);
+        console.log(data[0]);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    getUsers();
+  }, []);
+
+  if (!user) {
+    <div>Loading...</div>;
+  }
 
   return (
     <>

diff --git a/pages/shared/index.tsx b/pages/shared/index.tsx
@@ -4,16 +4,29 @@ import Navbar from "@/component/Navbar";
 import SharedSearchBar from "@/component/SharedSearchBar";
 import User from "@/component/User";
 import useCurrentUser from "@/hooks/useCurrentUser";
+import { fetcher } from "@/lib/fetcher";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
 
 export default function Shared() {
   const { data: user } = useCurrentUser();
 
+  const params = useParams();
+
+  const { data: links } = useSWR(
+    () =>
+      !params.folderId
+        ? `https://bootcamp-api.codeit.kr/api/users/${user?.id}/links`
+        : `https://bootcamp-api.codeit.kr/api/users/${user?.id}/links?folderId=${params.folderId}`,
+    fetcher
+  );
+
   return (
     <>
       <Navbar user={user} />
       <User user={user} />
       <SharedSearchBar />
-      <LinkCardList />
+      <LinkCardList links={links?.data} />
       <Footer />
     </>
   );