Skip to content

Commit

Permalink
Merge pull request #1087 from gibeom0218/part4-박기범-week20
Browse files Browse the repository at this point in the history
[박기범] Week20
  • Loading branch information
kiJu2 authored May 15, 2024
2 parents ce0afc9 + abe6eee commit e6cc167
Show file tree
Hide file tree
Showing 20 changed files with 697 additions and 187 deletions.
6 changes: 5 additions & 1 deletion components/CardList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ import star_icon from "@/public/images/star.svg";
import kebab_icon from "@/public/images/kebab.svg";

interface CardListProps {
linkId: number;
url: string;
createdAt: string;
desc: string;
imgUrl: string;
}

export default function CardList({
linkId,
url,
createdAt,
desc,
Expand Down Expand Up @@ -74,7 +76,9 @@ export default function CardList({

return (
<div className={styles.CardList}>
{isDeleteLinkModal && <DeleteLink link={url} onClose={clickDeleteLink} />}
{isDeleteLinkModal && (
<DeleteLink linkId={linkId} link={url} onClose={clickDeleteLink} />
)}
{isAddModal && <Add linkUrl={url} onClose={clickAdd} />}
<img
id={styles.cardImg}
Expand Down
59 changes: 27 additions & 32 deletions components/CardSection.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,21 @@
import React from "react";
import { useEffect, useState } from "react";
import { getFolder } from "@/pages/api/api";
import { useQuery } from "@tanstack/react-query";
import CardList from "@/components/CardList";
import SearchBar from "@/components/SearchBar";
import styles from "@/styles/CardSection.module.css";

interface CardListType {
id: number;
createdAt: string;
created_at: string;
url: string;
description: string;
imageSource: string;
image_source: string;
}

export default function CardSection() {
const [cardList, setCardList] = useState<CardListType[]>([]);

useEffect(() => {
async function getProfileFolder() {
try {
const {
folder: { links },
} = await getFolder();
setCardList(links);
} catch (error) {
console.error(error);
}
}

getProfileFolder();
}, []);
export default function CardSection({ id }: any) {
const cardList = useQuery({
queryKey: ["individualList", Number(id)],
});

const dummyFunc = () => {};

Expand All @@ -38,17 +24,26 @@ export default function CardSection() {
<div className={styles.cardFrame}>
<SearchBar onInputChange={dummyFunc} />
<div className={styles.card_list}>
{cardList.map(({ id, createdAt, url, description, imageSource }) => {
return (
<CardList
key={id}
url={url}
createdAt={createdAt}
desc={description}
imgUrl={imageSource}
/>
);
})}
{Array.isArray(cardList.data) &&
cardList.data.map(
({
id,
created_at,
url,
description,
image_source,
}: CardListType) => {
return (
<CardList
key={id}
url={url}
createdAt={created_at}
desc={description}
imgUrl={image_source}
/>
);
}
)}
</div>
</div>
</div>
Expand Down
51 changes: 27 additions & 24 deletions components/FolderBar.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,38 @@
import React from "react";
import { useEffect, useState } from "react";
import { getFolder } from "@/pages/api/api";
import { useQuery } from "@tanstack/react-query";
import { getFolder, getFolderUser } from "@/pages/api/api";
import styles from "@/styles/FolderBar.module.css";

export default function FolderBar() {
const [folderName, setFolderName] = useState<string>("");
const [userName, setUserName] = useState<string>("");
const [profileImage, setProfileImage] = useState<string>("");
export default function FolderBar({ id }: any) {
//폴더 이름을 가져오기 위한 쿼리
const folderInfo = useQuery({
queryKey: ["folderInfo"],
queryFn: () => getFolder(id),
staleTime: 0,
enabled: id !== undefined,
});

useEffect(() => {
async function getProFileFolder() {
try {
const {
folder: { name, owner },
} = await getFolder();
setFolderName(name);
setUserName(owner.name);
setProfileImage(owner.profileImageSource);
} catch (error) {
console.error(error);
}
}
//폴더 소유자를 가져오기 위한 쿼리
const folderOwner = useQuery({
queryKey: ["folderOwner"],
queryFn: () => getFolderUser(folderInfo.data[0].user_id),
enabled: !!folderInfo.data,
});

getProFileFolder();
}, []);
return (
<div className={styles.FolderBar}>
<div className={styles.user}>
<img id={styles.folderImg} src={profileImage} alt="폴더 이미지"></img>
<span id={styles.userName}>@{userName}</span>
<span id={styles.folderName}>{folderName}</span>
<img
id={styles.folderImg}
src={folderOwner.data && folderOwner.data[0]?.image_source}
alt="폴더 이미지"
></img>
<span id={styles.userName}>
@{folderOwner.data && folderOwner.data[0]?.name}
</span>
<span id={styles.folderName}>
{folderInfo.data && folderInfo.data[0]?.name}
</span>
</div>
</div>
);
Expand Down
148 changes: 98 additions & 50 deletions components/FolderSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import Image from "next/image";
import { useEffect, useState } from "react";
import { getFolderList, getAllLinks, getFolderLink } from "@/pages/api/api";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import CardList from "@/components/CardList";
import SearchBar from "@/components/SearchBar";
import addImg from "@/public/images/add.svg";
Expand All @@ -28,69 +29,99 @@ interface CardListType {
}

export default function FolderSection() {
const [folderName, setFolderName] = useState("폴더를 선택해주세요");
const [folderList, setFolderList] = useState<FolderListType[]>([]);
const [folderName, setFolderName] = useState<string | undefined>(
"폴더를 선택해주세요"
);
const [folderId, setFolderId] = useState<number | null>(null);
//카드리스트에 관한
const [cardList, setCardList] = useState<CardListType[]>([]);
const [filteredCardList, setFilteredCardList] = useState<CardListType[]>([]);
//모달에 관한
const [isEditNameModal, setIsEditNameModal] = useState<boolean>(false);
const [isAddFolderModal, setIsAddFolderModal] = useState<boolean>(false);
const [isShareModal, setIsShareModal] = useState<boolean>(false);
const [isDeleteFolderModal, setIsDeleteFolderModal] =
useState<boolean>(false);
//선택한 id 버튼 활성화를 위해
const [selectedFolderId, setSelectedFolderId] = useState<number | string>();
//선택한 id 개별 폴더 링크를 가져오기 위해
const [selectedId, setSelectedId] = useState<number>();
const [searchInput, setSearchInput] = useState<string>("");
const [filteredCardList, setFilteredCardList] = useState<CardListType[]>([]);

//전체 폴더 클릭

async function getAllList() {
try {
const { data } = await getAllLinks();
setCardList(data);
setFilteredCardList(data);
setFolderName("전체");
console.log(folderList);
} catch (error) {
console.error(error);
}
}
const queryClient = useQueryClient();

async function folderAllNameClick(all: string) {
setFolderName(all);
await getAllList();
}
//전체 폴더 클릭
//현재 폴더 이름을 최신으로 가져오기 위한
const currentFolderName = useQuery<string>({
queryKey: ["folderName"],
});

//개별 폴더 클릭
//전체 폴더 가져오기
const allList = useQuery({
queryKey: ["allList"],
queryFn: async () => await getAllLinks(),
});

async function getList(id: number) {
try {
const { data } = await getFolderLink(id);
setCardList(data);
} catch (error) {
console.error(error);
}
//전체 폴더 클릭
async function folderAllNameClick() {
setFolderId(null);
queryClient.setQueryData(["folderId"], null);
queryClient.setQueryData(["folderName"], "전체");
}

async function folderNameClick(name: string, id: number) {
setFolderName(name);
await getList(id);
}
//개별 폴더 가져오기
const individualList = useQuery({
queryKey: ["individualList", selectedId],
queryFn: async () => {
if (selectedId) {
const data = await getFolderLink(selectedId);
return data;
} else {
return []; // 선택된 폴더가 없는 경우 빈 배열 반환
}
},
});

//개별 폴더 클릭

//폴더 버튼
async function folderNameClick(name: string, id: number) {
setFolderId(id);
queryClient.setQueryData(["folderId"], id);
queryClient.setQueryData(["folderName"], name);
}
//폴더이름을 클릭했을 때 즉각적으로 링크 데이터들이 바뀌도록
useEffect(() => {
async function getList() {
try {
const { data } = await getFolderList();
setFolderList(data);
} catch (error) {
console.error(error);
}
setFolderName(currentFolderName.data);
if (individualList.data && currentFolderName.data !== "전체") {
setCardList(individualList.data);
setFilteredCardList(individualList.data);
} else if (currentFolderName.data === "전체") {
setCardList(allList.data);
setFilteredCardList(allList.data);
}
}, [individualList.data, currentFolderName.data, allList.data]);

//폴더 버튼
const folderList = useQuery({
queryKey: ["folderList"],
queryFn: async () => await getFolderList(),
});

//링크 추가를 위해 현재 폴더 id를 쿼리에 저장
//처음 랜더링 될때 한번
useQuery({
queryKey: ["folderId"],
queryFn: async () => {
return folderId;
},
});

getList();
}, []);
//폴더 이름 변경을 위해 현재 폴더 이름을 쿼리에 저장
//처음 랜더링 될때 한번
useQuery({
queryKey: ["folderName"],
queryFn: async () => {
return folderName;
},
});

//이름변경 아이콘 클릭시 뜨는 모달창 함수
const clickEditName = () => {
Expand Down Expand Up @@ -137,32 +168,48 @@ export default function FolderSection() {
<div className={styles.FolderSection_Frame}>
<SearchBar onInputChange={handleInputChange} />
{isEditNameModal && (
<Edit folderName={folderName} onClose={clickEditName} />
<Edit
folderId={folderId}
folderName={folderName}
onClose={clickEditName}
/>
)}
{isAddFolderModal && <AddFolder onClose={clickAddFolder} />}
{isShareModal && <Share folderName={folderName} onClose={clickShare} />}
{isShareModal && (
<Share
folderId={folderId}
folderName={folderName}
onClose={clickShare}
/>
)}
{isDeleteFolderModal && (
<DeleteFolder folderName={folderName} onClose={clickDeleteFolder} />
<DeleteFolder
folderId={folderId}
folderName={folderName}
onClose={clickDeleteFolder}
/>
)}
<div className={styles.FolderBtnList}>
<div className={styles.FolderBtn}>
<button
className={selectedFolderId === "전체" ? styles.active : ""}
onClick={() => {
folderAllNameClick("전체");
folderAllNameClick();
setSelectedFolderId("전체");
setSelectedId(undefined);
}}
>
전체
</button>
{folderList.map(({ name, id }) => {
{folderList.data?.map(({ name, id }: FolderListType) => {
return (
<button
key={id}
className={selectedFolderId === id ? styles.active : ""}
onClick={() => {
folderNameClick(name, id);
setSelectedFolderId(id);
setSelectedId(id);
}}
>
{name}
Expand All @@ -180,7 +227,7 @@ export default function FolderSection() {
/>
</div>
</div>
{cardList[0] ? (
{cardList && cardList[0] ? (
<>
<div className={styles.FolderNameBar}>
<span>{folderName}</span>
Expand All @@ -207,6 +254,7 @@ export default function FolderSection() {
return (
<CardList
key={id}
linkId={id}
url={url}
createdAt={created_at}
desc={description}
Expand Down
Loading

0 comments on commit e6cc167

Please sign in to comment.