Skip to content

Commit

Permalink
feat : 일기 리스트 아이템 컴포넌트 개발 완료 (#81)
Browse files Browse the repository at this point in the history
  • Loading branch information
minjoon97 authored Oct 31, 2024
1 parent 53b398a commit 70bed81
Show file tree
Hide file tree
Showing 7 changed files with 120 additions and 26 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
}
Original file line number Diff line number Diff line change
Expand Up @@ -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)} />
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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;
}
`;
4 changes: 3 additions & 1 deletion src/features/diary-list-item/diary-list-item-ui/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
6 changes: 6 additions & 0 deletions src/features/diary-list-item/diary-list-item-ui/indexCss.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;
34 changes: 16 additions & 18 deletions src/pages/MainPage/index.tsx
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand Down

0 comments on commit 70bed81

Please sign in to comment.