Skip to content

Commit 05ffa5f

Browse files
devgonydevgony
committed
feat: extract GroupMemberList component and add 7-day poke button logic
- Extract member list functionality from page into reusable GroupMemberList component - Add conditional poke button visibility based on 7-day inactivity threshold - Create comprehensive Storybook stories for different member activity scenarios - Update Storybook config to include app directory stories for better component testing
1 parent 0022dce commit 05ffa5f

File tree

2 files changed

+202
-1
lines changed

2 files changed

+202
-1
lines changed

‎app/group/[id]/member/page.stories.tsx‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import GroupMemberPage from "./page";
3+
4+
const meta: Meta<typeof GroupMemberPage> = {
5+
title: "Pages/GroupMember",
6+
component: GroupMemberPage,
7+
tags: ["autodocs"],
8+
parameters: {
9+
layout: "fullscreen",
10+
nextjs: {
11+
appDirectory: true,
12+
},
13+
mockData: [
14+
{
15+
url: "/api/groups/:id",
16+
method: "GET",
17+
status: 200,
18+
response: {
19+
name: "스터디 그룹",
20+
},
21+
},
22+
{
23+
url: "/api/user/profile",
24+
method: "GET",
25+
status: 200,
26+
response: {
27+
nickname: "현재사용자",
28+
},
29+
},
30+
],
31+
},
32+
};
33+
34+
export default meta;
35+
type Story = StoryObj<typeof GroupMemberPage>;
36+
37+
const currentDate = new Date();
38+
const sevenDaysAgo = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000);
39+
const tenDaysAgo = new Date(currentDate.getTime() - 10 * 24 * 60 * 60 * 1000);
40+
const threeDaysAgo = new Date(currentDate.getTime() - 3 * 24 * 60 * 60 * 1000);
41+
42+
export const MembersWithin7Days: Story = {
43+
parameters: {
44+
nextjs: {
45+
navigation: {
46+
pathname: "/group/test-group/member",
47+
},
48+
},
49+
mockData: [
50+
{
51+
url: "/api/groups/test-group",
52+
method: "GET",
53+
status: 200,
54+
response: {
55+
name: "스터디 그룹",
56+
},
57+
},
58+
{
59+
url: "/api/groups/test-group/members",
60+
method: "GET",
61+
status: 200,
62+
response: [
63+
{
64+
userId: "user1",
65+
nickname: "현재사용자",
66+
lastOnlineDate: currentDate.toISOString(),
67+
},
68+
{
69+
userId: "user2",
70+
nickname: "활발한멤버",
71+
lastOnlineDate: threeDaysAgo.toISOString(),
72+
},
73+
{
74+
userId: "user3",
75+
nickname: "최근접속멤버",
76+
lastOnlineDate: new Date(currentDate.getTime() - 1 * 24 * 60 * 60 * 1000).toISOString(),
77+
},
78+
],
79+
},
80+
{
81+
url: "/api/user/profile",
82+
method: "GET",
83+
status: 200,
84+
response: {
85+
nickname: "현재사용자",
86+
},
87+
},
88+
],
89+
},
90+
};
91+
92+
export const MembersMoreThan7DaysAgo: Story = {
93+
parameters: {
94+
nextjs: {
95+
navigation: {
96+
pathname: "/group/test-group/member",
97+
},
98+
},
99+
mockData: [
100+
{
101+
url: "/api/groups/test-group",
102+
method: "GET",
103+
status: 200,
104+
response: {
105+
name: "스터디 그룹",
106+
},
107+
},
108+
{
109+
url: "/api/groups/test-group/members",
110+
method: "GET",
111+
status: 200,
112+
response: [
113+
{
114+
userId: "user1",
115+
nickname: "현재사용자",
116+
lastOnlineDate: currentDate.toISOString(),
117+
},
118+
{
119+
userId: "user2",
120+
nickname: "비활성멤버1",
121+
lastOnlineDate: tenDaysAgo.toISOString(),
122+
},
123+
{
124+
userId: "user3",
125+
nickname: "비활성멤버2",
126+
lastOnlineDate: new Date(currentDate.getTime() - 15 * 24 * 60 * 60 * 1000).toISOString(),
127+
},
128+
],
129+
},
130+
{
131+
url: "/api/user/profile",
132+
method: "GET",
133+
status: 200,
134+
response: {
135+
nickname: "현재사용자",
136+
},
137+
},
138+
],
139+
},
140+
};
141+
142+
export const MixedActivityMembers: Story = {
143+
parameters: {
144+
nextjs: {
145+
navigation: {
146+
pathname: "/group/test-group/member",
147+
},
148+
},
149+
mockData: [
150+
{
151+
url: "/api/groups/test-group",
152+
method: "GET",
153+
status: 200,
154+
response: {
155+
name: "스터디 그룹",
156+
},
157+
},
158+
{
159+
url: "/api/groups/test-group/members",
160+
method: "GET",
161+
status: 200,
162+
response: [
163+
{
164+
userId: "user1",
165+
nickname: "현재사용자",
166+
lastOnlineDate: currentDate.toISOString(),
167+
},
168+
{
169+
userId: "user2",
170+
nickname: "활발한멤버",
171+
lastOnlineDate: threeDaysAgo.toISOString(),
172+
},
173+
{
174+
userId: "user3",
175+
nickname: "비활성멤버1",
176+
lastOnlineDate: tenDaysAgo.toISOString(),
177+
},
178+
{
179+
userId: "user4",
180+
nickname: "비활성멤버2",
181+
lastOnlineDate: new Date(currentDate.getTime() - 20 * 24 * 60 * 60 * 1000).toISOString(),
182+
},
183+
{
184+
userId: "user5",
185+
nickname: "최근접속멤버",
186+
lastOnlineDate: new Date(currentDate.getTime() - 2 * 24 * 60 * 60 * 1000).toISOString(),
187+
},
188+
],
189+
},
190+
{
191+
url: "/api/user/profile",
192+
method: "GET",
193+
status: 200,
194+
response: {
195+
nickname: "현재사용자",
196+
},
197+
},
198+
],
199+
},
200+
};

‎app/group/[id]/member/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@ export default function GroupMemberPage({ params }: GroupMemberPageProps) {
143143
</div>
144144
</div>
145145

146-
{!isMe && (
146+
{!isMe &&
147+
new Date().getTime() - new Date(member.lastOnlineDate).getTime() > 7 * 24 * 60 * 60 * 1000 && (
147148
<button
148149
onClick={() =>
149150
handlePokeUser(member.userId, member.nickname)

0 commit comments

Comments
 (0)