Merge pull request #94 from DoTheZ-Team/GLUE-304-QA-반영

GLUE 304 QA 반영
DoTheZ-Team · Jun 12, 2024 · 7f45722 · 7f45722
2 parents e4317b2 + 5e5e5d6
commit 7f45722
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 40 deletions.
diff --git a/src/app/blog/[blogId]/components/Albums/Slider.tsx b/src/app/blog/[blogId]/components/Albums/Slider.tsx
@@ -5,8 +5,15 @@ import Image from 'next/image';
 import { Button } from '@/components/Common';
 import { generateId } from '@/utils';
 import { useSlider } from './useSlider';
+import { useBlogPageContext } from '../BlogFetcher/BlogContext';
+
+export default function Slider() {
+  const { postItems } = useBlogPageContext();
+
+  const photos = postItems.flatMap(({ photoUrl }) =>
+    photoUrl ? photoUrl.filter(Boolean) : [],
+  );
 
-export default function Slider({ photos }: { photos: string[] }) {
   const { currentIndex, nextSlide, prevSlide } = useSlider(photos.length);
   const photoCount = photos.length;
   const slideWidth = 100 / photoCount;
@@ -30,11 +37,13 @@ export default function Slider({ photos }: { photos: string[] }) {
                 src={photo}
                 layout="fill"
                 objectFit="cover"
+                className="rounded-10"
               />
             </div>
           </div>
         ))}
       </div>
