@remember-web/primitive 0.0.0-alpha.1

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

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

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

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

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

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

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

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

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

package/src/Gnb/style.tsx

@@ -0,0 +1,316 @@
+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;
+    }
+  `)};
+`;

package/src/Inputs/Select/DesignedSelect/const.ts

@@ -0,0 +1,2 @@
+export const OPTION_ITEM_HEIGHT_PX = 44;
+export const DEFAULT_MAX_HEIGHT_PX = OPTION_ITEM_HEIGHT_PX * 4;