@remember-web/primitive 0.0.0-alpha.1

package/src/Logos/RememberLogo/index.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import type { EnvType } from '../EnvLabel';
+import { getEnvLabel } from '../EnvLabel';
+import type { RememberLogoProps } from '../types';
+
+export const getViewBoxWidth = (env?: EnvType): number => {
+  switch (env) {
+    case 'bravo':
+    case 'alpha':
+    case 'development':
+      return 161;
+    case 'test':
+      return 149;
+    case 'production':
+    case 'final':
+    default:
+      return 122;
+  }
+};
+
+export const RememberLogo = ({
+  className,
+  color = 'white',
+  height = 20,
+  env,
+  customElement,
+  ref,
+  ...props
+}: RememberLogoProps) => (
+  <div
+    {...props}
+    ref={ref}
+    style={{
+      width: 'fit-content',
+      height,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4px',
+    }}
+  >
+    <svg
+      className={className}
+      height="100%"
+      viewBox={`0 0 ${getViewBoxWidth(env)} 20`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="none"
+    >
+      <path
+        d="M7.27363 0H0V19.4971H5.42847V1.33647C7.83299 1.67247 9.08406 2.80058 9.57678 4.71425C9.93249 6.09389 9.77387 8.14552 8.83252 9.42662L9.19292 9.91278C12.9883 9.87805 15.1019 7.80483 14.9658 4.92072C14.8082 1.56735 11.7532 0 7.27363 0Z"
+        fill={color}
+      />
+      <path
+        d="M12.4168 11.0052L6.95358 10.9818C6.89475 11.0503 6.85933 11.0913 6.82438 11.1317L6.82242 11.134L6.6908 11.2868L10.6645 19.5365H16.5022L16.5617 19.4436L16.6414 19.319C16.6602 19.2896 16.6813 19.2568 16.7077 19.2155L12.4168 11.0052Z"
+        fill={color}
+      />
+      <path
+        d="M63.4147 5.42002V19.513H68.0211V8.87664C68.0211 8.87664 68.526 8.06387 69.198 8.05167C69.7836 8.04041 70.2116 8.43459 70.2116 9.17697V19.513H74.8348V9.0268C74.8348 9.0268 75.3698 8.05824 76.0859 8.05073C76.6706 8.04416 77.0404 8.58475 77.0404 9.32713V19.5121H81.6476V8.35012C81.6476 5.8968 79.8419 4.92729 78.0174 5.16944C76.007 5.43692 74.7672 7.35997 74.7672 7.35997C74.4894 5.71285 72.801 4.82875 70.9643 5.16944C69.3144 5.47634 67.9769 7.35997 67.9769 7.35997L67.9094 5.42002H63.4147Z"
+        fill={color}
+      />
+      <path
+        d="M29.9101 19.513V5.42002H34.4047L34.4723 7.35997C34.4723 7.35997 35.8097 5.47634 37.4596 5.16944C39.2963 4.82875 40.9848 5.71285 41.2626 7.35997C41.2626 7.35997 42.5024 5.43692 44.5127 5.16944C46.3372 4.92729 48.143 5.8968 48.143 8.35012V19.5121H43.5357V9.32713C43.5357 8.58475 43.1659 8.04416 42.5812 8.05073C41.8651 8.05824 41.3301 9.0268 41.3301 9.0268V19.513H36.7079V9.17697C36.7079 8.43459 36.2799 8.04041 35.6943 8.05167C35.0223 8.06387 34.5173 8.87664 34.5173 8.87664V19.513H29.9101Z"
+        fill={color}
+      />
+      <path
+        d="M116.854 9.17415C116.854 9.17415 117.163 8.20747 117.268 7.91464C118.037 5.77761 119.599 5.03992 122.01 5.08685V9.79359C122.01 9.79359 119.514 9.67815 118.645 9.9597C117.376 10.3717 116.875 11.2474 116.875 12.6233V19.5121H111.846V5.42002H116.706V9.17415H116.854Z"
+        fill={color}
+      />
+      <path
+        d="M92.1423 5.09717C90.7232 5.03804 89.7077 5.7288 89.3004 6.38671V6.95452C92.0062 7.26424 92.1019 11.2661 92.1019 12.4553C92.1019 14.1728 91.8588 16.0724 90.9832 17.3065C90.1244 18.5172 88.9757 18.566 88.2586 18.4375V0.459879L88.2007 0.418275C88.0909 0.33937 88.0313 0.296529 87.9029 0.20366L83.3539 1.72408V19.2099C84.9832 19.6116 87.7922 20.2132 90.4107 19.9241C94.5496 19.467 96.9748 16.5473 96.9748 11.9935C96.9748 8.39986 95.4825 5.23701 92.1423 5.09717Z"
+        fill={color}
+      />
+      <path
+        d="M23.9579 9.50452C24.1419 8.01788 23.5647 6.59976 22.3802 6.56316C20.6806 6.51154 19.8847 9.06434 20.4328 12.1615C20.7294 13.8358 21.7852 15.4567 23.392 16.1315C24.7078 16.6843 26.7885 16.5613 28.0968 15.8537L28.46 16.3605C27.1414 19.3216 24.2977 20.2911 21.7214 19.8781C18.5576 19.3713 16.0311 16.7819 15.8499 12.7772C15.6275 7.87241 18.5276 5.08778 22.5295 5.08778C25.6914 5.09811 28.9781 7.66781 28.6431 12.7134H22.1174V11.9775C22.9649 11.6162 23.819 10.6251 23.9579 9.50452Z"
+        fill={color}
+      />
+      <path
+        d="M55.8727 6.56316C57.0571 6.59976 57.6343 8.01788 57.4504 9.50452C57.3115 10.6251 56.4574 11.6162 55.6099 11.9775V12.7134H62.1355C62.4706 7.66781 59.1838 5.09811 56.0219 5.08778C52.02 5.08778 49.12 7.87241 49.3424 12.7772C49.5235 16.7819 52.0501 19.3713 55.2138 19.8781C57.7901 20.2911 60.6339 19.3216 61.9525 16.3605L61.5893 15.8537C60.281 16.5613 58.2003 16.6843 56.8844 16.1315C55.2777 15.4567 54.2218 13.8358 53.9252 12.1615C53.3771 9.06434 54.173 6.51154 55.8727 6.56316Z"
+        fill={color}
+      />
+      <path
+        d="M106.004 9.50452C106.188 8.01788 105.611 6.59976 104.427 6.56316C102.727 6.51154 101.931 9.06434 102.479 12.1615C102.776 13.8358 103.832 15.4567 105.438 16.1315C106.754 16.6843 108.835 16.5613 110.143 15.8537L110.507 16.3605C109.188 19.3216 106.344 20.2911 103.768 19.8781C100.604 19.3713 98.0776 16.7819 97.8964 12.7772C97.674 7.87241 100.574 5.08778 104.576 5.08778C107.738 5.09811 111.025 7.66781 110.69 12.7134H104.164V11.9775C105.011 11.6162 105.865 10.6251 106.004 9.50452Z"
+        fill={color}
+      />
+      {getEnvLabel(env)}
+    </svg>
+    {customElement}
+  </div>
+);

package/src/Logos/RememberMobileLogo/RememberMobileLogo.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { RememberMobileLogo } from '.';
+
+type Story = StoryObj<typeof RememberMobileLogo>;
+
+const meta = {
+  title: 'Logos/RememberMobileLogo',
+  component: RememberMobileLogo,
+  args: {
+    color: 'black',
+    height: 20,
+    customElement: '기업용 서비스',
+  },
+} satisfies Meta<typeof RememberMobileLogo>;
+
+export const Default: Story = {
+  render: (args) => <RememberMobileLogo {...args} />,
+};
+
+export default meta;

package/src/Logos/RememberMobileLogo/index.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import type { RememberLogoProps } from '../types';
+
+export const RememberMobileLogo = ({
+  className,
+  color = 'white',
+  height = 20,
+  customElement,
+  ref,
+  ...props
+}: RememberLogoProps) => (
+  <div
+    {...props}
+    ref={ref}
+    style={{
+      width: 'fit-content',
+      height,
+      display: 'flex',
+      alignItems: 'flex-end',
+    }}
+  >
+    <svg
+      className={className}
+      height="100%"
+      viewBox="0 0 17 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="none"
+    >
+      <path
+        d="M7.40069 0H0V19.9594H5.52411V1.36773C7.96998 1.71095 9.24353 2.86611 9.74532 4.82507C10.1077 6.23782 9.9456 8.33776 8.98823 9.64939L9.35504 10.1476C13.2168 10.1122 15.3677 7.98937 15.2291 5.03691C15.067 1.60466 11.9586 0 7.40069 0Z"
+        fill={color}
+      />
+      <path
+        d="M12.6335 11.2666L7.07494 11.2423C6.95243 11.3854 6.92969 11.412 6.80718 11.5545L10.8501 20H16.7902C16.8354 19.9292 16.865 19.8827 16.8945 19.8363L16.8952 19.8353C16.9249 19.7886 16.9546 19.742 17 19.6708L12.6335 11.2666Z"
+        fill={color}
+      />
+    </svg>
+    {customElement}
+  </div>
+);

package/src/Logos/RememberServiceLogo/RememberServiceLogo.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { RememberServiceLogo } from '.';
+
+type Story = StoryObj<typeof RememberServiceLogo>;
+
+const meta = {
+  title: 'Logos/RememberServiceLogo',
+  component: RememberServiceLogo,
+  args: {
+    label: '채용솔루션',
+  },
+} satisfies Meta<typeof RememberServiceLogo>;
+
+export const Default: Story = {};
+
+export default meta;

package/src/Logos/RememberServiceLogo/index.tsx

@@ -0,0 +1,30 @@
+import type { RememberLogoProps } from '@/Logos/types';
+
+import { Divider } from '@/Common';
+import { GetStyledComponentProps } from '@remember-web/shared/types';
+import { RememberLogo } from '../RememberLogo';
+import { StyledServiceLogoRoot } from './style';
+
+export type GnbNaviLogoProps<As> = GetStyledComponentProps<
+  typeof StyledServiceLogoRoot,
+  As
+> & {
+  label?: string;
+  color?: RememberLogoProps['color'];
+};
+
+export const RememberServiceLogo = <As,>({
+  label,
+  color = 'black',
+  ...props
+}: GnbNaviLogoProps<As>) => (
+  <StyledServiceLogoRoot {...props}>
+    <RememberLogo color={color} />
+    {label && (
+      <>
+        <Divider decorative orientation="vertical" style={{ height: '15px' }} />
+        <b>{label}</b>
+      </>
+    )}
+  </StyledServiceLogoRoot>
+);

package/src/Logos/RememberServiceLogo/style.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+import { contents000, getTypographyStyles } from '@remember-web/mixin';
+
+export const StyledServiceLogoRoot = styled.a`
+  box-sizing: border-box;
+  text-decoration: none;
+  color: ${contents000};
+
+  display: flex;
+  align-items: end;
+  gap: 8px;
+
+  > b {
+    ${getTypographyStyles('Title2')};
+    text-decoration: none;
+    line-height: 16px;
+  }
+`;

package/src/Logos/RememberSquareLogo/RememberSquareLogo.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { RememberSquareLogo } from '.';
+
+type Story = StoryObj<typeof RememberSquareLogo>;
+
+const meta = {
+  title: 'Logos/RememberSquareLogo',
+  component: RememberSquareLogo,
+  args: {
+    color: 'black',
+    height: 20,
+  },
+} satisfies Meta<typeof RememberSquareLogo>;
+
+export const Default: Story = {
+  render: (args) => <RememberSquareLogo {...args} />,
+};
+
+export default meta;

package/src/Logos/RememberSquareLogo/index.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import type { RememberLogoProps } from '../types';
+
+export const RememberSquareLogo = ({
+  className,
+  backgroundColor = '#F7F7EF',
+  color = 'black',
+  height = 20,
+  customElement,
+  ref,
+  ...props
+}: RememberLogoProps) => (
+  <div
+    {...props}
+    ref={ref}
+    style={{
+      width: 'fit-content',
+      height,
+      display: 'flex',
+      alignItems: 'flex-end',
+    }}
+  >
+    <svg
+      className={className}
+      height="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_222_7)">
+        <path
+          d="M18 0H2C0.895431 0 0 0.895431 0 2V18C0 19.1046 0.895431 20 2 20H18C19.1046 20 20 19.1046 20 18V2C20 0.895431 19.1046 0 18 0Z"
+          fill={backgroundColor}
+        />
+        <path
+          d="M12.919 10.7305L9.70869 10.7153C9.63269 10.7913 9.63269 10.8067 9.55652 10.8978L11.8995 15.7513H15.338C15.3837 15.6753 15.414 15.6448 15.4597 15.5688L12.9189 10.7305H12.919Z"
+          fill={color}
+        />
+        <path
+          d="M9.8913 4.24895H5.61597V15.7208H8.81097V5.02495C10.226 5.22278 10.9563 5.89211 11.2453 7.01811C11.4583 7.82445 11.367 9.04161 10.8041 9.78711L11.0171 10.0761C13.2536 10.0609 14.5013 8.82845 14.41 7.13961C14.334 5.17695 12.5386 4.24878 9.89113 4.24878L9.8913 4.24895Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_222_7">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+    {customElement}
+  </div>
+);

package/src/Logos/index.ts

@@ -0,0 +1,4 @@
+export * from './RememberLogo';
+export * from './RememberMobileLogo';
+export * from './RememberSquareLogo';
+export * from './RememberServiceLogo';

package/src/Logos/types.ts

@@ -0,0 +1,12 @@
+import type { EnvType } from './EnvLabel';
+
+export interface RememberLogoProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  ref?: React.Ref<HTMLDivElement>;
+  className?: string;
+  color?: 'white' | 'black' | string;
+  height?: number;
+  env?: EnvType;
+  customElement?: React.ReactNode;
+  backgroundColor?: string;
+}

