Skip to content

Commit 0fa4881

Browse files
gyoyeon-kimgyoyeon-kim
authored
Merge pull request #157 from part3-4team-Taskify/feature/Gnb
[Style] toast: 커스텀 토스트 디자인 / mydashboard: 피그마에 맞게 레이아웃, 정렬 수정 / edit: 아이템 정렬 수정, 여백 추가
2 parents 4a832a4 + d013afb commit 0fa4881

File tree

13 files changed

+121
-121
lines changed

13 files changed

+121
-121
lines changed

‎src/components/button/CardButton.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,11 @@ const CardButton: React.FC<CardButtonProps> = ({
6363
className={clsx(
6464
"flex justify-between items-center bg-white transition-all",
6565
"rounded-lg px-4 py-3 font-16sb",
66-
"border border-gray-300",
67-
fullWidth ? "w-full" : "w-[260px] md:w-[247px] lg:w-[332px]",
66+
"border border-[var(--color-gray3)]",
67+
"min-w-0 w-full max-w-[260px] md:max-w-[247px] lg:max-w-[332px]",
6868
"h-[58px] md:h-[68px] lg:h-[70px]",
6969
"mt-[10px] md:mt-[16px] lg:mt-[20px]",
7070
"text-lg md:text-2lg lg:text-2lg",
71-
"transition-all",
7271
isEditMode
7372
? "cursor-default hover:border-gray-300"
7473
: "cursor-pointer hover:border-purple-500",
@@ -83,7 +82,7 @@ const CardButton: React.FC<CardButtonProps> = ({
8382
</svg>
8483

8584
{/* 제목 */}
86-
<span className="font-16sb truncate max-w-[90px] sm:max-w-[100px] md:max-w-[120px] lg:max-w-[160px]">
85+
<span className="text-black3 font-16sb truncate max-w-[90px] sm:max-w-[100px] md:max-w-[120px] lg:max-w-[160px]">
8786
{title}
8887
</span>
8988

‎src/components/button/DashboardAddButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const DashboardAddButton: React.FC<DashboardAddButtonProps> = ({
1919
"flex justify-center items-center gap-[10px] bg-white transition-all",
2020
"rounded-lg px-4 py-3 font-16sb",
2121
"border border-gray-300 hover:border-purple-500",
22-
fullWidth ? "w-full" : "w-[260px] md:w-[247px] lg:w-[332px]", // 반응형 너비
22+
"min-w-0 w-full max-w-[260px] md:max-w-[247px] lg:max-w-[332px]", // 반응형 너비
2323
"h-[58px] md:h-[68px] lg:h-[70px]", // 반응형 높이
2424
"mt-[10px] md:mt-[16px] lg:mt-[20px]", // 여백
2525
"text-lg md:text-2lg lg:text-2lg",
@@ -28,7 +28,7 @@ const DashboardAddButton: React.FC<DashboardAddButtonProps> = ({
2828
)}
2929
{...props}
3030
>
31-
<span className="font-semibold">{children}</span>
31+
<span className="text-black3 font-semibold">{children}</span>
3232
<Image
3333
src="/svgs/add.svg"
3434
alt="Plus Icon"

‎src/components/common/CustomToastContainer.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ const CustomToastContainer = () => {
77
<ToastContainer
88
position="top-center"
99
autoClose={1700}
10-
hideProgressBar={true}
1110
closeButton={false}
1211
pauseOnHover={false}
1312
newestOnTop

‎src/components/modal/ChangeBebridge.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Input from "../input/Input";
44
import Image from "next/image";
55
import axiosInstance from "@/api/axiosInstance";
66
import { apiRoutes } from "@/api/apiRoutes";
7-
import { ToastContainer, toast } from "react-toastify";
7+
import { toast } from "react-toastify";
88
import "react-toastify/dist/ReactToastify.css";
99

1010
const ChangeBebridge = () => {
@@ -69,9 +69,8 @@ const ChangeBebridge = () => {
6969
};
7070

7171
return (
72-
<div className="lg:w-[620px] lg:h-[344px] sm:w-[544px] sm:h-[344px] w-[284px] h-[312px] bg-white sm:rounded-[16px] rounded-[8px] p-[24px] flex flex-col">
73-
<ToastContainer position="top-center" />
74-
<h2 className="text-[20px] sm:text-[24px] font-bold">
72+
<div className="lg:w-[620px] lg:h-[344px] sm:w-[544px] sm:h-[344px] w-[284px] h-[312px] bg-white sm:rounded-[16px] rounded-[8px] p-[24px] flex flex-col">
73+
<h2 className="text-sm sm:text-[24px] font-bold">
7574
{dashboardDetail.title}
7675
</h2>
7776
<Input

‎src/components/modal/DeleteModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
3333
onClose={() => setIsDeleteModalOpen(false)}
3434
className="flex items-center justify-center text-center"
3535
>
36-
<div className="flex flex-col items-center gap-1 text-center">
36+
<div className="flex flex-col items-center gap-1 text-center min-h-[60px]">
3737
<div className="text-[var(--primary)] font-16m">{selectedTitle}</div>
3838
<div className="text-black3 font-16m">
3939
{selectedCreatedByMe
@@ -73,7 +73,7 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
7373
onClose={() => setIsConfirmDeleteModalOpen(false)}
7474
className="flex items-center justify-center text-center"
7575
>
76-
<div className="flex flex-col items-center gap-1 text-center">
76+
<div className="flex flex-col items-center gap-1 text-center min-h-[60px]">
7777
<div className="text-red-400 font-16m">
7878
삭제 시 복구할 수 없습니다.
7979
</div>

‎src/components/modal/InviteDashboard.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Image from "next/image";
55
import axiosInstance from "@/api/axiosInstance";
66
import { apiRoutes } from "@/api/apiRoutes";
77
import { AxiosError } from "axios";
8-
import { ToastContainer, toast } from "react-toastify";
8+
import { toast } from "react-toastify";
99
import "react-toastify/dist/ReactToastify.css";
1010

1111
export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
@@ -95,7 +95,6 @@ export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
9595

9696
return (
9797
<div className="fixed inset-0 flex items-center justify-center bg-black/35 z-50">
98-
<ToastContainer position="top-center" autoClose={2000} />
9998
<div className="bg-white p-6 rounded-lg shadow-lg w-[327px] sm:w-[568px] sm:h-[279px]">
10099
<div className="flex justify-between items-center">
101100
<h2 className="text-sm sm:text-[24px] font-bold">초대하기</h2>

‎src/components/table/InviteRecords.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import InviteDashboard from "../modal/InviteDashboard";
44
import { apiRoutes } from "@/api/apiRoutes";
55
import axiosInstance from "@/api/axiosInstance";
66
import { AxiosError } from "axios";
7-
import { ToastContainer, toast } from "react-toastify";
8-
import "react-toastify/dist/ReactToastify.css";
7+
import { toast } from "react-toastify";
98

109
const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
1110
const [inviteList, setInviteList] = useState<
@@ -101,16 +100,15 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
101100
};
102101

103102
return (
104-
<div className="relative bg-white p-4 rounded-lg lg:w-[620px] lg:h-[477px] w-[284px] h-[406px] sm:w-[544px] sm:h-[477px]">
105-
<ToastContainer position="top-center" autoClose={2000} />
103+
<div className="lg:w-[620px] lg:h-[404px] w-[284px] h-[337px] sm:w-[544px] sm:h-[404px] relative p-6 rounded-lg bg-white">
106104
<div className="flex justify-between items-start sm:items-center">
107105
{/* 제목 */}
108106
<p className="md:text-[24px] text-[20px] text-xl font-bold">
109107
초대 내역
110108
</p>
111109

112110
{/* 페이지네이션 + 초대하기 버튼 컨테이너 */}
113-
<div className="flex flex-col sm:flex-row items-end sm:items-center gap-2">
111+
<div className="flex flex-col sm:flex-row items-end sm:items-center gap-4">
114112
{/* 페이지네이션 */}
115113
<Pagination
116114
currentPage={currentPage}
@@ -122,7 +120,7 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
122120
{/* 초대하기 버튼 (모바일에서 페이지네이션 아래로 이동) */}
123121
<button
124122
onClick={() => setIsModalOpen(true)}
125-
className="cursor-pointer sm:text-[14px] text-[12px] sm:w-[105px] w-[86px] sm:h-[32px] h-[26px] rounded-[4px] bg-[#5534DA] text-white flex items-center justify-center gap-2 lg:mr-3 "
123+
className="cursor-pointer text-[12px] sm:text-[14px] sm:w-[105px] w-[86px] sm:h-[32px] h-[26px] rounded-[4px] bg-[#5534DA] text-white flex items-center justify-center gap-2"
126124
>
127125
<img src="/svgs/add_white_box.svg" alt="icon" className="w-4 h-4" />
128126
초대하기
@@ -151,7 +149,7 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
151149
</div>
152150
<button
153151
onClick={() => handleCancel(invite.id)}
154-
className="cursor-pointer font-medium sm:text-sm text-xs h-[32px] sm:h-[32px] w-[52px] sm:w-[84px] md:w-[84px] border border-gray-300 text-indigo-600 px-2 py-1 rounded-md hover:bg-gray-100 lg:mr-3"
152+
className="text-12m cursor-pointer sm:font-sm h-[32px] sm:h-[32px] w-[52px] sm:w-[84px] md:w-[84px] border border-[var(--color-gray3)] text-[var(--primary)] px-2 py-1 rounded-md hover:bg-gray-100"
155153
>
156154
취소
157155
</button>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
function EmptyInvitations() {
22
return (
3-
<div className="relative sm:w-[960px] w-[260px] sm:h-[390px] h:[327px] rounded-[16px] sm:p-[24px_40px_120px_40px] p-[24px_20px_80px_20px] bg-white">
3+
<div className="relative w-[260px] sm:w-[504px] lg:w-[1022px] sm:h-[390px] h:[327px] rounded-[16px] sm:p-[24px_40px_120px_40px] p-[24px_20px_80px_20px] bg-white">
44
<div className="flex justify-between ">
55
<p className="sm:text-2xl text-sm font-bold mb-4 ">초대받은 대시보드</p>
66
</div>

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

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { useState, useEffect, useRef, ChangeEvent } from "react";
2-
import Image from "next/image";
32
import NoResultDashBoard from "./NoResultDashBoard";
43
import EmptyInvitations from "./EmptyInvitations";
54
import { apiRoutes } from "@/api/apiRoutes";
65
import axiosInstance from "@/api/axiosInstance";
76
import { Invite } from "@/types/invite";
87
import useUserStore from "@/store/useUserStore";
9-
import { ToastContainer, toast } from "react-toastify";
10-
import "react-toastify/dist/ReactToastify.css";
8+
import { toast } from "react-toastify";
9+
import { Search } from "lucide-react";
1110

1211
const ITEMS_PER_PAGE = 6; // 한 번에 보여줄 개수
1312

@@ -96,14 +95,13 @@ function InvitedList({
9695
};
9796

9897
return (
99-
<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]">
100-
<ToastContainer position="top-center" autoClose={2000} />
98+
<div className="relative bg-white w-full max-w-[260px] sm:max-w-[504px] lg:max-w-[966px] mx-auto mt-[40px]">
10199
{filteredData.length > 0 && (
102-
<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]">
100+
<div className="hidden sm:grid grid-cols-3 px-6 w-full h-[26px] justify-start items-center">
103101
<p className="lg:ml-10 font-normal text-[var(--color-gray2)]">이름</p>
104102
<p className="font-normal text-[var(--color-gray2)]">초대자</p>
105103
<p className="lg:ml-13 font-normal text-[var(--color-gray2)]">
106-
수락여부
104+
수락 여부
107105
</p>
108106
</div>
109107
)}
@@ -112,20 +110,17 @@ function InvitedList({
112110
? filteredData.map((invite, index) => (
113111
<div
114112
key={index}
115-
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)]"
113+
className="pb-5 mb-[20px] w-full max-w-[260px] sm:max-w-[504px] lg:max-w-[966px] h-auto sm:h-[50px]
114+
sm:grid sm:grid-cols-[1fr_1fr_1fr] sm:items-center flex flex-col gap-10 border-b border-[var(--color-gray4)]"
116115
>
117116
{/* 모바일 레이아웃 */}
118-
<div className="flex flex-col sm:hidden">
119-
<p className="ml-9 mt-1 w-full">
120-
<span className="mr-8 text-[var(--color-gray2)]">이름</span>
121-
<span className="text-[#333236]">{invite.title}</span>
122-
</p>
123-
<p className="ml-9 mt-1 w-full">
124-
<span className="mr-3.5 text-[var(--color-gray2)]">
125-
초대자
126-
</span>{" "}
127-
<span className="text-[#333236]">{invite.nickname}</span>
128-
</p>
117+
<div className="flex flex-col mt-1 sm:hidden">
118+
<span className="text-[var(--color-gray2)]">이름</span>
119+
<span className="text-[#333236]">{invite.title}</span>
120+
<span className="mr-3.5 text-[var(--color-gray2)]">
121+
초대자
122+
</span>{" "}
123+
<span className="text-[#333236]">{invite.nickname}</span>
129124
<div className="flex gap-2 mt-2 justify-center">
130125
<button
131126
className="cursor-pointer border px-3 py-1 rounded-md w-[84px] h-[32px] text-[var(--primary)] border-[var(--color-gray3)]"
@@ -267,35 +262,38 @@ export default function InvitedDashBoard() {
267262
{invitationArray.length === 0 ? (
268263
<EmptyInvitations />
269264
) : (
270-
<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">
271-
<div className="p-6 relative w-full h-[104px]">
272-
<div className="flex justify-between items-center mb-[32px]">
273-
<p className="text-xl sm:text-2xl font-bold">초대받은 대시보드</p>
274-
</div>
275-
<div className="relative w-[228px] sm:w-[448px] lg:w-[966px]">
276-
<input
277-
id="title"
278-
placeholder="검색"
279-
type="text"
280-
value={searchTitle}
281-
onChange={handleSearchInputChange}
282-
className="text-[var(--color-gray2)] w-full h-[40px] px-[40px] py-[6px] border border-[#D9D9D9] bg-white rounded-[6px] placeholder-gray-400 outline-none"
283-
/>
284-
<Image
285-
src="/svgs/search.svg"
286-
alt="검색 아이콘"
287-
width={20}
288-
height={20}
289-
className="absolute left-[12px] top-1/2 transform -translate-y-1/2"
290-
/>
265+
<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">
266+
<div className="flex flex-col p-6 w-full h-[104px]">
267+
<div className="flex flex-col w-[228px] sm:w-[448px] lg:w-[966px] gap-[24px]">
268+
<p className="text-black3 text-xl sm:text-2xl font-bold">
269+
초대받은 대시보드
270+
</p>
271+
272+
<div className="relative w-[228px] sm:w-[448px] lg:w-[966px] mx-auto">
273+
<input
274+
id="title"
275+
placeholder="검색"
276+
type="text"
277+
value={searchTitle}
278+
onChange={handleSearchInputChange}
279+
className="text-[var(--color-gray2)] w-full h-[40px] px-[40px] py-[6px] border border-[#D9D9D9] bg-white rounded-[6px] placeholder-gray-400 outline-none"
280+
/>
281+
<Search
282+
width={18}
283+
height={18}
284+
color="#333236"
285+
className="absolute left-[12px] top-1/2 transform -translate-y-1/2"
286+
/>
287+
288+
<InvitedList
289+
searchTitle={searchTitle}
290+
invitationData={invitationArray}
291+
fetchNextPage={fetchNextPage}
292+
hasMore={hasMore}
293+
/>
294+
</div>
291295
</div>
292296
</div>
293-
<InvitedList
294-
searchTitle={searchTitle}
295-
invitationData={invitationArray}
296-
fetchNextPage={fetchNextPage}
297-
hasMore={hasMore}
298-
/>
299297
</div>
300298
)}
301299
</div>

‎src/components/table/member/MemberList.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@ import Pagination from "../TablePagination";
33
import RandomProfile from "./RandomProfile";
44
import { MemberType } from "@/types/users";
55
import { getMembers } from "@/api/members";
6-
import { apiRoutes } from "@/api/apiRoutes";
7-
import axiosInstance from "@/api/axiosInstance";
86
import Image from "next/image";
9-
import { ToastContainer, toast } from "react-toastify";
10-
import "react-toastify/dist/ReactToastify.css";
117
import DelteMemberModal from "@/components/modal/DeleteMemberModal";
128

139
interface HeaderBebridgeProps {
@@ -66,8 +62,7 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
6662
}, [dashboardId]);
6763

6864
return (
69-
<div className="lg:w-[620px] lg:h-[404px] w-[284px] h-[337px] sm:w-[544px] sm:h-[404px] relative p-6 rounded-lg">
70-
<ToastContainer position="top-center" autoClose={2000} />
65+
<div className="lg:w-[620px] lg:h-[404px] w-[284px] h-[337px] sm:w-[544px] sm:h-[404px] relative p-6 rounded-lg bg-white">
7166
<div className="flex justify-between items-center">
7267
<p className="text-xl sm:text-2xl font-bold">구성원</p>
7368
<Pagination
@@ -115,7 +110,7 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
115110
<>
116111
<button
117112
onClick={openModal}
118-
className="text-md-Medium cursor-pointer font-medium text-sm sm:text-base h-[32px] sm:h-[32px] w-[52px] sm:w-[84px] md:w-[84px] border border-gray-300 text-indigo-600 px-2 py-1 rounded-md hover:bg-gray-100"
113+
className="text-12m cursor-pointer sm:font-sm h-[32px] sm:h-[32px] w-[52px] sm:w-[84px] md:w-[84px] border border-[var(--color-gray3)] text-[var(--primary)] px-2 py-1 rounded-md hover:bg-gray-100"
119114
>
120115
삭제
121116
</button>

0 commit comments

Comments
 (0)