Skip to content

Commit

Permalink
Merge pull request #36 from Spaces-Place/dusqo
Browse files Browse the repository at this point in the history 
사진가져오기
  • Loading branch information
@KangYeonbae
KangYeonbae authored Dec 3, 2024
2 parents e5c66bc + 5c5ed0a commit a8653f9
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 58 deletions.
34 changes: 14 additions & 20 deletions src/pages/spaceDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function SpaceDetail({type: propType}) {
const [showContact, setShowContact] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [coordinates, setCoordinates] = useState(null);
const URL = process.env.REACT_APP_SPACE_API;
const URL = process.env.REACT_APP_SPACE_API;

const convertAddressToCoords = (address) => {
return new Promise((resolve, reject) => {
Expand All @@ -40,8 +40,6 @@ export default function SpaceDetail({type: propType}) {
});
};



useEffect(() => {
const fetchSpaceDetail = async () => {
try {
Expand Down Expand Up @@ -75,7 +73,6 @@ export default function SpaceDetail({type: propType}) {
} catch (error) {
console.error("Error fetching space detail:", error);
setIsLoading(false);
// 에러 처리 추가
alert(error.response?.data?.message || error.message || '공간 정보를 불러오는데 실패했습니다.');
}
};
Expand All @@ -85,10 +82,8 @@ export default function SpaceDetail({type: propType}) {
}
}, [id, propType, URL]);



if(isLoading){
return <div>로딩중......ㅣ</div>
return <div>로딩중...</div>
}

if(!spaceData){
Expand All @@ -100,7 +95,7 @@ export default function SpaceDetail({type: propType}) {
state: {
spacetype: spaceData.space_type,
spaceId: spaceData.space_id,
name: spaceData.space_name, // name -> space_name으로 수정
name: spaceData.space_name,
price: `${spaceData.unit_price.toLocaleString()}원 / ${spaceData.usage_unit}`
}
});
Expand Down Expand Up @@ -138,17 +133,17 @@ export default function SpaceDetail({type: propType}) {
</ul>
</div>
);
};
};

const renderImage = (src, alt) => (
const renderImage = (imageUrl, alt) => (
<img
src={src}
src={imageUrl}
alt={alt}
className="detail-img"
style={{width: '100%', height: 'auto', maxHeight: "250px"}}
onError={(e) => {
e.target.onerror = null;
e.target.src = "/default-image.png";
e.target.src = "/images/default-image.png";
}}
/>
);
Expand All @@ -159,7 +154,7 @@ export default function SpaceDetail({type: propType}) {
<div className={`detail-space-big-container ${spaceData.space_type}-theme`}>
<div className="space-detail-container">
<div className="detail-space-header">
<h1>{spaceData.space_name}</h1>
<h1>{spaceData.name || spaceData.space_name}</h1>
<p className="detail-location">{spaceData.location.sido}</p>
</div>

Expand All @@ -181,20 +176,19 @@ export default function SpaceDetail({type: propType}) {
{({ isActive }) => (
<div className={`transition-all duration-300 ${isActive ? 'scale-110' : 'scale-90 opacity-50'}`}>
{renderImage(
img.url || img.filename,
`${spaceData.space_name} 이미지 ${index + 1}`
img.thumbnail || img.url || '/images/default-image.png',
`${spaceData.name || spaceData.space_name} 이미지 ${index + 1}`
)}
</div>
)}
</SwiperSlide>
))}
</Swiper>
) : (
// 이미지가 없을 경우 기본 이미지 표시
<div className="no-images">
{renderImage(
"/default-image.png",
`${spaceData.space_name} 기본 이미지`
"/images/default-image.png",
`${spaceData.name || spaceData.space_name} 기본 이미지`
)}
</div>
)}
Expand Down Expand Up @@ -222,7 +216,7 @@ export default function SpaceDetail({type: propType}) {
</div>

<div className="detail-info-section">
<h2>{spaceData.space_name} 소개</h2>
<h2>{spaceData.name || spaceData.space_name} 소개</h2>
<p>{spaceData.content}</p>
</div>
{spaceData.amenities && (
Expand All @@ -244,7 +238,7 @@ export default function SpaceDetail({type: propType}) {
>
<MapMarker
position={coordinates}
name={spaceData.space_name}
name={spaceData.name || spaceData.space_name}
/>
</Map>
)}
Expand Down
49 changes: 11 additions & 38 deletions src/pages/spaceList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,39 +16,13 @@ export default function SpaceList({ type: propType }) {

const itemsPerPage = 10;
const URL = process.env.REACT_APP_SPACE_API;
const S3_BUCKET_URL = process.env.REACT_APP_S3_BUCKET_URL || "https://space-place-bucket.s3.amazonaws.com";

const getFileExtension = (originalFilename) => {
if(!originalFilename) return '';
const match = originalFilename.match(/\.([^.]+)$/);
return match ? match[1].toLowerCase() : '';
};

const constructImageUrl = (vendorId, spaceId, image) => {
if (!vendorId || !spaceId || !image?.filename) {
return "/images/default-image.png";
}

const extension = getFileExtension(image.original_filename);
const fullFilename = image.filename.includes('.') ?
image.filename :
`${image.filename}.${extension}`;

return `${S3_BUCKET_URL}/${vendorId}/${spaceId}/${fullFilename}`;
};

const getImageUrl = (space) => {
try {
if (!space?.images || !Array.isArray(space.images) || space.images.length === 0) {
if (!space?.thumbnail) {
return '/images/default-image.png';
}

const firstImage = space.images[0];
if (!firstImage?.filename) {
return '/images/default-image.png';
}

return constructImageUrl(space.vendor_id, space.space_id, firstImage);
return space.thumbnail;
} catch (error) {
console.error('Error in getImageUrl:', error);
return '/images/default-image.png';
Expand Down Expand Up @@ -81,7 +55,6 @@ export default function SpaceList({ type: propType }) {
}
};


const handleItemClick = (spaceId) => {
navigate(`/space/${type}/${spaceId}`);
};
Expand All @@ -104,15 +77,15 @@ export default function SpaceList({ type: propType }) {
<div className="list-with-box">
<div className="list-space-name">{space.name}</div>
<div className="list-space-imagebox">
<img
src={getImageUrl(space)}
alt={space?.name || space?.space_name || '공간 이미지'}
onError={(e) => {
console.log('Image load failed, falling back to default');
e.target.onerror = null;
e.target.src = '/images/default-image.png';
}}
className="space-image"
<img
src={getImageUrl(space)}
alt={space?.name || '공간 이미지'}
onError={(e) => {
console.log('Image load failed, falling back to default');
e.target.onerror = null;
e.target.src = '/images/default-image.png';
}}
className="space-image"
/>
</div>
<div className="list-space-info">
Expand Down

0 comments on commit a8653f9

Please sign in to comment.