@tripie-pyotato/design-system 0.0.0

package/src/components/Carousel/carousel.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import TripieImage from '../TripieImage/TripieImage';
+import Carousel from './Carousel';
+import images from './images';
+
+const meta: Meta<typeof Carousel> = {
+  title: 'tripie-ui/Carousel',
+  component: Carousel,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '인스타그램의 이미지 carousel와 같이 임계점을 넘어야 해당 이미지에 고정되는 carousel 컴포넌트입니다.ex. 기본은 인접한 게시물의 60%가 보여야 해당 콘텐츠로 넘어갑니다.',
+      },
+    },
+  },
+  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: 'Carousel.Image.2',
+  render: () => {
+    return (
+      <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}
+          />
+        ))}
+      />
+    );
+  },
+};
+
+export const CarouselImageOf3: Story = {
+  name: 'Carousel.Image.3',
+  render: () => {
+    return (
+      <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}
+          />
+        ))}
+      />
+    );
+  },
+};
+
+export const CarouselImageOf4: Story = {
+  name: 'Carousel.Image.4',
+  render: () => {
+    return (
+      <Carousel
+        items={images.slice(0, 4).map((item, index) => (
+          <TripieImage.WithSourceUrl
+            sizes="large"
+            key={item.src + index}
+            alt={item.alt}
+            src={item.src}
+            sourceUrl={item.sourceUrl}
+            blurDataURL={item.blurDataURL}
+          />
+        ))}
+      />
+    );
+  },
+};
+
+export const CarouselImageOf5: Story = {
+  name: 'Carousel.Image.5',
+  render: () => {
+    return (
+      <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}
+          />
+        ))}
+      />
+    );
+  },
+};

package/src/components/Carousel/images.ts

