Release 1.0.5

src/app/hitchhiking/panel/HitchhikingCard.tsx

@@ -15,10 +15,9 @@ import {
   Box,
 } from '@mui/material'
 import { useRouter } from 'next/navigation'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Members from './Members'
 import DropdownMenu from '@/components/DropdownMenu'
-import useMedia from '@/hook/useMedia'
 import * as style from './HitchhikingCard.style'
 import ShareMenuItem from '@/components/dropdownMenu/ShareMenuItem'
 import ReportMenuItem from '@/components/dropdownMenu/ReportMenuItem'
@@ -37,7 +36,6 @@ const HitchhikingCardBack = ({
   onClick,
   flipped,
   isProject,
-  cardWidth,
   title,
   currentDomain,
   authorId,
@@ -48,28 +46,57 @@ const HitchhikingCardBack = ({
   flipped?: boolean
   isProject?: boolean
   title: string
-  cardWidth: number
   currentDomain: string
   authorId: number
 }) => {
   const [data, setData] = useState<IHitchhikingCardBack | null>(null)
   const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [lineCount, setLineCount] = useState({
+    title: 1,
+    content: 1,
+  })
   const router = useRouter()
+  const card = useRef<HTMLDivElement>(null)
 
   const { openToast, closeToast } = useToast()
 
+  useEffect(() => {
+    setLineCount({
+      title: getLineCount(46, 22.5, 2),
+      content: getLineCount(191, 18, 8),
+    })
+  }, [card])
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (card.current) {
+        setLineCount({
+          title: getLineCount(46, 22.5, 2),
+          content: getLineCount(191, 18, 8),
+        })
+      }
+    }
+
+    addEventListener('resize', handleResize)
+    return () => {
+      removeEventListener('resize', handleResize)
+    }
+  }, [])
+
   const getLineCount = (
-    otherOriginHeight: number,
+    originHeight: number,
     lineHeight: number,
     maxLine: number,
   ) => {
+    const removeCount = card.current?.clientHeight ?? 0 < 441 ? 2 : 1
     const lineCount = Math.floor(
-      ((cardWidth * 441) / 328 - (otherOriginHeight + 204)) / lineHeight,
+      ((card.current?.clientHeight ?? 0) * originHeight) / lineHeight / 441,
     )
     if (lineCount > maxLine) return maxLine
-    else if (lineCount < 1) return 1
-    else return lineCount
+    else if (lineCount < 1 + removeCount) return 1
+    else return lineCount - removeCount
   }
