Merge pull request #38 from feedback-forest/develop

[Release] Vercel 배포

next.config.mjs

@@ -12,6 +12,19 @@ const nextConfig = {
         config.resolve.alias.push({ name: "msw/node", alias: false });
       else config.resolve.alias["msw/node"] = false;
     }
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: "@svgr/webpack",
+          options: {
+            // 원하는 옵션 추가
+          },
+        },
+      ],
+    });
+
     return config;
   },
   images: {

package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query": "^5.55.4",
     "@types/lodash": "^4.17.10",
     "axios": "^1.7.7",

src/app/class/[id]/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { IconButton, Skeleton } from "@/shared/ui";
 import { Lecture, LecturePayload } from "@/entities/lecture/model/lecture";
 import {
   LectureDetail,
@@ -22,6 +23,7 @@ const LectureInfoPage = () => {
   const [lectureInfo, setLectureInfo] = useState<Lecture>();
   const [user, setUser] = useState<LecturePayload>();
   const [windowInnerWidth, setWindowInnerWidth] = useState<string>();
+  const [heart, setHeart] = useState<boolean>(false);
 
   const { id } = useParams();
 
@@ -54,6 +56,7 @@ const LectureInfoPage = () => {
         {
           onSuccess: (data) => {
             setLectureInfo(data.data.data);
+            setHeart(data.data.data.heart);
           },
         },
       );
@@ -106,7 +109,17 @@ const LectureInfoPage = () => {
     return (
       <div className="desktop:flex tablet:hidden mobile:hidden w-full">
         <div className="flex flex-row w-full desktop:px-[120px] desktop:pt-[80px] gap-10">
-          <LectureImageInfo lectureInfo={lectureInfo} isLoading={isLoading} />
+          {isLoading && (
+            <Skeleton className="desktop:w-[588px] tablet:w-[330px] desktop:h-[588px] tablet:h-[330px]" />
+          )}
+          {lectureInfo && (
+            <LectureImageInfo
+              lectureInfo={lectureInfo}
+              isLoading={isLoading}
+              heart={heart}
+              setHeart={setHeart}
+            />
+          )}
           <div className="flex flex-col gap-6">
             <LectureSummary lectureInfo={lectureInfo} isLoading={isLoading} />
             <LectureMinimap lectureInfo={lectureInfo} isLoading={isLoading} />
@@ -121,7 +134,17 @@ const LectureInfoPage = () => {
       <div className="desktop:hidden tablet:flex mobile:hidden">
         <div className="flex flex-col tablet:px-8 gap-[35px]">
           <div className="flex flex-row w-full gap-[31px]">
-            <LectureImageInfo lectureInfo={lectureInfo} isLoading={isLoading} />
+            {isLoading && (
+              <Skeleton className="desktop:w-[588px] tablet:w-[330px] desktop:h-[588px] tablet:h-[330px]" />
+            )}
+            {lectureInfo && (
+              <LectureImageInfo
+                lectureInfo={lectureInfo}
+                isLoading={isLoading}
+                heart={heart}
+                setHeart={setHeart}
+              />
+            )}
             <LectureSummary lectureInfo={lectureInfo} isLoading={isLoading} />
           </div>
           <div>
@@ -136,7 +159,17 @@ const LectureInfoPage = () => {
     return (
       <div className="desktop:hidden tablet:hidden mobile:flex">
         <div className="flex flex-col w-full mobile:px-6 gap-8">
-          <LectureImageInfo lectureInfo={lectureInfo} isLoading={isLoading} />
+          {isLoading && (
+            <Skeleton className="desktop:w-[588px] tablet:w-[330px] desktop:h-[588px] tablet:h-[330px]" />
+          )}
+          {lectureInfo && (
+            <LectureImageInfo
+              lectureInfo={lectureInfo}
+              isLoading={isLoading}
+              heart={heart}
+              setHeart={setHeart}
+            />
+          )}
           <LectureMinimap lectureInfo={lectureInfo} isLoading={isLoading} />
           <LectureSummary lectureInfo={lectureInfo} isLoading={isLoading} />
         </div>
@@ -158,7 +191,33 @@ const LectureInfoPage = () => {
       </div>
       {renderSummary()}
       <LectureDetail lectureInfo={lectureInfo} isLoading={isLoading} />
-      <LectureFooter lectureInfo={lectureInfo} isLoading={isLoading} />
+      {isLoading && (
+        <div className="flex flex-row items-center w-full desktop:h-[70px] tablet:h-[70px] mobile:h-[55px] desktop:px-[120px] bg-white fixed bottom-0 border-t border-custom-disabled z-10">
+          <div className="flex desktop:w-[98px] tablet:min-w-[98px] mobile:min-w-[76px] desktop:h-[69px] tablet:h-[69px] mobile:h-[54px] border-r border-custom-disabled justify-center items-center">
+            <Skeleton>
+              <IconButton
+                src="/icons/like.svg"
+                alt="heart"
+                iconWidth={32}
+                iconHeight={32}
+                loading={isLoading}
+              />
+            </Skeleton>
+          </div>
+          <div className="flex desktop:w-[190px] tablet:min-w-[190px] mobile:min-w-[111px] desktop:h-[69px] tablet:h-[69px] mobile:h-[54px] justify-center items-center text-xl font-bold">
+            <Skeleton className="w-[100px] h-[33px]" />
+          </div>
+          <Skeleton className="desktop:w-[917px] tablet:w-[560px] h-[56px]" />
+        </div>
+      )}
+      {lectureInfo && (
+        <LectureFooter
+          lectureInfo={lectureInfo}
+          isLoading={isLoading}
+          heart={heart}
+          setHeart={setHeart}
+        />
+      )}
     </div>
   );
 };

src/app/entire/page.tsx

@@ -21,7 +21,7 @@ const EntirePage = () => {
   const [lectureSize, setLectureSize] = useState<LectureSize>({
     page: 0,
     size: 9,
-    dist: 500,
+    // dist: 500,
   });
   const [hasNext, setHasNext] = useState(true);
 
@@ -41,7 +41,7 @@ const EntirePage = () => {
           params: {
             page: lectureSize.page,
             size: lectureSize.size,
-            dist: lectureSize.dist,
+            // dist: lectureSize.dist,
           },
           payload: { latitude: user.latitude, longitude: user.longitude },
         },

src/app/layout.tsx

@@ -37,7 +37,7 @@ export default function RootLayout({
         <Providers>
           <main className="flex w-full h-full flex-1">
             <div className="flex flex-col w-full h-full justify-start items-start relative">
-              <div className="flex flex-col w-full h-full justify-start items-start relative">
+              <div className="flex flex-col w-full h-full justify-start items-start relative max-w-[1440px] mx-auto my-0">
                 <Header />
                 <div className="flex flex-col w-full h-full justify-start items-start desktop:pt-[70px] tablet:pt-[70px] mobile:pt-12">
                   {children}

src/app/like/page.tsx

@@ -15,9 +15,9 @@ const LikePage = () => {
   const [lectureListData, setLectureListData] =
     useState<HeartsLectureListResDataInfo[]>();
   const [lectureSize, setLectureSize] = useState<LectureSize>({
-    page: 1,
-    size: 2,
-    dist: 500,
+    page: 0,
+    size: 9,
+    // dist: 500,
   });
   const [hasNext, setHasNext] = useState(true);
 
@@ -28,7 +28,7 @@ const LikePage = () => {
   const { data, isLoading, isSuccess } = useLikeLectureList({
     page: lectureSize.page,
     size: lectureSize.size,
-    dist: lectureSize.dist,
+    // dist: lectureSize.dist,
   });
 
   useEffect(() => {

src/app/page.tsx

@@ -23,6 +23,7 @@ import { useCarouselApi } from "@/shared/lib/useCarouselApi";
 import { useGeoLocation } from "@/shared/lib/useGeolocation";
 import useHomeLectureList from "@/entities/lecture/api/useHomeLectureList";
 import useLoginedUserStore from "@/shared/store/user";
+import usePostLikeLecture from "@/features/like/api/usePostLikeLecture";
 import { useRouter } from "next/navigation";
 
 const Home = () => {
@@ -32,7 +33,7 @@ const Home = () => {
   const [lectureSize, setLectureSize] = useState<LectureSize>({
     page: 0,
     size: 9,
-    dist: 500,
+    // dist: 500,
   });
   const [user, setUser] = useState<LoginUserInfo>({
     id: 0,
@@ -95,6 +96,7 @@ const Home = () => {
         };
       });
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [geolocation.curLocation]);
 
@@ -105,7 +107,7 @@ const Home = () => {
           params: {
             page: lectureSize.page,
             size: lectureSize.size,
-            dist: lectureSize.dist,
+            // dist: lectureSize.dist,
           },
           payload: {
             latitude: user.latitude,
@@ -158,7 +160,10 @@ const Home = () => {
             isPreviousIcon
           />
           <div className="flex flex-row items-center justify-center gap-[18px]">
-            <Progress value={calculateProgressBar()} />
+            <Progress
+              value={calculateProgressBar()}
+              className="h-[3px] rounded-none"
+            />
             <div className="flex flex-row items-center justify-center w-[60px] h-[38px] gap-1">
               <div className="text-custom-textBlackColor text-sm font-bold">{`${current}`}</div>
               <div className="text-custom-textDescriptionGrayColor text-sm font-bold">{`/ ${count}`}</div>
@@ -194,9 +199,6 @@ const Home = () => {
     );
   };
 
-  // TODO: 캐러셀
-  // TODO: 캐러셀 더 불러오기 상태관리
-
   return (
     <div className="flex w-full h-full flex-col 16">
       <Description />

src/app/signup/page.tsx

@@ -136,7 +136,7 @@ const SignUpPage = () => {
           )}
         />
         <Button
-          className="flex justify-center items-center desktop:w-[400px] tablet:w-[260px] mobile:w-[260px] h-14 bg-custom-purple rounded-sm"
+          className="flex justify-center items-center desktop:w-[400px] tablet:w-[260px] mobile:w-[260px] h-14 bg-custom-purple hover:bg-custom-hoverPurple rounded-sm"
           disabled={
             (!!errors.nickname && status !== "correct") || status === "default"
           } // 오류가 있을 경우 버튼 비활성화

src/app/user/[id]/page.tsx

@@ -2,7 +2,11 @@
 
 import { BackToPrevious, Button, InputLabel, UnifiedDialog } from "@/shared/ui";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
-import { LoginUserInfo, PatchUserAddress } from "@/entities/user/model/user";
+import {
+  LoginUserInfo,
+  PatchUserAddress,
+  userAgeMap,
+} from "@/entities/user/model/user";
 import { debounce, isEmpty } from "lodash";
 import { useEffect, useState } from "react";
 
@@ -191,7 +195,7 @@ const UserInfoPage = () => {
 
   const dialogContent = () => {
     return (
-      <div className="flex flex-col items-center justify-center h-[238px] gap-[69px]">
+      <div className="flex flex-col items-center justify-center gap-[69px]">
         <div className="text-xl font-semibold">로그아웃 하시겠어요?</div>
         <div className="flex flex-row gap-2.5">
           <div>
@@ -205,7 +209,7 @@ const UserInfoPage = () => {
           </div>
           <div>
             <Button
-              className="w-[125px] h-[52px] bg-custom-purple hover:bg-purple-950 text-base font-semibold"
+              className="w-[125px] h-[52px] bg-custom-purple hover:bg-custom-hoverPurple text-base font-semibold"
               onClick={handleLogout}
             >
               로그아웃
@@ -244,7 +248,7 @@ const UserInfoPage = () => {
                 </div>
                 {/* TODO: 연령대, 주소 조건문 처리 */}
                 <div className="desktop:h-[33px] tablet:h-[30px] mobile:h-[21px] desktop:text-[22px] tablet:text-[20px] mobile:text-sm text-custom-textGrayColor">
-                  {loginedUser.age_range}대, {loginedUser.location}
+                  {userAgeMap[loginedUser.age_range]}대, {loginedUser.location}
                 </div>
               </div>
             </div>
@@ -354,7 +358,7 @@ const UserInfoPage = () => {
                   disabled={
                     !isEmpty(errors.nickname) || !isEmpty(errors.address)
                   }
-                  className="desktop:w-[400px] tablet:w-[400px] mobile:w-[260px] h-14 font-semibold text-2xl bg-custom-purple hover:bg-purple-950 rounded-md"
+                  className="desktop:w-[400px] tablet:w-[400px] mobile:w-[260px] h-14 font-semibold text-2xl bg-custom-purple hover:bg-custom-hoverPurple rounded-md"
                 >
                   저장하기
                 </Button>

src/entities/lecture/api/index.ts

@@ -6,10 +6,13 @@ import {
 } from "@/entities/lecture/model/lecture";
 
 import apiRequest from "@/shared/api";
+import { getCookie } from "cookies-next";
 
 const BASE_PATH = "/api/lectures";
 const HOME_BASE_PATH = "/api/home";
 
+const accessToken = getCookie("accessToken");
+
 export const getLectureList = ({
   params,
   payload,
@@ -18,6 +21,9 @@ export const getLectureList = ({
   payload: GetLectureList["Request"]["body"]["payload"];
 }) =>
   apiRequest.post<GetLectureList["Response"]>(`${BASE_PATH}`, payload, {
+    headers: {
+      Authorization: accessToken ? `Bearer ${accessToken}` : "",
+    },
     params,
   });
 
@@ -32,6 +38,9 @@ export const getHomeLectureList = ({
     `${HOME_BASE_PATH}`,
     payload,
     {
+      headers: {
+        Authorization: accessToken ? `Bearer ${accessToken}` : "",
+      },
       params,
     },
   );
@@ -43,4 +52,12 @@ export const getLectureInfo = ({
   lectureId: number;
   payload: GetLecture["Request"]["body"];
 }) =>
-  apiRequest.post<GetLecture["Response"]>(`${BASE_PATH}/${lectureId}`, payload);
+  apiRequest.post<GetLecture["Response"]>(
+    `${BASE_PATH}/${lectureId}`,
+    payload,
+    {
+      headers: {
+        Authorization: accessToken ? `Bearer ${accessToken}` : "",
+      },
+    },
+  );

src/entities/lecture/api/useLectureInfo.ts

@@ -1,6 +1,6 @@
-import { GetLecture, GetLectureDto } from "../model/lecture";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
+import { GetLecture } from "../model/lecture";
 import { LECTURE_KEYS } from "@/shared/api/keyFactory";
 import { getLectureInfo } from ".";