From f654510893b68be0f43b08671eab4e48b8723df8 Mon Sep 17 00:00:00 2001 From: Jisoo Han Date: Fri, 9 Feb 2024 03:28:55 +0900 Subject: [PATCH] =?UTF-8?q?feat:=ED=98=B8=EB=B2=84=20css=EC=B6=94=EA=B0=80?= =?UTF-8?q?(=EC=B9=B4=EB=93=9C,=20=EB=B2=84=ED=8A=BC),=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EB=93=9C=EB=B0=94=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Buttons/Button.tsx | 8 +- src/components/common/SideBar.tsx | 114 ++++++++++-------- src/components/common/SideBarPagination.tsx | 84 +++++++++++++ .../domains/dashboard/CardLayout.tsx | 2 +- .../domains/myDashBoard/DashboardButton.tsx | 2 +- .../domains/myDashBoard/InvitationList.tsx | 11 +- src/pages/index.tsx | 2 +- src/pages/mydashboard/index.tsx | 51 ++++---- tailwind.config.ts | 4 + 9 files changed, 193 insertions(+), 85 deletions(-) create mode 100644 src/components/common/SideBarPagination.tsx diff --git a/src/components/common/Buttons/Button.tsx b/src/components/common/Buttons/Button.tsx index fe0116a..3a59247 100644 --- a/src/components/common/Buttons/Button.tsx +++ b/src/components/common/Buttons/Button.tsx @@ -20,20 +20,20 @@ function Button({ type, color, className, onClick, children, variant, disabled = }; switch (color) { case 'violet': - combinedClassName += ' flex justify-center items-center rounded-md bg-violet-5 text-white '; + combinedClassName += ' hover:bg-indigo-400 flex justify-center items-center rounded-md bg-violet-5 text-white '; break; case 'white': combinedClassName += - ' border border-[gray-D] flex justify-center items-center rounded-md bg-white text-violet-5 '; + ' border border-[gray-D] hover:bg-gray-100 flex justify-center items-center rounded-md bg-white text-violet-5 '; break; case 'modalViolet': - combinedClassName += ` flex justify-center items-center rounded-[0.8rem] text-white ${disabled ? 'bg-gray-D' : 'bg-violet-5'}`; + combinedClassName += ` flex hover:bg-indigo-400 justify-center items-center rounded-[0.8rem] text-white ${disabled ? 'bg-gray-D' : 'bg-violet-5'}`; break; case 'modalWhite': combinedClassName += - ' border border-[gray-D] flex justify-center items-center rounded-[0.8rem] bg-white text-gray-7 '; + ' border border-[gray-D] hover:bg-gray-100 flex justify-center items-center rounded-[0.8rem] bg-white text-gray-7 '; break; case 'toggleColor': combinedClassName += ' flex justify-center items-center rounded-md text-white '; diff --git a/src/components/common/SideBar.tsx b/src/components/common/SideBar.tsx index 1f6d7c3..6714486 100644 --- a/src/components/common/SideBar.tsx +++ b/src/components/common/SideBar.tsx @@ -7,83 +7,97 @@ import clsx from 'clsx'; import Link from 'next/link'; import { useEffect, useState } from 'react'; import { DashboardData } from '@/constants/types'; -import { getDashboards, getDashboardsProps, postDashboard } from '@/lib/api'; +import { getDashboards } from '@/lib/api'; import AddNewDashBoard, { COLOR_PICK } from '../modal/AddNewDashBoard'; - +import SideBarPagination from './SideBarPagination'; interface SideBarProps { boardId?: number; } +interface PageNationInfo { + page: number; + totalCount: string; +} + export default function SideBar({ boardId }: SideBarProps) { // 대시보드 생성 모달 여닫음 관리 const [isMakeNewDashBoardModalOpen, setMakeNewDashBoardModalOpen] = useState(false); - + const [paginationInfo, setPaginationInfo] = useState({ + page: 1, + totalCount: '0', + }); const [dashBoardList, setDashBoardList] = useState(null); async function loadDashBoardList() { - const query: getDashboardsProps = { + const data = await getDashboards({ navigationMethod: 'pagination', cursorId: 0, - page: 1, - size: 10, - }; - const data = await getDashboards(query); + page: paginationInfo.page, + size: 5, + }); setDashBoardList(data.dashboards); + setPaginationInfo((prev) => ({ + ...prev, + totalCount: data.totalCount, + })); } useEffect(() => { loadDashBoardList(); - }, []); + }, [paginationInfo.page]); if (!dashBoardList) return; return ( <> -
- - 로고 - 폰트 로고 - -
- -
+
- {dashBoardList.map((dashBoardItem) => { - return ( - -
+ + 로고 + 폰트 로고 + +
+ +
+
+ {dashBoardList.map((dashBoardItem) => { + return ( +
-
- {dashBoardItem.title} -
- {dashBoardItem.createdByMe && ( - 내가 만든 대시보드에 붙는 왕관모양 아이콘 +
- )} -
- - ); - })} +
+ {dashBoardItem.title} +
+ {dashBoardItem.createdByMe && ( + 내가 만든 대시보드에 붙는 왕관모양 아이콘 + )} +
+ + ); + })} +
+
diff --git a/src/components/common/SideBarPagination.tsx b/src/components/common/SideBarPagination.tsx new file mode 100644 index 0000000..2c977a8 --- /dev/null +++ b/src/components/common/SideBarPagination.tsx @@ -0,0 +1,84 @@ +import Image from 'next/image'; +import arrowIcon from '@/../../public/assets/arrowIcon.svg'; + +export interface getDashboardsProps { + page: number; + cursorId: number; + size: number; + navigationMethod: 'infiniteScroll' | 'pagination'; +} + +interface PageNationProps { + page: number; + totalCount: string; +} + +function SideBarPagination({ + paginationInfo, + setPaginationInfo, +}: { + paginationInfo: PageNationProps; + setPaginationInfo: React.Dispatch>; +}) { + const handleHover = (e: React.MouseEvent) => { + e.currentTarget.style.filter = 'invert(0%)'; + }; + + const handleLeave = (e: React.MouseEvent) => { + e.currentTarget.style.filter = 'invert(100%)'; + }; + + const handlePreviousPage = () => { + if (paginationInfo.page > 1) { + setPaginationInfo((prevPaginationInfo: any) => ({ + ...prevPaginationInfo, + page: prevPaginationInfo.page - 1, + })); + } + }; + + const totalPages = Math.ceil(+paginationInfo.totalCount / 3); + const handleNextPage = () => { + if (paginationInfo.page < totalPages) { + setPaginationInfo((prevPaginationInfo: any) => ({ + ...prevPaginationInfo, + page: prevPaginationInfo.page + 1, + })); + } + }; + + return ( +
+
+ + +
+
+ ); +} + +export default SideBarPagination; diff --git a/src/components/domains/dashboard/CardLayout.tsx b/src/components/domains/dashboard/CardLayout.tsx index dacce05..a669a9a 100644 --- a/src/components/domains/dashboard/CardLayout.tsx +++ b/src/components/domains/dashboard/CardLayout.tsx @@ -6,7 +6,7 @@ interface CardLayoutProps { export default function CardLayout({ children }: CardLayoutProps) { return ( -
+
{children}
); diff --git a/src/components/domains/myDashBoard/DashboardButton.tsx b/src/components/domains/myDashBoard/DashboardButton.tsx index b5bdfee..8b34b02 100644 --- a/src/components/domains/myDashBoard/DashboardButton.tsx +++ b/src/components/domains/myDashBoard/DashboardButton.tsx @@ -22,7 +22,7 @@ const colorList: Record = { function DashboardButton({ color, title, createdByMe, dashboardId }: DashboardInfo) { return ( - diff --git a/src/pages/mydashboard/index.tsx b/src/pages/mydashboard/index.tsx index 04b2092..66fb5dc 100644 --- a/src/pages/mydashboard/index.tsx +++ b/src/pages/mydashboard/index.tsx @@ -39,36 +39,39 @@ export default function MyDashBoard() { loadUserInfo(); dashboardLoad(); }, [paginationPage, acceptedResponse]); - return ( <> -
-
-
- { - setAddDashBoardModalOpen(true); - }} - > - {dashBoardData?.dashboards.map((dashboard) => ( - - ))} +
+
+
+
+ { + setAddDashBoardModalOpen(true); + }} + > + {dashBoardData?.dashboards.map((dashboard) => ( + + ))} +
+ +
+
+
-
-
diff --git a/tailwind.config.ts b/tailwind.config.ts index 7661bed..952fe30 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -272,6 +272,10 @@ const config: Config = { NESTEDMODALLAYOUT: '4', NESTEDMODAL: '5', }, + scale: { + 103: '1.03', + 104: '1.04', + }, }, }, plugins: [],