@tripie-pyotato/design-system 0.0.0

package/src/components/TextUnderlineAnimation/text-underline.module.scss

@@ -0,0 +1,13 @@
+@use '../../mixins' as *;
+@use '../../variables' as *;
+
+.wrap {
+  width: fit-content;
+  cursor: pointer;
+  font-size: inherit;
+}
+
+.divider {
+  cursor: pointer;
+  background-color: transparent;
+}

package/src/components/TextUnderlineAnimation/variants.ts

@@ -0,0 +1,23 @@
+import COLORS from '../../shared/colors';
+import { MotionProps } from '../../shared/wrappers/motion-wrapper';
+
+export const TEXT_UNDERLINE_VARIANTS = {
+  DIVIDER: {
+    closed: () => ({
+      x: '0%',
+      width: '0%',
+      translateY: '-10px',
+      backgroundColor: 'transparent',
+    }),
+    open: () => ({
+      x: '0%',
+      backgroundColor: COLORS[50],
+      width: '100%',
+      transition: {
+        damping: 10,
+        stiffness: 100,
+        duration: 0.5,
+      },
+    }),
+  },
+} as MotionProps['variants'];

package/src/components/TripieButton/Animated/AnimateButton.spec.tsx

@@ -0,0 +1,84 @@
+import { render, screen } from '@testing-library/react';
+
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import AnimatedButton from './AnimatedButton';
+
+describe('AnimatedButton Component', () => {
+  it('텍스트가 하나의 텍스트 "button"만 있다.', () => {
+    render(<AnimatedButton>button</AnimatedButton>);
+
+    const buttonElement = screen.getByRole('button', { name: /button/i });
+
+    expect(buttonElement).toBeInTheDocument();
+    expect(buttonElement).toHaveTextContent('button');
+  });
+  it('텍스트가 디폴트 텍스트 "button"와 "other child"가 있다.', () => {
+    render(<AnimatedButton otherChild={'other child'}>button</AnimatedButton>);
+
+    const buttonElement = screen.getByRole('button', { name: /button/i });
+
+    expect(buttonElement).toBeInTheDocument();
+    expect(buttonElement).toHaveTextContent('button');
+    expect(buttonElement).toHaveTextContent('other child');
+  });
+
+  it('버튼에 마우스를 올리면 otherChild와 original text가 translateY(2rem)로 이동한다.', async () => {
+    render(<AnimatedButton otherChild="other child">original text</AnimatedButton>);
+
+    const buttonElement = screen.getByRole('button');
+
+    // 버튼 호버 시
+    await userEvent.hover(buttonElement);
+
+    const hoveredOriginalText = screen.getByText(/original text/i);
+    const hoveredChildText = screen.getByText(/original text/i);
+
+    expect(getComputedStyle(hoveredOriginalText).transform).toContain('translateY(2rem)');
+    expect(getComputedStyle(hoveredChildText).transform).toContain('translateY(2rem)');
+  });
+
+  it('disabled={true} 설정 시 비활성화된다.', () => {
+    render(<AnimatedButton disabled={true}>button</AnimatedButton>);
+
+    const buttonElement = screen.getByRole('button', { name: /button/i });
+
+    expect(buttonElement).toBeInTheDocument();
+    expect(buttonElement).toBeDisabled();
+  });
+  it('withBorder={true} 설정 시 버튼 테두리 스타일이 적용되어scss module이므로 className에 `with-border`가 포함된다.', () => {
+    render(<AnimatedButton withBorder={true}>button</AnimatedButton>);
+
+    const buttonElement = screen.getByRole('button', { name: /button/i });
+
+    expect(buttonElement).toBeInTheDocument();
+    expect(buttonElement.className).toMatch(/with-border/);
+  });
+
+  // ! 🤔 버튼 길이를 제한해야할듯, 텍스트가 너무 많으면 가독성도 안좋아지고 애니메이션도 깨진다. 어떻게 제한할까?
+  //   it('버튼이 긴 텍스트를 포함하고, 잘리지 않고, 크기가 조정된다.', () => {
+  //     const longText = 'Super long button text. max max max'.repeat(3); // 105자
+
+  //     render(<AnimatedButton>{longText}</AnimatedButton>);
+
+  //     const button = screen.getByRole('button');
+
+  //     // ✅ Ensure button contains full text
+  //     expect(button).toHaveTextContent(longText);
+
+  //     // ✅ Ensure button width expands (adjust 200px based on your design)
+  //     // expect(button.scrollWidth).toBeGreaterThan(200);
+
+  //     // ✅ Ensure text is not truncated (checks if scrollWidth > clientWidth)
+  //     // expect(button.scrollWidth).toBeGreaterThan(button.clientWidth);
+
+  //     expect(getComputedStyle(button).width).not.toBe('0px');
+
+  //     console.log(button.scrollWidth);
+
+  //     expect(button.textContent?.length).toBeGreaterThan(10);
+
+  //     // ✅ Optional: Ensure button text is under a reasonable limit (e.g., 30 chars)
+  //     expect(longText.length).toBeLessThanOrEqual(105);
+  //   });
+});

