Skip to content

Commit 41d24c7

Browse files
Ji-HoonEJi-HoonE
authored
Merge pull request #125 from ezcode-my/feat/fix-design
fix : 페이지별 디자인 일괄 적용
2 parents 3b12414 + 530cf7b commit 41d24c7

12 files changed

Lines changed: 371 additions & 228 deletions

File tree

‎src/app/(auth)/(navigationsBarLayout)/@chatDialog/page.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
11
'use client';
22
import { Dialog, DialogContent } from '@/components/ui/dialog';
33
import { ChatRoom, ChatRoomList } from '@/features/chat';
4+
import useChatDialogTrigger from '@/features/chat/hooks/useChatDialogTrigger';
45
import { DialogTitle } from '@radix-ui/react-dialog';
56
import { useSearchParams } from 'next/navigation';
67

78
export default function ChatDialog({}) {
89
const sp = useSearchParams();
9-
10+
const { closeChatDialog } = useChatDialogTrigger();
1011
const roomId = sp.get('room-id');
1112
const title = sp.get('title');
1213

1314
if (!roomId || !title) {
1415
return null;
1516
}
1617
return (
17-
<Dialog open={!!roomId}>
18-
<DialogContent
19-
className="max-w-[70vw] w-full h-[90vh] sm:max-w-[70vw] flex justify-center px-0"
20-
showCloseButton={false}
21-
>
18+
<Dialog
19+
open={!!roomId}
20+
onOpenChange={(open) => {
21+
if (!open) {
22+
closeChatDialog();
23+
}
24+
}}
25+
>
26+
<DialogContent className="max-w-[70vw] w-full w-full h-[90vh] flex bg-[#0c151c] border border-[#214d35] p-0">
2227
<DialogTitle className="hidden" />
2328
<ChatRoomList selectedRoomId={Number(roomId)} />
2429
<ChatRoom roomId={Number(roomId)} roomTitle={title} />

‎src/app/(auth)/(navigationsBarLayout)/mypage/tab/ChangePassword.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useState } from 'react';
44
import Image from 'next/image';
55
import { Eye, EyeOff } from 'lucide-react';
66
import { Button } from '@/shared/ui/button/Button';
7+
import { toast } from 'sonner';
78

89
export const ChangePassword = () => {
910
console.log('hi');
@@ -22,17 +23,30 @@ export const ChangePassword = () => {
2223
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
2324
const handlePasswordChange = async () => {
2425
if (passwordForm.newPassword !== passwordForm.confirmPassword) {
25-
alert('새 비밀번호가 일치하지 않습니다.');
26+
toast.error('새 비밀번호가 일치하지 않습니다.', {
27+
richColors: true,
28+
style: {
29+
fontWeight: 'bold',
30+
fontSize: '16px',
31+
},
32+
});
2633
return;
2734
}
2835

2936
const result = await changePasswordMutation({
3037
newPassword: passwordForm.newPassword,
3138
oldPassword: passwordForm.currentPassword,
3239
});
33-
34-
alert(result);
35-
40+
toast.success(result, {
41+
richColors: false,
42+
style: {
43+
background: '#00d084',
44+
color: '#ffffff',
45+
fontWeight: 'bold',
46+
fontSize: '16px',
47+
border: 'none',
48+
},
49+
});
3650
setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
3751
};
3852
return (

‎src/app/(auth)/(navigationsBarLayout)/mypage/tab/Mine.tsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { ModifyForm } from '../ui/ModifyForm';
2121

2222
import { useQueryClient } from '@tanstack/react-query';
2323
import { Badge } from '@/shared/ui/badge/Badge';
24+
import { toast } from 'sonner';
2425

2526
export const Mine = () => {
2627
const queryClient = useQueryClient();
@@ -108,7 +109,13 @@ export const Mine = () => {
108109
setTab('modify');
109110
} else {
110111
if (editForm.nickname.length < 1) {
111-
alert('닉네임을 확인해주세요.');
112+
toast.error('닉네임을 확인해주세요.', {
113+
richColors: true,
114+
style: {
115+
fontWeight: 'bold',
116+
fontSize: '16px',
117+
},
118+
});
112119
return;
113120
}
114121

@@ -127,7 +134,16 @@ export const Mine = () => {
127134
image: editForm.profileImage ?? undefined,
128135
});
129136

130-
alert(response.message);
137+
toast.success(response.message, {
138+
richColors: false,
139+
style: {
140+
background: '#00d084',
141+
color: '#ffffff',
142+
fontWeight: 'bold',
143+
fontSize: '16px',
144+
border: 'none',
145+
},
146+
});
131147
if (response.status === 200) {
132148
queryClient.invalidateQueries({ queryKey: ['my-info'] });
133149
setTab('info');
@@ -255,7 +271,16 @@ export const Mine = () => {
255271
label="이메일 인증"
256272
onClick={async () => {
257273
const response = await emailVerfiy();
258-
alert(response);
274+
toast.success(response, {
275+
richColors: false,
276+
style: {
277+
background: '#00d084',
278+
color: '#ffffff',
279+
fontWeight: 'bold',
280+
fontSize: '16px',
281+
border: 'none',
282+
},
283+
});
259284
}}
260285
/>
261286
)}

‎src/app/(auth)/(navigationsBarLayout)/notifications/page.tsx‎

Lines changed: 89 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -13,66 +13,101 @@ export default function Notifications() {
1313
// const queryClient = useQueryClient();
1414
// const router = useRouter();
1515
return (
16-
<div className="min-h-screen bg-background">
17-
<main className="max-w-4xl mx-auto px-6 py-8">
18-
<div className="flex items-center gap-3 mb-8">
19-
<Bell className="text-accent" size={28} />
20-
<h1 className="text-2xl font-bold text-foreground">알림</h1>
21-
</div>
16+
<div className="flex flex-col px-10 py-18 w-full gap-4 justify-center items-center">
17+
<div className="flex flex-col max-w-[1600px] w-full gap-6">
18+
{/* 헤더 섹션 */}
19+
<section>
20+
<h1 className="text-3xl font-bold mb-2 text-secondary">알림</h1>
21+
<p className="text-gray-400">새로운 알림과 업데이트를 확인하세요</p>
22+
</section>
2223

23-
{/* 알림 목록 */}
24-
<div className="space-y-4">
25-
{notifications.content.map((notification) => {
26-
return (
27-
<div
28-
key={notification.id}
29-
className={`bg-card border-border rounded-[10px] p-6 shadow-subtle hover:shadow-hover transition-all duration-200 cursor-pointer ${
30-
!notification.isRead
31-
? 'border-[2px] border-[#214d35]'
32-
: 'border-[1px] border-[#2a2a2a]'
33-
}`}
34-
onClick={async () => {
35-
const result = await readNotification(notification.id);
36-
console.log(result);
37-
// router.push(notification.redirectUrl);
38-
}}
39-
>
40-
<div className="flex items-start gap-4">
41-
<div className="flex flex-row gap-4 items-center w-full">
42-
{!notification.isRead && (
43-
<div
44-
className={`w-2 h-2 rounded-full mt-2 ${
45-
notification.isRead ? 'bg-gray-500' : 'bg-primary'
46-
}`}
47-
/>
48-
)}
49-
<div className="flex-1 min-w-0 justify-between flex-ronsmw ">
50-
<p className="text-muted-foreground text-sm leading-relaxed mb-3">
51-
{notification.message}
52-
</p>
24+
{/* 알림 목록 섹션 */}
25+
<section className="bg-gray-900/50 rounded-[10px] border border-gray-800 overflow-hidden">
26+
{/* 알림 헤더 */}
27+
<div className="border-b border-gray-800 bg-gray-800/50 p-6">
28+
<div className="flex items-center gap-3">
29+
<Bell className="text-[#00d084]" size={24} />
30+
<h2 className="text-lg font-semibold text-white">전체 알림</h2>
31+
{notifications.content.filter((n) => !n.isRead).length > 0 && (
32+
<span className="bg-[#00d084] text-white px-2 py-1 rounded-full text-xs font-medium">
33+
{notifications.content.filter((n) => !n.isRead).length}개의 새 알림
34+
</span>
35+
)}
36+
</div>
37+
</div>
5338

54-
<div className="flex items-center justify-between text-xs">
55-
<span className="text-muted">{notification.createdAt}</span>
56-
{!notification.isRead && (
57-
<span className="text-[#FFF] font-medium">새 알림</span>
58-
)}
59-
</div>
60-
</div>
61-
</div>
39+
{/* 알림 목록 */}
40+
<div className="divide-y divide-gray-800">
41+
{notifications.content.length === 0 ? (
42+
<div className="text-center py-16">
43+
<div className="bg-[#00d084]/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
44+
<Bell className="text-[#00d084]" size={32} />
6245
</div>
46+
<h3 className="text-lg font-medium text-white mb-2">알림이 없습니다</h3>
47+
<p className="text-gray-400">새로운 알림이 도착하면 여기에 표시됩니다.</p>
6348
</div>
64-
);
65-
})}
66-
</div>
49+
) : (
50+
notifications.content.map((notification) => {
51+
return (
52+
<div
53+
key={notification.id}
54+
className={`p-6 hover:bg-white/[0.08] transition-colors duration-200 cursor-pointer ${
55+
!notification.isRead ? 'bg-[#00d084]/5 border-l-4 border-l-[#00d084]' : ''
56+
}`}
57+
onClick={async () => {
58+
const result = await readNotification(notification.id);
59+
console.log(result);
60+
// router.push(notification.redirectUrl);
61+
}}
62+
>
63+
<div className="flex items-start gap-4">
64+
{/* 읽음/안읽음 인디케이터 */}
65+
<div className="flex-shrink-0 mt-1">
66+
<div
67+
className={`w-3 h-3 rounded-full ${
68+
notification.isRead ? 'bg-gray-600' : 'bg-[#00d084] animate-pulse'
69+
}`}
70+
/>
71+
</div>
6772

68-
{notifications.content.length === 0 && (
69-
<div className="text-center py-12">
70-
<Bell className="mx-auto text-muted-foreground mb-4" size={48} />
71-
<h3 className="text-lg font-medium text-foreground mb-2">알림이 없습니다</h3>
72-
<p className="text-muted-foreground">새로운 알림이 도착하면 여기에 표시됩니다.</p>
73+
{/* 알림 내용 */}
74+
<div className="flex-1 min-w-0">
75+
<p
76+
className={`text-sm leading-relaxed mb-3 ${
77+
notification.isRead ? 'text-gray-400' : 'text-white font-medium'
78+
}`}
79+
>
80+
{notification.message}
81+
</p>
82+
83+
<div className="flex items-center justify-between">
84+
<span className="text-xs text-gray-500">
85+
{notification.createdAt.split('T')[0]}
86+
</span>
87+
{!notification.isRead && (
88+
<span className="bg-[#00d084] text-white px-2 py-1 rounded-full text-xs font-medium">
89+
NEW
90+
</span>
91+
)}
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
);
97+
})
98+
)}
7399
</div>
74-
)}
75-
</main>
100+
{notifications.content.length > 0 && (
101+
<div className="bg-gray-800/30 border-t border-gray-800 p-4">
102+
<div className="flex justify-center">
103+
<button className="text-[#00d084] hover:text-[#00d084]/80 text-sm font-medium transition-colors">
104+
모든 알림 읽음으로 표시
105+
</button>
106+
</div>
107+
</div>
108+
)}
109+
</section>
110+
</div>
76111
</div>
77112
);
78113
}

0 commit comments

Comments
 (0)