[오다은] Week19

apis/api.ts

@@ -1,6 +1,7 @@
+import { AddLink, EditFolderName } from '@/interfaces/api';
 import axios from 'axios';
 
-const BASIC_URL = 'https://bootcamp-api.codeit.kr/api';
+const BASIC_URL = 'https://bootcamp-api.codeit.kr/api/linkbrary/v1';
 
 export async function getUser() {
   let response;
@@ -13,13 +14,13 @@ export async function getUser() {
   } else {
     return;
   }
-  const result = response.data.data[0];
+  const result = response.data[0];
   return result;
 }
 
 export async function getFolderUser(id: number) {
   const response = await axios.get(`${BASIC_URL}/users/${id}`);
-  const result = response.data.data[0];
+  const result = response.data[0];
   return result;
 }
 
@@ -31,37 +32,102 @@ export async function postCheckDuplicateEmail(id: string) {
 }
 
 export async function postSignUp(id: string, pw: string) {
-  const response = await axios.post(`${BASIC_URL}/sign-up`, {
+  const response = await axios.post(`${BASIC_URL}/auth/sign-up`, {
     email: id,
     password: pw,
   });
   return response;
 }
 
 export async function postSignIn(id: string, pw: string) {
-  const response = await axios.post(`${BASIC_URL}/sign-in`, {
+  const response = await axios.post(`${BASIC_URL}/auth/sign-in`, {
     email: id,
     password: pw,
   });
-  const result = response.data.data;
+  const result = response.data;
   return result;
 }
 
-export async function getFolders(folderId: number, userId?: number | null) {
+export async function getFolders(folderId: number) {
   const queryParam = folderId === 0 ? '' : `/${folderId}`;
-  const userIdParam = userId ? `/users/${userId}` : '';
-  const response = await axios.get(
-    `${BASIC_URL}${userIdParam}/folders${queryParam}`
-  );
-  const result = response.data.data;
+  const response = await axios.get(`${BASIC_URL}/folders${queryParam}`, {
+    headers: {
+      Authorization: localStorage.accessToken,
+    },
+  });
+  const result = response.data;
   return result;
 }
 
-export async function getLinks(userId: number | null, folderId: number) {
-  const queryParam = folderId === 0 ? '' : `?folderId=${folderId}`;
-  const response = await axios.get(
-    `${BASIC_URL}/users/${userId}/links${queryParam}`
-  );
-  const data = response.data.data;
+export async function getLinks(folderId: number) {
+  const queryParam = folderId === 0 ? '/links' : `/folders/${folderId}/links`;
+  const response = await axios.get(`${BASIC_URL}${queryParam}`, {
+    headers: {
+      Authorization: localStorage.accessToken,
+    },
+  });
+  const data = response.data;
   return data;
 }
+
+export async function addFolder(newFolderName: string) {
+  const response = await axios.post(
+    `${BASIC_URL}/folders`,
+    {
+      name: newFolderName,
+    },
+    {
+      headers: {
+        Authorization: localStorage.accessToken,
+      },
+    }
+  );
+}
+
+export async function addLink({ url, folderId }: AddLink) {
+  const response = await axios.post(
+    `${BASIC_URL}/links`,
+    {
+      url,
+      folderId,
+    },
+    {
+      headers: {
+        Authorization: localStorage.accessToken,
+      },
+    }
+  );
+}
+
+export async function deleteFolder(folderId: number) {
+  const response = await axios.delete(`${BASIC_URL}/folders/${folderId}`, {
+    headers: {
+      Authorization: localStorage.accessToken,
+    },
+  });
+}
+
+export async function deleteLink(linkId: number) {
+  const response = await axios.delete(`${BASIC_URL}/links/${linkId}`, {
+    headers: {
+      Authorization: localStorage.accessToken,
+    },
+  });
+}
+
+export async function putFolderName({
+  folderId,
+  newFolderName,
+}: EditFolderName) {
+  const response = await axios.put(
+    `${BASIC_URL}/folders/${folderId}`,
+    {
+      name: newFolderName,
+    },
+    {
+      headers: {
+        Authorization: localStorage.accessToken,
+      },
+    }
+  );
+}

components/Button/Button.styled.ts

@@ -17,6 +17,10 @@ const StyledButton = css`
   font-weight: 600;
   font-size: 1.125rem;
 
+  &:disabled {
+    cursor: default;
+  }
+
   @media (max-width: 767px) {
     padding: 10px 0;
     font-size: 0.875rem;

components/Button/Button.tsx

@@ -6,15 +6,29 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   link?: string;
 }
 
-export default function Button({ text, className = '', link }: Props) {
+export default function Button({
+  text,
+  className = '',
+  link,
+  onClick,
+  type,
+  disabled,
+}: Props) {
   return (
     <>
       {link ? (
         <S.StyledLink href={link} className={className}>
           {text}
         </S.StyledLink>
       ) : (
-        <S.Button className={className}>{text}</S.Button>
+        <S.Button
+          className={className}
+          type={type}
+          onClick={onClick}
+          disabled={disabled}
+        >
+          {text}
+        </S.Button>
       )}
     </>
   );

components/Card/Card.tsx

@@ -1,36 +1,33 @@
-import { ReactEventHandler, useState } from 'react';
+import { MouseEvent, ReactEventHandler, useState } from 'react';
 import Image, { StaticImageData } from 'next/image';
 import Link from 'next/link';
 import { formatDateToString, formatDateToAgo } from '@/utils/date';
-import Modal from '../Modal/Modal';
 import * as S from './Card.styled';
 import star from '@/public/images/star_icon.png';
 import kebab from '@/public/images/kebab_icon.png';
 import defaultImage from '@/public/images/no-image.png';
+import { FolderInterface } from '@/interfaces';
+import AddLinkModal from '../Modal/Contents/AddLinkModal';
+import DeleteLinkModal from '../Modal/Contents/DeleteLinkModal';
+import { useModal, useSetModal } from '@/contexts/ModalContext';
 
 interface Props {
   item: {
+    id: number;
     created_at: string;
     url: string;
     title: string;
     image_source: string;
   };
-  folderNames?: string[];
-  itemCountsInEachFolder?: number[];
+  folders?: FolderInterface[];
 }
 
-export default function Card({
-  item,
-  folderNames,
-  itemCountsInEachFolder,
-}: Props) {
-  const { created_at, url, title, image_source } = item;
-  const [isVisibleKebabModal, setIsVisibleKebabModal] = useState(false);
-  const [isVisibledeleteCardModal, setIsVisibleDeleteCardModal] =
-    useState(false);
-  const [isVisibleAddInFolderModal, setIsVisibleAddInFolderModal] =
-    useState(false);
+export default function Card({ item, folders }: Props) {
+  const { id, created_at, url, title, image_source } = item;
+  const [isOpenKebab, setIsOpenKebab] = useState(false);
 
+  const modal = useModal();
+  const setModal = useSetModal();
   const dateBetween = formatDateToAgo(created_at);
   const date = formatDateToString(created_at);
 
@@ -40,22 +37,22 @@ export default function Card({
     e.currentTarget.src = defaultImage;
   };
 
-  const handleStarClick = (e: React.MouseEvent) => {
+  const handleStarClick = (e: MouseEvent) => {
     e.preventDefault();
     console.log('별 클릭');
   };
-  const handleKebabClick = (e: React.MouseEvent) => {
+  const handleKebabClick = (e: MouseEvent) => {
     e.preventDefault();
-    setIsVisibleKebabModal(!isVisibleKebabModal);
+    setIsOpenKebab(!isOpenKebab);
   };
 
-  const handleDeleteButtonClick = (e: React.MouseEvent) => {
+  const handleDeleteButtonClick = (e: MouseEvent) => {
     e.preventDefault();
-    setIsVisibleDeleteCardModal(true);
+    setModal({ isOpen: true, content: `DeleteLinkModal ${id}` });
   };
-  const handleAddFolderButtonClick = (e: React.MouseEvent) => {
+  const handleAddLinkButtonClick = (e: MouseEvent) => {
     e.preventDefault();
-    setIsVisibleAddInFolderModal(true);
+    setModal({ isOpen: true, content: `AddLinkModal ${id}` });
   };
 
   return (
@@ -74,15 +71,15 @@ export default function Card({
           <S.TextWrap>
             <S.TextTopWrap>
               <S.DateAgo>{dateBetween}</S.DateAgo>
-              {folderNames && (
+              {folders && (
                 <button onClick={handleKebabClick}>
                   <Image src={kebab} alt='더보기' width='21' height='17' />
                 </button>
               )}
-              {isVisibleKebabModal && (
+              {isOpenKebab && (
                 <S.KebabModal>
                   <button onClick={handleDeleteButtonClick}>삭제하기</button>
-                  <button onClick={handleAddFolderButtonClick}>
+                  <button onClick={handleAddLinkButtonClick}>
                     폴더에 추가
                   </button>
                 </S.KebabModal>
@@ -91,30 +88,20 @@ export default function Card({
             <S.Title>{title}</S.Title>
             <S.Date>{date}</S.Date>
           </S.TextWrap>
-          {folderNames && (
+          {folders && (
             <S.Star onClick={handleStarClick}>
               <Image src={star} alt='별' fill sizes='34px' />
             </S.Star>
           )}
         </Link>
       </S.Card>
-      {isVisibledeleteCardModal && (
-        <Modal
-          title='링크 삭제'
-          semiTitle={url}
-          button='삭제하기'
-          onClose={setIsVisibleDeleteCardModal}
-        />
-      )}
-      {isVisibleAddInFolderModal && (
-        <Modal
-          title='폴더에 추가'
-          semiTitle={url}
-          folders={folderNames}
-          counts={itemCountsInEachFolder}
-          button='추가하기'
-          onClose={setIsVisibleAddInFolderModal}
-        />
+
+      {modal.isOpen && modal.content === `DeleteLinkModal ${id}` ? (
+        <DeleteLinkModal link={url} linkId={id} />
+      ) : modal.content === `AddLinkModal ${id}` ? (
+        <AddLinkModal link={url} folders={folders} />
+      ) : (
+        ''
       )}
     </>
   );

components/CardList/CardList.tsx

@@ -1,27 +1,17 @@
-import { LinkInterface } from '@/interfaces';
+import { FolderInterface, LinkInterface } from '@/interfaces';
 import Card from '../Card/Card';
 import * as S from './CardList.styled';
 
 interface Props {
   items: LinkInterface[] | undefined;
-  folderNames?: string[];
-  itemCountsInEachFolder?: number[];
+  folders?: FolderInterface[];
 }
 
-export default function CardList({
-  items,
-  folderNames,
-  itemCountsInEachFolder,
-}: Props) {
+export default function CardList({ items, folders }: Props) {
   return (
     <S.List>
       {items?.map((item) => (
-        <Card
-          key={item.id}
-          item={item}
-          folderNames={folderNames}
-          itemCountsInEachFolder={itemCountsInEachFolder}
-        />
+        <Card key={item.id} item={item} folders={folders} />
       ))}
     </S.List>
   );