package/src/Modals/Dialog/Dialog.stories.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable no-console */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Flex } from '@/Common';
+import { Button } from '@/Buttons';
+
+import { Dialog } from '.';
+
+type Story = StoryObj<typeof Dialog>;
+
+const meta = {
+  title: 'Modals/Dialog',
+  component: DialogComponent,
+} satisfies Meta<typeof DialogComponent>;
+
+export const Default: Story = { render: () => <DialogComponent /> };
+
+export default meta;
+
+function DialogComponent() {
+  return (
+    <Dialog>
+      <Dialog.Trigger asChild>
+        <button type="button">Open Dialog</button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.CloseIcon />
+        {/* <Dialog.HeadIcon /> */}
+        <Dialog.Title>Title</Dialog.Title>
+        <Dialog.Description>all description in here</Dialog.Description>
+        <Flex gap="10px" width="100%">
+          <Dialog.Close asChild>
+            <Button
+              variant="outline"
+              size="large"
+              onClick={() => console.log('확인')}
+            >
+              확인
+            </Button>
+          </Dialog.Close>
+          <Dialog.Close asChild>
+            <Button
+              variant="primary"
+              size="large"
+              onClick={() => console.log('취소')}
+            >
+              취소
+            </Button>
+          </Dialog.Close>
+        </Flex>
+      </Dialog.Content>
+    </Dialog>
+  );
+}

