feat : 일기내용 및 리액션 중간 점검 (#203)

* feat : 일기내용 및 리액션 중간 점검 * chore : 리액션 읽기 조회용 변경
prgrms-fe-devcourse · Nov 6, 2024 · cb00d9b · cb00d9b
1 parent ddd061b
commit cb00d9b
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 21 deletions.
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/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,13 +23,18 @@ export const StyledDiaryDate = styled.p`
 `;
 
 export const StyledDiaryTitle = styled.p`
+    width: 100%;
     font-size: 28px;
     font-weight: 600;
     text-align: center;
     flex-grow: 1;
     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
@@ -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 = ({
             <StyledDiaryDate>{titleDate}</StyledDiaryDate>
             <StyledDiaryTitleContainer>
                 <StyledDiaryTitle>{title}</StyledDiaryTitle>
-                <VisibilityButton
-                    isPublic={isPublic}
-                    isActive={false}
-                    onClick={() => onVisibilityChange(!isPublic)} // isPublic 값을 반전시켜서 전달
-                />
+                <StyledVisibilityButton>
+                    <VisibilityButton
+                        isPublic={isPublic}
+                        isActive={false}
+                        onClick={() => onVisibilityChange(!isPublic)} // isPublic 값을 반전시켜서 전달
+                    />
+                </StyledVisibilityButton>
             </StyledDiaryTitleContainer>
             <StyledDiaryAuthor>{author}</StyledDiaryAuthor>
             <StyledDiaryUpdateDate>{updateDate}</StyledDiaryUpdateDate>