대시보드 페이지 반응형 구현 (issue #705)

frontend/src/components/DashBoard/DashboardDiscussion/DashboardDiscussion.styled.ts

@@ -29,6 +29,13 @@ export const Image = styled.img`
 export const Container = styled.div`
   width: 67.4rem;
   height: 100%;
+
+  @media (max-width: 1024px) {
+  }
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
 `;
 
 export const DiscussionWrapper = styled(Link)`
@@ -41,6 +48,15 @@ export const DiscussionWrapper = styled(Link)`
   margin-top: 3rem;
   margin-bottom: 1.5rem;
   cursor: pointer;
+
+  @media (max-width: 1024px) {
+  }
+
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    height: 15rem;
+  }
 `;
 
 export const CommentCountWrapper = styled.div`
@@ -54,6 +70,13 @@ export const ImageCommentWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+
+  @media (max-width: 1024px) {
+  }
+
+  @media (max-width: 768px) {
+    justify-content: end;
+  }
 `;
 
 export const TextWrapper = styled.div`

frontend/src/components/DashBoard/DashboardDiscussion/index.tsx

@@ -17,7 +17,7 @@ export default function DashBoardDiscussionList() {
     hasNextGroup,
   } = usePagination();
 
-  const { discussionList } = useDashboardDiscussion({
+  const { discussionList, totalPage } = useDashboardDiscussion({
     page: currentPage,
     onPageInfoUpdate: (totalPagesFromServer) => {
       setTotalPages(totalPagesFromServer);
@@ -47,7 +47,7 @@ export default function DashBoardDiscussionList() {
         </S.Container>
       )}
 
-      {discussionList.length > 0 && (
+      {totalPage > 0 && (
         <PageButtons
           goToNextGroup={goToNextGroup}
           goToPage={goToPage}

frontend/src/components/DashBoard/DiscussionComment/index.tsx

@@ -16,7 +16,7 @@ export default function DiscussionCommentList() {
     hasPreviousGroup,
     hasNextGroup,
   } = usePagination();
-  const { discussionCommentList } = useDashboardDiscussionComment({
+  const { discussionCommentList, totalPage } = useDashboardDiscussionComment({
     page: currentPage,
     onPageInfoUpdate: (totalPagesFromServer) => {
       setTotalPages(totalPagesFromServer);
@@ -45,7 +45,7 @@ export default function DiscussionCommentList() {
         </S.Container>
       )}
 
-      {discussionCommentList.length > 0 && (
+      {totalPage > 0 && (
         <PageButtons
           goToNextGroup={goToNextGroup}
           goToPage={goToPage}

frontend/src/components/DashBoard/MyComments/MyCommentList.tsx

@@ -16,7 +16,7 @@ export default function MyCommentList() {
     hasPreviousGroup,
     hasNextGroup,
   } = usePagination();
-  const { myComments } = useMyComments({
+  const { myComments, totalPage } = useMyComments({
     page: currentPage,
     onPageInfoUpdate: (totalPagesFromServer) => {
       setTotalPages(totalPagesFromServer);
@@ -45,7 +45,7 @@ export default function MyCommentList() {
         </S.Container>
       )}
 
-      {myComments.length > 0 && (
+      {totalPage > 0 && (
         <PageButtons
           goToNextGroup={goToNextGroup}
           goToPage={goToPage}

frontend/src/components/DashBoard/MyComments/MyComments.styled.ts

@@ -4,6 +4,13 @@ import { Link } from 'react-router-dom';
 export const Container = styled.div`
   width: 67.4rem;
   height: 100%;
+
+  @media (max-width: 1024px) {
+  }
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
 `;
 
 export const CommentWrapper = styled(Link)`
@@ -29,6 +36,14 @@ export const TextWrapper = styled.div`
   display: flex;
   flex-direction: column;
   min-width: 54rem;
+
+  @media (max-width: 1024px) {
+  }
+
+  @media (max-width: 768px) {
+    width: 28rem;
+    min-width: 0;
+  }
 `;
 
 export const CommentText = styled.span`

frontend/src/components/Mission/Mission.styled.ts

@@ -9,6 +9,14 @@ export const MissionListContainer = styled.ul`
   margin-bottom: 10rem;
   padding-top: 3rem;
   width: 100%;
+
+  @media (max-width: 1024px) {
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(1, 1fr);
+    padding: 1.6rem;
+  }
 `;
 
 export const MissionItemContainer = styled.article`
@@ -17,6 +25,7 @@ export const MissionItemContainer = styled.article`
   border-radius: 1rem;
   border: 1px solid ${(props) => props.theme.colors.grey200};
   cursor: pointer;
+  margin: 0 auto;
 `;
 
 export const MissionThumbnailImg = styled.img`

frontend/src/index.tsx

@@ -283,40 +283,40 @@ export const router = createBrowserRouter(routes, {
   basename: ROUTES.main,
 });
 
-// async function enableMocking() {
-//   if (process.env.NODE_ENV !== 'development') {
-//     return;
-//   }
+async function enableMocking() {
+  if (process.env.NODE_ENV !== 'development') {
+    return;
+  }
 
-//   const { worker } = await import('./mocks/browser');
+  const { worker } = await import('./mocks/browser');
 
-//   // `worker.start()` returns a Promise that resolves
-//   // once the Service Worker is up and ready to intercept requests.
-//   return worker.start();
-// }
+  // `worker.start()` returns a Promise that resolves
+  // once the Service Worker is up and ready to intercept requests.
+  return worker.start();
+}
 
-// enableMocking().then(() => {
-//   root.render(
-//     <React.StrictMode>
-//       <QueryClientProvider client={queryClient}>
-//         <ThemeProvider theme={theme}>
-//           <ReactQueryDevtools initialIsOpen={false} />
-//           <GlobalStyle />
-//           <RouterProvider router={router} />
-//         </ThemeProvider>
-//       </QueryClientProvider>
-//     </React.StrictMode>,
-//   );
-// });
+enableMocking().then(() => {
+  root.render(
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider theme={theme}>
+          <ReactQueryDevtools initialIsOpen={false} />
+          <GlobalStyle />
+          <RouterProvider router={router} />
+        </ThemeProvider>
+      </QueryClientProvider>
+    </React.StrictMode>,
+  );
+});
 
-root.render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools />
-      <ThemeProvider theme={theme}>
-        <GlobalStyle />
-        <RouterProvider router={router} />
-      </ThemeProvider>
-    </QueryClientProvider>
-  </React.StrictMode>,
-);
+// root.render(
+//   <React.StrictMode>
+//     <QueryClientProvider client={queryClient}>
+//       <ReactQueryDevtools />
+//       <ThemeProvider theme={theme}>
+//         <GlobalStyle />
+//         <RouterProvider router={router} />
+//       </ThemeProvider>
+//     </QueryClientProvider>
+//   </React.StrictMode>,
+// );

frontend/src/pages/DashboardPage/DashBoardPageLayout/DashBoardPageLayout.styled.ts

@@ -7,6 +7,19 @@ export const Container = styled.div`
   margin-bottom: 10rem;
   padding: 3.5rem 0;
   width: 100rem;
+
+  @media (max-width: 1024px) {
+    width: 80rem;
+    padding: 3rem 0;
+    gap: 3rem;
+  }
+
+  @media (max-width: 768px) {
+    width: 90%;
+    padding: 2.5rem 0;
+    gap: 2rem;
+    flex-direction: column;
+  }
 `;
 
 export const ContentWrapper = styled.div`
@@ -18,13 +31,28 @@ export const ProfileAndCurrentPathWrapper = styled.div`
   flex-direction: column;
   min-width: 28rem;
   padding: 3rem;
+
+  @media (max-width: 1024px) {
+  }
+
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+  }
 `;
 
 export const ProfileWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 5rem;
+
+  @media (max-width: 1024px) {
+  }
+
+  @media (max-width: 768px) {
+    justify-content: center;
+  }
 `;
 
 export const ProfileImageWrapper = styled.div`
@@ -52,6 +80,15 @@ export const PathWrapper = styled.div`
   flex-direction: column;
   padding: 5rem 3.5rem;
   border-top: 1px solid ${(props) => props.theme.colors.grey200};
+
+  @media (max-width: 1024px) {
+  }
+
+  @media (max-width: 768px) {
+    border: none;
+    margin: 0 auto;
+    padding: 0;
+  }
 `;
 
 export const LinkWrapper = styled.div`