diff --git a/next.config.mjs b/next.config.mjs index 83d63dd..2ab4c6a 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -12,6 +12,9 @@ const nextConfig = { return config; }, + images: { + domains: ["kr.object.ncloudstorage.com"], + }, }; export default withPlugins( diff --git a/src/app/news/[summaryId]/page.tsx b/src/app/news/[summaryId]/page.tsx deleted file mode 100644 index aa528dd..0000000 --- a/src/app/news/[summaryId]/page.tsx +++ /dev/null @@ -1,98 +0,0 @@ -"use client"; - -import { summaryData, summaryEduData } from "@/data/newsData"; -import SummaryCard from "@/components/news/SummaryCard"; -import { useParams, useRouter } from "next/navigation"; -import Topbar from "@/components/common/Topbar"; -import styled from "styled-components"; -import { theme } from "@/styles/theme"; -import Image from "next/image"; - -const SummaryDetail = () => { - const router = useRouter(); - const params = useParams(); - const summaryId = +params.summaryId; - const allSummaries = [...summaryData, ...summaryEduData]; - const summary = allSummaries.find( - (summary) => summary.summaryId === summaryId - ); - - const handleSend = () => { - router.push("/"); // 학교생활 > 가정통신문 더보기 > 회신 - }; - return ( - <> - {summary ? ( -
- - - - - 가정통신문 회신하기 - send - - - - - - - 가정통신문 원본 - - -
- ) : ( -
Not found Data
- )} - - ); -}; - -export default SummaryDetail; - -const Padding = styled.div` - padding: 20px; - background: ${theme.colors.white}; -`; - -const Top = styled.div` - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; -`; - -const SendBtn = styled.div` - color: ${theme.colors.primary500}; - ${(props) => props.theme.fonts.caption1_m}; - display: flex; - flex-direction: row; - gap: 8px; - cursor: pointer; -`; - -const Divider = styled.div` - width: 100%; - height: 12px; - background: ${theme.colors.b100}; -`; - -const DocsImage = styled.div` - padding: 20px; - color: ${theme.colors.b700}; - ${(props) => props.theme.fonts.body2_b}; - display: flex; - flex-direction: column; - gap: 8px; -`; - -const StyledImage = styled.div` - width: 100%; - height: 244px; - background: ${theme.colors.b100}; -`; diff --git a/src/app/news/eduOffice/[summaryId]/page.tsx b/src/app/news/eduOffice/[summaryId]/page.tsx new file mode 100644 index 0000000..88a6e97 --- /dev/null +++ b/src/app/news/eduOffice/[summaryId]/page.tsx @@ -0,0 +1,163 @@ +"use client"; + +import SummaryCard from "@/components/news/SummaryCard"; +import { useParams, useRouter } from "next/navigation"; +import Topbar from "@/components/common/Topbar"; +import styled from "styled-components"; +import { theme } from "@/styles/theme"; +import Image from "next/image"; +import { useEffect, useState } from "react"; +import Axios from "@/apis/axios"; + +interface Line { + keywords: string[]; + summaries: string[]; +} + +interface AnnouncementsProps { + type?: "school" | "eduOffice"; + summaryType?: "simple" | "detail"; + isNew: boolean; + category: string; + title: string; + uploadDate: string; + imageUrls?: string[]; + highlight?: Line; + summary?: string[]; + announcementId?: number; +} + +const SummaryDetail = () => { + const router = useRouter(); + const params = useParams(); + const summaryId = +params.summaryId; + + const [summaryData, setSummaryData] = useState(); + + useEffect(() => { + Axios.get(`/api/v1/announcements/education-offices/${summaryId}`) + .then((response) => { + const summaryData: AnnouncementsProps = response.data; + setSummaryData(summaryData); + console.log("교육청 상세목록:", response.data); + }) + .catch((error) => { + console.log(error); + }); + }, []); + + const handleSend = () => { + router.push("/school/homeGuide"); + }; + + return ( + + {summaryData ? ( +
+ + + + + 가정통신문 회신하기 + send + + + {summaryData && ( + + )} + + + + 가정통신문 원본 + {summaryData.imageUrls && + summaryData.imageUrls.map((data, index) => ( + + ))} + +
+ ) : ( +
Not found Data
+ )} + + ); +}; + +export default SummaryDetail; + +const Layout = styled.div` + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: scroll; + display: flex; + flex-direction: column; + position: relative; +`; + +const Padding = styled.div` + padding: 20px; + background: ${theme.colors.white}; +`; + +const Top = styled.div` + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +`; + +const SendBtn = styled.div` + color: ${theme.colors.primary500}; + ${(props) => props.theme.fonts.caption1_m}; + display: flex; + flex-direction: row; + gap: 8px; + cursor: pointer; +`; + +const Divider = styled.div` + width: 100%; + height: 12px; + background: ${theme.colors.b100}; +`; + +const DocsImage = styled.div` + width: 100%; + padding: 20px; + color: ${theme.colors.b700}; + ${(props) => props.theme.fonts.body2_b}; + display: flex; + flex-direction: column; + gap: 8px; + overflow: hidden; +`; + +const StyledImage = styled(Image)` + width: 440px; + height: 720px; + background: ${theme.colors.b100}; +`; diff --git a/src/app/news/eduOffice/layout.tsx b/src/app/news/eduOffice/layout.tsx deleted file mode 100644 index 6813961..0000000 --- a/src/app/news/eduOffice/layout.tsx +++ /dev/null @@ -1,103 +0,0 @@ -"use client"; - -import Tabbar from "@/components/common/Tabbar"; -import { theme } from "@/styles/theme"; -import { usePathname, useRouter } from "next/navigation"; -import styled from "styled-components"; - -const News = (props: any) => { - const router = useRouter(); - const pathname = usePathname(); - - const handleTabClick = (path: any) => { - router.push(path); - }; - - return ( - <> - - - 소식 - - handleTabClick("/news/school")} - selected={pathname === "/news/school"} - > - 학교 - - handleTabClick("/news/eduOffice")} - selected={pathname === "/news/eduOffice"} - > - 교육청 - - - - {props.children} - - - - ); -}; - -export default News; - -const Layout = styled.div` - width: 100%; - height: 100%; - overflow-x: hidden; - overflow-y: scroll; - display: flex; - flex-direction: column; - position: relative; -`; - -const Menu = styled.div` - display: flex; - align-items: center; - padding: 1.2rem 0; - gap: 0.8rem; - ${({ theme }) => theme.fonts.body1_b}; - color: ${({ theme }) => theme.colors.b800}; -`; - -const NewsHeader = styled.div` - display: flex; - flex-direction: column; - gap: 14px; - padding: 20px 20px 0px 20px; -`; - -const SubTab = styled.div` - display: flex; - flex-direction: row; - gap: 32px; - color: ${theme.colors.b400}; - text-align: center; - ${(props) => props.theme.fonts.body2_r}; -`; - -const TabItem = styled.div<{ selected: boolean }>` - position: relative; - cursor: pointer; - color: ${({ theme, selected }) => - selected ? theme.colors.primary600 : theme.colors.b400}; - font-weight: ${(selected) => (selected ? 700 : 400)}; - ${(props) => props.theme.fonts.body2_r}; - &:after { - content: ""; - position: absolute; - bottom: -4px; - left: 0; - width: 100%; - height: 4px; - border-radius: 12px; - background-color: ${theme.colors.primary600}; - opacity: ${(props) => (props.selected ? "100%" : "0")}; - transition: opacity 0.3s ease; - } - - &:hover { - color: ${theme.colors.primary600}; - } -`; diff --git a/src/app/news/eduOffice/page.tsx b/src/app/news/eduOffice/page.tsx index 1cabc3f..a598eb0 100644 --- a/src/app/news/eduOffice/page.tsx +++ b/src/app/news/eduOffice/page.tsx @@ -1,30 +1,83 @@ "use client"; +import Axios from "@/apis/axios"; +import Tabbar from "@/components/common/Tabbar"; import HomeGuide from "@/components/news/HomeGuide"; import Summary from "@/components/news/Summary"; -import { summaryEduData } from "@/data/newsData"; import { theme } from "@/styles/theme"; import Image from "next/image"; +import { usePathname, useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; import styled from "styled-components"; +interface AnnouncementsProps { + isNew: boolean; + category: string; + title: string; + uploadDate: string; + summary: string[]; + announcementId: number; +} + const EduOffice = () => { + const router = useRouter(); + const pathname = usePathname(); + + const [summaryData, setSummaryData] = useState(); + + useEffect(() => { + Axios.get(`/api/v1/announcements/education-offices?size=10&page=0`) + .then((response) => { + const summaryData = response.data.educationOfficeAnnouncementInfos; + setSummaryData(summaryData); + console.log("교육청 목록:", response.data); + }) + .catch((error) => { + console.log(error); + }); + }, []); + + const handleTabClick = (path: any) => { + router.push(path); + }; + return ( - - - - 기준 교육청 -
서울시 교육청
- - - - - - + <> + + + 소식 + + handleTabClick("/news/school")} + selected={pathname === "/news/school"} + > + 학교 + + handleTabClick("/news/eduOffice")} + selected={pathname === "/news/eduOffice"} + > + 교육청 + + + + + + 기준 교육청 +
서울시 교육청
+ + + + + {summaryData && } + + + ); }; @@ -41,6 +94,56 @@ const Layout = styled.div` position: relative; `; +const Menu = styled.div` + display: flex; + align-items: center; + padding: 1.2rem 0; + gap: 0.8rem; + ${({ theme }) => theme.fonts.body1_b}; + color: ${({ theme }) => theme.colors.b800}; +`; + +const NewsHeader = styled.div` + display: flex; + flex-direction: column; + gap: 14px; + padding: 20px 20px 0px 20px; +`; + +const SubTab = styled.div` + display: flex; + flex-direction: row; + gap: 32px; + color: ${theme.colors.b400}; + text-align: center; + ${(props) => props.theme.fonts.body2_r}; +`; + +const TabItem = styled.div<{ selected: boolean }>` + position: relative; + cursor: pointer; + color: ${({ theme, selected }) => + selected ? theme.colors.primary600 : theme.colors.b400}; + font-weight: ${(selected) => (selected ? 700 : 400)}; + ${(props) => props.theme.fonts.body2_r}; + &:after { + content: ""; + position: absolute; + bottom: -4px; + left: 0; + width: 100%; + height: 4px; + border-radius: 12px; + background-color: ${theme.colors.primary600}; + opacity: ${(props) => (props.selected ? "100%" : "0")}; + transition: opacity 0.3s ease; + } + + &:hover { + color: ${theme.colors.primary600}; + } +`; + const Background = styled.div` width: 100%; display: flex; diff --git a/src/app/news/school/[summaryId]/page.tsx b/src/app/news/school/[summaryId]/page.tsx new file mode 100644 index 0000000..e47c3b0 --- /dev/null +++ b/src/app/news/school/[summaryId]/page.tsx @@ -0,0 +1,166 @@ +"use client"; + +import SummaryCard from "@/components/news/SummaryCard"; +import { useParams, useRouter } from "next/navigation"; +import Topbar from "@/components/common/Topbar"; +import styled from "styled-components"; +import { theme } from "@/styles/theme"; +import Image from "next/image"; +import { useEffect, useState } from "react"; +import Axios from "@/apis/axios"; +import { NoData } from "@/components/home/Notification"; + +interface Line { + keywords: string[]; + summaries: string[]; +} + +interface AnnouncementsProps { + type?: "school" | "eduOffice"; + summaryType?: "simple" | "detail"; + isNew: boolean; + category: string; + title: string; + uploadDate: string; + imageUrls?: string[]; + highlight?: Line; + summary?: string[]; + announcementId?: number; +} + +const SummaryDetail = () => { + const router = useRouter(); + const params = useParams(); + const summaryId = +params.summaryId; + + const [summaryData, setSummaryData] = useState( + null + ); + + useEffect(() => { + Axios.get(`/api/v1/announcements/schools/${summaryId}`) + .then((response) => { + const summaryData = response.data; + setSummaryData(summaryData); + console.log("학교 상세목록:", response.data); + }) + .catch((error) => { + console.log(error); + }); + }, []); + + const handleSend = () => { + router.push("/school/homeGuide"); + }; + + return ( + + {summaryData ? ( +
+ + + + + 가정통신문 회신하기 + send + + + {summaryData && ( + + )} + + + + 가정통신문 원본 + {summaryData.imageUrls && + summaryData.imageUrls.map((data, index) => ( + + ))} + +
+ ) : ( + Not found Data + )} + + ); +}; + +export default SummaryDetail; + +const Layout = styled.div` + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: scroll; + display: flex; + flex-direction: column; + position: relative; +`; + +const Padding = styled.div` + padding: 20px; + background: ${theme.colors.white}; +`; + +const Top = styled.div` + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +`; + +const SendBtn = styled.div` + color: ${theme.colors.primary500}; + ${(props) => props.theme.fonts.caption1_m}; + display: flex; + flex-direction: row; + gap: 8px; + cursor: pointer; +`; + +const Divider = styled.div` + width: 100%; + height: 12px; + background: ${theme.colors.b100}; +`; + +const DocsImage = styled.div` + width: 100%; + padding: 20px; + color: ${theme.colors.b700}; + ${(props) => props.theme.fonts.body2_b}; + display: flex; + flex-direction: column; + gap: 8px; + overflow: hidden; +`; + +const StyledImage = styled(Image)` + width: 440px; + height: 720px; + background: ${theme.colors.b100}; +`; diff --git a/src/app/news/school/layout.tsx b/src/app/news/school/layout.tsx deleted file mode 100644 index 6813961..0000000 --- a/src/app/news/school/layout.tsx +++ /dev/null @@ -1,103 +0,0 @@ -"use client"; - -import Tabbar from "@/components/common/Tabbar"; -import { theme } from "@/styles/theme"; -import { usePathname, useRouter } from "next/navigation"; -import styled from "styled-components"; - -const News = (props: any) => { - const router = useRouter(); - const pathname = usePathname(); - - const handleTabClick = (path: any) => { - router.push(path); - }; - - return ( - <> - - - 소식 - - handleTabClick("/news/school")} - selected={pathname === "/news/school"} - > - 학교 - - handleTabClick("/news/eduOffice")} - selected={pathname === "/news/eduOffice"} - > - 교육청 - - - - {props.children} - - - - ); -}; - -export default News; - -const Layout = styled.div` - width: 100%; - height: 100%; - overflow-x: hidden; - overflow-y: scroll; - display: flex; - flex-direction: column; - position: relative; -`; - -const Menu = styled.div` - display: flex; - align-items: center; - padding: 1.2rem 0; - gap: 0.8rem; - ${({ theme }) => theme.fonts.body1_b}; - color: ${({ theme }) => theme.colors.b800}; -`; - -const NewsHeader = styled.div` - display: flex; - flex-direction: column; - gap: 14px; - padding: 20px 20px 0px 20px; -`; - -const SubTab = styled.div` - display: flex; - flex-direction: row; - gap: 32px; - color: ${theme.colors.b400}; - text-align: center; - ${(props) => props.theme.fonts.body2_r}; -`; - -const TabItem = styled.div<{ selected: boolean }>` - position: relative; - cursor: pointer; - color: ${({ theme, selected }) => - selected ? theme.colors.primary600 : theme.colors.b400}; - font-weight: ${(selected) => (selected ? 700 : 400)}; - ${(props) => props.theme.fonts.body2_r}; - &:after { - content: ""; - position: absolute; - bottom: -4px; - left: 0; - width: 100%; - height: 4px; - border-radius: 12px; - background-color: ${theme.colors.primary600}; - opacity: ${(props) => (props.selected ? "100%" : "0")}; - transition: opacity 0.3s ease; - } - - &:hover { - color: ${theme.colors.primary600}; - } -`; diff --git a/src/app/news/school/page.tsx b/src/app/news/school/page.tsx index 104acbc..97e2e38 100644 --- a/src/app/news/school/page.tsx +++ b/src/app/news/school/page.tsx @@ -1,30 +1,84 @@ "use client"; +import Axios from "@/apis/axios"; +import Tabbar from "@/components/common/Tabbar"; import HomeGuide from "@/components/news/HomeGuide"; import Summary from "@/components/news/Summary"; -import { summaryData } from "@/data/newsData"; import { theme } from "@/styles/theme"; import Image from "next/image"; +import { usePathname, useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; import styled from "styled-components"; +export interface AnnouncementsProps { + isNew: boolean; + category: string; + title: string; + uploadDate: string; + summary: string[]; + announcementId: number; +} + const School = () => { + const router = useRouter(); + const pathname = usePathname(); + + const [summaryData, setSummaryData] = useState([]); + + useEffect(() => { + Axios.get(`/api/v1/announcements/schools?size=10&page=0`) + .then((response) => { + const summaryData: AnnouncementsProps[] = + response.data.schoolAnnouncementInfos; + setSummaryData(summaryData); + console.log("소식 목록:", summaryData); + }) + .catch((error) => { + console.log(error); + }); + }, []); + + const handleTabClick = (path: any) => { + router.push(path); + }; + return ( - - - - 설정학교 -
서울미동초등학교
- - - - - - + <> + + + 소식 + + handleTabClick("/news/school")} + selected={pathname === "/news/school"} + > + 학교 + + handleTabClick("/news/eduOffice")} + selected={pathname === "/news/eduOffice"} + > + 교육청 + + + + + + 설정학교 +
서울미동초등학교
+ + + + + {summaryData && } + + + ); }; @@ -41,6 +95,56 @@ const Layout = styled.div` position: relative; `; +const Menu = styled.div` + display: flex; + align-items: center; + padding: 1.2rem 0; + gap: 0.8rem; + ${({ theme }) => theme.fonts.body1_b}; + color: ${({ theme }) => theme.colors.b800}; +`; + +const NewsHeader = styled.div` + display: flex; + flex-direction: column; + gap: 14px; + padding: 20px 20px 0px 20px; +`; + +const SubTab = styled.div` + display: flex; + flex-direction: row; + gap: 32px; + color: ${theme.colors.b400}; + text-align: center; + ${(props) => props.theme.fonts.body2_r}; +`; + +const TabItem = styled.div<{ selected: boolean }>` + position: relative; + cursor: pointer; + color: ${({ theme, selected }) => + selected ? theme.colors.primary600 : theme.colors.b400}; + font-weight: ${(selected) => (selected ? 700 : 400)}; + ${(props) => props.theme.fonts.body2_r}; + &:after { + content: ""; + position: absolute; + bottom: -4px; + left: 0; + width: 100%; + height: 4px; + border-radius: 12px; + background-color: ${theme.colors.primary600}; + opacity: ${(props) => (props.selected ? "100%" : "0")}; + transition: opacity 0.3s ease; + } + + &:hover { + color: ${theme.colors.primary600}; + } +`; + const Background = styled.div` width: 100%; display: flex; diff --git a/src/components/home/AddTodoPopup.tsx b/src/components/home/AddTodoPopup.tsx index 07fd3bb..081485f 100644 --- a/src/components/home/AddTodoPopup.tsx +++ b/src/components/home/AddTodoPopup.tsx @@ -15,13 +15,19 @@ export const categories = [ { value: "NONE", label: "없음" }, ]; +interface AddTodoPopupProps { + onClose: () => void; + setShowToast: React.Dispatch>; + render: boolean; + setRenderData: React.Dispatch>; +} + const AddTodoPopup = ({ onClose, setShowToast, -}: { - onClose: () => void; - setShowToast: React.Dispatch>; -}) => { + render, + setRenderData, +}: AddTodoPopupProps) => { const [todo, setTodo] = useState(""); const [category, setCategory] = useState(""); const [selectedDate, setSelectedDate] = useState(""); @@ -59,6 +65,7 @@ const AddTodoPopup = ({ // console.log("Add Todo Post Success:", response.data); onClose(); setShowToast(true); + setRenderData(!render); }) .catch((error) => { // console.error("Add Todo Post Error", error); diff --git a/src/components/home/Todo.tsx b/src/components/home/Todo.tsx index 743723b..92f40f1 100644 --- a/src/components/home/Todo.tsx +++ b/src/components/home/Todo.tsx @@ -216,6 +216,8 @@ const Todo = () => { )} {showToast && ( diff --git a/src/components/news/HomeGuide.tsx b/src/components/news/HomeGuide.tsx index 1083b92..e53aefb 100644 --- a/src/components/news/HomeGuide.tsx +++ b/src/components/news/HomeGuide.tsx @@ -72,7 +72,7 @@ const Em = styled.span` const TodoHomeLists = styled.div` width: 100%; - height: ${(props) => (props.expanded ? "auto" : "125px")}; + height: ${(props) => (props.expanded ? "auto" : "140px")}; overflow-y: hidden; display: flex; flex-direction: column; diff --git a/src/components/news/Summary.tsx b/src/components/news/Summary.tsx index 4391a8d..cb4f64c 100644 --- a/src/components/news/Summary.tsx +++ b/src/components/news/Summary.tsx @@ -1,9 +1,27 @@ import { theme } from "@/styles/theme"; import styled from "styled-components"; import SummaryCard from "./SummaryCard"; -import { SummaryCardProps } from "@/data/newsData"; -const Summary = ({ dummyData }: { dummyData: SummaryCardProps[] }) => { +export type summaryType = "simple" | "detail"; + +interface Line { + keywords: string[]; + summaries: string[]; +} + +interface AnnouncementsProps { + summaryType?: string; + isNew: boolean; + category: string; + title: string; + uploadDate: string; + imageUrls?: string[]; + highlight?: Line; + summary?: string[]; + announcementId?: number; +} + +const Summary = ({ dummyData }: { dummyData: AnnouncementsProps[] }) => { return ( @@ -14,11 +32,11 @@ const Summary = ({ dummyData }: { dummyData: SummaryCardProps[] }) => { isNew={data.isNew} category={data.category} title={data.title} - date={data.date} - look={data.look} - keyword={data.keyword} - sentence={data.sentence} - summaryId={data.summaryId} + uploadDate={data.uploadDate} + summary={data.summary} + highlight={data.highlight} + imageUrls={data.imageUrls} + announcementId={data.announcementId} /> ))} @@ -30,6 +48,7 @@ export default Summary; const Container = styled.div` width: 100%; + height: 100%; display: flex; flex-direction: column; padding: 26px 20px 29px 20px; diff --git a/src/components/news/SummaryCard.stories.tsx b/src/components/news/SummaryCard.stories.tsx index 609a18a..608ae9c 100644 --- a/src/components/news/SummaryCard.stories.tsx +++ b/src/components/news/SummaryCard.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryFn } from "@storybook/react"; -import SummaryCard, { SummaryCardProps } from "./SummaryCard"; +import SummaryCard from "./SummaryCard"; export default { title: "News/SummaryCard", @@ -11,7 +11,26 @@ export default { }, } as Meta; -const Template: StoryFn = (args) => ; +interface Line { + keywords: string[]; + summaries: string[]; +} + +interface AnnouncementsProps { + summaryType?: string; + isNew: boolean; + category: string; + title: string; + uploadDate: string; + imageUrls?: string[]; + highlight?: Line; + summary?: string[]; + announcementId?: number; +} + +const Template: StoryFn = (args) => ( + +); export const Simple = Template.bind({}); Simple.args = { @@ -19,11 +38,12 @@ Simple.args = { isNew: true, category: "Category", title: "Simple SummaryCard", - date: "date", - look: 123, - keyword: ["keyword1", "keyword2"], - sentence: ["sentence1", "sentence2", "sentence3"], - summaryId: 0, + uploadDate: "date", + highlight: { + keywords: ["키워드1", "키워드2"], + summaries: ["요약1", "요약2", "요약3"], + }, + announcementId: 0, }; export const Detail = Template.bind({}); @@ -32,9 +52,10 @@ Detail.args = { isNew: true, category: "Category", title: "Detail SummaryCard", - date: "date", - look: 123, - keyword: ["keyword1", "keyword2"], - sentence: ["sentence1", "sentence2", "sentence3"], - summaryId: 0, + uploadDate: "date", + highlight: { + keywords: ["키워드1", "키워드2"], + summaries: ["요약1", "요약2", "요약3"], + }, + announcementId: 0, }; diff --git a/src/components/news/SummaryCard.tsx b/src/components/news/SummaryCard.tsx index f996a41..fd06e5b 100644 --- a/src/components/news/SummaryCard.tsx +++ b/src/components/news/SummaryCard.tsx @@ -1,61 +1,64 @@ import ListNumber from "@/components/common/ListNumber"; import { theme } from "@/styles/theme"; import Image from "next/image"; -import { usePathname, useRouter } from "next/navigation"; +import { useRouter } from "next/navigation"; import styled from "styled-components"; -export type summaryType = "simple" | "detail"; +interface Line { + keywords: string[]; + summaries: string[]; +} -export interface SummaryCardProps { - summaryType?: string; +interface AnnouncementsProps { + type?: "school" | "eduOffice"; + summaryType?: "simple" | "detail"; isNew: boolean; category: string; title: string; - date: string; - look: number; - keyword: string[]; - sentence: string[]; - summaryId: number; + uploadDate: string; + imageUrls?: string[]; + highlight?: Line; + summary?: string[]; + announcementId?: number; } -const SummaryCard = ({ - summaryType = "simple", - isNew, - category, - title, - date, - look, - keyword, - sentence, - summaryId, -}: SummaryCardProps) => { + +const SummaryCard = (props: AnnouncementsProps) => { + const { + type = "school", + summaryType = "simple", + isNew, + category, + title, + uploadDate, + imageUrls, + highlight, + summary, + announcementId, + } = props; + const router = useRouter(); - const pathname = usePathname(); - const handleCardClick = () => { - router.push(`/news/${summaryId}`); + const handleCardClick = (announcementId: number) => { + router.push(`/news/${type}/${announcementId}`); }; return ( - + handleCardClick(announcementId) + : undefined + } + > - {summaryType === "simple" && ( - - look - {look}명이 봤어요 - - )} {title} - {date} + {uploadDate} {summaryType === "detail" && ( @@ -69,7 +72,7 @@ const SummaryCard = ({ <> - {keyword.map((data, index) => ( + {highlight?.keywords.map((data, index) => ( {data} ))} @@ -77,9 +80,15 @@ const SummaryCard = ({ )} - {sentence.map((data, index) => ( - - ))} + {summaryType === "simple" && + summary?.map((data, index) => ( + + ))} + + {summaryType === "detail" && + highlight?.summaries.map((data, index) => ( + + ))} );