feat: Progressbar 관련 options 추가, 스타일 수정

entrylabs · Sep 20, 2024 · 04be11f · 04be11f
1 parent e2d1613
commit 04be11f
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 20 deletions.
diff --git a/src/components/Progress/ProgressBar.jsx b/src/components/Progress/ProgressBar.jsx
@@ -1,10 +1,20 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 const ProgressBar = (props) => {
-    const { percent } = props;
-    const roundPercent = Math.round(percent);
+    const { percent, preset = 'default' } = props;
+    const [roundPercent, setRoundPercent] = useState(0);
     const overHalf = roundPercent > 50;
 
+    useEffect(() => {
+        if (preset === 'full') {
+            setRoundPercent(100);
+        } else if (preset === 'fail') {
+            setRoundPercent(Math.round(0));
+        } else {
+            setRoundPercent(Math.round(percent));
+        }
+    }, [preset, percent]);
+
     return (
         <div className={`entry-modal-progressbar-wrapper`}>
             <progress className={`entry-modal-progressbar`} value={roundPercent} max="100" />
@@ -13,7 +23,7 @@ const ProgressBar = (props) => {
                     overHalf ? 'entry-modal-text-invert' : ''
                 }`}
             >
-                {roundPercent}%
+                {preset === 'fail' ? '!' : `${roundPercent}%`}
             </div>
         </div>
     );

diff --git a/src/components/Progress/index.jsx b/src/components/Progress/index.jsx
@@ -25,20 +25,14 @@ const Progress = (props) => {
         ],
         options = {
             btnAlignCol: false,
+            // style: { width, height }
+            // INFO: 예외상황은 progressPreset로, 일반적인 상황은 event.percent로 다룬다.
+            // progressPreset: 'full' | 'fail'
             // event: { close, percent }
         },
         onEvent,
     } = props;
 
-    // const { title, negativeButtonText, positiveButtonText } = useMemo(() => {
-    //     return {
-    //         title: props.title || getLang('General.progress_title', 'progress'),
-    //         negativeButtonText: options.negativeButtonText || getLang('Buttons.cancel', 'cancel'),
-    //         positiveButtonText:
-    //             options.positiveButtonText || getLang('Buttons.course_done', 'cancel'),
-    //     };
-    // }, [props.title, options]);
-
     const [percent, setPercent] = useState(undefined);
 
     const handleButtonClick = useCallback(
@@ -143,7 +137,10 @@ const Progress = (props) => {
             >
                 {title}
             </Title>
-            <div className={'entry-modal-contentView'}>
+            <div
+                className={'entry-modal-contentView'}
+                style={options?.style ? options.style : null}
+            >
                 <StepTitle
                     className={'entry-modal-stepTitle'}
                     titles={stepTitle.titles}
@@ -153,7 +150,9 @@ const Progress = (props) => {
                 {!!imageType && typeof imageType === 'string' && (
                     <ContentImage imageType={imageType} />
                 )}
-                {!!percent && <ProgressBar percent={percent} />}
+                {(!!percent || options.progressPreset) && (
+                    <ProgressBar percent={percent} preset={options && options.progressPreset} />
+                )}
                 <div className={'entry-modal-button-group'}>
                     <Buttons
                         buttonInfos={buttonInfos}

diff --git a/src/components/common/Buttons.jsx b/src/components/common/Buttons.jsx
@@ -16,7 +16,7 @@ const Buttons = (props) => {
     } = props;
 
     return (
-        <div className={`${alignCol ? 'entry-modal-buttons-col' : ''}`}>
+        <div className={`${alignCol ? 'entry-modal-buttons-col' : 'entry-modal-buttons-row'}`}>
             {buttonInfos.map((button, idx) => {
                 return (
                     <Button

diff --git a/src/styles/entry/Progress.scss b/src/styles/entry/Progress.scss
@@ -1,7 +1,7 @@
 .progress {
     background: #fff;
-    width: 388px;
-    min-height: 203px;
+    min-width: 388px;
+    min-height: 278px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border-bottom-left-radius: 6px;
@@ -51,7 +51,7 @@
         align-items: center;
 
         .content {
-            width: 320px;
+            min-width: 320px;
             color: #2c313d;
             font-family: NanumGothicOTF;
             font-weight: bold;
@@ -185,13 +185,17 @@
                     height: 48px;
                 }
             }
+
+            .buttons-row {
+                display: flex;
+            }
         }
 
         .progressbar-wrapper {
             position: relative;
             width: 300px;
             height: 24px;
-            margin: 25px 0px 40px 0px;
+            margin: 25px 0px 0px 0px;
         }
 
         .progressbar {