diff --git a/src/components/Result/CaptureImage.tsx b/src/components/Result/CaptureImage.tsx index 3c044e1..9e1babf 100644 --- a/src/components/Result/CaptureImage.tsx +++ b/src/components/Result/CaptureImage.tsx @@ -1,91 +1,88 @@ -// import { useRef } from 'react' +import { useRef } from 'react' -// type CaptureImageItem = { -// id: number -// src: string // 서버 URL or URL.createObjectURL -// label?: string -// uploading?: boolean // 업로드 진행 표시용(선택) -// } +type CaptureImageItem = { + id: number + src: string // 서버 URL or URL.createObjectURL + label?: string + uploading?: boolean // 업로드 진행 표시용(선택) +} -// type CaptureImageProps = { -// images: CaptureImageItem[] -// showUploadButton?: boolean -// onPickFiles?: (files: FileList) => void // 부모에서 업로드 처리 -// } +type CaptureImageProps = { + images: CaptureImageItem[] + showUploadButton?: boolean + onPickFiles?: (files: FileList) => void // 부모에서 업로드 처리 +} -const CaptureImage = () => - // { - // // images, - // // showUploadButton = false, - // // onPickFiles, - // }: CaptureImageProps, - { - // const inputRef = useRef(null) +const CaptureImage = ({ + images, + showUploadButton = false, + onPickFiles, +}: CaptureImageProps) => { + const inputRef = useRef(null) - return ( - <> - //
- //
- //

- // 촬영된 사진을 확인해보세요! - //

+ return ( +
+
+

+ 촬영된 사진을 확인해보세요! +

- // {showUploadButton && ( - // <> - // - // e.target.files && onPickFiles?.(e.target.files)} - // /> - // - // )} - //
+ {showUploadButton && ( + <> + + e.target.files && onPickFiles?.(e.target.files)} + /> + + )} +
- // {images.length === 0 ? ( - //
- // 아직 업로드된 사진이 없습니다. - //
- // ) : ( - //
- // {images.map((img) => ( - //
- //
- // {img.label - // ((e.currentTarget as HTMLImageElement).style.visibility = - // 'hidden') - // } - // /> - // {img.uploading && ( - //
- // 업로드 중… - //
- // )} - //
- // {img.label && ( - //

- // {img.label} - //

- // )} - //
- // ))} - //
- // )} - //
- ) - } + {images.length === 0 ? ( +
+ 아직 업로드된 사진이 없습니다. +
+ ) : ( +
+ {images.map((img) => ( +
+
+ {img.label { + ;(e.currentTarget as HTMLImageElement).style.visibility = + 'hidden' + }} + /> + {img.uploading && ( +
+ 업로드 중… +
+ )} +
+ {img.label && ( +

+ {img.label} +

+ )} +
+ ))} +
+ )} +
+ ) +} export default CaptureImage diff --git a/src/pages/ResultPage.tsx b/src/pages/ResultPage.tsx index ac6e83f..7d85d1c 100644 --- a/src/pages/ResultPage.tsx +++ b/src/pages/ResultPage.tsx @@ -4,8 +4,8 @@ import API from '../apis/api' import ScalpStatusCard from '../components/Result/ScalpStatusCard' import ScalpRadarChart from '../components/Result/ScalpRadarChart' import StatusSlider from '../components/Result/StatusSlider' -// import CaptureImage from '../components/Result/CaptureImage' import ProductRecommendButton from '../components/Result/ProductRecommendButton' +import CaptureImage from '../components/Result/CaptureImage' type Status = '양호' | '보통' | '심각' @@ -67,7 +67,7 @@ const ResultPage = () => { const [displayName, setDisplayName] = useState('회원') // 이미지 - const [, setImages] = useState(() => { + const [images, setImages] = useState(() => { return ( state.images ?? safeParse(sessionStorage.getItem(SKEY_IMAGES)) ?? [ @@ -203,7 +203,7 @@ const ResultPage = () => { )} - {/* */} + ) }