Feat/36 해시태그 페이지

src/App.tsx

@@ -12,6 +12,7 @@ import styled from "styled-components";
 import WritingPage from "./pages/writing/WritingPage";
 import Testpage from "./pages/Testpage";
 import EditPage from "./pages/writing/EditPage";
+import HashtagDetail from "./pages/collection/HashtagDetail";
 
 function App() {
   return (
@@ -29,6 +30,7 @@ function App() {
 
           <Route path="/comments" element={<Comments />} />
           <Route path="/hashtags" element={<Hashtags />} />
+          <Route path="/hashtag/:id" element={<HashtagDetail />} />
           <Route path="/test" element={<Testpage />} />
         </Routes>
       </Wrapper>

src/components/diary/Header.tsx

@@ -1,3 +1,84 @@
-const Header = () => {};
+import styled from "styled-components";
+import {
+  IoChevronBack,
+  IoChevronForward,
+  IoHomeOutline,
+} from "react-icons/io5";
+import { useNavigate } from "react-router-dom";
+
+interface HeaderProps {
+  characterList: string[];
+  currentIndex: number;
+  setCurrentIndex: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const Header = ({
+  characterList,
+  currentIndex,
+  setCurrentIndex,
+}: HeaderProps) => {
+  const navigate = useNavigate();
+
+  const goPrev = () => {
+    setCurrentIndex(
+      (prev) => (prev - 1 + characterList.length) % characterList.length,
+    );
+  };
+
+  const goNext = () => {
+    setCurrentIndex((prev) => (prev + 1) % characterList.length);
+  };
+
+  return (
+    <HeaderWrapper>
+      <IoHomeOutline size={24} color="#2d3552" onClick={() => navigate("/")} />
+
+      <CenterContainer>
+        <ClickableIcon onClick={goPrev}>
+          <IoChevronBack />
+        </ClickableIcon>
+        <Name>{characterList[currentIndex]}</Name>
+        <ClickableIcon onClick={goNext}>
+          <IoChevronForward />
+        </ClickableIcon>
+      </CenterContainer>
+
+      <Placeholder />
+    </HeaderWrapper>
+  );
+};
 
 export default Header;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+`;
+
+const CenterContainer = styled.div`
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #2d3552;
+  font-weight: 500;
+  font-size: 1.2rem;
+`;
+
+const Name = styled.span`
+  flex: 1;
+  text-align: center;
+`;
+
+const Placeholder = styled.div`
+  width: 28px;
+`;
+
+const ClickableIcon = styled.div`
+  cursor: pointer;
+`;

src/components/home/DiaryList.tsx

@@ -93,13 +93,19 @@ export const DiaryTitle = styled.div`
 
 export const TagWrapper = styled.div`
   display: flex;
-  gap: 8px;
-  font-size: 14px;
-  color: #3b82f6;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   margin-bottom: 8px;
 `;
 
-export const Tag = styled.span``;
+export const Tag = styled.span`
+  font-size: 14px;
+  color: #3b82f6;
+  margin-right: 8px;
+  flex-shrink: 0;
+`;
 
 export const Content = styled.div`
   font-size: 14px;

src/pages/DiaryDetail.tsx

@@ -169,13 +169,13 @@ const Title = styled.h2`
   border-radius: 8px;
 `;
 
-const TagBox = styled.div`
+export const TagBox = styled.div`
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
 `;
 
-const Tag = styled.span`
+export const Tag = styled.span`
   background: #ffffff;
   color: #2563eb;
   padding: 6px 12px;

src/pages/collection/Comments.tsx

@@ -9,58 +9,30 @@ import {
   StarIcon,
   StarIconFill,
 } from "../DiaryDetail";
-import styled from "styled-components";
-import {
-  IoChevronBack,
-  IoChevronForward,
-  IoHomeOutline,
-} from "react-icons/io5";
-import { useNavigate } from "react-router-dom";
+import Header from "../../components/diary/Header";
 
 const dummyComments = [
   "오랜만에 영화관에서 좋은 시간 보냈다니 내가 다 기쁘다! 너의 여유로운 하루가 참 따뜻하게 느껴져 :)",
   "오늘 하루도 수고 많았어! 너의 일상이 더 행복해지길 바랄게.",
   "새로운 도전을 했다는 말에 나도 힘이 나! 계속 응원할게 :)",
 ];
 
+const characterList = ["웅이", "앙글이", "티바노"];
+
 const Comments = () => {
   const [starred, setStarred] = useState<boolean[]>(
     new Array(dummyComments.length).fill(false),
   );
   const [currentIndex, setCurrentIndex] = useState(0);
-  const navigate = useNavigate();
-
-  const goPrev = () => {
-    setCurrentIndex(
-      (prev) => (prev - 1 + characterList.length) % characterList.length,
-    );
-  };
-
-  const goNext = () => {
-    setCurrentIndex((prev) => (prev + 1) % characterList.length);
-  };
 
   return (
     <Body>
-      <HeaderWrapper>
-        <IoHomeOutline
-          size={24}
-          color="#2d3552"
-          onClick={() => navigate("/")}
-        />
-
-        <CenterContainer>
-          <ClickableIcon onClick={goPrev}>
-            <IoChevronBack />
-          </ClickableIcon>
-          <Name>{characterList[currentIndex]}</Name>
-          <ClickableIcon onClick={goNext}>
-            <IoChevronForward />
-          </ClickableIcon>
-        </CenterContainer>
+      <Header
+        characterList={characterList}
+        currentIndex={currentIndex}
+        setCurrentIndex={setCurrentIndex}
+      />
 
-        <Placeholder />
-      </HeaderWrapper>
       <div>즐겨찾기 한 코멘트 목록</div>
       {dummyComments.map((comment, index) => (
         <CommentCard key={index}>
@@ -93,38 +65,3 @@ const Comments = () => {
 };
 
 export default Comments;
-
-const characterList = ["웅이", "앙글이", "티바노"];
-
-const HeaderWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-`;
-
-const CenterContainer = styled.div`
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 160px; /* 고정 너비로 좌우 아이콘 위치 유지 */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #2d3552;
-  font-weight: 500;
-  font-size: 1.2rem;
-`;
-
-const Name = styled.span`
-  flex: 1;
-  text-align: center;
-`;
-
-const Placeholder = styled.div`
-  width: 28px; /* 오른쪽 균형용 */
-`;
-
-const ClickableIcon = styled.div`
-  cursor: pointer;
-`;

src/pages/collection/HashtagDetail.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import Header from "../../components/diary/Header";
+import { Body } from "../DiaryDetail";
+import DiaryList from "../../components/home/DiaryList";
+import { TheFooter } from "../../components/common/TheFooter";
+
+const characterList = [
+  "슬픔",
+  "행복",
+  "기쁨",
+  "사랑",
+  "우정",
+  "추억",
+  "여행",
+  "일상",
+  "꿈",
+];
+
+const HashtagDetail = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  return (
+    <Body>
+      <Header
+        characterList={characterList}
+        currentIndex={currentIndex}
+        setCurrentIndex={setCurrentIndex}
+      />
+      <DiaryList />
+    </Body>
+  );
+};
+export default HashtagDetail;

src/pages/collection/Hashtags.tsx

@@ -1,9 +1,23 @@
+import { IoHomeOutline } from "react-icons/io5";
+import { Body, Tag, TagBox } from "../DiaryDetail";
+import { useNavigate } from "react-router-dom";
+
+const dummyHashtags = Array.from({ length: 50 }, (_, i) => `더미태그${i + 1}`);
+
 const Hashtags = () => {
+  const navigate = useNavigate();
   return (
-    <>
-      <>Hashtags</>
-      <p>일단 없는 걸로</p>
-    </>
+    <Body>
+      <IoHomeOutline size={24} color="#2d3552" onClick={() => navigate("/")} />
+      <div>해시태그 목록</div>
+      <TagBox>
+        {dummyHashtags.map((tag, idx) => (
+          <Tag key={idx} onClick={() => navigate(`/hashtag/${(idx + 1).toString()}`)}>
+            #{tag}
+          </Tag>
+        ))}
+      </TagBox>
+    </Body>
   );
 };
 export default Hashtags;