✨ Feat: 의류 업로드 기능 구현

- 의류 업로드 후, db 저장 구현
- s3에 이미지 저장 경로 변경
- 되돌리기 버튼 기능 구현

Author: S686

src/main.js

@@ -74,7 +74,9 @@ const infoRouter = require('./routes/UserInfo')
 app.use('/userInfo', infoRouter)
 
 const fittingRouter = require('./routes/FittingImage')
+const clothUploadRouter = require('./routes/UploadClothImage')
 app.use('/api', fittingRouter)
+app.use('/api', clothUploadRouter)
 
 const clothRouter = require('./routes/Clothes')
 app.use('/cloth', clothRouter)

src/routes/ImageUploader.js

@@ -26,7 +26,7 @@ const ImageUploader = multer({
     s3: s3,
     bucket: 'bigprogect-bucket',
     key: (req, file, callback) => {
-      const userId = req.query.userId
+      const userId = req.body.userId || req.query.userId
       const uploadDirectory = req.query.directory ?? userId
       const extension = path.extname(file.originalname)
       if (!allowedExtensions.includes(extension)) {
@@ -39,10 +39,7 @@ const ImageUploader = multer({
       if (imageType === 'body') {
         imageFilename = `userimage${extension}`
       } else if (imageType === 'clothing') {
-        const fileName = file.originalname
-          .substr(-10)
-          .replace(fileExtension, '')
-        imageFilename = `${fileName}${extension}`
+        imageFilename = file.originalname
       } else {
         return callback(new Error('Unknown image type'))
       }

src/routes/UploadClothImage.js

@@ -4,7 +4,7 @@ const ImageUploader = require('./ImageUploader')
 const Closet = require('../models/Closet')
 
 router.post(
-  '/api/cloth-upload',
+  '/cloth-upload',
   (req, res, next) => {
     req.query.type = 'clothing'
     ImageUploader.single('clothingImage')(req, res, (error) => {
@@ -16,14 +16,14 @@ router.post(
   },
   async (req, res) => {
     // 유효성 검사: 요청 userId 확인
-    if (!req.query.userId) {
+    if (!req.body.userId) {
       return res.status(400).json({
         success: false,
         error: 'Missing userId in request.',
       })
     }
 
-    const userId = req.query.userId
+    const userId = req.body.userId
     // 이미지 업로드 확인
     if (!req.file || !req.file.location) {
       return res.status(500).json({
@@ -34,11 +34,14 @@ router.post(
 
     // 이미지 URL을 생성
     const clothingImageUrl = req.file.location
+    console.log(userId)
+    console.log(clothingImageUrl)
+    console.log(req.body.clothesUrl)
     // 새 Closet 생성 및 저장
     try {
       const newCloset = new Closet({
         userId: userId,
-        clothesUrl: req.query.clothesUrl,
+        clothesUrl: req.body.clothesUrl,
         clothesImageLink: clothingImageUrl,
       })
 

style/src/api/authenticatedAxios.js

@@ -8,6 +8,11 @@ authenticatedAxios.interceptors.request.use(
     if (token) {
       config.headers['Authorization'] = `Bearer ${token}`
     }
+
+    if (config.data instanceof FormData) {
+      config.headers['Content-Type'] = 'multipart/form-data'
+    }
+
     return config
   },
   (error) => {

style/src/components/FittingPage/ButtonBar.js

@@ -10,11 +10,10 @@ import saveImage from '../../images/save.png'
 import uploadImage from '../../images/upload.png'
 import changeBgImage from '../../images/landscape.png'
 import resetImage from '../../images/reset.png'
-import testClothesImage from '../../images/test_clothes1.png'
 import { API_URL } from '../../api/apiConfig'
 import ClassMerger from '../common/ClassNameGenerater'
 
-function ButtonBar({ setErrorCode, showAlert }) {
+function ButtonBar({ setErrorCode, showAlert, setIsDefaultPage }) {
   // URL 입력 저장을 위한 state 생성
   const [inputUrl, setInputUrl] = useState('')
   const [isModalOpen, setIsModalOpen] = useState(false)
@@ -33,7 +32,46 @@ function ButtonBar({ setErrorCode, showAlert }) {
 
   // URL 업로드 버튼 클릭 이벤트 핸들러
   const handleImgUploadClick = async () => {
-    // URL 크롤링 하는 함수 작성
+    if (selected < 0 || selected >= clothes.length) {
+      // 이미지 선택이 없거나 범위를 벗어난 경우
+      return
+    }
+
+    const file = await fetch(clothes[selected])
+      .then((response) => response.blob())
+      .then(
+        (blob) =>
+          new File([blob], `clothes-${Date.now()}.png`, { type: 'image/png' })
+      )
+
+    const user = JSON.parse(localStorage.getItem('user'))
+    if (!user || !user._id) {
+      console.error('User ID not found')
+      return
+    }
+    const userId = user._id
+    const urlWithoutQueryString = inputUrl.split('?')[0]
+
+    const formData = new FormData()
+    formData.append('userId', userId)
+    formData.append('clothingImage', file)
+    formData.append('clothesUrl', urlWithoutQueryString)
+    for (let value of formData.values()) {
+      console.log(value)
+    }
+    try {
+      const response = await authenticatedAxios.post(
+        `${API_URL}/api/cloth-upload`,
+        formData
+      )
+      if (response.status === 200) {
+        console.log('업로드에 성공했습니다!', response.data)
+      } else {
+        console.error('이미지 업로드에 실패했습니다.', response)
+      }
+    } catch (error) {
+      console.error('이미지 업로드 중 오류가 발생했습니다.', error)
+    }
   }
 
   // url 업로드 버튼 : url에서 이미지 목록 가져옴
@@ -107,7 +145,7 @@ function ButtonBar({ setErrorCode, showAlert }) {
         src={resetImage}
         alt="reset"
         text="되돌리기"
-        onClick={getUserImage}
+        onClick={() => setIsDefaultPage(true)}
       />
       {isModalOpen && (
         <div
@@ -162,13 +200,6 @@ function ButtonBar({ setErrorCode, showAlert }) {
       )}
     </div>
   )
-
-  async function getUserImage() {
-    // 데이터베이스에서 유저의 이미지를 불러오는 함수를 호출
-    //const userImage = await fetchUserImageFromDB();
-    // 상태를 업데이트하여 이미지가 표시되는 곳에 사용자 이미지를 표시합니다.
-    //setImageUrl(userImage);
-  }
 }
 
 function ClothesImageElement({ src, index, selected, onClick }) {