From 9754b69a9b3ba2b4fcd3a04b12a9debd16f1d029 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=B1=84=EB=AF=BC?= <87525734+cmlim0070@users.noreply.github.com> Date: Wed, 6 Nov 2024 10:26:20 +0900 Subject: [PATCH 1/3] =?UTF-8?q?chore=20:=20=EB=8B=AC=EB=A0=A5=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=9D=BC=EA=B8=B0=20=EB=94=94=ED=85=8C=EC=9D=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=84=98=EC=96=B4=EA=B0=80=EB=8A=94=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=8C=85=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?(#200)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/calendar/calendar-logic/calendarLogic.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/calendar/calendar-logic/calendarLogic.tsx b/src/features/calendar/calendar-logic/calendarLogic.tsx index f277869..73c8baa 100644 --- a/src/features/calendar/calendar-logic/calendarLogic.tsx +++ b/src/features/calendar/calendar-logic/calendarLogic.tsx @@ -12,7 +12,7 @@ export const handleTileClick = ( const dateString = moment(date).format('YYYY-MM-DD'); if (id) { - onNavigate(`/diary/${id}`); + onNavigate(`/detail/${id}`); } else { onNavigate(`/diaryWrite/${dateString}`); } From ddd061b7bab7c05f955c3bf74f68aa9a802cf5f9 Mon Sep 17 00:00:00 2001 From: 710minjoon <66014783+minjoon97@users.noreply.github.com> Date: Wed, 6 Nov 2024 11:01:23 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix=20:=20reaction=EC=97=B0=EA=B2=B0=20?= =?UTF-8?q?=EB=B0=8F=20calendar=EC=98=B5=EC=85=98=EC=88=98=EC=A0=95=20(#20?= =?UTF-8?q?2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix : calendar수정 및 reaction추가 - 테스트중 * fix : calendar수정 및 reaction추가 - 테스트중 --- .../calendar/calendar-ui/CalendarUi.tsx | 11 +++++++++++ .../calendar/calendar-ui/calendarUiCss.ts | 9 +++++++++ .../content-box/ContentBox.tsx | 19 +++++++++++++------ .../content-box/ContentBoxCss.ts | 3 ++- .../diary-list-item-ui/index.tsx | 2 +- .../ui/ReactionButton.styled.ts | 2 +- 6 files changed, 37 insertions(+), 9 deletions(-) diff --git a/src/features/calendar/calendar-ui/CalendarUi.tsx b/src/features/calendar/calendar-ui/CalendarUi.tsx index 85d2f95..ea8ca24 100644 --- a/src/features/calendar/calendar-ui/CalendarUi.tsx +++ b/src/features/calendar/calendar-ui/CalendarUi.tsx @@ -22,6 +22,13 @@ const CalendarUi: React.FC = () => { const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const { email, userName, isLoggedin, setUserInfo } = useAuthStore(); + // 오늘날짜 이후로 클릭 불가 + const isFutureDate = (date: Date) => { + const today = new Date(); + today.setHours(0, 0, 0, 0); // 오늘 날짜의 시간을 0으로 설정하여 비교 + return date > today; // 미래 날짜인지 확인 + }; + // fetchedData에 데이터를 저장 const loadDates = async () => { const data = await calendarDataFetch(activeMonth, email); @@ -48,6 +55,9 @@ const CalendarUi: React.FC = () => { (entry) => entry.title_date === dateString ); + if (isFutureDate(dateparam)) { + return 'futureDate'; + } return isCheckedDate ? 'diary-date' : 'nodiary-date'; }; @@ -87,6 +97,7 @@ const CalendarUi: React.FC = () => { handleTileClick(date, event, (path) => navigate(path)) } tileContent={getTileContent} + tileDisabled={({ date }) => isFutureDate(date)} /> ); }; diff --git a/src/features/calendar/calendar-ui/calendarUiCss.ts b/src/features/calendar/calendar-ui/calendarUiCss.ts index 1f1f9d6..da1e4d7 100644 --- a/src/features/calendar/calendar-ui/calendarUiCss.ts +++ b/src/features/calendar/calendar-ui/calendarUiCss.ts @@ -118,6 +118,15 @@ export const StyledCalendar = styled(Calendar).attrs({ } } + // 오늘 이후의 disabled날 + .futureDate { + border: 1px solid rgba(0, 0, 0, 0.08); + &:hover { + background-color: white; + cursor: default; + } + } + // 현재날짜 .react-calendar__tile--now { background-color: #ffeee9; diff --git a/src/features/diary-list-item/diary-list-item-ui/content-box/ContentBox.tsx b/src/features/diary-list-item/diary-list-item-ui/content-box/ContentBox.tsx index a6580b3..cb0da58 100644 --- a/src/features/diary-list-item/diary-list-item-ui/content-box/ContentBox.tsx +++ b/src/features/diary-list-item/diary-list-item-ui/content-box/ContentBox.tsx @@ -11,13 +11,14 @@ import { Emotion } from './ContentBoxCss'; import { getEmoticonPath } from '@/shared/model/getEmotionPath'; +import { useAuthStore } from '@/features/login/hooks/useAuthStore'; interface ContentBoxProps { title: string; time: string; content: string; emotion: string; - userName: string; + authorName: string; id: number; } @@ -26,7 +27,7 @@ const ContentBox: React.FC = ({ time, content, emotion, - userName, + authorName, id }) => { // 시간차이 계산 @@ -45,22 +46,28 @@ const ContentBox: React.FC = ({ } else { timeAgo = `${diffInMinutes}분전`; } + const { email, userName, isLoggedin, setUserInfo } = useAuthStore(); const token = - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IuyCrOyaqeyekDIiLCJlbWFpbCI6InVzZXIyQGV4YW1wbGUuY29tIiwiaWF0IjoxNzMwODI0NDI0LCJleHAiOjE3MzA4MzUyMjR9.iGY1f5Uh0bsKa_nJuVy72YeH-bYF_MK3l6VQQwAP3XE'; + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Iuq5gOuvvOykgCIsImVtYWlsIjoiYW5uYXdhNkBuYXZlci5jb20iLCJpYXQiOjE3MzA4NTUwNzAsImV4cCI6MTczMDg2NTg3MH0.CHiBt6xvfygJc0CwdPYrPSigfejnkJZStwAxfE8CHXE'; return ( {title} - {userName} + {authorName} {content} - + { + event.preventDefault(); + event.stopPropagation(); + }} + > ` diff --git a/src/features/diary-list-item/diary-list-item-ui/index.tsx b/src/features/diary-list-item/diary-list-item-ui/index.tsx index 0a6441c..4216924 100644 --- a/src/features/diary-list-item/diary-list-item-ui/index.tsx +++ b/src/features/diary-list-item/diary-list-item-ui/index.tsx @@ -21,7 +21,7 @@ const DiaryListItemUi: React.FC = ({ data }) => { time={data.updated_date} content={data.content} emotion={data.emotion} - userName={data.author_username} + authorName={data.author_username} id={data.id} /> diff --git a/src/shared/ReactionButton/ui/ReactionButton.styled.ts b/src/shared/ReactionButton/ui/ReactionButton.styled.ts index 736961b..d90f124 100644 --- a/src/shared/ReactionButton/ui/ReactionButton.styled.ts +++ b/src/shared/ReactionButton/ui/ReactionButton.styled.ts @@ -18,7 +18,7 @@ export const StyledReactionButton = styled.button` clicked ? theme.colors.orange_selected : theme.colors.white_bg}; border: 1px solid ${({ clicked }) => - clicked ? theme.colors.orange_primary : theme.colors.gray_normal}; + clicked ? theme.colors.orange_primary : 'rgba(0,0,0,0.2)'}; border-radius: ${({ isHorizontal }) => (isHorizontal ? '30px' : '20px')}; cursor: pointer; transition: 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 3/3] =?UTF-8?q?feat=20:=20=EC=9D=BC=EA=B8=B0=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EB=B0=8F=20=EB=A6=AC=EC=95=A1=EC=85=98=20=EC=A4=91?= =?UTF-8?q?=EA=B0=84=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}