@tripie-pyotato/design-system 0.0.0

package/src/components/List/list.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import Card from '../TripieCard/Card';
+import List from './List';
+
+const meta: Meta<typeof List> = {
+  title: 'tripie-ui/List',
+  component: List,
+  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>;
+
+const Children = () =>
+  Array.from({ length: 6 }, (_, index) => (
+    <Card.WithCoverImage
+      src={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg'}
+      alt={
+        'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/54e3594d-1087-43ff-b760-7231d4103edf.jpeg의 이미지일 수도 있음'
+      }
+      summary={'대자연부터 감성 카페까지, 인생샷을 남길 수 있는 곳'}
+      withBorder={false}
+      title={'여름 제주 인생샷 명소 BEST 7'}
+      key={index}
+    />
+  ));
+
+export const Default: Story = {
+  name: 'Default',
+  args: {
+    children: Children(),
+  },
+};
+
+export const ListItem: Story = {
+  name: 'Default',
+  args: {
+    children: Children(),
+  },
+};
+
+export const RowList: Story = {
+  name: 'List.Row',
+  render: () => (
+    <List rowView={true}>
+      <Children />
+    </List>
+  ),
+};

package/src/components/List/variants.ts

@@ -0,0 +1,23 @@
+import COLORS from '../../shared/colors';
+import { MotionProps } from '../../shared/wrappers/motion-wrapper';
+
+export const ACCORDIAN_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/MotionSlideUp/MotionSlideUp.tsx

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import Motion, { MotionProps } from '../../shared/wrappers/motion-wrapper';
+
+import { InView } from 'react-intersection-observer';
+export type MotionSlideUpProps = Partial<MotionProps['animationProps']> & { children?: ReactNode; className?: string };
+
+const cardMotion = {
+  hidden: { opacity: 0, y: 50 },
+  visible: { opacity: 1, y: 0 },
+};
+
+export type CustomMotionSlideUpProps = Partial<
+  MotionSlideUpProps & {
+    duration: number;
+    delay: number;
+    replays: boolean;
+  }
+>;
+
+const MotionSlideUp = ({ duration = 1, delay = 0, replays = true, children, className }: CustomMotionSlideUpProps) => {
+  return (
+    <InView>
+      {({ inView, ref }) => (
+        <Motion.Div
+          animate={inView ? 'visible' : 'hidden'}
+          ref={ref}
+          variants={cardMotion}
+          transition={{ duration, delay, damping: 2, stiffness: 10, replays }}
+          className={className}
+        >
+          {children}
+        </Motion.Div>
+      )}
+    </InView>
+  );
+};
+export default MotionSlideUp;

package/src/components/MotionSlideUp/index.ts

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

package/src/components/Particle/Background/ParticleBackground.tsx

@@ -0,0 +1,18 @@
+import { classNames } from '../../../shared/wrappers';
+
+import { ReactNode } from 'react';
+import TripieContainer from '../../TripieContainer';
+import ParticleField from '../Field/ParticleField';
+import Style from './particle-background.module.scss';
+
+const cx = classNames.bind(Style);
+
+export default function ParticleBackground({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <TripieContainer className={cx('background')} margin="none">
+      <TripieContainer className={cx('gradient-bottom')} margin="none"></TripieContainer>
+      {children}
+      <ParticleField />
+    </TripieContainer>
+  );
+}

package/src/components/Particle/Background/index.ts

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

package/src/components/Particle/Background/particle-background.module.scss

@@ -0,0 +1,25 @@
+@use '../../../variables' as *;
+@use '../../../mixins' as *;
+
+.background {
+  @include background('0');
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 20px;
+  height: inherit;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0;
+  width: inherit;
+  position: relative;
+}
+
+.gradient-bottom {
+  @include background('7');
+  inset: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: 0;
+  height: inherit;
+}

package/src/components/Particle/Background/particle-background.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../../hooks';
+import ParticleBackground from './ParticleBackground';
+
+const meta: Meta<typeof ParticleBackground> = {
+  title: 'tripie-ui/Particle/Background',
+  component: ParticleBackground,
+  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: 'Default',
+  render: () => (
+    <div style={{ height: '100vh', width: '100vw' }}>
+      <ParticleBackground>default</ParticleBackground>
+    </div>
+  ),
+};

package/src/components/Particle/Field/ParticleField.tsx

@@ -0,0 +1,28 @@
+import Particle from '../Particles/Particles';
+
+import { classNames } from '../../../shared/wrappers';
+import Style from './particle-field.module.scss';
+const cx = classNames.bind(Style);
+
+const particles = Array.from({ length: 50 }, () => ({
+  x: Math.random() * 1000 - 500,
+  y: Math.random() * 1000 - 500,
+  duration: Math.random() * 10 + 5,
+}));
+
+const ParticleField = () => {
+  return (
+    <div className={cx('particle-field')}>
+      {particles.map((particle, index) => (
+        <Particle
+          key={`${index}-${particle.x}-${particle.y}-${particle.duration}`}
+          x={particle.x}
+          y={particle.y}
+          duration={particle.duration}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ParticleField;

package/src/components/Particle/Field/index.ts

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

package/src/components/Particle/Field/particle-field.module.scss

@@ -0,0 +1,6 @@
+.particle-field {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  z-index: 0;
+}

package/src/components/Particle/Field/particle-field.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../../hooks';
+import ParticleField from './ParticleField';
+
+const meta: Meta<typeof ParticleField> = {
+  title: 'tripie-ui/Particle/Field',
+  component: ParticleField,
+  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: 'Default',
+  render: () => {
+    return (
+      <div style={{ height: '100vh' }}>
+        <ParticleField />
+      </div>
+    );
+  },
+};

package/src/components/Particle/Particles/Particles.tsx

@@ -0,0 +1,22 @@
+import { classNames, Motion } from '../../../shared/wrappers';
+
+import Style from './particles.module.scss';
+
+const cx = classNames.bind(Style);
+
+const Particles = ({ x, y, duration = 0.5 }: { x: number; y: number; duration: number }) => {
+  return (
+    <Motion.Div
+      initial={{ opacity: 0, x: 0, y: 0 }}
+      animate={{ opacity: 1, x, y }}
+      transition={{
+        repeat: Infinity,
+        repeatType: 'mirror',
+        duration,
+      }}
+      className={cx('particle')}
+    />
+  );
+};
+
+export default Particles;

package/src/components/Particle/Particles/particles.module.scss

@@ -0,0 +1,19 @@
+@use '../../../variables' as *;
+
+.particle {
+  background-color: $theme-50;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 3px;
+  width: 3px;
+  z-index: 0;
+}
+
+.particle-field {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  z-index: 0;
+}

package/src/components/RotatingBlur/RotatingBlur.tsx

@@ -0,0 +1,26 @@
+import { classNames, Motion } from '../../shared/wrappers';
+import Style from './rotating-blur.module.scss';
+
+const cx = classNames.bind(Style);
+
+const RotatingBlur = ({ className }: { className?: string }) => {
+  return (
+    <Motion.Div
+      className={cx('pie', 'rotating-blur', className)}
+      initial={{ rotate: 0 }}
+      animate={{ scale: [1, 1.2, 1.5, 1.2, 1], rotate: 360 }}
+      transition={{
+        duration: 5,
+        times: [0, 0.25, 0.5, 0.75, 1],
+        repeat: Infinity,
+        ease: 'linear',
+      }}
+    >
+      <Motion.Div className={cx('segment', 'segment-1')}></Motion.Div>
+      <Motion.Div className={cx('segment', 'segment-2')}></Motion.Div>
+      <Motion.Div className={cx('segment', 'segment-3')}></Motion.Div>
+    </Motion.Div>
+  );
+};
+
+export default RotatingBlur;

package/src/components/RotatingBlur/index.ts

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

package/src/components/RotatingBlur/rotating-blur.module.scss

@@ -0,0 +1,59 @@
+.rotating-blur {
+  filter: blur(24px);
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  z-index: 0;
+}
+.pie {
+  width: 12rem;
+  height: 12rem;
+}
+.segment-1 {
+  opacity: 1;
+  box-shadow: -1px -9px 1px 7px #5aacd9;
+  border-radius: 500px;
+  inset: 0;
+  position: absolute;
+  display: inline-flex;
+  place-items: center;
+  place-content: center;
+  color: #85f;
+  background: conic-gradient(from 0deg at 50% 50%, rgb(255, 255, 255), rgb(19, 156, 229), rgb(13, 231, 180));
+  overflow: hidden;
+}
+.segment-3 {
+  box-shadow: -4px 7px 2px 8px #c73d3d;
+  border-radius: 500px;
+  inset: 0;
+  position: absolute;
+  display: inline-flex;
+  place-items: center;
+  place-content: center;
+  color: #85f;
+  background: conic-gradient(from 0deg at 50% 50%, rgb(255, 217, 173), rgb(11, 87, 64), rgb(13, 231, 180));
+  overflow: hidden;
+  opacity: 1;
+}
+.segment-2 {
+  box-shadow: -3px 7px 3px 4px #dda75f;
+  opacity: 0.8;
+  border-radius: 500px;
+  inset: 0;
+  position: absolute;
+  display: inline-flex;
+  place-items: center;
+  place-content: center;
+  color: #85f;
+  background: conic-gradient(
+    from 0deg at 50% 50%,
+    rgb(255, 0, 0),
+    rgb(255, 0, 0),
+    rgb(20, 120, 90),
+    rgb(11, 86, 63),
+    rgb(11, 86, 63),
+    rgb(13, 231, 180),
+    rgb(255, 0, 0)
+  );
+  overflow: hidden;
+}

package/src/components/RotatingBlur/rotating-blur.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import RotatingBlur from './RotatingBlur';
+
+const meta: Meta<typeof RotatingBlur> = {
+  title: 'tripie-ui/RotatingBlur',
+  component: RotatingBlur,
+  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 (
+      <div style={{ height: '100vh' }}>
+        <RotatingBlur />
+      </div>
+    );
+  },
+};

package/src/components/SplashScreen/SplashScreen.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { classNames, Motion } from '../../shared/wrappers';
+import Container from '../TripieContainer/TripieContainer';
+import Style from './splash-screen.module.scss';
+const cx = classNames.bind(Style);
+
+const SplashScreen = ({ children,className }: Readonly<{ children: ReactNode ,className?:string}>) => {
+  return (
+    <Motion.Div
+      className={cx('splash-full-screen',className)}
+      initial={{ opacity: 1, y: 0 }}
+      animate={{ opacity: 1, y: '-120%' }}
+      transition={{ duration: 0.8, delay: 1 }}
+    >
+      <Container align="center">{children}</Container>
+    </Motion.Div>
+  );
+};
+
+const ControlledSplashScreen = ({ children,className }: Readonly<{ children: ReactNode,className?:string }>) => {
+  return (
+    <Motion.Div className={cx('splash-full-screen',className)} initial={{ opacity: 1, y: 0 }}>
+      <Container align="center">{children}</Container>
+    </Motion.Div>
+  );
+};
+
+SplashScreen.Controlled = ControlledSplashScreen;
+export default SplashScreen;

package/src/components/SplashScreen/index.ts

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

package/src/components/SplashScreen/splash-screen.module.scss

@@ -0,0 +1,12 @@
+@use '../../variables' as *;
+@use '../../mixins' as *;
+
+.splash-full-screen {
+  @include background('8');
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  z-index: 100;
+  transform: none;
+  transform-origin: 50% 50% 0px;
+}

package/src/components/SplashScreen/splash-screen.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import TextFillAnimation from '../TextFill/TextFillAnimation';
+import SplashScreen from './SplashScreen';
+
+const meta: Meta<typeof SplashScreen> = {
+  title: 'tripie-ui/SplashScreen',
+  component: SplashScreen,
+  parameters: {
+    docs: {
+      description: {
+        component: '로딩 시 화면 전체를 차지하며 스크롤업되는 splash screen 컴포넌트입니다.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  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: () => (
+    <div style={{ height: '100vh' }}>
+      <SplashScreen>splash</SplashScreen>
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  name: 'Loading',
+  render: () => (
+    <div style={{ height: '100vh' }}>
+      <SplashScreen>
+        <TextFillAnimation.Title>Tripie.</TextFillAnimation.Title>
+      </SplashScreen>
+    </div>
+  ),
+};

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,33 @@
+import { classNames, Motion } from '../../shared/wrappers';
+import Style from './switch.module.scss';
+import { SWITCH_VARIANTS } from './variants';
+
+const cx = classNames.bind(Style);
+
+const Switch = ({
+  current,
+  cycle,
+  className,
+  text,
+}: {
+  text?: string;
+  current: any;
+  cycle: () => void;
+  className?: string;
+}) => {
+  return (
+    <Motion.Div className={cx('switch', className)} animate={current} onTapStart={() => cycle()}>
+      <Motion.Div
+        className={cx('background')}
+        variants={SWITCH_VARIANTS.BACKGROUND}
+        transition={{ ease: 'easeInOut' }}
+      />
+      <Motion.Div className={cx('button')} variants={SWITCH_VARIANTS.BUTTON} transition={{ ease: 'easeInOut' }} />
+      <Motion.Div className={cx('switch-text')} variants={SWITCH_VARIANTS.TEXT} transition={{ ease: 'easeInOut' }}>
+        {text}
+      </Motion.Div>
+    </Motion.Div>
+  );
+};
+
+export default Switch;

package/src/components/Switch/index.ts

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

package/src/components/Switch/switch.module.scss

@@ -0,0 +1,43 @@
+@use '../../mixins' as *;
+@use '../../variables' as *;
+
+$switch-background1: #181c17;
+$switch-background2: #0f0f0f;
+
+.switch {
+  width: fit-content;
+  min-width: 5rem;
+  overflow: hidden;
+  height: 2.5rem;
+  border: none;
+  position: relative;
+  cursor: pointer;
+}
+.background {
+  @include with-border;
+  background: radial-gradient(150% 150% at 50% 50%, $switch-background1 0%, $switch-background2 100%);
+  height: 100%;
+  width: 100%;
+  opacity: 1;
+  border-radius: 100px;
+}
+
+.button {
+  background-color: $theme-50;
+  border-radius: 100%;
+  overflow: hidden;
+  position: absolute;
+  bottom: 0.5rem;
+  right: 3.2rem;
+  width: 1.6rem;
+  height: 1.6rem;
+  z-index: 3;
+}
+
+.switch-text {
+  border-radius: 100px;
+  position: absolute;
+  top: 25%;
+  left: 14%;
+  z-index: 3;
+}