fix: notice page css

SSU-VISLAB · May 1, 2024 · 1bef147 · 1bef147
1 parent 1333cb2
commit 1bef147
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 43 deletions.
diff --git a/src/components/BottomNavbar/styles.ts b/src/components/BottomNavbar/styles.ts
@@ -47,7 +47,7 @@ export const MobileNavbar = {
     flex-direction: column;
     padding: 0.3rem 0 0 0;
     font-family: var(--font-바른히피);
-    font-size: 1rem;
+    font-size: 2vh;
     font-weight: 600;
     min-width: 32px;
     width: 100%;

diff --git a/src/components/PaperBox/index.tsx b/src/components/PaperBox/index.tsx
@@ -7,9 +7,20 @@ import {
   Title,
 } from "./styles";
 
-export function PaperBox({ color, header, children }: { color?: string, header: { title: string, icon: any }, children?}) {
+type PaperBoxProps = {
+  color?: string,
+  header: {
+    title: string,
+    icon: any
+  },
+  height?: string,
+  grid?: boolean
+  children?
+}
+
+export function PaperBox({ color, header, height, grid, children }: PaperBoxProps) {
   return (
-    <Group color={color} elevation={4}>
+    <Group color={color} elevation={4} height={height} grid={grid?.toString()}>
       <ItemHeader
         title={header.title}
         HeaderIcon={header.icon}

diff --git a/src/components/PaperBox/styles.ts b/src/components/PaperBox/styles.ts
@@ -5,15 +5,23 @@ type text = {
   padding?: boolean;
   bold?: boolean;
 };
+type Group = {
+  color?: string
+  height?: string
+  grid?: string
+}
 
 const styles = {
   Icon: styled.span``,
   Group: styled(Paper)`
     padding: 0.2em 0.5em 0 0.5em;
-    margin: .3vh 0;
-    background-color: ${(props: { color?: string }) => props.color || '#e0e0e0'};
+    margin: 1vh 0;
+    background-color: ${(props: Group) => props.color || '#e0e0e0'};
     border-radius: 0.3em;
     overflow-y: hidden;
+    height: ${(props: Group) => props.height};
+    display: ${(props: Group) => props.grid && 'grid'};
+    grid-template-rows: ${(props: Group) => props.grid && '1fr 8.6fr auto'};
   `,
   Header: styled.div`
     display: flex;

diff --git a/src/components/PaperList/NoticeList/styles.ts b/src/components/PaperList/NoticeList/styles.ts
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { AlertContent } from "../AlertList/styles";
-import { Meta as _Meta, Description as _Description, ContentGroup } from "../styles";
+import { ContentGroup, Description as _Description, Meta as _Meta } from "../styles";
 type GroupProps = {
   backgroundColor?: boolean;
   centered?: boolean;
@@ -15,7 +15,7 @@ export const NoticeContentGroup = styled(ContentGroup)`
   cursor: pointer;
 `;
 
-export const NoticeContent = styled(AlertContent)<GroupProps>`
+export const NoticeContent = styled(AlertContent) <GroupProps>`
   display: flex;
   justify-content: space-between;
 `;

diff --git a/src/components/PaperList/styles.ts b/src/components/PaperList/styles.ts
@@ -31,12 +31,10 @@ const PaperList = {
     font-size: 1rem;
   `,
   Icon: styled.span``,
-  // 카드 안 막대들 그룹(학력정보, 로그아웃, 계정탈퇴)
   ContentGroup: styled.div`
     display: flex;
     flex-direction: row;
     padding-bottom: 1.2vh;
-    
     cursor: pointer;
   `,
   ContentRow: styled.div`

diff --git a/src/pages/LinktreePage/styles.ts b/src/pages/LinktreePage/styles.ts
@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { Paper } from "@mui/material";
 
-export const AlertList = styled.div`
+export const AlertList = styled.main`
   padding: 0 2.5vw;
 `;
 
@@ -25,7 +25,7 @@ type GroupProps = {
 
 const AlertCard = {
   //전체 카드
-  Group: styled(Paper)<GroupProps>`
+  Group: styled(Paper) <GroupProps>`
     padding: 0.2em 0.5em 0 0.5em;
     margin: 1.5% 0;
     background-color: #feebb6;
@@ -57,7 +57,7 @@ const AlertCard = {
     padding: 0 0;
     ${(props) => props.between && "justify-content: space-between"};
   `,
-  Content: styled(Paper)<{ isHovered: boolean }>`
+  Content: styled(Paper) <{ isHovered: boolean }>`
     /* height: 2.2rem; */
     display: flex;
     padding: 0.8em 0.7em;
@@ -81,18 +81,17 @@ const AlertCard = {
     margin-top: 0.5vh;
     padding: ${(props: text) => (props.padding ? "0 0.5em" : "0 0.2em")};
     margin-bottom: 0.2em;
-    font-size: 2em;
+    font-size: 4vh;
     font-weight: ${(props: text) => (props.bold ? "bold" : "400")};
   `,
   Meta: styled.span`
-    font-size: 1.5em;
+    font-size: 2.3vh;
     font-weight: ${(props: text) => (props.bold ? "bold" : "400")};
     line-height: 1.5;
     /* 텍스트 자르기 스타일 추가 */
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    max-width: 90%;
   `,
 };
 

diff --git a/src/pages/MyPage/styles.ts b/src/pages/MyPage/styles.ts
@@ -3,7 +3,7 @@ import SubdirectoryArrowRightIcon from "@mui/icons-material/SubdirectoryArrowRig
 import { Checkbox as checkbox, Paper } from "@mui/material";
 
 export const Wrapper = styled.main`
-  padding: 1vh 2.5vw 0;
+  padding: 0 2.5vw;
   display: flex;
   flex-direction: column;
 `;

diff --git a/src/pages/NoticePage/index.tsx b/src/pages/NoticePage/index.tsx
@@ -1,19 +1,18 @@
-import AlertSrc from "../../assets/Icons/AlertIcon.png";
-import NoticeSrc from "../../assets/Icons/NoticeIcon.png";
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Pagination, PaginationItem } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
 import { getAlertsQuery } from "../../api/query/alert";
 import { getNoticesQuery } from "../../api/query/notice";
+import AlertSrc from "../../assets/Icons/AlertIcon.png";
+import NoticeSrc from "../../assets/Icons/NoticeIcon.png";
+import { PaperBox } from "../../components/PaperBox";
 import { AlertList } from "../../components/PaperList/AlertList";
+import { AlertContent, AlertFullArrow } from "../../components/PaperList/AlertList/styles";
 import { NoticeList } from "../../components/PaperList/NoticeList";
-import { PaperBox } from "../../components/PaperBox";
 import { ContentGroup, ContentRow } from "../../components/PaperList/styles";
-import { AlertContent, AlertFullArrow } from "../../components/PaperList/AlertList/styles";
-import { Icon, Meta, Wrapper, } from "./styles";
-import { Pagination, PaginationItem } from "@mui/material";
-import { useState, useEffect, useRef } from "react";
-import { Link } from "react-router-dom";
 import { AlertType } from "../../types";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { Icon, Meta, Wrapper } from "./styles";
 
 const AlertHeader = {
   icon: () => <Icon src={AlertSrc} alt="Alert" />,
@@ -30,20 +29,15 @@ const NoticePage = () => {
   const { data: alerts, isPending: isAlertsPending } = getAlertsQuery();
   const { data: notices, isPending: isNoticesPending } = getNoticesQuery();
   const [currentPage, setCurrentPage] = useState(1);
+  // TODO: alerts 개수에 따라 perPage 개수 조정하기
   const noticesPerPage = 4;
   const [currentNotices, setCurrentNotices] = useState([]);
   const pageRef = useRef<HTMLElement>();
-
   useEffect(() => {
     const indexOfLastNotice = currentPage * noticesPerPage;
     const indexOfFirstNotice = indexOfLastNotice - noticesPerPage;
     setCurrentNotices(notices?.slice(indexOfFirstNotice, indexOfLastNotice));
-  }, [currentPage, notices]);
-
-
-  useEffect(() => {
-    (pageRef.current.firstChild as HTMLLIElement).style.justifyContent = "center";
-  }, [])
+  }, [currentPage, notices, fullScreen]);
 
   useEffect(() => {
     let interval;
@@ -61,7 +55,7 @@ const NoticePage = () => {
 
   return (
     <Wrapper>
-      <PaperBox color={"#fce6e0"} header={AlertHeader}>
+      <PaperBox color={"#fce6e0"} header={AlertHeader} height='max-content'>
         {!isAlertsPending && alerts &&
           (alerts.length === 0 ? (
             <ContentGroup>
@@ -92,19 +86,21 @@ const NoticePage = () => {
         }
       </PaperBox>
 
-      <PaperBox color={"#E4F1FD"} header={NoticeHeader}>
-        {!isNoticesPending &&
-          currentNotices?.map((data) => <NoticeList key={data.id} notice={data} />)
-        }
+      <PaperBox color={"#E4F1FD"} header={NoticeHeader} grid>
+        <div>
+          {!isNoticesPending &&
+            currentNotices?.map((data) => <NoticeList key={data.id} notice={data} />)
+          }
+        </div>
         <Pagination
           ref={pageRef}
           count={Math.ceil(notices?.length / noticesPerPage)}
           page={currentPage}
           onChange={(event, page) => setCurrentPage(page)}
           renderItem={(item) => (
-            <PaginationItem {...item} />
+            <PaginationItem sx={{ scale: "1.2" }} {...item} />
           )}
-          sx={{ justifyContent: "center" }}
+          style={{ justifyContent: "center", display: 'flex' }}
         />
       </PaperBox>
     </Wrapper >

diff --git a/src/pages/NoticePage/styles.ts b/src/pages/NoticePage/styles.ts
@@ -1,11 +1,17 @@
 import styled from "@emotion/styled";
-import { Paper } from "@mui/material";
+import { PaperBox } from "../../components/PaperBox";
 
-export const Wrapper = styled.div`
-  max-width: 95vw;
+export const Wrapper = styled.main`
   padding: 0 2.5vw;
+  display: grid;
+  grid-template-rows: 1fr 5fr;
 `;
 
+export const NoticeBox = styled(PaperBox)`
+  display: grid;
+  grid-template-rows: 1fr 8fr auto;
+`
+
 type text = {
   padding?: boolean;
   bold?: boolean;