[FE] 이미지 추가 시, 모달창 최대 크기를 정해야 한다. 디폴트 이미지를 정해야 한다. (#630)

* design: 이미지 관련 최대 높이값 수정 * refactor: 이미지 url 없을때 대응
woowacourse-teams · Oct 19, 2022 · 21de034 · 21de034
1 parent dd4a74e
commit 21de034
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 22 deletions.
diff --git a/frontend/src/components/host/SectionDetailModal/styles.ts b/frontend/src/components/host/SectionDetailModal/styles.ts
@@ -38,6 +38,9 @@ const image = css`
   margin-top: 8px;
   cursor: pointer;
   border-radius: 8px;
+  height: 240px;
+  max-height: 240px;
+  object-fit: cover;
 `;
 
 const description = css`

diff --git a/frontend/src/components/user/DetailInfoModal/index.tsx b/frontend/src/components/user/DetailInfoModal/index.tsx
@@ -12,19 +12,13 @@ export interface DetailInfoModalProps {
   description: string;
 }
 
-const getImageUrl = (url: string): string => {
-  return url === '' ? homeCover_fallback : url;
-};
-
 const DetailInfoModal: React.FC<DetailInfoModalProps> = ({ name, imageUrl, description }) => {
   return (
     <ModalPortal>
       <Dimmer>
         <div css={styles.container}>
           <h1 css={styles.title}>{name}</h1>
-          <div css={styles.imageWrapper}>
-            <img css={styles.image} src={getImageUrl(imageUrl)} />
-          </div>
+          <div css={styles.imageWrapper}>{imageUrl !== '' && <img css={styles.image} src={imageUrl} />}</div>
           <span css={styles.description}>{description}</span>
         </div>
       </Dimmer>

diff --git a/frontend/src/components/user/DetailInfoModal/styles.ts b/frontend/src/components/user/DetailInfoModal/styles.ts
@@ -5,6 +5,7 @@ import theme from '@/styles/theme';
 const container = css`
   max-width: 400px;
   min-width: 320px;
+  max-height: 400px;
   width: 80%;
   background-color: ${theme.colors.white};
   display: flex;
@@ -29,7 +30,8 @@ const imageWrapper = css`
 
 const image = css`
   width: 100%;
-  height: 100%;
+  height: 240px;
+  max-height: 240px;
   object-fit: cover;
 `;
 

diff --git a/frontend/src/components/user/SectionCard/SectionInfoPreview/index.tsx b/frontend/src/components/user/SectionCard/SectionInfoPreview/index.tsx
@@ -10,11 +10,11 @@ interface SectionInfoPreviewProps {
 }
 
 const SectionInfoPreview: React.FC<SectionInfoPreviewProps> = ({ imageUrl, onClick }) => {
+  const isImage = imageUrl !== '';
+
   return (
     <div css={styles.wrapper} onClick={onClick}>
-      <div css={styles.imageWrapper}>
-        <LazyImage css={styles.image} imageUrl={imageUrl} />
-      </div>
+      <div css={styles.imageWrapper(isImage)}>{isImage && <LazyImage css={styles.image} imageUrl={imageUrl} />}</div>
       <FaMapMarkedAlt css={styles.icon} size={24} />
     </div>
   );

diff --git a/frontend/src/components/user/SectionCard/SectionInfoPreview/styles.ts b/frontend/src/components/user/SectionCard/SectionInfoPreview/styles.ts
@@ -7,12 +7,13 @@ const wrapper = css`
   cursor: pointer;
 `;
 
-const imageWrapper = css`
+const imageWrapper = (isImage: boolean) => css`
   width: 56px;
   height: 40px;
   overflow: hidden;
   border-radius: 8px;
   box-shadow: 2px 2px 4px 0px ${theme.colors.gray500};
+  background-color: ${!isImage && theme.colors.skyblue200};
 `;
 
 const image = css`

diff --git a/frontend/src/components/user/SectionCard/index.tsx b/frontend/src/components/user/SectionCard/index.tsx
@@ -9,8 +9,6 @@ import useModal from '@/hooks/useModal';
 
 import { ID, SectionType, TaskType } from '@/types';
 
-import homeCover_fallback from '@/assets/homeCover-fallback.png';
-
 import styles from './styles';
 
 type SectionCardProps = {
@@ -21,10 +19,6 @@ type SectionCardProps = {
   flipTaskCheck: any;
 };
 
-const getImageUrl = (url: string): string => {
-  return url === '' ? homeCover_fallback : url;
-};
-
 const SectionCard: React.FC<SectionCardProps> = ({
   section,
   sectionsAllCheckMap,
@@ -58,10 +52,7 @@ const SectionCard: React.FC<SectionCardProps> = ({
             </Button>
           )}
           {(section.imageUrl || section.description) && (
-            <SectionInfoPreview
-              imageUrl={getImageUrl(section.imageUrl)}
-              onClick={() => onClickSectionDetail(section)}
-            />
+            <SectionInfoPreview imageUrl={section.imageUrl} onClick={() => onClickSectionDetail(section)} />
           )}
         </div>
       </div>