Merge pull request #111 from cskime/feature/#110

[#110] 이미지 로딩 중 배경 색상 표시

Author: cskime

src/components/avatar/avatar.jsx

@@ -1,6 +1,8 @@
+import { useState } from "react";
 import styled, { css } from "styled-components";
 import defaultAvatarImage from "../../assets/ic-person.svg";
 import Colors from "../color/colors";
+import SkeletonLoading from "../loading/skeleton-loading";
 import AVATAR_SIZE from "./avatar-size";
 
 const borderWidth = {
@@ -19,8 +21,8 @@ const avatarStyle = css`
 
 const StyledAvatar = styled.div`
   ${avatarStyle}
-  border: ${({ $size }) => borderWidth[`${$size}`]}px solid ${({ $color }) =>
-    $color};
+  border: ${({ $size }) => borderWidth[`${$size}`]}px solid
+    ${({ $color }) => $color};
 
   img {
     width: 100%;
@@ -46,10 +48,22 @@ function Avatar({
   size = AVATAR_SIZE.medium,
   color = Colors.gray(200),
 }) {
-  const img = <img src={source ?? defaultAvatarImage} alt="사용자 사진" />;
+  const [isLoading, setLoading] = useState(source ?? false);
+  const handleImageLoad = () => {
+    setLoading(false);
+  };
+
+  const img = (
+    <img
+      src={source ?? defaultAvatarImage}
+      alt="사용자 사진"
+      onLoad={handleImageLoad}
+    />
+  );
+
   return source ? (
     <StyledAvatar $size={size} $color={color}>
-      {img}
+      <SkeletonLoading isLoading={isLoading}>{img}</SkeletonLoading>
     </StyledAvatar>
   ) : (
     <StyledDefaultAvatar $size={size}>{img}</StyledDefaultAvatar>

src/components/loading/skeleton-loading.jsx

@@ -0,0 +1,37 @@
+import styled, { keyframes } from "styled-components";
+import Colors from "../color/colors";
+
+const LoadingAnimation = keyframes`
+  from {
+    background-position-x: 100%;
+  }
+
+  to {
+    background-position-x: 0%;
+  }
+`;
+
+const StyledSkeletonLoading = styled.div`
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to left,
+    ${Colors.gray(200)} 40%,
+    white 50%,
+    ${Colors.gray(200)} 60%
+  );
+  background-size: 300% 100%;
+  background-repeat: no-repeat;
+  animation: ${({ $isLoading }) => ($isLoading ? LoadingAnimation : "none")} 2s
+    infinite;
+`;
+
+function SkeletonLoading({ isLoading, children }) {
+  return (
+    <StyledSkeletonLoading $isLoading={isLoading}>
+      {children}
+    </StyledSkeletonLoading>
+  );
+}
+
+export default SkeletonLoading;

src/pages/messages-page.jsx

@@ -26,21 +26,7 @@ import { useModalDialog } from "../hooks/use-modal-dialog";
 import ContentLayout from "../layouts/content-layout";
 import { media } from "../utils/media";
 
-const backgroundStyle = ({ $backgroundImageUrl, $backgroundColor }) => {
-  if (!$backgroundImageUrl) {
-    return `background-color: ${$backgroundColor}`;
-  }
-
-  return `
-    background: url('${$backgroundImageUrl}');
-    background-size: contain;
-  `;
-};
-
 const Content = styled.div`
-  ${backgroundStyle};
-  height: calc(100% - 68px);
-
   & > div {
     display: flex;
     flex-direction: column;
@@ -60,6 +46,22 @@ const Content = styled.div`
   }
 `;
 
+const BackgroundColor = styled.div`
+  height: calc(100% - 68px);
+  background-color: ${({ $backgroundColor }) =>
+    $backgroundColor ?? BACKGROUND_COLOR.beige};
+`;
+
+const BackgroundImage = styled.div`
+  ${({ $backgroundImageUrl }) =>
+    $backgroundImageUrl
+      ? `
+          background: url('${$backgroundImageUrl}');
+          background-size: contain;
+        `
+      : ""}
+`;
+
 const ButtonContainer = styled.div`
   align-self: flex-end;
   display: flex;
@@ -207,27 +209,30 @@ function MessagesPage() {
             recipientName={recipient.name}
             messages={messages}
           />
-          <Content
-            $backgroundImageUrl={recipient.backgroundImageURL}
+          <BackgroundColor
             $backgroundColor={BACKGROUND_COLOR[recipient.backgroundColor]}
           >
-            <div>
-              {isEditing ? (
-                <EditingButtons
-                  onDelete={handleRollingPaperDelete}
-                  onDone={handleEditDone}
-                />
-              ) : (
-                <ViewerButtons onEdit={handleEditClick} />
-              )}
-              <MessagesGrid
-                isEditing={isEditing}
-                messages={messages}
-                onDelete={handleMessageDelete}
-                onInfiniteScroll={handleInfiniteScroll}
-              />
-            </div>
-          </Content>
+            <BackgroundImage $backgroundImageUrl={recipient.backgroundImageURL}>
+              <Content>
+                <div>
+                  {isEditing ? (
+                    <EditingButtons
+                      onDelete={handleRollingPaperDelete}
+                      onDone={handleEditDone}
+                    />
+                  ) : (
+                    <ViewerButtons onEdit={handleEditClick} />
+                  )}
+                  <MessagesGrid
+                    isEditing={isEditing}
+                    messages={messages}
+                    onDelete={handleMessageDelete}
+                    onInfiniteScroll={handleInfiniteScroll}
+                  />
+                </div>
+              </Content>
+            </BackgroundImage>
+          </BackgroundColor>
         </>
       )}
     </>