+
       {photoCount > 5 && (
         <div className="absolute inset-0 flex items-center justify-between px-4">
           <Button

diff --git a/src/app/blog/[blogId]/components/Albums/index.tsx b/src/app/blog/[blogId]/components/Albums/index.tsx
@@ -1,23 +1,17 @@
 'use client';
 
-import { useBlogPageContext } from '../BlogFetcher/BlogContext';
 import Slider from './Slider';
 
 export default function Albums() {
-  const { postItems } = useBlogPageContext();
-
-  const photos = postItems.flatMap(({ photo }) =>
-    photo ? photo.filter(Boolean) : [],
-  );
-
   return (
-    <article className="flex flex-col w-full gap-20 px-100 items-start">
+    <article className="flex flex-col w-full gap-20 px-100 items-start mt-30 overflow-scroll">
       <div className="flex flex-col  justify-center items-center">
         <div className="font-extrabold text-4xl">Albums</div>
         <p className="w-135 h-3 bg-primary mb-2" />
         <p className="w-145 h-3 bg-primary mb-2" />
       </div>
-      <Slider photos={photos} />
+
+      <Slider />
     </article>
   );
 }
diff --git a/src/app/blog/[blogId]/components/BlogFetcher/types.ts b/src/app/blog/[blogId]/components/BlogFetcher/types.ts
@@ -15,7 +15,7 @@ export interface BlogPageInfo {
       postId: number;
       title: string;
       preview: string;
-      photo: string[];
+      photoUrl: string[];
     },
   ];
   hashtagNames: string[];

diff --git a/src/app/blog/[blogId]/components/Board/index.tsx b/src/app/blog/[blogId]/components/Board/index.tsx
@@ -1,15 +1,18 @@
 'use client';
 
 import { useState } from 'react';
+import { AsyncBoundaryWithQuery } from '@/react-utils';
 import { BoardFetcher } from '../BlogFetcher';
 import BoardContent from './BoardContent';
 
 export default function Board({ blogId }: { blogId: number }) {
-  const [page, setPage] = useState<number>(1);
+  const [page, setPage] = useState<number>(0);
 
   return (
-    <BoardFetcher blogId={blogId} page={page}>
-      <BoardContent page={page} setPage={setPage} />
-    </BoardFetcher>
+    <AsyncBoundaryWithQuery>
+      <BoardFetcher blogId={blogId} page={page}>
+        <BoardContent page={page} setPage={setPage} />
+      </BoardFetcher>
+    </AsyncBoundaryWithQuery>
   );
 }
diff --git a/src/app/blog/[blogId]/components/StoryBox/index.tsx b/src/app/blog/[blogId]/components/StoryBox/index.tsx
@@ -3,12 +3,12 @@
 import { generateId } from '@/utils';
 import { useBlogPageContext } from '../BlogFetcher/BlogContext';
 
-export function Story({ title, content }: { title: string; content: string }) {
+export function Story({ title, preview }: { title: string; preview: string }) {
   return (
     <div className="h-140">
       <div className="h-30 text-xl font-bold ">{title}</div>
       <div className="my-5 h-100 white-space:normal break-words text-overflow">
-        {content}
+        {preview}
       </div>
     </div>
   );
@@ -26,9 +26,10 @@ export default function StoryBox() {
           <p className="w-140 h-3 bg-primary mb-2" />
         </div>
       </header>
+
       <article className="w-full grid grid-cols-2 gap-30 mt-40">
-        {postItems.map(({ preview, title }) => (
-          <Story key={generateId()} title={title} content={preview} />
+        {postItems.map((postItem) => (
+          <Story key={generateId()} {...postItem} />
         ))}
       </article>
     </section>

diff --git a/src/app/blog/[blogId]/page.tsx b/src/app/blog/[blogId]/page.tsx
@@ -30,6 +30,7 @@ export default function Page() {
             <ProfileBox />
             <Tags />
           </section>
+
           <section className="relative flex flex-col h-full w-full mr-50">
             <div className="absolute top-0 right-0 py-4">
               <div className="flex flex-row gap-10 items-center">
@@ -40,6 +41,7 @@ export default function Page() {
                     </Button>
                   </Link>
                 )}
+
                 <Button
                   className="bg-secondary"
                   onClick={() => setShowBoard((prev) => !prev)}

diff --git a/src/app/blog/[blogId]/post/[postId]/components/PostDetailHeader/index.tsx b/src/app/blog/[blogId]/post/[postId]/components/PostDetailHeader/index.tsx
@@ -50,7 +50,7 @@ export default function PostDetailHeader({ postId }: { postId: string }) {
         />
 
         <div className="flex items-center justify-between px-5 border-b-1 border-[#D3D2D1] py-10">
-          <div className="flex items-center gap-13">
+          <div className="flex items-center gap-13 relative">
             <Image
               loader={() => profile}
               src={profile}

diff --git a/src/app/search/components/BlogList/index.tsx b/src/app/search/components/BlogList/index.tsx
@@ -3,8 +3,9 @@ import BlogCard from './BlogCard';
 import { useSearchContext } from '../SearchFetcher/SearchContext';
 
 export default function BlogList() {
-  const { blogInfoItem } = useSearchContext();
-  const { blogInfoList } = blogInfoItem;
+  const {
+    blogInfoItem: { blogInfoList },
+  } = useSearchContext();
 
   return (
     <div>

diff --git a/src/app/subscribe/components/Feed/FeedContent.tsx b/src/app/subscribe/components/Feed/FeedContent.tsx
@@ -17,14 +17,14 @@ export default function FeedContent({
     <div>
       <div className="grid grid-cols-3 gap-40 py-50">
         {blogPostPreviews?.map(({ blogItem, postItem }) => {
-          const { postId, title, preview, photo } = postItem;
+          const { postId, title, profile } = postItem;
           return (
             <FeedBox
               postId={postId}
               key={postId}
               title={title}
-              preview={preview}
-              photo={photo}
+              preview={profile}
+              photo={blogItem.profile}
               blogItem={blogItem}
             />
           );

diff --git a/src/app/subscribe/components/SubscribeFetcher/types.ts b/src/app/subscribe/components/SubscribeFetcher/types.ts
@@ -18,7 +18,7 @@ export interface FollowPostResponse extends PaginationInfo {
       blogId: number;
       postId: number;
       title: string;
-      preview: string;
+      profile: string;
       photo: string;
     };
   }>;

diff --git a/src/components/Common/Pagination/usePagination.ts b/src/components/Common/Pagination/usePagination.ts
@@ -39,21 +39,23 @@ export function usePagination({ ...props }: UsePaginationProp) {
   const pageSize = 10;
   const Component = as || 'div';
 
-  const startPage = useMemo(
-    () => Math.floor((page - 1) / pageSize) * pageSize + 1,
-    [page, pageSize],
-  );
+  const startPage = useMemo(() => {
+    if (total <= 1) return 1;
+    return Math.floor((page - 1) / pageSize) * pageSize + 1;
+  }, [page, pageSize, total]);
 
-  const endPage = useMemo(
-    () => Math.min(startPage + pageSize - 1, total),
-    [total, pageSize, startPage],
-  );
+  const endPage = useMemo(() => {
+    if (total <= 1) return 1;
+    return Math.min(startPage + pageSize - 1, total);
+  }, [total, pageSize, startPage]);
 
-  const displayedPages = useMemo(
-    () =>
-      Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i),
-    [startPage, endPage],
-  );
+  const displayedPages = useMemo(() => {
+    if (total <= 1) return [1];
+    return Array.from(
+      { length: endPage - startPage + 1 },
+      (_, i) => startPage + i,
+    );
+  }, [startPage, endPage, total]);
 
   const getBaseProps = useCallback(
     () => ({

diff --git a/src/components/MouseImageGallery/index.tsx b/src/components/MouseImageGallery/index.tsx
@@ -103,7 +103,11 @@ export default function MouseImageGallery() {
             <LikeIcon color="#000" />
           </Link>
 
-          <Link href={`/blog/${blogId}`} className="flex gap-10 z-[100]">
+          <Link
+            href={`/blog/${blogId}`}
+            className="flex gap-10 z-[100]"
+            prefetch={false}
+          >
             <Mypage />
           </Link>