Okay what can I improve now?

import { Dialog, Transition } from "@headlessui/react";
import { addDoc, collection, doc, setDoc } from "firebase/firestore";
import { getDownloadURL, ref, uploadBytesResumable } from "firebase/storage";
import { nanoid } from "nanoid";
import { useRouter } from "next/router";
import { Fragment, useState } from "react";
import { analyze } from "../../lib/api";
import firebase from "../../lib/firebase";

type UploadMeetingModalProps = {
 isOpen: boolean;
 setIsOpen: (isOpen: boolean) => void;
};

type FormData = {
 interviewTitle: string;
 aboutUser: string;
 learningObjectives: string;
 date: string;
};

enum UploadState {
 Initial = "initial",
 Uploading = "uploading",
 Uploaded = "uploaded",
}

const STORAGE\_PATH = "meetings";
const CONVERSATIONS\_COLLECTION = "conversations";

export default function UploadMeetingModal({
 isOpen,
 setIsOpen,
}: UploadMeetingModalProps) {
 const [file, setFile] = useState(null);
 const [uploadState, setUploadState] = useState(
 UploadState.Initial
 );
 const [formFields, setFormFields] = useState({
 interviewTitle: "",
 aboutUser: "",
 learningObjectives: "",
 date: "",
 });
 const [downloadUrl, setDownloadUrl] = useState(null);
 const router = useRouter();

 const handleChange = (e: React.FormEvent) => {
 const { name, value } = e.currentTarget;
 setFormFields((prev) => ({ ...prev, [name]: value }));
 };

 const handleSubmit = async (e: React.FormEvent) => {
 e.preventDefault();
 if (!file) return;
 setUploadState(UploadState.Uploading);

 // upload the file.
 const storageRef = ref(firebase.storage, `${STORAGE\_PATH}/${file.name}`);

 const uploadTask = uploadBytesResumable(storageRef, file);

 try {
 // Try to upload the file while recording progress and handle errors.
 await new Promise((resolve, reject) => {
 uploadTask.on(
 "state\_changed",
 (snapshot) => {
 // Record Progress
 const percentage =
 (snapshot.bytesTransferred / snapshot.totalBytes) \* 100;
 console.log(percentage + "%");
 },
 (err) => reject(err),
 () => resolve()
 );
 });

 // Once the file is uploaded, get and set the download url.
 setUploadState(UploadState.Uploaded);

 const url = await getDownloadURL(uploadTask.snapshot.ref);
 setDownloadUrl(url);
 } catch (error) {
 console.log(error);
 setUploadState(UploadState.Initial);
 }
 };

 const handleGenerateAnalysis = async (
 e: React.FormEvent
 ) => {
 e.preventDefault();
 if (!downloadUrl) return;
 const docId = nanoid();
 const response = await generateAnalysis(downloadUrl, docId);
 await postEverythingToFirebase(docId);
 router.push("/view\_meeting?id=" + docId);
 };

 const generateAnalysis = async (url: string, docId: string) => {
 const { message } = await analyze(url, docId);
 console.log(message);
 return message;
 };

 const postEverythingToFirebase = async (docId: string) => {
 const docRef = doc(firebase.db, `${CONVERSATIONS\_COLLECTION}/${docId}`);

 try {
 await setDoc(docRef, {
 title: formFields.interviewTitle,
 aboutUser: formFields.aboutUser,
 learningObjectives: formFields.learningObjectives,
 downloadUrl,
 date: formFields.date,
 });
 console.log("Document added with ID: ", docRef.id);
 return docRef;
 } catch (error) {
 console.error("Error adding document: ", error);
 throw error;
 }
 };

 return (
 
 setIsOpen(false)}
 >
 

### Interview Title


### About the user


### 
 Learning Objectives


### Date

 {
 const selectedFile =
 e.target.files && e.target.files[0];
 if (
 selectedFile &&
 selectedFile.type.includes("audio/")
 ) {
 setFile(selectedFile);
 } else {
 alert("Please select an audio file.");
 }
 }}
 />
 
 {uploadState === UploadState.Initial
 ? "Upload"
 : uploadState === UploadState.Uploading
 ? "Uploading..."
 : "Uploaded"}
 


 Start Analysis
 


 );
}
이제 무엇을 개선할 수 있을까요?