@@ -0,0 +1,44 @@
+const images = [
+  {
+    sizes: 'large',
+    alt: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/1037f801-0b0e-40b1-bff1-c5be7d66eab1.jpeg',
+    src: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/1037f801-0b0e-40b1-bff1-c5be7d66eab1.jpeg',
+    sourceUrl: 'huistenbosch.co.jp/gourmet/64',
+    blurDataURL:
+      'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQVFBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJnTUYvOFFBRlFFQkFRQUFBQUFBQUFBQUFBQUFBQUFBQXdULzJnQU1Bd0VBQWhBREVBQUFBRXN6MkdGSC84UUFKUkFBQWdJQkFnUUhBQUFBQUFBQUFBQUFBUUlEQkJJQUVRVVVNVkVURlNFaU1sSnkvOW9BQ0FFQkFBRS9BRnQwR3hyclRYbW5iWmc3bkdMY2RHUDI3alVGV0VoY1ZnbEhVeU14YmNkOGZUVnpqbEdLSzBKSjRzekZKNFlpSU14WS9FKzNwcFpxL0pWZk1PS1N6TWNDd2pjSXY0eFRZNi8veEFBYUVRQUNBZ01BQUFBQUFBQUFBQUFBQUFBQkVRQVNBaE5oLzlvQUNBRUNBUUUvQU53b0dNbDEyTS8veEFBWUVRRUJBQU1BQUFBQUFBQUFBQUFBQUFBQkVRQVN3Zi9hQUFnQkF3RUJQd0RSckU1bi85az0nIC8+CiAgPC9zdmc+Cg==',
+  },
+  {
+    sizes: 'large',
+    alt: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/5aa4fd86-ce45-4675-a227-a1577bd8d823.jpeg',
+    src: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/5aa4fd86-ce45-4675-a227-a1577bd8d823.jpeg',
+    sourceUrl: 'huistenbosch.co.jp/gourmet/329',
+    blurDataURL:
+      'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQVFBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJBVUcvOFFBRkFFQkFBQUFBQUFBQUFBQUFBQUFBQUFBQmYvYUFBd0RBUUFDRUFNUUFBQUEwNW16eld2L3hBQWhFQUFEQUFFREJBTUFBQUFBQUFBQUFBQUJBZ01SQUFRVEJSSWhNUlFWWWYvYUFBZ0JBUUFCUHdDa3BmRVZJQ2ZLaUZITGVQYlp5UXZyOE9vN0xkYm8zanVKSkpPSWhheHFmTEgwZTBnRWE2cjA1NUZhSStUSHRkeU1qTFpKeVJyN3ppdFMrOUNxenFxRW9DUW9HVHIveEFBYkVRQURBUUFEQVFBQUFBQUFBQUFBQUFBQkF4RUNBQklUSWYvYUFBZ0JBZ0VCUHdCU2J2eGRoUnU4OVFWMHlUNFFlZi9FQUJvUkFBSUNBd0FBQUFBQUFBQUFBQUFBQUFFQ0F4SUFJekgvMmdBSUFRTUJBVDhBRnh0aGtmcFltMmYvMlE9PScgLz4KICA8L3N2Zz4K',
+  },
+  {
+    sizes: 'large',
+    alt: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/0e054e18-9b82-4382-a239-75891abfd614.jpeg',
+    src: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/0e054e18-9b82-4382-a239-75891abfd614.jpeg',
+    sourceUrl: 'huistenbosch.co.jp/gourmet/73',
+    blurDataURL:
+      'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFCQUFBQUFRQ0FNQUFBQW9MUTlUQUFBQmpGQk1WRVVEQUFDOFhFNjZVMHdNQ0FpaVpFTzdnbC9EaFZvR0F3VzFjRXVNVlRzVkVoVXVLUzBVQ3cwd0xUQTRORG1pYUV5ZlhqNm1ia3lYWHo2SlBqbkdURVFlR3lYT2syZjBzUXIzNjloYWRpeUlxRE5pU1RsR05pNC9MQ3pkbm5GTEd4eUVTeTdDZFVMN3p5cjd4NHl5UFRpM2UwaktpbGJTV1ZQeHNCbXNTRCtYYWovVmRXYWFQVFpXVjJTbVNEZm1tUjcvMlNiUGZGdjV4aVgyOVBEODkrdUVocG1pbWp2OC9QcnUyOGhEUDBRdlBDZmd4cWRzbGl5SmhZbVJlR1QxcHdMR3kyMzZ6bVIzWGxDZ2JFVFdtV0pUT1N2Z21WclRqVldvV3pheVprbXJuWHBpWDJWM0hSekxoVjVJUlV4NVNUYTRtSVBDZWs5MVJpK2liRHlOTGlyYWYzR3RrempwZEdUb3ExSDhvNWZHa1ZIaHFUcnBybDM2MXBQd3dYYmNhbHZrNHVESmxsMy8xb25pcGgzZmpES3pzTE95a3gyWWRSUHN3SVYvZVg3WHRKMkpoU3hqWFYybGx4dGFneS8vNHF6MjM4VDR1VDNMNEVPeHRDcjh3MXRXVlJUZjJNL3pueURSMUVHL3VIMjh5a1gvcWkvUjA5cVhsWjRrTFJTeXMwYm95MFgvOHBSSllDVzR0anlYeWdvQUFBQUFDWEJJV1hNQUFoY29BQUlYS0FFUCsrY1dBQUFCQWtsRVFWUjRuRFhIWlZlREFCaEE0UmNHak5oZ3hJaDFkM2VIM2QzZDNkMU8vZU1lOWZoOHVlZkNjTHhzcm55K1FmbTFubis1cTU5QVBtNnVXSjdlRzlXUGRsc3RaZzloYUc3LzlQcWgxZW9vemVhbFd0d0ZUeXFWS2RTMDJ0ZnovYzE1THJjQm5veVMxTTQweTJQcG9ucFVVck1RVWtMYmU4ZVdxOXVHakdNQ1BnSEo1ZFcxblRSZmlKQUhXMHRUTGhlZ1VlOUtERVVvbWR0Y21CNFhNRUJpYVhkaVBTRVRSTUR2RnlnTTBMQWtSZWNSWXBJa1RTWVR4c0hzWWhCQmd6NXlGQ2NKbnVKNEVNV3dOT01iQ1RnR0IvcjdjTW9LWTZ4ZGREb05FYS9EM2RQZFpXZUFOckpHeHNqYWVxMDJ4a3pUT2dBQXZjNWcwT2wvL041Zi91bS9BVElpSytQS3lJZ2tBQUFBQUVsRlRrU3VRbUNDJyAvPgogIDwvc3ZnPgo=',
+  },
+  {
+    sizes: 'large',
+    alt: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/24201c4a-ad69-489c-bd73-96b830ce9040.jpeg',
+    src: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/24201c4a-ad69-489c-bd73-96b830ce9040.jpeg',
+    sourceUrl: 'huistenbosch.co.jp/gourmet/66#photo',
+    blurDataURL:
+      'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQVFBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJnTUUvOFFBRlFFQkFRQUFBQUFBQUFBQUFBQUFBQUFBQkFYLzJnQU1Bd0VBQWhBREVBQUFBSkNGZXdWSC84UUFJeEFBQVFNREJBSURBQUFBQUFBQUFBQUFBZ0VEQkJFU0lRQUZFeUlHTVRKQllmL2FBQWdCQVFBQlB3Q1REOGJoczJUNGR6dnNXMk83cDV4MjA5UDNTRklSM2hjYVVBUVE1VzBKYkV3aVpUTk5iZURUVUxjQWZKS2lWUmRKQ080UitRMVgzK2EyOTlpWkZtdXlsYjVXMUVVS3hWVHRYNjlEU21kZi84UUFHQkVCQVFBREFBQUFBQUFBQUFBQUFBQUFBZ0VBRWlILzJnQUlBUUlCQVQ4QU5STTV0TS8veEFBWUVRRUJBQU1BQUFBQUFBQUFBQUFBQUFBQkFnQURJZi9hQUFnQkF3RUJQd0RZWGFWZEp6UC8yUT09JyAvPgogIDwvc3ZnPgo=',
+  },
+  {
+    sizes: 'large',
+    alt: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/e3dc3514-e5c7-456e-93c2-e342483aa769.jpeg',
+    src: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/e3dc3514-e5c7-456e-93c2-e342483aa769.jpeg',
+    sourceUrl: 'huistenbosch.co.jp/gourmet/58#information',
+    blurDataURL:
+      'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQVFBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJRWUgvOFFBRkFFQkFBQUFBQUFBQUFBQUFBQUFBQUFBQlAvYUFBd0RBUUFDRUFNUUFBQUFsZEFGWE9yL3hBQWpFQUFCQXdNRUFnTUFBQUFBQUFBQUFBQURBUUlFQlNFaUFCRVNFd1l4UVdGeS85b0FDQUVCQUFFL0FQSG80MmxFYkRkRE0rYjNYVVhqR0lpRmlMTGN1WElqdnJmYk4ya3FsSEIzQlJpakt4K0QrbEZIYjgzMUhTbFZFSFlhc1F4eUh0dzV2ZUgxYTZhLy84UUFHQkVBQWdNQUFBQUFBQUFBQUFBQUFBQUFBQUVDRVNMLzJnQUlBUUlCQVQ4QWl0MmYvOFFBR0JFQUF3RUJBQUFBQUFBQUFBQUFBQUFBQWhFaEFBSC8yZ0FJQVFNQkFUOEFJWHl4Yi8vWicgLz4KICA8L3N2Zz4K',
+  },
+];
+
+export default images;

