[정성현] sprint10

src/components/pages/boards/BestItems.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { useMedia } from "@/hooks/useMedia";
 import { getArticles } from "@/apis/apis";
 import { GetArticlesParams, GetArticlesRes } from "@/apis/apis.type";
 import { useQuery } from "@/hooks/useQuery";
@@ -9,33 +9,36 @@ import styles from "./BestItems.module.css";
 const pageSizeTable = { PC: 3, TABLET: 2, MOBILE: 1 };
 
 export default function BestItems() {
-  const media = useMediaQuery();
-  const [paramObj, setParamObj] = useState<GetArticlesParams>({
-    page: 1,
-    pageSize: pageSizeTable[media],
-    orderBy: "like",
-  });
-  const { isLoading, error, data } = useQuery<
+  const media = useMedia();
+  const [paramObj, setParamObj] = useState<GetArticlesParams>();
+  const { isLoading, error, data, query } = useQuery<
     GetArticlesParams,
     GetArticlesRes
-  >(getArticles, paramObj);
+  >(getArticles);
 
   useEffect(() => {
-    setParamObj((prevObj) => ({
-      ...prevObj,
-      pageSize: pageSizeTable[media],
-    }));
+    if (!media) return;
+    setParamObj((prevObj) =>
+      !prevObj
+        ? { page: 1, pageSize: pageSizeTable[media], orderBy: "like" }
+        : { ...prevObj, pageSize: pageSizeTable[media] }
+    );
   }, [media]);
 
+  useEffect(() => {
+    if (!paramObj) return;
+    query(paramObj);
+  }, [query, paramObj]);
+
   return (
     <section className={styles.section}>
       <div className={styles.head}>
         <h2 className={styles.title}>베스트 게시글</h2>
       </div>
       {!isLoading && !error && data && (
         <div className={styles.body}>
-          {data.list.map((item) => (
-            <BestItem key={item.id} data={item} />
+          {data.list.map((article) => (
+            <BestItem key={article.id} article={article} />
           ))}
         </div>
       )}

src/components/pages/boards/componnets/BestItem.module.css

@@ -2,6 +2,39 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  padding: 0 24px 16px;
+  border-radius: 8px;
+  background-color: var(--gray-50);
+}
+
+.tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100px;
+  height: 30px;
+  border-radius: 0 0 15px 15px;
+  background-color: var(--blue-100);
+  font-size: var(--size-lg);
+  font-weight: var(--semibold);
+  color: white;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title {
+  font-size: var(--size-xl);
+  font-weight: var(--semibold);
+}
+@media (max-width: 1199px) {
+  .title {
+    font-size: var(--size-2gl);
+  }
 }
 
 .imageWrapper {
@@ -16,29 +49,30 @@
   object-fit: contain;
 }
 
-.content {
+.info {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.title {
+  align-items: center;
+  gap: 8px;
   font-size: var(--size-md);
 }
 
-.price {
-  font-size: var(--size-lg);
-  font-weight: bold;
+.nickname {
+  color: var(--gray-600);
 }
 
 .like {
+  flex-grow: 1;
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: var(--size-xs);
+  color: var(--gray-500);
 }
 
 .likeIcon {
   width: 16px;
   height: 16px;
 }
+
+.date {
+  color: var(--gray-400);
+}

src/components/pages/boards/componnets/BestItem.tsx

@@ -1,39 +1,43 @@
 import Link from "next/link";
 import Image from "next/image";
+import { ArticleProps } from "@/apis/apis.type";
+import medalIcon from "#/icons/medal.svg";
 import heartIcon from "#/icons/heart_inactive.svg";
 import styles from "./BestItem.module.css";
-import { ArticleProps } from "@/apis/apis.type";
 
 interface ItemProps {
-  data: ArticleProps;
+  article: ArticleProps;
 }
 
-export default function BestItem({ data }: ItemProps) {
-  const {
-    id,
-    title,
-    writer: { nickname },
-    updatedAt,
-    image,
-    likeCount,
-  } = data;
+export default function BestItem({ article }: ItemProps) {
+  const date = new Date(article.updatedAt).toLocaleDateString();
+
   return (
-    <Link className={styles.item} href={`/board/${id}`}>
-      <div className={styles.imageWrapper}>
-        <Image
-          className={styles.image}
-          src={image ? image : ""}
-          alt={"이미지"}
-          fill
-        />
+    <Link className={styles.item} href={`/board/${article.id}`}>
+      <div className={styles.tag}>
+        <Image src={medalIcon} alt="" />
+        Best
       </div>
       <div className={styles.content}>
-        <span className={styles.title}>{title}</span>
-        <span className={styles.price}>{updatedAt}</span>
+        <h3 className={styles.title}>{article.title}</h3>
+        <div className={styles.imageWrapper}>
+          {article.image ? (
+            <Image
+              className={styles.image}
+              src={article.image}
+              alt={"이미지"}
+              fill
+            />
+          ) : undefined}
+        </div>
+      </div>
+      <div className={styles.info}>
+        <span className={styles.nickname}>{article.writer.nickname}</span>
         <div className={styles.like}>
-          <Image className={styles.likeIcon} src={heartIcon} alt="좋아요 수" />
-          <span>{likeCount}</span>
+          <Image className={styles.likeIcon} src={heartIcon} alt="" />
+          {article.likeCount}
         </div>
+        <span className={styles.date}>{date}</span>
       </div>
     </Link>
   );

src/hooks/useMedia.ts

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { MediaContext } from "@/store/MediaContext";
+
+export function useMedia() {
+  const media = useContext(MediaContext);
+  return media;
+}

src/hooks/useQuery.ts

@@ -1,14 +1,13 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback } from "react";
 
 export function useQuery<Params extends object, Response extends object>(
-  fetchFunc: (paramObj: Params) => Promise<Response>,
-  paramObj: Params
+  fetchFunc: (paramObj: Params) => Promise<Response>
 ) {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<Error | null>(null);
   const [data, setData] = useState<Response | null>(null);
 
-  const wrappedFunc = useCallback(
+  const query = useCallback(
     async (paramObj: Params) => {
       try {
         setIsLoading(true);
@@ -27,11 +26,5 @@ export function useQuery<Params extends object, Response extends object>(
     [fetchFunc]
   );
 
-  const update = () => wrappedFunc(paramObj);
-
-  useEffect(() => {
-    wrappedFunc(paramObj);
-  }, [wrappedFunc, paramObj]);
-
-  return { isLoading, error, data, update };
+  return { isLoading, error, data, query };
 }

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import type { AppProps } from "next/app";
 import localFont from "next/font/local";
 import Head from "next/head";
+import { MediaProvider } from "@/store/MediaContext";
 import Layout from "@/components/layout/Layout";
 import "@/styles/reset.css";
 import "@/styles/variable.css";
@@ -23,13 +24,15 @@ export default function App({ Component, pageProps }: MyAppProps) {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
-      {Component.isNotLayout ? (
-        <Component {...pageProps} />
-      ) : (
-        <Layout>
+      <MediaProvider>
+        {Component.isNotLayout ? (
           <Component {...pageProps} />
-        </Layout>
-      )}
+        ) : (
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        )}
+      </MediaProvider>
     </>
   );
 }

src/store/MediaContext.tsx

@@ -0,0 +1,36 @@
+import { createContext, useState, useEffect, ReactNode } from "react";
+
+export type MediaType = "PC" | "TABLET" | "MOBILE";
+
+export const MediaContext = createContext<MediaType | undefined>(undefined);
+
+interface MediaProviderProps {
+  children: ReactNode;
+}
+
+export function MediaProvider({ children }: MediaProviderProps) {
+  const [media, setMedia] = useState<MediaType>();
+
+  useEffect(() => {
+    const checkMedia = (width: number): MediaType => {
+      if (width >= 1200) return "PC";
+      if (width >= 768) return "TABLET";
+      return "MOBILE";
+    };
+
+    const handleWindowResize = () => {
+      setMedia(checkMedia(window.innerWidth));
+    };
+
+    handleWindowResize();
+
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  return (
+    <MediaContext.Provider value={media}>{children}</MediaContext.Provider>
+  );
+}

src/styles/variable.css

@@ -44,4 +44,7 @@
   --line-md: 24px;
   --line-sm: 22px;
   --line-xs: 18px;
+
+  /* Font - Weight */
+  --semibold: 600;
 }