Merge branch 'featur/user-profile-image' into develop

Author: donismoney

mysql/migrations/V1.1.3__init.sql

@@ -0,0 +1,2 @@
+-- users 테이블에 프로필 이미지 URL 저장을 위한 image 컬럼 추가
+ALTER TABLE users ADD COLUMN profile_image TEXT;

nginx/react-frontpage/src/Component/Profile/Profile.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 
 // 쿠키에서 값을 읽어오는 함수
 const getCookieValue = (name: string): string => {
@@ -16,7 +16,7 @@ const getCookieValue = (name: string): string => {
 type MembershipType = 'BASIC' | 'VIP';
 
 const Profile: React.FC = () => {
-  const [userInfo, setUserInfo] = useState({ name: '', email: '', userid: '' });
+  const [userInfo, setUserInfo] = useState({ name: '', email: '', userid: '', profileImage: '' });
   const [editedInfo, setEditedInfo] = useState({ name: '', email: '', userid: '', pw: '' });
   const [membership, setMembership] = useState<MembershipType>('BASIC');
   const [isLoading, setIsLoading] = useState(true);
@@ -26,6 +26,10 @@ const Profile: React.FC = () => {
   const [isEmailSent, setIsEmailSent] = useState(false);
   const [emailVerifyStatus, setEmailVerifyStatus] = useState<'idle' | 'success' | 'error' | 'expired' | 'notfound'>('idle');
   const [emailVerifyMessage, setEmailVerifyMessage] = useState('');
+  const [profileImageUrl, setProfileImageUrl] = useState<string | null>(null);
+  const [profileImagePreview, setProfileImagePreview] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     // 사용자 정보와 멤버십 정보 모두 가져오기
@@ -81,8 +85,11 @@ const Profile: React.FC = () => {
 
       const data = await response.json();
       console.log('User Info Fetched:', data);
-      setUserInfo(data);
+      setUserInfo({ ...data, profileImage: data.profileImage || data.image || '' });
       setEditedInfo({ ...data, pw: '' }); // data에 userid 포함
+      // 프로필 이미지 URL 세팅 (백엔드에서 profileImage 필드로 내려줘야 함)
+      setProfileImageUrl(data.profileImage || null);
+      setProfileImagePreview(null); // 새로고침 시 미리보기 초기화
 
       // DB의 users 테이블에 membership 필드가 있으므로 이 정보를 사용
       if (data.membership) {
@@ -96,6 +103,59 @@ const Profile: React.FC = () => {
     }
   };
 
+  
+  const handleProfileImageClick = () => {
+    if (fileInputRef.current) fileInputRef.current.click();
+  };
+
+  // 파일 선택 시 미리보기 및 업로드
+  const handleProfileImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files || e.target.files.length === 0) return;
+    const file = e.target.files[0];
+
+    // 파일 크기 제한 (예: 5MB)
+    const maxSize = 5 * 1024 * 1024;
+    if (file.size > maxSize) {
+      alert('파일 크기가 5MB를 초과할 수 없습니다.');
+      return;
+    }
+    
+    // 미리보기
+    const reader = new FileReader();
+    reader.onloadend = () => setProfileImagePreview(reader.result as string);
+    reader.readAsDataURL(file);
+
+    // 업로드
+    try {
+      setUploading(true);
+      const jwtToken = getCookieValue('jwt-token');
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const res = await fetch('/server/user/profile/image', {
+        method: 'POST',
+        headers: {
+          'Authorization': jwtToken || ''
+        },
+        body: formData,
+      });
+      const data = await res.json();
+      if (res.ok && data.url) {
+        setProfileImageUrl(data.url);
+        setProfileImagePreview(null);
+        // userInfo에도 반영
+        setUserInfo(prev => ({ ...prev, profileImage: data.url }));
+        alert('프로필 이미지가 성공적으로 업로드되었습니다.');
+      } else {
+        alert(data.message || '프로필 이미지 업로드에 실패했습니다.');
+      }
+    } catch (err) {
+      alert('프로필 이미지 업로드 중 오류가 발생했습니다.');
+    } finally {
+      setUploading(false);
+    }
+  };
+
   const handleUpdate = async () => {
     try {
       console.log('Updating User Info:', editedInfo);
@@ -244,9 +304,41 @@ const Profile: React.FC = () => {
       <div className="bg-[#2a2928] rounded-lg p-8 shadow-lg">
         {/* 프로필 상단 영역: 이미지와 멤버십 배지 */}
         <div className="flex flex-col items-center mb-8">
-          {/* 프로필 이미지 */}
-          <div className="w-32 h-32 bg-[#3f3f3f] rounded-full flex items-center justify-center shadow-md mb-4 border-2 border-[#3b7cc9]">
-            <span className="text-6xl">👤</span>
+          <div
+            className="w-32 h-32 bg-[#3f3f3f] rounded-full flex items-center justify-center shadow-md mb-4 border-2 border-[#3b7cc9] cursor-pointer relative overflow-hidden"
+            title="프로필 이미지 업로드"
+            onClick={handleProfileImageClick}
+            style={{ position: 'relative' }}
+          >
+            {profileImagePreview ? (
+              <img
+                src={profileImagePreview}
+                alt="프로필 미리보기"
+                className="w-full h-full object-cover rounded-full"
+              />
+            ) : userInfo.profileImage ? (
+              <img
+                src={userInfo.profileImage}
+                alt="프로필"
+                className="w-full h-full object-cover rounded-full"
+              />
+            ) : (
+              <span className="text-6xl">👤</span>
+            )}
+            {uploading && (
+              <div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
+                <div className="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-[#3b7cc9]"></div>
+              </div>
+            )}
+            <input
+              type="file"
+              accept="image/png,image/jpeg"
+              ref={fileInputRef}
+              style={{ display: 'none' }}
+              onChange={handleProfileImageChange}
+              aria-label="프로필 이미지 업로드"
+            />
+            <span className="absolute bottom-2 right-2 bg-[#3b7cc9] text-white text-xs px-2 py-1 rounded shadow">변경</span>
           </div>
 
           {/* 멤버십 배지 */}

springboot/src/main/java/com/TreeNut/ChatBot_Backend/controller/UserController.kt

@@ -3,6 +3,7 @@ package com.TreeNut.ChatBot_Backend.controller
 import com.TreeNut.ChatBot_Backend.model.User
 import com.TreeNut.ChatBot_Backend.service.UserService
 import com.TreeNut.ChatBot_Backend.middleware.TokenAuth
+import com.TreeNut.ChatBot_Backend.service.GoogleDriveService
 import org.springframework.http.HttpHeaders
 import org.springframework.http.HttpStatus
 import org.springframework.http.ResponseEntity
@@ -17,13 +18,16 @@ import java.net.URLEncoder
 import java.nio.charset.StandardCharsets
 import org.springframework.web.reactive.function.client.WebClientResponseException
 import org.slf4j.LoggerFactory
+import org.springframework.web.multipart.MultipartFile
+import java.nio.file.Files
 
 @RestController
 @RequestMapping("/server/user")
 class UserController(
     private val userService: UserService,
     private val tokenAuth: TokenAuth,
     private val webClientBuilder: WebClient.Builder,
+    private val googleDriveService: GoogleDriveService,
     @Value("\${spring.security.oauth2.client.registration.google.client-id}") private val googleClientId: String,
     @Value("\${spring.security.oauth2.client.registration.google.client-secret}") private val googleClientSecret: String,
     @Value("\${spring.security.oauth2.client.registration.google.redirect-uri}") private val googleRedirectUri: String,
@@ -181,9 +185,16 @@ class UserController(
     @GetMapping("/findmyinfo")
     fun findUserNameandEmail(@RequestHeader("Authorization") userToken:String): ResponseEntity<Map<String, Any>> {
         val userid = userService.getUserid(userToken)
-        val name = userService.getUsername(userid)
-        val email = userService.getUseremail(userid)
-        return ResponseEntity.ok(mapOf("name" to name, "userid" to userid,"email" to email))
+        val user = userService.findUserByUserid(userid)
+            ?: return ResponseEntity.status(404).body(mapOf("status" to 404, "message" to "User not found"))
+        return ResponseEntity.ok(
+            mapOf(
+                "name" to user.username,
+                "userid" to user.userid,
+                "email" to user.email,
+                "profileImage" to (user.profileImage ?: "")
+            )
+        )
     }
 
     @PostMapping("/changeUsername")
@@ -228,4 +239,31 @@ class UserController(
         val result = userService.verifyEmailCode(userid, email, code)
         return ResponseEntity.ok(result)
     }
+
+    @PostMapping("/profile/image")
+    fun uploadProfileImage(
+        @RequestParam("file") file: MultipartFile,
+        @RequestHeader("Authorization") userToken: String
+    ): ResponseEntity<Map<String, Any>> {
+        return try {
+            // JWT에서 사용자 ID 추출
+            val userid = tokenAuth.authGuard(userToken)
+                ?: return ResponseEntity.status(401).body(mapOf("status" to 401, "message" to "유효한 토큰이 필요합니다."))
+
+            // 임시 파일로 저장
+            val tempFile = Files.createTempFile("profile_", ".png").toFile()
+            file.transferTo(tempFile)
+
+            // 구글 드라이브 업로드
+            val imageUrl = googleDriveService.uploadImageAndGetLink(tempFile.absolutePath)
+            tempFile.delete() // 임시 파일 삭제
+
+            // DB에 프로필 이미지 URL 저장
+            userService.updateProfileImage(userid, imageUrl)
+
+            ResponseEntity.ok(mapOf("status" to "success", "url" to imageUrl))
+        } catch (e: Exception) {
+            ResponseEntity.status(500).body(mapOf("status" to "fail", "message" to (e.message ?: "프로필 이미지 업로드 실패")))
+        }
+    }
 }

springboot/src/main/java/com/TreeNut/ChatBot_Backend/model/User.kt

@@ -45,14 +45,17 @@ data class User(
     // @Column(name = "user_setting_agree", nullable = false)
     // val user_setting_agree: Boolean = true,
 
+    @Column(name = "profile_image", columnDefinition = "TEXT")
+    val profileImage: String? = null,
+
     @Column(name = "created_at")
     val createdAt: LocalDateTime = LocalDateTime.now(),
 
     @Column(name = "updated_at")
     var updatedAt: LocalDateTime = LocalDateTime.now()
 ) {
     // constructor() : this(null, "", "", "", null, null, null, LoginType.LOCAL, false, MembershipType.BASIC, true, true, LocalDateTime.now(), LocalDateTime.now())
-    constructor() : this(null, "", "", "", null, null, null, LoginType.LOCAL, false, MembershipType.BASIC, LocalDateTime.now(), LocalDateTime.now())
+    constructor() : this(null, "", "", "", null, null, null, LoginType.LOCAL, false, MembershipType.BASIC, null, LocalDateTime.now(), LocalDateTime.now())
     @PreUpdate
     fun onUpdate() {
         updatedAt = LocalDateTime.now()

springboot/src/main/java/com/TreeNut/ChatBot_Backend/service/UserService.kt

@@ -351,4 +351,14 @@ class UserService(
             mapOf("status" to "exception", "message" to "FastAPI 연동 오류: ${e.message}")
         }
     }
+
+    @Transactional
+    fun updateProfileImage(userid: String, imageUrl: String): User {
+        val user = userRepository.findByUserid(userid)
+            ?: throw RuntimeException("User not found")
+        val updatedUser = user.copy(
+            profileImage = imageUrl
+        )
+        return userRepository.save(updatedUser)
+    }
 }