feat : 일기 조회 페이지 부분 구현 (#187)

prgrms-fe-devcourse · Nov 5, 2024 · 0ad31ba · 0ad31ba
1 parent 52d29aa
commit 0ad31ba
Show file tree

Hide file tree

Showing 9 changed files with 237 additions and 35 deletions.
diff --git a/src/app/router.tsx b/src/app/router.tsx
@@ -6,6 +6,7 @@ import LoginPage from '@/pages/LoginPage/LoginPage';
 import { DiaryWritePage } from '@/pages/DiaryWritePage';
 import SignPage from '@/pages/SignPage/SignPage';
 import MyPage from '@/pages/MyPage/MyPage';
+import { DetailPage } from '@/pages/DetailPage';
 import AccountPage from '@/pages/AccountPage/AccountPage';
 
 const router = createBrowserRouter([
@@ -37,10 +38,14 @@ const router = createBrowserRouter([
                 path: '/my-page',
                 element: <MyPage />
             },
+            {
+                path: '/detail/:id',
+                element: <DetailPage />
+            },
             {
                 path: '/account',
                 element: <AccountPage />
-            }
+            },
         ]
     }
 ]);

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
@@ -2,24 +2,30 @@ import { Wrapper } from './indexCss';
 import ImageBox from './image-box/ImageBox';
 import ContentBox from './content-box/ContentBox';
 import { DiaryListItemType } from '../diary-list-item-type/DiaryListItemType';
+import { Link, useNavigate } from 'react-router-dom';
 
 interface DiaryListItemProps {
     data: DiaryListItemType;
 }
 
 const DiaryListItemUi: React.FC<DiaryListItemProps> = ({ data }) => {
     return (
-        <Wrapper>
-            <ImageBox imgUrl={data.music_imgurl} musicName={data.music_title} />
-            <ContentBox
-                title={data.title}
-                time={data.updated_date}
-                content={data.content}
-                emotion={data.emotion}
-                userName={data.author_username}
-                id={data.id}
-            />
-        </Wrapper>
+        <Link to={`/detail/${data.id}`}>
+            <Wrapper>
+                <ImageBox
+                    imgUrl={data.music_imgurl}
+                    musicName={data.music_title}
+                />
+                <ContentBox
+                    title={data.title}
+                    time={data.updated_date}
+                    content={data.content}
+                    emotion={data.emotion}
+                    userName={data.author_username}
+                    id={data.id}
+                />
+            </Wrapper>
+        </Link>
     );
 };
 

diff --git a/src/pages/DetailPage/index.ts b/src/pages/DetailPage/index.ts
@@ -0,0 +1 @@
+export { DetailPage } from './ui/DetailPage';
diff --git a/src/pages/DetailPage/ui/DetailPage.styled.ts b/src/pages/DetailPage/ui/DetailPage.styled.ts
@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
+export const ContentContainer = styled.div`
+    background-color: rgb(0, 0, 0, 0.3);
+    height: 400px;
+    width: 100%
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
+export const Wrap = styled.div`
+    width: 100%;
+    max-width: 960px;
+    display: flex;
+    // flex-direction: column; // 모바일 버전일 때
+    align-items: stretch;
+
+    gap: 10px;
+`;
+
+export const MusicContainer = styled.div`
+    flex: 1;
+`;
+
+export const EmotionMoodWrap = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    gap: 10px;
+`;
+
+export const MoodContainer = styled.div`
+    flex: 1;
+    width: 100%;
+`;
+
+export const EmotionWrap = styled.div`
+    flex: 1;
+    width: 100%;
+    display: flex;
+
+    gap: 10px;
+`;
+
+export const MainEmotionContainer = styled.div`
+    flex: 1.2;
+`;
+export const SubEmotionContainer = styled.div`
+    flex: 2;
+`;
diff --git a/src/pages/DetailPage/ui/DetailPage.tsx b/src/pages/DetailPage/ui/DetailPage.tsx
@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import {
+    Container,
+    ContentContainer,
+    Wrap,
+    EmotionMoodWrap,
+    EmotionWrap,
+    MusicContainer,
+    MoodContainer,
+    MainEmotionContainer,
+    SubEmotionContainer
+} from './DetailPage.styled';
+import { ShowMusicContainer } from '@/widgets/show-music';
+import { ShowMoodContainer } from '@/widgets/show-mood';
+import { ShowMainEmotionContainer } from '@/widgets/show-main-emotion';
+import { ShowSubEmotionContainer } from '@/widgets/show-sub-emotion';
+
+import { emotionMapping, Emotions } from '@/shared/model/EmotionEnum';
+import { ConditionType } from '@/shared/model/conditionTypes';
+
+interface DiaryData {
+    title: string;
+    content: string;
+    is_public: boolean;
+    title_date: Date;
+    updated_date: Date;
+    author_email: string;
+    // author_username: string;
+
+    mood: ConditionType;
+    emotion: string;
+    sub_emotion: string;
+    music_url: string;
+    music_imgurl: string;
+    music_title: string;
+    artist: string;
+
+    reactions: string;
+}
+
+export const DetailPage = () => {
+    const { id } = useParams();
+    const [data, setData] = useState<DiaryData | null>(null);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const response = await fetch(
+                    `https://td3axvf8x7.execute-api.ap-northeast-2.amazonaws.com/moodi/diary/${id}`
+                );
+                const result: DiaryData = await response.json();
+                setData(result);
+            } catch (error) {
+                console.error('Error:', error);
+            }
+        };
+
+        fetchData();
+    }, [id]);
+
+    if (!data) {
+        return <div>Loading...</div>; // 데이터 로딩 중 표시
+    }
+
+    // 구조 분해로 변수 할당
+    const {
+        title,
+        content,
+        is_public: isPublic,
+
+        mood,
+        emotion,
+        sub_emotion: subEmotion,
+        title_date: titleDate,
+        updated_date: updatedDate,
+
+        music_url: youtubeId,
+        music_imgurl: albumCover,
+        music_title: songTitle,
+        artist: artistName
+    } = data;
+
+    // 서브 감정을 매핑
+    const transSubEmotion = JSON.parse(subEmotion).map(
+        (emo: string) => emotionMapping[emo] ?? emo
+    );
+
+    return (
+        <Container>
+            <ContentContainer>{content}</ContentContainer>
+
+            <Wrap>
+                <EmotionMoodWrap>
+                    <MoodContainer>
+                        <ShowMoodContainer mood={mood} />
+                    </MoodContainer>
+                    <EmotionWrap>
+                        <MainEmotionContainer>
+                            <ShowMainEmotionContainer
+                                emotion={emotionMapping[emotion]}
+                            />
+                        </MainEmotionContainer>
+                        <SubEmotionContainer>
+                            <ShowSubEmotionContainer
+                                subEmotions={transSubEmotion}
+                            />
+                        </SubEmotionContainer>
+                    </EmotionWrap>
+                </EmotionMoodWrap>
+                <MusicContainer>
+                    <ShowMusicContainer
+                        youtubeId={youtubeId}
+                        thumbnailUrl={albumCover}
+                        title={songTitle}
+                        artist={artistName}
+                    />
+                </MusicContainer>
+            </Wrap>
+
+            {/* <ReactionContainer></ReactionContainer> */}
+
+            {/* <ButtonContainer></ButtonContainer> */}
+        </Container>
+    );
+};
diff --git a/src/widgets/show-main-emotion/ui/ShowMainEmotionContainer.styles.ts b/src/widgets/show-main-emotion/ui/ShowMainEmotionContainer.styles.ts
@@ -1,14 +1,16 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-    // position: absolute;
-    // width: 100%;
-    height: 250px;
+    height: 100%;
     background-color: #ffffff;
     border-radius: 10px;
     padding: 30px;
     box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.13);
 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
     font-size: 16px;
     font-weight: bold;
     font-family: 'Pretendard', sans-serif;
