Skip to content

Commit

Permalink
Merge pull request #441 from HMRyu/part3-유호민-week14
Browse files Browse the repository at this point in the history
[유호민] Week14
  • Loading branch information
o-seung-yeon authored May 22, 2024
2 parents 7e58fa2 + 84141cf commit 984ebe3
Show file tree
Hide file tree
Showing 38 changed files with 968 additions and 234 deletions.
25 changes: 25 additions & 0 deletions component/AddFolderModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import Modal from "./Modal";

export default function AddFolderModal({
modalStates,
closeModal,
}: {
modalStates: any;
closeModal: any;
}) {
return (
<Modal
isOpen={modalStates.addModal}
onClose={() => closeModal("addModal")}
title="폴더 추가"
>
<input
placeholder="내용 입력"
className="px-4 py-5 rounded-md border border-[#6d6afe] bg-[#fff] w-full"
/>
<button className="flex m-auto justify-center w-full px-5 py-4 mt-4 rounded-md text-[#f5f5f5] text-[16px] bg-gradient-to-r from-[#6D6AFE] to-[#6AE3FE]">
추가하기
</button>
</Modal>
);
}
7 changes: 6 additions & 1 deletion component/AddLinkInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ export default function AddLinkInput() {
<div className="relative flex justify-center pt-[60px] pb-[90px] px-[24px] lg:px-[300px] bg-[#F0F6FF]">
<input
placeholder="링크를 추가해 보세요."
className="w-full px-5 py-4 border border-[#6D6AFE] rounded-md"
className="w-full px-5 py-4 border border-[#6D6AFE] rounded-md indent-5"
/>
<img
src="/images/link.svg"
alt="link"
className="absolute left-10 md:left-10 lg:left-[310px] top-20 cursor-pointer"
/>
<button className="absolute right-[30px] top-[70px] lg:right-[310px] lg:top-[70px] px-4 py-2 w-[100px] bg-gradient-to-r from-[#6D6AFE] to-[#6AE3FE] rounded-md text-[#F5F5F5] text-[14px]">
추가하기
Expand Down
31 changes: 31 additions & 0 deletions component/DeleteFolderModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import Modal from "./Modal";

export default function DeleteFolderModal({
openModal,
closeModal,
modalStates,
}: {
openModal: any;
closeModal: any;
modalStates: any;
}) {
return (
<>
<img
src="/images/delete.svg"
alt="delete"
className="cursor-pointer"
onClick={() => openModal("deleteModal")}
/>
<Modal
isOpen={modalStates.deleteModal}
onClose={() => closeModal("deleteModal")}
title="폴더 삭제"
>
<button className="flex m-auto justify-center w-full px-5 py-4 mt-4 rounded-md text-[#f5f5f5] text-[16px] bg-[#FF5B56]">
삭제하기
</button>
</Modal>
</>
);
}
35 changes: 35 additions & 0 deletions component/EditFolderModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import Modal from "./Modal";

export default function EditFolderModal({
openModal,
closeModal,
modalStates,
}: {
openModal: any;
closeModal: any;
modalStates: any;
}) {
return (
<>
<img
src="/images/pen.svg"
alt="pen"
className="cursor-pointer"
onClick={() => openModal("editModal")}
/>
<Modal
isOpen={modalStates.editModal}
onClose={() => closeModal("editModal")}
title="폴더 이름 변경"
>
<input
placeholder="내용 입력"
className="px-4 py-5 rounded-md border border-[#6d6afe] bg-[#fff] w-full"
/>
<button className="flex m-auto justify-center w-full px-5 py-4 mt-4 rounded-md text-[#f5f5f5] text-[16px] bg-gradient-to-r from-[#6D6AFE] to-[#6AE3FE]">
변경하기
</button>
</Modal>
</>
);
}
69 changes: 69 additions & 0 deletions component/FolderButtons.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import AddFolderModal from "./AddFolderModal";

interface Folder {
id: number;
created_at: Date;
name: string;
user_id: number;
favorite?: boolean;
}

export default function FolderButtons({
clickedButton,
handleButtonClick,
handleAllButtonClick,
folders,
openModal,
closeModal,
modalStates,
}: {
clickedButton: any;
handleButtonClick: any;
handleAllButtonClick: any;
folders: any;
openModal: any;
closeModal: any;
modalStates: any;
}) {
return (
<div className="flex items-center justify-between mt-[40px] px-[32px] xl:px-[200px]">
<div>
<button
className={`px-3 py-2 mr-2 border rounded-md ${
clickedButton === 0
? "bg-blue-500 text-white"
: "border-[#6D6AFE] text-black"
}`}
onClick={handleAllButtonClick}
>
전체
</button>
{folders &&
folders.data.map((folder: Folder) => {
return (
<button
key={folder.id}
className={`px-3 py-2 mr-2 border rounded-md ${
folder.id === clickedButton
? "bg-blue-500 text-white"
: "border-[#6D6AFE] text-black"
}`}
onClick={() => {
handleButtonClick(folder.id);
}}
>
{folder.name}
</button>
);
})}
</div>
<div
className="text-[#6D6AFE] cursor-pointer"
onClick={() => openModal("addModal")}
>
폴더 추가 +
</div>
<AddFolderModal modalStates={modalStates} closeModal={closeModal} />
</div>
);
}
142 changes: 19 additions & 123 deletions component/FolderMain.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import useUserFolders from "@/hooks/useUserFolders";
import { useEffect, useState } from "react";
import Modal from "./Modal";
import LinkCardListByFolderId from "./LinkCardListByFolderId";
import useSWR from "swr";
import { fetcher } from "@/lib/fetcher";
import axios from "axios";
import FolderButtons from "./FolderButtons";
import FolderTitlebar from "./FolderTitlebar";

interface UserData {
id: number;
Expand Down Expand Up @@ -42,6 +43,8 @@ export default function FolderMain({
}
const [title, setTitle] = useState<string>("전체");
const [clickedButton, setClickedButton] = useState<number | null>(0);
const [folderId, setFolderId] = useState<number>(0);
const [filteredLinks, setFilteredLinks] = useState<Link[]>([]);
const [modalStates, setModalStates] = useState<{
addModal: boolean;
shareModal: boolean;
Expand All @@ -57,9 +60,6 @@ export default function FolderMain({
addLinkModal: false,
deleteLinkModal: false,
});
const [folderId, setFolderId] = useState<number>(0);
const [filteredLinks, setFilteredLinks] = useState<Link[]>([]);
const [originalLinks, setOriginalLinks] = useState<Link[]>([]);

const { data: folders } = useUserFolders(user.id);
const { data: links } = useSWR(
Expand Down Expand Up @@ -121,125 +121,21 @@ export default function FolderMain({

return (
<>
<div className="flex items-center justify-between mt-[40px] px-[32px] xl:px-[200px]">
<div>
<button
className={`px-3 py-2 mr-2 border rounded-md ${
clickedButton === 0
? "bg-blue-500 text-white"
: "border-[#6D6AFE] text-black"
}`}
onClick={handleAllButtonClick}
>
전체
</button>
{folders &&
folders.data.map((folder: Folder) => {
return (
<button
key={folder.id}
className={`px-3 py-2 mr-2 border rounded-md ${
folder.id === clickedButton
? "bg-blue-500 text-white"
: "border-[#6D6AFE] text-black"
}`}
onClick={() => {
handleButtonClick(folder.id);
}}
>
{folder.name}
</button>
);
})}
</div>
<div
className="text-[#6D6AFE] cursor-pointer"
onClick={() => openModal("addModal")}
>
폴더 추가 +
</div>
<Modal
isOpen={modalStates.addModal}
onClose={() => closeModal("addModal")}
title="폴더 추가"
>
<input
placeholder="내용 입력"
className="px-4 py-5 rounded-md border border-[#6d6afe] bg-[#fff] w-full"
/>
<button className="flex m-auto justify-center w-full px-5 py-4 mt-4 rounded-md text-[#f5f5f5] text-[16px] bg-gradient-to-r from-[#6D6AFE] to-[#6AE3FE]">
추가하기
</button>
</Modal>
</div>
<div className="flex items-center justify-between mt-[40px] px-[32px] xl:px-[200px]">
<div className="text-[30px] font-bold">{title}</div>
<div className="flex space-x-2">
{title !== "전체" ? (
<>
<img
src="/images/share.svg"
alt="share"
className="cursor-pointer"
onClick={() => openModal("shareModal")}
/>
<Modal
isOpen={modalStates.shareModal}
onClose={() => closeModal("shareModal")}
title="폴더 공유"
>
<div className="flex justify-center gap-x-5">
<img
src="/images/kakao.svg"
alt="kakao"
className="bg-[#FEE500] p-4 rounded-full"
/>
<img
src="/images/facebook.svg"
alt="facebook"
className="text-white bg-[#1877F2] p-4 rounded-full"
/>
<img src="/images/link.svg" alt="link" className="p-4" />
</div>
</Modal>
<img
src="/images/pen.svg"
alt="pen"
className="cursor-pointer"
onClick={() => openModal("editModal")}
/>
<Modal
isOpen={modalStates.editModal}
onClose={() => closeModal("editModal")}
title="폴더 이름 변경"
>
<input
placeholder="내용 입력"
className="px-4 py-5 rounded-md border border-[#6d6afe] bg-[#fff] w-full"
/>
<button className="flex m-auto justify-center w-full px-5 py-4 mt-4 rounded-md text-[#f5f5f5] text-[16px] bg-gradient-to-r from-[#6D6AFE] to-[#6AE3FE]">
변경하기
</button>
</Modal>
<img
src="/images/delete.svg"
alt="delete"
className="cursor-pointer"
onClick={() => openModal("deleteModal")}
/>
<Modal
isOpen={modalStates.deleteModal}
onClose={() => closeModal("deleteModal")}
title="폴더 삭제"
>
<button className="flex m-auto justify-center w-full px-5 py-4 mt-4 rounded-md text-[#f5f5f5] text-[16px] bg-[#FF5B56]">
삭제하기
</button>
</Modal>
</>
) : null}
</div>
</div>
<FolderButtons
clickedButton={clickedButton}
handleButtonClick={handleButtonClick}
handleAllButtonClick={handleAllButtonClick}
folders={folders}
openModal={openModal}
closeModal={closeModal}
modalStates={modalStates}
/>
<FolderTitlebar
title={title}
openModal={openModal}
closeModal={closeModal}
modalStates={modalStates}
/>
<LinkCardListByFolderId
links={links?.data}
filteredLinks={filteredLinks}
Expand Down
42 changes: 42 additions & 0 deletions component/FolderTitlebar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import DeleteFolderModal from "./DeleteFolderModal";
import EditFolderModal from "./EditFolderModal";
import ShareFolderModal from "./ShareFolderModal";

export default function FolderTitlebar({
title,
openModal,
closeModal,
modalStates,
}: {
title: string;
openModal: any;
closeModal: any;
modalStates: any;
}) {
return (
<div className="flex items-center justify-between mt-[40px] px-[32px] xl:px-[200px]">
<div className="text-[30px] font-bold">{title}</div>
<div className="flex space-x-2">
{title !== "전체" ? (
<>
<ShareFolderModal
openModal={openModal}
closeModal={closeModal}
modalStates={modalStates}
/>
<EditFolderModal
openModal={openModal}
closeModal={closeModal}
modalStates={modalStates}
/>
<DeleteFolderModal
openModal={openModal}
closeModal={closeModal}
modalStates={modalStates}
/>
</>
) : null}
</div>
</div>
);
}
Loading

0 comments on commit 984ebe3

Please sign in to comment.