@remember-web/primitive 0.0.0-alpha.11 → 0.0.0-alpha.3

package/src/Gnb/parts/GnbNotification/GnbNotification.stories.tsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { GnbNotification } from '@/Gnb';
+
+const meta = {
+  parameters: { layout: 'fullscreen' },
+  title: 'Gnb/Gnb/notification',
+} satisfies Meta<typeof GnbNotification>;
+type Story = StoryObj<typeof GnbNotification>;
+export default meta;
+
+export const Default = {
+  render(args: Story) {
+    return (
+      <div style={{ minHeight: 300, padding: 24 }}>
+        <div
+          style={{
+            display: 'grid',
+            height: 60,
+            gridAutoColumns: 'max-content',
+          }}
+        >
+          <GnbNotification>
+            <GnbNotification.Content>
+              {[...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.Item
+                    key={`${v.id}#`}
+                    as="a"
+                    href="#"
+                    serviceType={v.serviceType}
+                    title={`${v.title} as <a> tag`}
+                    description={v.description}
+                    imageUrl={v.imageUrl}
+                    rounded={v.imageShape === 'circle'}
+                    updatedAt={v.updatedAt}
+                  />
+                  <GnbNotification.Item
+                    key={`${v.id}@`}
+                    as="button"
+                    serviceType={v.serviceType}
+                    title={`${v.title} as <button> tag`}
+                    description={v.description}
+                    imageUrl={v.imageUrl}
+                    rounded={v.imageShape === 'circle'}
+                    updatedAt={v.updatedAt}
+                  />
+                </>
+              ))}
+            </GnbNotification.Content>
+          </GnbNotification>
+        </div>
+
+        <br />
+        <p> empty </p>
+        <div
+          style={{
+            display: 'grid',
+            height: 60,
+            gridAutoColumns: 'max-content',
+          }}
+        >
+          <GnbNotification
+            ButtonSlot={<GnbNotification.Button count={5} />}
+            {...args}
+          >
+            <GnbNotification.Content>
+              <GnbNotification.Empty />
+            </GnbNotification.Content>
+          </GnbNotification>
+        </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,
+    },
+  ],
+};

package/src/Gnb/parts/GnbNotification/index.tsx

@@ -0,0 +1,60 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import type { PopoverProps } from '@/Floating/Popover';
+import Popover from '@/Floating/Popover';
+import NotificationItem from '@/Gnb/parts/GnbNotification/parts/NotificationItem';
+import type { GetStyledComponentProps } from '@remember-web/shared/types/styles';
+import { IconAlarmM } from '@remember-web/icon';
+import { badgePseudo } from '@';
+import { primary100 } from '@remember-web/mixin';
+
+import {
+  StyledNotificationButton,
+  StyledNotificationContent,
+  StyledNotificationEmpty,
+} from './style';
+
+export type GnbNotificationProps = PropsWithChildren<
+  {
+    ButtonSlot?: ReactNode;
+  } & PopoverProps
+>;
+
+export const GnbNotification = ({
+  children,
+  ButtonSlot = <GnbNotification.Button />,
+  ...props
+}: GnbNotificationProps) => (
+  <Popover {...props}>
+    {ButtonSlot}
+    {children}
+  </Popover>
+);
+
+GnbNotification.Content = StyledNotificationContent;
+
+GnbNotification.Empty = StyledNotificationEmpty;
+GnbNotification.Item = NotificationItem;
+GnbNotification.Button = ({
+  count,
+  ...props
+}: GnbNotificationButtonProps & { count?: number }) => (
+  <Popover.Trigger>
+    <StyledNotificationButton data-is-mobile-popover-hidden {...props}>
+      <span
+        role="button"
+        tabIndex={0}
+        {...(count ? badgePseudo.getBadgeAttr({ current: count }) : null)}
+      >
+        <IconAlarmM color={primary100} />
+      </span>
+    </StyledNotificationButton>
+  </Popover.Trigger>
+);
+
+export type GnbNotificationButtonProps = Omit<
+  GetStyledComponentProps<typeof StyledNotificationButton>,
+  'children'
+>;
+
+export type { NotificationItemProps as GnbNotificationItemProps } from './parts/NotificationItem';

package/src/Gnb/parts/GnbNotification/parts/NotificationItem.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+
+import {
+  StyledNotificationContentText,
+  StyledNotificationDescription,
+  StyledNotificationItem,
+  StyledNotificationItemContent,
+  StyledNotificationTitle,
+  StyledNotificationUpdatedAt,
+  StyledServiceTitle,
+} from '@/Gnb/parts/GnbNotification/style';
+import type { GetStyledComponentProps } from '@remember-web/shared/types/styles';
+import { Avatar } from '@/Avatars';
+import type { AvatarProps } from '@/Avatars/Avatar';
+
+export type NotificationItemProps<ComponentAs> = GetStyledComponentProps<
+  typeof StyledNotificationItem,
+  ComponentAs
+> & {
+  serviceType: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  updatedAt: ReactNode;
+  imageUrl?: AvatarProps['imageUrl'];
+  rounded?: AvatarProps['rounded'];
+};
+
+export default function NotificationItem<ComponentAs>({
+  serviceType,
+  title,
+  description,
+  updatedAt,
+  imageUrl,
+  rounded,
+  ...props
+}: NotificationItemProps<ComponentAs>) {
+  return (
+    <StyledNotificationItem {...props}>
+      <StyledServiceTitle>{serviceType}</StyledServiceTitle>
+      <StyledNotificationItemContent>
+        <StyledNotificationContentText>
+          <StyledNotificationTitle>{title}</StyledNotificationTitle>
+          {description && (
+            <StyledNotificationDescription>
+              {description}
+            </StyledNotificationDescription>
+          )}
+          <StyledNotificationUpdatedAt>{updatedAt}</StyledNotificationUpdatedAt>
+        </StyledNotificationContentText>
+
+        {imageUrl && (
+          <Avatar
+            size="large"
+            border={{ width: 'none' }}
+            rounded={rounded}
+            imageUrl={imageUrl}
+          />
+        )}
+      </StyledNotificationItemContent>
+    </StyledNotificationItem>
+  );
+}