package/src/components/TripieButton/Animated/AnimatedButton.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { classNames, Motion } from '../../../shared/wrappers';
+import Text from '../../Text';
+import TripieContainer from '../../TripieContainer/TripieContainer';
+import Style from './animated-button.module.scss';
+
+const cx = classNames.bind(Style);
+
+const AnimatedButton = ({
+  children,
+  className,
+  disabled = false,
+  type = 'button',
+  otherChild = children,
+  withBorder = false,
+  onClick,
+  animate = 'rest',
+  withMinWidth = false,
+  selected=false
+}: Readonly<{
+  children: ReactNode;
+  disabled?: boolean;
+  otherChild?: ReactNode;
+  className?: string;
+  withBorder?: boolean;
+  type?: 'submit' | 'reset' | 'button';
+  onClick?: () => void;
+  animate?: 'rest' | 'hover';
+  withMinWidth?: boolean;
+  selected?:boolean;
+}>) => {
+  return (
+    <Motion.Button
+      disabled={disabled}
+      onTap={onClick}
+      type={type}
+      className={cx('button', withBorder && 'with-border', withMinWidth && 'min',className,selected?'selected':'')}
+      initial="rest"
+      whileHover={disabled ? 'rest' : 'hover'}
+      whileTap={disabled ? 'rest' : 'hover'}
+      animate={animate}
+    >
+      <Text.Flick>{children}</Text.Flick>
+      <span className={cx('gap')}>{' '}</span>
+      <Text.Flick className={cx('hovered')}>{otherChild}</Text.Flick>
+    </Motion.Button>
+  );
+};
+
+export const AnimatedText = ({
+  children,
+  className,
+  disabled = false,
+  otherChild = children,
+  withBorder = false,
+
+  animate = 'rest',
+  withMinWidth = false,
+}: Readonly<{
+  children: ReactNode;
+  disabled?: boolean;
+  otherChild?: ReactNode;
+  className?: string;
+  withBorder?: boolean;
+
+  animate?: 'rest' | 'hover';
+  withMinWidth?: boolean;
+}>) => {
+  return (
+    <Motion.Div
+      className={cx('button', withBorder && 'with-border', withMinWidth && 'min', className)}
+      initial="rest"
+      whileHover={disabled ? 'rest' : 'hover'}
+      whileTap={disabled ? 'rest' : 'hover'}
+      animate={animate}
+    >
+      <Text.Flick>{children}</Text.Flick>
+      <TripieContainer applyMargin="top"> </TripieContainer>
+      <Text.Flick className={cx('hovered')}>{otherChild}</Text.Flick>
+    </Motion.Div>
+  );
+};
+
+AnimatedButton.Text = AnimatedText;
+
+export default AnimatedButton;

package/src/components/TripieButton/Animated/animated-button.module.scss

@@ -0,0 +1,61 @@
+@use '../../../variables' as *;
+@use '../../../mixins' as *;
+
+.selected {
+  background-color: $theme-100 !important;
+}
+
+.hovered {
+  position: relative;
+  z-index: 30;
+  color: $theme-50;
+}
+.gap {
+  display: inline-block;
+  padding: 0.2rem;
+}
+
+.button {
+  height: 3rem;
+  overflow-y: hidden;
+  color: inherit;
+  align-content: center;
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 1.2rem;
+  justify-content: center;
+  position: relative;
+  text-decoration: none;
+  width: fit-content;
+  min-width: 4rem;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.with-border {
+  min-width: 9rem;
+  @include with-border;
+}
+.button:disabled {
+  cursor: not-allowed;
+  color: $theme-300;
+}
+
+// 다음으로 넘어가기 버튼에 커서를 올리는 애니메이션 버튼 스타일
+
+.next-button-wrap {
+  width: 100%;
+}
+
+.submit-button {
+  width: 100%;
+}
+
+.all-info-cursor {
+  position: 'fixed';
+  right: 2rem;
+  float: right;
+}

package/src/components/TripieButton/Animated/animated-button.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import AnimatedButton from '.';
+import { useAppTheme } from '../../../hooks';
+
+const meta: Meta<typeof AnimatedButton> = {
+  title: 'tripie-ui/Button/Animated',
+  component: AnimatedButton,
+  tags: ['autodocs'],
+  argTypes: {},
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return <div className={`${context.globals.theme}`}>{story()}</div>;
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'AnimatedButton.Default',
+  args: {
+    children: 'Default',
+  },
+};
+
+export const AnimatedButtonWithOtherChild: Story = {
+  name: 'AnimatedButton.WithOtherChild',
+  args: {
+    children: 'Default',
+    otherChild: 'Other child',
+  },
+};
+
+export const AnimatedButtonWithBorder: Story = {
+  name: 'AnimatedButton.WithBorder',
+  args: {
+    children: 'AnimatedButton.WithBorder',
+    withBorder: true,
+  },
+};
+
+export const AnimatedButtonWithBorderWithLongText: Story = {
+  name: 'AnimatedButton.WithBorder.LongText',
+  args: {
+    children: 'super long button text. see how it looks like!',
+    withBorder: true,
+  },
+};
+
+const longText = 'Super long button text. max max max max max'.repeat(3);
+
+export const AnimatedButtonWithBorderWithSuperLongText: Story = {
+  name: 'AnimatedButton.WithBorder.Super.LongText',
+  args: {
+    children: longText,
+    withBorder: true,
+  },
+};

package/src/components/TripieButton/Animated/index.ts

@@ -0,0 +1,2 @@
+export * from './AnimatedButton';
+export { default } from './AnimatedButton';

package/src/components/TripieButton/MenuToggle/MenuItem/index.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+import { classNames, Motion } from '../../../../shared/wrappers';
+import Style from './menu-item.module.scss';
+import { MENU_ITEM_VARIANT } from './variants';
+
+const cx = classNames.bind(Style);
+
+const MenuItem = ({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) => {
+  return (
+    <Motion.Li
+      className={cx('menu-item')}
+      variants={MENU_ITEM_VARIANT}
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.95 }}
+    >
+      {children}
+    </Motion.Li>
+  );
+};
+
+export default MenuItem;

