Reafactor: WdsOption > varaint.normal 추가

CHANGELOG.md

@@ -1,3 +1,6 @@
+### 0.0.12
+- WdsOption > WdsOptionVaraint.normal 추가
+
 ### 0.0.11
 - 메세지 UI (WdsToast, WdsSnackbar, WdsSectionMessage) 공통 컨트롤러 도입
 - WdsHeader.search > widthFactor 수정

packages/components/lib/src/option/wds_option.dart

@@ -1,6 +1,12 @@
 part of '../../wds_components.dart';
 
 enum WdsOptionVariant {
+  normal(
+    maxHeight: 521,
+    scrollThreshold: 6,
+    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+    itemHeight: 44,
+  ),
   power(
     maxHeight: 289,
     scrollThreshold: 6,
@@ -38,6 +44,11 @@ enum WdsOptionVariant {
 /// 이 때, Option은 left, right, 그리고 bottom에 `WdsColors.primary`로 칠해진 stroke를 가지며,
 /// 배경 색상은 `WdsColors.backgroundNormal`을 가집니다.
 class WdsOption extends StatelessWidget {
+  const WdsOption.normal({
+    required this.items,
+    super.key,
+  }) : variant = WdsOptionVariant.normal;
+
   const WdsOption.power({
     required this.items,
     super.key,
@@ -48,7 +59,7 @@ class WdsOption extends StatelessWidget {
     super.key,
   }) : variant = WdsOptionVariant.product;
 
-  /// Option의 variant (power 또는 product)
+  /// Option의 variant
   final WdsOptionVariant variant;
 
   /// OptionItem들의 리스트
@@ -199,6 +210,46 @@ abstract class WdsOptionItem {
   Widget build(BuildContext context, WdsOptionVariant variant);
 }
 
+/// Normal variant용 OptionItem
+class WdsNormalOptionItem extends WdsOptionItem {
+  const WdsNormalOptionItem({
+    required this.label,
+    this.onTap,
+  });
+
+  /// 필수 라벨
+  final String label;
+
+  /// 탭 콜백
+  final VoidCallback? onTap;
+
+  static const TextStyle _labelStyle = WdsTypography.body14NormalRegular;
+
+  @override
+  Widget build(BuildContext context, WdsOptionVariant variant) {
+    assert(
+      variant == WdsOptionVariant.normal,
+      'NormalOptionItem은 normal variant에서만 사용 가능합니다',
+    );
+
+    return GestureDetector(
+      onTap: onTap,
+      child: Row(
+        children: [
+          Expanded(
+            child: Text(
+              label,
+              style: _labelStyle.copyWith(
+                color: WdsColors.textNormal,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
 /// Power variant용 OptionItem
 class WdsPowerOptionItem extends WdsOptionItem {
   const WdsPowerOptionItem({

packages/widgetbook/lib/src/component/option_use_case.dart

@@ -24,7 +24,7 @@ Widget _buildPlaygroundSection(BuildContext context) {
   final variant = context.knobs.object.dropdown<WdsOptionVariant>(
     label: 'variant',
     options: WdsOptionVariant.values,
-    initialOption: WdsOptionVariant.power,
+    initialOption: WdsOptionVariant.normal,
     labelBuilder: (v) => v.name,
   );
 
@@ -47,9 +47,11 @@ Widget _buildPlaygroundSection(BuildContext context) {
       'Scroll Threshold: ${variant.scrollThreshold}',
       'Item Height: ${variant.itemHeight}px',
     ],
-    child: variant == WdsOptionVariant.power
-        ? WdsOption.power(items: items)
-        : WdsOption.product(items: items),
+    child: switch (variant) {
+      WdsOptionVariant.normal => WdsOption.normal(items: items),
+      WdsOptionVariant.power => WdsOption.power(items: items),
+      WdsOptionVariant.product => WdsOption.product(items: items),
+    },
   );
 }
 
@@ -62,10 +64,26 @@ Widget _buildDemonstrationSection(BuildContext context) {
     children: [
       WidgetbookSubsection(
         title: 'variant',
-        labels: ['power', 'product'],
+        labels: ['normal', 'power', 'product'],
         content: Column(
           spacing: 16,
           children: [
+            WdsOption.normal(
+              items: [
+                WdsNormalOptionItem(
+                  label: '옵션 1',
+                  onTap: () => debugPrint('Normal option 1 tapped'),
+                ),
+                WdsNormalOptionItem(
+                  label: '옵션 2',
+                  onTap: () => debugPrint('Normal option 2 tapped'),
+                ),
+                WdsNormalOptionItem(
+                  label: '옵션 3',
+                  onTap: () => debugPrint('Normal option 3 tapped'),
+                ),
+              ],
+            ),
             WdsOption.power(
               items: [
                 WdsPowerOptionItem(
@@ -148,7 +166,14 @@ List<WdsOptionItem> _generateOptionItems(
   const String imagePath =
       'https://cdn.winc.app/uploads/ppb/image/src/99824/ppb_image_file-c9a9df.jpg';
 
-  if (variant == WdsOptionVariant.power) {
+  if (variant == WdsOptionVariant.normal) {
+    return List.generate(count, (index) {
+      return WdsNormalOptionItem(
+        label: '옵션 ${index + 1}',
+        onTap: () => debugPrint('Normal option ${index + 1} tapped'),
+      );
+    });
+  } else if (variant == WdsOptionVariant.power) {
     return List.generate(count, (index) {
       final label = index == 0 ? '0.00' : (-0.5 * index).toStringAsFixed(2);
       final hasTags = index % 3 == 1;
@@ -173,6 +198,7 @@ List<WdsOptionItem> _generateOptionItems(
       );
     });
   } else {
+    // WdsOptionVariant.product
     return List.generate(count, (index) {
       return WdsProductOptionItem(
         index: '${index + 1}',

pubspec.yaml

@@ -1,5 +1,5 @@
 name: wds
-version: 0.0.11
+version: 0.0.12
 publish_to: none
 description: WINC Design System
 environment: