Skip to content

feat: #110/대시보드 수정 페이지 일부 기능 구현 #111

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

Merged
ARON-Y merged 10 commits into from
Mar 31, 2025
Merged

feat: #110/대시보드 수정 페이지 일부 기능 구현 #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4e67145
feat: Update sidebar to reflect dashboard creation and deletion in re…
hyeonjiroh Mar 31, 2025
2da0254
feat: Update dashboard title and color with real-time UI reflection
hyeonjiroh Mar 31, 2025
54a075a
feat: Navigate to dashboard detail page after editing
hyeonjiroh Mar 31, 2025
fcd265d
style: Complete responsive layout for InvitationSection
hyeonjiroh Mar 31, 2025
1543c01
feat: Add pagination to invitation list
hyeonjiroh Mar 31, 2025
abc3994
Merge branch 'main' of https://github.com/hyeonjiroh/Taskify into fea…
hyeonjiroh Mar 31, 2025
49e1c0b
feat: Implement invitation cancellation with API integration
hyeonjiroh Mar 31, 2025
35a3f8f
chore: Remove unused router instance
hyeonjiroh Mar 31, 2025
b57df7f
chore: Remove unused router instance
hyeonjiroh Mar 31, 2025
f00a54f
chore: Remove unused code
hyeonjiroh Mar 31, 2025
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
6 changes: 3 additions & 3 deletions src/app/(after-login)/dashboard/[dashboardid]/edit/_components/BackButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ export default function BackButton() {
>
<Image
src={BackIcon}
className="scale-x-[-1] w-[18px] h-[18px] tablet:w-[18px] tablet:h-[18px]"
className="scale-x-[-1] size-[18px] tablet:size-[18px]"
alt=""
/>
<div className="font-medium text-md text-gray-800 tablet:text-lg">
<p className="font-medium text-md text-gray-800 tablet:text-lg">
돌아가기
</div>
</p>
</button>
</div>
);
Expand Down
90 changes: 84 additions & 6 deletions src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,98 @@
"use client";

import { useEffect, useState } from "react";
import { useDashboardStore } from "@/lib/store/useDashboardStore";
import { DashboardDetail } from "@/lib/types";
import { fetchDashboard, putDashboard } from "@/lib/apis/dashboardsApi";
import ColorPalette, {
ColorCode,
} from "@/components/common/color-palette/ColorPalette";
import Input from "@/components/common/input/Input";
import Button from "@/components/common/button/Button";

export default function DashboardEditSection() {
export default function DashboardEditSection({
id,
token,
}: {
id: number;
token: string;
}) {
const [data, setData] = useState<DashboardDetail | null>(null);
const [dashboardName, setDashboardName] = useState("");
const [selectedColor, setSelectedColor] = useState<ColorCode | "">("");
const [isFormValid, setIsFormValid] = useState(false);
const setDashboardId = useDashboardStore((state) => state.setDashboardId);

useEffect(() => {
const getData = async () => {
const data = await fetchDashboard({
token,
id: String(id),
});
setData(data);
setDashboardName(data.title);
setSelectedColor(data.color);
};

getData();
}, []);

const onColorSelect = (color: ColorCode | "") => {
setSelectedColor(() => {
return color;
});
};

useEffect(() => {
const trimmedValue = dashboardName.trim();
const isValid = trimmedValue !== "" && selectedColor !== "";
setIsFormValid(isValid);
}, [dashboardName, selectedColor]);

const onDashboardNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setDashboardName(e.target.value);
};

const editDashboard = async () => {
await putDashboard({
token,
title: dashboardName,
color: selectedColor,
id,
});

window.location.replace(`/dashboard/${id}`);
Copy link
Collaborator

@ARON-Y ARON-Y Mar 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

window.location.replace() 대신 router.push() 사용하는 방법도 있대요!
window.location.replace()는 페이지를 새로고침하고 히스토리를 덮어쓰지만, router.push()는 SPA(Single Page Application) 내에서 URL을 변경하면서 페이지 전환을 관리하고 히스토리에 기록할 수 있는 차이점이 있다고 합니당

setDashboardId(String(id));
};

if (!data) return;

return (
<div className="w-full p-4 rounded-lg bg-white tablet:p-6">
<div className="flex flex-col gap-10 tablet:gap-6">
<div className="font-bold text-2lg text-gray-800 tablet:text-2xl">
대시보드 이름
<div className="font-bold text-xl text-gray-800 tablet:text-2xl">
{data.title}
</div>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-8 tablet:gap-10">
<div className="flex flex-col gap-4">
<Input label="대시보드 이름" />
<Input
label="대시보드 이름"
value={dashboardName}
placeholder="대시보드 이름을 입력하세요"
onChange={onDashboardNameChange}
/>
<ColorPalette
onSelect={onColorSelect}
selectedColor={selectedColor}
/>
</div>
<Button variant="purple">변경</Button>
<Button
variant="purple"
onClick={editDashboard}
disabled={!isFormValid}
>
변경
</Button>
</div>
</div>
</div>
Expand Down
37 changes: 37 additions & 0 deletions src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DeleteButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
"use client";

import { useRouter } from "next/navigation";
import { useDashboardStore } from "@/lib/store/useDashboardStore";
import { deleteDashboard } from "@/lib/apis/dashboardsApi";
import ROUTE from "@/lib/constants/route";

export default function DeleteButton({
id,
token,
}: {
id: number;
token: string;
}) {
const router = useRouter();
const setDashboardId = useDashboardStore((state) => state.setDashboardId);

const handleDeleteClick = async () => {
await deleteDashboard({
token,
id,
});

router.push(ROUTE.MYDASHBOARD);
setDashboardId(null);
};

return (
<button
type="button"
onClick={handleDeleteClick}
className="max-w-[320px] rounded-lg border border-gray-400 bg-gray-200 font-medium text-lg text-gray-800 tablet:h-[62px] tablet:text-2lg hover:bg-gray-300"
>
대시보드 삭제하기
</button>
);
}
39 changes: 39 additions & 0 deletions src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { Invitation } from "@/lib/types";
import { deleteInvitation } from "@/lib/apis/dashboardsApi";
import Button from "@/components/common/button/Button";

type InvitationCardProps = Invitation & {
token: string;
};

export default function InvitationCard({
id,
dashboard,
invitee,
token,
}: InvitationCardProps) {
const handleDeleteClick = async () => {
await deleteInvitation({
token,
dashboardId: dashboard.id,
invitationId: id,
});

window.location.reload();
};

return (
<div className="py-3 border-b border-gray-400 tablet:py-4">
<div className="flex justify-between items-center">
<div>{invitee.email}</div>
<Button
variant="whiteViolet"
onClick={handleDeleteClick}
className="w-[52px] max-h-[32px] tablet:w-[84px]"
>
취소
</Button>
</div>
</div>
);
}
81 changes: 64 additions & 17 deletions src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
"use client";

import { useEffect, useState } from "react";
import { Invitation } from "@/lib/types";
import { fetchInvitationList } from "@/lib/apis/dashboardsApi";
import Pagination from "@/components/common/pagenation-button/PagenationButton";
import InvitationCard from "./InvitationCard";
import InviteModalButton from "./InviteModalButton";

const PAGE_SIZE = 4;

export default function InvitationSection({
id,
Expand All @@ -9,27 +16,67 @@ export default function InvitationSection({
id: number;
token: string;
}) {
// id 값과 token 값 사용하고 나서는 지워도 되는 코드들
console.log(id);
console.log(token);
const [items, setItems] = useState<Invitation[]>([]);
const [page, setPage] = useState(1);
const [totalCount, setTotalCount] = useState(0);
const totalPage = Math.ceil(totalCount / PAGE_SIZE);

const handleLoad = async () => {
const { invitations, totalCount } = await fetchInvitationList({
token,
id,
page,
size: PAGE_SIZE,
});
setItems(invitations);
setTotalCount(totalCount);
};

useEffect(() => {
handleLoad();
}, [page]);

const handlePrevPage = () => {
if (page > 1) {
setPage((prev) => prev - 1);
}
};

const handleNextPage = () => {
if (page < totalPage) {
setPage((prev) => prev + 1);
}
};

return (
<div className="w-full p-4 rounded-lg bg-white tablet:p-6">
<div className="flex items-center justify-between">
<h2 className="font-bold text-2lg text-gray-800 tablet:text-2xl">
초대 내역
</h2>
<div className="flex items-center gap-2">
<span>1 페이지 중 1</span>
<Pagination
currentPage={1}
totalPages={1}
onPageChange={(page) => {
console.log(`구성원 페이지 ${page}로 변경`);
}}
/>
<div className="flex flex-col gap-[26px] w-full p-4 rounded-lg bg-white tablet:gap-[17px] tablet:p-6">
<div className="flex justify-between items-center tablet:items-start">
<div className="flex flex-col gap-[14px] tablet:gap-8">
<h2 className="font-bold text-xl text-gray-800 tablet:text-2xl">
초대 내역
</h2>
<p className="font-normal text-md text-gray-500">이메일</p>
</div>
<div className="flex flex-col items-end gap-3 tablet:flex-row tablet:items-center tablet:gap-4">
<div className="flex items-center gap-3 tablet:gap-4">
<p className="font-normal text-xs text-gray-800 tablet:text-md">
{totalPage} 페이지 중 {page}
</p>
<Pagination
currentPage={page}
totalPages={totalPage}
onPrevClick={handlePrevPage}
onNextClick={handleNextPage}
/>
</div>
<InviteModalButton />
</div>
</div>
<div>
{items.map((item) => (
<InvitationCard key={item.id} {...item} token={token} />
))}
</div>
</div>
);
}
28 changes: 28 additions & 0 deletions src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InviteModalButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { useModalStore } from "@/lib/store/useModalStore";
import Button from "@/components/common/button/Button";
import Image from "next/image";
import AddIcon from "../../../../../../../public/icon/add_box_icon.svg";

export default function InviteModalButton() {
const { openModal } = useModalStore();

return (
<Button
variant="purple"
radius="sm"
onClick={() => {
openModal("invite");
}}
className="flex gap-[6px] w-[86px] max-h-[26px] tablet:gap-2 tablet:w-[105px] tablet:max-h-[32px]"
>
<Image
src={AddIcon}
className="size-[14px] invert brightness-0 tablet:size-4"
alt=""
/>
<div className="font-medium text-xs leading-[18px] tablet:text-md">
초대하기
</div>
</Button>
);
}
11 changes: 1 addition & 10 deletions src/app/(after-login)/dashboard/[dashboardid]/edit/_components/MemberSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
"use client";

import Pagination from "@/components/common/pagenation-button/PagenationButton";

export default function MemberSection({
id,
token,
Expand All @@ -16,18 +14,11 @@ export default function MemberSection({
return (
<div className="w-full p-4 rounded-lg bg-white tablet:p-6">
<div className="flex items-center justify-between">
<h2 className="font-bold text-2lg text-gray-800 tablet:text-2xl">
<h2 className="font-bold text-xl text-gray-800 tablet:text-2xl">
구성원
</h2>
<div className="flex items-center gap-2">
<span>1 페이지 중 1</span>
<Pagination
currentPage={1}
totalPages={1}
onPageChange={(page) => {
console.log(`구성원 페이지 ${page}로 변경`);
}}
/>
</div>
</div>
</div>
Expand Down
10 changes: 6 additions & 4 deletions src/app/(after-login)/dashboard/[dashboardid]/edit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,24 @@ import BackButton from "./_components/BackButton";
import DashboardEditSection from "./_components/DashboardEditSection";
import InvitationSection from "./_components/InvitationSection";
import MemberSection from "./_components/MemberSection";
import DeleteButton from "./_components/DeleteButton";

export default function Page({ params }: { params: { dashboardid: string } }) {
const dashboardId = Number(params.dashboardid);
const accessToken = cookies().get("accessToken")?.value ?? "";

return (
<div>
<div className="flex flex-col px-3 py-4 tablet:px-5">
<div className="flex flex-col gap-[6px] tablet:gap-[29px]">
<div className="flex flex-col px-3 py-4 tablet:px-5">
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-[10px] tablet:gap-[19px] pc:gap-[34px]">
<BackButton />
<div className="flex flex-col gap-4 max-w-[620px]">
<DashboardEditSection />
<DashboardEditSection id={dashboardId} token={accessToken} />
<MemberSection id={dashboardId} token={accessToken} />
<InvitationSection id={dashboardId} token={accessToken} />
</div>
</div>
<DeleteButton id={dashboardId} token={accessToken} />
</div>
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions src/app/(after-login)/mypage/_components/BackButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ export default function BackButton() {
>
<Image
src={BackIcon}
className="scale-x-[-1] w-[18px] h-[18px] tablet:w-[18px] tablet:h-[18px]"
className="scale-x-[-1] size-[18px] tablet:size-[18px]"
alt=""
/>
<div className="font-medium text-md text-gray-800 tablet:text-lg">
<p className="font-medium text-md text-gray-800 tablet:text-lg">
돌아가기
</div>
</p>
</button>
</div>
);
Expand Down
Loading