🐛 fix: update qa bug fix

feedback-forest · Oct 18, 2024 · 8e1ec75 · 8e1ec75
1 parent d5532a6
commit 8e1ec75
Show file tree

Hide file tree

Showing 20 changed files with 251 additions and 155 deletions.
diff --git a/public/icons/sijak_footer_logo.svg b/public/icons/sijak_footer_logo.svg
diff --git a/public/images/sijak_footer_logo.png b/public/images/sijak_footer_logo.png
diff --git a/src/app/class/[id]/page.tsx b/src/app/class/[id]/page.tsx
@@ -217,17 +217,6 @@ const LectureInfoPage = () => {
           />
         </Link>
       </div>
-      {/* {isLoading && (
-        <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">
-            <Skeleton className="desktop:w-[588px] tablet:w-[330px] desktop:h-[588px] tablet:h-[330px]" />
-            <div className="flex flex-col gap-6">
-              <LectureSummary lectureInfo={lectureInfo} isLoading={isLoading} />
-              <LectureMinimap lectureInfo={lectureInfo} isLoading={isLoading} />
-            </div>
-          </div>
-        </div>
-      )} */}
       {renderSummary()}
       {lectureInfo && (
         <LectureDetail lectureInfo={lectureInfo} isLoading={isLoading} />

diff --git a/src/app/like/page.tsx b/src/app/like/page.tsx
@@ -49,11 +49,11 @@ const LikePage = () => {
     },
   });
 
-  const { ref, inView } = useInView({
-    threshold: 1.0, // 100% 보일 때 트리거
-  });
+  // const { ref, inView } = useInView({
+  //   threshold: 1.0, // 100% 보일 때 트리거
+  // });
 
-  const { data, isLoading, isSuccess, refetch } = useLikeLectureList({
+  const { data, isLoading, isSuccess } = useLikeLectureList({
     page: likeLectureParams.page,
     size: likeLectureParams.size,
     mode: likeLectureParams.mode,
@@ -95,6 +95,7 @@ const LikePage = () => {
   //     setHasNext(data.data.hasNext);
   //   }
   // }, [data, isSuccess]);
+
   useEffect(() => {
     if (isSuccess) {
       setLectureListData(data.data.data);
@@ -110,16 +111,16 @@ const LikePage = () => {
     }));
   }, [onlyCanApply]);
 
-  useEffect(() => {
-    if (inView && hasNext && !isLoading) {
-      setLikeLectureParams((prev) => {
-        return {
-          ...prev,
-          page: prev.page + 1,
-        };
-      });
-    }
-  }, [inView, hasNext, isLoading]);
+  // useEffect(() => {
+  //   if (inView && hasNext && !isLoading) {
+  //     setLikeLectureParams((prev) => {
+  //       return {
+  //         ...prev,
+  //         page: prev.page + 1,
+  //       };
+  //     });
+  //   }
+  // }, [inView, hasNext, isLoading]);
 
   const triggerItem = () => {
     return (
@@ -199,7 +200,8 @@ const LikePage = () => {
 
     return (
       <NotFoundLecture
-        description="아직 찜한 클래스가 없습니다. 마음에 드는 강좌를 찾아 찜해보세요!"
+        description="아직 찜한 클래스가 없습니다."
+        subDescription="마음에 드는 강좌를 찾아 찜해보세요!"
         isHideIcon
       />
     );
@@ -220,56 +222,54 @@ const LikePage = () => {
           </div>
         </div>
       </div>
-      <div className="flex flex-col desktop:pt-0 tablet:pt-10 pb-[209px] gap-20">
-        <div className="flex flex-col gap-4">
-          {!isLoading && lectureListData && lectureListData.length > 0 && (
-            <div className="flex justify-between desktop:px-[120px] tablet:px-8 mobile:px-6">
-              <div className="flex flex-row items-center gap-2">
-                <Controller
-                  name="onlyCanApply"
-                  control={control}
-                  rules={{ required: false }}
-                  render={({ field: { onChange, onBlur, value, ref } }) => (
-                    // FIXME: 로직 확인 필요 - 멘토님 도움 필요
-                    <Checkbox
-                      id="onlyCanApply"
-                      className="w-6 h-6"
-                      checked={value}
-                      onCheckedChange={(checked) => {
-                        onChange(checked);
-                        setLikeLectureParams((prev) => ({
-                          ...prev,
-                          mode: !!checked,
-                          page: 0,
-                        }));
-                      }}
-                      onBlur={onBlur}
-                      ref={ref}
-                    />
-                  )}
-                />
-                <Label
-                  htmlFor="onlyCanApply"
-                  className="text-base text-custom-textBlackColor"
-                >
-                  <div className="desktop:flex tablet:flex mobile:hidden">
-                    신청 가능한 클래스만 보기
-                  </div>
-                  <div className="desktop:hidden tablet:hidden mobile:flex">
-                    신청 가능만 보기
-                  </div>
-                </Label>
-              </div>
-              <UnifiedDialog
-                open={openDeleteLectureDialog}
-                setOpen={setOpenDeleteLectureDialog}
-                triggerItem={triggerItem()}
-                dialogTitle="로그아웃 다이얼로그"
-                dialogDescription="로그아웃 확인 다이얼로그"
-                dialogContent={dialogContent()}
+      <div className="flex flex-col w-full desktop:pt-0 tablet:pt-10 pb-[209px] gap-20">
+        <div className="flex  flex-col gap-4">
+          <div className="flex  justify-between desktop:px-[120px] tablet:px-8 mobile:px-6">
+            <div className="flex flex-row items-center gap-2">
+              <Controller
+                name="onlyCanApply"
+                control={control}
+                rules={{ required: false }}
+                render={({ field: { onChange, onBlur, value, ref } }) => (
+                  // FIXME: 로직 확인 필요 - 멘토님 도움 필요
+                  <Checkbox
+                    id="onlyCanApply"
+                    className="w-6 h-6"
+                    checked={value}
+                    onCheckedChange={(checked) => {
+                      onChange(checked);
+                      setLikeLectureParams((prev) => ({
+                        ...prev,
+                        mode: !!checked,
+                        page: 0,
+                      }));
+                    }}
+                    onBlur={onBlur}
+                    ref={ref}
+                  />
+                )}
               />
+              <Label
+                htmlFor="onlyCanApply"
+                className="text-base text-custom-textBlackColor"
+              >
+                <div className="desktop:flex tablet:flex mobile:hidden">
+                  신청 가능한 클래스만 보기
+                </div>
+                <div className="desktop:hidden tablet:hidden mobile:flex">
+                  신청 가능만 보기
+                </div>
+              </Label>
             </div>
-          )}
+            <UnifiedDialog
+              open={openDeleteLectureDialog}
+              setOpen={setOpenDeleteLectureDialog}
+              triggerItem={triggerItem()}
+              dialogTitle="로그아웃 다이얼로그"
+              dialogDescription="로그아웃 확인 다이얼로그"
+              dialogContent={dialogContent()}
+            />
+          </div>
           <div className="flex items-center justify-center desktop:px-[120px] tablet:px-8 mobile:px-6">
             {renderLikeCardContent()}
           </div>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -268,14 +268,14 @@ const Home = () => {
       );
     }
 
-    // if (pickLectureListData && pickLectureListData.length > 0) {
-    //   return (
-    //     <LectureList
-    //       lectureListData={homeLectureList?.data.pickClasses ?? []}
-    //       type="pickLecture"
-    //     />
-    //   );
-    // }
+    if (pickLectureListData && pickLectureListData.length > 0) {
+      return (
+        <LectureList
+          lectureListData={homeLectureList?.data.pickClasses ?? []}
+          type="pickLecture"
+        />
+      );
+    }
 
     return (
       <div className="flex w-full items-center justify-center">
@@ -364,7 +364,9 @@ const Home = () => {
               조회 수 많은 추천 클래스를 소개할게요!
             </div>
           </div>
-          <div className="w-full">{renderPickLectureList()}</div>
+          <div className="flex justify-center items-center">
+            {renderPickLectureList()}
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/entities/lecture/ui/LectureCard/HomeLectureCard/HomeLectureCard.tsx b/src/entities/lecture/ui/LectureCard/HomeLectureCard/HomeLectureCard.tsx
@@ -158,12 +158,12 @@ const HomeLectureCard = (props: HomeLectureCardProps) => {
 
   const dialogContent = () => {
     return (
-      <div className="flex flex-col gap-[55px] desktop:pt-[35px] tablet:pt-5 mobile:pt-5">
+      <div className="flex flex-col desktop:gap-[55px] tablet:gap-5 mobile:gap-5 desktop:pt-[35px] tablet:pt-5 mobile:pt-5">
         <div className="flex flex-col items-center justify-center">
-          <div className="font-bold text-[28px] content-center">
+          <div className="font-bold text-xl content-center">
             로그인이 필요한
           </div>
-          <div className="font-bold text-[28px] content-center">서비스에요</div>
+          <div className="font-bold text-xl content-center">서비스에요</div>
         </div>
         <div className="flex items-center justify-center">
           <Button

diff --git a/src/entities/lecture/ui/LectureCard/PickLectureCard/PickLectureCard.tsx b/src/entities/lecture/ui/LectureCard/PickLectureCard/PickLectureCard.tsx
@@ -154,12 +154,12 @@ const PickLectureCard = (props: PickLectureCardProps) => {
 
   const dialogContent = () => {
     return (
-      <div className="flex flex-col gap-[55px] desktop:pt-[35px] tablet:pt-5 mobile:pt-5">
+      <div className="flex flex-col desktop:gap-[55px] tablet:gap-5 mobile:gap-5 desktop:pt-[35px] tablet:pt-5 mobile:pt-5">
         <div className="flex flex-col items-center justify-center">
-          <div className="font-bold text-[28px] content-center">
+          <div className="font-bold text-xl content-center">
             로그인이 필요한
           </div>
-          <div className="font-bold text-[28px] content-center">서비스에요</div>
+          <div className="font-bold text-xl content-center">서비스에요</div>
         </div>
         <div className="flex items-center justify-center ">
           <Button

diff --git a/src/entities/lecture/ui/LectureFooter/LectureFooter.tsx b/src/entities/lecture/ui/LectureFooter/LectureFooter.tsx
@@ -112,7 +112,7 @@ const LectureFooter = ({
 
   const notFoundApplyPageDialogContent = () => {
     return (
-      <div className="flex flex-col items-center justify-center gap-[55px] desktop:pt-[35px] tablet:pt-5 mobile:pt-5">
+      <div className="flex flex-col items-center justify-center desktop:gap-[55px] tablet:gap-5 mobile:gap-5 desktop:pt-[35px] tablet:pt-5 mobile:pt-5">
         <div className="flex flex-col items-center justify-center">
           <div className="font-bold text-[28px]">신청 페이지를</div>
           <div className="font-bold text-[28px]">불러오지 못했어요</div>
@@ -131,12 +131,12 @@ const LectureFooter = ({
 
   const needLoginDialogContent = () => {
     return (
-      <div className="flex flex-col gap-[55px] desktop:pt-[35px] tablet:pt-5 mobile:pt-5">
+      <div className="flex flex-col desktop:gap-[55px] tablet:gap-5 mobile:gap-5 desktop:pt-[35px] tablet:pt-5 mobile:pt-5">
         <div className="flex flex-col items-center justify-center">
-          <div className="font-bold text-[28px] content-center">
+          <div className="font-bold text-xl content-center">
             로그인이 필요한
           </div>
-          <div className="font-bold text-[28px] content-center">서비스에요</div>
+          <div className="font-bold text-xl content-center">서비스에요</div>
         </div>
         <div className="flex items-center justify-center ">
           <Button

diff --git a/src/entities/lecture/ui/LectureImageInfo/LectureImageInfo.tsx b/src/entities/lecture/ui/LectureImageInfo/LectureImageInfo.tsx
@@ -129,12 +129,12 @@ const LectureImageInfo = ({
 
   const dialogContent = () => {
     return (
-      <div className="flex flex-col gap-[55px] desktop:pt-[35px] tablet:pt-5 mobile:pt-5">
+      <div className="flex flex-col desktop:gap-[55px] tablet:gap-5 mobile:gap-5 desktop:pt-[35px] tablet:pt-5 mobile:pt-5">
         <div className="flex flex-col items-center justify-center">
-          <div className="font-bold text-[28px] content-center">
+          <div className="font-bold text-xl content-center">
             로그인이 필요한
           </div>
-          <div className="font-bold text-[28px] content-center">서비스에요</div>
+          <div className="font-bold text-xl content-center">서비스에요</div>
         </div>
         <div className="flex items-center justify-center ">
           <Button

diff --git a/src/entities/lecture/ui/LectureSummary/LectureSummaryHeader/LectureSummaryHeader.tsx b/src/entities/lecture/ui/LectureSummary/LectureSummaryHeader/LectureSummaryHeader.tsx
@@ -65,7 +65,7 @@ const LectureSummaryHeader = ({
 
   return (
     <div className="flex flex-col w-full desktop:h-[76px] tablet:h-[57px] mobile:h-[54px] gap-4">
-      <div className="flex flex-row justify-between">
+      <div className="flex flex-row items-start justify-between">
         {isLoading && <Skeleton className="w-[430px] h-[42px]" />}
         {lectureInfo && (
           <div className=" flex justify-start items-center desktop:text-[26px] tablet:text-xl mobile: text-xl desktop:w-[520px] tablet:w-[300px] mobile:w-[268px] desktop:text-ellipsis desktop:leading-[34px] tablet:text-ellipsis tablet:whitespace-normal tablet:break-words mobile:whitespace-normal mobile:break-words desktop:line-clamp-2 tablet:line-clamp-2 mobile:line-clamp-2 desktop:h-[76px] tablet:h-[56px] mobile:h-[54px] font-bold">

diff --git a/src/entities/lecture/ui/NotFoundLecture/NotFoundLecture.tsx b/src/entities/lecture/ui/NotFoundLecture/NotFoundLecture.tsx
@@ -3,14 +3,16 @@ import Image from "next/image";
 interface NotFoundLectureProps {
   isHideIcon?: boolean;
   description?: string;
+  subDescription?: string;
 }
 
 const NotFoundLecture = ({
   isHideIcon = false,
   description = "이용에 불편을 드려 죄송합니다.",
+  subDescription = "",
 }: NotFoundLectureProps) => {
   return (
-    <div className="flex flex-col items-center justify-center desktop:w-full tablet:w-full mobile:w-[180px] h-full gap-[6px] pt-[173px]">
+    <div className="flex flex-col items-center justify-center desktop:w-full tablet:w-full mobile:w-[200px] h-full gap-[6px] pt-[173px]">
       <div className="">
         {!isHideIcon && (
           <Image
@@ -30,8 +32,13 @@ const NotFoundLecture = ({
             존재하지 않습니다.
           </div>
         </div>
-        <div className="desktop:text-lg tablet:text-sm mobile:text-sm text-custom-textGrayColor font-medium">
-          {description}
+        <div className="flex flex-col items-center justify-center">
+          <div className="desktop:text-lg tablet:text-sm mobile:text-sm text-custom-textGrayColor font-medium">
+            {description}
+          </div>
+          <div className="desktop:text-lg tablet:text-sm mobile:text-sm text-custom-textGrayColor font-medium">
+            {subDescription}
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/shared/ui/Chip/Chip.tsx b/src/shared/ui/Chip/Chip.tsx
@@ -21,7 +21,7 @@ const chipStatusStyle: Record<ChipStatus, string> = {
 
 const Chip = ({ content, handleClick, status, className }: ChipProps) => {
   const containerClassName = twMerge(
-    "flex justify-center items-center rounded-[100px] shadow-none",
+    "flex justify-center items-center text-center content-center rounded-[100px] shadow-none",
     className,
   );
   const activeChip = chipStatusStyle[status];

diff --git a/src/shared/ui/Footer/ExternalLinkList/ExternalLinkList.tsx b/src/shared/ui/Footer/ExternalLinkList/ExternalLinkList.tsx
@@ -0,0 +1,44 @@
+import ExternalLink, {
+  ExternalLinkProps,
+} from "../../ExternalLink/ExternalLink";
+
+export const externalLinkList: Array<ExternalLinkProps> = [
+  {
+    link: "https://www.notion.so/6d012c4a80f845eca3d98defc11d6d86?pvs=4",
+    content: "개인정보처리방침",
+  },
+  {
+    link: "https://www.notion.so/b942a4f9070442b7891cb136037ffa74?pvs=4",
+    content: "이용약관",
+  },
+  {
+    link: "https://www.notion.so/17e92e6c1188429cb17ad92d84f65103?pvs=4",
+    content: "위치정보 이용약관",
+  },
+  {
+    link: "https://www.notion.so/f34337d192d54efd818663cbeb2ad77c?pvs=4",
+    content: "서비스가이드",
+  },
+];
+
+const ExternalLinkList = () => {
+  return (
+    <div className="flex flex-row h-[21px] desktop:gap-5 tablet:gap-5 mobile:gap-[5px] text-custom-textDescriptionGrayColor text-sm font-medium">
+      {externalLinkList.map((externalLink, idx) => (
+        <div className="flex flex-row items-center h-full" key={idx}>
+          <div key={externalLink.content}>
+            <ExternalLink
+              link={externalLink.link}
+              content={externalLink.content}
+            />
+          </div>
+          {idx !== externalLinkList.length - 1 && (
+            <div className="h-[10px] border-custom-textDescriptionGrayColor text-base border-r desktop:pl-5 tablet:pl-5 mobile:pl-[5px] py-[5.5px]" />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ExternalLinkList;
diff --git a/src/shared/ui/Footer/ExternalLinkList/index.ts b/src/shared/ui/Footer/ExternalLinkList/index.ts
@@ -0,0 +1 @@
+export { default as ExternalLinkList } from "./ExternalLinkList";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as ExternalLinkList } from "./ExternalLinkList";