Merge pull request #157 from sipe-team/feat/5th-recruit

fix: 후원사 소개 section card 스타일 변경 및 관련 이미지 컴포넌트 추가

Author: G-hoon

src/components/atoms/ContentWithTitle/index.tsx

@@ -1,16 +1,37 @@
 import { color, Flex, Typography } from '@sipe-team/side';
+import clsx from 'clsx';
 
 import styles from './index.module.scss';
 
 type ContentWithTitleProps = {
   title: string;
   children: React.ReactNode | React.ReactNode[];
+  className?: string;
+  style?: React.CSSProperties;
+  titleColor?: string;
+  titleSize?: 36 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 48;
 };
 
-function ContentWithTitle({ title, children }: ContentWithTitleProps) {
+function ContentWithTitle({
+  title,
+  children,
+  className,
+  style,
+  titleColor,
+  titleSize = 36,
+}: ContentWithTitleProps) {
   return (
-    <Flex align="center" className={styles.wrapper} direction="column">
-      <Typography color={color.white} className={styles.title} size={36}>
+    <Flex
+      align="center"
+      className={clsx(styles.wrapper, className)}
+      direction="column"
+      style={style}
+    >
+      <Typography
+        color={titleColor || color.white}
+        className={styles.title}
+        size={titleSize}
+      >
         {title}
       </Typography>
       {children}

src/components/organisms/about/SponsorSection/SponsorImage.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useState } from 'react';
+
+import Image from 'next/image';
+
+import clsx from 'clsx';
+
+import styles from './index.module.scss';
+
+interface SponsorImageProps {
+  src: string;
+  alt: string;
+}
+
+function SponsorImage({ src, alt }: SponsorImageProps) {
+  const [hasError, setHasError] = useState(false);
+
+  const handleError = () => {
+    setHasError(true);
+  };
+
+  const imageProperties = hasError
+    ? {
+        src: '/assets/empty_image.png',
+        alt: 'Image not available',
+        fill: true,
+        className: styles.fallbackImage,
+      }
+    : {
+        src,
+        alt,
+        width: 0,
+        height: 0,
+        onError: handleError,
+        className: styles.sponsorImage,
+      };
+
+  return (
+    <div className={clsx(styles.imageWrapper, hasError && styles.errorWrapper)}>
+      <Image {...imageProperties} />
+    </div>
+  );
+}
+
+export default SponsorImage;

src/components/organisms/about/SponsorSection/index.module.scss

@@ -1,16 +1,43 @@
 .imageList {
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
   gap: 16px;
   display: grid;
-  align-self: stretch;
   place-items: center;
   grid-template-columns: repeat(1, 1fr);
 
+  @include tablet {
+    gap: 16px;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
   @include desktop {
     gap: 32px;
     grid-template-columns: repeat(3, 1fr);
   }
+
+  .imageWrapper {
+    position: relative;
+    width: 331px;
+    height: 158px;
+    background-color: white;
+    border-radius: 12px;
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.errorWrapper {
+      background-color: #2d3748; // empty_image.png 배경색과 매칭
+    }
+  }
+
+  .sponsorImage {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .fallbackImage {
+    object-fit: contain;
+  }
 }

src/components/organisms/about/SponsorSection/index.tsx

@@ -1,8 +1,9 @@
 import ContentWithTitle from '@/components/atoms/ContentWithTitle';
-import Image from '@/components/molecules/Image';
 import { getAbout } from '@/db';
 import { getEntries } from '@/libs/utils';
 
+import SponsorImage from './SponsorImage';
+
 import styles from './index.module.scss';
 
 function Sponsor() {
@@ -14,14 +15,7 @@ function Sponsor() {
       <ContentWithTitle title="후원사 소개">
         <div className={styles.imageList}>
           {sponsors.map(([key, sponsor]) => (
-            <Image
-              objectFit="contain"
-              src={sponsor.link}
-              key={key}
-              alt={sponsor.name}
-              width={320}
-              height={180}
-            />
+            <SponsorImage key={key} src={sponsor.link} alt={sponsor.name} />
           ))}
         </div>
       </ContentWithTitle>

src/components/pages/Activity/index.tsx

@@ -24,18 +24,18 @@ function Activity({ activityData, currentTab }: Props) {
           <Button
             className={styles.periodButton}
             buttonType="chip"
-            active={currentTab === 'post'}
-            href="/activity?tab=post"
+            active={currentTab === 'video'}
+            href="/activity?tab=video"
           >
-            블로그
+            발표 영상
           </Button>
           <Button
             className={styles.periodButton}
             buttonType="chip"
-            active={currentTab === 'video'}
-            href="/activity?tab=video"
+            active={currentTab === 'post'}
+            href="/activity?tab=post"
           >
-            발표 영상
+            블로그
           </Button>
         </div>
         <div className={styles.wrapper}>