Skip to content

Commit e294319

Browse files
authored
Merge pull request #111 from cskime/feature/#110
[#110] 이미지 로딩 중 배경 색상 표시
2 parents 2612a1f + 134f54f commit e294319

File tree

3 files changed

+93
-37
lines changed

3 files changed

+93
-37
lines changed

src/components/avatar/avatar.jsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import { useState } from "react";
12
import styled, { css } from "styled-components";
23
import defaultAvatarImage from "../../assets/ic-person.svg";
34
import Colors from "../color/colors";
5+
import SkeletonLoading from "../loading/skeleton-loading";
46
import AVATAR_SIZE from "./avatar-size";
57

68
const borderWidth = {
@@ -19,8 +21,8 @@ const avatarStyle = css`
1921

2022
const StyledAvatar = styled.div`
2123
${avatarStyle}
22-
border: ${({ $size }) => borderWidth[`${$size}`]}px solid ${({ $color }) =>
23-
$color};
24+
border: ${({ $size }) => borderWidth[`${$size}`]}px solid
25+
${({ $color }) => $color};
2426
2527
img {
2628
width: 100%;
@@ -46,10 +48,22 @@ function Avatar({
4648
size = AVATAR_SIZE.medium,
4749
color = Colors.gray(200),
4850
}) {
49-
const img = <img src={source ?? defaultAvatarImage} alt="사용자 사진" />;
51+
const [isLoading, setLoading] = useState(source ?? false);
52+
const handleImageLoad = () => {
53+
setLoading(false);
54+
};
55+
56+
const img = (
57+
<img
58+
src={source ?? defaultAvatarImage}
59+
alt="사용자 사진"
60+
onLoad={handleImageLoad}
61+
/>
62+
);
63+
5064
return source ? (
5165
<StyledAvatar $size={size} $color={color}>
52-
{img}
66+
<SkeletonLoading isLoading={isLoading}>{img}</SkeletonLoading>
5367
</StyledAvatar>
5468
) : (
5569
<StyledDefaultAvatar $size={size}>{img}</StyledDefaultAvatar>
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import styled, { keyframes } from "styled-components";
2+
import Colors from "../color/colors";
3+
4+
const LoadingAnimation = keyframes`
5+
from {
6+
background-position-x: 100%;
7+
}
8+
9+
to {
10+
background-position-x: 0%;
11+
}
12+
`;
13+
14+
const StyledSkeletonLoading = styled.div`
15+
width: 100%;
16+
height: 100%;
17+
background: linear-gradient(
18+
to left,
19+
${Colors.gray(200)} 40%,
20+
white 50%,
21+
${Colors.gray(200)} 60%
22+
);
23+
background-size: 300% 100%;
24+
background-repeat: no-repeat;
25+
animation: ${({ $isLoading }) => ($isLoading ? LoadingAnimation : "none")} 2s
26+
infinite;
27+
`;
28+
29+
function SkeletonLoading({ isLoading, children }) {
30+
return (
31+
<StyledSkeletonLoading $isLoading={isLoading}>
32+
{children}
33+
</StyledSkeletonLoading>
34+
);
35+
}
36+
37+
export default SkeletonLoading;

src/pages/messages-page.jsx

Lines changed: 38 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,7 @@ import { useModalDialog } from "../hooks/use-modal-dialog";
2626
import ContentLayout from "../layouts/content-layout";
2727
import { media } from "../utils/media";
2828

29-
const backgroundStyle = ({ $backgroundImageUrl, $backgroundColor }) => {
30-
if (!$backgroundImageUrl) {
31-
return `background-color: ${$backgroundColor}`;
32-
}
33-
34-
return `
35-
background: url('${$backgroundImageUrl}');
36-
background-size: contain;
37-
`;
38-
};
39-
4029
const Content = styled.div`
41-
${backgroundStyle};
42-
height: calc(100% - 68px);
43-
4430
& > div {
4531
display: flex;
4632
flex-direction: column;
@@ -60,6 +46,22 @@ const Content = styled.div`
6046
}
6147
`;
6248

49+
const BackgroundColor = styled.div`
50+
height: calc(100% - 68px);
51+
background-color: ${({ $backgroundColor }) =>
52+
$backgroundColor ?? BACKGROUND_COLOR.beige};
53+
`;
54+
55+
const BackgroundImage = styled.div`
56+
${({ $backgroundImageUrl }) =>
57+
$backgroundImageUrl
58+
? `
59+
background: url('${$backgroundImageUrl}');
60+
background-size: contain;
61+
`
62+
: ""}
63+
`;
64+
6365
const ButtonContainer = styled.div`
6466
align-self: flex-end;
6567
display: flex;
@@ -207,27 +209,30 @@ function MessagesPage() {
207209
recipientName={recipient.name}
208210
messages={messages}
209211
/>
210-
<Content
211-
$backgroundImageUrl={recipient.backgroundImageURL}
212+
<BackgroundColor
212213
$backgroundColor={BACKGROUND_COLOR[recipient.backgroundColor]}
213214
>
214-
<div>
215-
{isEditing ? (
216-
<EditingButtons
217-
onDelete={handleRollingPaperDelete}
218-
onDone={handleEditDone}
219-
/>
220-
) : (
221-
<ViewerButtons onEdit={handleEditClick} />
222-
)}
223-
<MessagesGrid
224-
isEditing={isEditing}
225-
messages={messages}
226-
onDelete={handleMessageDelete}
227-
onInfiniteScroll={handleInfiniteScroll}
228-
/>
229-
</div>
230-
</Content>
215+
<BackgroundImage $backgroundImageUrl={recipient.backgroundImageURL}>
216+
<Content>
217+
<div>
218+
{isEditing ? (
219+
<EditingButtons
220+
onDelete={handleRollingPaperDelete}
221+
onDone={handleEditDone}
222+
/>
223+
) : (
224+
<ViewerButtons onEdit={handleEditClick} />
225+
)}
226+
<MessagesGrid
227+
isEditing={isEditing}
228+
messages={messages}
229+
onDelete={handleMessageDelete}
230+
onInfiniteScroll={handleInfiniteScroll}
231+
/>
232+
</div>
233+
</Content>
234+
</BackgroundImage>
235+
</BackgroundColor>
231236
</>
232237
)}
233238
</>

0 commit comments

Comments
 (0)