"@headlessui/react"에서 { Dialog, Transition }을 임포트합니다;
"firebase/firestore"에서 { addDoc, collection, doc, setDoc }를 임포트합니다;
"firebase/storage"에서 { getDownloadURL, ref, uploadBytesResumable }을 임포트합니다;
"nanoid"에서 { nanoid } 임포트;
"next/router"에서 { useRouter }를 임포트합니다;
"react"에서 { 조각, 사용 상태 }를 임포트합니다;
"../../lib/api"에서 { analyze }를 임포트합니다;
"../../lib/firebase"에서 firebase를 임포트합니다;

type UploadMeetingModalProps = {
 isOpen: 부울;
 setIsOpen: (isOpen: boolean) => void;
};

type FormData = {
 인터뷰 제목: 문자열
 aboutUser: 문자열;
 학습목표: 문자열
 날짜: 문자열;
};

열거형 업로드 상태 {
 초기 = "초기",
 업로드 중 = "업로드 중",
 업로드됨 = "업로드됨",
}

const STORAGE\_PATH = "meetings";
const CONVERSATIONS\_COLLECTION = "conversations";

내보내기 기본 함수 UploadMeetingModal({
 isOpen,
 setIsOpen,
}: UploadMeetingModalProps) {
 const [file, setFile] = useState(null);
 const [uploadState, setUploadState] = useState(
 UploadState.Initial
 );
 const [formFields, setFormFields] = useState({
 interviewTitle: "",
 aboutUser: "",
 학습 목표: "",
 date: "",
 });
 const [downloadUrl, setDownloadUrl] = useState(null);
 const 라우터 = useRouter();

 const handleChange = (e: React.FormEvent) => {
 const { name, value } = e.currentTarget;
 setFormFields((prev) => ({ ...prev, [name]: value }));
 };

 const handleSubmit = async (e: React.FormEvent) => {
 e.preventDefault();
 if (!file) return;
 setUploadState(UploadState.Uploading);

 // 파일을 업로드합니다.
 const storageRef = ref(firebase.storage, `${STORAGE\_PATH}/${file.name}`);

 const uploadTask = uploadBytesResumable(storageRef, file);

 try {
 // 진행 상황을 기록하면서 파일 업로드를 시도하고 오류를 처리합니다.
 await new Promise((resolve, reject) => {
 uploadTask.on(
 "state\_changed",
 (스냅샷) => {
 // 진행 상황 기록
 const 백분율 =
 (스냅샷.바이트 전송 / 스냅샷.총 바이트) \* 100;
 console.log(백분율 + "%");
 },
 (err) => reject(err),
 () => resolve()
 );
 });

 // 파일이 업로드되면 다운로드 URL을 가져와 설정합니다.
 setUploadState(UploadState.Uploaded);

 const url = await getDownloadURL(uploadTask.snapshot.ref);
 setDownloadUrl(url);
 } catch (error) {
 console.log(error);
 setUploadState(UploadState.Initial);
 }
 };

 const handleGenerateAnalysis = async (
 e: React.FormEvent
 ) => {
 e.preventDefault();
 if (!downloadUrl) return;
 const docId = nanoid();
 const response = await generateAnalysis(downloadUrl, docId);
 await postEverythingToFirebase(docId);
 router.push("/view\_meeting?id=" + docId);
 };

 const generateAnalysis = async (url: 문자열, docId: 문자열) => { {
 const { message } = await analyze(url, docId);
 console.log(message);
 반환 메시지;
 };

 const postEverythingToFirebase = async (docId: 문자열) => {
 const docRef = doc(firebase.db, `${CONVERSATIONS\_COLLECTION}/${docId}`);

 try {
 await setDoc(docRef, {
 title: formFields.interviewTitle,
 aboutUser: formFields.aboutUser,
 학습목표: formFields.learningObjectives,
 downloadUrl,
 날짜: formFields.date,
 });
 console.log("ID가 추가된 문서: ", docRef.id);
 docRef를 반환합니다;
 } catch (error) {
 console.error("문서 추가 중 오류 발생: ", error);
 오류를 던집니다;
 }
 };

 반환 (
 
 setIsOpen(false)}
 >
 

### 인터뷰 제목


### 사용자 소개


### 
 학습 목표


날짜 ###

 {
 const selectedFile =
 e.target.files && e.target.files[0];
 if (
 selectedFile &&
 selectedFile.type.includes("audio/")
 ) {
 setFile(selectedFile);
 } else {
 alert("오디오 파일을 선택하세요.");
 }
 }}
 />
 
 {uploadState === UploadState.Initial
 ? "업로드"
 업로드 상태 === 업로드 상태.업로드 중
 ? "업로드 중..."
 : "업로드 완료"}
 


 분석 시작
 


 );
}