[PWA] (8) 사진 첨부방식 URL -> 첨부파일 방식으로 수정

매장 사진 URL방식에서 첨부파일 방식으로 수정하기

☑️admin/shops/Page.js

<RegisterShopModal
 handleImageUpload={handleImageUpload} // 추가
          imagePreview={imagePreview} // 추가
/>

✔️useState 지정
  const [imageFile, setImageFile] = useState(null); // 업로드된 파일 상태
  const [imagePreview, setImagePreview] = useState(""); // 미리보기 URL

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      setImageFile(file);

      // 미리보기 URL 생성
      const reader = new FileReader();
      reader.onload = () => {
        setImagePreview(reader.result); // 미리보기 URL 설정
      };
      reader.readAsDataURL(file);
    }
  };

☑️RegisterShopModal.js

<RegisterShopModal
handleImageUpload={handleImageUpload} // 추가
imagePreview={imagePreview} // 추가
/>

✔️
{/* 이미지 URL 입력 */}
            <div>
              <label className="block text-gray-700 mb-2">매장 이미지</label>
              <input
                type="file"
                accept="image/*"
                onChange={(e) => {
                  handleImageUpload(e);
                }}
                className="w-full p-2 border rounded"
              />
              {imagePreview && (
                <div className="mt-4">
                  <img
                    src={imagePreview} // props로 전달된 미리보기 URL 사용
                    alt="미리보기"
                    className="w-full h-auto max-h-64 object-cover rounded"
                  />
                </div>
              )}
            </div>

매장 이미지 첨부파일 업로드와 디자이너 프로필 이미지 업로드는 수정완료
둘 다 파일 첨부를 통해 이미지를 업로드하고, 브라우저에서 미리보기를 제공하는 로직을 사용한다.

✔️파일 첨부 필드 사용:

<input type="file" accept="image/*" />

input을 사용하여 파일을 선택한다.

⭐FileReader를 사용한 미리보기

FileReader API를 사용해 업로드된 파일의 데이터를 읽고, 미리보기 URL을 생성한다.

✔️상태 관리:

업로드된 파일의 데이터를 상태(state)로 관리한다.
매장 이미지의 경우 imagePreview를 사용했고, 디자이너 프로필 이미지의 경우 각 디자이너의 imageUrl 필드를 업데이트한다.

매장/디자이너 이미지 첨부기능의 차이점은
상태 업데이트 대상이다.

매장 이미지는 imagePreview라는 단일 상태를 업데이트한다.
디자이너 프로필 이미지는 특정 디자이너의 imageUrl 필드를 업데이트한다. 따라서, 디자이너의 id를 기반으로 상태를 변경해야 한다.

✔️디자이너 파일별 수정 요약

1. page.js
   handleDesignerImageUpload 함수 추가
   handleSubmit 함수 수정
   RegisterShopModal에 handleDesignerImageUpload 전달
2. RegisterShopModal.js
   디자이너 정보 입력 필드에 파일 첨부 버튼과 미리보기 UI 추가
   props로 전달받은 handleDesignerImageUpload를 사용

디자이너정보도 수정필요..

 const handleDesignerImageUpload = (designerId, e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => {
        setNewShop({
          ...newShop,
          designers: newShop.designers.map((designer) =>
            designer.id === designerId
              ? { ...designer, imageUrl: reader.result } // 이미지 URL 업데이트
              : designer
          ),
        });
      };
      reader.readAsDataURL(file);
    }
  };

매장 이미지는 imagePreview를 통해 newShop.imageUrl에 저장된다.
디자이너 프로필 이미지는 handleDesignerImageUpload로 newShop.designers 배열의 각 imageUrl 필드에 저장된다.