Merge pull request #474 from kuum97/part3-권주현-week15

[권주현] Week15
codeit-bootcamp-frontend · May 29, 2024 · 847bcb9 · 847bcb9
2 parents 0b9d09a + 83e3ac3
commit 847bcb9
Show file tree

Hide file tree

Showing 50 changed files with 902 additions and 692 deletions.
diff --git a/api.ts b/api.ts
@@ -1,49 +1,55 @@
-import { SampleUser, UserData } from "@/types/user";
-import { FolderData, SampleFolder } from "@/types/folder";
-import { Response, SampleFolderResponse } from "@/types/response";
-import { LinkData } from "@/types/link";
 import { CODEIT_BASE_URL } from "@/constants";
 import { FormValues } from "./common/Auth/Form";
-
-export interface Params {
-  [key: string]: number | null;
+import {
+  FolderData,
+  LinkData,
+  NewFolderData,
+  NewUserData,
+  Params,
+  Response,
+  UserData,
+} from "./types/api";
+
+interface TokenProp {
+  token: string;
 }
 
-export async function getUser(): Promise<SampleUser> {
-  const response = await fetch(`${CODEIT_BASE_URL}/sample/user`);
-  if (!response.ok) {
-    throw new Error("잘못된 요청입니다.");
-  }
-
-  const user: SampleUser = await response.json();
+// 유저 데이터
 
-  return user;
-}
-
-export async function getFolder(): Promise<SampleFolder> {
-  const response = await fetch(`${CODEIT_BASE_URL}/sample/folder`);
+export async function getUserById({ userId }: Params): Promise<UserData> {
+  const response = await fetch(`${CODEIT_BASE_URL}/users/${userId}`);
   if (!response.ok) {
     throw new Error("잘못된 요청입니다.");
   }
 
-  const data: SampleFolderResponse = await response.json();
-  const { folder } = data;
+  const user: Response<UserData> = await response.json();
+  const { data } = user;
 
-  return folder;
+  return data[0];
 }
 
-export async function getUserById({ userId }: Params): Promise<UserData> {
-  const response = await fetch(`${CODEIT_BASE_URL}/users/${userId}`);
+export async function getUserByToken({
+  token,
+}: TokenProp): Promise<NewUserData> {
+  const response = await fetch(`${CODEIT_BASE_URL}/users`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  });
   if (!response.ok) {
     throw new Error("잘못된 요청입니다.");
   }
 
-  const user: Response<UserData> = await response.json();
+  const user: Response<NewUserData> = await response.json();
   const { data } = user;
 
   return data[0];
 }
 
+// 폴더 데이터
+
 export async function getFoldersByUserId({
   userId,
 }: Params): Promise<FolderData[]> {
@@ -58,14 +64,34 @@ export async function getFoldersByUserId({
   return data;
 }
 
+export async function getFolders({
+  token,
+}: TokenProp): Promise<NewFolderData[]> {
+  const response = await fetch(`${CODEIT_BASE_URL}/folders`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  if (!response.ok) {
+    throw new Error("잘못된 요청입니다.");
+  }
+
+  const { data } = await response.json();
+  const { folder } = data;
+
+  return folder;
+}
+
+// 링크 데이터
+
 export async function getLinksByUserIdAndFolderId({
   userId,
   folderId,
 }: Params): Promise<LinkData[]> {
-  let url = `${CODEIT_BASE_URL}/users/${userId}/links`;
-  if (folderId) {
-    url += `?folderId=${folderId}`;
-  }
+  const defaultUrl = `${CODEIT_BASE_URL}/users/${userId}/links`;
+  const url = folderId ? `${defaultUrl}?folderId=${folderId}` : `${defaultUrl}`;
 
   const response = await fetch(url);
   if (!response.ok) {
@@ -78,6 +104,36 @@ export async function getLinksByUserIdAndFolderId({
   return data;
 }
 
+interface GetLinkProps extends TokenProp {
+  folderId?: number;
+}
+
+export async function getLinksByFolderId({
+  folderId,
+  token,
+}: GetLinkProps): Promise<LinkData[]> {
+  const defaultUrl = `${CODEIT_BASE_URL}/links`;
+  const url = folderId ? `${defaultUrl}?folderId=${folderId}` : `${defaultUrl}`;
+
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  if (!response.ok) {
+    throw new Error("잘못된 요청입니다.");
+  }
+
+  const result = await response.json();
+  const { folder } = result.data;
+
+  return folder;
+}
+
+// POST
+
 export async function postEmailCheck(email: string): Promise<void | string> {
   const response = await fetch(`${CODEIT_BASE_URL}/check-email`, {
     method: "POST",
@@ -99,22 +155,49 @@ export async function postEmailCheck(email: string): Promise<void | string> {
   return;
 }
 
+interface postData {
+  data: {
+    accessToken: string;
+    refreshToken: string;
+  };
+}
+
 export async function postSignup({
   email,
   password,
-}: FormValues): Promise<void | string> {
+}: FormValues): Promise<postData> {
   const response = await fetch(`${CODEIT_BASE_URL}/sign-up`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({ email, password }),
   });
+  const data = await response.json();
 
   if (!response.ok) {
-    const data = await response.json();
     return data.error.message;
   }
 
-  return;
+  return data;
+}
+
+export async function postSignin({
+  email,
+  password,
+}: FormValues): Promise<postData> {
+  const response = await fetch(`${CODEIT_BASE_URL}/sign-in`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ email, password }),
+  });
+  const data = await response.json();
+
+  if (!response.ok) {
+    return data.error.message;
+  }
+
+  return data;
 }
diff --git a/common/Auth/Form/index.tsx b/common/Auth/Form/index.tsx
@@ -1,18 +1,19 @@
-import { SubmitHandler, UseFormHandleSubmit, useForm } from "react-hook-form";
+import { SubmitHandler, UseFormHandleSubmit } from "react-hook-form";
 import styles from "./index.module.css";
 import { ReactNode } from "react";
+import { TProps } from "../Header";
 
 export interface FormValues {
   email: string;
-  password: number;
-  passwordConfirm?: number;
+  password: string;
+  passwordConfirm?: string;
 }
 
 export interface AuthFormProps {
   children?: ReactNode;
   onSubmit: SubmitHandler<FormValues>;
   handleSubmit: UseFormHandleSubmit<FormValues, undefined>;
-  purpose: string;
+  purpose: TProps;
 }
 
 function AuthForm({

diff --git a/common/Auth/Header/index.tsx b/common/Auth/Header/index.tsx
@@ -2,8 +2,9 @@ import Image from "next/image";
 import Link from "next/link";
 import styles from "./index.module.css";
 
+export type TProps = "signin" | "signup";
 interface AuthHeaderProps {
-  purpose: string;
+  purpose: TProps;
 }
 
 function AuthHeader({ purpose }: AuthHeaderProps) {

diff --git a/common/Auth/Input/index.tsx b/common/Auth/Input/index.tsx
@@ -1,5 +1,5 @@
-import { HTMLInputTypeAttribute } from "react";
-import { FaEyeSlash } from "react-icons/fa";
+import React, { HTMLInputTypeAttribute, forwardRef, useState } from "react";
+import { FaEyeSlash, FaEye } from "react-icons/fa";
 import styles from "./index.module.css";
 import {
   FieldError,
@@ -17,13 +17,19 @@ interface AuthInputProps {
   error?: FieldError | Merge<FieldError, FieldErrorsImpl>;
 }
 
-function AuthInput({
-  label,
-  type,
-  placeholder,
-  register,
-  error,
-}: AuthInputProps) {
+function AuthInput(
+  { label, type, placeholder, register, error }: AuthInputProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const handleToggleVisibility = () => {
+    if (typeof ref !== "function" && ref?.current) {
+      ref.current.type = isVisible ? "password" : "text";
+    }
+    setIsVisible(!isVisible);
+  };
+
   return (
     <div className={styles.container}>
       <label className={styles.inputLabel} htmlFor={type}>
@@ -36,17 +42,29 @@ function AuthInput({
           [styles.errorBorder]: error,
         })}
         {...register}
+        ref={(e) => {
+          register.ref(e);
+          if (typeof ref === "function") {
+            ref(e);
+          } else if (ref) {
+            ref.current = e;
+          }
+        }}
       />
       {error && (
         <p className={styles.errorMessage}>{error.message?.toString()}</p>
       )}
       {type === "password" && (
-        <button className={styles.eyeSlash} type="button">
-          <FaEyeSlash />
+        <button
+          className={styles.eyeSlash}
+          type="button"
+          onClick={handleToggleVisibility}
+        >
+          {!isVisible ? <FaEye /> : <FaEyeSlash />}
         </button>
       )}
     </div>
   );
 }
 
-export default AuthInput;
+export default forwardRef(AuthInput);
diff --git a/common/Footer/index.module.css b/common/Footer/index.module.css
@@ -3,9 +3,10 @@
   display: grid;
   grid-template: auto / 1fr 1fr 1fr;
   padding: 40px 104px;
-  margin-top: 70px;
   background-color: var(--black);
   color: var(--white);
+  position: absolute;
+  bottom: 0;
 }
 
 .container a {

diff --git a/common/Header/index.tsx b/common/Header/index.tsx
@@ -1,17 +1,15 @@
 import Image from "next/image";
 import Avatar from "@/common/Avatar";
 import styles from "./index.module.css";
-import { useInitializeUser } from "@/hooks/useInitializeUser";
-import { useUserState } from "@/hooks/useUserState";
-import { SAMPLE_USER_ID } from "@/constants";
+import { useStoreState } from "@/hooks/state";
+import Link from "next/link";
 
 function Header() {
-  useInitializeUser({ SAMPLE_USER_ID });
-  const { user } = useUserState();
+  const { user } = useStoreState();
 
   return (
     <header className={styles.container}>
-      <div className={styles.logo}>
+      <Link href={"/"} className={styles.logo}>
         <Image
           fill
           src="/images/Linkbrary.png"
@@ -20,15 +18,15 @@ function Header() {
           sizes="(max-width: 767px) 100px, 133px"
           priority
         />
+      </Link>
+      <div className={styles.profileContainer}>
+        {user && (
+          <>
+            <Avatar size="small" src={user.image_source} />
+            <span>{user.email}</span>
+          </>
+        )}
       </div>
-      {user ? (
-        <div className={styles.profileContainer}>
-          <Avatar size="small" src={user.image_source} />
-          <span>{user.email}</span>
-        </div>
-      ) : (
-        <button className={styles.loginBtn}>로그인</button>
-      )}
     </header>
   );
 }

diff --git a/common/SearchBar/index.module.css b/common/SearchBar/index.module.css
@@ -2,7 +2,7 @@
   width: 100%;
   height: 54px;
   padding: 15px 16px 15px 16px;
-  margin: 50px 0;
+  margin: 35px 0;
   border-radius: 10px;
   background-color: var(--gray-500);
   display: flex;
@@ -24,3 +24,15 @@
 .input:focus {
   outline: none;
 }
+
+.queryMessage {
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 38.19px;
+  color: var(--gray-600);
+  margin-bottom: 35px;
+}
+
+.query {
+  color: var(--black);
+}