✨ Feat(#243): 내 좋아요 및 인기 스테디 API 연동

src/components/Pagination/index.tsx

@@ -13,6 +13,7 @@ interface PaginationProps {
   type: string;
   totalPost: number;
   page: number;
+  like: boolean;
   setPage: React.Dispatch<React.SetStateAction<number>>;
   setPost: React.Dispatch<React.SetStateAction<Steadies>>;
 }
@@ -27,6 +28,7 @@ const Pagination = ({
   type,
   totalPost,
   page,
+  like,
   setPage,
   setPost,
 }: PaginationProps) => {
@@ -65,6 +67,7 @@ const Pagination = ({
     recruit: boolean,
     type: string,
     page: number,
+    like: boolean,
   ) => {
     const data = await getSteadies(
       stack,
@@ -75,6 +78,7 @@ const Pagination = ({
       recruit,
       type,
       page.toString(),
+      like,
     );
     setPost(data);
   };
@@ -89,6 +93,7 @@ const Pagination = ({
       recruit,
       type,
       page,
+      like,
     );
   }, [page]);
 

src/components/Posts/index.tsx

@@ -12,7 +12,7 @@ import Tag from "../_common/Tag";
 
 const Posts = ({ info }: { info: Steadies }) => {
   const [differences, setDifferences] = useState<
-    { days: number; hours: number }[]
+    { days: number; hours: number; minutes: number }[]
   >([]);
 
   useEffect(() => {
@@ -21,15 +21,24 @@ const Posts = ({ info }: { info: Steadies }) => {
       const calculatedDifferences = info?.content.map((serverDate) => {
         const serverDateObject = new Date(serverDate.createdAt);
         const timeDifference =
-          currentDate.valueOf() - serverDateObject.valueOf();
+          currentDate.valueOf() -
+          (serverDateObject.valueOf() + 1000 * 60 * 60 * 9);
         const daysDifference = Math.floor(
           timeDifference / (1000 * 60 * 60 * 24),
         );
         const hoursDifference = Math.floor(
           (timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
         );
+        const minutesDifference = Math.floor(
+          ((timeDifference % (1000 * 60 * 60 * 24)) % (1000 * 60 * 60)) /
+            (1000 * 60),
+        );
 
-        return { days: daysDifference, hours: hoursDifference };
+        return {
+          days: daysDifference,
+          hours: hoursDifference,
+          minutes: minutesDifference,
+        };
       });
 
       setDifferences(calculatedDifferences);
@@ -40,7 +49,7 @@ const Posts = ({ info }: { info: Steadies }) => {
 
   return (
     <div
-      className={`h-[1355px] w-full ${
+      className={`h-[1110px] w-full md:h-[1355px] ${
         info?.content.length === 0 && "flex items-center justify-center"
       }`}
     >
@@ -53,42 +62,44 @@ const Posts = ({ info }: { info: Steadies }) => {
             <div
               className={`${
                 item.status !== "RECRUITING" && "opacity-50"
-              } flex w-full items-center justify-between px-50 py-20 transition hover:scale-105 hover:bg-st-gray-50`}
+              } flex w-full items-center justify-between px-20 py-20 transition hover:scale-105 hover:bg-st-gray-50 md:px-50`}
             >
-              <div className="flex items-center gap-50">
+              <div className="flex items-center gap-20 md:gap-50">
                 {item.status === "RECRUITING" ? (
                   <Tag status="RECRUITING" />
                 ) : (
                   <Tag status="CLOSED" />
                 )}
 
                 <div className="flex flex-col gap-5">
-                  <div className="font-bold">
-                    {item.type === "STUDY" ? "📖스터디" : "🖥프로젝트"}
+                  <div className="text-10 font-bold md:text-15">
+                    {item.type === "STUDY" ? "📖 스터디" : "🖥️ 프로젝트"}
+                  </div>
+                  <div className="text-17 font-bold md:text-25">
+                    {item.title}
                   </div>
-                  <div className="text-25 font-bold">{item.title}</div>
                   <div className="flex gap-20">
-                    <div className="flex items-center justify-center gap-10 font-bold">
+                    <div className="flex items-center justify-center gap-10 text-10 font-bold md:text-15">
                       <Icon
                         name="person"
                         size={15}
                         color=""
                       />
                       {`${item.numberOfParticipants}/${item.participantLimit}`}
                     </div>
-                    <div className="font-bold text-st-gray-100">
+                    <div className="text-10 font-bold text-st-gray-100 md:text-15">
                       마감일 | {item.deadline}
                     </div>
                   </div>
                 </div>
               </div>
-              <div className="flex w-170 flex-col gap-30">
-                <div className="flex items-center gap-10 font-bold">
+              <div className="flex w-110 flex-col gap-30 md:w-170">
+                <div className="flex items-center gap-10 text-10 font-bold md:text-17">
                   {item.profileImage !== "new_profile_image.jpg" ? (
                     <Avatar
                       src={item.profileImage}
                       alt="profile"
-                      size={"3"}
+                      size={"2"}
                       radius="full"
                       className="cursor-pointer"
                       fallback={""}
@@ -108,25 +119,47 @@ const Posts = ({ info }: { info: Steadies }) => {
                     : item.nickname}
                 </div>
                 <div className="flex items-center justify-start gap-10">
-                  <div className="flex items-center justify-center gap-5 font-bold text-st-gray-100">
-                    <Icon
-                      name="eye"
-                      size={22}
-                      color="text-st-gray-100"
-                    />
-                    {item.viewCount}
+                  <div className="hidden md:flex md:gap-10">
+                    <div className="flex items-center justify-center gap-5 font-bold text-st-gray-100">
+                      <Icon
+                        name="eye"
+                        size={22}
+                        color="text-st-gray-100"
+                      />
+                      {item.viewCount}
+                    </div>
+                    <div className="flex items-center justify-center gap-5 font-bold text-st-gray-100">
+                      <Icon
+                        name="heart"
+                        size={20}
+                        color="text-st-gray-100"
+                      />
+                      {item.likeCount}
+                    </div>
                   </div>
-                  <div className="flex items-center justify-center gap-5 font-bold text-st-gray-100">
-                    <Icon
-                      name="heart"
-                      size={20}
-                      color="text-st-gray-100"
-                    />
-                    {item.likeCount}
+                  <div className="flex gap-10 md:hidden">
+                    <div className="flex items-center justify-center gap-5 text-10 font-bold text-st-gray-100">
+                      <Icon
+                        name="eye"
+                        size={15}
+                        color="text-st-gray-100"
+                      />
+                      {item.viewCount}
+                    </div>
+                    <div className="flex items-center justify-center gap-5 text-10 font-bold text-st-gray-100">
+                      <Icon
+                        name="heart"
+                        size={15}
+                        color="text-st-gray-100"
+                      />
+                      {item.likeCount}
+                    </div>
                   </div>
-                  <div className="text-15">
+                  <div className="text-10 md:text-15">
                     {differences && differences[index]?.days === 0
-                      ? `${differences && differences[index]?.hours}시간 전`
+                      ? differences && differences[index]?.hours === 0
+                        ? `${differences && differences[index]?.minutes}분 전`
+                        : `${differences && differences[index]?.hours}시간 전`
                       : `${differences && differences[index]?.days}일 전`}
                   </div>
                 </div>
@@ -138,8 +171,8 @@ const Posts = ({ info }: { info: Steadies }) => {
         <Image
           src={noResult}
           alt="no_result"
-          width={400}
-          height={280}
+          width={350}
+          height={230}
         />
       )}
     </div>

src/components/_common/AppBar/index.tsx

@@ -22,7 +22,7 @@ const AppBar = ({ className }: AppBarProps) => {
   return (
     <div
       className={cn(
-        "flex items-center justify-between py-30 md:w-5/6 xl:w-1120",
+        "flex w-5/6 items-center justify-between py-30 xl:w-1120",
         className,
       )}
     >

src/components/_common/Input/index.tsx

@@ -26,7 +26,7 @@ const Input = ({
     case "search-input":
       input = (
         <input
-          className="bg-input-bg h-40 w-full rounded-12 border-3 border-st-gray-100 px-10 py-20 text-center text-20 font-bold outline-none transition-all duration-300 focus:border-st-primary md:w-700"
+          className="bg-input-bg xs:350 h-40 w-full rounded-12 border-3 border-st-gray-100 px-10 py-20 text-center text-20 font-bold outline-none transition-all duration-300 focus:border-st-primary sm:w-500 md:w-700"
           type="text"
           placeholder="검색어를 입력해주세요."
           {...props}

src/components/_common/NavigationBar/index.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import Link from "next/link";
+
+interface NavigationBarProps {
+  path: string;
+}
+
+const NavigationBar = ({ path }: NavigationBarProps) => {
+  return (
+    <div className="fixed bottom-0 flex h-80 w-full items-center justify-around bg-st-white px-20 py-10 shadow-md shadow-md md:hidden">
+      <Link href={"/mysteady"}>
+        <div
+          className={`${
+            path === "/mysteady" && "text-st-primary"
+          } flex flex-col items-center justify-center font-bold`}
+        >
+          <svg
+            className={`${path === "/mysteady" ? "text-st-primary" : "black"}`}
+            width="35"
+            height="35"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.139 20.4866C13.5303 19.4663 17.3703 18.0379 21.5999 20.4866V5.18226M2.3999 4.904V20.4866C3.79121 19.4663 7.63121 18.0379 11.8608 20.4866V5.46052M2.3999 4.86475C3.79121 3.84446 7.63121 2.41605 11.8608 4.86475M12.139 4.86475C13.5303 3.84446 17.3703 2.41605 21.5999 4.86475"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          내 스테디
+        </div>
+      </Link>
+      <Link href={"/"}>
+        <div
+          className={`${
+            path === "/" && "text-st-primary"
+          } flex flex-col items-center justify-center font-bold`}
+        >
+          <svg
+            className={`${path === "/" ? "text-st-primary" : "black"}`}
+            width="35"
+            height="35"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9 21V14.1528C9 13.5226 9.53726 13.0116 10.2 13.0116H13.8C14.4627 13.0116 15 13.5226 15 14.1528V21M11.3046 3.21117L3.50457 8.48603C3.18802 8.7001 3 9.04665 3 9.41605V19.2882C3 20.2336 3.80589 21 4.8 21H19.2C20.1941 21 21 20.2336 21 19.2882V9.41605C21 9.04665 20.812 8.70011 20.4954 8.48603L12.6954 3.21117C12.2791 2.92961 11.7209 2.92961 11.3046 3.21117Z"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          홈
+        </div>
+      </Link>
+      <Link href={"/steady/create"}>
+        <div
+          className={`${
+            path === "/steady/create" && "text-st-primary"
+          } flex flex-col items-center justify-center font-bold`}
+        >
+          <svg
+            className={`${
+              path === "/steady/create" ? "text-st-primary" : "black"
+            }`}
+            width="35"
+            height="35"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.5364 19.2433L13.2787 18.4114C14.1894 17.3907 15.8235 17.5234 16.5576 18.6777C17.2415 19.753 18.7273 19.9568 19.6755 19.1054L21.021 17.8974M2.97876 19.4704L7.34474 18.5907C7.57652 18.544 7.78934 18.4298 7.95648 18.2626L17.7302 8.48356C18.1988 8.01471 18.1984 7.25472 17.7294 6.78626L15.659 4.71818C15.1902 4.24991 14.4306 4.25023 13.9622 4.71889L4.18752 14.4989C4.02071 14.6658 3.90681 14.8782 3.86006 15.1095L2.97876 19.4704Z"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          스테디 등록
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default NavigationBar;

src/components/_common/StickyButton/index.tsx

@@ -9,7 +9,7 @@ const StickyButton = ({ onClick }: StickyButtonProps) => {
   return (
     <button
       onClick={onClick}
-      className="mobile:bottom-30 flex w-160 items-center justify-center gap-10 rounded-full bg-st-white pb-5 pl-10 pr-2 pt-5 shadow-md"
+      className="flex w-160 items-center justify-center gap-10 rounded-full bg-st-white pb-5 pl-10 pr-2 pt-5 shadow-md"
     >
       <div className="text-lg font-bold">문의하기</div>
       <Image

src/components/_common/Tag/index.tsx

@@ -11,10 +11,10 @@ const STATUS = {
 const Tag = ({ status, ...props }: TagProps) => {
   return (
     <div
-      className="flex h-40 w-80 items-center justify-center rounded-50 bg-st-primary p-5"
+      className="flex h-30 w-50 items-center justify-center rounded-50 bg-st-primary p-5 md:h-40 md:w-80"
       {...props}
     >
-      <div className="max-mobile:text-13 flex h-full w-full items-center justify-center rounded-50 bg-st-white text-16 font-bold">
+      <div className="max-mobile:text-13 flex h-full w-full items-center justify-center rounded-50 bg-st-white text-10 font-bold md:text-16">
         {STATUS[status]}
       </div>
     </div>

src/services/steady/filterSteadies.ts

@@ -9,10 +9,11 @@ const steadyFilter = async (
   mode: string,
   status: boolean,
   deadline: boolean,
+  like: boolean,
 ): Promise<Steadies> => {
   try {
     const response = await axiosInstance.get(
-      `/api/v1/steadies/search?page=0&like=false${
+      `/api/v1/steadies/search?page=0&like=${like}${
         type !== "all" ? `&steadyType=${type}` : ""
       }${keyword !== "" ? `&keyword=${keyword}` : ""}${
         stack !== "" ? `&stack=${stack}` : ""

src/services/steady/getPopularSteadies.ts

@@ -0,0 +1,19 @@
+import { axiosInstance, isAbnormalCode } from "@/services";
+import type { Steadies } from "@/services/types";
+
+const getPopularSteadies = async (): Promise<Steadies> => {
+  try {
+    const response = await axiosInstance.get(
+      "/api/v1/steadies/search?page=0&like=false&criteria=viewCount",
+    );
+    if (isAbnormalCode(response.status)) {
+      throw new Error("Failed to fetch search steadies api!");
+    }
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export default getPopularSteadies;

src/services/steady/getSteadies.ts

@@ -10,10 +10,11 @@ const getSteadies = async (
   recruit: boolean,
   type: string,
   page: string,
+  like: boolean,
 ): Promise<Steadies> => {
   try {
     const response = await axiosInstance.get(
-      `/api/v1/steadies/search?page=${page}&like=false${
+      `/api/v1/steadies/search?page=${page}&like=${like}${
         type !== "all" ? `&steadyType=${type}` : ""
       }${keyword !== "" ? `&keyword=${keyword}` : ""}${
         stack !== "" ? `&stack=${stack}` : ""