Merge branch 'develop' of 2github.com:AIVLE-School-Third-Big-Project/AI_5_20

Author: Titorima

src/main.js

@@ -18,7 +18,6 @@ const aiAPI = process.env.AI_API
 
 const allowedOrigins = [
   'http://localhost:3000',
-  'http://localhost:3001',
   'http://www.model-fit.kro.kr',
   aiAPI,
 ]
@@ -73,6 +72,9 @@ app.use('/users', logoutRouter)
 const infoRouter = require('./routes/UserInfo')
 app.use('/userInfo', infoRouter)
 
+const clothRouter = require('./routes/Clothes')
+app.use('/cloth', clothRouter)
+
 app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, '../style/build/index.html'))
 })

src/models/Closet.js

@@ -0,0 +1,10 @@
+const mongoose = require('mongoose')
+const { Schema } = mongoose
+
+const closetSchema = new Schema({
+  userId: { type: Schema.Types.ObjectId, ref: 'User', required: true },
+  clothesImageLink: { type: String, required: true },
+  fittingImageLink: { type: String, required: true },
+})
+
+module.exports = mongoose.model('Closet', closetSchema)

src/models/User.js

@@ -16,6 +16,7 @@ const userSchema = new Schema({
     fit: { type: String, default: '정핏' },
   },
   sizeProfile: { type: Schema.Types.ObjectId, ref: 'SizeProfile' },
+  clothes: [{ type: Schema.Types.ObjectId, ref: 'Clothes' }],
 })
 
 module.exports = mongoose.model('User', userSchema)

src/routes/Clothes.js

@@ -0,0 +1,23 @@
+const express = require('express')
+const router = express.Router()
+const Clothes = require('../models/Closet')
+const User = require('../models/User')
+
+router.get('/api/clothes', async (req, res) => {
+  const { userId } = req.query
+  try {
+    const user = await User.findById(userId)
+    if (!user) {
+      return res
+        .status(404)
+        .json({ success: false, message: 'The user was not found.' })
+    }
+    const clothes = await Clothes.find({ userId: userId })
+    res.json(clothes.map((cloth) => cloth.clothesImageLink))
+  } catch (err) {
+    console.error(err.message)
+    res.status(500).send('Server Error')
+  }
+})
+
+module.exports = router

src/routes/FittingImage.js

@@ -6,7 +6,7 @@ const fittingApiUrl = process.env.AI_FITTING_API_URL
 
 // 피팅 이미지 요청을 보내는 함수
 async function sendFittingRequest(userId, clothingImageUrl) {
-  const callbackUrl = `${webApiUrl}/api/fitting-image`
+  const callbackUrl = `${webApiUrl}/api/fitting`
 
   try {
     const response = await axios.post(fittingApiUrl, {

src/routes/UserInfo.js

@@ -39,7 +39,6 @@ router.get('/api/info', async (req, res) => {
         .status(404)
         .json({ success: false, message: 'The user was not found.' })
     }
-
     res.status(201).json({ success: true, user })
   } catch (error) {
     console.error('User lookup errors :', error)

style/src/components/FittingPage.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import CardButton from './CardButton'
 
@@ -13,13 +13,34 @@ import resetImage from '../../images/reset.png'
 // 각 버튼 누르면 모달창 띄워서 업로드/배경 변경 창 띄우면 좋을듯?
 // 원본 디자인에서 공유 버튼 필요 없을 것 같아 제외 함
 function ButtonBar() {
+  // URL 입력 저장을 위한 state 생성
+  const [imageUrl, setImageUrl] = useState('')
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const handleInputUrl = (e) => {
+    setImageUrl(e.target.value)
+  }
+
+  // URL 업로드 버튼 클릭 이벤트 핸들러
+  const handleUrlUploadClick = () => {
+    // URL 크롤링 하는 함수 작성
+  }
+
+  const handleModalOpen = () => {
+    setIsModalOpen(true)
+  }
+
+  const handleModalClose = () => {
+    setIsModalOpen(false)
+  }
+
   return (
     <div className={styles.buttonContainer}>
       <CardButton
         src={saveImage}
-        alt="save"
-        text="이미지 업로드"
-        onClick={() => {}}
+        alt="upload"
+        text="옷 링크 업로드"
+        onClick={handleModalOpen}
       />
       <CardButton
         src={uploadImage}
@@ -37,10 +58,32 @@ function ButtonBar() {
         src={resetImage}
         alt="reset"
         text="되돌리기"
-        onClick={() => {}}
+        onClick={getUserImage}
       />
+      {isModalOpen && (
+        <div className={styles.modal}>
+          <div className={styles.modalContent}>
+            <h2>의류 올리기</h2>
+            <input
+              type="text"
+              placeholder="옷 링크 입력"
+              value={imageUrl}
+              onChange={handleInputUrl}
+            />
+            <button onClick={handleUrlUploadClick}>Upload</button>
+            <button onClick={handleModalClose}>Close</button>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
 
+async function getUserImage() {
+  // 데이터베이스에서 유저의 이미지를 불러오는 함수를 호출
+  //const userImage = await fetchUserImageFromDB();
+  // 상태를 업데이트하여 이미지가 표시되는 곳에 사용자 이미지를 표시합니다.
+  //setImageUrl(userImage);
+}
+
 export default ButtonBar

style/src/components/FittingPage/ButtonBar.js

@@ -10,13 +10,6 @@ import { useSelector } from 'react-redux'
 
 import shoppingImage from '../../images/shopping-mall.png'
 
-{
-  /* {user && (
-  <div>
-    <h2>환영합니다, {user.email}님!</h2>
-  </div>
-)} */
-}
 function FittingPage() {
   const user = useSelector((state) => state.auth.user)
 

style/src/components/FittingPage/FittingPage.js

@@ -337,4 +337,54 @@
     font-family: 'NanumSquare';
     font-size: 18px;
     font-weight: 600;
-}
+}
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+  
+  .modalContent {
+    background-color: white;
+    padding: 24px;
+    width: 100%;
+    max-width: 400px;
+    border-radius: 4px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  
+  .modalContent input {
+    width: 100%;
+    padding: 8px;
+    display: block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 16px;
+  }
+  
+  .modalContent button {
+    background-color: #007bff;
+    border: none;
+    color: white;
+    padding: 8px 16px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 8px;
+  }
+  
+  .modalContent button:last-child {
+    background-color: #ccc;
+  }
+