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

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

@@ -1,65 +0,0 @@
-import type { PropsWithChildren, ReactNode } from 'react';
-import styled from 'styled-components';
-
-import { DropdownMenu } from '@';
-import { MyInfo } from '@/Gnb/parts/GnbProfile/parts/MyInfo';
-import { MyPasses } from '@/Gnb/parts/GnbProfile/parts/MyPasses';
-import type {
-  DropdownContentProps,
-  DropdownMenuProps,
-} from '@/Floating/DropdownMenu';
-import {
-  StyledGnbProfileButton,
-  StyledGnbProfileContent,
-  StyledGnpProfileIconArrow2DownS,
-} from '@/Gnb/parts/GnbProfile/style';
-import { UserShortInfo } from '@/Gnb/parts/GnbProfile/parts/UserShortInfo';
-import { BusinessUserShortInfo } from '@/Gnb/parts/GnbProfile/parts/BusinessUserShortInfo';
-import { getTypographyStyles } from '@remember-web/mixin';
-
-import { MyPassesDetail } from './parts/MyPassesDetail';
-import { GnbDropdownLinkItem } from '../GnbDropdownLinkItem';
-
-export type GnbProfileProps = {
-  ButtonContentSlot: ReactNode;
-} & PropsWithChildren<DropdownMenuProps>;
-
-export const GnbProfile = ({
-  ButtonContentSlot,
-  children,
-  ...props
-}: GnbProfileProps) => (
-  <DropdownMenu {...props}>
-    <DropdownMenu.Trigger>
-      <StyledGnbProfileButton data-is-mobile-popover-hidden>
-        {ButtonContentSlot}
-        <StyledGnpProfileIconArrow2DownS data-only-desktop />
-      </StyledGnbProfileButton>
-    </DropdownMenu.Trigger>
-    {children}
-  </DropdownMenu>
-);
-
-GnbProfile.UserShortInfo = UserShortInfo;
-GnbProfile.BusinessUserShortInfo = BusinessUserShortInfo;
-
-GnbProfile.Content = (props: DropdownContentProps) => (
-  <StyledGnbProfileContent
-    align="end"
-    sideOffset={-16}
-    {...props}
-    data-mobile-fullover
-  />
-);
-
-GnbProfile.MyInfo = MyInfo;
-GnbProfile.MyPasses = MyPasses;
-GnbProfile.Section = DropdownMenu.Section;
-GnbProfile.MyPassesDetail = MyPassesDetail;
-GnbProfile.LinkItem = styled(GnbDropdownLinkItem)`
-  ${getTypographyStyles('Body1_M')};
-`;
-
-GnbProfile.LinkItem.defaultProps = {
-  hasArrow: true,
-};

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

@@ -1,20 +0,0 @@
-import { Divider } from '@';
-import type { BusinessProfile } from '@/Gnb/parts/GnbProfile/types';
-import { UserShortInfo } from '@/Gnb/parts/GnbProfile/parts/UserShortInfo';
-import { StyledGnbProfileCompany } from '@/Gnb/parts/GnbProfile/style';
-
-export type BusinessUserShortInfoProps = BusinessProfile;
-export const BusinessUserShortInfo = (profile: BusinessUserShortInfoProps) => (
-  <>
-    <UserShortInfo {...profile} />
-    <Divider
-      decorative
-      orientation="vertical"
-      style={{ height: '10px', minWidth: '1px' }}
-      data-only-desktop
-    />
-    <StyledGnbProfileCompany data-only-desktop>
-      {profile.companyName}
-    </StyledGnbProfileCompany>
-  </>
-);

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

