카드 정렬 및 디스커션 서스펜스 처리 (#750)

woowacourse-teams · Oct 24, 2024 · 7b5cc54 · 7b5cc54
1 parent 5532b0a
commit 7b5cc54
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 39 deletions.
diff --git a/frontend/src/components/DiscussionList/DiscussionListContent.tsx b/frontend/src/components/DiscussionList/DiscussionListContent.tsx
@@ -2,13 +2,29 @@ import * as S from './DiscussionList.styled';
 import DiscussionListItem from './DiscussionListItem';
 import { Link } from 'react-router-dom';
 import NoContentWithoutButton from '../common/NoContent/NoContentWithoutButton';
-import type { Discussion } from '@/types';
+import useDiscussions from '@/hooks/useDiscussions';
+import { HASHTAGS } from '@/constants/hashTags';
 
 interface DiscussionListContentProps {
-  discussions: Discussion[];
+  selectedMission?: string;
+  selectedHashTag?: string;
+  page: number;
+  onPageInfoUpdate?: (totalPage: number) => void;
 }
 
-export default function DiscussionListContent({ discussions }: DiscussionListContentProps) {
+export default function DiscussionListContent({
+  selectedMission,
+  selectedHashTag,
+  page,
+  onPageInfoUpdate,
+}: DiscussionListContentProps) {
+  const { discussions } = useDiscussions({
+    mission: selectedMission ?? HASHTAGS.all,
+    hashTag: selectedHashTag ?? HASHTAGS.all,
+    page,
+    onPageInfoUpdate,
+  });
+
   return (
     <S.ContentContainer>
       {discussions.length ? (

diff --git a/frontend/src/components/MissionList/MissionList.styled.ts b/frontend/src/components/MissionList/MissionList.styled.ts
@@ -30,7 +30,7 @@ const show = keyframes`
 export const MissionList = styled.ul`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 30rem));
-  justify-content: center;
+  justify-content: start;
   justify-items: center;
   row-gap: 3.6rem;
   column-gap: 2rem;

diff --git a/frontend/src/components/MissionList/index.tsx b/frontend/src/components/MissionList/index.tsx
@@ -10,25 +10,27 @@ interface MissionListProps {
 
 export default function MissionList({ missions }: MissionListProps) {
   return (
-    <S.MissionList>
+    <>
       {missions.length > 0 ? (
-        missions.map(({ id, thumbnail, title, hashTags, summary }) => (
-          <S.MissionItemWrapper key={id}>
-            <Link to={`/missions/${id}`} draggable={false}>
-              <InfoCard
-                id={id}
-                thumbnailSrc={thumbnail}
-                title={title}
-                hashTags={hashTags}
-                description={summary}
-                thumbnailFallbackText="Mission"
-              />
-            </Link>
-          </S.MissionItemWrapper>
-        ))
+        <S.MissionList>
+          {missions.map(({ id, thumbnail, title, hashTags, summary }) => (
+            <S.MissionItemWrapper key={id}>
+              <Link to={`/missions/${id}`} draggable={false}>
+                <InfoCard
+                  id={id}
+                  thumbnailSrc={thumbnail}
+                  title={title}
+                  hashTags={hashTags}
+                  description={summary}
+                  thumbnailFallbackText="Mission"
+                />
+              </Link>
+            </S.MissionItemWrapper>
+          ))}
+        </S.MissionList>
       ) : (
         <NoContentWithoutButton type="mission" />
       )}
-    </S.MissionList>
+    </>
   );
 }
diff --git a/frontend/src/components/SolutionList/SolutionList.styled.ts b/frontend/src/components/SolutionList/SolutionList.styled.ts
@@ -14,7 +14,7 @@ const show = keyframes`
 export const SolutionList = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 30rem));
-  justify-content: center;
+  justify-content: start;
   justify-items: center;
   row-gap: 3.6rem;
   column-gap: 2rem;

diff --git a/frontend/src/components/SolutionList/index.tsx b/frontend/src/components/SolutionList/index.tsx
@@ -54,9 +54,9 @@ export default function SolutionList({ selectedMission, selectedHashTag }: Solut
   return (
     <>
       <SpinnerSuspense>
-        <S.SolutionList>
-          {solutionSummaries.length > 0 ? (
-            solutionSummaries.map(({ id, thumbnail, title, description, hashTags }) => (
+        {solutionSummaries.length > 0 ? (
+          <S.SolutionList>
+            {solutionSummaries.map(({ id, thumbnail, title, description, hashTags }) => (
               <S.SolutionItemWrapper key={id}>
                 <Link to={`${ROUTES.solutions}/${id}`} draggable={false}>
                   <InfoCard
@@ -69,11 +69,11 @@ export default function SolutionList({ selectedMission, selectedHashTag }: Solut
                   />
                 </Link>
               </S.SolutionItemWrapper>
-            ))
-          ) : (
-            <NoContentWithoutButton type="solution" />
-          )}
-        </S.SolutionList>
+            ))}
+          </S.SolutionList>
+        ) : (
+          <NoContentWithoutButton type="solution" />
+        )}
       </SpinnerSuspense>
 
       {solutionSummaries.length > 0 && (

diff --git a/frontend/src/pages/DiscussionListPage/index.tsx b/frontend/src/pages/DiscussionListPage/index.tsx
@@ -10,7 +10,6 @@ import type { SelectedMissionType } from '@/types/mission';
 import { usePagination } from '@/hooks/usePagination';
 import { HASHTAGS } from '@/constants/hashTags';
 import PageButtons from '@/components/common/PageButtons';
-import useDiscussions from '@/hooks/useDiscussions';
 import SpinnerSuspense from '@/components/common/SpinnerSuspense';
 
 export default function DiscussionListPage() {
@@ -41,14 +40,6 @@ export default function DiscussionListPage() {
     prevHashTagRef.current = selectedHashTag;
   }, [selectedMission, selectedHashTag, handleInitializePage]);
 
-  const { discussions } = useDiscussions({
-    mission: selectedMission?.title ?? HASHTAGS.all,
-    hashTag: selectedHashTag?.name ?? HASHTAGS.all,
-    page: currentPage,
-    onPageInfoUpdate: (totalPagesFromServer: number) => {
-      setTotalPages(totalPagesFromServer);
-    },
-  });
   const { data: allHashTags } = useHashTags();
 
   const { missions } = useMissions();
@@ -72,7 +63,14 @@ export default function DiscussionListPage() {
         />
       </S.TagListWrapper>
       <SpinnerSuspense>
-        <DiscussionListContent discussions={discussions} />
+        <DiscussionListContent
+          selectedMission={selectedMission?.title ?? HASHTAGS.all}
+          selectedHashTag={selectedHashTag?.name ?? HASHTAGS.all}
+          page={currentPage}
+          onPageInfoUpdate={(totalPagesFromServer: number) => {
+            setTotalPages(totalPagesFromServer);
+          }}
+        />
       </SpinnerSuspense>
       {totalPages > 0 && (
         <PageButtons