feat: discussionList 클릭 시 상세 페이지로 이동 기능 구현

woowacourse-teams · Sep 20, 2024 · b816db1 · b816db1
1 parent 5d203a2
commit b816db1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/frontend/src/components/DiscussionList/DiscussionList.styled.ts b/frontend/src/components/DiscussionList/DiscussionList.styled.ts
@@ -18,6 +18,8 @@ export const DiscussionItemContainer = styled.div`
   box-sizing: border-box;
   box-shadow: ${(props) => props.theme.boxShadow.shadow04};
   border-radius: 2.8rem;
+
+  cursor: pointer;
 `;
 
 export const BadgeWrapper = styled.div`

diff --git a/frontend/src/components/DiscussionList/index.tsx b/frontend/src/components/DiscussionList/index.tsx
@@ -2,6 +2,7 @@ import * as S from './DiscussionList.styled';
 import useDiscussions from '@/hooks/useDiscussions';
 import DiscussionListItem from './DiscussionListItem';
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
 export default function DiscussionList() {
   const [mission] = useState<string>('all');
@@ -11,14 +12,15 @@ export default function DiscussionList() {
   return (
     <S.DiscussionListContainer>
       {discussions.map((discussion) => (
-        <DiscussionListItem
-          key={discussion.id}
-          title={discussion.title}
-          mission={discussion.mission}
-          hashTags={discussion.hashTags}
-          member={discussion.member}
-          commentCount={discussion.commentCount}
-        />
+        <Link key={discussion.id} to={`/discussions/${discussion.id}`}>
+          <DiscussionListItem
+            title={discussion.title}
+            mission={discussion.mission}
+            hashTags={discussion.hashTags}
+            member={discussion.member}
+            commentCount={discussion.commentCount}
+          />
+        </Link>
       ))}
     </S.DiscussionListContainer>
   );