@@ -1,25 +0,0 @@
-import {
-  StyledGnbMyAnchor,
-  StyledGnbMyInfo,
-  StyledGnbMyTitle,
-} from '@/Gnb/parts/GnbProfile/style';
-import { Avatar } from '@';
-import type { AvatarProps } from '@/Avatars/Avatar';
-import type { GetStyledComponentProps } from '@remember-web/shared/types/styles';
-
-export type MyInfoProps<As> = {
-  imageUrl?: AvatarProps['imageUrl'];
-  name: string;
-  anchorProps: GetStyledComponentProps<typeof StyledGnbMyAnchor, As>;
-};
-export const MyInfo = <As,>({
-  imageUrl,
-  name,
-  anchorProps,
-}: MyInfoProps<As>) => (
-  <StyledGnbMyInfo>
-    <Avatar imageUrl={imageUrl} size="large" />
-    <StyledGnbMyTitle>{name}</StyledGnbMyTitle>
-    <StyledGnbMyAnchor {...anchorProps}>내 프로필 보기</StyledGnbMyAnchor>
-  </StyledGnbMyInfo>
-);

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

@@ -1,25 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-import type { GetStyledComponentProps } from '@remember-web/shared/types/styles';
-import {
-  StyledGnbMyAnchor,
-  StyledGnbMyPasses,
-  StyledGnbMyPassesContentWrapper,
-} from '@/Gnb/parts/GnbProfile/style';
-import Typography from '@/Common/Typography';
-
-export type MyPassesProps<As> = PropsWithChildren<{
-  anchorProps: GetStyledComponentProps<typeof StyledGnbMyAnchor, As>;
-}>;
-export const MyPasses = <As,>({ anchorProps, children }: MyPassesProps<As>) => (
-  <StyledGnbMyPasses>
-    <StyledGnbMyPassesContentWrapper>
-      <Typography variant="Title1" style={{ lineHeight: '28px' }}>
-        내 이용권
-      </Typography>
-      {/* @ts-ignore */}
-      <StyledGnbMyAnchor {...anchorProps}>관리</StyledGnbMyAnchor>
-    </StyledGnbMyPassesContentWrapper>
-    {children}
-  </StyledGnbMyPasses>
-);

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

@@ -1,26 +0,0 @@
-import type { ReactNode } from 'react';
-
-import {
-  StyledGnbMyPassesInfoWrapper,
-  StyledGnbMyPassesStatus,
-} from '@/Gnb/parts/GnbProfile/style';
-import Typography from '@/Common/Typography';
-import type { GetStyledComponentProps } from '@remember-web/shared/types';
-
-export type MyPassesProps<As> = GetStyledComponentProps<
-  typeof StyledGnbMyPassesInfoWrapper,
-  As
-> & {
-  InfoSlot?: ReactNode;
-  StatusSlot?: ReactNode;
-};
-export const MyPassesDetail = <As,>({
-  InfoSlot,
-  StatusSlot,
-  ...props
-}: MyPassesProps<As>) => (
-  <StyledGnbMyPassesInfoWrapper {...props}>
-    <Typography variant="Body1">{InfoSlot}</Typography>
-    <StyledGnbMyPassesStatus>{StatusSlot}</StyledGnbMyPassesStatus>
-  </StyledGnbMyPassesInfoWrapper>
-);

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

@@ -1,45 +0,0 @@
-import { Avatar, Flex, Typography } from '@';
-import { contents000 } from '@remember-web/mixin';
-import { IconUserM } from '@remember-web/icon';
-import { StyledGnpProfileIconArrow2DownS } from '@/Gnb/parts/GnbProfile/style';
-
-export type UserShortInfoProps = {
-  name?: string;
-  avatarImageUrl?: string;
-  email?: string;
-};
-export const UserShortInfo = (props: UserShortInfoProps) => {
-  if (!props.name) {
-    return (
-      <Flex gap={4}>
-        <Typography variant="Body1">{props.email}</Typography>
-        <StyledGnpProfileIconArrow2DownS data-only-mobile />
-      </Flex>
-    );
-  }
-  return (
-    <>
-      <Avatar
-        size="xxsmall"
-        imageUrl={props.avatarImageUrl}
-        border={{ width: '1.5px', color: contents000 }}
-      >
-        <IconUserM
-          style={{
-            minWidth: 24,
-            minHeight: 24,
-            transform: 'translateY(2.5px)',
-          }}
-        />
-      </Avatar>
-      <Typography
-        variant="Body1"
-        ellipsis={1}
-        maxWidth="100px"
-        data-only-desktop
-      >
-        {props.name}
-      </Typography>
-    </>
-  );
-};

