diff --git a/src/pages/DiaryDetail.tsx b/src/pages/DiaryDetail.tsx
index d0fe4ed..4cffa36 100644
--- a/src/pages/DiaryDetail.tsx
+++ b/src/pages/DiaryDetail.tsx
@@ -1,6 +1,6 @@
import styled from "styled-components";
import { IoHomeOutline, IoTrashBinOutline } from "react-icons/io5";
-import { BsPencil } from "react-icons/bs";
+import { BsPencil, BsStar, BsStarFill } from "react-icons/bs";
import { useNavigate, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { getDiary } from "../services/apis/diary/diary";
@@ -48,6 +48,8 @@ const DiaryDetail = () => {
}
}, [diary]);
+ const [starred, setStarred] = useState(false);
+
const formatDate = (rawDate: string) => {
const date = new Date(rawDate);
return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, "0")}.${String(date.getDate()).padStart(2, "0")}.`;
@@ -87,6 +89,11 @@ const DiaryDetail = () => {
alt={diary.character}
/>
{diary.character}
+ {starred ? (
+ setStarred(false)} />
+ ) : (
+ setStarred(true)} />
+ )}
{aiComment || "AI 코멘트를 생성 중입니다..."}
@@ -148,7 +155,7 @@ const EditIcon = styled(BsPencil)`
color: #1e2a52;
`;
-const Body = styled.div`
+export const Body = styled.div`
padding: 24px;
display: flex;
flex-direction: column;
@@ -191,34 +198,47 @@ const CommentTitle = styled.h3`
color: #1e2a52;
`;
-const CommentCard = styled.div`
+export const CommentCard = styled.div`
background: #fff;
border-radius: 16px;
padding: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
`;
-const CharacterRow = styled.div`
+export const CharacterRow = styled.div`
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
`;
-const CharacterImg = styled.img`
+export const CharacterImg = styled.img`
width: 40px;
height: 40px;
border-radius: 50%;
`;
-const CharacterName = styled.div`
+export const CharacterName = styled.div`
font-size: 16px;
font-weight: 600;
color: #1e2a52;
`;
-const CommentText = styled.p`
+export const CommentText = styled.p`
font-size: 14px;
color: #374151;
line-height: 1.6;
`;
+
+export const StarIcon = styled(BsStar)`
+ margin-left: auto;
+ font-size: 20px;
+ cursor: pointer;
+`;
+
+export const StarIconFill = styled(BsStarFill)`
+ margin-left: auto;
+ font-size: 20px;
+ color: #ffd600;
+ cursor: pointer;
+`;
diff --git a/src/pages/collection/Comments.tsx b/src/pages/collection/Comments.tsx
index 1de4d7f..ee47c76 100644
--- a/src/pages/collection/Comments.tsx
+++ b/src/pages/collection/Comments.tsx
@@ -1,9 +1,130 @@
+import { useState } from "react";
+import {
+ Body,
+ CharacterImg,
+ CharacterName,
+ CharacterRow,
+ CommentCard,
+ CommentText,
+ StarIcon,
+ StarIconFill,
+} from "../DiaryDetail";
+import styled from "styled-components";
+import {
+ IoChevronBack,
+ IoChevronForward,
+ IoHomeOutline,
+} from "react-icons/io5";
+import { useNavigate } from "react-router-dom";
+
+const dummyComments = [
+ "오랜만에 영화관에서 좋은 시간 보냈다니 내가 다 기쁘다! 너의 여유로운 하루가 참 따뜻하게 느껴져 :)",
+ "오늘 하루도 수고 많았어! 너의 일상이 더 행복해지길 바랄게.",
+ "새로운 도전을 했다는 말에 나도 힘이 나! 계속 응원할게 :)",
+];
+
const Comments = () => {
+ const [starred, setStarred] = useState(
+ 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 (
- <>
- <>Comments
- 일단 없는 걸로
-
+
+
+ navigate("/")}
+ />
+
+
+
+
+
+ {characterList[currentIndex]}
+
+
+
+
+
+
+
+ 즐겨찾기 한 코멘트 목록
+ {dummyComments.map((comment, index) => (
+
+
+
+ 웅이
+ {starred[index] ? (
+ {
+ const newStars = [...starred];
+ newStars[index] = false;
+ setStarred(newStars);
+ }}
+ />
+ ) : (
+ {
+ const newStars = [...starred];
+ newStars[index] = true;
+ setStarred(newStars);
+ }}
+ />
+ )}
+
+ {comment}
+
+ ))}
+
);
};
+
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;
+`;