@tripie-pyotato/design-system 0.0.0

package/src/components/Accordian/Accordian.tsx

@@ -0,0 +1,72 @@
+'use client';
+import { classNames, Motion } from '../../shared/wrappers';
+
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+
+import { useCycle } from '../../hooks';
+import Divider from '../Divider/Divider';
+import Icon, { IconProps } from '../TripieIcon/Icon';
+import Style from './accordian.module.scss';
+import { ACCORDIAN_VARIANTS } from './variants';
+
+const cx = classNames.bind(Style);
+
+const AccordionContext = createContext<{ current: string; cycle: () => null }>({
+  current: 'closed',
+  cycle: () => null,
+});
+
+export type AccordionProps = Partial<{ children: ReactNode; className: string }>;
+
+const Accordion = ({ children, className }: Partial<AccordionProps>) => {
+  const [current, cycle] = useCycle('closed', 'open');
+
+  // context provider에 넘겨지는 value prop 객체는 매 랜더때마다 바뀌므로 useMemo로 감싸주기
+  const value = useMemo(() => {
+    return { current, cycle };
+  }, [current]);
+
+  return (
+    <AccordionContext.Provider value={value}>
+      <Motion.Div className={cx('accordion', className)}>{children}</Motion.Div>
+    </AccordionContext.Provider>
+  );
+};
+
+export const AccordionDivider = ({ className }: AccordionProps) => {
+  const { current } = useContext(AccordionContext);
+  return <Divider current={current} className={cx(className)} />;
+};
+
+export const AccordionHeader = ({ children }: AccordionProps) => {
+  const { cycle } = useContext(AccordionContext);
+  return (
+    <Motion.Div className={cx('accordion-header')} whileHover={{ cursor: 'pointer' }} onTapStart={() => cycle()}>
+      {children}
+    </Motion.Div>
+  );
+};
+
+export const AccordionIcon = ({ src, className, sizes = 'icon' }: IconProps) => {
+  const { current } = useContext(AccordionContext);
+  return (
+    <Icon src={src} sizes={sizes} variants={ACCORDIAN_VARIANTS.BUTTON} animate={current} className={cx(className)} />
+  );
+};
+
+export const AccordionBody = ({ children }: AccordionProps) => {
+  const { current } = useContext(AccordionContext);
+
+  return (
+    <Motion.Div variants={ACCORDIAN_VARIANTS.DETAILS} animate={current} className={cx('accordion-body')}>
+      {children}
+    </Motion.Div>
+  );
+};
+
+Accordion.Divider = AccordionDivider;
+Accordion.Icon = AccordionIcon;
+Accordion.Header = AccordionHeader;
+Accordion.Body = AccordionBody;
+
+export default Accordion;

package/src/components/Accordian/accordian.module.scss

@@ -0,0 +1,18 @@
+@use '../../variables' as *;
+
+.accordion-header {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.divider {
+  height: 1.5px;
+}
+.accordion-body {
+  color: $theme-40;
+}
+.accordion {
+  width: 100%;
+  height: 100%;
+}

package/src/components/Accordian/accordian.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { Container } from '..';
+import { useAppTheme } from '../../hooks';
+import Accordion from './Accordian';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'tripie-ui/Accordion',
+  component: Accordion,
+  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 (
+      <Accordion>
+        <Accordion.Header>
+          <Container margin="m" applyMargin="top">
+            Default <Accordion.Icon />
+          </Container>
+        </Accordion.Header>
+        <Accordion.Divider />
+        <Container applyMargin="top-bottom">
+          <Accordion.Body>default content</Accordion.Body>
+        </Container>
+      </Accordion>
+    );
+  },
+};
+
+export const MultipleAccordion: Story = {
+  name: 'Multiple',
+  render: () => {
+    return (
+      <>
+        <Accordion>
+          <Accordion.Header>
+            <Container margin="m" applyMargin="top">
+              Accordion 1 <Accordion.Icon />
+            </Container>
+          </Accordion.Header>
+          <Accordion.Divider />
+          <Container applyMargin="top-bottom">
+            <Accordion.Body>Accordion content 1</Accordion.Body>
+          </Container>
+        </Accordion>
+        <Accordion>
+          <Accordion.Header>
+            <Container margin="m" applyMargin="top">
+              Accordion 2<Accordion.Icon />
+            </Container>
+          </Accordion.Header>
+          <Accordion.Divider />
+          <Container applyMargin="top-bottom">
+            <Accordion.Body>Accordion content 2</Accordion.Body>
+          </Container>
+        </Accordion>
+      </>
+    );
+  },
+};