package/src/components/TripieButton/MenuToggle/MenuItem/menu-item.module.scss

@@ -0,0 +1,14 @@
+.menu-item {
+  list-style: none;
+  margin: 1rem;
+  cursor: pointer;
+  overflow: hidden;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  & > a {
+    text-decoration: none;
+    color: inherit;
+  }
+}

package/src/components/TripieButton/MenuToggle/MenuItem/menu-item.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import MenuItem from '.';
+import { useAppTheme } from '../../../../hooks';
+
+const meta: Meta<typeof MenuItem> = {
+  title: 'tripie-ui/Button/Menu/Item',
+  component: MenuItem,
+  tags: ['autodocs'],
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '네비게이션 토글 버튼이 열린 상태에서 보이는 메뉴 리스트의 아이템 컴포넌트. 호버 시 확대 애니메이션이 동작합니다.',
+      },
+    },
+  },
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return <div className={`${context.globals.theme}`}>{story()}</div>;
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => {
+    return <MenuItem>아이템1</MenuItem>;
+  },
+};

package/src/components/TripieButton/MenuToggle/MenuItem/variants.ts

@@ -0,0 +1,18 @@
+import { MotionProps } from '../../../../shared/wrappers/motion-wrapper';
+
+export const MENU_ITEM_VARIANT = {
+  open: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      y: { stiffness: 1000, velocity: -100 },
+    },
+  },
+  closed: {
+    y: 50,
+    opacity: 0,
+    transition: {
+      y: { stiffness: 1000 },
+    },
+  },
+} as MotionProps['variants'];

package/src/components/TripieButton/MenuToggle/MenuList/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { classNames, Motion } from '../../../../shared/wrappers';
+
+import { ReactNode } from 'react';
+
+import Style from './menu-list.module.scss';
+import { NAVIGATION_VARIANT } from './variants';
+
+const cx = classNames.bind(Style);
+
+const MenuList = ({ children }: { children: ReactNode }) => {
+  return (
+    <Motion.Ul className={cx('navigation')} variants={NAVIGATION_VARIANT}>
+      {children}
+    </Motion.Ul>
+  );
+};
+
+export default MenuList;

package/src/components/TripieButton/MenuToggle/MenuList/menu-list.module.scss

@@ -0,0 +1,21 @@
+@use '../../../../variables' as *;
+@use '../../../../mixins' as *;
+
+.navigation {
+  border-bottom-width: 1px;
+  border-color: $theme-400;
+  border-left-width: 1px;
+  border-right-width: 1px;
+  border-style: solid;
+  border-top-width: 1px;
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
+  transform-origin: 50% 50% 0px;
+  will-change: auto;
+  padding: 0;
+  position: fixed;
+  top: 3px;
+  width: 12rem;
+  height: fit-content;
+  right: 5rem;
+}

