Merge pull request #376 from boostcampwm-2022/fix/#349-share-tag-navi…

…gate 태그 내비게이트 및 사용성 개선
boostcampwm-2022 · Dec 8, 2022 · a2b2bcd · a2b2bcd
2 parents 96087fc + 242c016
commit a2b2bcd
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/client/src/components/main/TagRanking/TagRankingItem/TagRankingItem.tsx b/client/src/components/main/TagRanking/TagRankingItem/TagRankingItem.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from "react";
+import { useNavigate } from "react-router-dom";
 import HorizontalRuleIcon from "@mui/icons-material/HorizontalRule";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
@@ -19,8 +20,10 @@ const TagRankingItem = ({ tagInfo }: PopularTagBoxProps): JSX.Element => {
   const [searchDefaultFilter] = useSearchStore((state) => [
     state.searchDefaultFilter,
   ]);
+  const navigate = useNavigate();
   const handleItemClick = useCallback((): void => {
     searchDefaultFilter({ tags: [tagInfo.name], lastId: "-1" });
+    navigate("/");
   }, []);
 
   return (

diff --git a/client/src/styles/_mixin.scss b/client/src/styles/_mixin.scss
@@ -22,7 +22,7 @@
   width: $line-width;
   height: 100%;
   overflow-x: hidden;
-  overflow-y: auto;
+  overflow-y: hidden;
   font-family: D2Coding, "D2 coding", monospace;
   color: $weview-white;
   text-align: end;

diff --git a/client/src/utils/code.ts b/client/src/utils/code.ts
@@ -21,8 +21,10 @@ export const chunkHTML = (htmlData: string[]): string[][] => {
 
 export const wrapHTML = (chunkedHTML: string[][]): string =>
   chunkedHTML
-    .map(
-      (arr, idx) =>
-        `<div class=chunked-${idx + 1}><div>${arr.join("\n")}</div></div>`
-    )
+    .map((arr, idx) => {
+      return `<div class=chunked-${idx + 1}><div>${arr
+        // 배열의 마지막 원소가 빈 문자열일 때 join하면 개행이 사라지므로 이를 확인하여 추가
+        .map((item, idx2) => (item === "" && idx2 === 14 ? "<br/>" : item))
+        .join("\n")}</div></div>`;
+    })
     .join("");