Merge pull request #442 from hakyoung12/part3-고학영-week14

[고학영] week14

.gitignore

@@ -56,3 +56,7 @@ next-env.d.ts
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# dist
+
+dist/

api/Auth.jsx

@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+
+/** 로그인폼 제출 */
+export async function submitLoginForm(email, password) {
+  const router = useRouter();
+  try {
+    const response = await fetch("https://bootcamp-api.codeit.kr/api/sign-in", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email: email,
+        password: password,
+      }),
+    });
+    const result = await response.json();
+    if (!response.ok) {
+      throw new Error("로그인 오류!");
+    } else {
+      router.push("/folder");
+      localStorage.setItem("accessToken", result.data.accessToken);
+    }
+  } catch (error) {
+    alert(error);
+  }
+}
+
+/** 회원가입폼 제출 */
+export async function submitSignUpForm(email, password) {
+  const router = useRouter();
+  try {
+    const response = await fetch("https://bootcamp-api.codeit.kr/api/sign-up", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email: email,
+        password: password,
+      }),
+    });
+    const result = await response.json();
+    if (!response.ok) {
+      throw new Error("회원가입 오류!");
+    } else {
+      router.push("/folder");
+      localStorage.setItem("accessToken", result.data.accessToken);
+    }
+  } catch (error) {
+    alert(error);
+  }
+}
+
+/** 로그인/회원가입 토큰체크 */
+export function accessTokenCheck() {
+  const router = useRouter();
+  useEffect(() => {
+    const token = localStorage.getItem("accessToken");
+    if (token) {
+      router.push("/folder");
+    }
+  }, []);
+}

components/AddFolderButton.tsx

@@ -0,0 +1,47 @@
+import styles from "./FolderList.module.css";
+import addBtn from "@/public/add.svg";
+import addBtnMobile from "@/public/add 2.svg";
+import Image from "next/image";
+
+interface addFolderButtonProps {
+  isMobile: boolean;
+  setModalOpen: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const AddFolderButton: React.FC<addFolderButtonProps> = ({
+  isMobile,
+  setModalOpen,
+}) => {
+  if (isMobile) {
+    return (
+      <button
+        className={styles.folderLinkList__addFolderButton__mobile}
+        onClick={(e) => {
+          e.preventDefault();
+          setModalOpen("addFolder");
+        }}
+      >
+        폴더 추가
+        <div className={styles.folderLinkList__addFolderIcon}>
+          <Image fill src={addBtnMobile} alt="폴더추가" />
+        </div>
+      </button>
+    );
+  } else {
+    return (
+      <button
+        className={styles.folderLinkList__addFolderButton}
+        onClick={(e) => {
+          e.preventDefault();
+          setModalOpen("addFolder");
+        }}
+      >
+        폴더 추가
+        <div className={styles.folderLinkList__addFolderIcon}>
+          <Image fill src={addBtn} alt="폴더추가" />
+        </div>
+      </button>
+    );
+  }
+};
+export default AddFolderButton;

components/AddLinkInput.tsx

@@ -3,7 +3,7 @@ import styles from "./AddLinkInput.module.css";
 import InputBtn from "./InputBtn";
 import Image from "next/image";
 
-const AddLinkInput: React.FC = () => {
+const AddLinkInput = () => {
   return (
     <div className={styles.AddLinkFormWrap}>
       <form className={styles.AddLinkForm}>

components/AuthForm.module.css

@@ -0,0 +1,74 @@
+.authForm {
+  display: flex;
+  margin: 30px 0 32px;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.inputGroup label {
+  color: var(--black, #000);
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.inputGroup input {
+  display: flex;
+  width: 370px;
+  padding: 18px 15px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid var(--Linkbrary-gray20, #ccd5e3);
+  background: var(--Linkbrary-white, #fff);
+}
+
+.inputGroup input:hover {
+  border-radius: 8px;
+  border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
+  background: var(--Linkbrary-white, #fff);
+}
+
+.passwordInput {
+  position: relative;
+}
+
+.errorMessage {
+  color: var(--Linkbrary-red, #ff5b56);
+  font-family: Pretendard;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.signinButton {
+  display: flex;
+  width: 400px;
+  padding: 16px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 8px;
+  background: var(
+    --gra-purpleblue-to-skyblue,
+    linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%)
+  );
+  border-style: none;
+  color: var(--Grey-Light, #f5f5f5);
+  font-family: Pretendard;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}

components/AuthFormHeader.module.css

@@ -0,0 +1,24 @@
+.AuthFormHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.logoWrap {
+  position: relative;
+  width: 210.583px;
+  height: 38px;
+}
+
+.AuthFormMessage {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--black, #000);
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}

components/AuthFormHeader.tsx

@@ -0,0 +1,28 @@
+import Logo from "@/public/logo.svg";
+import styles from "./AuthFormHeader.module.css";
+import Link from "next/link";
+import Image from "next/image";
+
+interface AuthFormHeaderProps {
+  message: string;
+  link: string;
+  linkMassege: string;
+}
+
+function AuthFormHeader({ message, link, linkMassege }: AuthFormHeaderProps) {
+  return (
+    <header className={styles.AuthFormHeader}>
+      <Link href="/">
+        <div className={styles.logoWrap}>
+          <Image fill src={Logo} alt="링크브러리 로고" />
+        </div>
+      </Link>
+      <div className={styles.AuthFormMessage}>
+        {message}
+        <Link href={link}>{linkMassege}</Link>
+      </div>
+    </header>
+  );
+}
+
+export default AuthFormHeader;

components/CardListSection.tsx

@@ -40,8 +40,9 @@ const CardListSection: React.FC<CardListSectionProps> = ({
   folders,
   searchTerm,
 }) => {
-  const result = useSelectFolder<UseSelectFolderResult>({ url });
+  const result = useSelectFolder<UseSelectFolderResult>({ url }); // url을 받아 카드 배열 리턴
   const links = result?.data;
+
   return (
     <>
       {links ? (

components/FolderEditMenu.module.css

@@ -0,0 +1,37 @@
+.folderLinkList__folderEditBtns {
+  display: flex;
+  gap: 12px;
+}
+
+.folderLinkList__folderEditBtn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  color: var(--Linkbrary-gray60, #9fa6b2);
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.folderLinkList__folderEditIcon {
+  position: relative;
+  width: 18px;
+  height: 18px;
+}
+
+.folderLinkList__folderName {
+  color: #000;
+  font-family: Pretendard;
+  font-size: 24px;
+  width: 50%;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: -0.2px;
+  margin: 24px 0;
+}

components/FolderEditMenu.tsx

@@ -0,0 +1,54 @@
+import shareBtn from "@/public/share.svg";
+import renameBtn from "@/public/pen.svg";
+import deleteBtn from "@/public/Group 36.svg";
+import Image from "next/image";
+import styles from "./FolderEditMenu.module.css";
+
+interface FolderEditMenu {
+  setModalOpen: React.Dispatch<React.SetStateAction<string>>;
+}
+
+function FolderEditMenu({ setModalOpen }: FolderEditMenu) {
+  return (
+    <div className={styles.folderLinkList__folderEditBtns}>
+      <button
+        className={styles.folderLinkList__folderEditBtn}
+        onClick={(e) => {
+          e.preventDefault();
+          setModalOpen("shareLink");
+        }}
+      >
+        <div className={styles.folderLinkList__folderEditIcon}>
+          <Image fill src={shareBtn} alt="공유하기" />
+        </div>
+        공유
+      </button>
+      <button
+        className={styles.folderLinkList__folderEditBtn}
+        onClick={(e) => {
+          e.preventDefault();
+          setModalOpen("alterName");
+        }}
+      >
+        <div className={styles.folderLinkList__folderEditIcon}>
+          <Image fill src={renameBtn} alt="이름변경" />
+        </div>
+        이름 변경
+      </button>
+      <button
+        className={styles.folderLinkList__folderEditBtn}
+        onClick={(e) => {
+          e.preventDefault();
+          setModalOpen("delete");
+        }}
+      >
+        <div className={styles.folderLinkList__folderEditIcon}>
+          <Image fill src={deleteBtn} alt="삭제" />
+        </div>
+        삭제
+      </button>
+    </div>
+  );
+}
+
+export default FolderEditMenu;