package/src/Gnb/parts/GnbProfile/style.ts

@@ -1,117 +0,0 @@
-import styled from 'styled-components';
-
-import { defaultGridButtonCss, fullPopoverContentCss } from '@/Gnb/css';
-import { StyledTypography } from '@/Common/Typography/styles';
-import {
-  bg200,
-  contents100,
-  contents200,
-  getTypographyStyles,
-  roleGreen,
-  textEllipsis,
-} from '@remember-web/mixin';
-import { StyledAvatar } from '@/Avatars/Avatar/styles';
-import { IconArrow2DownS } from '@remember-web/icon';
-import { DropdownMenu } from '@';
-
-export const StyledGnpProfileIconArrow2DownS = styled(IconArrow2DownS)`
-  transition: transform 0.2s ease-out;
-  will-change: transform;
-`;
-export const StyledGnbProfileButton = styled.button`
-  ${defaultGridButtonCss};
-
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr min-content;
-  gap: 4px;
-  min-height: 24px;
-  height: 100%;
-
-  ${StyledTypography} {
-    width: 100%;
-    overflow: hidden;
-    ${textEllipsis};
-  }
-
-  // radix에서 부여됨
-  &[data-state='open'] ${StyledGnpProfileIconArrow2DownS} {
-    transform: rotateZ(-180deg);
-  }
-`;
-
-export const StyledGnbProfileContent = styled(DropdownMenu.Content)`
-  ${fullPopoverContentCss};
-  min-width: 225px;
-`;
-
-export const StyledGnbMyTitle = styled.b`
-  display: block;
-  max-width: 140px;
-  ${textEllipsis};
-  ${getTypographyStyles('Title1')};
-  font-weight: 600;
-`;
-
-export const StyledGnbProfileCompany = styled.span`
-  ${getTypographyStyles('Body1')};
-  ${textEllipsis};
-  color: ${contents100};
-  max-width: 140px;
-`;
-export const StyledGnbMyAnchor = styled.a`
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-  color: ${contents200};
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  ${getTypographyStyles('Body1')};
-`;
-export const StyledGnbMyInfo = styled.div`
-  display: grid;
-  grid-template-areas:
-    'avatar name'
-    'avatar go-profile';
-  grid-template-columns: max-content 1fr;
-  column-gap: 8px;
-  place-items: center start;
-  box-sizing: border-box;
-  padding: 10px 12px;
-
-  ${StyledAvatar} {
-    grid-area: avatar;
-  }
-
-  ${StyledGnbMyTitle} {
-    grid-area: name;
-  }
-
-  ${StyledGnbMyAnchor} {
-    text-decoration: none;
-    grid-area: go-profile;
-  }
-`;
-
-export const StyledGnbMyPasses = styled.div`
-  padding: 4px 12px 12px;
-`;
-
-export const StyledGnbMyPassesContentWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 8px;
-`;
-export const StyledGnbMyPassesInfoWrapper = styled(
-  StyledGnbMyPassesContentWrapper
-)`
-  background-color: ${bg200};
-  border-radius: 4px;
-`;
-
-export const StyledGnbMyPassesStatus = styled.span`
-  ${getTypographyStyles('Subtitle2')};
-  font-weight: 500;
-  color: ${roleGreen};
-`;

package/src/Gnb/parts/GnbProfile/types.ts

@@ -1,12 +0,0 @@
-export interface ProfileInfo {
-  name: string;
-  avatarImageUrl?: string;
-}
-
-export type EmptyProfileInfo = {
-  email?: string;
-};
-
-export interface BusinessProfile extends ProfileInfo {
-  companyName: string;
-}

package/src/Gnb/style.tsx

@@ -1,316 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { GNB_VARS } from '@/Gnb/const';
-import {
-  contents000,
-  contents150,
-  contents999,
-  divider,
-  getTypographyStyles,
-  mobileOnly,
-  secondary100,
-} from '@remember-web/mixin';
-import {
-  StyledGnbDropdownSpecialLinkItem,
-  StyledHamburgerMenuContent,
-} from '@/Gnb/parts/GnbHamburgerMenu/style';
-import { StyledTypography } from '@/Common/Typography/styles';
-import { StyledNotificationContent } from '@/Gnb/parts/GnbNotification/style';
-
-import {
-  StyledGnbMyAnchor,
-  StyledGnbMyInfo,
-  StyledGnbProfileContent,
-} from './parts/GnbProfile/style';
-import { dataResponsiveCss, defaultGridButtonCss, naviLinkCss } from './css';
-import {
-  StyledDropdownMenuSection,
-  StyledDropdownMenuSectionTitle,
-} from '../Floating/DropdownMenu/styles';
-import { StyledGnbDropdownLinkItem } from './parts/GnbDropdownLinkItem';
-
-export { GNB_VARS } from '@/Gnb/const';
-
-export const StyledGnbContent = styled.div`
-  position: relative;
-
-  display: grid;
-  grid-auto-flow: column;
-  justify-content: space-between;
-  align-items: center;
-  height: 100%;
-  max-width: ${GNB_VARS.MAX_CONTENT_WIDTH};
-
-  margin: 0 auto;
-  padding: 0;
-  gap: 8px;
-
-  ${mobileOnly(css`
-    padding: 0 12px;
-  `)}
-`;
-
-export const StyledGnbAccountActionContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  white-space: nowrap;
-`;
-
-export const GnbNaviLink = styled.a<{
-  'data-active'?: boolean;
-}>`
-  ${naviLinkCss};
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding: 4px 8px 0;
-
-  color: ${contents000};
-
-  &[data-state='open'] {
-    color: ${contents150};
-  }
-  &[data-active='true']::after {
-    content: '';
-    position: absolute;
-    display: block;
-    bottom: -1px;
-    left: 0;
-    right: 0;
-    height: 2px;
-
-    background-color: ${secondary100};
-  }
-`;
-
-export const StyledGnbLoginButton = styled.button`
-  ${defaultGridButtonCss};
-  ${getTypographyStyles('Body2')}
-  font-weight: 500;
-
-  height: 32px;
-`;
-
-export const StyledGnbContentLeft = styled.nav`
-  display: flex;
-  align-items: center;
-  height: 100%;
-  min-width: max-content;
-  gap: clamp(8px, 3vw, 40px);
-`;
-
-export const StyledGnbContentRight = styled.div`
-  display: grid;
-  box-sizing: border-box;
-  grid-auto-flow: column;
-  grid-auto-columns: min(100px, 1fr) auto;
-  height: 100%;
-  max-width: 340px;
-  padding-left: 4px;
-  gap: 12px;
-`;
-
-export const StyledDefaultIconButton = styled.button`
-  ${defaultGridButtonCss};
-
-  min-width: 24px;
-  min-height: 24px;
-`;
-
-// 예외적 디자인 요구사항 - GNB 우선적으로 font-weight 500 전체 적용
-export const StyledGnbRoot = styled.header<{ 'data-popover-opened': boolean }>`
-  position: sticky;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  align-items: center;
-  min-height: ${GNB_VARS.HEIGHT};
-  height: ${GNB_VARS.HEIGHT};
-  z-index: ${GNB_VARS.Z_INDEX};
-  font-weight: 500;
-  background: ${contents999};
-
-  font-size: 16px;
-
-  & + .gnb-spacer {
-    display: none;
-    min-height: ${GNB_VARS.HEIGHT};
-    height: ${GNB_VARS.HEIGHT};
-    box-sizing: border-box;
-  }
-
-  ${StyledTypography} {
-    font-weight: 500;
-  }
-
-  ${StyledGnbMyAnchor}, ${StyledGnbDropdownLinkItem}, ${StyledDropdownMenuSectionTitle} {
-    font-weight: 500;
-  }
-
-  // 데스크톱 사이즈에서 해당 엘리먼트의 > pseudo element를 숨김
-  ${StyledGnbMyAnchor}, ${StyledGnbDropdownLinkItem} {
-    ::after {
-      display: none;
-    }
-  }
-
-  ${dataResponsiveCss};
-
-  ${StyledGnbDropdownLinkItem} {
-    svg {
-      display: none;
-    }
-  }
-
-  ${StyledNotificationContent} {
-    max-width: 375px;
-  }
-
-  // 모바일 반응형 스타일
-  ${mobileOnly(css`
-    ${StyledNotificationContent} {
-      max-width: 100vw;
-    }
-    &[data-popover-opened='true'] + .gnb-spacer {
-      display: block;
-    }
-    /** 전체 popover, dropdown **/
-    // 전체 채우는 스타일로 변경 - wrapper
-    &[data-popover-opened='true'] {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-    }
-    [data-radix-popper-content-wrapper] {
-      transform: unset !important;
-      inset: 0;
-      top: 60px !important;
-    }
-
-    // 전체 채우는 스타일로 변경 - 내부 컨텐츠
-    [data-mobile-fullover='true'] {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      overflow: hidden scroll;
-
-      border-radius: 0;
-      box-shadow: none;
-      overscroll-behavior-x: contain;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    ${StyledGnbProfileContent} {
-      padding-top: 12px;
-    }
-
-    ${StyledGnbContentRight} {
-      gap: 20px;
-    }
-
-    // 섹션 내 패딩 제거
-    ${StyledDropdownMenuSection} > * {
-      padding: 0;
-    }
-
-    // 모바일에서는 > 에 해당하는 pseudo element를 보여줌
-    ${StyledGnbMyAnchor}, ${StyledGnbDropdownLinkItem} {
-      ::after {
-        display: inline-block;
-      }
-    }
-
-    // 모바일에서는 Dropdown Section의 border-bottom을 제거, 패딩 조정
-    ${StyledDropdownMenuSection} {
-      border-bottom: none;
-      padding: 0 20px;
-
-      ${StyledDropdownMenuSectionTitle} {
-        padding: 0;
-      }
-    }
-
-    // popover가 open되어 있지 않는 경우 Close 버튼 숨김
-    &:not([data-popover-opened='true']) {
-      [data-mobile-popover-close-button='true'] {
-        display: none;
-      }
-    }
-
-    // 모바일에서 전체 popover open되어 있는 경우
-    &[data-popover-opened='true'] {
-      ${StyledGnbContentRight} {
-        grid-auto-columns: auto;
-      }
-      [data-is-mobile-popover-hidden='true'] {
-        display: none;
-      }
-      [data-mobile-popover-close-button='true'] {
-        display: grid;
-      }
-    }
-
-    ${StyledGnbContentRight} {
-      grid-auto-columns: unset;
-    }
-
-    // 모바일 링크들에 상속된 bg-color 제거, 패딩 세팅
-    ${StyledGnbDropdownLinkItem}, ${StyledGnbDropdownSpecialLinkItem} {
-      padding: 12px 0;
-
-      &:hover,
-      &:focus-visible {
-        background-color: inherit;
-        font-weight: 600;
-      }
-
-      svg {
-        display: inline-block;
-      }
-    }
-
-    // gnb 기본 link 호버 스타일 변경
-    ${StyledGnbDropdownLinkItem} {
-      position: relative;
-
-      &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        height: 1px;
-        background-color: ${divider};
-      }
-    }
-
-    /** Notification **/
-    // 전체 사이즈 허용
-    ${StyledNotificationContent} {
-      max-height: 100%;
-    }
-
-    /** Profile **/
-    // 아래 여백 추가 풀over
-    ${StyledGnbProfileContent}, ${StyledHamburgerMenuContent} {
-      padding-bottom: 24px;
-    }
-
-    // 그리드 변경(B2C)
-    ${StyledGnbMyInfo} {
-      grid-template-areas: 'avatar name go-profile';
-      grid-template-columns: max-content 1fr max-content;
-    }
-
-    ${StyledDropdownMenuSection} + ${StyledDropdownMenuSection} {
-      margin-top: 16px;
-    }
-  `)};
-`;