Skip to content

Commit 589fbe0

Browse files
winversewinverse
committed
feat: add a link to notification items
1 parent 5943ada commit 589fbe0

File tree

7 files changed

+153
-133
lines changed

7 files changed

+153
-133
lines changed

‎packages/velog-web/src/features/notification/components/NotificationItem/CommentActionItem/CommentActionItem.tsx

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ function CommentActionItem({ id, action, created_at, is_read, onClickNotificatio
3131
} = action
3232

3333
const velogUrl = `/@${actor_username}/posts`
34+
const postUrl = `/@${post_writer_username}/${post_url_slug}`
3435
const { time } = useTimeFormat(created_at)
3536

3637
useEffect(() => {
@@ -44,33 +45,35 @@ function CommentActionItem({ id, action, created_at, is_read, onClickNotificatio
4445

4546
return (
4647
<li className={cx('block', 'item', { isRead })} onClick={onClick}>
47-
<Link href={velogUrl}>
48-
<Thumbnail className={cx('thumbnail')} src={actor_thumbnail} alt={actor_display_name} />
49-
</Link>
50-
<div className={cx('content')}>
51-
<p className={cx('wrap')}>
52-
<Link href={velogUrl}>
53-
<span className={cx('bold')}>{actor_display_name}</span>
54-
</Link>
55-
<span className={cx('spacer')} />
56-
<span>님이</span>
57-
<span className={cx('spacer')} />
58-
<span className={cx('postTitle', 'bold')}>
59-
<VLink href={`/@${post_writer_username}/${post_url_slug}`}>
60-
{post_title.length > 20 ? `${post_title.slice(0, 20)}...` : post_title}
61-
</VLink>
62-
</span>
63-
<span className={cx('spacer')} />
64-
<span>포스트에 댓글을 작성하였습니다:</span>
65-
<span className={cx('spacer')} />
66-
<span className={cx('comment')}>
67-
<VLink href={`/@${post_writer_username}/${post_url_slug}`}>
68-
{comment_text.length > 100 ? `${comment_text.slice(0, 100)}...` : comment_text}
69-
</VLink>
70-
</span>
71-
<span className={cx('time')}>{time}</span>
72-
</p>
73-
</div>
48+
<VLink href={postUrl}>
49+
<Link href={velogUrl}>
50+
<Thumbnail className={cx('thumbnail')} src={actor_thumbnail} alt={actor_display_name} />
51+
</Link>
52+
<div className={cx('content')}>
53+
<p className={cx('wrap')}>
54+
<Link href={velogUrl}>
55+
<span className={cx('bold')}>{actor_display_name}</span>
56+
</Link>
57+
<span className={cx('spacer')} />
58+
<span>님이</span>
59+
<span className={cx('spacer')} />
60+
<span className={cx('postTitle', 'bold')}>
61+
<VLink href={postUrl}>
62+
{post_title.length > 20 ? `${post_title.slice(0, 20)}...` : post_title}
63+
</VLink>
64+
</span>
65+
<span className={cx('spacer')} />
66+
<span>포스트에 댓글을 작성하였습니다:</span>
67+
<span className={cx('spacer')} />
68+
<span className={cx('comment')}>
69+
<VLink href={postUrl}>
70+
{comment_text.length > 100 ? `${comment_text.slice(0, 100)}...` : comment_text}
71+
</VLink>
72+
</span>
73+
<span className={cx('time')}>{time}</span>
74+
</p>
75+
</div>
76+
</VLink>
7477
</li>
7578
)
7679
}

‎packages/velog-web/src/features/notification/components/NotificationItem/CommentReplyActionItem/CommentReplyActionItem.tsx

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ function CommentReplyActionItem({ id, action, created_at, is_read, onClickNotifi
3131
} = action
3232

3333
const velogUrl = `/@${actor_username}/posts`
34+
const postUrl = `/@${post_writer_username}/${post_url_slug}`
3435
const { time } = useTimeFormat(created_at)
3536

3637
useEffect(() => {
@@ -43,39 +44,41 @@ function CommentReplyActionItem({ id, action, created_at, is_read, onClickNotifi
4344
}
4445

4546
return (
46-
<div className={cx('block', 'item', { isRead })} onClick={onClick}>
47-
<Link href={velogUrl}>
48-
<Thumbnail className={cx('thumbnail')} src={actor_thumbnail} alt={actor_display_name} />
49-
</Link>
50-
<div className={cx('content')}>
51-
<p className={cx('wrap')}>
52-
<Link href={velogUrl}>
53-
<span className={cx('bold')}>{actor_display_name}</span>
54-
</Link>
55-
<span className={cx('spacer')} />
56-
<span>님이</span>
57-
<span className={cx('spacer')} />
58-
<span className={cx('bold')}>
59-
<VLink href={`/@${post_writer_username}/${post_url_slug}`}>
60-
{parent_comment_text.length > 20
61-
? `${parent_comment_text.slice(0, 20)}...`
62-
: parent_comment_text}
63-
</VLink>
64-
</span>
65-
<span className={cx('spacer')} />
66-
<span>에 대한 답글을 작성하였습니다:</span>
67-
<span className={cx('spacer')} />
68-
<span className={cx('comment')}>
69-
<VLink href={`/@${post_writer_username}/${post_url_slug}`}>
70-
{reply_comment_text.length > 100
71-
? `${reply_comment_text.slice(0, 100)}...`
72-
: reply_comment_text}
73-
</VLink>
74-
</span>
75-
<span className={cx('time')}>{time}</span>
76-
</p>
77-
</div>
78-
</div>
47+
<li className={cx('block', 'item', { isRead })} onClick={onClick}>
48+
<VLink href={postUrl}>
49+
<Link href={velogUrl}>
50+
<Thumbnail className={cx('thumbnail')} src={actor_thumbnail} alt={actor_display_name} />
51+
</Link>
52+
<div className={cx('content')}>
53+
<p className={cx('wrap')}>
54+
<Link href={velogUrl}>
55+
<span className={cx('bold')}>{actor_display_name}</span>
56+
</Link>
57+
<span className={cx('spacer')} />
58+
<span>님이</span>
59+
<span className={cx('spacer')} />
60+
<span className={cx('bold')}>
61+
<VLink href={postUrl}>
62+
{parent_comment_text.length > 20
63+
? `${parent_comment_text.slice(0, 20)}...`
64+
: parent_comment_text}
65+
</VLink>
66+
</span>
67+
<span className={cx('spacer')} />
68+
<span>에 대한 답글을 작성하였습니다:</span>
69+
<span className={cx('spacer')} />
70+
<span className={cx('comment')}>
71+
<VLink href={postUrl}>
72+
{reply_comment_text.length > 100
73+
? `${reply_comment_text.slice(0, 100)}...`
74+
: reply_comment_text}
75+
</VLink>
76+
</span>
77+
<span className={cx('time')}>{time}</span>
78+
</p>
79+
</div>
80+
</VLink>
81+
</li>
7982
)
8083
}
8184

‎packages/velog-web/src/features/notification/components/NotificationItem/FollowActionItem/FollowActionItem.tsx

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,22 +38,24 @@ function FollowActionItem({ id, action, created_at, is_read, onClickNotification
3838
return (
3939
<li className={cx('block', 'item', { isRead })} onClick={onClick}>
4040
<Link href={velogUrl}>
41-
<Thumbnail className={cx('thumbnail')} src={actor_thumbnail} alt={actor_display_name} />
41+
<Link href={velogUrl}>
42+
<Thumbnail className={cx('thumbnail')} src={actor_thumbnail} alt={actor_display_name} />
43+
</Link>
44+
<div className={cx('content')}>
45+
<p className={cx('wrap')}>
46+
<Link href={velogUrl}>
47+
<span className={cx('bold')}>{actor_display_name}</span>
48+
</Link>
49+
<span className={cx('spacer')} />
50+
<span className={cx('wrap')}>님이 회원님을 팔로우 하였습니다.</span>
51+
<span className={cx('spacer')} />
52+
<span className={cx('time', 'nowrap')}>{time}</span>
53+
</p>
54+
</div>
55+
<div className={cx('button')}>
56+
<FollowButton followingUserId={actor_user_id} />
57+
</div>
4258
</Link>
43-
<div className={cx('content')}>
44-
<p className={cx('wrap')}>
45-
<Link href={velogUrl}>
46-
<span className={cx('bold')}>{actor_display_name}</span>
47-
</Link>
48-
<span className={cx('spacer')} />
49-
<span className={cx('wrap')}>님이 회원님을 팔로우 하였습니다.</span>
50-
<span className={cx('spacer')} />
51-
<span className={cx('time', 'nowrap')}>{time}</span>
52-
</p>
53-
</div>
54-
<div className={cx('button')}>
55-
<FollowButton followingUserId={actor_user_id} />
56-
</div>
5759
</li>
5860
)
5961
}

‎packages/velog-web/src/features/notification/components/NotificationItem/NotificationItem.module.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
display: flex;
33
padding: 8px 16px;
44

5+
& > a {
6+
display: flex;
7+
width: 100%;
8+
justify-content: space-between;
9+
}
10+
511
&.isRead {
612
background-color: var(--bg-element7);
713
p {

‎packages/velog-web/src/features/notification/components/NotificationItem/PostLikeActionItem/PostLikeActionItem.tsx

Lines changed: 60 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ function PostLikeNotMergedItem(props: ItemProps) {
4444
post_title,
4545
} = action
4646
const velogUrl = `/@${actor_username}/posts`
47+
const postUrl = `/@${post_writer_username}/${post_url_slug}`
4748
const { time } = useTimeFormat(created_at)
4849
const [isRead, setRead] = useState<boolean>()
4950

@@ -58,27 +59,29 @@ function PostLikeNotMergedItem(props: ItemProps) {
5859

5960
return (
6061
<li className={cx('block', 'item', { isRead })} onClick={onClick}>
61-
<Link href={velogUrl}>
62-
<Thumbnail className={cx('thumbnail')} src={actor_thumbnail} alt={actor_display_name} />
63-
</Link>
64-
<div className={cx('content')}>
65-
<p className={cx('wrap')}>
66-
<Link href={`/@${actor_username}/posts`}>
67-
<span className={cx('bold')}>{actor_display_name}</span>
68-
</Link>
69-
<span className={cx('spacer')} />
70-
<span>님이</span>
71-
<span className={cx('spacer')} />
72-
<span className={cx('postTitle', 'bold')}>
73-
<VLink href={`/@${post_writer_username}/${post_url_slug}`}>
74-
{post_title.length > 20 ? `${post_title.slice(0, 20)}...` : post_title}
75-
</VLink>
76-
</span>
77-
<span className={cx('spacer')} />
78-
<span>포스트를 좋아 합니다.</span>
79-
<span className={cx('time')}>{time}</span>
80-
</p>
81-
</div>
62+
<VLink href={postUrl}>
63+
<Link href={velogUrl}>
64+
<Thumbnail className={cx('thumbnail')} src={actor_thumbnail} alt={actor_display_name} />
65+
</Link>
66+
<div className={cx('content')}>
67+
<p className={cx('wrap')}>
68+
<Link href={`/@${actor_username}/posts`}>
69+
<span className={cx('bold')}>{actor_display_name}</span>
70+
</Link>
71+
<span className={cx('spacer')} />
72+
<span>님이</span>
73+
<span className={cx('spacer')} />
74+
<span className={cx('postTitle', 'bold')}>
75+
<VLink href={postUrl}>
76+
{post_title.length > 20 ? `${post_title.slice(0, 20)}...` : post_title}
77+
</VLink>
78+
</span>
79+
<span className={cx('spacer')} />
80+
<span>포스트를 좋아 합니다.</span>
81+
<span className={cx('time')}>{time}</span>
82+
</p>
83+
</div>
84+
</VLink>
8285
</li>
8386
)
8487
}
@@ -92,6 +95,7 @@ function PostLikeMergedItem(props: ItemProps) {
9295
const { time } = useTimeFormat(created_at)
9396
const [isRead, setRead] = useState<boolean>()
9497

98+
const postUrl = `/@${post_writer_username}/${post_url_slug}`
9599
useEffect(() => {
96100
setRead(is_read)
97101
}, [is_read])
@@ -103,45 +107,47 @@ function PostLikeMergedItem(props: ItemProps) {
103107

104108
return (
105109
<li className={cx('block', 'item', { isRead })} onClick={onClick}>
106-
<div className={cx('thumbanils')}>
107-
{actor_info.map((info, i) => {
108-
return (
109-
<Link href={`/@${info.username}/posts`} key={info.username}>
110-
<Thumbnail key={i} src={info.thumbnail} className={cx('thumbanil')} />
111-
</Link>
112-
)
113-
})}
114-
</div>
115-
<div className={cx('content')}>
116-
<p className={cx('wrap')}>
110+
<VLink href={postUrl}>
111+
<div className={cx('thumbanils')}>
117112
{actor_info.map((info, i) => {
118113
return (
119114
<Link href={`/@${info.username}/posts`} key={info.username}>
120-
<span className={cx('bold')}>{info.display_name}</span>
121-
{actor_info.length - 1 !== i && (
122-
<span>
123-
,
124-
<span className={cx('spacer')} />
125-
</span>
126-
)}
115+
<Thumbnail key={i} src={info.thumbnail} className={cx('thumbanil')} />
127116
</Link>
128117
)
129118
})}
130-
<span>
131-
{rest_action_count > 0 && <>님 외 {rest_action_count}명이</>}
132-
{rest_action_count <= 0 && <>님이</>}
133-
</span>
134-
<span className={cx('spacer')} />
135-
<span className={cx('postTitle', 'bold')}>
136-
<VLink href={`/@${post_writer_username}/${post_url_slug}`}>
137-
{post_title.length > 20 ? `${post_title.slice(0, 20)}...` : post_title}
138-
</VLink>
139-
</span>
140-
<span className={cx('spacer')} />
141-
<span>포스트를 좋아 합니다.</span>
142-
<span className={cx('time')}>{time}</span>
143-
</p>
144-
</div>
119+
</div>
120+
<div className={cx('content')}>
121+
<p className={cx('wrap')}>
122+
{actor_info.map((info, i) => {
123+
return (
124+
<Link href={`/@${info.username}/posts`} key={info.username}>
125+
<span className={cx('bold')}>{info.display_name}</span>
126+
{actor_info.length - 1 !== i && (
127+
<span>
128+
,
129+
<span className={cx('spacer')} />
130+
</span>
131+
)}
132+
</Link>
133+
)
134+
})}
135+
<span>
136+
{rest_action_count > 0 && <>님 외 {rest_action_count}명이</>}
137+
{rest_action_count <= 0 && <>님이</>}
138+
</span>
139+
<span className={cx('spacer')} />
140+
<span className={cx('postTitle', 'bold')}>
141+
<VLink href={postUrl}>
142+
{post_title.length > 20 ? `${post_title.slice(0, 20)}...` : post_title}
143+
</VLink>
144+
</span>
145+
<span className={cx('spacer')} />
146+
<span>포스트를 좋아 합니다.</span>
147+
<span className={cx('time')}>{time}</span>
148+
</p>
149+
</div>
150+
</VLink>
145151
</li>
146152
)
147153
}

‎packages/velog-web/src/features/notification/components/NotificationList/NotificationList.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { bindClassNames } from '@/lib/styles/bindClassNames'
66
import useNotificationMerge from '../../hooks/useNotificationMerge'
77
import { usePathname } from 'next/navigation'
88
import NotificationEmpty from '../NotificationEmpty'
9-
import useNotificationReorder from '../../hooks/useNotificationReorder'
9+
import useNotificationToJSX from '../../hooks/useNotificationToJSX'
1010
import { useEffect, useRef, useState } from 'react'
1111
import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
1212
import NotificationSkeletonList from './NotificationSkeletonList'
@@ -36,10 +36,10 @@ function NotificationList() {
3636

3737
const ref = useRef<HTMLDivElement>(null)
3838
const { merged } = useNotificationMerge(notificationData?.notifications)
39-
const { jsx } = useNotificationReorder(merged)
39+
const { jsx } = useNotificationToJSX(merged)
4040

41-
const [page, setPage] = useState(1)
4241
const take = 10
42+
const [page, setPage] = useState(1)
4343
const [list, setList] = useState<JSX.Element[]>([])
4444

4545
const fetchMore = () => {

‎packages/velog-web/src/features/notification/hooks/useNotificationReorder.tsx renamed to ‎packages/velog-web/src/features/notification/hooks/useNotificationToJSX.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { useCallback, useMemo } from 'react'
1313
import CommentReplyActionItem from '../components/NotificationItem/CommentReplyActionItem'
1414
import { usePathname } from 'next/navigation'
1515

16-
export default function useNotificationReorder(merged: MergedNotifications = []) {
16+
export default function useNotificationToJSX(merged: MergedNotifications = []) {
1717
const pathname = usePathname()
1818
const input: Record<string, any> = {}
1919
if (pathname.includes('/not-read')) {

0 commit comments

Comments
 (0)