[오동혁] Week15

codeit-bootcamp-frontend · May 26, 2024 · 0eb5c7d · 0eb5c7d
1 parent 95c33ba
commit 0eb5c7d
Show file tree

Hide file tree

Showing 20 changed files with 320 additions and 183 deletions.
diff --git a/common/api.ts b/common/api.ts
@@ -17,11 +17,13 @@ export interface ApiInfo {
 export const API_INFO: ApiInfo = {
   baseUrl: 'https://bootcamp-api.codeit.kr',
   endpoints: {
-    sampleUser: { url: '/api/sample/user', method: 'GET' },
-    sampleData: { url: '/api/sample/folder', method: 'GET' },
-    getUser: { url: '/api/users/{param1}', method: 'GET' },
-    getFolder: { url: '/api/users/{param1}/folders', method: 'GET' },
-    getData: { url: '/api/users/{param1}/links', method: 'GET' },
+    getUserByUserId: { url: '/api/users/{param1}', method: 'GET' },
+    getFolderByUserId: { url: '/api/users/{param1}/folders', method: 'GET' },
+    getDataByUserId: { url: '/api/users/{param1}/links', method: 'GET' },
+    getUserByToken: { url: '/api/users', method: 'GET' },
+    getFolderByToken: { url: '/api/folders', method: 'GET' },
+    getDataByToken: { url: '/api/links', method: 'GET' },
+    getFolderByFolderId: { url: '/api/folders/{param1}', method: 'GET' },
     checkEmail: { url: '/api/check-email', method: 'POST' },
     signin: { url: '/api/sign-in', method: 'POST' },
     signup: { url: '/api/sign-up', method: 'POST' },
@@ -52,7 +54,6 @@ export interface FolderData {
   name: string;
   user_id: number;
   favorite: boolean;
-  link: { count: number };
 }
 
 export interface LinkData {
@@ -66,17 +67,28 @@ export interface LinkData {
   url: string;
 }
 
-export interface LinkSample {
+export interface FoldersData {
+  folder: { id: number; created_at: string; name: string; user_id: number; favorite: boolean }[];
+}
+
+export interface LinksData {
   folder: {
-    count: number;
+    created_at: string;
+    description: string;
+    folder_id: number;
     id: number;
-    links: { createdAt: string; description: string; id: number; imageSource: string; title: string; url: string }[];
-    name: string;
-    owner: { id: number; name: string; profileImageSource: string };
-  };
+    image_source: string;
+    title: string;
+    updated_at: string | null;
+    url: string;
+  }[];
 }
 
 export interface Data<T> {
+  data: T;
+}
+
+export interface DataArray<T> {
   data: T[];
 }
 

diff --git a/components/common/Item.tsx b/components/common/Item.tsx
@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from 'react';
 import KebbabPopover from '@/components/folder/KebbabPopover';
 import DeleteModal from '@/components/folder/DeleteModal';
 import AddLinkModal from '@/components/folder/AddLinkModal';
-import { FetchData, FolderData } from '@/common/api';
+import { FetchData, FoldersData } from '@/common/api';
 import { SIZE } from '@/constants/size';
 
 const StyledArticle = styled.article`
@@ -48,6 +48,8 @@ const ImgDiv = styled.div`
   width: 100%;
   height: 200px;
   overflow: hidden;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
 `;
 
 const StyledImg = styled(Image)`
@@ -123,7 +125,7 @@ interface ItemProps {
   title: string;
   description?: string;
   imageSource?: string;
-  folderData?: FetchData<FolderData[]>;
+  folderData?: FetchData<FoldersData>;
   editable?: boolean;
 }
 

diff --git a/components/common/Nav.tsx b/components/common/Nav.tsx
@@ -99,10 +99,9 @@ const LoginButton = styled.button`
 
 interface NavProps {
   userData?: { data?: UserData | null; loading?: boolean; error?: Error | null };
-  isSample?: boolean;
 }
 
-function Nav({ userData, isSample }: NavProps) {
+function Nav({ userData }: NavProps) {
   const { data, loading, error } = userData ?? {};
 
   return (
@@ -116,7 +115,7 @@ function Nav({ userData, isSample }: NavProps) {
           error === null && (
             <FlexDiv>
               <ProfileImg
-                src={(isSample ? data?.profileImageSource : data?.image_source) || noImage}
+                src={data?.image_source || noImage}
                 width={28}
                 height={28}
                 fetchPriority='high'

diff --git a/components/folder/AddLinkModal.tsx b/components/folder/AddLinkModal.tsx
@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import Modal from '@/components/common/Modal';
 import { useState } from 'react';
 import check from '@/assets/images/icons/check.png';
-import { FetchData, FolderData } from '@/common/api';
+import { FetchData, FoldersData } from '@/common/api';
 import Image from 'next/image';
 
 const LinkName = styled.div`
@@ -96,7 +96,7 @@ interface AddLinkModalProps {
   padding?: string;
   setter?: (param: boolean) => void;
   url?: string;
-  folderData?: FetchData<FolderData[]>;
+  folderData?: FetchData<FoldersData>;
 }
 
 export default function AddLinkModal({ title, width, height, padding, setter, url, folderData }: AddLinkModalProps) {
@@ -106,7 +106,7 @@ export default function AddLinkModal({ title, width, height, padding, setter, ur
     <Modal title={title} width={width} height={height} padding={padding} setter={setter}>
       <LinkName>{url}</LinkName>
       <Folders>
-        {folderData?.data?.map((item, idx) => (
+        {folderData?.data?.folder.map((item, idx) => (
           <Folder
             key={item.id}
             onClick={() => {
@@ -116,7 +116,8 @@ export default function AddLinkModal({ title, width, height, padding, setter, ur
           >
             <FolderLeft>
               <FolderName>{item.name}</FolderName>
-              <LinkCount>{item.link.count}개 링크</LinkCount>
+              {/* 확인해야함 */}
+              {/* <LinkCount>{item.link.count}개 링크</LinkCount> */}
             </FolderLeft>
             <FolderRight>
               {(selectedId === null ? idx === 0 : selectedId === item.id) && <CheckImg src={check} alt='check' />}

diff --git a/components/folder/Content.tsx b/components/folder/Content.tsx
@@ -1,4 +1,4 @@
-import { API_INFO, Data, FetchData, FolderData, LinkData, putParams } from '@/common/api';
+import { API_INFO, Data, DataArray, FetchData, FoldersData, LinksData } from '@/common/api';
 import useFetch from '@/hooks/useFetch';
 import { styled } from 'styled-components';
 import Search from '@/components/common/Search';
@@ -43,23 +43,33 @@ const GridDiv = styled.div`
 `;
 
 interface ContentProps {
-  folderData: FetchData<FolderData[]>;
+  folderData: FetchData<FoldersData>;
+  folderId: number;
 }
 
-function Content({ folderData }: ContentProps) {
-  const [selectedId, setSelectedId] = useState(0);
+const { url: getDataUrl, method: getDataMethod } = API_INFO.endpoints.getDataByToken;
+
+function Content({ folderData, folderId }: ContentProps) {
+  const [selectedId, setSelectedId] = useState(folderId);
   const [searchValue, setSearchValue] = useState('');
 
-  const { url: getDataUrl, method: getDataMethod } = API_INFO.endpoints.getData;
+  useEffect(() => {
+    setSelectedId(folderId);
+  }, [folderId]);
+
   const queryString = selectedId === 0 ? '' : '?folderId=' + selectedId;
 
-  const linkData = useFetch<Data<LinkData>>({
-    url: API_INFO.baseUrl + putParams(getDataUrl, '1') + queryString,
+  const headers =
+    typeof window === 'undefined' ? undefined : { Authorization: 'Bearer ' + localStorage.getItem('accessToken') };
+
+  const linkData = useFetch<Data<LinksData>>({
+    url: API_INFO.baseUrl + getDataUrl + queryString,
     method: getDataMethod,
+    headers: headers,
     immediate: true,
   });
 
-  const [itemData, setItemData] = useState<FetchData<LinkData[]>>({
+  const [itemData, setItemData] = useState<FetchData<LinksData>>({
     data: linkData.data ? linkData.data.data : null,
     loading: linkData.loading,
     error: linkData.error,
@@ -68,13 +78,15 @@ function Content({ folderData }: ContentProps) {
   useEffect(() => {
     setItemData({
       data: linkData.data
-        ? linkData.data.data.filter((item) => {
-            return (
-              item.url?.includes(searchValue) ||
-              item.title?.includes(searchValue) ||
-              item.description?.includes(searchValue)
-            );
-          })
+        ? {
+            folder: linkData.data.data.folder.filter((item) => {
+              return (
+                item.url?.includes(searchValue) ||
+                item.title?.includes(searchValue) ||
+                item.description?.includes(searchValue)
+              );
+            }),
+          }
         : null,
       loading: linkData.loading,
       error: linkData.error,

diff --git a/components/folder/FolderList.tsx b/components/folder/FolderList.tsx
@@ -9,7 +9,7 @@ import ChangeModal from './ChangeModal';
 import DeleteModal from './DeleteModal';
 import ShareModal from './ShareModal';
 import { useScript } from '@/hooks/useScript';
-import { FetchData, FolderData } from '@/common/api';
+import { FetchData, FoldersData } from '@/common/api';
 import { SIZE } from '@/constants/size';
 import Image from 'next/image';
 
@@ -89,7 +89,7 @@ declare global {
 }
 
 interface FolderListProps {
-  folderData: FetchData<FolderData[]>;
+  folderData: FetchData<FoldersData>;
   selectedId: number;
   setSelectedId: (id: number) => void;
 }
@@ -143,7 +143,7 @@ function FolderList({ folderData, selectedId, setSelectedId }: FolderListProps)
           />
           {!loading &&
             error === null &&
-            data?.map((item) => (
+            data?.folder.map((item) => (
               <FolderBox
                 key={item.id}
                 id={item.id}
@@ -188,6 +188,7 @@ function FolderList({ folderData, selectedId, setSelectedId }: FolderListProps)
             setter={setOpenShareModal}
             shareKakao={shareKakao}
             shareFacebook={shareFacebook}
+            folderId={selectedId}
           />
         )}
         {openChangeModal && (

diff --git a/components/folder/Header.tsx b/components/folder/Header.tsx
@@ -1,6 +1,6 @@
 import LinkAppender from './LinkAdder';
 import { css, styled } from 'styled-components';
-import { FetchData, FolderData } from '@/common/api';
+import { FetchData, FoldersData } from '@/common/api';
 import { useEffect, useRef, useState } from 'react';
 import { SIZE } from '@/constants/size';
 
@@ -53,7 +53,7 @@ const StyledDiv = styled.div`
 `;
 
 interface HeaderProps {
-  folderData: FetchData<FolderData[]>;
+  folderData: FetchData<FoldersData>;
 }
 
 function Header({ folderData }: HeaderProps) {

diff --git a/components/folder/Items.tsx b/components/folder/Items.tsx
@@ -1,4 +1,4 @@
-import { FetchData, FolderData, LinkData } from '@/common/api';
+import { FetchData, FoldersData, LinkData, LinksData } from '@/common/api';
 import Item from '@/components/common/Item';
 import { styled } from 'styled-components';
 import { SIZE } from '@/constants/size';
@@ -28,37 +28,68 @@ const EmptySpan = styled.span`
 `;
 
 interface ItemsProps {
-  folderData: FetchData<FolderData[]>;
-  linkData: FetchData<LinkData[]>;
+  folderData?: FetchData<FoldersData>;
+  linkData?: FetchData<LinksData>;
+  shareLinkData?: FetchData<LinkData[]>;
 }
 
-function Items({ folderData, linkData }: ItemsProps) {
-  const { data, loading, error } = linkData;
+function Items({ folderData, linkData, shareLinkData }: ItemsProps) {
+  if (linkData) {
+    const { data, loading, error } = linkData;
 
-  return (
-    <>
-      {!loading &&
-        error === null &&
-        (data?.length === 0 ? (
-          <EmptyDiv>
-            <EmptySpan>저장된 링크가 없습니다.</EmptySpan>
-          </EmptyDiv>
-        ) : (
-          data?.map((item) => (
-            <Item
-              key={item.id}
-              createdAt={item.created_at}
-              url={item.url}
-              title={item.title}
-              description={item.description}
-              imageSource={item.image_source}
-              folderData={folderData}
-              editable={true}
-            />
-          ))
-        ))}
-    </>
-  );
+    return (
+      <>
+        {!loading &&
+          error === null &&
+          (data?.folder.length === 0 ? (
+            <EmptyDiv>
+              <EmptySpan>저장된 링크가 없습니다.</EmptySpan>
+            </EmptyDiv>
+          ) : (
+            data?.folder.map((item) => (
+              <Item
+                key={item.id}
+                createdAt={item.created_at}
+                url={item.url}
+                title={item.title}
+                description={item.description}
+                imageSource={item.image_source}
+                folderData={folderData}
+                editable={true}
+              />
+            ))
+          ))}
+      </>
+    );
+  }
+
+  if (shareLinkData) {
+    const { data, loading, error } = shareLinkData;
+
+    return (
+      <>
+        {!loading &&
+          error === null &&
+          (data?.length === 0 ? (
+            <EmptyDiv>
+              <EmptySpan>저장된 링크가 없습니다.</EmptySpan>
+            </EmptyDiv>
+          ) : (
+            data?.map((item) => (
+              <Item
+                key={item.id}
+                createdAt={item.created_at}
+                url={item.url}
+                title={item.title}
+                description={item.description}
+                imageSource={item.image_source}
+                editable={false}
+              />
+            ))
+          ))}
+      </>
+    );
+  }
 }
 
 export default Items;
diff --git a/components/folder/LinkAdder.tsx b/components/folder/LinkAdder.tsx
@@ -2,7 +2,7 @@ import { styled } from 'styled-components';
 import linkIcon from '@/assets/images/icons/link.png';
 import { SyntheticEvent, useState } from 'react';
 import AddLinkModal from './AddLinkModal';
-import { FetchData, FolderData } from '@/common/api';
+import { FetchData, FoldersData } from '@/common/api';
 import Image from 'next/image';
 
 const StyledDiv = styled.div`
@@ -49,7 +49,7 @@ const AddButton = styled.button`
 const ModalDiv = styled.div``;
 
 interface LinkAppenderProps {
-  folderData: FetchData<FolderData[]>;
+  folderData: FetchData<FoldersData>;
 }
 
 function LinkAppender({ folderData }: LinkAppenderProps) {