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

package/src/Gnb/const.ts

@@ -1,22 +0,0 @@
-export module GNB_VARS {
-  export const MAX_CONTENT_WIDTH = '1120px';
-  export const Z_INDEX = 9700;
-  export const HEIGHT = '60px';
-}
-
-export const dataAttrs = {
-  // 모바일 사이즈 에서만 보임 (boolean)
-  onlyMobile: 'data-only-mobile',
-
-  // 데스크탑 사이즈 에서만 보임 (boolean)
-  onlyDesktop: 'data-only-desktop',
-
-  // 모바일 popover가 열려있는 경우 숨김 (boolean)
-  isPopoverHidden: 'data-is-mobile-popover-hidden',
-
-  // 모바일 popover시에만 보이는 gnb 닫기 버튼 (boolean)
-  mobilePopoverCloseButton: 'data-mobile-popover-close-button',
-
-  // 모바일일시 풀로 차게 함 (boolean)
-  mobileFullover: 'data-mobile-fullover',
-} as const;

package/src/Gnb/css.tsx

@@ -1,94 +0,0 @@
-import { css } from 'styled-components';
-
-import {
-  contents000,
-  contents100,
-  contents150,
-  contents999,
-  mobileOnly,
-  primary100,
-} from '@remember-web/mixin';
-
-export const fullPopoverContentCss = css`
-  position: relative;
-  box-sizing: border-box;
-
-  max-height: calc(var(--radix-popper-available-height) - 16px);
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-
-  background-color: ${contents999};
-`;
-
-export const dataResponsiveCss = css`
-  [data-only-mobile='true'] {
-    display: none;
-  }
-
-  // 모바일 반응형 스타일
-  ${mobileOnly(css`
-    [data-only-desktop='true'] {
-      display: none;
-    }
-    [data-only-mobile='true'] {
-      display: inherit;
-    }
-  `)}
-`;
-
-export const defaultGridButtonCss = css`
-  // reset
-  -webkit-appearance: none;
-  text-align: inherit;
-  box-shadow: none;
-  padding: 0;
-  border: none;
-  font: inherit;
-  appearance: none;
-
-  box-sizing: border-box;
-
-  display: grid;
-  place-items: center;
-
-  cursor: pointer;
-  border-radius: 4px;
-  outline: none;
-
-  color: ${primary100};
-  background: ${contents999};
-`;
-export const defaultInteractiveButton = css`
-  ${defaultGridButtonCss};
-
-  &:hover {
-    color: ${contents100};
-  }
-
-  &:active {
-    color: ${contents150};
-  }
-`;
-
-export const defaultNaviLinkCss = css`
-  box-sizing: border-box;
-  text-decoration: none;
-  color: ${contents000};
-
-  &:focus-visible {
-    outline: none;
-  }
-`;
-export const naviLinkCss = css`
-  ${defaultNaviLinkCss};
-
-  transition: color 0.1s;
-  will-change: color;
-
-  &:hover,
-  &:focus-visible {
-    color: ${contents150};
-  }
-`;

package/src/Gnb/index.tsx

@@ -1,70 +0,0 @@
-import type { ForwardedRef } from 'react';
-import React, { forwardRef } from 'react';
-import {
-  GnbNaviLink,
-  StyledDefaultIconButton,
-  StyledGnbAccountActionContainer,
-  StyledGnbContent,
-  StyledGnbContentLeft,
-  StyledGnbContentRight,
-  StyledGnbLoginButton,
-  StyledGnbRoot,
-} from '@/Gnb/style';
-
-import type { GetStyledComponentProps } from '@remember-web/shared/types/styles';
-import { IconCloseM } from '@remember-web/icon';
-import { StyledGnbSubTextLink } from '@/Gnb/parts/GnbHamburgerMenu/style';
-
-import { dataAttrs } from './const';
-
-export * from './parts/GnbHoverSubNavi';
-export * from './parts/GnbHamburgerMenu';
-export * from './parts/GnbNotification';
-export * from './parts/GnbProfile';
-
-export { GNB_VARS, dataAttrs } from './const';
-
-export { StyledDefaultIconButton } from '@/Gnb/style';
-
-export const Gnb = Object.assign(
-  forwardRef(
-    (
-      { children, ...props }: GetStyledComponentProps<typeof StyledGnbRoot>,
-      ref: ForwardedRef<HTMLHeadingElement>
-    ) => (
-      <>
-        <StyledGnbRoot ref={ref} {...props}>
-          {children}
-        </StyledGnbRoot>
-        <div className="gnb-spacer" />
-      </>
-    )
-  ),
-  {
-    NaviLink: GnbNaviLink,
-    Content: StyledGnbContent,
-    ContentLeft: StyledGnbContentLeft,
-    ContentRight: StyledGnbContentRight,
-    ActionContainer: StyledGnbAccountActionContainer,
-    LoginButton: StyledGnbLoginButton,
-    SubLinkText: StyledGnbSubTextLink,
-    CloseButton: <As,>(
-      props: Omit<
-        GetStyledComponentProps<typeof StyledDefaultIconButton, As>,
-        'children'
-      >
-    ) => (
-      <StyledDefaultIconButton
-        {...{
-          [dataAttrs.onlyMobile]: true,
-          [dataAttrs.mobilePopoverCloseButton]: true,
-        }}
-        {...props}
-      >
-        <IconCloseM />
-      </StyledDefaultIconButton>
-    ),
-  }
-);
-
-Gnb.displayName = 'Gnb';

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

@@ -1,37 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import type { GetStyledComponentProps } from '@remember-web/shared/types';
-import { IconArrow2Right } from '@remember-web/icon';
-import { contents150, getTypographyStyles } from '@remember-web/mixin';
-import type { StyledDropdownMenuItemProps } from '@/Floating/DropdownMenu/styles';
-import { getDropdownMenuItemCss } from '@/Floating/DropdownMenu/styles';
-
-export const GnbDropdownLinkItem = <As,>({
-  children,
-  hasArrow = true,
-  ...props
-}: GetStyledComponentProps<typeof StyledGnbDropdownLinkItem, As> & {
-  hasArrow?: boolean;
-}) => (
-  <StyledGnbDropdownLinkItem {...props}>
-    {children}
-    {hasArrow && <IconArrow2Right size={16} color={contents150} />}
-  </StyledGnbDropdownLinkItem>
-);
-
-export const StyledGnbDropdownLinkItem = styled.a<StyledDropdownMenuItemProps>(
-  (props) => [
-    getDropdownMenuItemCss(props),
-    css`
-      box-sizing: border-box;
-      display: flex;
-      gap: 2px;
-
-      ${getTypographyStyles('ArticleBody')};
-
-      svg {
-        margin-left: auto;
-      }
-    `,
-  ]
-);

package/src/Gnb/parts/GnbHamburgerMenu/GnbHamburger.stories.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Flex } from '@';
-import { secondary100 } from '@remember-web/mixin';
-import { StyledGnbSubTextLink } from '@/Gnb/parts/GnbHamburgerMenu/style';
-import { GnbHamburgerMenu, GnbProfile } from '@/Gnb';
-
-type Story = StoryObj<typeof GnbHamburgerMenu>;
-const meta = {
-  parameters: { layout: 'fullscreen' },
-  title: 'Gnb/Gnb/Hamburger',
-} satisfies Meta<typeof GnbHamburgerMenu>;
-
-export default meta;
-
-export const Default: Story = {
-  render() {
-    return (
-      <div style={{ minHeight: 300, padding: 24 }}>
-        <GnbHamburgerMenu>
-          <GnbHamburgerMenu.Content data-mobile-fullover>
-            <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, padding: '0 12px' }}
-                  gap={12}
-                >
-                  <Flex>
-                    <StyledGnbSubTextLink href="/">
-                      채용 솔루션
-                    </StyledGnbSubTextLink>
-                  </Flex>
-                  <Flex>
-                    <StyledGnbSubTextLink href="/">
-                      헤드헌팅
-                    </StyledGnbSubTextLink>
-                  </Flex>
-                  <Flex>
-                    <StyledGnbSubTextLink href="/">
-                      전문가 인터뷰
-                    </StyledGnbSubTextLink>
-                    &nbsp;|&nbsp;
-                    <StyledGnbSubTextLink href="/">
-                      리서치 서비스
-                    </StyledGnbSubTextLink>
-                  </Flex>
-                  <Flex>
-                    <StyledGnbSubTextLink href="/">광고</StyledGnbSubTextLink>
-                  </Flex>
-                  <Flex>
-                    <StyledGnbSubTextLink href="/">
-                      기업용 명함 관리
-                    </StyledGnbSubTextLink>
-                  </Flex>
-                </Flex>
-              </GnbHamburgerMenu.Accordion>
-            </GnbHamburgerMenu.Section>
-            <GnbProfile.Section data-only-desktop>
-              <GnbProfile.LinkItem href="#" style={{ color: secondary100 }}>
-                로그아웃
-              </GnbProfile.LinkItem>
-            </GnbProfile.Section>
-          </GnbHamburgerMenu.Content>
-        </GnbHamburgerMenu>
-      </div>
-    );
-  },
-} as const;

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

@@ -1,48 +0,0 @@
-import React, { type PropsWithChildren, type ReactNode } from 'react';
-
-import { DropdownMenu } from '@';
-import { StyledDefaultIconButton } from '@/Gnb/style';
-import {
-  StyledGnbDropdownSpecialLinkItem,
-  StyledGnbSubTextLink,
-  StyledHamburgerMenuContent,
-} from '@/Gnb/parts/GnbHamburgerMenu/style';
-import { IconHamburgerM } from '@remember-web/icon';
-import type { GetStyledComponentProps } from '@remember-web/shared/types/styles';
-import { GnbHamburgerAccordion } from '@/Gnb/parts/GnbHamburgerMenu/parts/GnbHamburgerAccordion';
-import type { DropdownMenuProps } from '@/Floating/DropdownMenu';
-
-import { GnbDropdownLinkItem } from '../GnbDropdownLinkItem';
-
-export type GnbHamburgerMenuProps = PropsWithChildren<
-  {
-    ButtonSlot?: ReactNode;
-  } & DropdownMenuProps
->;
-
-export const GnbHamburgerMenu = ({
-  children,
-  ButtonSlot = <GnbHamburgerMenu.Button />,
-  ...props
-}: GnbHamburgerMenuProps) => (
-  <DropdownMenu {...props}>
-    {ButtonSlot}
-    {children}
-  </DropdownMenu>
-);
-
-GnbHamburgerMenu.Content = StyledHamburgerMenuContent;
-GnbHamburgerMenu.Section = DropdownMenu.Section;
-GnbHamburgerMenu.SpecialLinkItem = StyledGnbDropdownSpecialLinkItem;
-GnbHamburgerMenu.Accordion = GnbHamburgerAccordion;
-GnbHamburgerMenu.AccordionSubLink = StyledGnbSubTextLink;
-GnbHamburgerMenu.Button = (
-  props: GetStyledComponentProps<typeof StyledDefaultIconButton>
-) => (
-  <DropdownMenu.Trigger>
-    <StyledDefaultIconButton data-is-mobile-popover-hidden {...props}>
-      <IconHamburgerM />
-    </StyledDefaultIconButton>
-  </DropdownMenu.Trigger>
-);
-GnbHamburgerMenu.LinkItem = GnbDropdownLinkItem;

package/src/Gnb/parts/GnbHamburgerMenu/parts/GnbHamburgerAccordion.tsx

@@ -1,20 +0,0 @@
-import { StyledGnbAccordion } from '@/Gnb/parts/GnbHamburgerMenu/style';
-import type { GetStyledComponentProps } from '@remember-web/shared/types/styles';
-
-import { GnbDropdownLinkItem } from '../../GnbDropdownLinkItem';
-
-export type GnbHamburgerAccordionProps = GetStyledComponentProps<
-  typeof StyledGnbAccordion
-> & {
-  summary: string;
-};
-export const GnbHamburgerAccordion = ({
-  summary,
-  children,
-  ...props
-}: GnbHamburgerAccordionProps) => (
-  <StyledGnbAccordion {...props}>
-    <GnbDropdownLinkItem as="summary">{summary}</GnbDropdownLinkItem>
-    {children}
-  </StyledGnbAccordion>
-);

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

@@ -1,99 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { fullPopoverContentCss } from '@/Gnb/css';
-import {
-  contents100,
-  getTypographyStyles,
-  secondary100,
-} from '@remember-web/mixin';
-import {
-  dropdownMenuItemCSS,
-  getDropdownMenuItemCss,
-  StyledDropdownMenuContent,
-} from '@/Floating/DropdownMenu/styles';
-import { GnbDropdownLinkItem } from '@/Gnb/parts/GnbDropdownLinkItem';
-
-export const StyledHamburgerMenuContent = styled(StyledDropdownMenuContent)`
-  ${fullPopoverContentCss};
-`;
-
-export const StyledGnbDropdownSpecialLinkItem = styled(GnbDropdownLinkItem)(
-  (props) => [
-    getDropdownMenuItemCss(props),
-    css`
-      box-sizing: border-box;
-      display: flex;
-      gap: 4px;
-
-      && {
-        color: ${secondary100};
-      }
-
-      svg {
-        margin-left: 4px;
-      }
-      // line 없앰
-      &::before {
-        display: none !important;
-      }
-
-      ${getTypographyStyles('ArticleBody')};
-      font-weight: 500;
-    `,
-  ]
-);
-
-export const StyledGnbAccordion = styled.details`
-  display: flex;
-  box-sizing: border-box;
-  list-style-type: none;
-  cursor: pointer;
-  padding-bottom: 12px;
-
-  ${getTypographyStyles('Body1')};
-  font-weight: 500;
-  color: ${contents100};
-
-  svg {
-    transition: transform 0.2s ease-out;
-    will-change: transform;
-    transform: rotateZ(90deg);
-  }
-
-  summary {
-    ${dropdownMenuItemCSS};
-
-    gap: 2px;
-
-    ${getTypographyStyles('ArticleBody')};
-    font-weight: 500;
-  }
-  &[open] {
-    summary {
-      font-weight: 600;
-
-      svg {
-        transform: rotateZ(-90deg);
-      }
-    }
-  }
-
-  summary::-webkit-details-marker {
-    display: none;
-  }
-`;
-
-export const StyledGnbSubTextLink = styled.a`
-  display: inline-block;
-  border-radius: unset;
-  text-decoration: none;
-  color: inherit;
-  &:focus-visible {
-    outline: none;
-  }
-
-  &:hover,
-  &:focus-visible {
-    font-weight: 600;
-  }
-`;

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

@@ -1,47 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { GnbHoverSubNavi } from '@/Gnb';
-import { GnbNaviLink } from '@/Gnb/style';
-
-type Story = StoryObj<typeof GnbHoverSubNavi>;
-const meta = {
-  parameters: { layout: 'fullscreen' },
-  title: 'Gnb/Gnb/HoverSubNavi',
-} satisfies Meta<typeof GnbHoverSubNavi>;
-
-export default meta;
-
-export const Default: Story = {
-  render() {
-    const [isOpenSubNavi, setIsOpenSubNavi] = useState(false);
-    return (
-      <div style={{ minHeight: 300, padding: 24 }}>
-        <GnbHoverSubNavi
-          open={isOpenSubNavi}
-          onMouseEnter={() => setIsOpenSubNavi(true)}
-          onMouseLeave={() => setIsOpenSubNavi(false)}
-          ButtonSlot={
-            <GnbNaviLink style={{ height: 60 }} href="/">
-              인재검색
-            </GnbNaviLink>
-          }
-        >
-          <GnbHoverSubNavi.Content>
-            <GnbHoverSubNavi.Item href="/">인재검색</GnbHoverSubNavi.Item>
-            <GnbHoverSubNavi.Item href="/">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>
-      </div>
-    );
-  },
-} as const;

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

@@ -1,45 +0,0 @@
-import type { MouseEventHandler } from 'react';
-import React from 'react';
-
-import { Popover } from '@';
-import type { GetStyledComponentProps } from '@remember-web/shared/types';
-import type { PopoverProps } from '@/Floating/Popover';
-
-import {
-  StyledGnbHoverNaviWrapper,
-  StyledGnbHoverSubNaviContent,
-  StyledGnbHoverSubNaviItem,
-} from './style';
-
-export type GnbHoverSubNaviProps = PopoverProps & {
-  open: PopoverProps['open'];
-  onMouseEnter: MouseEventHandler<HTMLDivElement>;
-  onMouseLeave: MouseEventHandler<HTMLDivElement>;
-  ButtonSlot: React.ReactNode;
-  wrapperProps?: GetStyledComponentProps<typeof StyledGnbHoverNaviWrapper>;
-};
-
-export const GnbHoverSubNavi = ({
-  onMouseEnter,
-  onMouseLeave,
-  ButtonSlot,
-  children,
-  wrapperProps,
-  ...props
-}: GnbHoverSubNaviProps) => (
-  <StyledGnbHoverNaviWrapper
-    onMouseLeave={onMouseLeave}
-    onMouseEnter={onMouseEnter}
-    style={{ height: '100%' }}
-    {...wrapperProps}
-  >
-    <Popover {...props}>
-      <Popover.Trigger>{ButtonSlot}</Popover.Trigger>
-      {children}
-    </Popover>
-  </StyledGnbHoverNaviWrapper>
-);
-
-GnbHoverSubNavi.Content = StyledGnbHoverSubNaviContent;
-GnbHoverSubNavi.Close = Popover.Close;
-GnbHoverSubNavi.Item = StyledGnbHoverSubNaviItem;

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

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-
-import { naviLinkCss } from '@/Gnb/css';
-import { bg200 } from '@remember-web/mixin';
-import { Popover } from '@';
-
-export const StyledGnbHoverSubNaviItem = styled.a<{
-  'data-active'?: boolean;
-}>`
-  ${naviLinkCss};
-
-  display: flex;
-  align-items: center;
-  height: 44px;
-  padding: 0 12px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-
-  &:hover,
-  &:focus-visible {
-    color: inherit;
-    background-color: ${bg200};
-  }
-  &[data-active='true'] {
-    font-weight: 600;
-  }
-`;
-
-export const StyledGnbHoverSubNaviContent = styled(Popover.Content)`
-  min-width: 170px;
-  padding: 8px 0;
-`;
-StyledGnbHoverSubNaviContent.defaultProps = {
-  alignOffset: 8,
-  sideOffset: -12,
-};
-
-export const StyledGnbHoverNaviWrapper = styled.div`
-  height: 100%;
-  position: relative;
-  z-index: 1;
-`;