Merge pull request #1032 from peer-42seoul/1.0.5/S-SC/FIX-SC-IMAGE/1030

[S-SC] 메인페이지의 쇼케이스 이미지 둥글게
peer-42seoul · Feb 14, 2024 · e5e51f8 · e5e51f8
2 parents c69e882 + bb5f8a1
commit e5e51f8
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 15 deletions.
diff --git a/src/app/panel/main-page/MainCarousel.tsx b/src/app/panel/main-page/MainCarousel.tsx
@@ -2,7 +2,7 @@ import { Box } from '@mui/material'
 import Slider from 'react-slick'
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
-import Image from 'next/image'
+import CuPhotoBox from '@/components/CuPhotoBox'
 
 const MainCarousel = () => {
   const settings = {
@@ -21,22 +21,14 @@ const MainCarousel = () => {
     height: '100%',
   }
 
-  const imageProps = {
-    width: 310,
-    height: 130,
-    style: {
-      borderRadius: '0.75rem',
-      height: '7.5rem',
-    },
-  }
-
   return (
     <Slider {...settings}>
       <Box sx={BoxStyle}>
-        <Image
+        <CuPhotoBox
           src={'/images/banners/default-mobile.svg'}
           alt="banner-1"
-          {...imageProps}
+          imgStyle={{ borderRadius: '0.75rem' }}
+          style={{ width: 300, height: 130 }}
         />
       </Box>
     </Slider>

diff --git a/src/app/panel/main-page/MainShowcase.tsx b/src/app/panel/main-page/MainShowcase.tsx
@@ -53,7 +53,8 @@ const MainShowcase = () => {
       {data && data.content[0] && (
         <Stack alignItems={'center'} position={'relative'}>
           <CuPhotoBox
-            style={{ width: '300px', height: '350px', borderRadius: '0.75rem' }}
+            imgStyle={{ borderRadius: '0.75rem' }}
+            style={{ width: '300px', height: '350px' }}
             src={
               data?.content[0].image
                 ? data?.content[0].image

diff --git a/src/app/teams/[id]/setting/panel/ApplicantList.tsx b/src/app/teams/[id]/setting/panel/ApplicantList.tsx
@@ -248,7 +248,7 @@ const ApplicantList = ({
           {member && member.answers ? (
             member.answers.map((interview, index) => (
               <Stack key={index} m={1}>
-                <Typography variant="Title2">{interview.question}</Typography>
+                <Typography>{interview.question}</Typography>
                 <FormAnswer interview={interview} index={index} />
               </Stack>
             ))

diff --git a/src/components/CuPhotoBox.tsx b/src/components/CuPhotoBox.tsx
@@ -6,6 +6,7 @@ import React, { useState } from 'react'
 interface ICuPhotoBoxProps {
   onClick?: () => void
   style?: React.CSSProperties
+  imgStyle?: React.CSSProperties
   src: string
   alt: string
   objectStyle?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
@@ -19,6 +20,7 @@ const CuPhotoBox = ({
   priorityOption,
   objectStyle = 'cover',
   onClick,
+  imgStyle,
 }: ICuPhotoBoxProps) => {
   const [error, setError] = useState(false)
   return (
@@ -40,7 +42,7 @@ const CuPhotoBox = ({
           src={src}
           alt={alt}
           fill
-          style={{ objectFit: objectStyle }}
+          style={{ ...imgStyle, objectFit: objectStyle }}
           sizes="100%"
           priority={priorityOption}
           onError={() => setError(true)}