리액트 상세 페이지에서 데이터 수정을 위한 업데이트폼 로직 코드 리뷰좀 부탁 드려여

Question

페이지// pages/CurriculumDetailPage.tsx "use client"; import React, { useState, useEffect, useCallback } from 'react'; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import ThreeSelectBoxsForTeachersToRegisterNewCurriculmn from '@/components/OptionForm/ThreeSelectBoxsForTeachersToRegisterNewCurriculmn'; import CommonSingleImageUploadFormWhenSelect from '@/components/Common/FileUpload/CommonSingleImageUploadFormWhenSelect'; import { ILessonForUnitForCurriculumDetail, IRequestParameterForUpdateCurriculmnDetail, IResponseTypeForApiForGetCurriculmnDetailById, ITeacherForCurriculmnDetail, IUnitForCurriculumDetail } from '@/types/typeForCurriculmn'; import UnitListWithCardForCurriculmnDetail from '@/components/Card/UnitListWithCardForCurriculmnDetail'; import useApiForGetSimpleSubjectListForOption from '@/hooks/contents-admin/subject-admin/useApiForGetSimpleSubjectListForOption'; import GradeSelectionForCurriculmnDetail from './GradeSelectionForCurriculmnDetail'; import useApiForGetCurriculumDetailById from '@/hooks/contents-admin/curriculmn-admin/useApiForGetCurriculumnDetailById'; type Props = { params: { curriculmnId: string } } const CurriculumDetailPage: React.FC = ({ params }) => { const curriculmnId = params.curriculmnId; const [curriculumData, setCurriculumData] = useState(null); const [imageUrlToUpload, setImageUrlToUpload] = useState(null); // 업로드된 이미지 URL 저장 const [imagePreviewUrl, setImagePreviewUrl] = useState(null); const [isSemesterMode, setIsSemesterMode] = useState(true); const { data: dataForCurriculmnDetailForId } = useApiForGetCurriculumDetailById(curriculmnId, !!curriculmnId); const { data: subjectData } = useApiForGetSimpleSubjectListForOption(); useEffect(() => { if (dataForCurriculmnDetailForId) { setCurriculumData(dataForCurriculmnDetailForId.data); setImagePreviewUrl(dataForCurriculmnDetailForId.data.imageUrl); // 기존 이미지 URL을 미리보기로 설정 setIsSemesterMode(dataForCurriculmnDetailForId.data.termCode === 'QUARTER'); } }, [dataForCurriculmnDetailForId]); const handleTeachersChange = (newTeachers: ITeacherForCurriculmnDetail[]) => { if (curriculumData) { setCurriculumData({ ...curriculumData, teachers: newTeachers }); } }; const handleSubjectChange = (value: string) => { if (curriculumData) { const subjectId = Number(value); setCurriculumData({ ...curriculumData, subjectId }); } }; const handleCurriculumNameChange = (value: string) => { if (curriculumData) { setCurriculumData({ ...curriculumData, curriculumName: value }); } }; const handleIntroductionChange = (value: string) => { if (curriculumData) { setCurriculumData({ ...curriculumData, curriculumIntroduction: value }); } }; const handleImageUpload = (uploadedUrl: string) => { setImageUrlToUpload(uploadedUrl); setImagePreviewUrl(uploadedUrl); if (curriculumData) { setCurriculumData({ ...curriculumData, imageUrl: uploadedUrl }); } }; const switchMode = (mode: 'QUARTER' | 'YEAR') => { setIsSemesterMode(mode === 'QUARTER'); if (curriculumData) { setCurriculumData({ ...curriculumData, termCode: mode }); } }; const handleGradeChange = useCallback((value: string) => { if (curriculumData) { setCurriculumData({ ...curriculumData, schoolGrade: Number(value) }); } }, [curriculumData]); const handleSemesterChange = useCallback((value: string) => { if (curriculumData) { setCurriculumData({ ...curriculumData, semester: Number(value) }); } }, [curriculumData]); const handleFromGradeChange = useCallback((value: string) => { if (curriculumData) { setCurriculumData({ ...curriculumData, fromGrade: Number(value) }); } }, [curriculumData]); const handleToGradeChange = useCallback((value: string) => { if (curriculumData) { setCurriculumData({ ...curriculumData, toGrade: Number(value) }); } }, [curriculumData]); const handleUnitUpdate = (updatedUnit: IUnitForCurriculumDetail) => { if (curriculumData) { const updatedUnits = curriculumData.units.map((unit) => unit.unitId === updatedUnit.unitId ? updatedUnit : unit ); setCurriculumData({ ...curriculumData, units: updatedUnits }); } }; const handleReset = () => { if (dataForCurriculmnDetailForId) { setCurriculumData(dataForCurriculmnDetailForId.data); setImagePreviewUrl(dataForCurriculmnDetailForId.data.imageUrl); } }; const handleSave = () => { if (!curriculumData) return; // 타입 체크된 updatePayload 설정 const updatePayload: IRequestParameterForUpdateCurriculmnDetail = { curriculumId: curriculumData.curriculumId, curriculumName: curriculumData.curriculumName, subjectId: curriculumData.subjectId, teacherIds: curriculumData.teachers.map(teacher => ({ teacherId: teacher.teacherId, // 필요한 데이터 형식으로 변환 })), curriculumIntroduction: curriculumData.curriculumIntroduction, imageUrl: imageUrlToUpload || curriculumData.imageUrl, // 이미지가 변경되지 않았다면 기존 URL 유지 termCode: curriculumData.termCode, schoolGrade: curriculumData.schoolGrade, semester: curriculumData.semester, fromGrade: curriculumData.fromGrade, toGrade: curriculumData.toGrade, units: curriculumData.units?.map((unit) => ({ unitId: unit.unitId, unitName: unit.unitName, unitStartWeek: unit.unitStartWeek, orderPosition: unit.orderPosition, curriculumAreaName: unit.curriculumAreaName, // null일 수도 있음 lessons: unit.lessons.map(lesson => ({ lessonName: lesson.lessonName, orderPosition: lesson.orderPosition, })), })) || [], managerCode: curriculumData.managerCode || '', // managerCode가 null일 경우 빈 문자열 처리 deleted: false, // 업데이트할 때 기본값으로 false 설정 }; console.log('Save Payload:', updatePayload); }; return (

