feat : 일기 리스트 아이템 컴포넌트 개발 완료 (#81)

prgrms-fe-devcourse · Oct 31, 2024 · 70bed81 · 70bed81
1 parent 53b398a
commit 70bed81
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: '[email protected]',
-    reactions: [
-        {
-            id: 34,
-            type: '화나요',
-            user_email: '[email protected]',
-            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: '[email protected]',
+    music_title: '노래제목',
+    music_imgurl: 'https://avatars.githubusercontent.com/u/88082564?s=200&v=4',
+    music_id: '노래아이디',
+    artist: '가수',
+    author_username: '김민준',
+    reactions: []
 };
 
 const MainPage = () => {