Skip to content

Commit 0830fc7

Browse files
author
ozen0718
committed
CSS 변경
1 parent 59b5d65 commit 0830fc7

File tree

4 files changed

+70
-47
lines changed

4 files changed

+70
-47
lines changed

‎src/components/modalInput/ToDoModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import TextButton from "@/components/modalInput/TextButton";
88

99
interface TaskModalProps {
1010
onClose: () => void;
11+
isOpen: boolean;
1112
teamId: string;
1213
dashboardId: number;
1314
columnId: number;
@@ -17,7 +18,6 @@ interface TaskModalProps {
1718
nickname: string;
1819
}[];
1920
}
20-
2121
interface TaskData {
2222
assignee: string; // nickname
2323
title: string;

‎src/components/sideMenu/SideMenu.tsx‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,9 @@ export default function SideMenu({
5757
: "w-[67px] sm:w-[67px] md:w-[160px] lg:w-[300px]"
5858
)}
5959
>
60-
{/* 로고 + 접기버튼 */}
61-
<div className="mb-14 px-3 sm:mb-9 sm:px-0 relative">
62-
<Link
63-
href="/mydashboard"
64-
className={clsx(
65-
"flex",
66-
isCollapsed ? "justify-center" : "justify-start"
67-
)}
68-
>
60+
{/* 로고 영역 */}
61+
<div className="flex flex-col items-center md:items-start mb-8 px-1">
62+
<Link href="/mydashboard" className="mb-2">
6963
<Image
7064
src="/svgs/logo_taskify.svg"
7165
alt="Taskify Large Logo"
@@ -86,16 +80,17 @@ export default function SideMenu({
8680
/>
8781
</Link>
8882

89-
{/* 접기/펼치기 버튼 (✅ md 이상에서만 보이게 수정) */}
83+
{/* 접기/펼치기 버튼 */}
9084
<div
9185
className={clsx(
92-
"md:flex hidden",
93-
isCollapsed ? "mt-3 justify-center" : "absolute right-0 top-0"
86+
"md:flex",
87+
isCollapsed ? "justify-center" : "justify-end",
88+
"w-full"
9489
)}
9590
>
9691
<button
9792
onClick={() => setIsCollapsed(!isCollapsed)}
98-
className="w-6 h-6 bg-gray-100 hover:bg-gray-200 border rounded flex items-center justify-center"
93+
className="w-6 h-6 hover:bg-gray-200 rounded flex items-center justify-center ml-0 border-none"
9994
title={isCollapsed ? "펼치기" : "접기"}
10095
>
10196
{isCollapsed ? (
@@ -133,6 +128,7 @@ export default function SideMenu({
133128

134129
<nav className="flex flex-col flex-1 justify-between">
135130
<div>
131+
{/* 대시보드 타이틀 + 추가 버튼 */}
136132
{!isCollapsed && (
137133
<div className="mb-4 flex items-center justify-between px-3 md:px-2">
138134
<span className="hidden md:block font-12sb text-[var(--color-black)]">
@@ -150,6 +146,21 @@ export default function SideMenu({
150146
</div>
151147
)}
152148

149+
{/* ✅ 접힌 상태에서 아이콘만 있는 추가 버튼 로고 아래로 */}
150+
{isCollapsed && (
151+
<div className="flex justify-center mb-4">
152+
<button onClick={() => setIsModalOpen(true)}>
153+
<Image
154+
src="/svgs/icon-add-box.svg"
155+
width={20}
156+
height={20}
157+
alt="추가 아이콘"
158+
unoptimized
159+
/>
160+
</button>
161+
</div>
162+
)}
163+
153164
{/* 대시보드 목록 */}
154165
<ul
155166
className={clsx(
@@ -220,6 +231,8 @@ export default function SideMenu({
220231
/>
221232
</div>
222233
)}
234+
235+
{/* 모달 */}
223236
{isModalOpen && (
224237
<NewDashboard
225238
onClose={() => setIsModalOpen(false)}

‎src/components/table/invited/InvitedDashBoard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ function InvitedList({
100100
};
101101

102102
return (
103-
<div className="relative bg-white w-[260px] sm:w-[504px] lg:w-[1022px] h-[770px] sm:h-[592px] lg:h-[620px] mx-auto mt-[40px]">
103+
<div className="relative bg-white w-[260px] sm:w-[504px] lg:w-[1050px] h-[770px] sm:h-[592px] lg:h-[620px] mx-auto mt-[40px]">
104104
<ToastContainer position="top-center" autoClose={2000} />
105105
{filteredData.length > 0 && (
106106
<div className="hidden sm:flex p-6 w-full h-[26px] justify-start items-center pl-[43px] pr-[76px] md:gap-x-[130px] lg:gap-x-[280px]">
@@ -116,7 +116,7 @@ function InvitedList({
116116
? filteredData.map((invite, index) => (
117117
<div
118118
key={index}
119-
className="pb-5 mb-[20px] w-[260px] sm:w-[504px] lg:w-[1022px] h-auto sm:h-[50px] sm:grid sm:grid-cols-[1fr_1fr_1fr] sm:items-center flex flex-col gap-10 border-b border-[var(--color-gray4)]"
119+
className="pb-5 mb-[20px] w-[260px] sm:w-[504px] lg:w-[1050px] h-auto sm:h-[50px] sm:grid sm:grid-cols-[1fr_1fr_1fr] sm:items-center flex flex-col gap-10 border-b border-[var(--color-gray4)]"
120120
>
121121
{/* 모바일 레이아웃 */}
122122
<div className="flex flex-col sm:hidden">
@@ -271,7 +271,7 @@ export default function InvitedDashBoard() {
271271
{invitationArray.length === 0 ? (
272272
<EmptyInvitations />
273273
) : (
274-
<div className="relative bg-white rounded-lg shadow-md w-[260px] sm:w-[504px] lg:w-[1022px] h-[770px] sm:h-[592px] lg:h-[620px] max-w-none">
274+
<div className="relative bg-white rounded-lg shadow-md w-[260px] sm:w-[504px] lg:w-[1050px] h-[770px] sm:h-[592px] lg:h-[620px] max-w-none">
275275
<div className="p-6 relative w-full h-[104px]">
276276
<div className="flex justify-between items-center mb-[32px]">
277277
<p className="text-xl sm:text-2xl font-bold">초대받은 대시보드</p>

‎src/pages/mydashboard.tsx‎

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,11 @@ export default function MyDashboardPage() {
124124

125125
return (
126126
<div className="flex h-screen overflow-hidden">
127-
<SideMenu teamId={teamId} dashboardList={dashboardList} />
127+
<SideMenu
128+
teamId={teamId}
129+
dashboardList={dashboardList}
130+
onCreateDashboard={() => fetchDashboards()}
131+
/>
128132

129133
<div className="flex flex-col flex-1 overflow-hidden">
130134
<HeaderDashboard
@@ -134,36 +138,44 @@ export default function MyDashboardPage() {
134138
/>
135139

136140
<main className="flex-1 overflow-auto px-[25px] pt-[40px] pb-10 bg-[#f9f9f9] space-y-10">
137-
<section className="w-full max-w-[1100px] mx-auto">
138-
{/* 카드 영역 */}
139-
<div className="flex flex-wrap gap-[16px] justify-center">
140-
{currentItems}
141+
{/* 카드 영역 */}
142+
<section className="w-full px-[25px] max-w-[1100px] px-4">
143+
<div className="flex flex-wrap gap-[16px] justify-start">
144+
{currentItems.map((item, index) => (
145+
<div
146+
key={index}
147+
className="w-full sm:w-[calc(50%-8px)] lg:w-[calc(33.333%-10.66px)]"
148+
>
149+
{item}
150+
</div>
151+
))}
141152
</div>
142-
143-
{/* 페이지네이션 */}
144-
{totalPages > 1 && (
145-
<div className="flex justify-center items-center pt-6">
146-
<PaginationButton
147-
direction="left"
148-
disabled={currentPage === 1}
149-
onClick={handlePrevPage}
150-
/>
151-
<span className="font-14r text-black3 px-[8px] whitespace-nowrap">
152-
{`${totalPages} 페이지 중 ${currentPage}`}
153-
</span>
154-
<PaginationButton
155-
direction="right"
156-
disabled={currentPage === totalPages}
157-
onClick={handleNextPage}
158-
/>
159-
</div>
160-
)}
161153
</section>
162154

155+
{totalPages > 1 && (
156+
<div className="w-full max-w-[1100px] flex justify-center items-center ">
157+
<PaginationButton
158+
direction="left"
159+
disabled={currentPage === 1}
160+
onClick={handlePrevPage}
161+
/>
162+
<span className="font-14r text-black3 px-[8px] whitespace-nowrap">
163+
{`${totalPages} 페이지 중 ${currentPage}`}
164+
</span>
165+
<PaginationButton
166+
direction="right"
167+
disabled={currentPage === totalPages}
168+
onClick={handleNextPage}
169+
/>
170+
</div>
171+
)}
172+
163173
{/* 초대받은 대시보드 */}
164-
<div className="mt-[74px] flex justify-center">
165-
<InvitedDashBoard />
166-
</div>
174+
<section className="w-full px-[25px]">
175+
<div className="mt-[74px]">
176+
<InvitedDashBoard />
177+
</div>
178+
</section>
167179
</main>
168180
</div>
169181

@@ -200,9 +212,7 @@ export default function MyDashboardPage() {
200212
취소
201213
</CustomBtn>
202214
<CustomBtn
203-
onClick={
204-
selectedCreatedByMe ? () => handleDelete() : () => handleLeave()
205-
}
215+
onClick={selectedCreatedByMe ? handleDelete : handleLeave}
206216
className="cursor-pointer bg-[var(--primary)] text-white px-3 py-1 rounded-md w-[84px] h-[32px]"
207217
>
208218
확인

0 commit comments

Comments
 (0)