Merge branch 'main' of https://github.com/prgrms-fe-devcourse/NFE1-1-…

…3-MOODI
prgrms-fe-devcourse · Nov 6, 2024 · 84633a2 · 84633a2
2 parents fbd3e06 + cb00d9b
commit 84633a2
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 31 deletions.
diff --git 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}`);
     }

diff --git 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
@@ -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
@@ -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<ContentBoxProps> = ({
     time,
     content,
     emotion,
-    userName,
+    authorName,
     id
 }) => {
     // 시간차이 계산
@@ -45,22 +46,28 @@ const ContentBox: React.FC<ContentBoxProps> = ({
     } else {
         timeAgo = `${diffInMinutes}분전`;
     }
+    const { email, userName, isLoggedin, setUserInfo } = useAuthStore();
     const token =
-        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IuyCrOyaqeyekDIiLCJlbWFpbCI6InVzZXIyQGV4YW1wbGUuY29tIiwiaWF0IjoxNzMwODI0NDI0LCJleHAiOjE3MzA4MzUyMjR9.iGY1f5Uh0bsKa_nJuVy72YeH-bYF_MK3l6VQQwAP3XE';
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Iuq5gOuvvOykgCIsImVtYWlsIjoiYW5uYXdhNkBuYXZlci5jb20iLCJpYXQiOjE3MzA4NTUwNzAsImV4cCI6MTczMDg2NTg3MH0.CHiBt6xvfygJc0CwdPYrPSigfejnkJZStwAxfE8CHXE';
 
     return (
         <Wrapper>
             <Top>
                 <Title>{title}</Title>
-                <Name>{userName}</Name>
+                <Name>{authorName}</Name>
             </Top>
             <Paragraph>{content}</Paragraph>
             <Bottom>
                 <Time>{timeAgo}</Time>
-                <Reaction>
+                <Reaction
+                    onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }}
+                >
                     <ReactionSelector
                         diaryId={id}
-                        userEmail="user2@example.com"
+                        userEmail={email}
                         isHorizontal
                         isAddBtnVisible={false}
                         token={token}

diff --git a/src/features/diary-list-item/diary-list-item-ui/content-box/ContentBoxCss.ts b/src/features/diary-list-item/diary-list-item-ui/content-box/ContentBoxCss.ts
@@ -32,6 +32,7 @@ export const Name = styled.p`
 `;
 
 export const Bottom = styled.div`
+    width: 100%;
     height: 30px;
     display: flex;
     align-items: center;
@@ -44,7 +45,7 @@ export const Time = styled.div`
 `;
 
 export const Reaction = styled.div`
-    width: 100%;
+    width: 80%;
 `;
 
 export const Emotion = styled.div<{ imgPath: string | null }>`

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
@@ -21,7 +21,7 @@ const DiaryListItemUi: React.FC<DiaryListItemProps> = ({ data }) => {
                     time={data.updated_date}
                     content={data.content}
                     emotion={data.emotion}
-                    userName={data.author_username}
+                    authorName={data.author_username}
                     id={data.id}
                 />
             </Wrapper>

diff --git 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
@@ -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<DiaryData | null>(null);
 
@@ -65,30 +78,56 @@ 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,
         music_title: songTitle,
         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
     );
 
     return (
         <Container>
-            <ContentContainer>{content}</ContentContainer>
+            <ContentContainer>
+                <DiaryText
+                    titleDate={transTitleDate}
+                    title={title}
+                    author={autherEmail}
+                    updateDate={`작성일 ${transUpdatedDate}`}
+                    diaryContent={content}
+                    isPublic={isPublic}
+                    onVisibilityChange={() => !isPublic}
+                />
+            </ContentContainer>
 
             <Wrap>
                 <EmotionMoodWrap>
@@ -118,9 +157,46 @@ export const DetailPage = () => {
                 </MusicContainer>
             </Wrap>
 
-            {/* <ReactionContainer></ReactionContainer> */}
-
-            {/* <ButtonContainer></ButtonContainer> */}
+            <ReactionShareWrap>
+                <ReactionContainer>
+                    <ReactionSelector
+                        diaryId={diaryId}
+                        userEmail={email}
+                        isHorizontal={false}
+                        isAddBtnVisible={isLoggedin}
+                        token={token}
+                    />
+                </ReactionContainer>
+                <ShareButtonContainer>
+                    <ShareButton />
+                </ShareButtonContainer>
+            </ReactionShareWrap>
+
+            {isLoggedin && email === autherEmail && (
+                <ButtonContainer>
+                    <Button
+                        isActive={false}
+                        height="55px"
+                        width="100%"
+                        fontSize="20px"
+                        onClick={() => {
+                            console.log('수정버튼 클릭');
+                        }}
+                    >
+                        수정하기
+                    </Button>
+                    <Button
+                        height="55px"
+                        width="100%"
+                        fontSize="20px"
+                        onClick={() => {
+                            console.log('삭제버튼 클릭');
+                        }}
+                    >
+                        삭제하기
+                    </Button>
+                </ButtonContainer>
+            )}
         </Container>
     );
 };
diff --git 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<reactionBtnProps>`
         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: