@remember-web/primitive 0.0.0-alpha.1

package/src/Gnb/const.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+/* 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

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

@@ -0,0 +1,42 @@
+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;
+`;