From 70bed813c9fbb51bbea02bff91788b61b7b1d7ca Mon Sep 17 00:00:00 2001
From: 710minjoon <66014783+minjoon97@users.noreply.github.com>
Date: Thu, 31 Oct 2024 11:39:20 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=9D=BC=EA=B8=B0=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EB=B0=9C=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20(#81)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../diary-list-item-type/DiaryListItemType.ts |  7 ++-
 .../content-box/ContentBox.tsx                | 31 +++++++++--
 .../diary-list-item-ui/image-box/ImageBox.tsx | 13 ++++-
 .../image-box/ImageBoxCss.ts                  | 51 ++++++++++++++++++-
 .../diary-list-item-ui/index.tsx              |  4 +-
 .../diary-list-item-ui/indexCss.ts            |  6 +++
 src/pages/MainPage/index.tsx                  | 34 ++++++-------
 7 files changed, 120 insertions(+), 26 deletions(-)

diff --git a/src/features/diary-list-item/diary-list-item-type/DiaryListItemType.ts b/src/features/diary-list-item/diary-list-item-type/DiaryListItemType.ts
index 627ec1a..1f9fef9 100644
--- a/src/features/diary-list-item/diary-list-item-type/DiaryListItemType.ts
+++ b/src/features/diary-list-item/diary-list-item-type/DiaryListItemType.ts
@@ -18,9 +18,14 @@ export interface DiaryListItemType {
     music_url: string;
     mood: string;
     emotion: string;
-    sub_emotion: SubEmotionType | string; // string type needed if it's stored as JSON string
+    sub_emotion: SubEmotionType | null; // string type needed if it's stored as JSON string
     created_date: string;
     updated_date: string;
     author_email: string;
+    music_title: string;
+    music_imgurl: string;
+    music_id: string;
+    artist: string;
+    author_username: string;
     reactions: ReactionType[];
 }
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 698382d..2a14f71 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
@@ -13,20 +13,45 @@ import { getEmoticonPath } from '@/shared/model/getEmotionPath';
 
 interface ContentBoxProps {
     title: string;
+    time: string;
     content: string;
     emotion: string;
+    userName: string;
 }
 
-const ContentBox: React.FC<ContentBoxProps> = ({ title, content, emotion }) => {
+const ContentBox: React.FC<ContentBoxProps> = ({
+    title,
+    time,
+    content,
+    emotion,
+    userName
+}) => {
+    // 시간차이 계산
+    const targetDate = new Date(time);
+    const currentDate = new Date();
+    const diffInMilliseconds = currentDate.getTime() - targetDate.getTime();
+    const diffInMinutes = Math.floor(diffInMilliseconds / (1000 * 60));
+    let timeAgo = '';
+    if (diffInMinutes > 60) {
+        const diffInHours = Math.floor(diffInMinutes / 60);
+        if (diffInHours > 24) {
+            timeAgo = `${Math.floor(diffInMinutes / (60 * 24))}일전`;
+        } else {
+            timeAgo = `${diffInHours}시간전`;
+        }
+    } else {
+        timeAgo = `${diffInMinutes}분전`;
+    }
+
     return (
         <Wrapper>
             <Top>
                 <Title>{title}</Title>
-                <Name>김민준</Name>
+                <Name>{userName}</Name>
             </Top>
             <Paragraph>{content}</Paragraph>
             <Bottom>
-                <Time>30분전</Time>
+                <Time>{timeAgo}</Time>
                 <Reaction />
             </Bottom>
             <Emotion imgPath={getEmoticonPath(emotion)} />
diff --git a/src/features/diary-list-item/diary-list-item-ui/image-box/ImageBox.tsx b/src/features/diary-list-item/diary-list-item-ui/image-box/ImageBox.tsx
index 9c6bb62..7f3b31d 100644
--- a/src/features/diary-list-item/diary-list-item-ui/image-box/ImageBox.tsx
+++ b/src/features/diary-list-item/diary-list-item-ui/image-box/ImageBox.tsx
@@ -1,7 +1,16 @@
 import { Box } from './ImageBoxCss';
 
-const ImageBox = () => {
-    return <Box />;
+interface ImageBoxProps {
+    imgUrl: string;
+    musicName: string;
+}
+
+const ImageBox: React.FC<ImageBoxProps> = ({ imgUrl, musicName }) => {
+    return (
+        <Box imgUrl={imgUrl}>
+            <p>{musicName}</p>
+        </Box>
+    );
 };
 
 export default ImageBox;
diff --git a/src/features/diary-list-item/diary-list-item-ui/image-box/ImageBoxCss.ts b/src/features/diary-list-item/diary-list-item-ui/image-box/ImageBoxCss.ts
index 3e712ac..5faf2b5 100644
--- a/src/features/diary-list-item/diary-list-item-ui/image-box/ImageBoxCss.ts
+++ b/src/features/diary-list-item/diary-list-item-ui/image-box/ImageBoxCss.ts
@@ -1,8 +1,57 @@
 import styled from 'styled-components';
 
-export const Box = styled.div`
+export const Box = styled.div<{ imgUrl: string }>`
     width: 135px;
     height: 115px;
     border: 1px solid black;
     border-radius: 15px;
+    background-image: url(${(props) => props.imgUrl});
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: end;
+
+    &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+        transition: 0.2s;
+        opacity: 0;
+    }
+
+    &:hover::after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+        opacity: 1;
+    }
+
+    p {
+        opacity: 0;
+        z-index: 99;
+        color: white;
+        transition: 0.2s;
+        font-size: 14px;
+        padding-bottom: 8px;
+    }
+
+    &:hover > p {
+        opacity: 1;
+        z-index: 99;
+        color: white;
+    }
 `;
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 bc368cf..8b38bbe 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
@@ -10,11 +10,13 @@ interface DiaryListItemProps {
 const DiaryListItemUi: React.FC<DiaryListItemProps> = ({ data }) => {
     return (
         <Wrapper>
-            <ImageBox />
+            <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}
             />
         </Wrapper>
     );
diff --git a/src/features/diary-list-item/diary-list-item-ui/indexCss.ts b/src/features/diary-list-item/diary-list-item-ui/indexCss.ts
index dd35ce7..19ab75a 100644
--- a/src/features/diary-list-item/diary-list-item-ui/indexCss.ts
+++ b/src/features/diary-list-item/diary-list-item-ui/indexCss.ts
@@ -12,4 +12,10 @@ export const Wrapper = styled.div`
     justify-content: space-between;
     align-items: center;
     position: relative;
+    transition: 0.2s;
+
+    &:hover {
+        cursor: pointer;
+        background-color: #dedede;
+    }
 `;
diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
index 9b88dd1..9f694e8 100644
--- a/src/pages/MainPage/index.tsx
+++ b/src/pages/MainPage/index.tsx
@@ -1,26 +1,24 @@
 import DiaryListItem from '@/features/diary-list-item';
 
 const item = {
-    id: 31,
-    title: '오늘 나의 일기',
+    id: 220,
+    title: '개발일기2',
     content:
-        '신나는 제주도 여행 1일차다. 정말 신난다. 신나는 제주도 여행 신나는 제주도 여행 1일차다. 정말 신난다. 신나는 제주도 여행 신나는 제주도 여행 1일차다. 정말 신난다. 신나는 제주도 여행 신나는 제주도 여행 1일차다. 정말 신난다. 신나는 제주도 여행 신나는 제주도 여행 1일차다. 정말 신난다. 신나는 제주도 여행 신나는 제주도 여행 1일차다. 정말 신난다. 신나는 제주도 여행',
+        '개발일기의 내용2개발일기의 내용2개발일기의 내용2개발일기의 내용2개발일기의 내용2개발일기의 내용2개발일기의 내용2개발일기의 내용2개발일기의 내용2개발일기의 내용2',
     is_public: 1,
-    music_url: 'http://example.com/music.mp3',
-    mood: '매우 나쁨',
-    emotion: '자신 있어요',
-    sub_emotion: '{"sub_mood": "행복", "intensity": 8}',
-    created_date: '2024-10-27T07:12:33.000Z',
-    updated_date: '2024-10-28T03:39:36.000Z',
-    author_email: 'alice.wonder@example.com',
-    reactions: [
-        {
-            id: 34,
-            type: '화나요',
-            user_email: 'alice.wonder@example.com',
-            created_at: '2024-10-24T03:58:35.000Z'
-        }
-    ]
+    music_url: 'https://example.com/music.mp3',
+    mood: '좋음',
+    emotion: '감사해요',
+    sub_emotion: null,
+    created_date: '2024-11-10T11:48:50.000Z',
+    updated_date: '2024-10-30T07:51:23.000Z',
+    author_email: 'annawa6@naver.com.com',
+    music_title: '노래제목',
+    music_imgurl: 'https://avatars.githubusercontent.com/u/88082564?s=200&v=4',
+    music_id: '노래아이디',
+    artist: '가수',
+    author_username: '김민준',
+    reactions: []
 };
 
 const MainPage = () => {