package/src/components/Accordian/index.ts

@@ -0,0 +1,3 @@
+export * from './Accordian';
+export { default } from './Accordian';
+export * from './variants';

package/src/components/Accordian/variants.ts

@@ -0,0 +1,45 @@
+import COLORS from '../../shared/colors';
+import { MotionProps } from '../../shared/wrappers/motion-wrapper';
+
+export const ACCORDIAN_VARIANTS = {
+  DETAILS: {
+    closed: () => ({
+      height: '0%',
+      opacity: 0,
+      display: 'none',
+    }),
+    open: () => ({
+      transform: {
+        height: 'fit-content',
+      },
+      transition: {
+        duration: 2,
+        bounce: 0,
+        damping: 2,
+        stiffness: 10,
+      },
+    }),
+  } as unknown as MotionProps['variants'],
+  BUTTON: {
+    closed: () => ({}),
+    open: () => ({
+      rotate: '45deg',
+      transition: {
+        duration: 0.5,
+        bounce: 0,
+      },
+    }),
+  } as MotionProps['variants'],
+  DIVIDER: {
+    closed: () => ({
+      backgroundColor: COLORS[400],
+    }),
+    open: () => ({
+      backgroundColor: COLORS[50],
+      transition: {
+        duration: 0.5,
+        bounce: 0,
+      },
+    }),
+  } as MotionProps['variants'],
+};

package/src/components/Carousel/Carousel.spec.tsx