package/src/components/TripieButton/MenuToggle/MenuList/menu-list.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import MenuList from '.';
+import { useAppTheme } from '../../../../hooks';
+import MenuItem from '../MenuItem';
+
+const meta: Meta<typeof MenuList> = {
+  title: 'tripie-ui/Button/Menu/List',
+  component: MenuList,
+  tags: ['autodocs'],
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '네비게이션 토글 버튼이 열린 상태에서 보이는 메뉴 리스트 컴포넌트. 여닫을 때 리스트 아이템들이 하나씩 stagger되는 애니메이션이 동작합니다. 다른 ui 위에 리스트가 올라가면 블러 효과가 있습니다.',
+      },
+    },
+  },
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return <div className={`${context.globals.theme}`}>{story()}</div>;
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => {
+    return (
+      <div style={{ height: '12rem' }}>
+        <MenuList>
+          {Array.from({ length: 3 }, (_, i) => (
+            <MenuItem key={i}>아이템 {i + 1}</MenuItem>
+          ))}
+        </MenuList>
+      </div>
+    );
+  },
+};

package/src/components/TripieButton/MenuToggle/MenuList/variants.ts

@@ -0,0 +1,14 @@
+import { MotionProps } from '../../../../shared/wrappers/motion-wrapper';
+
+export const NAVIGATION_VARIANT = {
+  open: {
+    opacity: 1,
+    display: 'inline-block',
+    transition: { staggerChildren: 0.07, delayChildren: 0.2 },
+  },
+  closed: {
+    opacity: 0,
+    display: 'none',
+    transition: { staggerChildren: 0.05, staggerDirection: -1 },
+  },
+} as MotionProps['variants'];

package/src/components/TripieButton/MenuToggle/MenuToggle.tsx

@@ -0,0 +1,67 @@
+import { classNames, Motion, MotionProps } from '../../../shared/wrappers';
+
+import { ReactNode } from 'react';
+import { useCycle } from '../../../hooks/useCycle';
+import COLORS from '../../../shared/colors';
+
+import TripieContainer from '../../TripieContainer/TripieContainer';
+import NoStyleButton from '../NoStyle/NoStyleButton';
+import Style from './menu-toggle.module.scss';
+import MenuItem from './MenuItem';
+import MenuList from './MenuList';
+
+const cx = classNames.bind(Style);
+
+export const Path = (props: MotionProps['svgProps']) => (
+  <Motion.Path fill="transparent" strokeWidth="1" stroke={COLORS[0]} strokeLinecap="round" {...props} />
+);
+
+const ToggleButton = ({ toggle }: { toggle: () => void }) => (
+  <NoStyleButton action={() => toggle()} className={cx('menu-toggle')}>
+    <svg width="24" height="24" viewBox="0 0 24 24" className={cx('svg')}>
+      <Path
+        variants={{
+          closed: { d: 'M 2 2.5 L 20 2.5' },
+          open: { d: 'M 3 16.5 L 17 2.5' },
+        }}
+      />
+      <Path
+        d="M 2 9.423 L 20 9.423"
+        variants={{
+          closed: { opacity: 1 },
+          open: { opacity: 0 },
+        }}
+        transition={{ duration: 0.1 }}
+      />
+      <Path
+        variants={{
+          closed: { d: 'M 2 16.346 L 20 16.346' },
+          open: { d: 'M 3 2.5 L 17 16.346' },
+        }}
+      />
+    </svg>
+  </NoStyleButton>
+);
+
+const MenuToggle = ({
+  className,
+  children = '',
+  initial = false,
+}: {
+  children?: ReactNode;
+  initial?: boolean;
+  className?: string;
+}) => {
+  const [isOpen, toggleOpen] = useCycle(initial, true);
+  return (
+    <Motion.Nav className={cx('nav', className)} initial={initial} animate={isOpen ? 'open' : 'closed'}>
+      <TripieContainer margin="none">{children}</TripieContainer>
+      <ToggleButton toggle={toggleOpen} />
+    </Motion.Nav>
+  );
+};
+
+MenuToggle.Item = MenuItem;
+MenuToggle.List = MenuList;
+
+export default MenuToggle;

package/src/components/TripieButton/MenuToggle/index.ts

@@ -0,0 +1,2 @@
+export * from './MenuToggle';
+export { default } from './MenuToggle';

package/src/components/TripieButton/MenuToggle/menu-toggle.module.scss

@@ -0,0 +1,42 @@
+@use '../../../variables' as *;
+
+.nav {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 10px;
+  height: 80px;
+  justify-content: space-between;
+  overflow: visible;
+  padding: 0 15px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 40;
+}
+
+.menu-toggle {
+  display: inline-flex;
+  border-bottom-width: 1px;
+  border-color: $theme-400;
+  border-left-width: 1px;
+  border-right-width: 1px;
+  border-style: solid;
+  border-top-width: 1px;
+  backdrop-filter: blur(10px);
+  border-radius: 50%;
+  transform: none;
+  transform-origin: 50% 50% 100px;
+  will-change: auto;
+  background: none;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+}
+
+.svg {
+  transform: translate(1.5px, 3px);
+}