package/src/Modals/Dialog/index.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';
+import { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';
+
+import { Flex } from '@/Common/Flex';
+import { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';
+
+import {
+  DialogContent,
+  DialogDescription,
+  DialogIcon,
+  DialogTitle,
+  IconButton,
+  StyledOverlay,
+} from './styles';
+
+interface ContentProps extends DialogContentProps {
+  children: React.ReactNode;
+  dimmed?: boolean;
+}
+
+/**
+ * @prop {React.ReactNode} children
+ * @prop {boolean} open
+ * @prop {boolean} defaultOpen
+ * @prop {(open: boolean) => void} onOpenChange
+ * @prop {boolean} modal
+ * @prop {string} id
+ */
+export function Dialog({ children, ...props }: DialogProps) {
+  return <Root {...props}>{children}</Root>;
+}
+
+/**
+ * @prop {boolean} dimmed
+ * @see https://www.radix-ui.com/docs/primitives/components/dialog
+ */
+Dialog.Content = ({ children, dimmed = true, ...props }: ContentProps) => (
+  <Portal>
+    {dimmed && <StyledOverlay />}
+    <DialogContent {...props}>
+      <Flex direction="column" align="center">
+        {children}
+      </Flex>
+    </DialogContent>
+  </Portal>
+);
+
+Dialog.HeadIcon = ({ type = 'alert' }: { type?: 'alert' | 'confirm' }) => (
+  <DialogIcon>
+    {type === 'alert' && <PictogramAlert size={40} />}
+    {type === 'confirm' && <PictogramCheck size={40} />}
+  </DialogIcon>
+);
+
+Dialog.CloseIcon = () => (
+  <Close asChild>
+    <IconButton type="button" aria-label="Close">
+      <IconClose size="small" />
+    </IconButton>
+  </Close>
+);
+
+Dialog.Title = ({ children }: { children: React.ReactNode }) => (
+  <DialogTitle>{children}</DialogTitle>
+);
+
+Dialog.Description = ({ children }: { children: React.ReactNode }) => (
+  <DialogDescription>{children}</DialogDescription>
+);
+
+Dialog.Trigger = Trigger;
+Dialog.Close = Close;

package/src/Modals/Dialog/styles.ts

@@ -0,0 +1,81 @@
+'use client';
+
+import styled, { keyframes } from 'styled-components';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+import { primary200, contents000, contents100 } from '@remember-web/mixin';
+import { getTypographyStyles } from '@remember-web/mixin';
+
+export const overlayShow = keyframes`
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+`;
+
+export const contentShow = keyframes`
+  0% { opacity: 0; transform: translate(-50%, -48%) scale(.96) }
+  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) }
+`;
+
+export const StyledOverlay = styled(DialogPrimitive.Overlay)`
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+`;
+
+export const DialogContent = styled(DialogPrimitive.Content)`
+  box-sizing: border-box;
+  background-color: ${primary200};
+  border-radius: 8px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 360px;
+  min-width: 300px;
+  max-height: 85vh;
+  padding: 32px 24px 24px;
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+`;
+
+export const DialogIcon = styled.div`
+  margin-bottom: 16px;
+`;
+
+export const IconButton = styled.button`
+  all: unset;
+  height: 16px;
+  width: 16px;
+  margin: -8px 0 8px 0;
+  align-self: flex-end;
+  cursor: pointer;
+`;
+
+export const DialogTitle = styled(DialogPrimitive.Title)`
+  ${getTypographyStyles('Headline4_B')}
+
+  color: ${contents000};
+  margin: 0;
+  padding: 0;
+  white-space: pre-line;
+`;
+
+export const DialogDescription = styled(DialogPrimitive.Description)`
+  ${getTypographyStyles('Body1_M')}
+
+  color: ${contents100};
+  margin: 4px 0 24px;
+  text-align: center;
+  white-space: pre-line;
+`;

package/src/Modals/index.ts

@@ -0,0 +1 @@
+export * from './Dialog';

package/src/Paginations/CompactPagination/CompactPagination.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { CompactPagination } from '.';
+
+type Story = StoryObj<typeof CompactPagination>;
+
+const meta = {
+  title: 'Common/CompactPagination',
+  component: CompactPagination,
+  args: {
+    totalItemCount: 100,
+    itemCountPerPage: 10,
+    infinite: true,
+    className: 'CompactPagination',
+  },
+} satisfies Meta<typeof CompactPagination>;
+
+export const Basic: Story = {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [pageNumber1, setPageNumber1] = useState(1);
+
+    return (
+      <CompactPagination
+        {...args}
+        onChangePage={(page) => {
+          setPageNumber1(page);
+        }}
+        activePage={pageNumber1}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/Paginations/CompactPagination/index.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';
+import { Flex } from '@/Common/Flex';
+import { contents000, contents300 } from '@remember-web/mixin';
+
+import {
+  ArrowButton,
+  CompactPaginationContainer,
+  CurrentPage,
+} from '../styles';
+import type { CompactPaginationProps } from '../types';
+import usePagination from '../usePagination';
+
+export function CompactPagination({
+  activePage = 1,
+  totalItemCount = 0,
+  onChangePage,
+  itemCountPerPage,
+  infinite = false,
+  className,
+}: CompactPaginationProps) {
+  const {
+    totalLastPage,
+    prevPage,
+    nextPage,
+    isPrevPageDisabled,
+    isNextPageDisabled,
+  } = usePagination({
+    activePage,
+    totalItemCount,
+    pageRangeDisplayed: 1,
+    itemCountPerPage,
+  });
+
+  const iconColor = (disabled: boolean) =>
+    disabled ? contents300 : contents000;
+
+  const onClickPrevPage = () => {
+    const prevPageToGo =
+      activePage === 1 && infinite ? totalLastPage : prevPage;
+    onChangePage(prevPageToGo);
+  };
+
+  const onClickNextPage = () => {
+    const nextPageToGo =
+      activePage === totalLastPage && infinite ? 1 : nextPage;
+    onChangePage(nextPageToGo);
+  };
+
+  const hasOnlyOnePage = totalLastPage === 1;
+
+  const getArrowButtonDisabled = (disabled: boolean) => {
+    if (hasOnlyOnePage) {
+      return true;
+    }
+    if (infinite) {
+      return false;
+    }
+    return disabled;
+  };
+
+  const getArrowButtonColor = (disabled: boolean) => {
+    if (hasOnlyOnePage) {
+      return contents300;
+    }
+    if (infinite) {
+      return contents000;
+    }
+    return iconColor(disabled);
+  };
+
+  return (
+    <CompactPaginationContainer
+      className={className}
+      role="navigation"
+      aria-label="페이지네이션"
+    >
+      <ArrowButton
+        disabled={getArrowButtonDisabled(isPrevPageDisabled)}
+        onClick={onClickPrevPage}
+        aria-label="이전 페이지로 이동"
+      >
+        <IconArrow2Left
+          size="small"
+          color={getArrowButtonColor(isPrevPageDisabled)}
+          aria-hidden="true"
+        />
+      </ArrowButton>
+      <Flex gap="4px" style={{ minWidth: '44px', userSelect: 'none' }}>
+        <CurrentPage>{activePage}</CurrentPage>/ {totalLastPage}
+      </Flex>
+      <ArrowButton
+        disabled={getArrowButtonDisabled(isNextPageDisabled)}
+        onClick={onClickNextPage}
+        aria-label="다음 페이지로 이동"
+      >
+        <IconArrow2Right
+          size="small"
+          color={getArrowButtonColor(isNextPageDisabled)}
+          aria-hidden="true"
+        />
+      </ArrowButton>
+    </CompactPaginationContainer>
+  );
+}