From 1c6c718415dcc359ffaedc8753e0285e1cf5b60d Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Sat, 13 May 2023 12:51:42 +0900
Subject: [PATCH] feat: support onTagClick routing

---
 src/components/Tags/Tags.tsx | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.tsx
index 7c5e4e1..c5ce181 100644
--- a/src/components/Tags/Tags.tsx
+++ b/src/components/Tags/Tags.tsx
@@ -1,16 +1,40 @@
+import { addTopicsToQuery } from '@/utils/search.utils'
 import { Tag } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
+import { useRouter } from 'next/router'
 
-const Tags = ({ tags }: { tags: string[] }) =>
-  tags.length > 0 ? (
+const Tags = ({ tags }: { tags: string[] }) => {
+  const router = useRouter()
+
+  const onTagClick = (e: React.MouseEvent<HTMLElement>, tag: string) => {
+    e.preventDefault()
+    router.push(
+      {
+        pathname: '/search',
+        query: {
+          ...addTopicsToQuery([tag]),
+        },
+      },
+      undefined,
+      { shallow: true },
+    )
+  }
+
+  return tags.length > 0 ? (
     <TagContainer>
       {tags.map((tag) => (
-        <Tag size="small" disabled={false} key={tag}>
+        <Tag
+          onClick={(e) => onTagClick(e, tag)}
+          size="small"
+          disabled={false}
+          key={tag}
+        >
           {tag}
         </Tag>
       ))}
     </TagContainer>
   ) : null
+}
 
 const TagContainer = styled.div`
   display: flex;