diff --git a/src/app/showcase/page.tsx b/src/app/showcase/page.tsx
index c99bd72a1..229fae121 100644
--- a/src/app/showcase/page.tsx
+++ b/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}
     />
   )
 }
diff --git a/src/app/showcase/panel/CardContainer.style.ts b/src/app/showcase/panel/CardContainer.style.ts
index 3dab0fd59..4890bb0b2 100644
--- a/src/app/showcase/panel/CardContainer.style.ts
+++ b/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,
diff --git a/src/app/showcase/panel/CardContainer.tsx b/src/app/showcase/panel/CardContainer.tsx
index 469750cbc..db458edf6 100644
--- a/src/app/showcase/panel/CardContainer.tsx
+++ b/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,8 +53,10 @@ const CardContainer = ({
         justifyContent={'center'}
         alignItems={'center'}
         sx={{
-          ...(isPc ? cardStyle.cardPcSize : cardStyle.cardMobileSize),
+          mb: '0.875rem',
           position: 'relative',
+          zIndex: 100,
+          flexGrow: [1, 0],
         }}
       >
         {!message ? (
@@ -57,11 +64,39 @@ const CardContainer = ({
             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>
   )
 }
diff --git a/src/app/showcase/panel/CardStack.tsx b/src/app/showcase/panel/CardStack.tsx
index 4e85477e9..af6c81b07 100644
--- a/src/app/showcase/panel/CardStack.tsx
+++ b/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>
             )
diff --git a/src/app/showcase/panel/PhoneFrame.tsx b/src/app/showcase/panel/PhoneFrame.tsx
index 9164633ad..7d8f7987c 100644
--- a/src/app/showcase/panel/PhoneFrame.tsx
+++ b/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,7 +26,7 @@ const PhoneFrame = ({ imageUrl }: { imageUrl: string | undefined }) => {
             src={imageUrl}
             sx={{
               width: '16rem',
-              height: '40rem',
+              height: '20rem',
               objectFit: 'contain',
             }}
           />
@@ -32,8 +34,9 @@ const PhoneFrame = ({ imageUrl }: { imageUrl: string | undefined }) => {
           <Box
             display={'flex'}
             sx={{
-              width: '22.5rem',
+              width: '20rem',
               height: '40rem',
+              objectFit: 'contain',
             }}
             alignItems={'center'}
             justifyContent={'center'}
diff --git a/src/app/showcase/panel/PostCard.style.ts b/src/app/showcase/panel/PostCard.style.ts
index 5a3235da7..615be5648 100644
--- a/src/app/showcase/panel/PostCard.style.ts
+++ b/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)'],
 }
diff --git a/src/app/showcase/panel/PostCard.tsx b/src/app/showcase/panel/PostCard.tsx
index 26cbf9278..e577199b1 100644
--- a/src/app/showcase/panel/PostCard.tsx
+++ b/src/app/showcase/panel/PostCard.tsx
@@ -3,7 +3,6 @@ import {
   Card,
   CardContent,
   CardHeader,
-  CardMedia,
   IconButton,
   Stack,
   Typography,
@@ -18,6 +17,7 @@ import { IShowcaseTag } from './types'
 import useAxiosWithAuth from '@/api/config'
 import FavoriteIcon from '@mui/icons-material/Favorite'
 import ThumbUpIcon from '@mui/icons-material/ThumbUp'
+import CuPhotoBox from '@/components/CuPhotoBox'
 
 function PostCard({
   postId,
@@ -31,14 +31,21 @@ function PostCard({
   liked,
   isFavorite,
   onClick,
+  mutate,
 }: IPostCardShowcase) {
   const ref = React.useRef<HTMLDivElement>(null)
   const [currentCardWidth, setCurrentCardWidth] = useState<number>(0)
-  const [favorite, setFavorite] = useState<boolean>(isFavorite)
-  const [likeNum, setLikeNum] = useState<number>(like)
-  const [isLiked, setIsLiked] = useState<boolean>(liked)
+  const [favorite, setFavorite] = useState<boolean>(false)
+  const [likeNum, setLikeNum] = useState<number>(0)
+  const [isLiked, setIsLiked] = useState<boolean>(false)
   const axiosWithAuth = useAxiosWithAuth()
 
+  useEffect(() => {
+    setFavorite(isFavorite)
+    setLikeNum(like)
+    setIsLiked(liked)
+  }, [like, liked, isFavorite])
+
   useEffect(() => {
     if (ref.current) {
       setCurrentCardWidth(ref.current.clientWidth)
@@ -59,26 +66,58 @@ function PostCard({
       )
       .then((res) => {
         if (res.status === 200) {
-          setFavorite(!favorite)
+          mutate((prev) => {
+            return prev.map((card) => {
+              if (card.id === postId) {
+                return {
+                  ...card,
+                  favorite: !favorite,
+                }
+              }
+              return card
+            })
+          })
         }
       })
-  }, [setFavorite, axiosWithAuth])
+      .catch(() => {})
+  }, [favorite, setFavorite, mutate])
 
   const clickLike = useCallback(() => {
     axiosWithAuth
       .post(`${process.env.NEXT_PUBLIC_CSR_API}/api/v1/showcase/like/${postId}`)
       .then((res) => {
         if (res.status === 200) {
-          if (liked === false) {
-            setIsLiked(true)
-            setLikeNum(likeNum + 1)
+          if (isLiked === false) {
+            mutate((prev) => {
+              return prev.map((card) => {
+                if (card.id === postId) {
+                  return {
+                    ...card,
+                    like: likeNum + 1,
+                    liked: !isLiked,
+                  }
+                }
+                return card
+              })
+            })
           } else {
-            setIsLiked(false)
-            setLikeNum(likeNum - 1)
+            mutate((prev) => {
+              return prev.map((card) => {
+                if (card.id === postId) {
+                  return {
+                    ...card,
+                    like: likeNum - 1,
+                    liked: !isLiked,
+                  }
+                }
+                return card
+              })
+            })
           }
         }
       })
-  }, [setIsLiked, setLikeNum, axiosWithAuth])
+      .catch(() => {})
+  }, [isLiked, likeNum, setLikeNum, setIsLiked])
 
   return (
     <Card
@@ -89,17 +128,15 @@ function PostCard({
         backfaceVisibility: 'hidden',
       }}
       ref={ref}
-      onClick={onClick}
     >
-      <CardMedia
-        component="img"
-        image={image ? image : '/icons/52.png'}
-        alt="post thumbnail"
-        sx={{
-          ...style.cardMediaStyleBase,
-          height: (currentCardWidth * 251) / 328,
-        }}
-      />
+      <CardContent sx={style.cardMediaStyleBase} onClick={onClick}>
+        <CuPhotoBox
+          src={image ? image : '/icons/52.png'}
+          alt="post thumbnail"
+          style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}
+        />
+      </CardContent>
+
       <Stack
         sx={{ p: '1rem', pt: '0.75rem' }}
         spacing={'15px'}
@@ -160,6 +197,7 @@ function PostCard({
             height: (currentCardWidth * 190) / 328,
             boxSizing: 'border-box',
           }}
+          onClick={onClick}
         >
           <CardContent sx={{ p: 0 }}>
             <Typography
diff --git a/src/app/showcase/panel/ShowcaseCard.style.ts b/src/app/showcase/panel/ShowcaseCard.style.ts
index 116b40f33..fb6617797 100644
--- a/src/app/showcase/panel/ShowcaseCard.style.ts
+++ b/src/app/showcase/panel/ShowcaseCard.style.ts
@@ -1,24 +1,16 @@
 import { SxProps } from '@mui/material'
 
-export const cardSizeBase: SxProps = {
+export const cardSize: SxProps = {
+  boxSizing: 'border-box',
   maxHeight: '441px',
   maxWidth: '20.5rem',
   borderRadius: '0.75rem',
-}
-
-export const cardPcSize: SxProps = {
-  ...cardSizeBase,
-  width: 'calc(80svh * 328 /800)',
-  height: 'calc(80svh * 441 /800)',
-}
-
-export const cardMobileSize: SxProps = {
-  ...cardSizeBase,
-  width: '90vw',
-  height: 'calc(90vw * 441 / 328)',
+  width: ['calc(90svh * 328 / 800)', 'calc(80svh * 328 /800)'],
+  height: ['calc(90svh * 441 / 800)', 'calc(80svh * 441 /800)'],
 }
 
 export const cardStyleBase: SxProps = {
+  ...cardSize,
   backgroundColor: 'background.primary',
   borderWidth: '2px',
   borderColor: 'line.base',
@@ -26,19 +18,7 @@ export const cardStyleBase: SxProps = {
   position: 'absolute',
   top: '50%',
   left: '50%',
-  boxSizing: 'border-box',
-}
-
-export const cardPcStyleBase: SxProps = {
-  ...cardStyleBase,
-  ...cardPcSize,
-}
-
-export const cardMobileStyleBase: SxProps = {
-  ...cardStyleBase,
-  ...cardMobileSize,
 }
-
 export const cardTitleStyleBase: SxProps = {
   width: '100%',
   overflow: 'hidden',
@@ -59,14 +39,22 @@ export const cardChipStyleBase: SxProps = {
   },
 }
 
+export const cardHeaderStyleBase: SxProps = {
+  height: '2.5rem',
+  width: '100%',
+}
+
 export const cardContentStyleBase: SxProps = {
   width: '100%',
   overflow: 'hidden',
-  maxHeight: '11.25rem',
+  height: '7rem',
   lineHeight: '1.125rem',
   textOverflow: 'ellipsis',
   WebkitBoxOrient: 'vertical',
   display: '-webkit-box',
+  flex: '1 0 auto',
+  padding: 0,
+  backgroundColor: 'transparent',
 }
 
 export const cardMoreButtonStyle: SxProps = {
diff --git a/src/app/showcase/panel/ShowcaseCard.tsx b/src/app/showcase/panel/ShowcaseCard.tsx
index 4ee85f68c..2cd3c131f 100644
--- a/src/app/showcase/panel/ShowcaseCard.tsx
+++ b/src/app/showcase/panel/ShowcaseCard.tsx
@@ -12,23 +12,29 @@ import {
   CircularProgress,
   CardActionArea,
   Avatar,
+  Box,
 } from '@mui/material'
 import { useRouter } from 'next/navigation'
-import React, { useEffect, useState } from 'react'
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import DropdownMenu from '@/components/DropdownMenu'
-import useMedia from '@/hook/useMedia'
 import * as style from './ShowcaseCard.style'
 import { ICardData } from '@/app/showcase/panel/types'
 import PostCard from './PostCard'
 import ShareMenuItem from '@/components/dropdownMenu/ShareMenuItem'
 import ReportMenuItem from '@/components/dropdownMenu/ReportMenuItem'
+import DynamicToastViewer from '@/components/DynamicToastViewer'
 
 const ShowcaseCardBack = ({
   postId,
   sx,
   onClick,
   content,
-  cardWidth,
   title,
   name,
   image,
@@ -41,21 +47,53 @@ const ShowcaseCardBack = ({
   image: string | null
   name: string
   content: string
-  cardWidth: number
   currentDomain: string
 }) => {
+  const [lineCount, setLineCount] = useState({
+    title: 1,
+    content: 1,
+  })
   const router = useRouter()
-  const { isPc } = useMedia()
+  const card = useRef<HTMLDivElement>(null)
   const [currentPageUrl, setCurrentPageUrl] = useState('')
 
-  //window is not defined 에러 방지
+  useEffect(() => {
+    setLineCount({
+      title: getLineCount(46, 22.5, 2),
+      content: getLineCount(191, 18, 8),
+    })
+  }, [card])
+
   useEffect(() => {
     setCurrentPageUrl(window.location.href)
+
+    const handleResize = () => {
+      if (card.current) {
+        setLineCount({
+          title: getLineCount(46, 22.5, 2),
+          content: getLineCount(191, 18, 8),
+        })
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
   }, [])
 
-  const getLineCount = (originHeight: number, lineHeight: number) => {
-    const lineCount = Math.floor((cardWidth * originHeight) / 328 / lineHeight)
-    return lineCount ? lineCount : 1
+  const getLineCount = (
+    originHeight: number,
+    lineHeight: number,
+    maxLine: number,
+  ) => {
+    const removeCount = card.current?.clientHeight ?? 0 < 441 ? 2 : 1
+    const lineCount = Math.floor(
+      ((card.current?.clientHeight ?? 0) * originHeight) / lineHeight / 441,
+    )
+    if (lineCount > maxLine) return maxLine
+    else if (lineCount < 1 + removeCount) return 1
+    else return lineCount - removeCount
   }
 
   const handleSeeAll = (e: React.MouseEvent) => {
@@ -71,6 +109,7 @@ const ShowcaseCardBack = ({
         backfaceVisibility: 'hidden',
         padding: '1rem',
       }}
+      ref={card}
     >
       {content ? (
         <Stack
@@ -102,9 +141,9 @@ const ShowcaseCardBack = ({
               <DropdownMenu>
                 <ShareMenuItem
                   title={title}
-                  url={currentPageUrl}
-                  content={content}
-                  message={currentPageUrl}
+                  url={`${currentPageUrl}/showcase/detail/${postId}`}
+                  content={'피어에서 맘에 드는 프로젝트를 공유해보세요!'}
+                  message={`피어에서 맘에 드는 프로젝트를 공유해보세요! ${currentPageUrl}/showcase/detail/${postId}`}
                 />
 
                 <ReportMenuItem targetId={postId} />
@@ -118,10 +157,7 @@ const ShowcaseCardBack = ({
                 color={'text.normal'}
                 sx={{
                   ...style.cardTitleStyleBase,
-                  height: isPc ? '46px' : getLineCount(46, 22.5) * 22.5,
-                  WebkitLineClamp: isPc
-                    ? 2
-                    : getLineCount(46, 22.5) /* 라인수 */,
+                  WebkitLineClamp: lineCount.title,
                 }}
               >
                 {title}
@@ -137,30 +173,38 @@ const ShowcaseCardBack = ({
             }}
             onClick={onClick}
           >
-            <Typography
-              variant="Caption"
-              color={'text.alternative'}
-              // ref={containerRef}
-              sx={{
-                ...style.cardContentStyleBase,
-                height: isPc ? '11.25rem' : getLineCount(180, 18) * 18,
-                WebkitLineClamp: isPc ? 10 : getLineCount(180, 18) /* 라인수 */,
-              }}
-            >
-              {content.split('\n').map((line) => {
-                return (
-                  <>
-                    {line}
-                    <br />
-                  </>
-                )
-              })}
-            </Typography>
+            <Box width={1} height={'fit-content'}>
+              <DynamicToastViewer
+                initialValue={content}
+                typographySx={{
+                  fontSize: '0.75rem',
+                  color: 'text.alternative',
+                  margin: 0,
+                  lineHeight: '1.125rem',
+                  marginBlockStart: '0',
+                  marginBlockEnd: '0',
+                  marginTop: 0,
+                }}
+                sx={{
+                  ...style.cardContentStyleBase,
+                  WebkitLineClamp: lineCount.content,
+                  '& .toastui-editor-contents > h1:first-of-type': {
+                    marginTop: 0,
+                  },
+                  '.toastui-editor-contents h1': {
+                    paddingBottom: 0,
+                  },
+                  '.toastui-editor-contents h2': {
+                    paddingBottom: 0,
+                  },
+                }}
+              />
+            </Box>
           </CardContent>
           <CardContent sx={{ padding: 0 }} onClick={onClick}>
             <Stack direction={'row'} spacing={'0.5rem'}>
               <Avatar
-                src={image ? image : '/icons/52.png'}
+                src={image ? image : ''}
                 sx={{ width: '1.5rem', height: '1.5rem' }}
               />
               <Typography color={'text.alternative'} width={'11rem'}>
@@ -199,38 +243,20 @@ const ShowcaseCard = ({
   data,
   dragged,
   setDragged,
-  sx,
+  mutate,
 }: {
   data: ICardData
   sx?: SxProps
   dragged: boolean
   setDragged: React.Dispatch<React.SetStateAction<boolean>>
+  mutate: Dispatch<SetStateAction<ICardData[]>>
 }) => {
   const [isFlipped, setIsFlipped] = useState(false)
-  const [cardWidth, setCardWidth] = useState(0)
   const [currentDomain, setCurrentDomain] = useState('')
-  const { isPc } = useMedia()
 
   useEffect(() => {
     // 현재 도메인 설정
     setCurrentDomain(window.location.origin)
-
-    // 카드 너비 설정
-    setCardWidth(
-      isPc ? window.innerWidth * 0.9 : (window.innerHeight * 0.8 * 328) / 800,
-    )
-    const handleResize = () => {
-      const newCardWidth = isPc
-        ? window.innerWidth * 0.9
-        : (window.innerHeight * 0.8 * 328) / 800
-      setCardWidth(newCardWidth)
-    }
-
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
   }, [])
 
   const handleMouseUp = (e: React.MouseEvent) => {
@@ -262,23 +288,22 @@ const ShowcaseCard = ({
         like={data.like}
         liked={data.liked}
         sx={{
-          ...sx,
+          ...style.cardStyleBase,
           backfaceVisibility: 'hidden',
           transform: 'translate(-50%, 0)',
-          width: isPc ? '90%' : '90vw',
         }}
         onClick={handleMouseUp}
+        mutate={mutate}
       />
       <ShowcaseCardBack
         postId={data.id}
-        sx={sx}
+        sx={style.cardStyleBase}
         onClick={handleMouseUp}
         flipped={isFlipped}
         title={data.name}
         image={data.image}
         name={data.name}
         content={data.description}
-        cardWidth={cardWidth}
         currentDomain={currentDomain}
       />
     </div>
diff --git a/src/states/useShowcaseCardStore.tsx b/src/states/useShowcaseCardStore.tsx
new file mode 100644
index 000000000..a0b2269ff
--- /dev/null
+++ b/src/states/useShowcaseCardStore.tsx
@@ -0,0 +1,60 @@
+import { ICardData } from '@/app/showcase/panel/types'
+import { create } from 'zustand'
+
+import axios from 'axios'
+
+interface IShowcaseStore {
+  showcases: ICardData[]
+  draggedCardList: ICardData[]
+  page: number
+  index: number
+  setShowcases: (showcases: ICardData[]) => void
+  setDraggedCardList: (draggedCardList: ICardData[]) => void
+  getShowcases: (page: number) => void
+  removeShowcase: () => void
+  nextShowcase: () => void
+  prevShowcase: () => void
+  resetShowcases: () => void
+}
+
+const useShowcaseStore = create<IShowcaseStore>((set, get) => {
+  return {
+    showcases: [],
+    draggedCardList: [],
+    page: 1,
+    index: 0,
+    setShowcases: (showcases: ICardData[]) => {
+      set(() => ({ showcases: showcases }))
+    },
+    setDraggedCardList: (draggedCardList: ICardData[]) => {
+      set(() => ({ draggedCardList: draggedCardList }))
+    },
+
+    getShowcases: (page: number) => {
+      axios
+        .get(
+          `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/showcase?page=${page}&pageSize=10`,
+        )
+        .then((res) => {
+          const oldShowcases = get().showcases
+          const newShowcases = [...oldShowcases]
+            .reverse()
+            .concat(res.data.content)
+          set(() => ({ showcases: newShowcases, page: page }))
+        })
+    },
+
+    removeShowcase: () => {
+      const oldShowcases = get().showcases
+      const oldLength = oldShowcases.length
+      if (oldShowcases.length > 1) {
+        oldShowcases.push(oldShowcases[oldLength - 1])
+      }
+    },
+    nextShowcase: () => {},
+    prevShowcase: () => {},
+    resetShowcases: () => {},
+  }
+})
+
+export default useShowcaseStore
diff --git a/src/types/IPostCard.ts b/src/types/IPostCard.ts
index 643550640..136faf38f 100644
--- a/src/types/IPostCard.ts
+++ b/src/types/IPostCard.ts
@@ -1,6 +1,7 @@
 import { SxProps } from '@mui/material'
 import { ITag } from './IPostDetail'
-import { IShowcaseTag } from '@/app/showcase/panel/types'
+import { ICardData, IShowcaseTag } from '@/app/showcase/panel/types'
+import { Dispatch, SetStateAction } from 'react'
 
 export interface IPostCard {
   authorImage: string // 글 작성자 프로필 이미지
@@ -36,6 +37,7 @@ export interface IPostCardShowcase {
   liked: boolean
   sx?: SxProps
   onClick?: (e: React.MouseEvent) => void
+  mutate: Dispatch<SetStateAction<ICardData[]>>
 }
 
 export interface IHitchhikingCardBack {