Merge pull request #879 from peer-42seoul/1.0.2/H-SC/866

[H-SC] 쇼케이스 UX 개선
peer-42seoul · Feb 7, 2024 · 67901ba · 67901ba
2 parents 86659fd + b481c55
commit 67901ba
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 51 deletions.
diff --git a/src/app/showcase/panel/CardContainer.tsx b/src/app/showcase/panel/CardContainer.tsx
@@ -20,7 +20,7 @@ const CardContainer = ({
   const { isPc } = useMedia()
   return (
     <Stack
-      justifyContent={'flex-start'}
+      justifyContent={'center'}
       alignItems={'center'}
       sx={
         isPc

diff --git a/src/app/showcase/panel/CardStack.tsx b/src/app/showcase/panel/CardStack.tsx
@@ -42,7 +42,7 @@ const CardStack = ({
     // 위로 조금만 움직였을 때 카드가 사라지지 않도록 처리
     if (
       Math.abs(info.offset.y) < 150 ||
-      checkDragDirection(info.offset.x, info.offset.y) !== ESwipeDirection.up
+      checkDragDirection(info.offset.x, info.offset.y) !== ESwipeDirection.down
     ) {
       setDragged(false)
 

diff --git a/src/app/showcase/panel/PostCard.tsx b/src/app/showcase/panel/PostCard.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   Card,
-  CardActionArea,
   CardContent,
   CardHeader,
   CardMedia,
@@ -92,7 +91,7 @@ function PostCard({
         backfaceVisibility: 'hidden',
       }}
       ref={ref}
-      // onClick={onClick}
+      onClick={onClick}
     >
       <CardMedia
         component="img"
@@ -157,53 +156,52 @@ function PostCard({
           }
           sx={{ p: 0 }}
         />
-        <CardActionArea onClick={onClick}>
-          <Box
-            sx={{
-              height: (currentCardWidth * 190) / 328,
-              boxSizing: 'border-box',
-            }}
-          >
-            <CardContent sx={{ p: 0 }}>
-              <Typography
-                variant="Body1"
-                color="text.normal"
-                sx={{
-                  ...style.cardTitleStyleBase,
-                  height: getLineCount(46, 22.5) * 22.5,
-                  WebkitLineClamp: getLineCount(46, 22.5),
-                }}
-              >
-                {title}
-              </Typography>
-            </CardContent>
-            <CardContent sx={{ p: 0 }}>
-              <Stack
-                gap={1}
-                direction={'row'}
-                sx={{
-                  overflow: 'hidden',
-                  height: getLineCount(46, 22.5) * 20 + 8,
-                }}
-              >
-                {tagList?.map(({ name, color }: IShowcaseTag, idx: number) => {
-                  return (
-                    <Chip
-                      label={<Typography variant="Tag">{name}</Typography>}
-                      size="small"
-                      key={idx}
-                      style={{
-                        backgroundColor: alpha(color, 0.3),
-                        borderRadius: 2,
-                        height: '1.25rem',
-                      }}
-                    />
-                  )
-                })}
-              </Stack>
-            </CardContent>
-          </Box>
-        </CardActionArea>
+
+        <Box
+          sx={{
+            height: (currentCardWidth * 190) / 328,
+            boxSizing: 'border-box',
+          }}
+        >
+          <CardContent sx={{ p: 0 }}>
+            <Typography
+              variant="Body1"
+              color="text.normal"
+              sx={{
+                ...style.cardTitleStyleBase,
+                height: getLineCount(46, 22.5) * 22.5,
+                WebkitLineClamp: getLineCount(46, 22.5),
+              }}
+            >
+              {title}
+            </Typography>
+          </CardContent>
+          <CardContent sx={{ p: 0 }}>
+            <Stack
+              gap={1}
+              direction={'row'}
+              sx={{
+                overflow: 'hidden',
+                height: getLineCount(46, 22.5) * 20 + 8,
+              }}
+            >
+              {tagList?.map(({ name, color }: IShowcaseTag, idx: number) => {
+                return (
+                  <Chip
+                    label={<Typography variant="Tag">{name}</Typography>}
+                    size="small"
+                    key={idx}
+                    style={{
+                      backgroundColor: alpha(color, 0.3),
+                      borderRadius: 2,
+                      height: '1.25rem',
+                    }}
+                  />
+                )
+              })}
+            </Stack>
+          </CardContent>
+        </Box>
       </Stack>
     </Card>
   )