[Feat] #90 - 공통 Progress Indicators 컴포넌트 추가

next.config.ts

@@ -5,6 +5,9 @@ const nextConfig: NextConfig = {
   allowedDevOrigins: ["10.250.174.185", "10.250.203.166"],
   output: "export",
   trailingSlash: true,
+  images: {
+    unoptimized: true, // static export 환경에서 next/image 사용 시 필요
+  },
 };
 
 export default nextConfig;

src/index.css

@@ -244,3 +244,37 @@ body {
 .shadow-lg {
   box-shadow: var(--shadow-lg);
 }
+
+@layer utilities {
+  /* 프로그레스 바 빗살무늬 배경 */
+  .bg-stripes {
+    background-image: linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.15) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.15) 75%,
+      transparent 75%,
+      transparent
+    );
+    background-size: 1rem 1rem; /* 빗살무늬 크기 조절 */
+  }
+
+  /* 프로그레스 바 빗살무늬 애니메이션 */
+  @keyframes progress-stripes {
+    0% { background-position: 1rem 0; }
+    100% { background-position: 0 0; }
+  }
+  .animate-progress-stripes {
+    animation: progress-stripes 1s linear infinite;
+  }
+
+  /* 스켈레톤 로더 애니메이션 */
+  @keyframes shimmer {
+    100% { transform: translateX(100%); }
+  }
+  .animate-shimmer {
+    animation: shimmer 1.5s infinite;
+  }
+}

src/shared/ui/avatars/avatars.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 // 1. 공통 아이콘 Import 추가
 import { UserSolidIcon } from "../icons";
 
@@ -124,11 +125,7 @@ export const Avatar = ({
     <div className={avatarClasses} onClick={onClick}>
       {/* 1. 이미지 우선 렌더링 */}
       {src ? (
-        <img
-          src={src}
-          alt={name || "User avatar"}
-          className="w-full h-full object-cover rounded-full"
-        />
+        <Image src={src} alt={name || "User avatar"} fill className="object-cover rounded-full" />
       ) : /* 2. 이미지가 없으면 이름 이니셜 */
       name ? (
         <span className={`${avatarTextSizeClasses[size]} tracking-tight`}>{getInitial(name)}</span>

src/shared/ui/lists/lists.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 // 공통 아이콘 Import 추가
 import { ChevronRightIcon, InboxIcon } from "../icons";
 
@@ -169,10 +170,12 @@ export const ListItem = ({
 
       {/* 썸네일 이미지 */}
       {imageUrl && (
-        <img
+        <Image
           src={imageUrl}
           alt={title}
-          className="w-[48px] h-[48px] rounded-[8px] object-cover flex-shrink-0 border border-[color:var(--color-gray-200,#E5E5E5)]"
+          width={48}
+          height={48}
+          className="rounded-[8px] object-cover flex-shrink-0 border border-[color:var(--color-gray-200,#E5E5E5)]"
         />
       )}
 

src/shared/ui/progress/progress.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { ProgressBar, CircularProgress, Spinner, Skeleton } from "./progress";
+
+// ==========================================
+// Meta
+// ==========================================
+const meta = {
+  title: "Shared/UI/Progress",
+  component: ProgressBar,
+  parameters: {
+    layout: "padded",
+    componentSubtitle: "시스템의 진행 상태나 로딩 상태를 시각적으로 보여주는 컴포넌트들",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: { type: "range", min: 0, max: 100 },
+      description: "진행률 (0~100)",
+    },
+    variant: {
+      control: "select",
+      options: ["primary", "success", "warning", "error"],
+      description: "프로그레스 바의 색상 테마",
+    },
+    size: {
+      control: "select",
+      options: ["thin", "medium", "thick"],
+      description: "프로그레스 바의 두께",
+    },
+    hasStripes: { control: "boolean", description: "빗살무늬 패턴 적용 여부" },
+    isAnimated: { control: "boolean", description: "빗살무늬 애니메이션 적용 여부" },
+    labelPosition: {
+      control: "select",
+      options: ["none", "top", "inside"],
+      description: "라벨(퍼센트) 표시 위치",
+    },
+  },
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ==========================================
+// ProgressBar Stories
+// ==========================================
+export const DefaultBar: Story = {
+  args: {
+    value: 45,
+    variant: "primary",
+    size: "medium",
+    hasStripes: false,
+    isAnimated: false,
+    labelPosition: "none",
+  },
+};
+
+export const StripedAnimatedBar: Story = {
+  args: {
+    value: 75,
+    variant: "primary",
+    size: "thick",
+    hasStripes: true,
+    isAnimated: true,
+    labelPosition: "inside",
+  },
+};
+
+// ==========================================
+// Circular Progress
+// ==========================================
+export const Circular: StoryObj<typeof CircularProgress> = {
+  render: () => (
+    <div className="flex items-end gap-8">
+      <CircularProgress value={25} size="small" />
+      <CircularProgress value={45} size="medium" />
+      <CircularProgress value={75} size="large" />
+    </div>
+  ),
+};
+
+// ==========================================
+// Spinner
+// ==========================================
+export const LoadingSpinner: StoryObj<typeof Spinner> = {
+  render: () => (
+    <div className="flex items-end gap-8">
+      <Spinner size="small" />
+      <Spinner size="medium" />
+      <Spinner size="large" />
+    </div>
+  ),
+};
+
+// ==========================================
+// Skeleton Loader
+// ==========================================
+export const SkeletonLoader: StoryObj<typeof Skeleton> = {
+  render: () => (
+    <div className="flex flex-col gap-8 max-w-[400px]">
+      <div>
+        <h3 className="text-sm font-bold mb-4">🏗️ Card Skeleton Example</h3>
+        <div className="border border-[color:var(--color-gray-200,#E5E5E5)] rounded-xl p-4 flex flex-col gap-4 w-full">
+          {/* Image placeholder */}
+          <Skeleton shape="rectangle" />
+
+          <div className="flex flex-col gap-2 mt-2">
+            {/* Title */}
+            <Skeleton shape="title" />
+            {/* Lines */}
+            <Skeleton shape="text" className="w-[90%]" />
+            <Skeleton shape="text" className="w-[70%]" />
+          </div>
+
+          {/* Avatar + Meta */}
+          <div className="flex items-center gap-3 mt-4">
+            <Skeleton shape="circle" />
+            <div className="flex flex-col gap-2 flex-1">
+              <Skeleton shape="text" className="w-[40%]" />
+              <Skeleton shape="text" className="w-[30%]" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};