package/src/components/Carousel/index.ts

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

package/src/components/Chip/Chip.spec.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, vi } from 'vitest';
+
+import { motion } from 'framer-motion';
+import '../../shared/variants';
+
+import Chip from './Chip';
+// !! motion framer 올바르게 mock 하는 방법? props 못 읽는 문제..
+vi.mock('framer-motion', async () => {
+  const actual = await vi.importActual<typeof motion>('framer-motion');
+
+  return {
+    ...actual,
+    motion: {
+      button: vi.fn(({ animate, whileHover, whileTap, className, ...props }: any) => {
+        console.log('Mocked motion.button animate:', animate); // Debugging log
+        return (
+          <button
+            data-animate={animate ?? 'rest'} // Ensure animate is always defined
+            data-while-hover={whileHover ?? ''}
+            data-while-tap={whileTap ?? ''}
+            className={className ?? ''}
+            {...props}
+          />
+        );
+      }),
+    },
+  };
+});
+
+describe('Chip Component', () => {
+  it('1. should have correct motion attributes', async () => {
+    render(<Chip selected={true}>Animated Chip</Chip>);
+    const chip = screen.getByRole('button', { name: /Animated Chip/i });
+    expect(chip).toBeInTheDocument();
+
+    // // Ensure motion props are passed correctly
+    // expect(chip.getAttribute('data-animate')).toBe('selected');
+    // expect(chip.getAttribute('data-while-hover')).toBe('shine');
+    // expect(chip.getAttribute('data-while-tap')).toBe('shine');
+    // // Check computed styles if needed
+    // expect(getComputedStyle(chip).backgroundColor).toEqual('var(--themes-color-200)');
+    // expect(getComputedStyle(chip).borderColor).toEqual('var(--themes-color-400)');
+  });
+
+  it('2. Chip disabled 속성을 true로 설정하면 disable된다.', () => {
+    render(<Chip disabled={true}>Disabled Chip</Chip>);
+
+    const chip = screen.getByRole('button', { name: /Disabled Chip/i });
+
+    expect(chip).toBeDisabled();
+  });
+
+  it('2. Chip disabled 속성을 true로 설정하면 disable된다.', () => {
+    render(<Chip className={'restaurant'}>1</Chip>);
+
+    const chip = screen.getByRole('button', { name: /1/i });
+  });
+});

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,64 @@
+import { classNames, Motion } from '../../shared/wrappers';
+
+import { ReactNode } from 'react';
+import Style from './chip.module.scss';
+
+import { GLOW_VARIANT, SHINE_VARIANT } from '../../shared/variants';
+
+const cx = classNames.bind(Style);
+
+type ChipProps = {
+  selected?: boolean;
+  children: ReactNode;
+  className?: string;
+  current?: string;
+  disabled?: boolean;
+  cycle?: (state?: any) => void;
+  onClick?: () => void;
+  type?: 'submit' | 'reset' | 'button';
+};
+
+const Chip = ({ children, className, onClick, selected, disabled = false }: Readonly<ChipProps>) => {
+  return (
+    <Motion.Button
+      whileHover={'shine'}
+      whileTap={'shine'}
+      disabled={disabled}
+      animate={selected ? 'selected' : 'rest'}
+      variants={SHINE_VARIANT}
+      onClick={onClick}
+      className={cx('chip', 'with-border', className)}
+    >
+      {children}
+    </Motion.Button>
+  );
+};
+
+const AccentedChip = ({ children, current, className, onClick, type = 'button' }: Readonly<ChipProps>) => {
+  return (
+    <Motion.Button
+      initial={'rest'}
+      className={cx('wrap', 'with-border', current === 'on' ? 'selected' : 'chip', className)}
+      variants={GLOW_VARIANT}
+      whileHover={'glow'}
+      onClick={onClick}
+      type={type}
+    >
+      <span className={cx('accented', current === 'on' ? 'selected' : 'chip')}>{children}</span>
+      <Motion.Span
+        className={cx('glow')}
+        animate={{ rotate: 360 }}
+        transition={{
+          type: 'tween',
+          duration: 2,
+          ease: 'linear',
+          repeat: Infinity,
+        }}
+      />
+    </Motion.Button>
+  );
+};
+
+Chip.Accented = AccentedChip;
+
+export default Chip;