@@ -0,0 +1,239 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { useInView } from 'react-intersection-observer';
+import { describe, expect, it, Mock, vi } from 'vitest';
+import TripieImage from '../TripieImage/TripieImage';
+import Carousel from './Carousel';
+import images from './images';
+
+// https://vitest.dev/guide/mocking#globals
+const IntersectionObserverMock = vi.fn(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  takeRecords: vi.fn(),
+  unobserve: vi.fn(),
+}));
+
+vi.stubGlobal('IntersectionObserver', IntersectionObserverMock);
+
+vi.mock('react-intersection-observer', () => ({
+  useInView: vi.fn(() => ({
+    ref: vi.fn(), // Mock function
+    inView: false, // Start as false
+  })),
+}));
+
+// Mock `scrollIntoView` since JSDOM doesn’t have it
+Element.prototype.scrollIntoView = vi.fn();
+
+// vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView').mockImplementation(() => {});
+
+(useInView as Mock).mockImplementation(({ threshold }) => {
+  return {
+    ref: vi.fn(),
+    inView: threshold === 0.6,
+  };
+});
+
+describe('Carousel Component', () => {
+  it('1. 캐로솔 이미지가 1개인 경우 다음/이전 버튼이 보이지 않는다.', () => {
+    render(
+      <Carousel
+        items={images.slice(0, 1).map((item, index) => (
+          <TripieImage.WithSourceUrl
+            sizes="large"
+            key={item.src + index}
+            alt={item.alt}
+            src={item.src}
+            sourceUrl={item.sourceUrl}
+            blurDataURL={item.blurDataURL}
+          />
+        ))}
+      />
+    );
+
+    const carouselElement = screen.getByAltText(images[0].alt);
+    expect(carouselElement).toBeInTheDocument();
+
+    const nextButton = screen.queryByRole('button', { name: /next/i });
+    const prevButton = screen.queryByRole('button', { name: /previous/i });
+
+    expect(nextButton).not.toBeInTheDocument();
+    expect(prevButton).not.toBeInTheDocument();
+  });
+
+  it('2. 캐로솔 이미지가 여려 개인 경우, 하나의 이미지만 focus된다.', () => {
+    const { container } = render(
+      <Carousel
+        items={images.map((item, index) => (
+          <TripieImage.WithSourceUrl
+            sizes="large"
+            key={item.src + index}
+            alt={item.alt}
+            src={item.src}
+            sourceUrl={item.sourceUrl}
+            blurDataURL={item.blurDataURL}
+          />
+        ))}
+      />
+    );
+
+    const carouselItemElements = Array.from(container.querySelectorAll('*')).filter(el =>
+      el.className.match(/carousel-item/)
+    );
+
+    const focusedElement = carouselItemElements.filter(el => el.className.match(/focused/));
+
+    expect(focusedElement.length).toEqual(1);
+  });
+
+  it('3. 캐로솔 아이템이 2개인 경우, 다음 버튼을 클릭하면 두번째 아이템에 focus되고 이전 버튼이 생기고, 다음 버튼이 사라진다.', () => {
+    const { container } = render(
+      <Carousel
+        items={images.slice(0, 2).map((item, index) => (
+          <TripieImage.WithSourceUrl
+            sizes="large"
+            key={item.src + index}
+            alt={item.alt}
+            src={item.src}
+            sourceUrl={item.sourceUrl}
+            blurDataURL={item.blurDataURL}
+          />
+        ))}
+      />
+    );
+
+    expect(container).toBeInTheDocument();
+
+    const buttonElements = container.querySelectorAll('button');
+
+    const carouselItemElements = Array.from(container.querySelectorAll('*')).filter(el =>
+      el.className.match(/carousel-item/)
+    );
+
+    expect(carouselItemElements.length).toEqual(2);
+
+    const focusedElement = carouselItemElements.findIndex(el => el.className.match(/focused/));
+
+    expect(focusedElement).toEqual(0);
+    expect(buttonElements.length).toEqual(1); // 버튼이 하나만 있고,
+    expect(buttonElements[0].name).toEqual('next'); // 해당 버튼이 다음 버튼
+    expect(buttonElements[0].name).not.toEqual('previous'); // 해당 버튼이 다음 버튼
+  });
+
+  it('4. 3개의 이미지 캐로솔에서 다음버튼을 두 번 누르면 이미지 1->2->3으로, 이전 버튼을 1번 누르면 3->2로 focus된다.', async () => {
+    // 4. 첫 번째 아이템이 focused일 때, 다음 버튼을 클릭하면 다음 아이템에 focus된다.'
+    const { container } = render(
+      <Carousel
+        items={images.slice(0, 3).map((item, index) => (
+          <TripieImage.WithSourceUrl
+            sizes="large"
+            key={item.src + index}
+            alt={item.alt}
+            src={item.src}
+            sourceUrl={item.sourceUrl}
+            blurDataURL={item.blurDataURL}
+          />
+        ))}
+      />
+    );
+
+    expect(container).toBeInTheDocument();
+
+    // 스크롤 컨테이너
+    const scrollContainer = Array.from(container.querySelectorAll('*')).filter(el =>
+      el.className.match(/carousel-container/)
+    )[0];
+
+    expect(scrollContainer).toBeInTheDocument();
+
+    // 전체 캐로솔 아이템들
+    const carouselItems = Array.from(container.querySelectorAll('*')).filter(el => el.className.match(/carousel-item/));
+
+    expect(carouselItems.length).toBe(3);
+
+    // 'next' 버튼
+    const nextButton = container.querySelector('button[name="next"]');
+    expect(nextButton).toBeInTheDocument();
+
+    // 다음 버튼 클릭
+    await act(() => fireEvent.click(nextButton!));
+
+    // 클래스 변경, 두번째 항목(인덱스1)에만 focus
+    await waitFor(() => {
+      expect(carouselItems[0].classList.contains('focused')).toBe(false);
+      expect(carouselItems[1].classList.contains('focused')).toBe(true);
+      expect(carouselItems[2].classList.contains('focused')).toBe(false);
+    });
+
+    // 다음 버튼 클릭
+    await act(() => fireEvent.click(nextButton!));
+
+    // 클래스 변경, 세번째 항목(인덱스2)에만 focus
+    await waitFor(() => {
+      expect(carouselItems[0].classList.contains('focused')).toBe(false);
+      expect(carouselItems[1].classList.contains('focused')).toBe(false);
+      expect(carouselItems[2].classList.contains('focused')).toBe(true);
+      expect(nextButton).not.toBeInTheDocument(); // 마지막 항목이므로 다음 버튼이 보이지 않는다.
+    });
+
+    // 'previous' 버튼
+    const prevButton = container.querySelector('button[name="previous"]');
+    expect(prevButton).toBeInTheDocument();
+
+    // 이전 버튼 클릭
+    await act(() => fireEvent.click(prevButton!));
+
+    // 클래스 변경, 두번째 항목(인덱스)에만 focus
+    await waitFor(() => {
+      expect(carouselItems[0].classList.contains('focused')).toBe(false);
+      expect(carouselItems[1].classList.contains('focused')).toBe(true);
+      expect(carouselItems[2].classList.contains('focused')).toBe(false);
+    });
+
+    expect(Element.prototype.scrollIntoView).toHaveBeenCalled();
+  });
+
+  // !! 🤔 스크롤 테스트가 잘 안됨 !!  https://github.com/f-lab-edu/Tripie/blob/e6a096584da85ba6cfba371464b96aee4e77847c/packages/design-system/src/components/Carousel/Carousel.tsx#L92 useEffect가 안먹힘.
+  // it('5. 스크롤', async () => {
+  //   const { container } = render(
+  //     <Carousel
+  //       items={images.slice(0, 2).map((item, index) => (
+  //         <TripieImage.WithSourceUrl
+  //           sizes="large"
+  //           key={item.src + index}
+  //           alt={item.alt}
+  //           src={item.src}
+  //           sourceUrl={item.sourceUrl}
+  //           blurDataURL={item.blurDataURL}
+  //         />
+  //       ))}
+  //     />
+  //   );
+
+  //   expect(container).toBeInTheDocument();
+
+  //   // Get all carousel items
+  //   const carouselItems = Array.from(container.querySelectorAll('*')).filter(el => el.className.match(/carousel-item/));
+
+  //   expect(carouselItems.length).toBe(2);
+
+  //   // Ensure first item is focused initially
+  //   expect(carouselItems[0].classList.contains('focused')).toBe(true);
+  //   expect(carouselItems[1].classList.contains('focused')).toBe(false);
+
+  //   act(() => {
+  //     container.scrollLeft = 1000;
+  //     fireEvent.scroll(container);
+  // !! 동작하므로 scroll은 되는 것 같지만 state 변경이 잘 안된듯
+  //     container.addEventListener('scroll', () => {
+  //       console.log('Scroll event triggered!');
+  //     });
+  //   });
+
+  //   // Wait for class update where only the second item is focused
+  //   await waitFor(() => {
+  //     expect(carouselItems[0].classList.contains('focused')).toBe(false);
+  //     expect(carouselItems[1].classList.contains('focused')).toBe(true);
+  //   });
+  // });
+});

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,131 @@
+'use client';
+import { classNames } from '../../shared/wrappers';
+
+import { ReactElement, ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import NoStyleButton from '../TripieButton/NoStyle/NoStyleButton';
+import TripieContainer from '../TripieContainer/TripieContainer';
+import Icon from '../TripieIcon/Icon';
+import Style from './carousel.module.scss';
+
+const cx = classNames.bind(Style);
+
+const Carousel = ({ items, className }: { items: ReactElement[]; className?: string }) => {
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleScrollButton = useCallback(
+    (direction: 'prev' | 'next') => {
+      let next = focusedIndex;
+      setFocusedIndex(prevIndex => {
+        if (direction === 'prev') {
+          next = prevIndex != 0 ? prevIndex - 1 : 0;
+          return next;
+        }
+        if (direction === 'next') {
+          next = prevIndex != items.length - 1 ? prevIndex + 1 : items.length - 1;
+          return next;
+        }
+
+        return prevIndex;
+      });
+
+      if (ref?.current?.children?.[next] != null) {
+        ref.current.children?.[next].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+    },
+    [ref, focusedIndex]
+  );
+
+  return (
+    <TripieContainer margin="none" className={cx('carousel')}>
+      {items.length > 1 && focusedIndex != 0 ? (
+        <NoStyleButton name="previous" action={() => handleScrollButton('prev')}>
+          <Icon.Scroll className={cx('scroll-icon', 'next-icon')} next={false} />
+        </NoStyleButton>
+      ) : null}
+      <TripieContainer margin="none" className={cx('flex-items', 'carousel-inner')}>
+        <TripieContainer margin="none" className={cx('insta-like-carousel-container', className)} refs={ref}>
+          {items.map((item, index) => (
+            <CarouselItem
+              key={`carousel-item-${item?.key}`}
+              index={index}
+              setFocusedIndex={setFocusedIndex}
+              focusedIndex={focusedIndex}
+            >
+              {item}
+            </CarouselItem>
+          ))}
+        </TripieContainer>
+      </TripieContainer>
+      {items.length > 1 && focusedIndex != items.length - 1 ? (
+        <NoStyleButton name="next" action={() => handleScrollButton('next')}>
+          <Icon.Scroll className={cx('scroll-icon', 'prev-icon')} />
+        </NoStyleButton>
+      ) : null}
+    </TripieContainer>
+  );
+};
+
+const CarouselItem = ({
+  children,
+  className,
+  index,
+  setFocusedIndex,
+  focusedIndex,
+  threshold = 0.6,
+}: {
+  children: ReactNode;
+  index: number;
+  className?: string;
+  setFocusedIndex: (index: number) => void;
+  focusedIndex: number;
+  threshold?: number;
+}) => {
+  const { ref, inView } = useInView({
+    threshold: threshold, // 60% 보여야 동작
+    triggerOnce: false, // 가시성 체크
+  });
+
+  // 보이면 스크롤한 인덱스로 이동
+  useEffect(() => {
+    if (inView && index != focusedIndex) {
+      setFocusedIndex(index);
+    }
+  }, [inView, focusedIndex]);
+
+  // 버튼 클릭으로 보이지 않는 경우 인접한 캐로솔로 인덱스 포커스
+  useEffect(() => {
+    if (!inView && index != focusedIndex) {
+      setFocusedIndex(focusedIndex);
+    }
+  }, [inView, focusedIndex]);
+
+  return (
+    <TripieContainer
+      margin="none"
+      refs={ref as unknown as RefObject<HTMLDivElement>}
+      className={cx('insta-like-carousel-item', focusedIndex == index ? 'focused' : '', className)}
+    >
+      {children}
+    </TripieContainer>
+  );
+};
+
+// 좌표를 클릭하는 등 외부의 조작으로 carousel 포커싱이 결정되어 스타일만 carousel 형태
+const ControlledCarousel = ({ children, className }: { children: ReactNode; className?: string }) => {
+  return (
+    <TripieContainer margin="none" className={cx('carousel')}>
+      <TripieContainer margin="none" className={cx('flex-items', 'carousel-inner')}>
+        <TripieContainer margin="none" className={cx('insta-like-carousel-container', className)}>
+          {children}
+        </TripieContainer>
+      </TripieContainer>
+    </TripieContainer>
+  );
+};
+
+Carousel.Controlled = ControlledCarousel;
+
+export default Carousel;

package/src/components/Carousel/carousel.module.scss

@@ -0,0 +1,61 @@
+@use '../../variables' as *;
+@use '../../mixins' as *;
+
+.carousel {
+  position: relative;
+  width: 100%;
+  margin: auto;
+  overflow: hidden;
+}
+.flex-items {
+  @include flex-items;
+}
+
+.carousel-inner {
+  display: inline-flex;
+  transition: transform 0.5s ease-in-out;
+  width: 100%;
+}
+
+.insta-like-carousel-container {
+  display: inline-flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory; /* Enables snapping on the x-axis */
+  -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
+  scroll-behavior: smooth; /* Optional: makes the snapping animated */
+  gap: 1rem;
+  @include visible-scroll(false);
+}
+
+.insta-like-carousel-item {
+  flex: 0 0 100%; /* Each image takes up 100% of the container's width */
+  scroll-snap-align: center; /* Aligns each image in the center of the viewport */
+  position: relative;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+  background-size: cover;
+  background-position: center;
+}
+
+.with-border {
+  @include with-border;
+}
+
+.scroll-icon {
+  position: absolute;
+  z-index: 100;
+  border: 1px solid $theme-50;
+  border-radius: 100%;
+}
+
+.next-icon {
+  left: 1rem;
+  top: 49%;
+}
+
+.prev-icon {
+  right: 1rem;
+  top: 49%;
+}