✨feat: 이미지 업로드 구현 및 홈 페이지 애니메이션 효과 추가

✨feat: 이미지 업로드 구현 및 홈 페이지 애니메이션 효과 추가

Author: minimo-9

src/api/postUploadImage.js

@@ -0,0 +1,22 @@
+import { api } from './api';
+
+export default async function uploadImage(file) {
+  const formData = new FormData();
+  formData.append('image', file);
+
+  try {
+    const res = await api.post(
+      `https://api.imgbb.com/1/upload?key=${import.meta.env.VITE_API_KEY}`,
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      },
+    );
+    return res.data.data.url;
+  } catch (error) {
+    console.error('이미지 업로드 실패', error);
+    throw error;
+  }
+}

src/assets/images/img_01.svg src/assets/images/img-01.svgsrc/assets/images/img_01.svg renamed to src/assets/images/img-01.svg

@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import getProfileImages from '../../api/getProfileImages.js';
+import uploadImage from '../../api/postUpLoadImage.js';
 import DEFAULT_PROFILE_IMAGE from '../../constants/image.js';
 import styles from './UserProfileSelector.module.scss';
 
@@ -8,6 +9,8 @@ export default function UserProfileSelector({
   onSelect,
 }) {
   const [profileImages, setProfileImages] = useState([]);
+  const [loadedImages, setLoadedImages] = useState({});
+  const fileInput = useRef(null);
 
   useEffect(() => {
     const loadImages = async () => {
@@ -17,18 +20,46 @@ export default function UserProfileSelector({
     loadImages();
   }, []);
 
+  const handleImageLoad = (url) => {
+    setLoadedImages((prev) => ({ ...prev, [url]: true }));
+  };
+
+  const handleUpload = async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    try {
+      const uploadedUrl = await uploadImage(file);
+      onSelect?.(uploadedUrl);
+    } catch (error) {
+      alert('이미지 업로드 실패했습니다.');
+    }
+  };
+
+  const triggerFileSeletor = () => {
+    fileInput.current?.click();
+  };
+
   return (
     <div className={styles['profile-select']}>
       <h2 className={styles['profile-select__title']}>프로필 이미지</h2>
       <div className={styles['profile-select__content']}>
         <img
           src={value}
-          alt="선택된 프로필"
+          alt="선택된 프로필 및 업로드 이미지"
           className={styles['profile-select__selected-image']}
+          onClick={triggerFileSeletor}
+        />
+        <input
+          type="file"
+          accept="image/"
+          onChange={handleUpload}
+          ref={fileInput}
+          style={{ display: 'none' }}
         />
         <div className={styles['profile-select__right']}>
           <p className={styles['profile-select__description']}>
-            프로필 이미지를 선택해주세요!
+            프로필을 클릭해 업로드해 주세요!
           </p>
           <div className={styles['profile-select__image-list']}>
             {profileImages.map((url, idx) => (
@@ -38,8 +69,9 @@ export default function UserProfileSelector({
                 alt={`profile-${idx}`}
                 className={`${styles['profile-select__image']} ${
                   value === url ? styles['profile-select__image--selected'] : ''
-                }`}
+                } ${!loadedImages[url] ? styles['profile-select__image--loading'] : ''}`}
                 onClick={() => onSelect?.(url)}
+                onLoad={() => handleImageLoad(url)}
               />
             ))}
           </div>

src/assets/images/img-02.png

@@ -19,6 +19,7 @@
   &__selected-image {
     width: 80px;
     border-radius: 100px;
+    cursor: pointer;
   }
 
   &__content {
@@ -52,6 +53,7 @@
     border: 1px solid $gray-200;
     border-radius: 100px;
     transition: transform 0.1s ease-in-out;
+    cursor: pointer;
 
     &:hover {
       transform: scale(1.15) translateY(-6px) translateZ(0);
@@ -64,7 +66,22 @@
 
   &__image--selected {
     transform: scale(1.2) translateY(-6px) translateZ(0);
-    box-shadow: 0 0 0 2px $gray-300;
+    box-shadow: 0 0 0 2px $gray-400;
+  }
+
+  &__image--loading {
+    background: linear-gradient(270deg, $gray-200, $gray-300, $gray-400);
+    background-size: 400% 400%;
+    animation: loadingSpin 1.2s infinite linear;
+  }
+
+  @keyframes loadingSpin {
+    0% {
+      background-position: 0% 50%;
+    }
+    100% {
+      background-position: 100% 50%;
+    }
   }
 
   @media (max-width: 767px) {
@@ -83,8 +100,11 @@
       row-gap: 4px;
     }
 
-    &__image {
+    &__image,
+    &__image--loading {
       width: 40px;
+      height: 40px;
+      background-size: 400% 400%;
     }
   }
 }

src/assets/images/img_02.png

@@ -70,6 +70,10 @@
     &--delete {
       min-width: 720px;
     }
+
+    &--primary {
+      margin-bottom: 24px;
+    }
   }
 
   @media (max-width: 767px) {
@@ -78,14 +82,18 @@
     &--delete {
       min-width: 320px;
     }
+
+    &--primary {
+      margin-bottom: 24px;
+    }
   }
-}
 
-@media (max-width: 1024px) {
-  .button {
-    &--delete {
-      width: 100%;
-      height: 55px;
+  @media (max-width: 1024px) {
+    .button {
+      &--delete {
+        width: 100%;
+        height: 55px;
+      }
     }
   }
 }

src/components/UserProfileSelector/UserProfileSelector.jsx

@@ -1,6 +1,6 @@
 import styles from './Home.module.scss';
-import img01 from '../../assets/images/img_01.svg';
-import img02 from '../../assets/images/img_02.png';
+import img01 from '../../assets/images/img-01.svg';
+import img02 from '../../assets/images/img-02.png';
 import Button from '../../components/common/Button';
 import { useNavigate } from 'react-router-dom';
 
@@ -21,7 +21,7 @@ export default function Home() {
           <img
             src={img01}
             alt="롤링페이퍼 이미지"
-            className={styles.sectionImage}
+            className={styles.sectionImagePaper}
           />
         </article>
       </section>
@@ -40,7 +40,7 @@ export default function Home() {
           <img
             src={img02}
             alt="이모지 이미지"
-            className={styles.sectionImage}
+            className={styles.sectionImageEmoji}
           />
         </article>
       </section>

src/components/UserProfileSelector/UserProfileSelector.module.scss

@@ -33,26 +33,39 @@ body {
 
   border-radius: 16px;
   background-color: $surface;
+
+  opacity: 0;
+  transition:
+    transform 1.5s ease,
+    opacity 1.5s ease;
 }
 
 .rightImage {
   justify-content: space-between;
   margin-bottom: 30px;
+
+  transform: translateY(-30px);
+  animation: slideDownFadeIn 1.2s ease forwards;
+  animation-delay: 0.3s;
 }
 
 .leftImage {
   flex-direction: row-reverse;
   justify-content: flex-end;
   margin-bottom: 48px;
+
+  transform: translateY(30px);
+  animation: slideUpFadeIn 1.5s ease forwards;
+  animation-delay: 0.6s;
 }
 
 .sectionBox.leftImage {
   padding-left: 30px;
 }
 
-.sectionImage {
+.sectionImagePaper,
+.sectionImageEmoji {
   max-width: 720px;
-  height: 204px;
 }
 
 .pointBadge {
@@ -88,7 +101,7 @@ body {
   color: $gray-500;
 }
 
-@media (min-width: 768px) and (max-width: 1247px) {
+@media (min-width: 768px) and (max-width: 1023px) {
   .sectionBoxes {
     width: 100%;
     margin: 0 auto;
@@ -128,8 +141,6 @@ body {
   }
 
   .title {
-    font-size: 24px;
-    line-height: 36px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -140,7 +151,6 @@ body {
   }
 
   .subtext {
-    font-size: 18px;
     margin-top: 8px;
   }
 }
@@ -165,15 +175,35 @@ body {
     gap: 50px;
   }
 
+  .title {
+    @include font-18-bold;
+  }
+
+  .subtext {
+    @include font-15-regular;
+  }
+
+  .rightImage {
+    gap: 45px;
+    transform: translateY(-20px);
+  }
+
+  .leftImage {
+    gap: 48px;
+    transform: translateY(20px);
+  }
+
   .rightImage,
   .leftImage {
     flex-direction: column;
     justify-content: center;
+    min-width: 320px;
+    overflow: hidden;
   }
 
-  .sectionImage {
-    width: 100%;
-    height: auto;
+  .sectionImageEmoji,
+  .sectionImagePaper {
+    width: 150%;
     margin-bottom: 24px;
   }
 
@@ -194,3 +224,17 @@ body {
     }
   }
 }
+
+@keyframes slideDownFadeIn {
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideUpFadeIn {
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}