@remember-web/primitive 0.0.0-alpha.1

package/src/Gnb/GnbComplete.stories.tsx

@@ -0,0 +1,758 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useState } from 'react';
+
+import { GnbNaviLink } from '@/Gnb/style';
+import { Button, dataAttrs, Flex, GnbHoverSubNavi, GnbNotification } from '..';
+import { GnbProfile } from '@/Gnb/parts/GnbProfile';
+import { contents300, secondary100 } from '@remember-web/mixin';
+import { GnbHamburgerMenu } from '@/Gnb/parts/GnbHamburgerMenu';
+import { RememberServiceLogo } from '@/Logos/RememberServiceLogo';
+
+import { Divider } from '../Common';
+
+import { Gnb } from '.';
+
+const meta = {
+  parameters: { layout: 'fullscreen' },
+  title: 'Gnb/Gnb',
+  argTypes: {
+    login: {
+      control: 'radio',
+      options: ['로그인', '비로그인'],
+    },
+    profileType: {
+      if: { arg: 'login', eq: '로그인' },
+      control: 'radio',
+      options: ['B2B', 'B2C', 'B2C_EMPTY'],
+    },
+    profileImage: {
+      if: { arg: 'profileType' },
+      control: 'radio',
+      options: [undefined, '있음'],
+    },
+    isNotificationEmpty: {
+      control: 'radio',
+      options: [true, false],
+    },
+  },
+  args: {
+    login: '로그인',
+    profileType: 'B2C',
+    isNotificationEmpty: true,
+  },
+} as const;
+
+export default meta;
+
+type Args = {
+  login: (typeof meta)['argTypes']['login']['options'][number];
+  profileType: (typeof meta)['argTypes']['profileType']['options'][number];
+  profileImage: (typeof meta)['argTypes']['profileImage']['options'][number];
+  isNotificationEmpty: (typeof meta)['argTypes']['isNotificationEmpty']['options'][number];
+};
+
+export const Basic = {
+  render({ login, profileType, profileImage }: Args) {
+    const [isOpenProfile, setIsOpenProfile] = useState(false);
+    const [isOpenSubNavi, setIsOpenSubNavi] = useState(false);
+    const [isOpenNotification, setIsOpenNotification] = useState(false);
+    const [isOpenHamburger, setIsOpenHamburger] = useState(false);
+
+    const isOpenPopover =
+      isOpenProfile || isOpenNotification || isOpenHamburger;
+
+    return (
+      <div
+        style={{
+          padding: '16px',
+          maxHeight: 600,
+          background: 'blueviolet',
+        }}
+      >
+        <div style={{ height: '1200px', width: '100%', background: 'gray' }}>
+          <Gnb data-popover-opened={isOpenPopover}>
+            <Gnb.Content>
+              <Gnb.ContentLeft>
+                <RememberServiceLogo href="/" label="채용솔루션" />
+                <Flex
+                  gap={8}
+                  height="100%"
+                  {...{ [dataAttrs.onlyDesktop]: true }}
+                >
+                  <GnbNaviLink href="/">홈</GnbNaviLink>
+                  <GnbNaviLink href="/" data-active>
+                    채용공고
+                  </GnbNaviLink>
+                  <GnbHoverSubNavi
+                    open={isOpenSubNavi}
+                    onMouseEnter={() => setIsOpenSubNavi(true)}
+                    onMouseLeave={() => setIsOpenSubNavi(false)}
+                    ButtonSlot={<GnbNaviLink href="/">인재검색</GnbNaviLink>}
+                  >
+                    <GnbHoverSubNavi.Content>
+                      <GnbHoverSubNavi.Item href="/">
+                        인재검색
+                      </GnbHoverSubNavi.Item>
+                      <GnbHoverSubNavi.Item href="/" data-active>
+                        AI 채용비서
+                      </GnbHoverSubNavi.Item>
+                      <GnbHoverSubNavi.Item href="/">
+                        후보자 관리
+                      </GnbHoverSubNavi.Item>
+                      <GnbHoverSubNavi.Item href="/">
+                        추천 인재 메일링
+                      </GnbHoverSubNavi.Item>
+                      <GnbHoverSubNavi.Item href="/">
+                        관심 프로필
+                      </GnbHoverSubNavi.Item>
+                      <GnbHoverSubNavi.Item href="/">
+                        최근 조회 프로필
+                      </GnbHoverSubNavi.Item>
+                    </GnbHoverSubNavi.Content>
+                  </GnbHoverSubNavi>
+                  <GnbNaviLink href="/">커리어센터</GnbNaviLink>
+                  <GnbNaviLink href="/">커뮤니티</GnbNaviLink>
+                </Flex>
+              </Gnb.ContentLeft>
+
+              <Gnb.ContentRight>
+                {login === '로그인' && (
+                  <>
+                    {profileType === 'B2C' && (
+                      <GnbNotification
+                        open={isOpenNotification}
+                        onOpenChange={setIsOpenNotification}
+                      >
+                        <GnbNotification.Content
+                          {...{ [dataAttrs.mobileFullover]: true }}
+                        >
+                          {[...dummy.notifications].map((v) => (
+                            <GnbNotification.Item
+                              key={v.id}
+                              serviceType={v.serviceType}
+                              title={v.title}
+                              description={v.description}
+                              imageUrl={v.imageUrl}
+                              rounded={v.imageShape === 'circle'}
+                              updatedAt={v.updatedAt}
+                            />
+                          ))}
+                        </GnbNotification.Content>
+                      </GnbNotification>
+                    )}
+                    <GnbProfile
+                      open={isOpenProfile}
+                      onOpenChange={setIsOpenProfile}
+                      ButtonContentSlot={
+                        profileType === 'B2C' || profileType === 'B2C_EMPTY' ? (
+                          <GnbProfile.UserShortInfo
+                            avatarImageUrl={profileImage}
+                            {...dummy.userProfiles[profileType]}
+                          />
+                        ) : (
+                          <GnbProfile.BusinessUserShortInfo
+                            avatarImageUrl={profileImage}
+                            {...dummy.userProfiles.B2B}
+                          />
+                        )
+                      }
+                    >
+                      <GnbProfile.Content>
+                        <GnbProfile.Section>
+                          {profileType === 'B2C' && (
+                            <GnbProfile.MyInfo
+                              name="홍길동"
+                              anchorProps={{
+                                href: 'https://profile.alpha.rememberapp.co.kr',
+                              }}
+                            />
+                          )}
+                          {profileType === 'B2C_EMPTY' && (
+                            <GnbProfile.MyInfo
+                              name={dummy.userProfiles.B2C_EMPTY.email}
+                              anchorProps={{
+                                href: 'https://profile.alpha.rememberapp.co.kr',
+                              }}
+                            />
+                          )}
+                          {profileType === 'B2B' && (
+                            <GnbProfile.MyPasses
+                              anchorProps={{
+                                href: 'https://profile.alpha.rememberapp.co.kr',
+                              }}
+                            >
+                              <GnbProfile.MyPassesDetail
+                                InfoSlot={
+                                  <>
+                                    인재검색{' '}
+                                    <b style={{ fontWeight: 600 }}>500건</b>
+                                  </>
+                                }
+                                StatusSlot="발송가능"
+                              />
+                            </GnbProfile.MyPasses>
+                          )}
+                        </GnbProfile.Section>
+                        <GnbProfile.Section title="커리어 소식">
+                          <GnbProfile.LinkItem href="#">
+                            <Flex justify="space-between" width="100%">
+                              <span>받은 제안</span>
+                              <span style={{ color: secondary100 }}>4</span>
+                            </Flex>
+                          </GnbProfile.LinkItem>
+                          <GnbProfile.LinkItem href="#">
+                            <Flex justify="space-between" width="100%">
+                              <span>지원 현황</span>
+                              <span style={{ color: contents300 }}>0</span>
+                            </Flex>
+                          </GnbProfile.LinkItem>
+                        </GnbProfile.Section>
+                        <GnbProfile.Section title="커리어 활동">
+                          <GnbProfile.LinkItem href="#">
+                            지원 중인 공고
+                          </GnbProfile.LinkItem>
+                          <GnbProfile.LinkItem href="#">
+                            저장한 공고
+                          </GnbProfile.LinkItem>
+                          <GnbProfile.LinkItem href="#">
+                            조회한 공고
+                          </GnbProfile.LinkItem>
+                          <GnbProfile.LinkItem href="#">
+                            관심 기업
+                          </GnbProfile.LinkItem>
+                        </GnbProfile.Section>
+                        <GnbProfile.Section title="더 보기">
+                          <GnbProfile.LinkItem href="#">
+                            공지사항
+                          </GnbProfile.LinkItem>
+                          <GnbProfile.LinkItem href="#">
+                            도움말 및 1:1 문의
+                          </GnbProfile.LinkItem>
+                          <GnbProfile.LinkItem href="#">
+                            설정
+                          </GnbProfile.LinkItem>
+                        </GnbProfile.Section>
+                        <GnbProfile.Section
+                          {...{ [dataAttrs.onlyDesktop]: true }}
+                        >
+                          <GnbProfile.LinkItem
+                            href="#"
+                            style={{ color: secondary100 }}
+                          >
+                            로그아웃
+                          </GnbProfile.LinkItem>
+                        </GnbProfile.Section>
+                      </GnbProfile.Content>
+                    </GnbProfile>
+                  </>
+                )}
+                {login === '비로그인' && (
+                  <Gnb.ActionContainer {...{ [dataAttrs.onlyDesktop]: true }}>
+                    <Gnb.LoginButton>로그인</Gnb.LoginButton>
+                    <Button variant="primary" type="button">
+                      회원가입
+                    </Button>
+                  </Gnb.ActionContainer>
+                )}
+
+                {profileType !== 'B2B' && (
+                  <Gnb.ActionContainer {...{ [dataAttrs.onlyDesktop]: true }}>
+                    <Divider
+                      decorative
+                      orientation="vertical"
+                      style={{ height: '16px' }}
+                    />
+                    <Button variant="outline" type="button">
+                      기업 서비스
+                    </Button>
+                  </Gnb.ActionContainer>
+                )}
+                <div {...{ [dataAttrs.onlyMobile]: true }}>
+                  <GnbHamburgerMenu
+                    open={isOpenHamburger}
+                    onOpenChange={setIsOpenHamburger}
+                  >
+                    <GnbHamburgerMenu.Content
+                      {...{ [dataAttrs.mobileFullover]: true }}
+                    >
+                      <GnbHamburgerMenu.Section>
+                        <GnbHamburgerMenu.SpecialLinkItem href="#">
+                          로그인이 필요합니다
+                        </GnbHamburgerMenu.SpecialLinkItem>
+                      </GnbHamburgerMenu.Section>
+                      <GnbHamburgerMenu.Section title="리멤버">
+                        <GnbHamburgerMenu.LinkItem href="#">
+                          홈
+                        </GnbHamburgerMenu.LinkItem>
+                        <GnbHamburgerMenu.LinkItem href="#">
+                          채용 공고
+                        </GnbHamburgerMenu.LinkItem>
+                        <GnbHamburgerMenu.LinkItem href="#">
+                          프로필
+                        </GnbHamburgerMenu.LinkItem>
+                        <GnbHamburgerMenu.LinkItem href="#">
+                          커뮤니티
+                        </GnbHamburgerMenu.LinkItem>
+                        <GnbHamburgerMenu.LinkItem href="#">
+                          명함 관리
+                        </GnbHamburgerMenu.LinkItem>
+                      </GnbHamburgerMenu.Section>
+                      <GnbHamburgerMenu.Section>
+                        <GnbHamburgerMenu.LinkItem href="#">
+                          도움말 및 1:1 문의
+                        </GnbHamburgerMenu.LinkItem>
+                        <GnbHamburgerMenu.Accordion summary="기업용 서비스">
+                          <Flex
+                            as="nav"
+                            direction="column"
+                            align="start"
+                            style={{ marginTop: 12 }}
+                            gap={12}
+                          >
+                            <Flex>
+                              <Gnb.SubLinkText href="/">
+                                채용 솔루션
+                              </Gnb.SubLinkText>
+                            </Flex>
+                            <Flex>
+                              <Gnb.SubLinkText href="/">
+                                헤드헌팅
+                              </Gnb.SubLinkText>
+                            </Flex>
+                            <Flex>
+                              <Gnb.SubLinkText href="/">
+                                전문가 인터뷰
+                              </Gnb.SubLinkText>
+                              &nbsp;|&nbsp;
+                              <Gnb.SubLinkText href="/">
+                                리서치 서비스
+                              </Gnb.SubLinkText>
+                            </Flex>
+                            <Flex>
+                              <Gnb.SubLinkText href="/">광고</Gnb.SubLinkText>
+                            </Flex>
+                            <Flex>
+                              <Gnb.SubLinkText href="/">
+                                기업용 명함 관리
+                              </Gnb.SubLinkText>
+                            </Flex>
+                          </Flex>
+                        </GnbHamburgerMenu.Accordion>
+                      </GnbHamburgerMenu.Section>
+                      <GnbProfile.Section
+                        {...{ [dataAttrs.onlyDesktop]: true }}
+                      >
+                        <GnbProfile.LinkItem
+                          href="#"
+                          style={{ color: secondary100 }}
+                        >
+                          로그아웃
+                        </GnbProfile.LinkItem>
+                      </GnbProfile.Section>
+                    </GnbHamburgerMenu.Content>
+                  </GnbHamburgerMenu>
+                </div>
+
+                <Gnb.CloseButton />
+              </Gnb.ContentRight>
+            </Gnb.Content>
+          </Gnb>
+          <p>hihihi</p>
+        </div>
+      </div>
+    );
+  },
+} as const;
+
+const dummy = {
+  avatarImageUrl:
+    'https://remember-cdn.rememberapp.co.kr/production/uploads/namecards/2024/01/19/10/45/584930364/avatars/60fca3968ae993e50ee3d3f63d76069b/preview.png?1705628719=&expiresAt=2024-03-09T14%3A54%3A13.281%2B09%3A00',
+  userProfiles: {
+    B2C_EMPTY: { email: 'hj.k@dramancompany.com' },
+    B2C: {
+      name: '김회준',
+    },
+    B2B: {
+      name: '김회준',
+      companyName: '(주)드라마앤컴패니',
+    },
+  },
+  notifications: [
+    {
+      id: 129,
+      serviceType: '모임주소록',
+      category: 'gathering_joined',
+      title: '박철준 님이 "드라마앤컴퍼니 회사주소록"에 참여했습니다',
+      description: null,
+      imageUrl: 'https://cdn.rememberapp.co.kr/images/empty-avatar.png',
+      imageShape: 'circle',
+      action: 'gathering_member_detail',
+      args: {
+        gatheringId: 30,
+        memberId: 163021,
+      },
+      confirmedAt: '2024-02-14T16:18:54.000+09:00',
+      createdAt: '2024-02-14T15:22:24.000+09:00',
+      updatedAt: '2024-02-14T15:22:24.000+09:00',
+      button: null,
+    },
+    {
+      id: 128,
+      category: 'team_joined',
+      serviceType: '팀명함첩',
+      title: '박철준님이 드라마앤컴퍼니에 참여했습니다',
+      description: null,
+      imageUrl: 'https://cdn.rememberapp.co.kr/images/empty-avatar.png',
+      imageShape: 'circle',
+      action: 'team_members',
+      args: {
+        teamId: 20,
+        invited_member: 347153,
+      },
+      confirmedAt: '2024-02-14T16:18:54.000+09:00',
+      createdAt: '2024-02-14T15:21:46.000+09:00',
+      updatedAt: '2024-02-14T15:21:46.000+09:00',
+      button: null,
+    },
+    {
+      id: 127,
+      category: 'relation_request_accepted',
+      serviceType: '새로운 인맥',
+      title: '권소정님과 1촌이 되었습니다',
+      description: null,
+      imageUrl: 'https://cdn.rememberapp.co.kr/images/empty-avatar.png',
+      imageShape: 'circle',
+      action: 'stack',
+      args: {
+        stackIds: [428250563],
+        campaign: 'cd_live_request_accepted',
+      },
+      confirmedAt: '2024-02-14T11:40:02.000+09:00',
+      createdAt: '2024-02-14T10:16:50.000+09:00',
+      updatedAt: '2024-02-14T10:16:50.000+09:00',
+      button: null,
+    },
+    {
+      id: 126,
+      category: 'live_join_anniversary',
+      serviceType: '인맥소식',
+      title: '정지수님의 입사 2주년 입니다',
+      description: '(주)드라마앤컴퍼니 입사 2주년입니다. 축하해 주세요!',
+      imageUrl:
+        'https://career-cdn.rememberapp.co.kr/upload/open_profile/images/1638286/profile/2023/08/01/01/27/5ce3cea26a93cf512833d85ed4236124/original.jpg?1690820879',
+      imageShape: 'circle',
+      action: 'stack',
+      args: {
+        cardIds: [587612487],
+        stackIds: [428250559],
+        campaign: 'cd_join_anniversary',
+        news_type: 'join_anniversary',
+        gift_button: true,
+        entry: 'cd_join_anniversary',
+      },
+      confirmedAt: '2024-02-14T11:40:02.000+09:00',
+      createdAt: '2024-02-14T03:54:14.000+09:00',
+      updatedAt: '2024-02-14T03:54:14.000+09:00',
+      button: null,
+    },
+    {
+      id: 125,
+      category: 'relation_request_accepted',
+      serviceType: '새로운 인맥',
+      title: '김평호님과 1촌이 되었습니다',
+      description: null,
+      imageUrl:
+        'https://remember-cdn.rememberapp.co.kr/production/uploads/namecards/2023/02/21/09/21/431996884/avatars/8f7f98dffa9823a93005b519aa3e96ae/original.jpg?1706400496',
+      imageShape: 'circle',
+      action: 'stack',
+      args: {
+        stackIds: [428250505],
+        campaign: 'cd_live_request_accepted',
+      },
+      confirmedAt: '2024-02-13T20:04:52.000+09:00',
+      createdAt: '2024-02-13T18:50:33.000+09:00',
+      updatedAt: '2024-02-13T18:50:33.000+09:00',
+      button: null,
+    },
+    {
+      id: 124,
+      category: 'relation_request_accepted',
+      serviceType: '새로운 인맥',
+      title: '허연경님과 1촌이 되었습니다',
+      description: null,
+      imageUrl: 'https://cdn.rememberapp.co.kr/images/empty-avatar.png',
+      imageShape: 'circle',
+      action: 'stack',
+      args: {
+        stackIds: [428250594],
+        campaign: 'cd_live_request_accepted',
+      },
+      confirmedAt: '2024-02-13T16:09:33.000+09:00',
+      createdAt: '2024-02-13T15:00:01.000+09:00',
+      updatedAt: '2024-02-13T15:00:01.000+09:00',
+      button: null,
+    },
+    {
+      id: 123,
+      category: 'gathering_joined',
+      serviceType: '모임주소록',
+      title: '안유신 님이 "드라마앤컴퍼니 회사주소록"에 참여했습니다',
+      description: null,
+      imageUrl: 'https://cdn.rememberapp.co.kr/images/empty-avatar.png',
+      imageShape: 'circle',
+      action: 'gathering_member_detail',
+      args: {
+        gatheringId: 30,
+        memberId: 162892,
+      },
+      confirmedAt: '2024-02-13T16:09:33.000+09:00',
+      createdAt: '2024-02-13T14:59:41.000+09:00',
+      updatedAt: '2024-02-13T14:59:41.000+09:00',
+      button: null,
+    },
+    {
+      id: 122,
+      category: 'relation_request_received',
+      serviceType: '새로운 인맥',
+      title: '정진환님이 회원님을 인맥으로 추가했습니다',
+      description: null,
+      imageUrl:
+        'https://career-cdn.rememberapp.co.kr/upload/open_profile/images/85971/profile/2024/02/07/19/34/103e537046f73fdb42223b062bb76be8/original.jpg?1707302077',
+      imageShape: 'circle',
+      action: 'relation_requesters',
+      args: {
+        userIds: [55865],
+        campaign: 'cd_live_request_received',
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-13T14:59:30.000+09:00',
+      updatedAt: '2024-02-13T14:59:30.000+09:00',
+      button: null,
+    },
+    {
+      id: 121,
+      category: 'relation_request_accepted',
+      serviceType: '새로운 인맥',
+      title: '홍지훈님과 1촌이 되었습니다',
+      description: null,
+      imageUrl:
+        'https://remember-cdn.rememberapp.co.kr/production/uploads/namecards/2023/06/27/21/16/523743354/avatars/e64e5c4f4b2fa2527993293e9424bf97/original.png?1702516473',
+      imageShape: 'circle',
+      action: 'stack',
+      args: {
+        stackIds: [428250585],
+        campaign: 'cd_live_request_accepted',
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-13T14:59:25.000+09:00',
+      updatedAt: '2024-02-13T14:59:25.000+09:00',
+      button: null,
+    },
+    {
+      id: 120,
+      category: 'gathering_joined',
+      serviceType: '모임주소록',
+      title: '정진환 님이 "드라마앤컴퍼니 회사주소록"에 참여했습니다',
+      description: null,
+      imageUrl:
+        'https://career-cdn.rememberapp.co.kr/upload/open_profile/images/85971/profile/2024/02/07/19/34/103e537046f73fdb42223b062bb76be8/original.jpg?1707302077',
+      imageShape: 'circle',
+      action: 'gathering_member_detail',
+      args: {
+        gatheringId: 30,
+        memberId: 162891,
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-13T14:59:09.000+09:00',
+      updatedAt: '2024-02-13T14:59:09.000+09:00',
+      button: null,
+    },
+    {
+      id: 119,
+      category: 'team_joined',
+      serviceType: '팀명함첩',
+      title: '안유신님이 드라마앤컴퍼니에 참여했습니다',
+      description: null,
+      imageUrl: 'https://cdn.rememberapp.co.kr/images/empty-avatar.png',
+      imageShape: 'circle',
+      action: 'team_members',
+      args: {
+        teamId: 20,
+        invited_member: 347078,
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-13T14:57:46.000+09:00',
+      updatedAt: '2024-02-13T14:57:46.000+09:00',
+      button: null,
+    },
+    {
+      id: 118,
+      category: 'team_joined',
+      serviceType: '팀명함첩',
+      title: '신지은님이 드라마앤컴퍼니에 참여했습니다',
+      description: null,
+      imageUrl: 'https://cdn.rememberapp.co.kr/images/empty-avatar.png',
+      imageShape: 'circle',
+      action: 'team_members',
+      args: {
+        teamId: 20,
+        invited_member: 347077,
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-13T14:54:58.000+09:00',
+      updatedAt: '2024-02-13T14:54:58.000+09:00',
+      button: null,
+    },
+    {
+      id: 117,
+      category: 'relation_request_received',
+      serviceType: '새로운 인맥',
+      title: '배운기님이 회원님을 인맥으로 추가했습니다',
+      description: null,
+      imageUrl:
+        'https://career-cdn.rememberapp.co.kr/upload/open_profile/images/181634/profile/2024/02/13/14/51/0ea706e992bb7d7c1c7e606ced331916/original.jpg?1707803513',
+      imageShape: 'circle',
+      action: 'relation_requesters',
+      args: {
+        userIds: [1859741],
+        campaign: 'cd_live_request_received',
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-13T14:54:30.000+09:00',
+      updatedAt: '2024-02-13T14:54:30.000+09:00',
+      button: null,
+    },
+    {
+      id: 116,
+      category: 'gathering_joined',
+      serviceType: '모임주소록',
+      title: '배운기 님이 "드라마앤컴퍼니 회사주소록"에 참여했습니다',
+      description: null,
+      imageUrl:
+        'https://career-cdn.rememberapp.co.kr/upload/open_profile/images/181634/profile/2024/02/13/14/51/0ea706e992bb7d7c1c7e606ced331916/original.jpg?1707803513',
+      imageShape: 'circle',
+      action: 'gathering_member_detail',
+      args: {
+        gatheringId: 30,
+        memberId: 162890,
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-13T14:54:16.000+09:00',
+      updatedAt: '2024-02-13T14:54:16.000+09:00',
+      button: null,
+    },
+    {
+      id: 115,
+      category: 'team_joined',
+      serviceType: '팀명함첩',
+      title: '정진환님이 드라마앤컴퍼니에 참여했습니다',
+      description: null,
+      imageUrl:
+        'https://career-cdn.rememberapp.co.kr/upload/open_profile/images/85971/profile/2024/02/07/19/34/103e537046f73fdb42223b062bb76be8/original.jpg?1707302077',
+      imageShape: 'circle',
+      action: 'team_members',
+      args: {
+        teamId: 20,
+        invited_member: 347076,
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-13T14:53:44.000+09:00',
+      updatedAt: '2024-02-13T14:53:44.000+09:00',
+      button: null,
+    },
+    {
+      id: 114,
+      category: 'team_joined',
+      serviceType: '팀명함첩',
+      title: '최지성님이 드라마앤컴퍼니에 참여했습니다',
+      description: null,
+      imageUrl:
+        'https://career-cdn.rememberapp.co.kr/upload/open_profile/images/2577701/profile/2024/02/13/14/52/cf89776672c3d9ca1860b1c8f9801665/original.jpg?1707803526',
+      imageShape: 'circle',
+      action: 'team_members',
+      args: {
+        teamId: 20,
+        invited_member: 347075,
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-13T14:53:17.000+09:00',
+      updatedAt: '2024-02-13T14:53:17.000+09:00',
+      button: null,
+    },
+    {
+      id: 113,
+      category: 'team_joined',
+      serviceType: '팀명함첩',
+      title: '배운기님이 드라마앤컴퍼니에 참여했습니다',
+      description: null,
+      imageUrl:
+        'https://career-cdn.rememberapp.co.kr/upload/open_profile/images/181634/profile/2024/02/13/14/51/0ea706e992bb7d7c1c7e606ced331916/original.jpg?1707803513',
+      imageShape: 'circle',
+      action: 'team_members',
+      args: {
+        teamId: 20,
+        invited_member: 347074,
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-13T14:53:05.000+09:00',
+      updatedAt: '2024-02-13T14:53:05.000+09:00',
+      button: null,
+    },
+    {
+      id: 112,
+      category: 'relation_request_accepted',
+      serviceType: '새로운 인맥',
+      title: '정빈나님과 1촌이 되었습니다',
+      description: null,
+      imageUrl: 'https://cdn.rememberapp.co.kr/images/empty-avatar.png',
+      imageShape: 'circle',
+      action: 'stack',
+      args: {
+        stackIds: [428250472],
+        campaign: 'cd_live_request_accepted',
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-12T07:46:28.000+09:00',
+      updatedAt: '2024-02-12T07:46:28.000+09:00',
+      button: null,
+    },
+    {
+      id: 111,
+      category: 'relation_request_accepted',
+      serviceType: '새로운 인맥',
+      title: '안성혁님과 1촌이 되었습니다',
+      description: null,
+      imageUrl:
+        'https://remember-cdn.rememberapp.co.kr/production/uploads/namecards/2023/11/20/09/49/567175571/avatars/31f6ca29f277f04a228cb870a706a49f/original.jpg?1700441353',
+      imageShape: 'circle',
+      action: 'stack',
+      args: {
+        stackIds: [428250566],
+        campaign: 'cd_live_request_accepted',
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-09T21:49:57.000+09:00',
+      updatedAt: '2024-02-09T21:49:57.000+09:00',
+      button: null,
+    },
+    {
+      id: 110,
+      category: 'relation_request_accepted',
+      serviceType: '새로운 인맥',
+      title: '안성혁님과 1촌이 되었습니다',
+      description: null,
+      imageUrl:
+        'https://remember-cdn.rememberapp.co.kr/production/uploads/namecards/2023/11/20/09/49/567175571/avatars/31f6ca29f277f04a228cb870a706a49f/original.jpg?1700441353',
+      imageShape: 'circle',
+      action: 'stack',
+      args: {
+        stackIds: [428250566],
+        campaign: 'cd_live_request_accepted',
+      },
+      confirmedAt: '2024-02-13T14:59:32.000+09:00',
+      createdAt: '2024-02-09T21:49:57.000+09:00',
+      updatedAt: '2024-02-09T21:49:57.000+09:00',
+      button: null,
+    },
+  ],
+};