리액트 CRUD 기본 코드 useState([])

import React, { useEffect, useState } from "react";
import { Button, Modal} from 'antd';

import "./TestCode.scss"


const TestCode = () => {
    useEffect(() => {
        // 코드 목록 불러오는 로직
        
    },[]);



    //input 값 관리

    const [commCd, setCommCd] = useState({
        code_id : "",
        code_nm : "",
        etc : "",
        del_yn : "yes",
        use_yn : "yes",
    });




    const [code_id, setCode_id] = useState("");
    const [code_nm, setCode_nm] = useState("");
    const [etc, setEtc] = useState("");
    const [del_yn, setDel_yn] = useState("yes");
    const [use_yn, setUse_yn] = useState("yes");


    // codes 배열 관리
    const [codes, setCodes] = useState([]);


        //코드 생성
    const codeSubmitHandler = (e) => {
        e.preventDefault();
        
        Modal.confirm({
            title: "코드 추가 확인창",
            content: "해당 코드를 추가하시겠습니까? 라는 문구 출력",
            okText: "확인버튼",
            cancelText: "취소버튼",
            onOk: () => {
                try {
                    const isDuplicated = codes.some((code) => code.code_id === code_id);
                    if (isDuplicated) {
                        alert("이미 존재하는 코드 ID입니다.");
                        return;
                    }
                    if (code_id && code_nm !== "") {
                        setCodes([
                            ...codes,
                            {
                                code_id: code_id,
                                code_nm: code_nm,
                                etc: etc,
                                del_yn: del_yn,
                                use_yn: use_yn,
                            }
                        ])
                        setCode_id("");
                        setCode_nm("");
                        setEtc("");
                        setDel_yn("yes");
                        setUse_yn("yes");
                        alert("추가되었습니다")
                        
                    } else {
                        alert("code_id 값과 code_nm 는 필수입니다")
                    }
                } catch(e) {
                    console.error(e);
                }
            }
        })
        
    }

        //코드 업데이트
    const codeUpdateHandler = (e) => {
        e.preventDefault();
        
        const updatedCodes = codes.map((code) =>
        code.code_id === code_id ?
            {
                code_id: code_id,
                code_nm: code_nm,
                etc: etc,
                del_yn: del_yn,
                use_yn: use_yn,
            }
            : code
    );

        if (code_id && code_nm !== "") {
            setCodes(updatedCodes);
            setCode_id("");
            setCode_nm("");
            setEtc("");
            setDel_yn("yes");
            setUse_yn("yes");
            

            alert("수정되었습니다.");
        } else {
            alert("code_id 값과 code_nm 는 필수입니다")
        }
    }
    
        //코드 삭제
    const codeDeleteHandler = (e) => {
        e.preventDefault();
        const updatedCodes = codes.filter((code) => code.code_id !== code_id);
        setCodes(updatedCodes);
        setCode_id("");
        setCode_nm("");
        setEtc("");
        setDel_yn("yes");
        setUse_yn("yes");
    }


        //코드 선택
    const codeSelectHandler = (code) => {
        setCode_id(code);
        const selectedCode = codes.find((c) => c.code_id === code);
        if (selectedCode) {
            setCode_nm(selectedCode.code_nm);
            setEtc(selectedCode.etc);
            setDel_yn(selectedCode.del_yn);
            setUse_yn(selectedCode.use_yn);
        } 
        console.log(code)
    }
    



    return (
        <>
            <div  className="container">
                
                <div className="innerBox">
                    <h1 style={{
                                padding:"25px",
                            }}
                    >코드 ID 목록</h1>
                    <ul style={{
                                overflow: "scroll",
                            }}>
                    
                    {codes.map(code => (
                        <div>
                            <li
                                id={code.code_id}
                                onClick = {(e) => codeSelectHandler(e.target.id)}
                            > {code.code_id}
                            </li>
                        </div>
                        
        ))}
                    </ul>
                </div>

                <div className="innerBox">
                    <form>
                        <label>코드 ID:
                            <input
                                type="text" 
                                name="code_id"
                                value={code_id} 
                                onChange={e => setCode_id(e.target.value)}
                                placeholder="code_id"
                                required 
                            />
                        </label>
                        <label>코드 명: 
                            <input 
                                required
                                value={code_nm}
                                onChange={e => setCode_nm(e.target.value)}
                                type="text"
                                placeholder="code_nm"
                                />
                        </label>
                        <label>비고:
                            <input 
                                type="text" 
                                name="etc"
                                value={etc}
                                onChange={e => setEtc(e.target.value)}
                            />
                        </label>
                        <label>삭제여부:
                            <select
                                value={del_yn}
                                onChange={e =>setDel_yn(e.target.value)}
                            >
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select>
                        </label>
                        <label>사용여부:
                            <select
                                value={use_yn}
                                onChange={e =>setUse_yn(e.target.value)}
                            >
                                <option value="yes">Yes</option>
                                <option value="no">No</option>
                            </select>
                        </label>
                        <Button onClick={codeSubmitHandler} type="primary">추가</Button>
                        <Button onClick={codeUpdateHandler}>수정</Button>
                        <Button onClick={codeDeleteHandler} type="dashed">삭제</Button>
                        
                    </form>
                    


                    
                </div>

            </div>

        </>
    )

};

export default TestCode;