@1d1s/design-system 0.2.8 → 0.2.10

package/dist/components/BannerCarousel/BannerCarousel.stories.d.ts

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof BannerCarousel>;
 export declare const Default: Story;
 export declare const ImageBackground: Story;
+export declare const Mobile: Story;
 export declare const NoAutoSlide: Story;
 export declare const NoIndicators: Story;

package/dist/components/ChallengeCard/ChallengeCard.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof ChallengeCard>;
 export default meta;
 type Story = StoryObj<typeof ChallengeCard>;
 export declare const Default: Story;
+export declare const Mobile: Story;
 export declare const Recruiting: Story;
 export declare const IndividualParticipant: Story;
 export declare const GroupParticipantCount: Story;

package/dist/components/ChallengeListItem/ChallengeListItem.stories.d.ts

@@ -8,4 +8,6 @@ export declare const Recruiting: Story;
 export declare const Ended: Story;
 export declare const Individual: Story;
 export declare const WithImage: Story;
+export declare const Mobile: Story;
+export declare const MobileList: Story;
 export declare const List: Story;

package/dist/components/DiaryCard/DiaryCard.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof DiaryCard>;
 export default meta;
 type Story = StoryObj<typeof DiaryCard>;
 export declare const Default: Story;
+export declare const Mobile: Story;
 export declare const ControlledLike: Story;

package/dist/components/DiaryListItem/DiaryListItem.stories.d.ts

@@ -6,4 +6,6 @@ type Story = StoryObj<typeof DiaryListItem>;
 export declare const Default: Story;
 export declare const NoImage: Story;
 export declare const ControlledLike: Story;
+export declare const Mobile: Story;
+export declare const MobileList: Story;
 export declare const List: Story;

package/dist/components/InfoButton/InfoButton.stories.d.ts

@@ -4,3 +4,6 @@ declare const meta: Meta<typeof InfoButton>;
 export default meta;
 type Story = StoryObj<typeof InfoButton>;
 export declare const Default: Story;
+export declare const MobileGrid: Story;
+export declare const TabletGrid: Story;
+export declare const DesktopGrid: Story;

package/dist/components/RightSidebar/RightSidebar.stories.d.ts

@@ -7,4 +7,5 @@ export declare const Default: Story;
 export declare const LoggedOut: Story;
 export declare const EmptyChallenges: Story;
 export declare const NotCollapsible: Story;
+export declare const Mobile: Story;
 export declare const EmptyChallengesJoinDisabled: Story;

package/dist/components/ScheduleCalendar/ScheduleCalendar.stories.d.ts

@@ -6,3 +6,5 @@ type Story = StoryObj<typeof ScheduleCalendar>;
 export declare const OneMonth: Story;
 export declare const TwoWeeks: Story;
 export declare const ThreeWeeks: Story;
+export declare const MobileOneMonth: Story;
+export declare const MobileTwoWeeks: Story;

package/dist/index.es.js