+
   const axiosInstance = useAxiosWithAuth()
 
   useEffect(() => {
@@ -113,6 +140,7 @@ const HitchhikingCardBack = ({
         padding: '1rem',
       }}
       key={crypto.randomUUID()}
+      ref={card}
     >
       {data ? (
         <Stack
@@ -156,7 +184,7 @@ const HitchhikingCardBack = ({
                 color={'text.normal'}
                 sx={{
                   ...style.cardTitleStyleBase,
-                  WebkitLineClamp: getLineCount(191, 22.5, 2) /* 라인수 */,
+                  WebkitLineClamp: lineCount.title,
                 }}
               >
                 {title}
@@ -172,7 +200,7 @@ const HitchhikingCardBack = ({
             }}
             onClick={onClick}
           >
-            <Box width={1}>
+            <Box width={1} height={'fit-content'}>
               <DynamicToastViewer
                 initialValue={data.content}
                 typographySx={{
@@ -186,7 +214,7 @@ const HitchhikingCardBack = ({
                 }}
                 sx={{
                   ...style.cardContentStyleBase,
-                  WebkitLineClamp: getLineCount(46, 18, 10) /* 라인수 */,
+                  WebkitLineClamp: lineCount.content,
                   '& .toastui-editor-contents > h1:first-of-type': {
                     marginTop: 0,
                   },
@@ -263,33 +291,11 @@ const HitchhikingCard = ({
   isProject?: boolean
 }) => {
   const [isFlipped, setIsFlipped] = useState(false)
-  const [cardWidth, setCardWidth] = useState(0)
   const [currentDomain, setCurrentDomain] = useState('')
-  const { isPc } = useMedia()
 
   useEffect(() => {
     // 현재 도메인 설정
     setCurrentDomain(window.location.origin)
-
-    // 카드 너비 설정
-    // calc(90svh * 328 / 800)
-    setCardWidth(
-      isPc
-        ? (window.innerHeight * 0.8 * 328) / 800
-        : (window.innerHeight * 328) / 800,
-    )
-    const handleResize = () => {
-      const newCardWidth = isPc
-        ? (window.innerHeight * 0.8 * 328) / 800
-        : window.innerWidth * 0.9
-      setCardWidth(newCardWidth)
-    }
-
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
   }, [])
 
   const handleMouseUp = (e: React.MouseEvent) => {
@@ -332,7 +338,6 @@ const HitchhikingCard = ({
         flipped={isFlipped}
         isProject={isProject}
         title={title}
-        cardWidth={cardWidth}
         currentDomain={currentDomain}
       />
     </div>

src/app/my-page/privacy/panel/AuthSettingSection.tsx

@@ -27,7 +27,7 @@ const AuthSettingSection = ({
             {authenticationTitle}
           </Typography>
           <Button variant="contained" href={href} sx={style.buttonStyleBase}>
-            <Typography variant="CaptionEmphasis" color="text.strong">
+            <Typography variant="CaptionEmphasis" color="#ffffff">
               인증하기
             </Typography>
           </Button>

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>

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

src/app/recruit/[id]/edit/page.tsx

@@ -99,7 +99,7 @@ const Page = ({ params }: { params: { id: string } }) => {
         roleList: data.type === 'PROJECT' ? data.roleList : null,
         interviewList: fieldToForm(data.interviewList),
         place: data.place,
-        max: data.type === 'PROJECT' ? null : Number(data.max),
+        max: data.type === 'PROJECT' ? null : Number(data.max) - 1,
         type: data.type,
       })
       .then((res) => {

src/app/recruit/[id]/panel/RecruitDetailContent.tsx

@@ -88,7 +88,7 @@ const RecruitDetailContent = ({
         )}
       </RecruitContentText>
       <RecruitContentText
-        label="기술스택"
+        label="관련 태그"
         icon={
           <Icon.TagIcon sx={{ ...style.iconStyleBase, color: 'text.normal' }} />
         }

src/app/teams/[id]/setting/page.tsx

@@ -108,7 +108,9 @@ const TeamsSetupPage = ({ params }: { params: { id: string } }) => {
                   color="primary"
                   fullWidth
                 >
-                  <Typography>신청 대기자 보기</Typography>
+                  <Typography color={'white'} variant="Body1">
+                    신청 대기자 보기
+                  </Typography>
                 </Button>
               </Stack>
               <SetupMember

src/app/teams/[id]/setting/panel/ApplicantList.tsx

@@ -153,7 +153,14 @@ const ApplicantList = ({
 
   if (!data || data.length === 0) {
     return (
-      <Card sx={{ p: '1.5rem', borderRadius: '1rem', height: '23rem' }}>
+      <Card
+        sx={{
+          p: '1.5rem',
+          borderRadius: '1rem',
+          height: '23rem',
+          backgroundColor: 'background.secondary',
+        }}
+      >
         <Stack
           direction="row"
           display="flex"
@@ -241,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>
             ))

src/app/teams/[id]/setting/panel/TeamInfoProcess/SettingTeamLogo.tsx

@@ -23,11 +23,11 @@ const SettingTeamLogo = ({
 }: ISettingTeamLogo) => {
   const { isOpen, openModal, closeModal } = useModal()
   const [preview, setPreview] = useState<string>(
-    teamLogoImage.length !== 0 ? teamLogoImage : '/icons/ios/128.png',
+    teamLogoImage.length !== 0 ? teamLogoImage : '',
   )
 
   const deleteImage = () => {
-    setPreview('/icons/ios/128.png')
+    setPreview('')
     setValue('teamImage', null)
     setIsLogoEdit(true)
     closeModal()

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 (
@@ -28,17 +30,19 @@ const CuPhotoBox = ({
         ...style,
         position: 'relative',
         margin: 0,
-        backgroundColor: '#ffffff',
-        border: '1px solid',
-        borderColor: 'line.alternative',
+        ...(error && {
+          backgroundColor: '#ffffff',
+          border: '1px solid',
+          borderColor: 'line.alternative',
+        }),
       }}
     >
       {src && !error && (
         <Image
           src={src}
           alt={alt}
           fill
-          style={{ objectFit: objectStyle }}
+          style={{ ...imgStyle, objectFit: objectStyle }}
           sizes="100%"
           priority={priorityOption}
           onError={() => setError(true)}

src/components/ReportModal.tsx

@@ -155,7 +155,7 @@ const ReportModal = ({
       </CuModal>
       <CuTextModal
         open={isOpen}
-        title={'쪽지 보내기'}
+        title={'신고하기'}
         onClose={closeModal}
         containedButton={{
           text: isSubmitting ? '제출 중' : '완료',