diff --git a/src/components/Progress/ProgressBar.jsx b/src/components/Progress/ProgressBar.jsx index 3054f2f..6007845 100644 --- 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 (
@@ -13,7 +23,7 @@ const ProgressBar = (props) => { overHalf ? 'entry-modal-text-invert' : '' }`} > - {roundPercent}% + {preset === 'fail' ? '!' : `${roundPercent}%`}
); diff --git a/src/components/Progress/index.jsx b/src/components/Progress/index.jsx index 74f3475..d8d4a77 100644 --- 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} -
+
{ {!!imageType && typeof imageType === 'string' && ( )} - {!!percent && } + {(!!percent || options.progressPreset) && ( + + )}
{ } = props; return ( -
+
{buttonInfos.map((button, idx) => { return (