@@ -4263,7 +4263,7 @@ function Qb({
   enableLoop: r = !0,
   showIndicators: o = !0,
   aspectRatioClassName: a = "aspect-[4/1]",
-  minHeightPx: i = 120,
+  minHeightPx: i = 180,
   componentId: l,
   enableDataLayerTracking: c = !1,
   impressionMode: d = "once",
@@ -4344,7 +4344,7 @@ function Qb({
       k === 0 && (S(!1), M(g));
     }
   };
-  return g === 0 ? null : /* @__PURE__ */ s("div", { className: _("w-full", b), ...m, children: /* @__PURE__ */ A("div", { className: "relative overflow-hidden rounded-4", children: [
+  return g === 0 ? null : /* @__PURE__ */ s("div", { className: _("@container w-full", b), ...m, children: /* @__PURE__ */ A("div", { className: "relative overflow-hidden rounded-4", children: [
     /* @__PURE__ */ s(
       "div",
       {
@@ -4366,7 +4366,7 @@ function Qb({
               "data-banner-title": R.title,
               "data-banner-image-url": V ?? "",
               className: _(
-                "relative w-full shrink-0 overflow-hidden p-6 text-left text-white transition hover:brightness-105",
+                "relative w-full shrink-0 overflow-hidden p-4 text-left text-white transition hover:brightness-105 @[480px]:p-6",
                 "cursor-pointer",
                 a
               ),
@@ -4391,10 +4391,10 @@ function Qb({
                   /* @__PURE__ */ s(T, { size: "caption3", weight: "medium", className: "text-white/85", children: R.type }),
                   /* @__PURE__ */ A("div", { className: "flex items-end justify-between gap-4", children: [
                     /* @__PURE__ */ A("div", { className: "flex flex-col gap-2", children: [
-                      /* @__PURE__ */ s(T, { size: "heading1", weight: "bold", className: "line-clamp-1 text-white", children: R.title }),
-                      /* @__PURE__ */ s(T, { size: "body2", weight: "medium", className: "line-clamp-1 text-white/90", children: R.subtitle })
+                      /* @__PURE__ */ s(T, { size: "heading2", weight: "bold", className: "line-clamp-1 text-white @[480px]:text-3xl", children: R.title }),
+                      /* @__PURE__ */ s(T, { size: "caption1", weight: "medium", className: "line-clamp-1 text-white/90 @[480px]:text-lg", children: R.subtitle })
                     ] }),
-                    /* @__PURE__ */ s(T, { size: "heading1", weight: "bold", className: "text-white", children: "→" })
+                    /* @__PURE__ */ s(T, { size: "heading2", weight: "bold", className: "text-white @[480px]:text-3xl", children: "→" })
                   ] })
                 ] })
               ]
@@ -7190,14 +7190,14 @@ function Xb({
     "div",
     {
       className: _(
-        "min-w-60 w-full overflow-hidden rounded-[12px] border border-gray-200 bg-white",
+        "@container min-w-60 w-full overflow-hidden rounded-[12px] border border-gray-200 bg-white",
         f && "cursor-pointer",
         "transition-all duration-200 ease-in-out hover:-translate-y-1 hover:shadow-default",
         u
       ),
       onClick: f,
       children: [
-        /* @__PURE__ */ A("div", { className: "relative h-52 w-full overflow-hidden bg-gray-100", children: [
+        /* @__PURE__ */ A("div", { className: "relative h-40 w-full overflow-hidden bg-gray-100 @[280px]:h-52", children: [
           p ? /* @__PURE__ */ s("div", { className: "absolute inset-0", children: /* @__PURE__ */ s(
             gt,
             {
@@ -7214,27 +7214,27 @@ function Xb({
             /* @__PURE__ */ s(Sn, { size: "caption2", weight: "bold", className: m, children: b })
           ] })
         ] }),
-        /* @__PURE__ */ A("div", { className: "w-full bg-white px-5 py-5", children: [
+        /* @__PURE__ */ A("div", { className: "w-full bg-white px-4 py-4 @[280px]:px-5 @[280px]:py-5", children: [
           /* @__PURE__ */ s(
             T,
             {
-              size: "heading2",
+              size: "body1",
               weight: "bold",
-              className: "line-clamp-2 min-h-10 text-gray-900",
+              className: "line-clamp-2 min-h-8 text-gray-900 @[280px]:text-2xl @[280px]:min-h-10",
               children: e
             }
           ),
-          /* @__PURE__ */ A("div", { className: "mt-4 flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ A("div", { className: "mt-3 flex w-full items-center justify-between @[280px]:mt-4", children: [
             /* @__PURE__ */ A("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ s(Pt, { className: "h-3.5 w-3.5 text-gray-600" }),
-              /* @__PURE__ */ s(T, { size: "caption1", weight: "medium", className: "text-gray-600", children: t })
+              /* @__PURE__ */ s(Pt, { className: "h-3 w-3 text-gray-600 @[280px]:h-3.5 @[280px]:w-3.5" }),
+              /* @__PURE__ */ s(T, { size: "caption2", weight: "medium", className: "text-gray-600 @[280px]:text-base", children: t })
             ] }),
             /* @__PURE__ */ A("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ s(oo, { className: "h-3.5 w-3.5 text-gray-600" }),
-              /* @__PURE__ */ s(T, { size: "caption1", weight: "medium", className: "text-gray-600", children: v })
+              /* @__PURE__ */ s(oo, { className: "h-3 w-3 text-gray-600 @[280px]:h-3.5 @[280px]:w-3.5" }),
+              /* @__PURE__ */ s(T, { size: "caption2", weight: "medium", className: "text-gray-600 @[280px]:text-base", children: v })
             ] })
           ] }),
-          /* @__PURE__ */ A(T, { size: "caption1", weight: "regular", className: "mt-3 text-gray-500", children: [
+          /* @__PURE__ */ A(T, { size: "caption2", weight: "regular", className: "mt-2 text-gray-500 @[280px]:mt-3 @[280px]:text-base", children: [
             i,
             " - ",
             l
@@ -7264,13 +7264,13 @@ function qb({
     "div",
     {
       className: _(
-        "flex min-w-[400px] gap-3 rounded-4 border border-gray-200 bg-white p-3 transition-all duration-200 ease-in-out hover:-translate-y-1 hover:shadow-default sm:gap-4 sm:p-4",
+        "@container flex gap-3 rounded-4 border border-gray-200 bg-white p-3 transition-all duration-200 ease-in-out hover:-translate-y-1 hover:shadow-default @[400px]:gap-4 @[400px]:p-4",
         p && "cursor-pointer",
         f
       ),
       onClick: p,
       children: [
-        /* @__PURE__ */ s("div", { className: "relative -mb-3 -ml-3 -mt-3 w-[120px] shrink-0 self-stretch overflow-hidden rounded-l-3 bg-gray-100 sm:-mb-4 sm:-ml-4 sm:-mt-4 sm:w-[140px]", children: v ? /* @__PURE__ */ s(
+        /* @__PURE__ */ s("div", { className: "relative -mb-3 -ml-3 -mt-3 w-[120px] shrink-0 self-stretch overflow-hidden rounded-l-3 bg-gray-100 @[400px]:-mb-4 @[400px]:-ml-4 @[400px]:-mt-4 @[400px]:w-[140px]", children: v ? /* @__PURE__ */ s(
           gt,
           {
             src: o,
@@ -7287,7 +7287,7 @@ function qb({
               as: "p",
               size: "caption1",
               weight: "bold",
-              className: "truncate text-gray-900 sm:text-lg",
+              className: "truncate text-gray-900 @[400px]:text-lg",
               children: e
             }
           ),
@@ -7299,7 +7299,7 @@ function qb({
             b ? /* @__PURE__ */ s(Pt, { className: "h-3.5 w-3.5 text-gray-400" }) : /* @__PURE__ */ s(oo, { className: "h-3.5 w-3.5 text-gray-400" }),
             /* @__PURE__ */ s(T, { size: "caption3", weight: "medium", className: "text-gray-500", children: b ? "개인 목표" : `고정 목표 · ${a} / ${i}` })
           ] }),
-          /* @__PURE__ */ A(T, { size: "caption3", weight: "regular", className: "hidden text-gray-400 sm:block", children: [
+          /* @__PURE__ */ A(T, { size: "caption3", weight: "regular", className: "hidden text-gray-400 @[400px]:block", children: [
             l,
             " – ",
             c
@@ -10844,7 +10844,7 @@ function Kv({
       }
     ) : /* @__PURE__ */ s(jn, { className: "h-full w-full", logoSize: "lg" }),
     d ? /* @__PURE__ */ s("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-linear-to-t from-black/15 to-transparent" }) : null,
-    /* @__PURE__ */ s("div", { className: "absolute top-3 left-3 z-20", children: /* @__PURE__ */ s("div", { className: "relative flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-[0_6px_14px_rgba(34,34,34,0.2)]", children: /* @__PURE__ */ s(
+    /* @__PURE__ */ s("div", { className: "absolute top-3 left-3 z-20", children: /* @__PURE__ */ s("div", { className: "relative flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-[0_6px_14px_rgba(34,34,34,0.2)] @[280px]:h-12 @[280px]:w-12", children: /* @__PURE__ */ s(
       Qi,
       {
         value: c,
@@ -10852,7 +10852,7 @@ function Kv({
         showPercentage: !0
       }
     ) }) }),
-    /* @__PURE__ */ s("div", { className: "absolute top-3 right-3 z-20 text-3xl leading-none", children: /* @__PURE__ */ s("span", { role: "img", "aria-label": r, children: l[r] }) }),
+    /* @__PURE__ */ s("div", { className: "absolute top-3 right-3 z-20 text-2xl leading-none @[280px]:text-3xl", children: /* @__PURE__ */ s("span", { role: "img", "aria-label": r, children: l[r] }) }),
     /* @__PURE__ */ s("div", { className: "absolute bottom-3 left-3 z-20", children: /* @__PURE__ */ A(
       "button",
       {
@@ -10877,14 +10877,14 @@ function Qv({
   onChallengeClick: o,
   date: a
 }) {
-  return /* @__PURE__ */ A("div", { className: "flex w-full flex-col gap-3 p-4", children: [
+  return /* @__PURE__ */ A("div", { className: "flex w-full flex-col gap-2 p-3 @[280px]:gap-3 @[280px]:p-4", children: [
     /* @__PURE__ */ s(
       T,
       {
         as: "p",
-        size: "body1",
+        size: "body2",
         weight: "bold",
-        className: "line-clamp-2 min-h-10 leading-tight text-gray-900",
+        className: "line-clamp-2 min-h-8 leading-tight text-gray-900 @[280px]:text-xl @[280px]:min-h-10",
         children: e
       }
     ),
@@ -10902,20 +10902,20 @@ function Qv({
         children: /* @__PURE__ */ s(
           T,
           {
-            size: "body2",
+            size: "caption1",
             weight: "medium",
-            className: "block w-full truncate text-blue-500",
+            className: "block w-full truncate text-blue-500 @[280px]:text-lg",
             children: r
           }
         )
       }
     ),
     /* @__PURE__ */ s("div", { className: "h-px w-full bg-gray-200" }),
-    /* @__PURE__ */ A("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ A("div", { className: "flex items-center gap-2 @[280px]:gap-3", children: [
       /* @__PURE__ */ s(Yt, { imageUrl: n, size: "sm" }),
-      /* @__PURE__ */ A("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ s(T, { size: "body2", weight: "bold", className: "text-gray-900", children: t }),
-        /* @__PURE__ */ s(T, { size: "caption2", weight: "regular", className: "text-gray-500", children: a })
+      /* @__PURE__ */ A("div", { className: "flex flex-col gap-0.5 @[280px]:gap-1", children: [
+        /* @__PURE__ */ s(T, { size: "caption1", weight: "bold", className: "text-gray-900 @[280px]:text-lg", children: t }),
+        /* @__PURE__ */ s(T, { size: "caption3", weight: "regular", className: "text-gray-500 @[280px]:text-sm", children: a })
       ] })
     ] })
   ] });
@@ -10948,7 +10948,7 @@ function uy({
   return /* @__PURE__ */ s(
     "div",
     {
-      className: _("block w-full", b && "cursor-pointer"),
+      className: _("@container block w-full", b && "cursor-pointer"),
       onClick: b,
       children: /* @__PURE__ */ A("div", { className: "overflow-hidden rounded-4 border border-gray-200 bg-white transition-transform duration-200 hover:-translate-y-1 hover:shadow-lg", children: [
         /* @__PURE__ */ s(
@@ -11014,13 +11014,13 @@ function fy({
     "div",
     {
       className: _(
-        "flex min-w-[560px] gap-3 rounded-4 border border-gray-200 bg-white p-3 transition-all duration-200 ease-in-out hover:-translate-y-1 hover:shadow-default",
+        "@container flex min-w-[320px] gap-3 rounded-4 border border-gray-200 bg-white p-3 transition-all duration-200 ease-in-out hover:-translate-y-1 hover:shadow-default @[480px]:min-w-[560px]",
         b && "cursor-pointer",
         m
       ),
       onClick: b,
       children: [
-        /* @__PURE__ */ A("div", { className: "relative -mb-3 -ml-3 -mt-3 w-[140px] shrink-0 self-stretch overflow-hidden rounded-l-3 bg-gray-100", children: [
+        /* @__PURE__ */ A("div", { className: "relative -mb-3 -ml-3 -mt-3 w-[100px] shrink-0 self-stretch overflow-hidden rounded-l-3 bg-gray-100 @[480px]:w-[140px]", children: [
           S ? /* @__PURE__ */ s(gt, { src: t, alt: e, width: 128, height: 128, className: "h-full w-full object-cover" }) : /* @__PURE__ */ s(jn, { className: "h-full w-full", logoSize: "sm" }),
           S ? /* @__PURE__ */ s("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-black/10 to-transparent" }) : null,
           /* @__PURE__ */ s("div", { className: "absolute top-2 left-2 z-10", children: /* @__PURE__ */ s("div", { className: "relative flex h-9 w-9 items-center justify-center rounded-full bg-white shadow-[0_4px_10px_rgba(34,34,34,0.18)]", children: /* @__PURE__ */ s(Qi, { value: W, size: "sm", showPercentage: !0 }) }) }),
@@ -12237,12 +12237,11 @@ function Ny({
     "div",
     {
       className: _(
-        "rounded-2 relative overflow-hidden p-4 sm:p-6 text-white",
+        "relative overflow-hidden rounded-2 text-white",
         "flex flex-col justify-between",
-        "h-36 w-full sm:h-47.5 sm:w-56",
-        "hover:shadow-default",
-        "hover:-translate-y-1",
-        "transition-all duration-300",
+        "p-2 sm:p-4 lg:p-6",
+        "h-24 w-full sm:h-36 lg:h-47.5 lg:w-56",
+        "hover:shadow-default hover:-translate-y-1 transition-all duration-300",
         i && "cursor-pointer",
         l
       ),
@@ -12252,25 +12251,25 @@ function Ny({
       onClick: i,
       children: [
         /* @__PURE__ */ A("div", { className: "flex w-full flex-col gap-0.5 sm:gap-1", children: [
-          /* @__PURE__ */ s(T, { size: "caption3", weight: "medium", className: "opacity-80 sm:text-sm", children: e }),
-          /* @__PURE__ */ s(T, { size: "body1", weight: "bold", className: "mt-0.5 sm:mt-1 sm:text-2xl", children: t })
+          /* @__PURE__ */ s(T, { size: "caption3", weight: "medium", className: "opacity-80", children: e }),
+          /* @__PURE__ */ s(T, { size: "caption2", weight: "bold", className: "mt-0.5 sm:text-xl sm:mt-1 lg:text-2xl", children: t })
         ] }),
-        /* @__PURE__ */ s("div", { className: "absolute bottom-4 left-4 sm:bottom-6 sm:left-6", children: /* @__PURE__ */ s(
+        /* @__PURE__ */ s("div", { className: "absolute bottom-2 left-2 sm:bottom-4 sm:left-4 lg:bottom-6 lg:left-6", children: /* @__PURE__ */ s(
           gt,
           {
             src: n,
             alt: r,
-            width: 36,
-            height: 60,
-            className: "object-contain sm:w-12 sm:h-19.5"
+            width: 24,
+            height: 40,
+            className: "object-contain sm:w-9 sm:h-15 lg:w-12 lg:h-19.5"
           }
         ) }),
         /* @__PURE__ */ s(
           T,
           {
-            size: "heading1",
+            size: "body2",
             weight: "bold",
-            className: "absolute right-4 bottom-4 sm:right-6 sm:bottom-6 sm:text-4xl",
+            className: "absolute right-2 bottom-2 sm:right-4 sm:bottom-4 sm:text-3xl lg:right-6 lg:bottom-6 lg:text-4xl",
             children: "→"
           }
         )
@@ -12845,16 +12844,16 @@ function Py({
   cellMinHeight: n = 140,
   className: r
 }) {
-  return /* @__PURE__ */ s("div", { className: _("w-full overflow-hidden rounded-4 border border-gray-300 bg-white", r), children: /* @__PURE__ */ A("table", { className: "w-full table-fixed border-collapse", children: [
+  return /* @__PURE__ */ s("div", { className: _("@container w-full overflow-hidden rounded-4 border border-gray-300 bg-white", r), children: /* @__PURE__ */ A("table", { className: "w-full table-fixed border-collapse", children: [
     /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ s("tr", { children: t.map((o, a) => /* @__PURE__ */ s(
       "th",
       {
         className: _(
-          "h-12 border-b border-r border-gray-300 bg-gray-100 px-2.5 text-center align-middle",
+          "h-8 border-b border-r border-gray-300 bg-gray-100 px-1 text-center align-middle @[480px]:h-12 @[480px]:px-2.5",
           a === t.length - 1 && "border-r-0"
         ),
         scope: "col",
-        children: /* @__PURE__ */ s(T, { size: "body2", weight: "bold", className: "text-gray-600", children: o })
+        children: /* @__PURE__ */ s(T, { size: "caption3", weight: "bold", className: "text-gray-600 @[480px]:text-lg", children: o })
       },
       `${o}-${a}`
     )) }) }),
@@ -12872,7 +12871,7 @@ function Py({
             "div",
             {
               className: _(
-                "flex h-full min-h-[110px] flex-col gap-2 p-2",
+                "flex h-full flex-col gap-1 p-1 @[480px]:gap-2 @[480px]:p-2",
                 i.muted && "bg-gray-300",
                 i.highlighted && "bg-main-200 ring-1 ring-inset ring-main-400"
               ),
@@ -12881,25 +12880,25 @@ function Py({
                 i.day !== void 0 ? /* @__PURE__ */ s(
                   T,
                   {
-                    size: "body2",
+                    size: "caption3",
                     weight: "medium",
-                    className: _("leading-tight", H0(i.dayTone)),
+                    className: _("leading-tight @[480px]:text-lg", H0(i.dayTone)),
                     children: i.day
                   }
                 ) : null,
-                i.title !== void 0 ? /* @__PURE__ */ s(T, { size: "body2", weight: "bold", className: "line-clamp-1 text-gray-900", children: i.title }) : null,
-                i.bars && i.bars.length > 0 ? /* @__PURE__ */ s("div", { className: "mt-0.5 flex flex-col gap-1.5", children: i.bars.map((f, p) => /* @__PURE__ */ s(
+                i.title !== void 0 ? /* @__PURE__ */ s(T, { size: "caption3", weight: "bold", className: "line-clamp-1 text-gray-900 @[480px]:text-lg", children: i.title }) : null,
+                i.bars && i.bars.length > 0 ? /* @__PURE__ */ s("div", { className: "mt-0.5 flex flex-col gap-1", children: i.bars.map((f, p) => /* @__PURE__ */ s(
                   "span",
                   {
                     className: _(
-                      "block h-1.5 rounded-full transition-all duration-200",
+                      "block h-1 rounded-full transition-all duration-200 @[480px]:h-1.5",
                       j0(f.tone)
                     ),
                     style: { width: $0(f.width) }
                   },
                   `${d}-bar-${p}`
                 )) }) : null,
-                i.subtitle !== void 0 ? /* @__PURE__ */ s(T, { size: "caption2", weight: "medium", className: "text-gray-600", children: i.subtitle }) : null
+                i.subtitle !== void 0 ? /* @__PURE__ */ s(T, { size: "caption3", weight: "medium", className: "hidden text-gray-600 @[480px]:block", children: i.subtitle }) : null
               ] })
             }
           )