Merge branch 'develop' into feature/jeon

Author: jyn

src/api/postUpload.js

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

src/assets/images/img-01.svg

@@ -10,11 +10,11 @@
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
   background: $white;
   gap: 16px;
-  transition: transform 0.2s ease;
+  transition: transform 0.2s ease-in-out;
   cursor: pointer;
 
   &:hover {
-    transform: scale(0.95);
+    transform: scale(0.95) translateZ(0);
   }
 
   &.card--empty {
@@ -117,13 +117,13 @@
 
 @keyframes click-pop {
   0% {
-    transform: scale(1);
+    transform: scale(1) translateZ(0);
   }
   50% {
-    transform: scale(1.03); // 살짝 커졌다가
+    transform: scale(1.03) translateZ(0); // 살짝 커졌다가
   }
   100% {
-    transform: scale(1); // 다시 원래대로
+    transform: scale(1) translateZ(0); // 다시 원래대로
   }
 }
 
@@ -133,13 +133,13 @@
   }
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 1023px) {
   .card {
     height: 284px;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .card {
     height: 230px;
 

src/assets/images/img-02.png

@@ -110,7 +110,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .modal {
     width: calc(100% - 48px);
   }

src/assets/images/img_01.png

@@ -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/postUpload.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 {
@@ -51,6 +52,36 @@
     width: 56px;
     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);
+    }
+
+    &:active {
+      transform: scale(1) translateY(0) translateZ(0);
+    }
+  }
+
+  &__image--selected {
+    transform: scale(1.2) translateY(-6px) translateZ(0);
+    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) {
@@ -69,8 +100,11 @@
       row-gap: 4px;
     }
 
-    &__image {
+    &__image,
+    &__image--loading {
       width: 40px;
+      height: 40px;
+      background-size: 400% 400%;
     }
   }
 }

src/components/Card/Card.module.scss

@@ -9,24 +9,31 @@
   background-color: $purple-600;
   @include font-18-bold;
   color: $white;
+  transition:
+    transform 0.2s ease-in-out,
+    background-color 0.2s ease-in-out;
 
   &:disabled {
     background-color: $gray-300;
     cursor: not-allowed;
+    filter: opacity(50%);
 
     &:hover,
     &:active,
     &:focus {
       background-color: $gray-300;
       border: $gray-300;
+      transform: none;
     }
   }
 
   &:hover {
+    transform: scale(1.05) translateZ(0);
     background-color: $purple-700;
   }
 
   &:active {
+    transform: scale(0.97) translateZ(0);
     background-color: $purple-800;
   }
 
@@ -63,6 +70,10 @@
     &--delete {
       max-width: 720px;
     }
+
+    &--primary {
+      margin-bottom: 24px;
+    }
   }
 
   @media (max-width: 767px) {
@@ -71,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;
+      }
     }
   }
 }