@@ -22,19 +24,14 @@ export const SubContainer = styled.div`
 `;
 
 export const EmotionContainer = styled.div`
-    position: absolute;
     display: flex;
-    height: 100px;
-    width: 70px;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: #ffffff;
     border-radius: 10px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     padding: 20px;
-    left: 50%;
-    transform: translateX(-50%);
     gap: 10px;
 
     font-weight: normal;

diff --git a/src/widgets/show-mood/ui/ShowMoodContainer.styled.ts b/src/widgets/show-mood/ui/ShowMoodContainer.styled.ts
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-    // width: 100%;
+    width: 100%;
+    height: 100%;
     background-color: #ffffff;
     border-radius: 10px;
     padding: 30px;
@@ -12,6 +13,13 @@ export const Container = styled.div`
     font-family: 'Pretendard', sans-serif;
 `;
 
+export const SubContainer = styled.div`
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
 export const MoodContainer = styled.div`
     height: 150px;
     display: flex;

diff --git a/src/widgets/show-mood/ui/ShowMoodContainer.tsx b/src/widgets/show-mood/ui/ShowMoodContainer.tsx
@@ -3,7 +3,8 @@ import { ShowMoodContainerProps } from '../model/type';
 import {
     Container,
     MoodContainer,
-    DotContainer
+    DotContainer,
+    SubContainer
 } from './ShowMoodContainer.styled';
 import MoodDot from '@/shared/ui/MoodDot/MoodDot';
 
@@ -23,16 +24,18 @@ export const ShowMoodContainer = ({ mood }: ShowMoodContainerProps) => {
     return (
         <Container>
             기분상태
-            <MoodContainer>
-                <DotContainer>
-                    <MoodDot isActive={activeDots[0]} mood={mood} />
-                    <MoodDot isActive={activeDots[1]} mood={mood} />
-                    <MoodDot isActive={activeDots[2]} mood={mood} />
-                    <MoodDot isActive={activeDots[3]} mood={mood} />
-                    <MoodDot isActive={activeDots[4]} mood={mood} />
-                </DotContainer>
-                {mood}
-            </MoodContainer>
+            <SubContainer>
+                <MoodContainer>
+                    <DotContainer>
+                        <MoodDot isActive={activeDots[0]} mood={mood} />
+                        <MoodDot isActive={activeDots[1]} mood={mood} />
+                        <MoodDot isActive={activeDots[2]} mood={mood} />
+                        <MoodDot isActive={activeDots[3]} mood={mood} />
+                        <MoodDot isActive={activeDots[4]} mood={mood} />
+                    </DotContainer>
+                    {mood}
+                </MoodContainer>
+            </SubContainer>
         </Container>
     );
 };
diff --git a/src/widgets/show-sub-emotion/ui/ShowSubEmotionContainer.styled.ts b/src/widgets/show-sub-emotion/ui/ShowSubEmotionContainer.styled.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const Container = styled.div`
     // position: absolute;
     // width: 100%;
-    height: 250px;
+    height: 100%;
     background-color: #ffffff;
     border-radius: 10px;
     padding: 30px;
@@ -30,8 +30,6 @@ export const EmotionsContainer = styled.div`
 
 export const EmotionContainer = styled.div`
     display: flex;
-    height: 30px;
-    // width: 100px;
     align-items: center;
     justify-content: center;
     background-color: #ffffff;