#47 refactor: image url 수정

Team-Tiki · Jul 9, 2024 · 103520c · 103520c
1 parent 00de606
commit 103520c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/src/page/showcase/constant/empty.svg → src/common/asset/svg/default_profile.svg b/src/page/showcase/constant/empty.svg → src/common/asset/svg/default_profile.svg
diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
@@ -2,11 +2,16 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
+export const containerStyle = css({ width: '24.35rem' });
+
 export const imageStyle = css({
   width: '100%',
   height: '14rem',
 
   borderRadius: '16px 16px 0px 0px',
+
+  objectFit: 'none',
+  aspectRatio: 16 / 9,
 });
 
 export const descriptionStyle = css({

diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
@@ -1,25 +1,28 @@
 import {
+  containerStyle,
   descriptionStyle,
   detailStyle,
   imageStyle,
   titleStyle,
 } from '@/page/showcase/component/ClubProfileCard/ClubProfileCard.style';
 
+import defaultImage from '@/common/asset/svg/default_profile.svg';
+
 interface ClubProfileCardProps {
   title: string;
   detail: string;
-  Image: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  imageUrl?: string;
 }
 
-const ClubProfileCard = ({ title, detail, Image }: ClubProfileCardProps) => {
+const ClubProfileCard = ({ title, detail, imageUrl }: ClubProfileCardProps) => {
   return (
-    <>
-      <Image css={imageStyle} />
+    <section css={containerStyle}>
+      <img src={imageUrl ? imageUrl : defaultImage} alt={`${title}-image`} css={imageStyle} />
       <div css={descriptionStyle}>
         <p css={titleStyle}>{title}</p>
         <p css={detailStyle}>{detail}</p>
       </div>
-    </>
+    </section>
   );
 };
 

diff --git a/src/story/page/showcase/ClubProfileCard.stories.tsx b/src/story/page/showcase/ClubProfileCard.stories.tsx
@@ -1,5 +1,4 @@
 import ClubProfileCard from '@/page/showcase/component/ClubProfileCard/ClubProfileCard';
-import Image from '@/page/showcase/constant/empty.svg?react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
@@ -11,7 +10,7 @@ const meta = {
   args: {
     title: 'Tiki 티키',
     detail: '안녕하세요 티키입니다. 저희는 멋진 웹사이트를 제작합니다.',
-    Image: Image,
+    imageUrl: '',
   },
   argTypes: {
     title: {