package/src/Gnb/parts/GnbNotification/style.tsx

@@ -0,0 +1,149 @@
+import styled from 'styled-components';
+
+import {
+  bg200,
+  bg300,
+  contents000,
+  contents150,
+  contents200,
+  divider,
+  getTypographyStyles,
+  secondary100,
+} from '@remember-web/mixin';
+import { defaultGridButtonCss, fullPopoverContentCss } from '@/Gnb/css';
+import { getBadgePseudoCss } from '@/Badge/style';
+import { StyledPopoverContent } from '@/Floating/Popover/styles';
+
+export const StyledNotificationItem = styled.div`
+  &:where(button, a) {
+    ${defaultGridButtonCss};
+
+    &:hover,
+    &:focus-visible {
+      background-color: ${bg200};
+    }
+
+    &:active {
+      background-color: ${bg300};
+    }
+  }
+
+  &:where(a) {
+    text-decoration: none;
+  }
+
+  & {
+    display: flex;
+    flex-direction: column;
+    place-items: start;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 10px 20px;
+    gap: 8px;
+    content-visibility: auto;
+
+    color: ${contents000};
+  }
+`;
+
+export const StyledNotificationEmpty = styled.div.attrs((p) => ({
+  children: '받은 알림이 아직 없습니다',
+  ...p,
+}))`
+  ${getTypographyStyles('Headline4_M')}
+  font-weight: 500;
+
+  color: ${contents200};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 130px 0;
+`;
+
+export const StyledServiceTitle = styled.strong`
+  ${getTypographyStyles('Body2_B')}
+  font-weight: 500;
+  color: ${secondary100};
+`;
+
+export const StyledNotificationItemContent = styled.div`
+  display: grid;
+
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+  width: 100%;
+`;
+
+export const StyledNotificationContent = styled(StyledPopoverContent)`
+  ${fullPopoverContentCss};
+
+  min-width: 360px;
+  max-height: 440px;
+
+  ${StyledNotificationItem} {
+    border-bottom: 1px solid ${divider};
+
+    &:first-child {
+      padding-top: 16px;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:last-child(1),
+    &:last-child(2),
+    &:last-child(3) {
+      border-bottom: 1px solid ${divider};
+    }
+  }
+`;
+
+StyledNotificationContent.defaultProps = {
+  align: 'end',
+  sideOffset: -12,
+};
+
+export const StyledNotificationContentText = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 8px;
+`;
+
+export const StyledNotificationTitle = styled.b`
+  ${getTypographyStyles('Body1_M')}
+  font-weight: 500;
+  line-height: 19px;
+`;
+
+export const StyledNotificationDescription = styled.p`
+  ${getTypographyStyles('Body1_M')}
+  font-weight: 500;
+  padding-inline: unset;
+  margin-block: unset;
+  color: ${contents150};
+`;
+
+export const StyledNotificationUpdatedAt = styled.span`
+  ${getTypographyStyles('Body2_M')}
+  font-weight: 500;
+  color: ${contents200};
+`;
+
+export const StyledNotificationButton = styled(StyledNotificationDescription)`
+  display: grid;
+  place-content: center;
+
+  > span {
+    ${defaultGridButtonCss};
+    position: relative;
+    display: block;
+    height: 24px;
+    width: 24px;
+    max-height: 24px;
+    ${getBadgePseudoCss()};
+  }
+`;

package/src/Gnb/parts/GnbProfile/GnbProfile.stories.tsx

@@ -0,0 +1,156 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useState } from 'react';
+
+import { Flex } from '@';
+import { contents300, secondary100 } from '@remember-web/mixin';
+
+import { GnbProfile } from '.';
+
+const meta = {
+  parameters: { layout: 'fullscreen' },
+  title: 'Gnb/Gnb/profile',
+  argTypes: {
+    profileType: {
+      control: 'radio',
+      options: ['B2B', 'B2C', 'B2C_EMPTY'],
+    },
+    profileImage: {
+      if: { arg: 'profileType' },
+      control: 'radio',
+      options: [undefined, '있음'],
+    },
+  },
+  args: {
+    profileType: 'B2C',
+  },
+} as const;
+
+export default meta;
+
+type Args = {
+  profileType: (typeof meta)['argTypes']['profileType']['options'][number];
+  profileImage: (typeof meta)['argTypes']['profileImage']['options'][number];
+};
+
+export const Default = {
+  render({ profileType, profileImage }: Args) {
+    const [isOpenProfile, setIsOpenProfile] = useState(false);
+
+    return (
+      <div style={{ minHeight: 300, padding: 24 }}>
+        <div
+          style={{
+            display: 'grid',
+            height: 60,
+            gridAutoColumns: 'max-content',
+          }}
+        >
+          <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 data-only-desktop>
+                <GnbProfile.LinkItem href="#" style={{ color: secondary100 }}>
+                  로그아웃
+                </GnbProfile.LinkItem>
+              </GnbProfile.Section>
+            </GnbProfile.Content>
+          </GnbProfile>
+        </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: '(주)드라마앤컴패니',
+    },
+  },
+};