Skip to content

Commit

Permalink
Merge pull request #32 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 d17e53c + c92f2f3 commit 0ff70dd
Show file tree
Hide file tree
Showing 7 changed files with 96 additions and 152 deletions.
Binary file modified public/favicon.ico
View file
Binary file not shown.
0 public/helmet.png → public/images/default-image.png
View file
File renamed without changes
4 changes: 3 additions & 1 deletion src/pages/registrationModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -453,13 +453,15 @@ export default function RegistrationModal({ isOpen, onClose }) {

{/* 이미지 업로드 */}
<div className="registration_form-group-image">
<label>이미지 업로드</label>
<label htmlFor='file-input' style={{cursor: 'pointer'}}>이미지 업로드(썸네일: 첫번째)</label>
<input
id="file-input"
type="file"
multiple
accept="image/*"
onChange={handleImageChange}
required
style={{display: 'none'}}
className="registration_image-input"
/>
{formData.images.length > 0 && (
Expand Down
35 changes: 22 additions & 13 deletions src/pages/spaceDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,19 @@ export default function SpaceDetail({type: propType}) {
);
};

const renderImage = (src, alt) => (
<img
src={src}
alt={alt}
className="detail-img"
style={{width: '100%', height: 'auto', maxHeight: "250px"}}
onError={(e) => {
e.target.onerror = null;
e.target.src = "/default-image.png";
}}
/>
);

return(
<>
<div className="detail-header"></div>
Expand Down Expand Up @@ -167,26 +180,22 @@ export default function SpaceDetail({type: propType}) {
<SwiperSlide key={index}>
{({ isActive }) => (
<div className={`transition-all duration-300 ${isActive ? 'scale-110' : 'scale-90 opacity-50'}`}>
<img
src={img.url || img.filename}
alt={`${spaceData.space_name} 이미지 ${index + 1}`}
className="detail-img"
style={{width: '100%', height: 'auto', maxHeight: "250px"}}
/>
{renderImage(
img.url || img.filename,
`${spaceData.space_name} 이미지 ${index + 1}`
)}
</div>
)}
</SwiperSlide>
))}
</Swiper>
) : (
// 이미지가 없을 경우 기본 이미지나 메시지 표시
// 이미지가 없을 경우 기본 이미지 표시
<div className="no-images">
<img
src="/default-image.png"
alt="기본 이미지"
className="detail-img"
style={{width: '100%', height: 'auto', maxHeight: "250px"}}
/>
{renderImage(
"/default-image.png",
`${spaceData.space_name} 기본 이미지`
)}
</div>
)}
</div>
Expand Down
126 changes: 0 additions & 126 deletions src/pages/spaceList copy.js
View file

This file was deleted.

63 changes: 51 additions & 12 deletions src/pages/spaceList.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
// SpaceList.js
import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import "../styles/spaceList.css";
import axios from "axios";

export default function SpaceList({ type: propType }) {

const navigate = useNavigate();
const { type: paramType } = useParams();
const type = propType || paramType;
Expand All @@ -16,9 +16,44 @@ 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";

console.log('space-api : ', URL);

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) {
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);
} catch (error) {
console.error('Error in getImageUrl:', error);
return '/images/default-image.png';
}
};

useEffect(() => {
fetchSpaces();
Expand All @@ -35,7 +70,7 @@ export default function SpaceList({ type: propType }) {
}

const response = await axios.get(`${URL}${endpoint}`);
console.log('Received spaces data:', response.data); // 데이터 구조 확인
console.log('Received spaces data:', response.data);
setSpaces(response.data);
setError(null);
} catch (err) {
Expand All @@ -46,11 +81,10 @@ export default function SpaceList({ type: propType }) {
}
};


const handleItemClick = (spaceId) => {
console.log('Clicking space with ID:', spaceId); // ObjectId 확인
navigate(`/space/${type}/${spaceId}`);
};
};

if (loading) return <div>로딩 중...</div>;
if (error) return <div>{error}</div>;
Expand All @@ -68,12 +102,17 @@ export default function SpaceList({ type: propType }) {
onClick={() => handleItemClick(space.space_id)}
>
<div className="list-with-box">
<div className="list-space-name">{space.space_name}</div>
<div className="list-space-name">{space.name}</div>
<div className="list-space-imagebox">
{/* 임시로 기본 이미지 사용 또는 이미지 섹션 숨김 */}
<img
src="/default-image.png" // 기본 이미지 경로
alt={space.space_name}
<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"
/>
</div>
<div className="list-space-info">
Expand Down
20 changes: 20 additions & 0 deletions src/styles/registrationModal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,26 @@
margin: 1rem 0;
}

.registration_form-group .address-wrap .input-group{
flex-wrap: nowrap;
}

.registration_form-group .address-wrap .input-group .search-btn{
font-size: 0.7rem;
}

.registration_form-group button {
height: 3rem;
margin: 0.5rem 0.5rem;
width: 100px;
padding: 0 1rem;
border: 1px solid rgba(115, 113, 252, 0.1);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text-primary);
transition: all 0.3s ease;
}

.registration_form-group input {
height: 3rem;
margin: 0.5rem 0.5rem;
Expand Down

0 comments on commit 0ff70dd

Please sign in to comment.