[1.0.6 / H-SC] 쇼케이스 대공사

src/app/showcase/page.tsx

@@ -17,7 +17,7 @@ const Showcase = () => {
   const [page, setPage] = useState<number>(1)
   const [cardList, setCardList] = useState<Array<ICardData>>([])
   const [draggedCardList, setDraggedCardList] = useState<ICardData[]>([])
-  const { isPc } = useMedia()
+  const { isPc, isTablet } = useMedia()
   const { isLogin } = useAuthStore()
   const axiosWithAuth = useAxiosWithAuth()
   const { data, isLoading, error } = useSWR<IPagination<ICardData[]>>(
@@ -85,7 +85,7 @@ const Showcase = () => {
   else if (isLoading && !cardList.length) message = '로딩중'
   else if (error) message = '에러 발생'
 
-  if (isPc) {
+  if (isPc && !isTablet) {
     return (
       <Stack
         height={'100%'}
@@ -97,12 +97,15 @@ const Showcase = () => {
       </Stack>
     )
   }
+
   return (
     <CardContainer
       cardList={cardList}
       removeCard={removeCard}
       message={message}
       addCard={addCard}
+      addDisabled={draggedCardList.length === 0}
+      mutate={setCardList}
     />
   )
 }

src/app/showcase/panel/CardContainer.style.ts

@@ -1,4 +1,10 @@
 import { SxProps } from '@mui/material'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
 
 export const cardContainerStyleBase: SxProps = {
   width: '100%',
@@ -26,7 +32,7 @@ export const gnbContainerStyle: SxProps = {
 export const gnbTypographyStyle: SxProps = {
   color: 'text.normal',
   textAlign: 'center',
-  fontFamily: 'Inter',
+  fontFamily: `${inter.style.fontFamily} !important` as string,
   fontSize: '13px',
   fontStyle: 'normal',
   fontWeight: 700,

src/app/showcase/panel/CardContainer.tsx

@@ -1,36 +1,41 @@
 'use client'
-import React from 'react'
+
+import React, { Dispatch, SetStateAction } from 'react'
 import useMedia from '@/hook/useMedia'
-import { Stack, Typography } from '@mui/material'
-import * as cardStyle from './ShowcaseCard.style'
+import { IconButton, Stack, Typography } from '@mui/material'
 import * as containerStyle from './CardContainer.style'
+import * as style from '../showcase.style'
 import CardStack from './CardStack'
 import { ICardData } from '@/app/showcase/panel/types'
 import { BetaIcon } from '@/components/BetaBadge'
+import { ChevronLeft, ChevronRight } from '@/icons'
 
 const CardContainer = ({
   cardList,
   removeCard,
   message,
   addCard,
+  addDisabled,
+  mutate,
 }: {
   cardList: Array<ICardData>
   removeCard: (recruit_id: number) => void
   message: string
   addCard?: () => void
+  addDisabled?: boolean
+  mutate: Dispatch<SetStateAction<ICardData[]>>
 }) => {
-  const { isPc } = useMedia()
+  const { isPc, isTablet } = useMedia()
   return (
     <Stack
       justifyContent={'center'}
       alignItems={'center'}
       sx={
-        isPc
+        isPc && !isTablet
           ? containerStyle.cardContainerPCStyle
           : containerStyle.cardContainerMobileStyle
       }
       direction={'column'}
-      spacing={'2rem'}
     >
       <Stack
         direction={'row'}
@@ -48,20 +53,50 @@ const CardContainer = ({
         justifyContent={'center'}
         alignItems={'center'}
         sx={{
-          ...(isPc ? cardStyle.cardPcSize : cardStyle.cardMobileSize),
+          mb: '0.875rem',
           position: 'relative',
+          zIndex: 100,
+          flexGrow: [1, 0],
         }}
       >
         {!message ? (
           <CardStack
             cardList={cardList}
             removeCard={removeCard}
             addCard={addCard}
+            mutate={mutate}
           />
         ) : (
           <Typography variant="CaptionEmphasis">{message}</Typography>
         )}
       </Stack>
+      <Stack
+        direction={'row'}
+        width={'30%'}
+        display={'flex'}
+        justifyContent={'space-between'}
+      >
+        <>
+          <IconButton
+            sx={style.buttonStyle}
+            onClick={addCard}
+            disabled={!!addDisabled}
+          >
+            <ChevronLeft
+              sx={{ ...style.buttonIconStyle, color: 'text.alternative' }}
+            />
+          </IconButton>
+          <IconButton
+            sx={style.buttonStyle}
+            onClick={() => removeCard(cardList[cardList.length - 1]?.id)}
+            disabled={cardList.length === 1}
+          >
+            <ChevronRight
+              sx={{ ...style.buttonIconStyle, color: 'text.alternative' }}
+            />
+          </IconButton>
+        </>
+      </Stack>
     </Stack>
   )
 }

src/app/showcase/panel/CardStack.tsx

@@ -1,10 +1,9 @@
 'use client'
 
 import { Box } from '@mui/material'
-import React, { useState } from 'react'
+import React, { Dispatch, SetStateAction, useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import * as style from './ShowcaseCard.style'
-import useMedia from '@/hook/useMedia'
 import { ICardData } from '@/app/showcase/panel/types'
 import { ShowcaseCard } from './ShowcaseCard'
 
@@ -19,13 +18,14 @@ const CardStack = ({
   cardList,
   removeCard,
   addCard,
+  mutate,
 }: {
   cardList: Array<ICardData>
   removeCard: (recruit_id: number) => void
   addCard?: () => void
+  mutate: Dispatch<SetStateAction<ICardData[]>>
 }) => {
   const [dragged, setDragged] = useState(false)
-  const { isPc } = useMedia()
 
   const checkDragDirection = (x: number, y: number) => {
     return y < 0 ? ESwipeDirection.up : ESwipeDirection.down
@@ -51,10 +51,7 @@ const CardStack = ({
 
   return (
     <>
-      <Box
-        position={'relative'}
-        sx={isPc ? style.cardPcSize : style.cardMobileSize}
-      >
+      <Box position={'relative'} sx={style.cardSize}>
         <motion.div
           animate={{
             opacity: cardList.length > 1 ? 1 : 0,
@@ -65,7 +62,7 @@ const CardStack = ({
         >
           <Box
             sx={{
-              ...(isPc ? style.cardPcSize : style.cardMobileSize),
+              ...style.cardSize,
               backgroundColor: 'text.assistive',
             }}
           />
@@ -80,7 +77,7 @@ const CardStack = ({
         >
           <Box
             sx={{
-              ...(isPc ? style.cardPcSize : style.cardMobileSize),
+              ...style.cardSize,
               backgroundColor: 'text.assistive',
             }}
           />
@@ -122,9 +119,9 @@ const CardStack = ({
               >
                 <ShowcaseCard
                   data={card}
-                  sx={isPc ? style.cardPcStyleBase : style.cardMobileStyleBase}
                   dragged={dragged}
                   setDragged={setDragged}
+                  mutate={mutate}
                 />
               </motion.div>
             )

src/app/showcase/panel/PhoneFrame.tsx

@@ -6,11 +6,13 @@ const PhoneFrame = ({ imageUrl }: { imageUrl: string | undefined }) => {
     <Stack alignItems={'center'} justifyContent={'center'}>
       <Box
         position={'relative'}
-        component={'img'}
-        src="/images/iPhoneMock.svg"
         sx={{
-          width: '22.5rem',
+          width: '17rem',
           height: '40rem',
+          borderColor: 'text.normal',
+          borderStyle: 'solid',
+          borderWidth: 2,
+          borderRadius: '3rem',
         }}
       />
       <Stack
@@ -24,16 +26,17 @@ const PhoneFrame = ({ imageUrl }: { imageUrl: string | undefined }) => {
             src={imageUrl}
             sx={{
               width: '16rem',
-              height: '40rem',
+              height: '20rem',
               objectFit: 'contain',
             }}
           />
         ) : (
           <Box
             display={'flex'}
             sx={{
-              width: '22.5rem',
+              width: '20rem',
               height: '40rem',
+              objectFit: 'contain',
             }}
             alignItems={'center'}
             justifyContent={'center'}

src/app/showcase/panel/PostCard.style.ts

@@ -1,5 +1,15 @@
 import { SxProps } from '@mui/material'
 
+export const cardSubtitleStyleBase: SxProps = {
+  width: '100%',
+  overflow: 'hidden',
+  lineHeight: '21px',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  WebkitLineClamp: 1,
+}
+
 export const cardTitleStyleBase: SxProps = {
   width: '100%',
   overflow: 'hidden',
@@ -13,10 +23,16 @@ export const cardMediaStyleBase: SxProps = {
   flexGrow: 1,
   objectFit: 'cover',
   maxHeight: '15.6875rem',
+  width: ['calc(90svh * 328 / 800)', 'calc(80svh * 328 /800)'],
+  height: ['calc(90svh * 251 / 800)', 'calc(80svh * 251 /800)'],
+  p: 0,
+  boxSizing: 'border-box',
 }
 
 export const cardAuthorAvatarStyleBase: SxProps = {
   maxWidth: '2rem',
   maxHeight: '2rem',
   boxSizing: 'border-box',
+  height: ['calc(90svh * 32 / 800)', 'calc(80svh * 32 /800)'],
+  width: ['calc(90svh * 32 / 800)', 'calc(80svh * 32 /800)'],
 }