From 1bef147c2f2ad2730774e7f0e7ed51c25805175c Mon Sep 17 00:00:00 2001 From: ptyoiy <56474564+ptyoiy@users.noreply.github.com> Date: Thu, 2 May 2024 02:19:32 +0900 Subject: [PATCH] fix: notice page css --- src/components/BottomNavbar/styles.ts | 2 +- src/components/PaperBox/index.tsx | 15 ++++++- src/components/PaperBox/styles.ts | 12 ++++- src/components/PaperList/NoticeList/styles.ts | 4 +- src/components/PaperList/styles.ts | 2 - src/pages/LinktreePage/styles.ts | 11 +++-- src/pages/MyPage/styles.ts | 2 +- src/pages/NoticePage/index.tsx | 44 +++++++++---------- src/pages/NoticePage/styles.ts | 12 +++-- 9 files changed, 61 insertions(+), 43 deletions(-) diff --git a/src/components/BottomNavbar/styles.ts b/src/components/BottomNavbar/styles.ts index 228b23a..4af1fb7 100644 --- 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 index 977bad0..10a5082 100644 --- 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 ( - + 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 index 0adc358..457ed52 100644 --- 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)` +export const NoticeContent = styled(AlertContent) ` display: flex; justify-content: space-between; `; diff --git a/src/components/PaperList/styles.ts b/src/components/PaperList/styles.ts index 0b13810..1fba068 100644 --- 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 index 20895ba..396bfc0 100644 --- 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)` + Group: styled(Paper) ` 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 index a790a30..81add31 100644 --- 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 index 99240b2..dba8d28 100644 --- 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: () => , @@ -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(); - 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 ( - + {!isAlertsPending && alerts && (alerts.length === 0 ? ( @@ -92,19 +86,21 @@ const NoticePage = () => { } - - {!isNoticesPending && - currentNotices?.map((data) => ) - } + +
+ {!isNoticesPending && + currentNotices?.map((data) => ) + } +
setCurrentPage(page)} renderItem={(item) => ( - + )} - sx={{ justifyContent: "center" }} + style={{ justifyContent: "center", display: 'flex' }} /> diff --git a/src/pages/NoticePage/styles.ts b/src/pages/NoticePage/styles.ts index 52e6447..97abf4a 100644 --- 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;