Skip to content
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

[주변상점] 기본 이미지 오류 수정 #318

Merged
merged 4 commits into from
May 9, 2024
Merged

[주변상점] 기본 이미지 오류 수정 #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aecc2f5
fix : 기본 이미지로직 변경 및 이미지 변경
May 7, 2024
cef9811
fix: 패키지 에러 수정
May 7, 2024
c17be73
fix: lint 수정
May 7, 2024
1c040f2
refator: 기본이미지 로직에 대한 주석추가
May 9, 2024
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
Binary file added .yarn/cache/fsevents-patch-21ad2b1333-8.zip
View file
Open in desktop
Binary file not shown.
20 changes: 20 additions & 0 deletions src/page/MyShopPage/components/EventTable/EventTable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,23 @@
background: #eee;
}
}

.event-default-img-container {
border-radius: 5px;
padding: 77px 44px;
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
align-items: center;
}

.event-default-img {
width: 100%;
height: auto;
}

.event-default-text {
color: #8e8e8e;
font-size: 14px;
}
23 changes: 23 additions & 0 deletions src/page/MyShopPage/components/EventTable/components/EventCard/EventCard.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,26 @@
left: -7px;
background-color: transparent;
}

.default-event-thumbnail-img-container {
background-color: #f5f5f5;
border-radius: 5px;
width: 100%;
padding: 77px 44px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-sizing: border-box;
gap: 5px;
}

.default-event-thumbnail-img {
width: 100%;
height: auto;
}

.default-event-thumbnail-text {
color: #8e8e8e;
font-size: 14px;
}
57 changes: 38 additions & 19 deletions src/page/MyShopPage/components/EventTable/components/EventCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,42 @@ export default function EventCard({
setHiddenInfo(false);
} else setHiddenInfo(true);
};
const renderThumbnail = () => {
if (event.thumbnail_images.length > 1) {
return (
<img
src={event.thumbnail_images[0]}
alt={event.title}
className={cn({
[styles.eventThumbail]: true,
[styles['eventThumbail--nonHidden']]: hiddenInfo === false,
})}
/>
);
}
// 전체보기가 아닌 경우 로고를 보여주고 전체보기의 경우 기본 이미지를 보여준다.
if (hiddenInfo) {
return (
<img
src="https://static.koreatech.in/assets/img/mainlogo2.png"
alt="KOIN service logo"
className={styles.eventThumbail}
/>
);
}
Comment on lines +41 to +49
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hiddenInfo라면 로고를 띄운다..? 이게 무슨 뜻인가요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전체보기가 아닌경우를 의미합니다.
image
전체보기가 아닌경우 현재 코인로고를 보여주고있어서 이렇게 작성하였습니다.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변수명이랑 매치가 잘 안되는 것 같아요. 프로퍼티를 변경하거나, 주석을 추가해두면 좋을거같네용

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵


return (
<div className={styles['default-event-thumbnail-img-container']}>
<img
className={styles['default-event-thumbnail-img']}
src="https://static.koreatech.in/assets/img/shop-event-thumbnail-default-img.png"
alt="이미지를 준비중 입니다."
/>
<div className={styles['default-event-thumbnail-text']}>사장님이 이미지를 준비 중입니다.</div>
</div>
);
};

return (
<div
className={cn({
Expand All @@ -43,25 +79,8 @@ export default function EventCard({
{selectedEventIds.includes(event.event_id) ? (<Check />) : <NonCheck />}
</button>
)}
{event.thumbnail_images ? (
<img
src={event.thumbnail_images[0]}
alt={event.title}
className={cn({
[styles.eventThumbail]: true,
[styles['eventThumbail--nonHidden']]: hiddenInfo === false,
})}
/>
) : (
<img
src="https://static.koreatech.in/assets/img/empty-thumbnail.png"
alt="KOIN service logo"
className={cn({
[styles.eventThumbail]: true,
[styles['eventThumbail--nonHidden']]: hiddenInfo === false,
})}
/>
)}
{renderThumbnail()}

<div className={styles['event-info']}>
<div className={styles['event-info__header']}>
<div className={styles.title}>{event.title}</div>
Expand Down
10 changes: 8 additions & 2 deletions src/page/MyShopPage/components/EventTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,15 +130,21 @@ export default function EventTable() {
)}
</div>
<div className={styles.eventContainer}>
{eventList && eventList.events.map((event: ShopEvent) => (
{eventList
&& eventList.events.length > 0 ? eventList.events.map((event: ShopEvent) => (
<EventCard
key={event.title}
event={event}
editState={editMenu}
selectedEventIds={selectedEventIds}
toggleSelect={() => toggleSelectEvent(event.event_id)}
/>
))}
)) : (
<div className={styles['event-default-img-container']}>
<img className={styles['event-default-img']} src="https://static.koreatech.in/assets/img/shop-event-tab-default-img.png" alt="기술적 오류 발생" />
<div className={styles['event-default-text']}>사장님이 이벤트를 준비 중입니다.</div>
</div>
)}
{isModifyErrorModalOpen && createPortal(
<EventErrorModal
content={modalMessage}
Expand Down
Loading