@remember-web/primitive 0.0.0-alpha.1 → 0.0.0-alpha.10

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

@@ -1,234 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,63 +0,0 @@
-import type { ReactNode } from 'react';
-import * as React 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

@@ -1,149 +0,0 @@
-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

@@ -1,156 +0,0 @@
-/* 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: '(주)드라마앤컴패니',
-    },
-  },
-};