fix(BriefingCardDetail): Update design and fix mobile padding issues

- Adjust line height and font styles for content
- Change date formatting to 'YYYY.MM.DD' format
- Update padding values for mobile screen sizes
- Fix issue with uneven left and right padding in Header on mobile screens

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"
               >
                 <path
                   strokeLinecap="round"
@@ -58,10 +58,13 @@ const Header = () => {
               </svg>
             </button>
           </div>
-          <div onClick={() => navigate("/")} className="visible xs:invisible text-primaryBgColor font-bold text-lg cursor-pointer">
+          <div
+            onClick={() => navigate("/")}
+            className="visible xs:invisible text-primaryBgColor font-bold text-lg cursor-pointer"
+          >
             Briefing
           </div>
-          <div>
+          <div className="px-4">
             <BsPerson size={30} />
           </div>
         </div>

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;
-    }
-}
+  .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");
+}

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 (
-            <Helmet>
-                <title>{title}</title>
-                <meta name="title" property="og:title" content={title} />
-                <meta
-                    name="description"
-                    property="og:description"
-                    content={description}
-                />
-                <meta name="image" property="og:image" content={imageUrl} />
-                <meta name="url" property="og:url" content={url} />
-            </Helmet>
-        );
-    };
+    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 (
-        <div className=" h-screen flex flex-col bg-white">
-            {renderHelmet()}
-            <Header />
-            <div className="flex-1 flex justify-center">
-                <div className="xl:w-[1200px] flex-1 p-5 flex justify-center">
-                    {loading ? (
-                        <div className="sm:w-[768px]">
-                            <div className="flex flex-col border-b space-y-2 pb-2">
-                                <div className="flex">
-                                    <div className="px-2 py-1 rounded-full text-[#0072E7] bg-[#0072E7] bg-opacity-10">
-                                        {category.map((c) => c.eng === data.type ? `${c.kor}` : "")}{data.ranks}
-                                    </div>
-                                </div>
-
-                                <span className="font-bold text-3xl">
-                                    {data.title}
-                                </span>
-                                <span className="text-[#7C7C7C] text-sm">
-                                    {data.date} | {" "}{category.map((c) => c.eng === data.type ? `${c.kor}` : "")}
-                                    #{data.ranks} | GPT-3로 생성됨
-                                </span>
-                            </div>
-                            <div className="py-4 space-y-4 border-b">
-                                <div className="font-bold text-xl">
-                                    {data.subtitle}
-                                </div>
+      <Helmet>
+        <title>{title}</title>
+        <meta name="title" property="og:title" content={title} />
+        <meta
+          name="description"
+          property="og:description"
+          content={description}
+        />
+        <meta name="image" property="og:image" content={imageUrl} />
+        <meta name="url" property="og:url" content={url} />
+      </Helmet>
+    );
+  };
 
-                                <div className="text-[17px]">{data.content}</div>
-                            </div>
-                            <div className="space-y-3 py-3">
-                                <span className="text-xl font-bold ml-2">
-                                    관련 기사
-                                </span>
-                                <div className="space-y-3">
-                                    {data.articles.map((article) => (
-                                        <div
-                                            onClick={() =>
-                                                handleOpenNewTab(article.url)
-                                            }
-                                            className="border border-black flex flex-col py-1 px-2"
-                                        >
-                                            <span className="text-sm font-bold">
-                                                뉴스
-                                            </span>
-                                            <span className="text-[15px]">
-                                                {article.title}
-                                            </span>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    ) : (
-                        <div className="w-full h-full flex justify-center items-center">
-                            <span className="loading loading-spinner loading-lg text-primaryBgColor"></span>
-                        </div>
+  return (
+    <div className=" h-screen flex flex-col bg-white">
+      {renderHelmet()}
+      <Header />
+      <div className="flex-1 flex justify-center">
+        <div className="mx-auto w-[calc(100%-1rem)] xl:w-[1200px] p-2">
+          {loading ? (
+            <div className="">
+              <div className="flex flex-col border-b space-y-2 pb-2">
+                <div className="flex">
+                  <div className="px-[10px] py-[3px] rounded-full text-[14px] text-[#0072E7] bg-[#0072E7] bg-opacity-10">
+                    {category.map((c) =>
+                      c.eng === data.type ? `${c.kor} ` : ""
                     )}
+                    {data.ranks}
+                  </div>
+                </div>
+
+                <span className="font-semibold text-[26px]">{data.title}</span>
+                <span className="text-[#7C7C7C] text-[14px] font-normal">
+                  {formatDate(data.date)}{" "}
+                  {data.timeOfDay === "Morning" ? "아침" : "저녁"} | GPT-3로
+                  생성됨
+                </span>
+              </div>
+              <div className="py-4 space-y-4 border-b">
+                <div className="font-semibold text-xl leading-7">
+                  {data.subtitle}
                 </div>
-            </div>
 
-            <Footer />
+                <div className="text-[16px] leading-7">
+                  {/* {data.content} */}
+                  배터리 혁명은 현대 산업과 일상 생활에 혁명적인 변화를
+                  가져왔다. 전기 자동차 및 이동식 장치들은 더 큰 용량과 효율성을
+                  가진 배터리로 긴 주행거리와 높은 성능을 실현하였다. 또한 재생
+                  에너지 저장 시스템으로 활용되어 전력 그리드 안정성을
+                  증진시키고 친환경 에너지 전환을 촉진하고 있다. 연구의 진보로
+                  배터리 수명과 충전 시간이 개선되며, 이는 모바일 기기부터
+                  심지어 대규모 에너지 저장까지 다양한 분야에서 혁신을 이뤄내고
+                  있다.
+                </div>
+              </div>
+              <div className="space-y-3 py-3">
+                <span className="text-xl font-bold ml-2">관련 기사</span>
+                <div className="space-y-3">
+                  {data.articles.map((article) => (
+                    <div
+                      onClick={() => handleOpenNewTab(article.url)}
+                      className="border border-black flex flex-col py-1 px-2"
+                    >
+                      <span className="text-sm font-bold">뉴스</span>
+                      <span className="text-[15px]">{article.title}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="w-full h-full flex justify-center items-center">
+              <span className="loading loading-spinner loading-lg text-primaryBgColor"></span>
+            </div>
+          )}
         </div>
-    );
+      </div>
+
+      <Footer />
+    </div>
+  );
 };
 
 export default BriefingCardDetail;

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) => (
         <React.Fragment key={index}>
           {newsItem.date && index !== 0 && (
-            <div className="my-4 mx-auto flex justify-center sm:justify-start sm:px-16 py-2 text-base text-[#306DAB] w-[calc(100%-1rem)] rounded-lg xl:w-[1170px] bg-[#0072E721]">
+            <div className="my-4 mx-auto flex justify-center sm:justify-start sm:px-16 py-2 text-base text-[#306DAB] w-[calc(100%-1rem)] rounded-lg xl:w-[1200px] bg-[#0072E721]">
               {formatDateWithDay(new Date(newsItem.date))}{" "}
               {newsItem.timeOfDay === "Morning" ? "아침" : "저녁"} 브리핑
             </div>

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}`;
+};