diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Black.woff b/breifing/src/assets/fonts/pretendard/Pretendard-Black.woff new file mode 100644 index 0000000..d07848c Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Black.woff differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Black.woff2 b/breifing/src/assets/fonts/pretendard/Pretendard-Black.woff2 new file mode 100644 index 0000000..eafe683 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Black.woff2 differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Bold.woff b/breifing/src/assets/fonts/pretendard/Pretendard-Bold.woff new file mode 100644 index 0000000..7837ae5 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Bold.woff differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Bold.woff2 b/breifing/src/assets/fonts/pretendard/Pretendard-Bold.woff2 new file mode 100644 index 0000000..4d40a1a Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Bold.woff2 differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-ExtraBold.woff b/breifing/src/assets/fonts/pretendard/Pretendard-ExtraBold.woff new file mode 100644 index 0000000..8058b76 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-ExtraBold.woff differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-ExtraBold.woff2 b/breifing/src/assets/fonts/pretendard/Pretendard-ExtraBold.woff2 new file mode 100644 index 0000000..dcd57e7 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-ExtraBold.woff2 differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-ExtraLight.woff b/breifing/src/assets/fonts/pretendard/Pretendard-ExtraLight.woff new file mode 100644 index 0000000..f9498d8 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-ExtraLight.woff differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-ExtraLight.woff2 b/breifing/src/assets/fonts/pretendard/Pretendard-ExtraLight.woff2 new file mode 100644 index 0000000..e510402 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-ExtraLight.woff2 differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Light.woff b/breifing/src/assets/fonts/pretendard/Pretendard-Light.woff new file mode 100644 index 0000000..2cad608 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Light.woff differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Light.woff2 b/breifing/src/assets/fonts/pretendard/Pretendard-Light.woff2 new file mode 100644 index 0000000..7f82fe8 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Light.woff2 differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Medium.woff b/breifing/src/assets/fonts/pretendard/Pretendard-Medium.woff new file mode 100644 index 0000000..5370409 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Medium.woff differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Medium.woff2 b/breifing/src/assets/fonts/pretendard/Pretendard-Medium.woff2 new file mode 100644 index 0000000..f8c743d Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Medium.woff2 differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Regular.woff b/breifing/src/assets/fonts/pretendard/Pretendard-Regular.woff new file mode 100644 index 0000000..e3b3a35 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Regular.woff differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Regular.woff2 b/breifing/src/assets/fonts/pretendard/Pretendard-Regular.woff2 new file mode 100644 index 0000000..a9f6231 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Regular.woff2 differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-SemiBold.woff b/breifing/src/assets/fonts/pretendard/Pretendard-SemiBold.woff new file mode 100644 index 0000000..682e7a4 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-SemiBold.woff differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-SemiBold.woff2 b/breifing/src/assets/fonts/pretendard/Pretendard-SemiBold.woff2 new file mode 100644 index 0000000..4c6a32d Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-SemiBold.woff2 differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Thin.woff b/breifing/src/assets/fonts/pretendard/Pretendard-Thin.woff new file mode 100644 index 0000000..d28e448 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Thin.woff differ diff --git a/breifing/src/assets/fonts/pretendard/Pretendard-Thin.woff2 b/breifing/src/assets/fonts/pretendard/Pretendard-Thin.woff2 new file mode 100644 index 0000000..6c9bc96 Binary files /dev/null and b/breifing/src/assets/fonts/pretendard/Pretendard-Thin.woff2 differ diff --git a/breifing/src/components/aboutComps/Header.js b/breifing/src/components/aboutComps/Header.js index a28f024..0408983 100644 --- a/breifing/src/components/aboutComps/Header.js +++ b/breifing/src/components/aboutComps/Header.js @@ -32,7 +32,7 @@ const Header = () => { viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" - className=" w-6 h-6" + className="w-6 h-6" > { -
navigate("/")} className="visible xs:invisible text-primaryBgColor font-bold text-lg cursor-pointer"> +
navigate("/")} + className="visible xs:invisible text-primaryBgColor font-bold text-lg cursor-pointer" + > Briefing
-
+
diff --git a/breifing/src/index.css b/breifing/src/index.css index e492e22..8391b59 100644 --- a/breifing/src/index.css +++ b/breifing/src/index.css @@ -14,33 +14,57 @@ code { body { margin: 0; - font-family: "product-sans"; + font-family: "Pretendard", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #ffffff; - color: black + color: black; } /* ManagingDatePicker */ .MuiOutlinedInput-notchedOutline { - border: none !important; + border: none !important; } .MuiInputBase-input { - color: white !important; - text-align: center !important; - font-weight: 400 !important; + color: white !important; + text-align: center !important; + font-weight: 400 !important; } /* 화면 너비가 375px 이상일 때 */ @media (min-width: 375px) { - .MuiInputBase-input { - font-size: 15px !important; - } + .MuiInputBase-input { + font-size: 15px !important; + } } /* 화면 너비가 810px 이상일 때 */ @media (min-width: 810px) { - .MuiInputBase-input { - font-size: 23px !important; - } -} \ No newline at end of file + .MuiInputBase-input { + font-size: 23px !important; + } +} + +@font-face { + font-family: Pretendard; + font-weight: 400; + src: local("Pretendard Regular"), + url("./assets/fonts/pretendard/Pretendard-Regular.woff") format("woff"), + url("./assets/fonts/pretendard/Pretendard-Regular.woff2") format("woff2"); +} + +@font-face { + font-family: Pretendard; + font-weight: 500; + src: local("Pretendard Medium"), + url("./assets/fonts/pretendard/Pretendard-Medium.woff") format("woff"), + url("./assets/fonts/pretendard/Pretendard-Medium.woff2") format("woff2"); +} + +@font-face { + font-family: Pretendard; + font-weight: 700; + src: local("Pretendard Bold"), + url("./assets/fonts/pretendard/Pretendard-Bold.woff") format("woff"), + url("./assets/fonts/pretendard/Pretendard-Bold.woff2") format("woff2"); +} diff --git a/breifing/src/pages/AboutPages/BriefingCardDetail.js b/breifing/src/pages/AboutPages/BriefingCardDetail.js index 18220b6..3ac701e 100644 --- a/breifing/src/pages/AboutPages/BriefingCardDetail.js +++ b/breifing/src/pages/AboutPages/BriefingCardDetail.js @@ -4,133 +4,136 @@ import Header from "../../components/aboutComps/Header"; import Footer from "../../components/aboutComps/Footer"; import axios from "axios"; import { Helmet } from "react-helmet"; +import { formatDate } from "../../utils/dateFormatter"; const category = [ - { - eng: "SOCIAL", - kor: "사회", - }, - { - eng: "GLOBAL", - kor: "글로벌", - }, - { - eng: "ECONOMY", - kor: "경제", - }, - { - eng: "SCIENCE", - kor: "과학", - }, -] + { + eng: "SOCIAL", + kor: "사회", + }, + { + eng: "GLOBAL", + kor: "글로벌", + }, + { + eng: "ECONOMY", + kor: "경제", + }, + { + eng: "SCIENCE", + kor: "과학", + }, +]; const BriefingCardDetail = () => { - const { id } = useParams(); - const [loading, setLoading] = useState(false); - const [data, setData] = useState(); + const { id } = useParams(); + const [loading, setLoading] = useState(false); + const [data, setData] = useState(); - const handleOpenNewTab = (url) => { - window.open(url); - }; - useEffect(() => { - axios - .get( - `${process.env.REACT_APP_BASE_URL}/v2/briefings/${id}` - ) - .then((res) => { - console.log(res); - setData(res.data.result); - setLoading(true); - }) - .catch((err) => console.log(err)); - }, [id]); + const handleOpenNewTab = (url) => { + window.open(url); + }; + useEffect(() => { + axios + .get(`${process.env.REACT_APP_BASE_URL}/v2/briefings/${id}`) + .then((res) => { + console.log(res); + setData(res.data.result); + setLoading(true); + }) + .catch((err) => console.log(err)); + }, [id]); - const renderHelmet = () => { - if (!data) return; + const renderHelmet = () => { + if (!data) return; - const title = `${data.title} | Briefing`; - const description = data.subtitle; - const imageUrl = `${process.env.REACT_APP_BASE_URL}/imgs/Briefing.png`; - const url = `${window.location.href}`; // 현재 페이지 URL - - return ( - - {title} - - - - - - ); - }; + const title = `${data.title} | Briefing`; + const description = data.subtitle; + const imageUrl = `${process.env.REACT_APP_BASE_URL}/imgs/Briefing.png`; + const url = `${window.location.href}`; // 현재 페이지 URL return ( -
- {renderHelmet()} -
-
-
- {loading ? ( -
-
-
-
- {category.map((c) => c.eng === data.type ? `${c.kor}` : "")}{data.ranks} -
-
- - - {data.title} - - - {data.date} | {" "}{category.map((c) => c.eng === data.type ? `${c.kor}` : "")} - #{data.ranks} | GPT-3로 생성됨 - -
-
-
- {data.subtitle} -
+ + {title} + + + + + + ); + }; -
{data.content}
-
-
- - 관련 기사 - -
- {data.articles.map((article) => ( -
- handleOpenNewTab(article.url) - } - className="border border-black flex flex-col py-1 px-2" - > - - 뉴스 - - - {article.title} - -
- ))} -
-
-
- ) : ( -
- -
+ return ( +
+ {renderHelmet()} +
+
+
+ {loading ? ( +
+
+
+
+ {category.map((c) => + c.eng === data.type ? `${c.kor} ` : "" )} + {data.ranks} +
+
+ + {data.title} + + {formatDate(data.date)}{" "} + {data.timeOfDay === "Morning" ? "아침" : "저녁"} | GPT-3로 + 생성됨 + +
+
+
+ {data.subtitle}
-
-
+
+ {/* {data.content} */} + 배터리 혁명은 현대 산업과 일상 생활에 혁명적인 변화를 + 가져왔다. 전기 자동차 및 이동식 장치들은 더 큰 용량과 효율성을 + 가진 배터리로 긴 주행거리와 높은 성능을 실현하였다. 또한 재생 + 에너지 저장 시스템으로 활용되어 전력 그리드 안정성을 + 증진시키고 친환경 에너지 전환을 촉진하고 있다. 연구의 진보로 + 배터리 수명과 충전 시간이 개선되며, 이는 모바일 기기부터 + 심지어 대규모 에너지 저장까지 다양한 분야에서 혁신을 이뤄내고 + 있다. +
+
+
+ 관련 기사 +
+ {data.articles.map((article) => ( +
handleOpenNewTab(article.url)} + className="border border-black flex flex-col py-1 px-2" + > + 뉴스 + {article.title} +
+ ))} +
+
+
+ ) : ( +
+ +
+ )}
- ); +
+ +
+
+ ); }; export default BriefingCardDetail; diff --git a/breifing/src/pages/Home.js b/breifing/src/pages/Home.js index 4a9e3d5..b3446ed 100644 --- a/breifing/src/pages/Home.js +++ b/breifing/src/pages/Home.js @@ -5,7 +5,7 @@ import { GlobalBox } from "../components/homeComps/GlobalBox"; import { EconomyBox } from "../components/homeComps/EconomyBox"; import { ScienceBox } from "../components/homeComps/ScienceBox"; import axios from "axios"; -import formatDateWithDay from "../utils/formatDateWithDay"; +import { formatDateWithDay } from "../utils/dateFormatter"; import { useIntersectionObserver } from "../hooks/useIntersectionObserver"; import { useRecoilValue } from "recoil"; import { categoryState } from "../recoil/atoms/categoryState"; @@ -85,7 +85,7 @@ const Home = () => { {news.map((newsItem, index) => ( {newsItem.date && index !== 0 && ( -
+
{formatDateWithDay(new Date(newsItem.date))}{" "} {newsItem.timeOfDay === "Morning" ? "아침" : "저녁"} 브리핑
diff --git a/breifing/src/utils/dateFormatter.js b/breifing/src/utils/dateFormatter.js new file mode 100644 index 0000000..86b8a0b --- /dev/null +++ b/breifing/src/utils/dateFormatter.js @@ -0,0 +1,16 @@ +// 날짜를 YYYY.MM.DD 형식과 요일로 변환하는 함수 +export const formatDateWithDay = (date) => { + const days = ["일", "월", "화", "수", "목", "금", "토"]; + const dayOfWeek = days[date.getDay()]; + const formattedDate = date.toISOString().split("T")[0].replace(/-/g, "."); + return `${formattedDate}(${dayOfWeek})`; +}; + +// 날짜를 YYYY-MM-DD 형식에서 YYYY.MM.DD 형식으로 변환하는 함수 +export const formatDate = (dateString) => { + const date = new Date(dateString); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, "0"); + const day = String(date.getDate()).padStart(2, "0"); + return `${year}.${month}.${day}`; +}; diff --git a/breifing/src/utils/formatDateWithDay.js b/breifing/src/utils/formatDateWithDay.js deleted file mode 100644 index 7ab735d..0000000 --- a/breifing/src/utils/formatDateWithDay.js +++ /dev/null @@ -1,9 +0,0 @@ -// 날짜를 YYYY.MM.DD 형식과 요일로 변환하는 함수 -const formatDateWithDay = (date) => { - const days = ["일", "월", "화", "수", "목", "금", "토"]; - const dayOfWeek = days[date.getDay()]; - const formattedDate = date.toISOString().split("T")[0].replace(/-/g, "."); - return `${formattedDate}(${dayOfWeek})`; -}; - -export default formatDateWithDay; diff --git a/breifing/tailwind.config.js b/breifing/tailwind.config.js index cdc4165..02d484f 100644 --- a/breifing/tailwind.config.js +++ b/breifing/tailwind.config.js @@ -1,64 +1,69 @@ +const { fontFamily } = require("@mui/system"); + module.exports = { - content: [ - "./src/**/*.{js,jsx,ts,tsx}", - "./src/components/**/*.{js,jsx,ts,tsx}", - ], - theme: { - extend: { - keyframes: { - "bottom-sheet-up": { - "0%": { transform: "translateY(420px)" }, - "100%": { transform: "translateY(0)" }, - }, - "bottom-sheet-down": { - "0%": { transform: "translateY(-80px)" }, - "100%": { transform: "translateY(0)" }, - }, - }, - fontSize: { - xs: [ - "10px", - { - lineHeight: "normal", - fontWeight: "400", - }, - ], - sm: [ - "13px", - { - lineHeight: "normal", - fontWeight: "400", - }, - ], - base: [ - "15px", - { - lineHeight: "normal", - fontWeight: "400", - }, - ], - lg: [ - "24px", - { - lineHeight: "normal", - fontWeight: "400", - }, - ], - }, - colors: { - primaryBgColor: "#4686CD", - primaryTextColor: "#134D80", - secondBgColor: "#F7F7F7", - secondTextColor: "#B6B6B6", - thirdTextColor: "#93A8D0", - }, + content: [ + "./src/**/*.{js,jsx,ts,tsx}", + "./src/components/**/*.{js,jsx,ts,tsx}", + ], + theme: { + extend: { + keyframes: { + "bottom-sheet-up": { + "0%": { transform: "translateY(420px)" }, + "100%": { transform: "translateY(0)" }, }, - screens: { - xs: "450px", - sm: "810px", // mobile, tablet screen size - lg: "1024px", // desktop screen size - xl: "1200px" + "bottom-sheet-down": { + "0%": { transform: "translateY(-80px)" }, + "100%": { transform: "translateY(0)" }, }, + }, + fontSize: { + xs: [ + "10px", + { + lineHeight: "normal", + fontWeight: "400", + }, + ], + sm: [ + "13px", + { + lineHeight: "normal", + fontWeight: "400", + }, + ], + base: [ + "15px", + { + lineHeight: "normal", + fontWeight: "400", + }, + ], + lg: [ + "24px", + { + lineHeight: "normal", + fontWeight: "400", + }, + ], + }, + colors: { + primaryBgColor: "#4686CD", + primaryTextColor: "#134D80", + secondBgColor: "#F7F7F7", + secondTextColor: "#B6B6B6", + thirdTextColor: "#93A8D0", + }, }, - plugins: [require("daisyui")], + screens: { + xs: "450px", + sm: "810px", // mobile, tablet screen size + lg: "1024px", // desktop screen size + xl: "1200px", + }, + fontFamily: { + pretendard: ["Pretendard", "sans-serif"], + }, + }, + plugins: [require("daisyui")], };