디스커션 작성하기 버튼 추가 (issue #497) (#502)

* fix: 디스커션 리스트 페이지 추가 및 index 페이지 import 정리 * feat: DiscussionList Header에 작성 버튼 추가 및 DiscussionListHeader 분리 - DiscussionList Header에 작성 버튼 추가 - DiscussionListHeader 분리 - DiscussionList/index.tsx를 DiscussionListContent로 변경 - DiscussionListContent의 스타일 요소 네이밍 수정 * fix: 디스커션 상세 페이지 작성하기 버튼 추가 * refactor: navigate 변수명 수정 * feat: 타이틀 클릭 시 리스트 이동하도록 추가 * fix: msw 해제
woowacourse-teams · Sep 23, 2024 · aa6b684 · aa6b684
1 parent 1052b42
commit aa6b684
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 68 deletions.
diff --git a/frontend/src/components/DiscussionList/DiscussionList.styled.ts b/frontend/src/components/DiscussionList/DiscussionList.styled.ts
@@ -1,13 +1,15 @@
 import styled from 'styled-components';
 import CommentCount from '@/assets/images/comment-count.svg';
 
-export const DiscussionListContainer = styled.div`
+// Content
+
+export const ContentContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2.5rem;
 `;
 
-export const DiscussionItemContainer = styled.div`
+export const ItemContainer = styled.div`
   background-color: ${(props) => props.theme.colors.white};
 
   display: flex;
@@ -48,7 +50,7 @@ export const WriterImg = styled.img`
   max-height: 4.2rem;
 `;
 
-export const DiscussionRight = styled.div`
+export const ItemRight = styled.div`
   display: flex;
   align-items: center;
   gap: 1.7rem;
@@ -67,3 +69,15 @@ export const CommentCountIcon = styled(CommentCount)`
   width: 1.4rem;
   height: 1.4rem;
 `;
+
+// Header
+
+export const HeaderTitleWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const HeaderTitle = styled.h1`
+  ${(props) => props.theme.font.heading1}
+`;
diff --git a/...d/src/components/DiscussionList/index.tsx → .../DiscussionList/DiscussionListContent.tsx b/...d/src/components/DiscussionList/index.tsx → .../DiscussionList/DiscussionListContent.tsx
@@ -3,13 +3,13 @@ import DiscussionListItem from './DiscussionListItem';
 import { Link } from 'react-router-dom';
 import type { Discussion } from '@/types';
 
-interface DiscussionListProps {
+interface DiscussionListContentProps {
   discussions: Discussion[];
 }
 
-export default function DiscussionList({ discussions }: DiscussionListProps) {
+export default function DiscussionListContent({ discussions }: DiscussionListContentProps) {
   return (
-    <S.DiscussionListContainer>
+    <S.ContentContainer>
       {discussions.map((discussion) => (
         <Link key={discussion.id} to={`/discussions/${discussion.id}`}>
           <DiscussionListItem
@@ -21,6 +21,6 @@ export default function DiscussionList({ discussions }: DiscussionListProps) {
           />
         </Link>
       ))}
-    </S.DiscussionListContainer>
+    </S.ContentContainer>
   );
 }
diff --git a/frontend/src/components/DiscussionList/DiscussionListHeader.tsx b/frontend/src/components/DiscussionList/DiscussionListHeader.tsx
@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router-dom';
+import Button from '../common/Button/Button';
+import * as S from './DiscussionList.styled';
+import { ROUTES } from '@/constants/routes';
+
+export default function DiscussionListHeader() {
+  const navigate = useNavigate();
+
+  const handleToSubmitDiscussion = () => {
+    navigate(ROUTES.submitDiscussion);
+  };
+
+  return (
+    <S.HeaderTitleWrapper>
+      <S.HeaderTitle>💬 Discussion</S.HeaderTitle>
+      <Button variant="primary" onClick={handleToSubmitDiscussion}>
+        작성하기
+      </Button>
+    </S.HeaderTitleWrapper>
+  );
+}
diff --git a/frontend/src/components/DiscussionList/DiscussionListItem.tsx b/frontend/src/components/DiscussionList/DiscussionListItem.tsx
@@ -10,7 +10,7 @@ export default function DiscussionListItem({
   commentCount,
 }: Omit<Discussion, 'id'>) {
   return (
-    <S.DiscussionItemContainer>
+    <S.ItemContainer>
       <S.ContentWrapper>
         <S.BadgeWrapper>
           <Badge text={mission} variant="danger" />
@@ -21,13 +21,13 @@ export default function DiscussionListItem({
         <S.Title>{title}</S.Title>
       </S.ContentWrapper>
 
-      <S.DiscussionRight>
+      <S.ItemRight>
         <S.WriterImg src={member.imageUrl} />
         <S.CommentWrapper>
           <S.CommentCountIcon />
           <p>{commentCount}</p>
         </S.CommentWrapper>
-      </S.DiscussionRight>
-    </S.DiscussionItemContainer>
+      </S.ItemRight>
+    </S.ItemContainer>
   );
 }
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -12,8 +12,6 @@ import * as Sentry from '@sentry/react';
 import { ThemeProvider } from 'styled-components';
 import { theme } from './styles/theme';
 import './styles/fonts.css';
-import DashboardDiscussionPage from './pages/DashboardPage/Discussion';
-import DashboardDiscussionCommentPage from './pages/DashboardPage/DiscussionComment';
 
 export const queryClient = new QueryClient({
   defaultOptions: {
@@ -32,25 +30,41 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 });
 
-const MissionDetailPage = lazy(() => import('./pages/MissionDetailPage'));
+// 메인
 const MainPage = lazy(() => import('./pages/MainPage'));
-const MissionSubmitPage = lazy(() => import('./pages/MissionSubmitPage'));
+const AboutPage = lazy(() => import('./pages/AboutPage/AboutPage'));
 const UserProfilePage = lazy(() => import('./pages/UserProfilePage'));
 // const GuidePage = lazy(() => import('./pages/GuidePage'));
-const ErrorPage = lazy(() => import('./pages/ErrorPage'));
-const AboutPage = lazy(() => import('./pages/AboutPage/AboutPage'));
-const DiscussionDetailPage = lazy(() => import('./pages/DiscussionDetailPage'));
-const DiscussionSubmitPage = lazy(() => import('./pages/DiscussionSubmitPage'));
-const SolutionListPage = lazy(() => import('./pages/SolutionListPage'));
+
+// 미션
+const MissionDetailPage = lazy(() => import('./pages/MissionDetailPage'));
+const MissionSubmitPage = lazy(() => import('./pages/MissionSubmitPage'));
 const MissionListPage = lazy(() => import('./pages/MissionListPage'));
+
+// 풀이 (솔루션)
+const SolutionListPage = lazy(() => import('./pages/SolutionListPage'));
 const SolutionDetailPage = lazy(() => import('./pages/SolutionDetailPage'));
+
+// 디스커션
+const DiscussionDetailPage = lazy(() => import('./pages/DiscussionDetailPage'));
+const DiscussionSubmitPage = lazy(() => import('./pages/DiscussionSubmitPage'));
+const DiscussionListPage = lazy(() => import('./pages/DiscussionListPage'));
+
+// 대시보드
 const DashboardPage = lazy(() => import('./pages/DashboardPage'));
+const DashboardDiscussionPage = lazy(() => import('./pages/DashboardPage/Discussion'));
+const DashboardDiscussionCommentPage = lazy(
+  () => import('./pages/DashboardPage/DiscussionComment'),
+);
 const DashBoardMissionInProgressPage = lazy(
   () => import('./pages/DashboardPage/MissionInProgress'),
 );
 const MyCommentsPage = lazy(() => import('./pages/DashboardPage/MyComments'));
 const SubmittedSolutionList = lazy(() => import('./components/DashBoard/SubmittedSolutions'));
 
+// 기타
+const ErrorPage = lazy(() => import('./pages/ErrorPage'));
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 const routes = [
@@ -226,52 +240,62 @@ const routes = [
       </App>
     ),
   },
+  {
+    path: ROUTES.discussions,
+    element: (
+      <App>
+        <Suspense fallback={<LoadingSpinner />}>
+          <DiscussionListPage />
+        </Suspense>
+      </App>
+    ),
+  },
 ];
 
 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}>
-        <QueryErrorBoundary>
-          <ErrorBoundary fallback={<div>에러에요!</div>}>
-            <ThemeProvider theme={theme}>
-              <GlobalStyle />
-              <RouterProvider router={router} />
-            </ThemeProvider>
-          </ErrorBoundary>
-        </QueryErrorBoundary>
-      </QueryClientProvider>
-    </React.StrictMode>,
-  );
-});
+// enableMocking().then(() => {
+//   root.render(
+//     <React.StrictMode>
+//       <QueryClientProvider client={queryClient}>
+//         <QueryErrorBoundary>
+//           <ErrorBoundary fallback={<div>에러에요!</div>}>
+//             <ThemeProvider theme={theme}>
+//               <GlobalStyle />
+//               <RouterProvider router={router} />
+//             </ThemeProvider>
+//           </ErrorBoundary>
+//         </QueryErrorBoundary>
+//       </QueryClientProvider>
+//     </React.StrictMode>,
+//   );
+// });
 
-// root.render(
-//   <React.StrictMode>
-//     <QueryClientProvider client={queryClient}>
-//       <QueryErrorBoundary>
-//         <ErrorBoundary fallback={<div>에러에요!</div>}>
-//           <ThemeProvider theme={theme}>
-//             <GlobalStyle />
-//             <RouterProvider router={router} />
-//           </ThemeProvider>
-//         </ErrorBoundary>
-//       </QueryErrorBoundary>
-//     </QueryClientProvider>
-//   </React.StrictMode>,
-// );
+root.render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <QueryErrorBoundary>
+        <ErrorBoundary fallback={<div>에러에요!</div>}>
+          <ThemeProvider theme={theme}>
+            <GlobalStyle />
+            <RouterProvider router={router} />
+          </ThemeProvider>
+        </ErrorBoundary>
+      </QueryErrorBoundary>
+    </QueryClientProvider>
+  </React.StrictMode>,
+);
diff --git a/frontend/src/pages/DiscussionDetailPage/DiscussionDetailHeader.tsx b/frontend/src/pages/DiscussionDetailPage/DiscussionDetailHeader.tsx
@@ -1,6 +1,9 @@
+import Button from '@/components/common/Button/Button';
 import * as S from './DiscussionDetailPage.styled';
 import TagButton from '@/components/common/TagButton';
 import type { DiscussionDetail } from '@/types/discussion';
+import { useNavigate } from 'react-router-dom';
+import { ROUTES } from '@/constants/routes';
 
 interface DiscussionDetailHeaderProps {
   discussion: DiscussionDetail;
@@ -9,11 +12,22 @@ interface DiscussionDetailHeaderProps {
 export default function DiscussionDetailHeader({ discussion }: DiscussionDetailHeaderProps) {
   const { mission, member, title, hashTags } = discussion;
 
+  const navigate = useNavigate();
+
+  const handleToSubmitDiscussion = () => {
+    navigate(ROUTES.submitDiscussion);
+  };
+
   return (
     <S.DiscussionDetailHeaderContainer>
       <S.ThumbnailWrapper>
         <S.HeaderLeftArea>
-          {mission && <S.MissionTitle># {mission.title}</S.MissionTitle>}
+          <S.MissionActionHeader>
+            {mission && <S.MissionTitle># {mission.title}</S.MissionTitle>}
+            <Button variant="primary" onClick={handleToSubmitDiscussion}>
+              작성하기
+            </Button>
+          </S.MissionActionHeader>
           <S.Title>{title}</S.Title>
           <S.DiscussionDetailInfo>
             <S.HeaderUserInfo>

diff --git a/frontend/src/pages/DiscussionDetailPage/DiscussionDetailPage.styled.ts b/frontend/src/pages/DiscussionDetailPage/DiscussionDetailPage.styled.ts
@@ -10,6 +10,7 @@ export const DiscussionDetailTitle = styled.h2`
   margin: 4.5rem 0;
   ${({ theme }) => theme.font.heading1}
   width: fit-content;
+  cursor: pointer;
 `;
 
 export const MissionTitle = styled.div`
@@ -53,6 +54,12 @@ export const HeaderLeftArea = styled.div`
   flex-direction: column;
 `;
 
+export const MissionActionHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
 export const DiscussionDetailInfo = styled.div`
   display: flex;
   width: 100%;

diff --git a/frontend/src/pages/DiscussionDetailPage/index.tsx b/frontend/src/pages/DiscussionDetailPage/index.tsx
@@ -6,6 +6,8 @@ import CommentSection from '@/components/CommentSection';
 import usePathnameAt from '@/hooks/usePathnameAt';
 import useDiscussion from '@/hooks/useDiscussion';
 import { useDiscussionComments } from '@/hooks/useDiscussionComments';
+import { useNavigate } from 'react-router-dom';
+import { ROUTES } from '@/constants/routes';
 
 export default function DiscussionDetailPage() {
   const { data: userInfo } = useUserInfo();
@@ -16,9 +18,17 @@ export default function DiscussionDetailPage() {
 
   const isLoggedIn = Boolean(userInfo);
 
+  const navigate = useNavigate();
+
+  const handleToDiscussionList = () => {
+    navigate(ROUTES.discussions);
+  };
+
   return (
     <S.DiscussionDetailPageContainer>
-      <S.DiscussionDetailTitle>💬 Discussion</S.DiscussionDetailTitle>
+      <S.DiscussionDetailTitle onClick={handleToDiscussionList}>
+        💬 Discussion
+      </S.DiscussionDetailTitle>
       <DiscussionDetailHeader discussion={discussion} />
       <S.DiscussionDescription source={discussion.content} />
       <CommentSection

diff --git a/frontend/src/pages/DiscussionListPage/DiscussionListPage.styled.ts b/frontend/src/pages/DiscussionListPage/DiscussionListPage.styled.ts
@@ -9,10 +9,6 @@ export const DiscussionListPageContainer = styled.div`
   max-width: 100rem;
 `;
 
-export const DiscussionListTitle = styled.h1`
-  ${(props) => props.theme.font.heading1}
-`;
-
 export const TagListWrapper = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/frontend/src/pages/DiscussionListPage/index.tsx b/frontend/src/pages/DiscussionListPage/index.tsx
@@ -1,5 +1,6 @@
-import DiscussionList from '@/components/DiscussionList';
+import DiscussionListContent from '@/components/DiscussionList/DiscussionListContent';
 import * as S from './DiscussionListPage.styled';
+import DiscussionListHeader from '@/components/DiscussionList/DiscussionListHeader';
 import { useState } from 'react';
 import useDiscussions from '@/hooks/useDiscussions';
 import TagList from '@/components/common/TagList';
@@ -22,7 +23,7 @@ export default function DiscussionListPage() {
 
   return (
     <S.DiscussionListPageContainer>
-      <S.DiscussionListTitle>💬 Discussion</S.DiscussionListTitle>
+      <DiscussionListHeader />
       <S.TagListWrapper>
         <TagList
           tags={allMissions}
@@ -38,7 +39,7 @@ export default function DiscussionListPage() {
           keyName="name"
         />
       </S.TagListWrapper>
-      <DiscussionList discussions={discussions} />
+      <DiscussionListContent discussions={discussions} />
     </S.DiscussionListPageContainer>
   );
 }