package/src/components/Chip/chip.module.scss

@@ -0,0 +1,79 @@
+@use '../../variables' as *;
+@use '../../mixins' as *;
+
+.with-border {
+  @include with-border;
+  padding: 0.2rem 0.6rem;
+  border-radius: 10px;
+  color: inherit;
+}
+.chip {
+  border-color: $theme-400;
+  background-color: $theme-200;
+  font-size: 0.8rem;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.chip:disabled {
+  cursor: not-allowed;
+  color: $theme-300;
+}
+
+.accented {
+  position: relative;
+  z-index: 2;
+  margin: 0.4px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.8rem;
+  border-radius: 10px;
+}
+
+.glow {
+  width: 100%;
+  height: 4rem;
+  background-color: $theme-50;
+  border: 1px $theme-50;
+  filter: blur(18px);
+  mask: linear-gradient(transparent 0%, $theme-50 120%);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform-origin: left;
+  transform: translate(-50%, -50%);
+}
+.wrap {
+  cursor: pointer;
+  overflow: hidden;
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+  color: $theme-50;
+  border-radius: 10px;
+  padding: 0;
+}
+
+.selected {
+  background-color: $theme-100;
+}
+
+.restaurant {
+  @include map-marker('restaurant');
+}
+
+.hotel {
+  @include map-marker('hotel');
+}
+
+.attraction {
+  @include map-marker('attraction');
+}
+
+.marker {
+  display: inline-flex;
+  border-radius: 100%;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0.2rem;
+}

package/src/components/Chip/chip.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import Chip from './Chip';
+
+const meta: Meta<typeof Chip> = {
+  title: 'tripie-ui/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: '칩 컴포넌트입니다.accentedChip은 호버 시 애니메이션으로 강조됩니다.',
+      },
+    },
+  },
+  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: 'Chip',
+  args: {
+    children: 'Default',
+  },
+};
+
+export const Selected: Story = {
+  name: 'Chip.Selected',
+  args: {
+    children: 'Selected',
+    selected: true,
+  },
+};
+
+export const Disabled: Story = {
+  name: 'Chip.Disabled',
+  args: {
+    children: 'Disabled',
+    disabled: true,
+  },
+};
+
+export const RestaurantChip: Story = {
+  name: 'Chip.Restaurant',
+  args: {
+    children: '1',
+    className: 'restaurant',
+  },
+};
+
+export const AccentedChip: Story = {
+  name: 'Chip.Accented',
+  render: () => <Chip.Accented>accented Chip</Chip.Accented>,
+};

package/src/components/Chip/index.ts

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

package/src/components/ChipMarker/ChipMarker.tsx

@@ -0,0 +1,20 @@
+import { classNames } from '../../shared/wrappers';
+
+import { useMemo } from 'react';
+import Chip from '../Chip/Chip';
+import Style from './chip-marker.module.scss';
+
+const cx = classNames.bind(Style);
+
+const ChipMarker = ({ className, children, selected }: { className: string; children: string; selected?: boolean }) => {
+  const marker = useMemo(() => {
+    return +children.split('-')[1] + 1;
+  }, [children]);
+  return (
+    <Chip className={cx('marker', className)} selected={selected}>
+      {marker}
+    </Chip>
+  );
+};
+
+export default ChipMarker;

package/src/components/ChipMarker/chip-marker.module.scss

@@ -0,0 +1,75 @@
+@use '../../variables' as *;
+@use '../../mixins' as *;
+
+.with-border {
+  @include with-border;
+  padding: 0.2rem 0.6rem;
+  border-radius: 10px;
+  color: inherit;
+}
+.chip {
+  border-color: $theme-400;
+  background-color: $theme-200;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.accented {
+  position: relative;
+  z-index: 2;
+  margin: 0.4px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.8rem;
+  border-radius: 10px;
+}
+
+.glow {
+  width: 100%;
+  height: 4rem;
+  background-color: $theme-50;
+  border: 1px $theme-50;
+  filter: blur(18px);
+  mask: linear-gradient(transparent 0%, $theme-50 120%);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform-origin: left;
+  transform: translate(-50%, -50%);
+}
+.wrap {
+  cursor: pointer;
+  overflow: hidden;
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+  color: $theme-50;
+  border-radius: 10px;
+  padding: 0;
+}
+
+.selected {
+  background-color: $theme-100;
+}
+
+.restaurant {
+  @include map-marker('restaurant');
+}
+
+.hotel {
+  @include map-marker('hotel');
+}
+
+.attraction {
+  @include map-marker('attraction');
+}
+
+.marker {
+  display: inline-flex;
+  border-radius: 100%;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0.2rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}

package/src/components/ChipMarker/chip.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import ChipMarker from './ChipMarker';
+
+const meta: Meta<typeof ChipMarker> = {
+  title: 'tripie-ui/Chip/Marker',
+  component: ChipMarker,
+  tags: ['autodocs'],
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: '지도에 표시되는 Marker Chip 컴포넌트입니다. 호버 및 선택 시 색상이 강조됩니다.',
+      },
+    },
+  },
+  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',
+  args: {
+    children: '0-0',
+  },
+};
+
+export const SecondChip: Story = {
+  name: 'Second',
+  args: {
+    children: '0-1',
+  },
+};

