canary to master (v1.9.0)

package.json

@@ -42,14 +42,14 @@
     "@vercel/blob": "^0.23.2",
     "@vercel/postgres": "^0.9.0",
     "@vercel/speed-insights": "^1.0.9",
-    "axios": "^1.7.7",
+    "axios": "^1.8.2",
     "bcrypt": "^5.1.1",
     "camelcase-keys": "^9.1.3",
     "editorjs-alert": "^1.1.3",
     "editorjs-html": "^3.4.3",
     "jest": "^29.7.0",
     "lodash": "^4.17.21",
-    "next": "14.2.12",
+    "next": "14.2.26",
     "next-auth": "^5.0.0-beta.4",
     "next-pwa": "^5.6.0",
     "react": "^18",

public/ads.txt

@@ -0,0 +1 @@
+google.com, pub-5392145622568260, DIRECT, f08c47fec0942fa0

src/components/main/card/PostCard/RecentPostCard/index.tsx

@@ -9,22 +9,18 @@ import {
 } from "@fortawesome/free-regular-svg-icons";
 import { faHeart as solidHeart } from "@fortawesome/free-solid-svg-icons";
 import { useAppSelector } from "@/hooks/reduxHook";
-
 interface IProps {
   post: IPost;
 }
-
 const RecentPostCard = ({ post }: IProps) => {
   const user = useAppSelector((state) => state.user);
   const date = new Date(post.createdAt);
-
   const formattedDate = date.toLocaleDateString("ko-KR", {
     year: "numeric",
     month: "long",
     day: "numeric",
     timeZone: "UTC",
   });
-
   return (
     <Link
       className={`button-card-shadow ${styles.card_resent}`}
@@ -33,19 +29,21 @@ const RecentPostCard = ({ post }: IProps) => {
     >
       <h6>{post.title}</h6>
       <div className={styles.item_footer}>
-        {/* TODO: <p>tag</p> */}
         <caption>{formattedDate}</caption>
         <div className={styles.icon_container}>
-          <FontAwesomeIcon
-            icon={post.likes.includes(user.id) ? solidHeart : regularHeart}
-          />
-          {post.likes.length}
-          <FontAwesomeIcon icon={faEye} />
-          {post.views}
+          <div>
+            <FontAwesomeIcon
+              icon={post.likes.includes(user.id) ? solidHeart : regularHeart}
+            />
+            {post.likes.length}
+          </div>
+          <div>
+            <FontAwesomeIcon icon={faEye} />
+            {post.views}
+          </div>
         </div>
       </div>
     </Link>
   );
 };
-
 export default RecentPostCard;

src/components/main/card/PostCard/RecentPostCard/styles.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   padding: var(--card-padding);
   width: calc(var(--card-width) * 2 + var(--gap) * 1);
   height: calc(var(--card-height) * 4 + var(--gap) * 3);
@@ -23,7 +23,13 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: 4px;
-
+  gap: 8px;
   font-size: var(--caption);
+
+  div {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    width: 24px;
+  }
 }

src/components/main/card/PostCard/SkeletonPostCard/index.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import styles from "./styles.module.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye } from "@fortawesome/free-regular-svg-icons";
+import { faHeart } from "@fortawesome/free-regular-svg-icons";
+
+const SkeletonPostCard = () => {
+  const date = new Date();
+  const formattedDate = date.toLocaleDateString("ko-KR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: "UTC",
+  });
+
+  return (
+    <div className={`button-card-shadow ${styles.card_resent}`}>
+      <h6>Loading...</h6>
+      <div className={styles.item_footer}>
+        <caption>{formattedDate}</caption>
+        <div className={styles.icon_container}>
+          <div>
+            <FontAwesomeIcon icon={faHeart} />0
+          </div>
+          <div>
+            <FontAwesomeIcon icon={faEye} />0
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SkeletonPostCard;

src/components/main/card/PostCard/SkeletonPostCard/styles.module.scss

@@ -0,0 +1,35 @@
+.card_resent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: var(--card-padding);
+  width: calc(var(--card-width) * 2 + var(--gap) * 1);
+  height: calc(var(--card-height) * 4 + var(--gap) * 3);
+  background-color: var(--card-background-color);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+}
+
+.item_header,
+.item_footer {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.icon_container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--caption);
+
+  div {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    width: 24px;
+  }
+}

src/components/main/card/PostCard/index.ts

@@ -1,4 +1,5 @@
-import PopularPostCard from "./PopularPostCard";
-import RecentPostCard from "./RecentPostCard";
+import PopularPostCard from "@/components/main/card/PostCard/PopularPostCard";
+import RecentPostCard from "@/components/main/card/PostCard/RecentPostCard";
+import SkeletonPostCard from "@/components/main/card/PostCard/SkeletonPostCard";
 
-export { PopularPostCard, RecentPostCard };
+export { PopularPostCard, RecentPostCard, SkeletonPostCard };

src/components/main/card/index.ts

@@ -10,6 +10,7 @@ import { OauthCard } from "@/components/main/card/OauthCard";
 import {
   PopularPostCard,
   RecentPostCard,
+  SkeletonPostCard,
 } from "@/components/main/card/PostCard";
 import { ProfileCard } from "@/components/main/card/ProfileCard";
 import { RateCard } from "@/components/main/card/RateCard";
@@ -31,6 +32,7 @@ export {
   OauthCard,
   PopularPostCard,
   RecentPostCard,
+  SkeletonPostCard,
   ProfileCard,
   RateCard,
   RecentCard,