From cb00d9bd92a58a3d1469e3f7486e6add5e2d5514 Mon Sep 17 00:00:00 2001 From: kangminguu <131148077+kangminguu@users.noreply.github.com> Date: Wed, 6 Nov 2024 11:32:07 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=9D=BC=EA=B8=B0=EB=82=B4=EC=9A=A9?= =?UTF-8?q?=20=EB=B0=8F=20=EB=A6=AC=EC=95=A1=EC=85=98=20=EC=A4=91=EA=B0=84?= =?UTF-8?q?=20=EC=A0=90=EA=B2=80=20(#203)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat : 일기내용 및 리액션 중간 점검 * chore : 리액션 읽기 조회용 변경 --- src/pages/DetailPage/ui/DetailPage.styled.ts | 40 +++++++- src/pages/DetailPage/ui/DetailPage.tsx | 94 +++++++++++++++++-- src/widgets/diary-text/ui/DiaryText.styled.ts | 14 ++- src/widgets/diary-text/ui/DiaryText.tsx | 15 +-- 4 files changed, 142 insertions(+), 21 deletions(-) diff --git a/src/pages/DetailPage/ui/DetailPage.styled.ts b/src/pages/DetailPage/ui/DetailPage.styled.ts index f19a9c7..c237e06 100644 --- a/src/pages/DetailPage/ui/DetailPage.styled.ts +++ b/src/pages/DetailPage/ui/DetailPage.styled.ts @@ -4,20 +4,23 @@ export const Container = styled.div` display: flex; flex-direction: column; align-items: center; + gap: 10px; + + margin-top: 150px; + margin-bottom: 100px; `; export const ContentContainer = styled.div` - background-color: rgb(0, 0, 0, 0.3); - height: 400px; - width: 100% + max-width: 960px; + width: 100%; display: flex; flex-direction: column; align-items: center; `; export const Wrap = styled.div` - width: 100%; max-width: 960px; + width: 100%; display: flex; // flex-direction: column; // 모바일 버전일 때 align-items: stretch; @@ -56,3 +59,32 @@ export const MainEmotionContainer = styled.div` export const SubEmotionContainer = styled.div` flex: 2; `; + +export const ReactionShareWrap = styled.div` + max-width: 960px; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +`; + +export const ReactionContainer = styled.div` + // background-color: rgb(0, 0, 0, 0.1); + max-width: 960px; + width: 100%; + height: 300px; +`; + +export const ShareButtonContainer = styled.div` + // position: absolute; +`; + +export const ButtonContainer = styled.div` + // background-color: rgb(0, 0, 0, 0.1); + max-width: 960px; + width: 100%; + + display: flex; + gap: 30px; + padding: 0 30px; +`; diff --git a/src/pages/DetailPage/ui/DetailPage.tsx b/src/pages/DetailPage/ui/DetailPage.tsx index 705843e..0b57ac9 100644 --- a/src/pages/DetailPage/ui/DetailPage.tsx +++ b/src/pages/DetailPage/ui/DetailPage.tsx @@ -9,7 +9,11 @@ import { MusicContainer, MoodContainer, MainEmotionContainer, - SubEmotionContainer + SubEmotionContainer, + ReactionContainer, + ButtonContainer, + ShareButtonContainer, + ReactionShareWrap } from './DetailPage.styled'; import { ShowMusicContainer } from '@/widgets/show-music'; import { ShowMoodContainer } from '@/widgets/show-mood'; @@ -18,13 +22,19 @@ import { ShowSubEmotionContainer } from '@/widgets/show-sub-emotion'; import { emotionMapping, Emotions } from '@/shared/model/EmotionEnum'; import { ConditionType } from '@/shared/model/conditionTypes'; +import DiaryText from '@/widgets/diary-text/ui/DiaryText'; +import ReactionSelector from '@/widgets/reaction-selector/ui/ReactionSelector'; +import { useAuthStore } from '@/features/login/hooks/useAuthStore'; +import Button from '@/shared/ui/Button/Button'; +import { ShareButton } from '@/entities/ShareButton'; interface DiaryData { + id: number; title: string; content: string; is_public: boolean; - title_date: Date; - updated_date: Date; + title_date: string; + updated_date: string; author_email: string; // author_username: string; @@ -40,6 +50,9 @@ interface DiaryData { } export const DetailPage = () => { + const { email, userName, isLoggedin, setUserInfo } = useAuthStore(); + const token = localStorage.getItem('token') || ''; // 임시 + const { id } = useParams(); const [data, setData] = useState(null); @@ -65,15 +78,17 @@ export const DetailPage = () => { // 구조 분해로 변수 할당 const { + id: diaryId, title, + author_email: autherEmail, content, is_public: isPublic, + title_date: titleDate, + updated_date: updatedDate, mood, emotion, sub_emotion: subEmotion, - title_date: titleDate, - updated_date: updatedDate, music_url: youtubeId, music_imgurl: albumCover, @@ -81,6 +96,20 @@ export const DetailPage = () => { artist: artistName } = data; + const transTitleDate = new Date(titleDate).toLocaleDateString('ko-KR', { + year: 'numeric', + month: 'numeric', + day: 'numeric' + }); + + const transUpdatedDate = new Date(updatedDate).toLocaleDateString('ko-KR', { + year: 'numeric', + month: 'numeric', + day: 'numeric', + hour: 'numeric', + minute: 'numeric' + }); + // 서브 감정을 매핑 const transSubEmotion = JSON.parse(subEmotion).map( (emo: string) => emotionMapping[emo] ?? emo @@ -88,7 +117,17 @@ export const DetailPage = () => { return ( - {content} + + !isPublic} + /> + @@ -118,9 +157,46 @@ export const DetailPage = () => { - {/* */} - - {/* */} + + + + + + + + + + {isLoggedin && email === autherEmail && ( + + + + + )} ); }; diff --git a/src/widgets/diary-text/ui/DiaryText.styled.ts b/src/widgets/diary-text/ui/DiaryText.styled.ts index 74005d9..de92178 100644 --- a/src/widgets/diary-text/ui/DiaryText.styled.ts +++ b/src/widgets/diary-text/ui/DiaryText.styled.ts @@ -1,11 +1,14 @@ import theme from '@/app/styles/theme'; import styled from 'styled-components'; -export const StyledDiaryTextContainer = styled.div``; +export const StyledDiaryTextContainer = styled.div` + width: 100%; +`; export const StyledDiaryTitleContainer = styled.p` display: flex; - justify-content: space-between; + justify-content: right; + align-items: center; width: 100%; margin: 40px 0 0 0; padding: 0; @@ -20,6 +23,7 @@ export const StyledDiaryDate = styled.p` `; export const StyledDiaryTitle = styled.p` + width: 100%; font-size: 28px; font-weight: 600; text-align: center; @@ -27,6 +31,10 @@ export const StyledDiaryTitle = styled.p` margin: 0; padding: 0; `; +export const StyledVisibilityButton = styled.div` + position: absolute; +`; + export const StyledDiaryAuthor = styled.p` font-size: 16px; font-weight: 500; @@ -43,6 +51,8 @@ export const StyledDiaryUpdateDate = styled.p` padding: 40px 0 0 0; `; export const StyledDiaryContent = styled.p` + line-height: 180%; + min-height: 400px; font-size: 16px; font-weight: 500; color: ${theme.colors.gray_dark}; diff --git a/src/widgets/diary-text/ui/DiaryText.tsx b/src/widgets/diary-text/ui/DiaryText.tsx index 21ab18e..2411d18 100644 --- a/src/widgets/diary-text/ui/DiaryText.tsx +++ b/src/widgets/diary-text/ui/DiaryText.tsx @@ -8,7 +8,8 @@ import { StyledDiaryTextContainer, StyledDiaryTitle, StyledDiaryTitleContainer, - StyledDiaryUpdateDate + StyledDiaryUpdateDate, + StyledVisibilityButton } from './DiaryText.styled'; import { VisibilityButton } from '@/features/diary-write'; @@ -27,11 +28,13 @@ const DiaryText = ({ {titleDate} {title} - onVisibilityChange(!isPublic)} // isPublic 값을 반전시켜서 전달 - /> + + onVisibilityChange(!isPublic)} // isPublic 값을 반전시켜서 전달 + /> + {author} {updateDate}