package/src/components/ChipMarker/index.ts

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

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,29 @@
+import { classNames, Motion, MotionProps } from '../../shared/wrappers';
+
+import { ACCORDIAN_VARIANTS } from '../../shared/variants';
+
+import TripieContainer, { TripieContainerProps } from '../TripieContainer/TripieContainer';
+import HR_MARGINS from './constants';
+import Style from './divider.module.scss';
+
+const cx = classNames.bind(Style);
+
+export type DividerProps = Partial<{ current: string; variants: MotionProps['variants']; className: string }>;
+
+export type ArticleDividerProps = { type: 'hr1' | 'hr2' | 'hr3' | 'hr4' | 'hr5' };
+
+const Divider = ({ className, current, variants = ACCORDIAN_VARIANTS.DIVIDER }: DividerProps) => {
+  return <Motion.Div variants={variants} animate={current} className={cx('divider', className)} />;
+};
+
+const ArticleDivider = ({ item }: { item: ArticleDividerProps }) => {
+  return (
+    <TripieContainer applyMargin="top-bottom" margin={HR_MARGINS[item.type] as TripieContainerProps['margin']}>
+      <Divider className={cx('divider', `divider-${item.type}`)} />
+    </TripieContainer>
+  );
+};
+
+Divider.Article = ArticleDivider;
+
+export default Divider;

package/src/components/Divider/constants.ts

@@ -0,0 +1,9 @@
+const HR_MARGINS = {
+  hr1: 'l',
+  hr2: 'm',
+  hr3: 'm',
+  hr4: 'sm',
+  hr5: 'xsm',
+};
+
+export default HR_MARGINS;

package/src/components/Divider/divider.module.scss

@@ -0,0 +1,37 @@
+@use '../../variables' as *;
+
+.accordion-button {
+  width: 2rem;
+}
+
+.accordion-header {
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.divider {
+  height: 1.5px;
+  width: 100%;
+  border-radius: 10px;
+  background-color: $theme-400;
+}
+.accordion-body {
+  color: $theme-40;
+}
+
+.divider-hr1 {
+  background-color: $theme-50;
+  height: 2.4px;
+}
+
+.divider-hr2 {
+  background-color: $theme-50;
+  height: 2px;
+}
+
+.divider-hr3 {
+  background-color: transparent;
+  height: 1.8px;
+}