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 (