feat: grid 영역, 설명 모달 반응형 예외처리

g-magazine-hackaton · Dec 6, 2023 · 0475ba0 · 0475ba0
1 parent cda841d
commit 0475ba0
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 14 deletions.
diff --git a/src/components/ui/my-page/scrap-sheet.tsx b/src/components/ui/my-page/scrap-sheet.tsx
@@ -3,7 +3,6 @@ import React, { useEffect } from 'react';
 import Sheet from 'react-modal-sheet';
 import styled from '@emotion/styled';
 import Paper from '@mui/material/Paper';
-import Masonry from '@mui/lab/Masonry';
 import { useAtom } from 'jotai';
 import { Box } from '@mui/material';
 import { styled as muiStyled } from '@mui/material/styles';
@@ -43,10 +42,16 @@ const ImageWarp = styled.div`
   }
 `;
 
+const Masonry = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+`;
+
 const MasonrySection: React.FC<MasonrySectionProps> = ({ title, data }) => (
   <Box sx={{ width: '100%', margin: '0 4px' }}>
     <SectionTitle>나의 스크랩</SectionTitle>
-    <Masonry columns={3} spacing={1}>
+    <Masonry>
       {data.map((x: { photoUrls: string }, index: number) => (
         <Item key={index}>
           <ImageWarp>

diff --git a/src/pages/magazine/detail.tsx b/src/pages/magazine/detail.tsx
@@ -265,12 +265,6 @@ const MagazineDetail = () => {
           좋아요 <strong>{likedCnt}</strong>개
         </p>
         <p className="content">{magazineContent}</p>
-        <div className="comment-box">
-          <div className="comment">
-            <span className="comment-user">지후니</span>
-            <span className="comment-content">귀여워요 ^^</span>
-          </div>
-        </div>
         <p className="comment-text">댓글 13개 모두 보기</p>
       </div>
       <div css={commentWrapStyle}>

diff --git a/src/pages/rank.tsx b/src/pages/rank.tsx
@@ -218,7 +218,8 @@ const FilterUI = () => {
             top: '50%',
             left: '50%',
             transform: 'translate(-50%, -50%)',
-            width: 400,
+            maxWidth: 400,
+            width: '100%',
             bgcolor: 'background.paper',
             boxShadow: 24,
             p: 4,

diff --git a/src/pages/your-page.tsx b/src/pages/your-page.tsx
@@ -54,12 +54,9 @@ const GridContainer = styled.div`
 
 const GridItem = styled.div`
   width: 100%;
-  height: 132px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  height: 100%;
 
-  > .image {
+  .image {
     height: 100%;
     width: 100%;
   }