From 7faf02dd52f084c76c9c06d3b2032eb402709132 Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:27:59 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=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?=EB=8C=93=EA=B8=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20?= =?UTF-8?q?=ED=86=B5=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/diary/Header.tsx | 83 ++++++++++++++++++++++++++++++- src/pages/collection/Comments.tsx | 79 +++-------------------------- 2 files changed, 90 insertions(+), 72 deletions(-) diff --git a/src/components/diary/Header.tsx b/src/components/diary/Header.tsx index 9d8ccf6..b6b6a5d 100644 --- a/src/components/diary/Header.tsx +++ b/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>; +} + +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 ( + + navigate("/")} + /> + + + + + + {characterList[currentIndex]} + + + + + + + + ); +}; 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; +`; diff --git a/src/pages/collection/Comments.tsx b/src/pages/collection/Comments.tsx index ee47c76..3883190 100644 --- a/src/pages/collection/Comments.tsx +++ b/src/pages/collection/Comments.tsx @@ -9,13 +9,7 @@ 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 = [ "오랜만에 영화관에서 좋은 시간 보냈다니 내가 다 기쁘다! 너의 여유로운 하루가 참 따뜻하게 느껴져 :)", @@ -23,44 +17,22 @@ const dummyComments = [ "새로운 도전을 했다는 말에 나도 힘이 나! 계속 응원할게 :)", ]; +const characterList = ["웅이", "앙글이", "티바노"]; + 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 ( - - navigate("/")} - /> - - - - - - {characterList[currentIndex]} - - - - +
- -
즐겨찾기 한 코멘트 목록
{dummyComments.map((comment, 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; -`; From 67c78c42407a48dc6dab877d09f46c1189306435 Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:32:02 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20props=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=ED=95=B4=EC=8B=9C?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/diary/Header.tsx | 12 +++++------ src/pages/collection/HashtagDetail.tsx | 29 ++++++++++++++++++++++++++ src/pages/collection/Hashtags.tsx | 13 ++++++++---- 3 files changed, 44 insertions(+), 10 deletions(-) create mode 100644 src/pages/collection/HashtagDetail.tsx diff --git a/src/components/diary/Header.tsx b/src/components/diary/Header.tsx index b6b6a5d..38dbf35 100644 --- a/src/components/diary/Header.tsx +++ b/src/components/diary/Header.tsx @@ -12,7 +12,11 @@ interface HeaderProps { setCurrentIndex: React.Dispatch>; } -const Header = ({ characterList, currentIndex, setCurrentIndex }: HeaderProps) => { +const Header = ({ + characterList, + currentIndex, + setCurrentIndex, +}: HeaderProps) => { const navigate = useNavigate(); const goPrev = () => { @@ -27,11 +31,7 @@ const Header = ({ characterList, currentIndex, setCurrentIndex }: HeaderProps) = return ( - navigate("/")} - /> + navigate("/")} /> diff --git a/src/pages/collection/HashtagDetail.tsx b/src/pages/collection/HashtagDetail.tsx new file mode 100644 index 0000000..dba5f58 --- /dev/null +++ b/src/pages/collection/HashtagDetail.tsx @@ -0,0 +1,29 @@ +import { useState } from "react"; +import Header from "../../components/diary/Header"; +import { Body } from "../DiaryDetail"; + +const characterList = [ + "슬픔", + "행복", + "기쁨", + "사랑", + "우정", + "추억", + "여행", + "일상", + "꿈", +]; + +const HashtagDetail = () => { + const [currentIndex, setCurrentIndex] = useState(0); + return ( + +
+ + ); +}; +export default HashtagDetail; diff --git a/src/pages/collection/Hashtags.tsx b/src/pages/collection/Hashtags.tsx index e8e96d1..a0d7159 100644 --- a/src/pages/collection/Hashtags.tsx +++ b/src/pages/collection/Hashtags.tsx @@ -1,9 +1,14 @@ +import { IoHomeOutline } from "react-icons/io5"; +import { Body } from "../DiaryDetail"; +import { useNavigate } from "react-router-dom"; + const Hashtags = () => { + const navigate = useNavigate(); return ( - <> - <>Hashtags -

일단 없는 걸로

- + + navigate("/")} /> +
해시태그 목록
+ ); }; export default Hashtags; From d29c89f1eacbdead5a7a2ff410f6623483748201 Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:33:29 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=ED=95=B4=EC=8B=9C=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.tsx b/src/App.tsx index a45430c..e5c923c 100644 --- a/src/App.tsx +++ b/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() { } /> } /> + } /> } /> From 191291535c802f04172b2b16b731b8438bb32408 Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:37:02 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EB=8B=A4=EC=9D=B4=EC=96=B4?= =?UTF-8?q?=EB=A6=AC=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=83=9C=EA=B7=B8=20=EB=B0=95=EC=8A=A4=20?= =?UTF-8?q?=EB=B0=8F=20=ED=83=9C=EA=B7=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=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 | 4 ++-- src/pages/collection/Hashtags.tsx | 9 ++++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/pages/DiaryDetail.tsx b/src/pages/DiaryDetail.tsx index 4cffa36..27f914f 100644 --- a/src/pages/DiaryDetail.tsx +++ b/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; diff --git a/src/pages/collection/Hashtags.tsx b/src/pages/collection/Hashtags.tsx index a0d7159..cbd98cb 100644 --- a/src/pages/collection/Hashtags.tsx +++ b/src/pages/collection/Hashtags.tsx @@ -1,13 +1,20 @@ import { IoHomeOutline } from "react-icons/io5"; -import { Body } from "../DiaryDetail"; +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 ( navigate("/")} />
해시태그 목록
+ + {dummyHashtags.map((tag, idx) => ( + #{tag} + ))} + ); }; From 6dfddbcb116cafc89f2aa2e01bfe878e6c0d4a05 Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:37:48 +0900 Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=ED=95=B4=EC=8B=9C=ED=83=9C=EA=B7=B8?= =?UTF-8?q?=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=8A=B8=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index e5c923c..f976809 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -30,7 +30,7 @@ function App() { } /> } /> - } /> + } /> } /> From 8afde0773f936e1a0405eaaf76e5fa0a02f4321c Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:38:46 +0900 Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=ED=95=B4=EC=8B=9C=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EB=AA=A9=EB=A1=9D=EC=97=90=EC=84=9C=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=83=81=EC=84=B8?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/collection/Hashtags.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/collection/Hashtags.tsx b/src/pages/collection/Hashtags.tsx index cbd98cb..12afc32 100644 --- a/src/pages/collection/Hashtags.tsx +++ b/src/pages/collection/Hashtags.tsx @@ -12,7 +12,9 @@ const Hashtags = () => {
해시태그 목록
{dummyHashtags.map((tag, idx) => ( - #{tag} + navigate(`/hashtag/${(idx + 1).toString()}`)}> + #{tag} + ))} From 3eff51a3973d535e99d83c31339567804d3924cc Mon Sep 17 00:00:00 2001 From: jungsunbeen Date: Sat, 31 May 2025 16:43:24 +0900 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=ED=95=B4=EC=8B=9C=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=20=EB=8B=A4=EC=9D=B4=EC=96=B4=EB=A6=AC=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/collection/HashtagDetail.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/collection/HashtagDetail.tsx b/src/pages/collection/HashtagDetail.tsx index dba5f58..b86d958 100644 --- a/src/pages/collection/HashtagDetail.tsx +++ b/src/pages/collection/HashtagDetail.tsx @@ -1,6 +1,8 @@ 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 = [ "슬픔", @@ -23,6 +25,7 @@ const HashtagDetail = () => { currentIndex={currentIndex} setCurrentIndex={setCurrentIndex} /> + ); };