Skip to content

Commit 2ada442

Browse files
yuj2nyuj2n
authored
Merge pull request #131 from CoPlay-FE/feature/bug-fix
♻️refactor: 최종 수정
2 parents 2f72b3e + be2f6ef commit 2ada442

File tree

17 files changed

+138
-104
lines changed

17 files changed

+138
-104
lines changed

‎src/app/dashboard/[id]/edit/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function AboutLayout({
44
children: React.ReactNode
55
}) {
66
return (
7-
<div>
7+
<div className="BG-gray min-h-screen px-20 sm:px-30">
88
<main>{children}</main>
99
</div>
1010
)

‎src/app/dashboard/[id]/edit/page.tsx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,27 @@
33
import EditInfo from '@dashboard/components/edit/EditInfo'
44
import EditInvitation from '@dashboard/components/edit/EditInvitation'
55
import EditMember from '@dashboard/components/edit/EditMember'
6-
import Image from 'next/image'
76
import { useParams } from 'next/navigation'
8-
import { useRouter } from 'next/navigation'
97

108
import DeleteDashboardButton from '@/app/features/dashboard/components/edit/DeleteDashboardButton'
9+
import BackButton from '@/app/shared/components/common/BackButton/BackButton'
1110

1211
export default function DashBoardEditPage() {
1312
const { id } = useParams()
14-
const router = useRouter()
1513

1614
return (
17-
<div className="BG-gray px-4 pb-16 sm:px-8 md:px-16">
18-
{/* 돌아가기 버튼 */}
19-
<button
20-
className="flex cursor-pointer items-center gap-12 pt-16"
21-
type="button"
22-
onClick={() => router.back()}
23-
>
24-
<Image src="/images/back.png" alt="돌아가기" width={6} height={4} />
25-
<p className="text-14">돌아가기</p>
26-
</button>
15+
<div>
16+
<BackButton />
2717

2818
{/* 콘텐츠 영역 */}
29-
<div className="mobile-sm:max-w-full mt-8 flex w-full flex-col gap-16 pl-16 sm:max-w-[460px] md:max-w-[500px]">
19+
<div className="relative z-10 flex max-w-full flex-col gap-16">
3020
<EditInfo />
3121
<EditMember />
3222
<EditInvitation />
3323
</div>
3424

3525
{/* 삭제 버튼 영역 */}
36-
<div className="BG-white Text-btn ml-18 mt-18 flex justify-center rounded-md py-6 sm:max-w-[292px]">
26+
<div className="BG-white Text-btn mt-18 flex max-w-292 justify-center rounded-md py-6">
3727
<DeleteDashboardButton dashboardId={String(id)} />
3828
</div>
3929
</div>

‎src/app/dashboard/[id]/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function AboutLayout({
1010
return (
1111
<>
1212
<Sidebar />
13-
<div className="pl-[300px] transition-all duration-300 mobile:pl-67 tablet:pl-[150px]">
13+
<div className="pl-300 transition-all duration-300 mobile:pl-67 tablet:pl-150">
1414
<Header />
1515
<main className="pt-57">{children}</main>
1616
</div>

‎src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default function DeleteDashboardButton({
6363
onClick={handleDelete}
6464
// isLoading -> isPending으로 수정됨
6565
disabled={mutation.isPending}
66-
className={`Text-black my-8 whitespace-nowrap rounded-8 font-semibold transition-opacity ${
66+
className={`Text-black my-8 whitespace-nowrap rounded-8 font-semibold transition-opacity mobile-sm:text-12 ${
6767
mutation.isPending
6868
? 'cursor-not-allowed opacity-50'
6969
: 'hover:opacity-90'

‎src/app/features/dashboard/components/edit/EditInfo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export default function EditInfo() {
1616

1717
return (
1818
<div>
19-
<div className="BG-white max-w-584 rounded-16 px-32 py-24">
20-
<h2 className="Text-black mb-24 text-18 font-bold">
19+
<div className="BG-white relative z-0 max-w-584 rounded-16 px-32 py-24">
20+
<h2 className="Text-black mb-24 text-18 font-bold mobile-sm:text-16">
2121
{selectedDashboard?.title || '대시보드 편집'}
2222
</h2>
2323

‎src/app/features/dashboard/components/edit/EditInvitation.tsx‎

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -94,46 +94,40 @@ export default function EditInvitation() {
9494
: null
9595

9696
return (
97-
<div className="BG-white w-full max-w-584 overflow-x-auto whitespace-nowrap rounded-16 px-32 py-24">
97+
<div className="BG-white w-full max-w-584 overflow-x-auto rounded-16 px-32 py-24">
9898
{/* Header + 초대 버튼 영역 (데스크탑용) */}
99-
<div className="mb-16 flex flex-col gap-12 md:flex-row md:items-center md:justify-between">
99+
<div className="mb-20 flex items-center justify-between">
100+
<h2 className="Text-black text-18 font-bold mobile-sm:text-14">
101+
초대 내역
102+
</h2>
100103
<PaginationHeader
101104
currentPage={currentPage}
102105
totalPages={totalPages}
103-
title="초대 내역"
104106
onPrev={handlePrev}
105107
onNext={handleNext}
106108
/>
107-
108-
{/* 데스크탑에서만 보이는 초대 버튼 */}
109-
<button
110-
onClick={() => openModal('invite')}
111-
className="BG-violet mb-24 hidden w-fit shrink-0 items-center gap-8 self-end rounded-5 px-12 py-6 md:flex"
112-
>
113-
<div className="relative flex size-12 shrink-0">
114-
<Image src="/images/invitation-white.png" fill alt="초대 버튼" />
115-
</div>
116-
<p className="text-14 text-white">초대하기</p>
117-
</button>
118109
</div>
119110

120111
{/* 이메일 입력 및 모바일 전용 버튼 */}
121112
<form className="overflow-x-auto">
122-
<div className="mb-8 flex flex-row items-center justify-between gap-4 md:block">
123-
<label htmlFor="title" className="Text-black block text-16">
113+
<div className="mb-8 flex flex-row items-center justify-between gap-4">
114+
<label
115+
htmlFor="title"
116+
className="Text-black block text-16 mobile-sm:text-12"
117+
>
124118
이메일
125119
</label>
126120

127121
{/* 모바일/태블릿에서만 보이는 초대 버튼 */}
128122
<button
129123
onClick={() => openModal('invite')}
130124
type="button"
131-
className="BG-violet mb-12 flex w-fit shrink-0 items-center gap-8 rounded-5 px-12 py-6 md:hidden"
125+
className="BG-violet flex w-fit shrink-0 items-center gap-8 rounded-5 px-12 py-6"
132126
>
133127
<div className="relative flex size-12 shrink-0">
134128
<Image src="/images/invitation-white.png" fill alt="초대 버튼" />
135129
</div>
136-
<p className="text-14 text-white">초대하기</p>
130+
<p className="text-14 text-white mobile-sm:text-12">초대하기</p>
137131
</button>
138132
</div>
139133

@@ -145,21 +139,20 @@ export default function EditInvitation() {
145139
<p className="Text-blue py-12 text-center">{errorMessage}</p>
146140
)}
147141
{!isLoading &&
148-
!errorMessage &&
149142
currentItems.map((member, index) => {
150143
const isLast = index === currentItems.length - 1
151144
return (
152145
<div
153146
key={member.id}
154147
className={cn(
155-
'flex items-center justify-between gap-12 py-4',
148+
'flex items-center justify-between gap-12 py-12',
156149
!isLast && 'Border-bottom',
157150
)}
158151
>
159152
<div className="flex min-w-0 items-center gap-12">
160153
<div className="flex min-w-0 flex-col">
161154
<Tooltip content={member.invitee.nickname}>
162-
<p className="Text-black max-w-[200px] cursor-help truncate text-13">
155+
<p className="Text-black max-w-200 cursor-help truncate text-13">
163156
{member.invitee.email}
164157
</p>
165158
</Tooltip>
@@ -169,7 +162,7 @@ export default function EditInvitation() {
169162
type="button"
170163
disabled={cancelMutation.isPending}
171164
className={cn(
172-
'Text-btn Border-btn w-fit shrink-0 rounded-md px-16 py-2',
165+
'Text-btn Border-btn w-fit shrink-0 rounded-md px-16 py-2 mobile-sm:text-12',
173166
cancelMutation.isPending &&
174167
'cursor-not-allowed opacity-50',
175168
)}

‎src/app/features/dashboard/components/edit/EditMember.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,16 +65,23 @@ export default function EditMember() {
6565
return (
6666
<div>
6767
<div className="BG-white max-w-584 overflow-x-auto rounded-16 px-32 py-24">
68-
<PaginationHeader
69-
currentPage={currentPage}
70-
totalPages={totalPages}
71-
title="구성원"
72-
onPrev={handlePrev}
73-
onNext={handleNext}
74-
/>
68+
<div className="mb-20 flex items-center justify-between">
69+
<h2 className="Text-black text-18 font-bold mobile-sm:text-14">
70+
구성원
71+
</h2>
72+
<PaginationHeader
73+
currentPage={currentPage}
74+
totalPages={totalPages}
75+
onPrev={handlePrev}
76+
onNext={handleNext}
77+
/>
78+
</div>
7579

7680
<form>
77-
<label htmlFor="title" className="Text-black mb-8 block text-16">
81+
<label
82+
htmlFor="title"
83+
className="Text-black mb-8 block text-16 mobile-sm:text-12"
84+
>
7885
이름
7986
</label>
8087

@@ -119,7 +126,7 @@ export default function EditMember() {
119126
disabled={isDeleting}
120127
onClick={() => removeMember(member.id)}
121128
className={cn(
122-
'Text-btn Border-btn rounded-md px-16 py-2',
129+
'Text-btn Border-btn rounded-md px-16 py-2 mobile-sm:text-12',
123130
isDeleting && 'cursor-not-allowed opacity-50',
124131
)}
125132
>

‎src/app/features/dashboard/components/edit/PaginationHeader.tsx‎

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import React from 'react'
66
type PaginationHeaderProps = {
77
currentPage: number
88
totalPages: number
9-
title: string
109
onPrev: () => void
1110
onNext: () => void
1211
children?: React.ReactNode
@@ -15,43 +14,45 @@ type PaginationHeaderProps = {
1514
export function PaginationHeader({
1615
currentPage,
1716
totalPages,
18-
title,
1917
onPrev,
2018
onNext,
2119
}: PaginationHeaderProps) {
2220
return (
23-
<div className="mb-20 flex max-w-500 items-center justify-between whitespace-nowrap">
24-
<h2 className="Text-black text-18 font-bold">{title}</h2>
21+
<div className="flex max-w-500 items-center justify-center">
22+
<p className="Text-gray mx-16 text-12 sm:mx-32 mobile-sm:text-10">
23+
{totalPages} 페이지 중 {currentPage}
24+
</p>
2525

26-
<div className="flex shrink-0 items-center">
27-
<p className="Text-gray mx-32 shrink-0 text-12">
28-
{totalPages} 페이지 중 {currentPage}
29-
</p>
30-
<button onClick={onPrev} disabled={currentPage === 1}>
31-
<Image
32-
src={
33-
currentPage === 1
34-
? '/images/prev-disabled.png'
35-
: '/images/prev.png'
36-
}
37-
alt="이전"
38-
width={36}
39-
height={36}
40-
/>
41-
</button>
42-
<button onClick={onNext} disabled={currentPage === totalPages}>
43-
<Image
44-
src={
45-
currentPage === totalPages
46-
? '/images/next-disabled.png'
47-
: '/images/next.png'
48-
}
49-
alt="다음"
50-
width={36}
51-
height={36}
52-
/>
53-
</button>
54-
</div>
26+
<button
27+
onClick={onPrev}
28+
disabled={currentPage === 1}
29+
className="relative mobile-sm:size-30"
30+
>
31+
<Image
32+
src={
33+
currentPage === 1 ? '/images/prev-disabled.png' : '/images/prev.png'
34+
}
35+
alt="이전"
36+
width={36}
37+
height={36}
38+
/>
39+
</button>
40+
<button
41+
onClick={onNext}
42+
disabled={currentPage === totalPages}
43+
className="relative mobile-sm:size-30"
44+
>
45+
<Image
46+
src={
47+
currentPage === totalPages
48+
? '/images/next-disabled.png'
49+
: '/images/next.png'
50+
}
51+
alt="다음"
52+
width={36}
53+
height={36}
54+
/>
55+
</button>
5556
</div>
5657
)
5758
}

‎src/app/shared/components/common/Input/Input.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,17 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
2020

2121
return (
2222
<div className="flex flex-col gap-8">
23-
<label htmlFor={name} className="Text-black text-base font-normal">
23+
<label
24+
htmlFor={name}
25+
className="Text-black text-base font-normal mobile-sm:text-12"
26+
>
2427
{labelName}
2528
</label>
2629

2730
<input
2831
id={name}
2932
className={cn(
30-
'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal',
33+
'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal mobile-sm:text-14',
3134
hasError ? 'Border-error' : 'Border-btn',
3235
props.readOnly && 'Text-gray cursor-default',
3336
)}

‎src/app/shared/components/common/UserInfo.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ export function UserInfo({ nickname, imageUrl, size = 36 }: UserInfoProps) {
2222
<div className="flex items-center gap-4">
2323
{/* Avatar에 nickname, profileImageUrl 모두 넘겨줌 */}
2424
<Avatar size={size} name={displayNickname} imageUrl={displayImage} />
25-
<span className="ml-4 text-sm font-semibold">{displayNickname}</span>
25+
<span className="ml-4 text-sm font-semibold mobile-sm:text-12">
26+
{displayNickname}
27+
</span>
2628
</div>
2729
)
2830
}

0 commit comments

Comments
 (0)