Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat:호버 css추가(카드, 버튼), 사이드바 페이지네이션 추가(중복수정중 머지 노노!) #183

Closed
wants to merge 1 commit into from
Closed

feat:호버 css추가(카드, 버튼), 사이드바 페이지네이션 추가(중복수정중 머지 노노!) #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/common/Buttons/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ';
Expand Down
114 changes: 64 additions & 50 deletions src/components/common/SideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<boolean>(false);

const [paginationInfo, setPaginationInfo] = useState<PageNationInfo>({
page: 1,
totalCount: '0',
});
const [dashBoardList, setDashBoardList] = useState<DashboardData[] | null>(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 (
<>
<div className='h-full w-full border-r border-gray-D p-[1.2rem]'>
<Link href={'/'} className='mb-[4.4rem] mt-[0.8rem] flex justify-start p-[1.2rem]'>
<Image alt='로고' src={TaskifyImage} />
<Image alt='폰트 로고' className='sm:hidden' width={80} height={22} src={Taskify} />
</Link>
<div className=' p-[1.2rem]'>
<button
className='flex w-full flex-row items-center justify-between'
onClick={() => {
setMakeNewDashBoardModalOpen(true);
}}
>
<div className='text-12-700 text-gray-7 sm:hidden'>Dash Boards</div>
<Image alt='대시보드 추가 버튼 아이콘' width={20} height={20} src={PlusIcon} />
</button>
</div>
<div className='flex h-full w-full flex-col justify-between border-r border-gray-D px-[1.2rem] pb-[3rem] '>
<div>
{dashBoardList.map((dashBoardItem) => {
return (
<Link key={dashBoardItem.id} href={`/dashboard/${dashBoardItem.id}`}>
<div
className={clsx(
'flex items-center justify-start gap-[0.6rem] rounded-[0.4rem] p-[1.2rem] sm:pl-[1.7rem]',
boardId === dashBoardItem.id && 'bg-violet-F',
)}
>
<Link href={'/'} className='mb-[4.4rem] mt-[0.8rem] flex justify-start p-[1.2rem]'>
<Image alt='로고' src={TaskifyImage} />
<Image alt='폰트 로고' className='sm:hidden' width={80} height={22} src={Taskify} />
</Link>
<div className=' p-[1.2rem]'>
<button
className='flex w-full flex-row items-center justify-between'
onClick={() => {
setMakeNewDashBoardModalOpen(true);
}}
>
<div className='text-12-700 text-gray-7 sm:hidden'>Dash Boards</div>
<Image alt='대시보드 추가 버튼 아이콘' width={20} height={20} src={PlusIcon} />
</button>
</div>
<div>
{dashBoardList.map((dashBoardItem) => {
return (
<Link key={dashBoardItem.id} href={`/dashboard/${dashBoardItem.id}`}>
<div
className={clsx(COLOR_PICK[dashBoardItem.color], 'h-[0.8rem] w-[0.8rem] shrink-0 rounded-[50%]')}
/>
<div className='ml-[1rem] text-ellipsis break-all text-18-500 text-gray-7 md:overflow-hidden md:whitespace-nowrap sm:hidden sm:text-16-500'>
{dashBoardItem.title}
</div>
{dashBoardItem.createdByMe && (
<Image
alt='내가 만든 대시보드에 붙는 왕관모양 아이콘'
className='sm:hidden'
height={14}
src={RoyalCrownIcon}
className={clsx(
'flex items-center justify-start gap-[0.6rem] rounded-[0.4rem] p-[1.2rem] sm:pl-[1.7rem]',
boardId === dashBoardItem.id && 'bg-violet-F',
)}
>
<div
className={clsx(COLOR_PICK[dashBoardItem.color], 'h-[0.8rem] w-[0.8rem] shrink-0 rounded-[50%]')}
/>
)}
</div>
</Link>
);
})}
<div className='ml-[1rem] text-ellipsis break-all text-18-500 text-gray-7 md:overflow-hidden md:whitespace-nowrap sm:hidden sm:text-16-500'>
{dashBoardItem.title}
</div>
{dashBoardItem.createdByMe && (
<Image
alt='내가 만든 대시보드에 붙는 왕관모양 아이콘'
className='sm:hidden'
height={14}
src={RoyalCrownIcon}
/>
)}
</div>
</Link>
);
})}
</div>
</div>
<SideBarPagination paginationInfo={paginationInfo} setPaginationInfo={setPaginationInfo} />
</div>
<AddNewDashBoard isOpen={isMakeNewDashBoardModalOpen} setOpen={setMakeNewDashBoardModalOpen} />
</>
Expand Down
84 changes: 84 additions & 0 deletions src/components/common/SideBarPagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<React.SetStateAction<PageNationProps>>;
}) {
const handleHover = (e: React.MouseEvent<HTMLDivElement>) => {
e.currentTarget.style.filter = 'invert(0%)';
};

const handleLeave = (e: React.MouseEvent<HTMLDivElement>) => {
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 (
<div className='flex items-center justify-end gap-[1.6rem]'>
<div className='flex'>
<button
onClick={() => handlePreviousPage()}
className='flex h-[4rem] w-[4rem] items-center justify-center rounded-l-lg sm:h-[3.6rem] sm:w-[3.6rem]'
>
<Image
onMouseEnter={handleHover}
onMouseLeave={handleLeave}
style={{ filter: 'invert(100%)' }}
className='scale-x-[-1] transform'
src={arrowIcon}
alt='화살표 아이콘'
/>
</button>
<button
onClick={() => handleNextPage()}
className='flex h-[4rem] w-[4rem] scale-x-[-1] transform items-center justify-center rounded-l-lg sm:h-[3.6rem] sm:w-[3.6rem]'
>
<Image
onMouseEnter={handleHover}
onMouseLeave={handleLeave}
style={{ filter: 'invert(100%)' }}
className='scale-x-[-1] transform'
src={arrowIcon}
alt='화살표 아이콘'
/>
</button>
</div>
</div>
);
}

export default SideBarPagination;
2 changes: 1 addition & 1 deletion src/components/domains/dashboard/CardLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ interface CardLayoutProps {

export default function CardLayout({ children }: CardLayoutProps) {
return (
<div className='container rounded-[0.6rem] border-[0.1rem] border-gray-D bg-white px-[2rem] py-[2rem] sm:px-[1.2rem] sm:py-[1.2rem]'>
<div className='container rounded-[0.6rem] border-[0.1rem] border-gray-D bg-white px-[2rem] py-[2rem] hover:scale-104 sm:px-[1.2rem] sm:py-[1.2rem]'>
{children}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/domains/myDashBoard/DashboardButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const colorList: Record<string, string> = {
function DashboardButton({ color, title, createdByMe, dashboardId }: DashboardInfo) {
return (
<Link href={`dashboard/${dashboardId}`}>
<button className=' flex h-[7rem] w-[33.2rem] items-center justify-between gap-[1.2rem] overflow-hidden rounded-[0.8rem] border border-gray-D bg-white px-[2rem] py-[2.6rme] md:h-[6.8rem] md:w-[24.7rem] sm:h-[5.8rem] sm:w-[100%]'>
<button className=' flex h-[7rem] w-[33.2rem] transform items-center justify-between gap-[1.2rem] overflow-hidden rounded-[0.8rem] border border-gray-D bg-white px-[2rem] py-[2.6rme] hover:scale-103 md:h-[6.8rem] md:w-[24.7rem] sm:h-[5.8rem] sm:w-[100%]'>
<div className='flex items-center'>
<div className={clsx('mr-[1.6rem] h-[0.8rem] w-[0.8rem] rounded-full', `${colorList[color]}`)}></div>
<div className='flex w-[22rem] items-center gap-[0.8rem] md:w-[15rem] '>
Expand Down
11 changes: 7 additions & 4 deletions src/components/domains/myDashBoard/InvitationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function InvitationList({
// 검색
const searchInvitation = async (keyword: string) => {
try {
const data = await getInvitations({ size: 10, title: keyword });
const data = await getInvitations({ size: 100, title: keyword });
const searchInvitations = data.invitations;
// 중복 체크
const uniqueInvitations = Array.from(
Expand All @@ -75,6 +75,9 @@ function InvitationList({
removeDuplicateDashboard(searchInvitations).find((invitation) => invitation.dashboard.id === dashboardId),
);
setInvitationList(uniqueInvitations);
if (keyword == '') {
loadInitialInvitations();
}
} catch (error) {
console.error(error);
}
Expand Down Expand Up @@ -110,13 +113,13 @@ function InvitationList({
intersectionObserver.unobserve(lastElementRef.current);
}
};
}, [cursorId.current]);
}, [cursorId.current, searchKeyword]);

return (
<div>
<div className='flex h-[100%] w-[102.2rem] flex-col gap-[2rem] rounded-[0.8rem] bg-white px-[2.8rem] py-[3.2rem] md:w-[100%] sm:w-[100%] sm:px-[2.4rem] sm:py-[2.4rem]'>
<h2 className='text-24-700 sm:text-20-600'>초대받은 대시보드</h2>
{!loading && !searchLoading && invitationList.length === 0 && searchKeyword === '' ? (
{!loading && !searchLoading && invitationList?.length === 0 && searchKeyword === '' ? (
<NotInvited />
) : (
<div>
Expand Down Expand Up @@ -144,7 +147,7 @@ function InvitationList({
<li className='w-1/3'>수락여부</li>
</ul>
<ul className='flex flex-col sm:w-[100%]'>
{invitationList.map((invitation) => (
{invitationList?.map((invitation) => (
<Invitation onAcceptInvitation={onAcceptInvitation} invitation={invitation} key={invitation?.id} />
))}
</ul>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function Home() {
{isToken ? (
<button
onClick={() => router.push('/mydashboard')}
className='flex h-[5rem] w-[28rem] items-center justify-center rounded-[0.8rem] bg-violet-5 pb-[1.4rem] pt-[1.5rem] text-18-500 text-white md:text-16-500 sm:h-[4.2rem] sm:w-[23.52rem] sm:pb-[1.2rem] sm:pt-[1.3rem] sm:text-14-500'
className='flex h-[5rem] w-[28rem] items-center justify-center rounded-[0.8rem] bg-violet-5 pb-[1.4rem] pt-[1.5rem] text-18-500 text-white hover:scale-104 md:text-16-500 sm:h-[4.2rem] sm:w-[23.52rem] sm:pb-[1.2rem] sm:pt-[1.3rem] sm:text-14-500'
>
대시보드로 이동하기
</button>
Expand Down
51 changes: 27 additions & 24 deletions src/pages/mydashboard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,36 +39,39 @@ export default function MyDashBoard() {
loadUserInfo();
dashboardLoad();
}, [paginationPage, acceptedResponse]);

return (
<>
<PageLayout>
<DashboardHeader dashboardId={0} title={'내 대시보드'} />
<div className='sm:gap:-[2.4rem] flex h-[100vh] w-[100%] flex-col gap-[4rem] bg-gray-F px-[4rem] py-[4rem] sm:gap-[2.4rem]'>
<div className='flex w-[102.2rem] flex-col gap-[1.2rem] md:w-[50.4rem] sm:w-[100%]'>
<div className='col-span-2 grid grid-cols-3 gap-[1.2rem] md:col-span-3 md:grid-cols-2 md:gap-[1rem] sm:col-span-1 sm:grid-cols-1 sm:gap-[0.8rem]'>
<AddDashboardButton
onClick={() => {
setAddDashBoardModalOpen(true);
}}
></AddDashboardButton>
{dashBoardData?.dashboards.map((dashboard) => (
<DashboardButton
key={dashboard.id}
color={dashboard.color}
title={dashboard.title}
createdByMe={dashboard.createdByMe}
dashboardId={dashboard.id}
/>
))}
<div className='h-full bg-gray-F'>
<div className='sm:gap:-[2.4rem] flex h-fit w-[100%] flex-col gap-[4rem] bg-gray-F px-[4rem] py-[4rem] sm:gap-[2.4rem]'>
<div className='flex w-[102.2rem] flex-col gap-[1.2rem] md:w-[50.4rem] sm:w-[100%]'>
<div className='col-span-2 grid grid-cols-3 gap-[1.2rem] md:col-span-3 md:grid-cols-2 md:gap-[1rem] sm:col-span-1 sm:grid-cols-1 sm:gap-[0.8rem]'>
<AddDashboardButton
onClick={() => {
setAddDashBoardModalOpen(true);
}}
></AddDashboardButton>
{dashBoardData?.dashboards.map((dashboard) => (
<DashboardButton
key={dashboard.id}
color={dashboard.color}
title={dashboard.title}
createdByMe={dashboard.createdByMe}
dashboardId={dashboard.id}
/>
))}
</div>
<PaginationButton
totalCount={dashBoardData?.totalCount as string}
paginationPage={paginationPage}
setPaginationPage={setPaginationPage}
/>
</div>
<div className='h-[100%]'>
<InvitationList dashBoardData={dashBoardData} onAcceptInvitation={handleAcceptInvitation} />
</div>
<PaginationButton
totalCount={dashBoardData?.totalCount as string}
paginationPage={paginationPage}
setPaginationPage={setPaginationPage}
/>
</div>
<InvitationList dashBoardData={dashBoardData} onAcceptInvitation={handleAcceptInvitation} />
</div>
<AddNewDashBoard isOpen={addDashBoardModalOpen} setOpen={setAddDashBoardModalOpen} />
</PageLayout>
Expand Down
Loading