기능 정리 자주 사용하는 기능 정리

[주인장]

1. 메시지 보이기 

const [message, setMessage] = useState("");

const showMessage = (msg) => {

        setMessage(msg);

        setTimeout(() => {

            setMessage("");

        }, 4000);

};

2. Form 처리 

<form xxxxonSubmit={handleSubmit}>

    <div className="form-group">

        <label>상품 이름</label>

        <input

            type="text"

            value={name}

            xxxxonChange={(e) => setName(e.target.value)}

            required

        />

    </div>

    <div className="form-group">

        <label>상품 코드</label>

        <input

            type="text"

            value={sku}

            xxxxonChange={(e) => setSku(e.target.value)}

            required

        />

    </div>

    <div className="form-group">

        <label>재고 수량</label>

        <input

            type="number"

            value={stockQuantity}

            xxxxonChange={(e) => setStockQuantity(e.target.value)}

            required

        />

    </div>

    <div className="form-group">

        <label>가격</label>

        <input

            type="number"

            value={price}

            xxxxonChange={(e) => setPrice(e.target.value)}

            required

        />

    </div>

    <div className="form-group">

        <label>설명</label>

        <textarea

            value={description}

            xxxxonChange={(e) => setDescription(e.target.value)}

        />

    </div>

    <div className="form-group">

        <label>카테고리</label>

        <select

            value={categoryId}

            xxxxonChange={(e) => setCategoryId(e.target.value)}

            required

        >

            <option value="">카테고리를 선택하세요</option>

            {categories.map((category) => (

                <option key={category.id} value={category.id}>

                    {category.name}

                </option>

            ))}

        </select>

    </div>

    <div className="form-group">

        <label>제품 이미지</label>

        <input type="file" xxxxonChange={handleImageChange} />

        {imageUrl && (

            <img

                src={imageUrl}

                alt="preview"

                className="image-preview"

            />

        )}

    </div>

    <button type="submit">{isEditing ? "제품 수정" : "제품 추가"}</button>

</form>

3. 폼 제출 

const handleSubmit = async (e) => {

        e.preventDefault();

        const formData = new FormData();

        formData.append("name", name);

        formData.append("sku", sku);

        formData.append("price", price);

        formData.append("stockQuantity", stockQuantity);

        formData.append("categoryId", categoryId);

        formData.append("description", description);

        if (imageFile) {

            formData.append("imageFile", imageFile);

        }

        try {

            if (isEditing) {

                formData.append("productId", productId);

                await ApiService.updateProduct(formData);

                showMessage("제품이 성공적으로 업데이트되었습니다.");

            } else {

                await ApiService.addProduct(formData);

                showMessage("제품이 성공적으로 추가되었습니다.");

            }

            navigate("/product");

        } catch (error) {

            showMessage(

                error.response?.data?.message || "제품 저장 실패 : " + error

            );

        }

    };

4.날짜와 시간을 한국어 형식으로 변환하는 유틸 함수 

const formatDateTime = (dateTimeString) => {

        return new Date(dateTimeString).toLocaleString('ko-KR', {

            year: 'numeric',

            month: 'long',

            day: 'numeric',

            hour: '2-digit',

            minute: '2-digit'

        });

    };