frontend/apps/sn/app/(with-base-layout)/ii/fileupload/page.tsx

/**
 * ➡️ 경로 : /ii/fileupload
 *
 * 📄 File Upload Page
 * 파일 업로드 테스트 페이지 컴포넌트
 *
 * - 파일 선택 및 텍스트 입력 기능
 * - JSON 데이터와 파일을 함께 서버에 업로드
 * - 쿠키 기반 인증 토큰을 통한 사용자 조회
 * - 두 가지 방식의 사용자 조회 API 호출 지원
 * - Axios를 통한 파일 업로드 처리
 * - 폼 제출 및 에러 핸들링
 *
 * 🔗 사용 API
 * - 사이트 정보 조회: POST /api/v1/inftwtAnls/users/{userId} (sewerage-service)
 * - 침입수분석 등록 첨부파일INP 포함: POST /api/v1/rdiiAnls/savewithfile (sewerage-service)
 * - 사용자 단 건 조회: GET /api/v1/users/{userUnqId} (user-service)
 */
"use client";

// FileUpload.js
import React, { useState } from "react";
import axios from "axios";
import { SITE_ID } from "@/shared/config";
import { useAlertStore } from "@/shared/lib";
import {
  StandardFormField,
  StandardFormSection,
} from "@common/business_components";
import { Button, Input } from "@common/components";
const SEWERAGE_URL = "/sewerage-service/api";

function FileUpload() {
  const alert = useAlertStore((state) => state.setMessage);
  const [file, setFile] = useState<File | null>(null);
  const [text, setText] = useState("");

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setFile(event.target.files?.[0] ?? null);
  };

  const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value);
  };

  function getCookie(name: string) {
    const match = document.cookie.match(
      new RegExp("(^| )" + name + "=([^;]+)"),
    );
    if (match && match[2]) {
      return decodeURIComponent(match[2]);
    }
    return null;
  }
  const handleFindUser = () => {
    const auth = getCookie("Authorization");
    if (auth) console.log("쿠키 auth : " + auth);
    fetch(
      SEWERAGE_URL +
        "/v1/inftwtAnls/users/65a00f65-8460-49af-98ec-042977e56f4b",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-Site-Id": SITE_ID,
        },
        body: JSON.stringify({ authToken: auth }),
      },
    ).then((data) => {
      console.log(data);
    });
  };
  const handleFindUserOna = () => {
    const auth = getCookie("Authorization");
    if (auth) console.log("쿠키 auth : " + auth);
    fetch(
      "/server/user-service/api/v1/users/65a00f65-8460-49af-98ec-042977e56f4b",
      {
        headers: {
          "X-Site-Id": SITE_ID,
        },
      },
    ).then((data) => {
      console.log(data);
    });
  };

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!file) {
      alert("파일을 선택하세요.");
      return;
    }

    const jsonData = {
      aplcnYm: "202507",
      enoCd: "ABC",
    };

    // JSON → Blob 으로 변환 + MIME 지정
    const jsonBlob = new Blob([JSON.stringify(jsonData)], {
      type: "application/json",
    });

    const formData = new FormData();
    formData.append("data", jsonBlob);
    formData.append("inpFile", file);

    try {
      const response = await axios.post(
        "http://localhost:8883/sewerage-service/api/v1/rdiiAnls/savewithfile",
        formData,
        {
          headers: {
            "X-Site-Id": SITE_ID,
          },
        },
      );

      alert("업로드 성공: " + response.data.message);
    } catch (err) {
      console.error(err);
      alert("업로드 실패");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="card card-border">
      <div className="card-header">
        <h3 className="text-2xl font-medium text-label">파일 업로드 테스트</h3>
      </div>
      <div className="p-[1.2rem]">
        <StandardFormSection title="업로드 정보" columns={2}>
          <StandardFormField label="텍스트 입력" columns={2}>
            <Input type="text" value={text} onChange={handleTextChange} />
          </StandardFormField>
          <StandardFormField label="파일 선택" required columns={2}>
            <Input type="file" onChange={handleFileChange} />
          </StandardFormField>
        </StandardFormSection>
      </div>
      <div className="card-footer flex justify-end gap-2">
        <Button type="submit">업로드</Button>
        <Button type="button" color="white" onClick={handleFindUser}>
          하수관로 사용자 조회
        </Button>
        <Button type="button" color="white" onClick={handleFindUserOna}>
          사용자서비스 사용자 조회
        </Button>
      </div>
    </form>
  );
}

export default FileUpload;