From a500a6aaf7f6bb4fecf16e118e0a01d87da709d7 Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:01:29 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EB=B3=84=ED=91=9C=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=20=EA=B4=80=EB=A6=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/DiaryDetail.tsx | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/pages/DiaryDetail.tsx b/src/pages/DiaryDetail.tsx index d0fe4ed..0bd2a0d 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 코멘트를 생성 중입니다..."} @@ -222,3 +229,16 @@ const CommentText = styled.p` color: #374151; line-height: 1.6; `; + +const StarIcon = styled(BsStar)` + margin-left: auto; + font-size: 20px; + cursor: pointer; +`; + +const StarIconFill = styled(BsStarFill)` + margin-left: auto; + font-size: 20px; + color: #FFD600; + cursor: pointer; +`; From a21899aafd1c97bdec02a2ff2d54113651056d95 Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:09:51 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/DiaryDetail.tsx | 16 +++++----- src/pages/collection/Comments.tsx | 53 ++++++++++++++++++++++++++++--- 2 files changed, 57 insertions(+), 12 deletions(-) diff --git a/src/pages/DiaryDetail.tsx b/src/pages/DiaryDetail.tsx index 0bd2a0d..4bdb6b4 100644 --- a/src/pages/DiaryDetail.tsx +++ b/src/pages/DiaryDetail.tsx @@ -155,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; @@ -198,45 +198,45 @@ 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; `; -const StarIcon = styled(BsStar)` +export const StarIcon = styled(BsStar)` margin-left: auto; font-size: 20px; cursor: pointer; `; -const StarIconFill = styled(BsStarFill)` +export const StarIconFill = styled(BsStarFill)` margin-left: auto; font-size: 20px; color: #FFD600; diff --git a/src/pages/collection/Comments.tsx b/src/pages/collection/Comments.tsx index 1de4d7f..7c549dc 100644 --- a/src/pages/collection/Comments.tsx +++ b/src/pages/collection/Comments.tsx @@ -1,9 +1,54 @@ +import { useState } from "react"; +import { + Body, + CharacterImg, + CharacterName, + CharacterRow, + CommentCard, + CommentText, + StarIcon, + StarIconFill, +} from "../DiaryDetail"; + +const dummyComments = [ + "오랜만에 영화관에서 좋은 시간 보냈다니 내가 다 기쁘다! 너의 여유로운 하루가 참 따뜻하게 느껴져 :)", + "오늘 하루도 수고 많았어! 너의 일상이 더 행복해지길 바랄게.", + "새로운 도전을 했다는 말에 나도 힘이 나! 계속 응원할게 :)", +]; + const Comments = () => { + const [starred, setStarred] = useState(new Array(dummyComments.length).fill(false)); + return ( - <> - <>Comments -

일단 없는 걸로

- + +
AI 코멘트 모아보기
+ {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; From 678d4870a3b5a7a3df374f5dd715961dfb11b198 Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:11:08 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=A0=9C=EB=AA=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/collection/Comments.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/collection/Comments.tsx b/src/pages/collection/Comments.tsx index 7c549dc..766e748 100644 --- a/src/pages/collection/Comments.tsx +++ b/src/pages/collection/Comments.tsx @@ -21,7 +21,7 @@ const Comments = () => { return ( -
AI 코멘트 모아보기
+
즐겨찾기 한 코멘트 목록
{dummyComments.map((comment, index) => ( From c5d8206208d8e8fb85cc95bb0a17caa69c06642a Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:20:29 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=EC=97=90=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/DiaryDetail.tsx | 12 ++-- src/pages/collection/Comments.tsx | 107 +++++++++++++++++++++++++----- 2 files changed, 98 insertions(+), 21 deletions(-) diff --git a/src/pages/DiaryDetail.tsx b/src/pages/DiaryDetail.tsx index 4bdb6b4..4cffa36 100644 --- a/src/pages/DiaryDetail.tsx +++ b/src/pages/DiaryDetail.tsx @@ -89,11 +89,11 @@ const DiaryDetail = () => { alt={diary.character} /> {diary.character} - {starred ? ( - setStarred(false)} /> - ) : ( - setStarred(true)} /> - )} + {starred ? ( + setStarred(false)} /> + ) : ( + setStarred(true)} /> + )} {aiComment || "AI 코멘트를 생성 중입니다..."} @@ -239,6 +239,6 @@ export const StarIcon = styled(BsStar)` export const StarIconFill = styled(BsStarFill)` margin-left: auto; font-size: 20px; - color: #FFD600; + color: #ffd600; cursor: pointer; `; diff --git a/src/pages/collection/Comments.tsx b/src/pages/collection/Comments.tsx index 766e748..01f9d68 100644 --- a/src/pages/collection/Comments.tsx +++ b/src/pages/collection/Comments.tsx @@ -9,6 +9,13 @@ import { 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 = [ "오랜만에 영화관에서 좋은 시간 보냈다니 내가 다 기쁘다! 너의 여유로운 하루가 참 따뜻하게 느껴져 :)", @@ -17,31 +24,65 @@ const dummyComments = [ ]; const Comments = () => { - const [starred, setStarred] = useState(new Array(dummyComments.length).fill(false)); + 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 ( + + navigate("/")} + /> + + + + + + {characterList[currentIndex]} + + + + + + +
즐겨찾기 한 코멘트 목록
{dummyComments.map((comment, index) => ( - + 웅이 {starred[index] ? ( - { - const newStars = [...starred]; - newStars[index] = false; - setStarred(newStars); - }} /> + { + const newStars = [...starred]; + newStars[index] = false; + setStarred(newStars); + }} + /> ) : ( - { - const newStars = [...starred]; - newStars[index] = true; - setStarred(newStars); - }} /> + { + const newStars = [...starred]; + newStars[index] = true; + setStarred(newStars); + }} + /> )} {comment} @@ -52,3 +93,39 @@ const Comments = () => { }; export default Comments; + +const characterList = ["웅이", "앙글이", "티바노"]; + +const HeaderWrapper = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem; + position: relative; +`; + +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; +`; From 4d66497c94e9bccabcf94125a353ab73c7a33147 Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:22:05 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=EB=8C=93=EA=B8=80=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=95=20=EB=B0=8F=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/collection/Comments.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/collection/Comments.tsx b/src/pages/collection/Comments.tsx index 01f9d68..ee47c76 100644 --- a/src/pages/collection/Comments.tsx +++ b/src/pages/collection/Comments.tsx @@ -44,7 +44,7 @@ const Comments = () => { navigate("/")} /> @@ -100,8 +100,7 @@ const HeaderWrapper = styled.div` display: flex; align-items: center; justify-content: space-between; - padding: 1rem; - position: relative; + margin-bottom: 20px; `; const CenterContainer = styled.div`