Skip to content

πŸ› [FIX] UI μˆ˜μ • #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nadomola merged 3 commits into from
Oct 31, 2025
Merged

πŸ› [FIX] UI μˆ˜μ • #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
17a74e9
πŸ› [FIX] UI μˆ˜μ •
heeone1 Oct 31, 2025
7faebef
πŸ› [FIX] λΉŒλ“œ μ—λŸ¬ μˆ˜μ •
heeone1 Oct 31, 2025
bb91581
πŸ› [FIX] λΉŒλ“œ μ—λŸ¬ μˆ˜μ •
heeone1 Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 82 additions & 79 deletions src/components/Result/CaptureImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,91 @@
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<HTMLInputElement>(null)
const CaptureImage = () =>
// {
// // images,
// // showUploadButton = false,
// // onPickFiles,
// }: CaptureImageProps,
{
// const inputRef = useRef<HTMLInputElement>(null)

return (
<div className="bg-white rounded-lg shadow-md p-4 mt-4">
<div className="flex items-center justify-between mb-2">
<h3 className="text-center font-bold text-lg flex-1">
촬영된 사진을 ν™•μΈν•΄λ³΄μ„Έμš”!
</h3>
return (
<></>
// <div className="bg-white rounded-lg shadow-md p-4 mt-4">
// <div className="flex items-center justify-between mb-2">
// <h3 className="text-center font-bold text-lg flex-1">
// 촬영된 사진을 ν™•μΈν•΄λ³΄μ„Έμš”!
// </h3>

{showUploadButton && (
<>
<button
className="ml-4 shrink-0 px-3 py-1.5 text-sm rounded-lg border border-gray-300"
onClick={() => inputRef.current?.click()}
>
사진 μΆ”κ°€
</button>
<input
ref={inputRef}
type="file"
accept="image/*"
multiple
className="hidden"
onChange={(e) => e.target.files && onPickFiles?.(e.target.files)}
/>
</>
)}
</div>
// {showUploadButton && (
// <>
// <button
// className="ml-4 shrink-0 px-3 py-1.5 text-sm rounded-lg border border-gray-300"
// onClick={() => inputRef.current?.click()}
// >
// 사진 μΆ”κ°€
// </button>
// <input
// ref={inputRef}
// type="file"
// accept="image/*"
// multiple
// className="hidden"
// onChange={(e) => e.target.files && onPickFiles?.(e.target.files)}
// />
// </>
// )}
// </div>

{images.length === 0 ? (
<div className="py-8 text-center text-sm text-gray-500">
아직 μ—…λ‘œλ“œλœ 사진이 μ—†μŠ΅λ‹ˆλ‹€.
</div>
) : (
<div className="grid grid-cols-2 sm:grid-cols-2 gap-4 justify-items-center">
{images.map((img) => (
<div key={img.id} className="flex flex-col items-center w-24">
<div className="relative">
<img
src={img.src}
alt={img.label ?? '촬영 사진'}
className="rounded-full w-24 h-24 aspect-square object-cover"
onError={(e) =>
((e.currentTarget as HTMLImageElement).style.visibility =
'hidden')
}
/>
{img.uploading && (
<div className="absolute inset-0 rounded-full bg-black/30 flex items-center justify-center text-white text-xs">
μ—…λ‘œλ“œ 쀑…
</div>
)}
</div>
{img.label && (
<p className="text-base text-center font-bold mt-2">
{img.label}
</p>
)}
</div>
))}
</div>
)}
</div>
)
}
// {images.length === 0 ? (
// <div className="py-8 text-center text-sm text-gray-500">
// 아직 μ—…λ‘œλ“œλœ 사진이 μ—†μŠ΅λ‹ˆλ‹€.
// </div>
// ) : (
// <div className="grid grid-cols-2 sm:grid-cols-2 gap-4 justify-items-center">
// {images.map((img) => (
// <div key={img.id} className="flex flex-col items-center w-24">
// <div className="relative">
// <img
// src={img.src}
// alt={img.label ?? '촬영 사진'}
// className="rounded-full w-24 h-24 aspect-square object-cover"
// onError={(e) =>
// ((e.currentTarget as HTMLImageElement).style.visibility =
// 'hidden')
// }
// />
// {img.uploading && (
// <div className="absolute inset-0 rounded-full bg-black/30 flex items-center justify-center text-white text-xs">
// μ—…λ‘œλ“œ 쀑…
// </div>
// )}
// </div>
// {img.label && (
// <p className="text-base text-center font-bold mt-2">
// {img.label}
// </p>
// )}
// </div>
// ))}
// </div>
// )}
// </div>
)
}

export default CaptureImage

Expand Down
6 changes: 3 additions & 3 deletions src/pages/ResultPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ 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 CaptureImage from '../components/Result/CaptureImage'
import ProductRecommendButton from '../components/Result/ProductRecommendButton'

type Status = 'μ–‘ν˜Έ' | '보톡' | '심각'
Expand Down Expand Up @@ -67,7 +67,7 @@ const ResultPage = () => {
const [displayName, setDisplayName] = useState<string>('νšŒμ›')

// 이미지
const [images, setImages] = useState<ImageItem[]>(() => {
const [, setImages] = useState<ImageItem[]>(() => {
return (
state.images ??
safeParse<ImageItem[]>(sessionStorage.getItem(SKEY_IMAGES)) ??
Expand Down Expand Up @@ -204,7 +204,7 @@ const ResultPage = () => {
</div>
)}

<CaptureImage images={images} />
{/* <CaptureImage images={images} /> */}
</div>
)
}
Expand Down