기본정보 단원/차시 목록

과목 커리큘럼 이름 handleCurriculumNameChange(e.target.value)} />

선생님

커리큘럼 소개

handleIntroductionChange(e.target.value)} placeholder="커리큘럼 소개를 입력하세요." /> </div> <div className="grid grid-cols-1 md:grid-cols-[120px_1fr] gap-6 items-start mt-4"> <label className="text-right text-sm font-medium text-gray-700 pt-2">기간(선택)</label> <GradeSelectionForCurriculmnDetail isSemesterMode={isSemesterMode} switchMode={switchMode} curriculumData={curriculumData} handleGradeChange={handleGradeChange} handleSemesterChange={handleSemesterChange} handleFromGradeChange={handleFromGradeChange} handleToGradeChange={handleToGradeChange} /> </div> <div className="grid grid-cols-1 md:grid-cols-[120px_1fr] gap-6 items-start mt-4"> <label className="text-right text-sm font-medium text-gray-700 pt-2">커리큘럼 이미지</label> <CommonSingleImageUploadFormWhenSelect onImageUpload={handleImageUpload} // 업로드한 이미지 URL을 imageUrlToUpload에 저장하는 함수 initialPreviewUrl={imagePreviewUrl} // 이미지 미리보기 folder="thumbnails" width={120} height={120} /> </div> </div> <div className="flex justify-center mt-6 space-x-4 w-full"> <Button onClick={handleReset} className="w-full py-2 px-4 bg-gray-300 text-black rounded-lg text-center hover:bg-gray-400" > 새로고침 </Button> <Button onClick={handleSave} className="w-full py-2 px-4 bg-green-500 text-white rounded-lg text-center hover:bg-green-600" > 저장 </Button> </div> </CardContent> </Card> </TabsContent> <TabsContent value="unit-lesson"> <Card> <CardContent className="pt-6"> <div> {curriculumData?.units && ( <UnitListWithCardForCurriculmnDetail units={curriculumData.units} onUpdateUnit={handleUnitUpdate} onDeleteUnit={(unitId) => { if (curriculumData) { const updatedUnits = curriculumData.units.filter(unit => unit.unitId !== unitId); setCurriculumData({ ...curriculumData, units: updatedUnits }); } }} onReorderUnits={(reorderedUnits) => { if (curriculumData) { setCurriculumData({ ...curriculumData, units: reorderedUnits }); } }} /> )} </div> <div className="flex justify-center mt-6 space-x-4 w-full"> <Button onClick={handleReset} className="w-full py-2 px-4 bg-gray-300 text-black rounded-lg text-center hover:bg-gray-400" > 새로고침 </Button> <Button onClick={handleSave} className="w-full py-2 px-4 bg-green-500 text-white rounded-lg text-center hover:bg-green-600" > 저장 </Button> </div> </CardContent> </Card> </TabsContent> </Tabs> </div> ); }; export default CurriculumDetailPage; 1. 업데이트폼import React, { useEffect, useState } from 'react'; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { IUnitForCurriculumDetail, ILessonForUnitForCurriculumDetail } from '@/types/typeForCurriculmn'; import { DndContext, closestCenter, useSensor, useSensors, PointerSensor } from '@dnd-kit/core'; import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'; import { Trash2, GripHorizontal, Plus } from 'lucide-react'; import { CSS } from '@dnd-kit/utilities'; interface UnitListWithCardForCurriculmnDetailProps { units: IUnitForCurriculumDetail[]; onUpdateUnit: (updatedUnit: IUnitForCurriculumDetail) => void; onDeleteUnit: (unitId: number) => void; onReorderUnits: (newUnits: IUnitForCurriculumDetail[]) => void; } const UnitListWithCardForCurriculmnDetail: React.FC<UnitListWithCardForCurriculmnDetailProps> = ({ units, onUpdateUnit, onDeleteUnit, onReorderUnits }) => { const [sortedUnits, setSortedUnits] = useState<IUnitForCurriculumDetail[]>([]); useEffect(() => { const sorted = [...units].sort((a, b) => a.orderPosition - b.orderPosition); setSortedUnits(sorted); }, [units]); const sensors = useSensors(useSensor(PointerSensor)); const handleUnitChange = (unitIndex: number, key: keyof IUnitForCurriculumDetail, value: string) => { const updatedUnit = { ...sortedUnits[unitIndex], [key]: value }; const newUnits = [...sortedUnits]; newUnits[unitIndex] = updatedUnit; setSortedUnits(newUnits); onUpdateUnit(updatedUnit); }; const handleLessonChange = (unitIndex: number, lessonIndex: number, value: string) => { const updatedUnit = { ...sortedUnits[unitIndex] }; updatedUnit.lessons[lessonIndex] = { ...updatedUnit.lessons[lessonIndex], lessonName: value }; const newUnits = [...sortedUnits]; newUnits[unitIndex] = updatedUnit; setSortedUnits(newUnits); onUpdateUnit(updatedUnit); }; const handleAddLesson = (unitIndex: number) => { const newLesson: ILessonForUnitForCurriculumDetail = { lessonId: Date.now(), lessonName: '', orderPosition: sortedUnits[unitIndex].lessons.length + 1, }; const updatedUnit = { ...sortedUnits[unitIndex], lessons: [...sortedUnits[unitIndex].lessons, newLesson] }; const newUnits = [...sortedUnits]; newUnits[unitIndex] = updatedUnit; setSortedUnits(newUnits); onUpdateUnit(updatedUnit); }; const handleDeleteLesson = (unitIndex: number, lessonId: number) => { const updatedUnit = { ...sortedUnits[unitIndex] }; updatedUnit.lessons = updatedUnit.lessons.filter(lesson => lesson.lessonId !== lessonId); const newUnits = [...sortedUnits]; newUnits[unitIndex] = updatedUnit; setSortedUnits(newUnits); onUpdateUnit(updatedUnit); }; const handleDragEnd = (event: any) => { const { active, over } = event; if (active.id !== over.id) { const oldIndex = sortedUnits.findIndex(unit => unit.unitId === active.id); const newIndex = sortedUnits.findIndex(unit => unit.unitId === over.id); const reorderedUnits = arrayMove(sortedUnits, oldIndex, newIndex).map((unit, index) => ({ ...unit, orderPosition: index + 1, })); setSortedUnits(reorderedUnits); onReorderUnits(reorderedUnits); } }; return ( <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}> <SortableContext items={sortedUnits.map(unit => unit.unitId)} strategy={verticalListSortingStrategy}> <div className="space-y-4"> {sortedUnits.map((unit, unitIndex) => ( <SortableUnitCard key={unit.unitId} unit={unit} unitIndex={unitIndex} handleUnitChange={handleUnitChange} handleLessonChange={handleLessonChange} handleAddLesson={handleAddLesson} handleDeleteUnit={onDeleteUnit} handleDeleteLesson={handleDeleteLesson} /> ))} </div> </SortableContext> </DndContext> ); }; interface SortableUnitCardProps { unit: IUnitForCurriculumDetail; unitIndex: number; handleUnitChange: (unitIndex: number, key: keyof IUnitForCurriculumDetail, value: string) => void; handleLessonChange: (unitIndex: number, lessonIndex: number, value: string) => void; handleAddLesson: (unitIndex: number) => void; handleDeleteUnit: (unitId: number) => void; handleDeleteLesson: (unitIndex: number, lessonId: number) => void; } const SortableUnitCard: React.FC<SortableUnitCardProps> = ({ unit, unitIndex, handleUnitChange, handleLessonChange, handleAddLesson, handleDeleteUnit, handleDeleteLesson, }) => { const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: unit.unitId }); const style = { transform: CSS.Transform.toString(transform), transition, }; return ( <Card ref={setNodeRef} style={style} className="mb-4"> <div className="flex justify-between items-center bg-blue-500 text-white py-2 px-4 rounded-t-md"> <div className="flex items-center cursor-grab" {...attributes} {...listeners}> <GripHorizontal className="mr-2" /> <h3 className="text-lg font-semibold">{unit.orderPosition}. {unit.unitName}</h3> </div> <Button variant="destructive" size="sm" onClick={() => handleDeleteUnit(unit.unitId)} > <Trash2 className="h-4 w-4" /> </Button> </div> <CardContent className="space-y-4"> <div className="grid grid-cols-2 gap-4"> <div> <label className="block text-sm font-medium text-gray-700 mb-1">단원명</label> <Input type="text" value={unit.unitName} onChange={(e) => handleUnitChange(unitIndex, 'unitName', e.target.value)} className="w-full" /> </div> <div> <label className="block text-sm font-medium text-gray-700 mb-1">시작주</label> <Input type="text" value={unit.unitStartWeek} onChange={(e) => handleUnitChange(unitIndex, 'unitStartWeek', e.target.value)} className="w-full" /> </div> </div> <div> <label className="block text-sm font-medium text-gray-700 mb-1">영역</label> <Input type="text" value={unit.curriculumAreaName || ''} onChange={(e) => handleUnitChange(unitIndex, 'curriculumAreaName', e.target.value)} className="w-full" /> </div> <div> <div className="flex justify-between items-center mb-2"> <h4 className="text-lg font-medium">차시 목록</h4> <Button onClick={() => handleAddLesson(unitIndex)} size="sm"> <Plus className="h-4 w-4 mr-1" /> 차시 추가 </Button> </div> <table className="w-full"> <thead> <tr> <th className="px-2 py-1 text-left">차시</th> <th className="px-2 py-1 text-left">차시명</th> <th className="px-2 py-1 text-center">삭제</th> </tr> </thead> <tbody> {unit.lessons .sort((a, b) => a.orderPosition - b.orderPosition) .map((lesson, lessonIndex) => ( <tr key={lesson.lessonId}> <td className="px-2 py-1">{lesson.orderPosition}</td> <td className="px-2 py-1"> <Input type="text" value={lesson.lessonName} onChange={(e) => handleLessonChange(unitIndex, lessonIndex, e.target.value)} className="w-full" /> </td> <td className="px-2 py-1 text-center"> <Button variant="destructive" size="sm" onClick={() => handleDeleteLesson(unitIndex, lesson.lessonId)} > <Trash2 className="h-4 w-4" /> </Button> </td> </tr> ))} </tbody> </table> </div> </CardContent> </Card> ); }; export default UnitListWithCardForCurriculmnDetail;// type export interface IResponseTypeForApiForGetCurriculmnDetailById { code: string; // 결과코드 message: string; // 결과메시지 data: { curriculumId: number; // 커리큘럼 Id curriculumName: string; // 커리큘럼 명 orderPosition: number; // 커리큘럼 순서 subjectId: number; // 과목코드 teachers: ITeacherForCurriculmnDetail[]; // 교사 리스트 curriculumIntroduction: string; // 커리큘럼 소개 imageUrl: string; // 커리큘럼 이미지 URL termCode: 'QUARTER' | 'YEAR'; // 기간 구분 코드 schoolGrade: number; // 학년/학기 조건의 학년 semester: number; // 학년/학기 조건의 학기 fromGrade: number; // 학년~학년 조건 시작 학년 toGrade: number; // 학년~학년 조건 종료 학년 units: IUnitForCurriculumDetail[]; // 단원 정보 리스트 managerCode: string | null; // 등록자 아이디 registeredDate: string; // 등록일 }; }지나치게 복잡하거나 장황한 로직 , 리액트스럽지 않은 방식, 좀더 나은 방식 이런거 알려주시면 감사요 ~!좀더 간단하면서 직관적 업데이트 방식이 있다면 개선해야 한다고 생각해서요 ~!

몰랑토끼 · Answer

이정도 코드면 1년차 미만같고.. 부족한 부분들이 너무 많이보여요

아리까리 · Answer

@몰랑토끼 님이 말씀하신게 맞는것 같고요.컴포넌트 분할 + hooks로 기능 분할 해서 코드를 정리좀 하시면 디벨롭하시는데 용이 할거에요.form을 직접적으로 다루는건 공부할 땐 좋은데제품으로 내놓는 개발이라면 react-hook-form + yup 같은 validation 도구 들을 같이 쓰는게 좋습니다.react에서 form 핸들링을 전문으로 해주는 라이브러리들이 좋아요 요즘엔formik, react-hook-form 등등 좋은 거 많습니다. 그 중 내가 편한거 말고 앱에 맞는 라이브러리를 선택하시면 됩니다.

리액트 상세 페이지에서 데이터 수정을 위한 업데이트폼 로직 코드 리뷰좀 부탁 드려여

2개의 답변

Q&A 목록