-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #72 from 9oormDari/dev
Dev
- Loading branch information
Showing
15 changed files
with
558 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| import React, { useState } from 'react'; | ||
| import ImageUpload from './UploadModal/ImageUpload.tsx'; | ||
| import SelectRoutineList from './UploadModal/SelectRoutineList.tsx'; | ||
| import cn from '../../../lib/cn.ts'; | ||
| import { API } from '../../../lib/api/index.ts'; | ||
| import { LiaCloneSolid } from 'react-icons/lia'; | ||
|
|
||
| interface MultiStepModalProps { | ||
| isVisible: boolean; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| export default function MultiStepModal({ isVisible, onClose }: MultiStepModalProps) { | ||
| const [step, setStep] = useState<number>(1); // 1: μ΄λ―Έμ§ μ λ‘λ, 2: λ£¨ν΄ μ ν | ||
| const [index, setIndex] = useState<number>(0); // λ£¨ν΄ μΈλ±μ€ | ||
| const [image, setImage] = useState<File | null>(null); // μ΄λ―Έμ§ μν | ||
| const [selectedRoutine, setSelectedRoutine] = useState<string>(''); // μ νλ λ£¨ν΄ | ||
|
|
||
| const handleNextStep = () => { | ||
| setStep(step + 1); | ||
| }; | ||
|
|
||
| const handlePreviousStep = () => { | ||
| setStep(step - 1); | ||
| }; | ||
|
|
||
| const handleCancel = () => { | ||
| onClose(); // λͺ¨λ¬ λ«κΈ° | ||
| }; | ||
|
|
||
| const handleUpload = async () => { | ||
| if (!image || !selectedRoutine) return; | ||
|
|
||
| try { | ||
| // FormData κ°μ²΄ μμ± | ||
| const formData = new FormData(); | ||
| formData.append('routineIndex', index.toString()); // μΈλ±μ€ κ°μ λ¬Έμμ΄λ‘ λ³ννμ¬ μΆκ° | ||
| formData.append('routineName', selectedRoutine); // λ£¨ν΄ μ΄λ¦ μΆκ° | ||
| formData.append('file', image); // μ΄λ―Έμ§ νμΌ μΆκ° | ||
|
|
||
| // API νΈμΆ | ||
| const response = await API.User.uploadRoutine( | ||
| (index + 1).toString(), // λ£¨ν΄ μΈλ±μ€ | ||
| selectedRoutine, // μ νν λ£¨ν΄ | ||
| image // μ μ‘ν μ΄λ―Έμ§ νμΌ | ||
| ); | ||
|
|
||
| if (response.status === 'OK') { | ||
| setStep(3); // μ±κ³΅ μ 3λ¨κ³λ‘ μ΄λ | ||
| } else { | ||
| console.error('μ λ‘λ μ€ν¨:', response); | ||
| setStep(4); // μ€ν¨ μ 4λ¨κ³λ‘ μ΄λ (μ¬μλ μλ΄) | ||
| } | ||
|
|
||
| } catch (error) { | ||
| console.error('μ λ‘λ μ€ μ€λ₯ λ°μ:', error); | ||
| setStep(4); // μ€ν¨ μ 4λ¨κ³λ‘ μ΄λ (μ¬μλ μλ΄) | ||
| } | ||
| }; | ||
|
|
||
| return isVisible ? ( | ||
| <div | ||
| className={cn( | ||
| 'fixed top-0 left-0 w-full h-full bg-black bg-opacity-50', | ||
| 'flex items-center justify-center z-50' | ||
| )} | ||
| > | ||
| <div | ||
| className={cn( | ||
| 'w-[500px] bg-white rounded-lg p-8', | ||
| 'flex flex-col items-center' | ||
| )} | ||
| > | ||
| {step === 1 && ( | ||
| <> | ||
| <h2 className="text-xl font-bold mb-4">μ΄λ―Έμ§ μ λ‘λ</h2> | ||
| <ImageUpload | ||
| image={image} // μ΄λ―Έμ§ μν μ λ¬ | ||
| setImage={setImage} // μ΄λ―Έμ§ μν μ λ°μ΄νΈ ν¨μ μ λ¬ | ||
| onNext={handleNextStep} | ||
| onCancel={handleCancel} | ||
| /> | ||
| </> | ||
| )} | ||
| {step === 2 && ( | ||
| <> | ||
| <h2 className="text-xl font-bold mb-4">λ£¨ν΄ μ ν</h2> | ||
| <SelectRoutineList | ||
| index={index} // λ£¨ν΄ μΈλ±μ€ μ λ¬ | ||
| setIndex={setIndex} // λ£¨ν΄ μΈλ±μ€ μ λ°μ΄νΈ ν¨μ μ λ¬ | ||
| selectedRoutine={selectedRoutine} // μ νλ λ£¨ν΄ μ λ¬ | ||
| setSelectedRoutine={setSelectedRoutine} // λ£¨ν΄ μν μ λ°μ΄νΈ ν¨μ μ λ¬ | ||
| onNext={handleUpload} // μ λ‘λ μλ ν¨μ μ λ¬ | ||
| onPrevious={handlePreviousStep} | ||
| onCancel={handleCancel} | ||
| /> | ||
| </> | ||
| )} | ||
| {step === 3 && ( | ||
| <div className="text-center"> | ||
| <h2 className="text-xl font-bold mb-4">μ±κ³΅μ μΌλ‘ λ±λ‘λμμ΅λλ€!</h2> | ||
| <button | ||
| className={cn( | ||
| 'w-full bg-blue-500 text-white rounded-lg', | ||
| 'py-2 hover:bg-blue-600 mb-4' | ||
| )} | ||
| onClick={onClose} | ||
| > | ||
| λ«κΈ° | ||
| </button> | ||
| </div> | ||
| )} | ||
| {step === 4 && ( | ||
| <div className="text-center"> | ||
| <h2 className="text-xl font-bold mb-4">μ λ‘λ μ€ν¨. μ¬μλ νμΈμ.</h2> | ||
| <button | ||
| className={cn( | ||
| 'w-full bg-blue-500 text-white rounded-lg', | ||
| 'py-2 hover:bg-blue-600 mb-4' | ||
| )} | ||
| onClick={handleCancel} | ||
| > | ||
| λ«κΈ° | ||
| </button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) : null; | ||
| } |
Oops, something went wrong.