💄 Design : 마이페이지/피팅페이지 UI/UX

- 마이페이지 사이즈 정보 Fetch 추가
- 서버 sizeFetch api(/userInfo/api/...) 추가

Author: Titorima

Diff for: src/main.js

@@ -18,6 +18,7 @@ const aiAPI = process.env.AI_API
 
 const allowedOrigins = [
   'http://localhost:3000',
+  'http://localhost:3001',
   'http://www.model-fit.kro.kr',
   aiAPI,
 ]
@@ -60,13 +61,18 @@ app.use(express.static(path.join(__dirname, '../style/build')))
 app.get('/', (req, res) => {
   res.sendFile(path.join(__dirname, '../style/build/index.html'))
 })
-app.get('*', (req, res) => {
-  res.sendFile(path.join(__dirname, '../style/build/index.html'))
-})
 
 const usersRouter = require('./routes/RegisterUser')
 const loginRouter = require('./routes/LoginUser')
 const logoutRouter = require('./routes/LogoutUser')
 app.use('/users', usersRouter)
 app.use('/users', loginRouter)
 app.use('/users', logoutRouter)
+
+// userInfo 조회
+const infoRouter = require('./routes/UserInfo')
+app.use('/userInfo', infoRouter)
+
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, '../style/build/index.html'))
+})

Diff for: src/routes/UserInfo.js

@@ -0,0 +1,57 @@
+// 사이즈: backend -> frontend
+const express = require('express')
+const router = express.Router()
+
+const mongoose = require('mongoose')
+const { Schema } = mongoose
+
+const User = require('../models/User')
+
+// size api가 없어서, 테스트용으로 임시로 만듦
+const sizeProfileSchema = new Schema({
+  userId: { type: String },
+  length: { type: String },
+  shoulderWidth: { type: String },
+  chestWidth: { type: String },
+})
+
+const SizeProfile = mongoose.model('sizeProfiles', sizeProfileSchema)
+
+// 사이즈 : backend -> frontend
+router.get('/api/size', async (req, res) => {
+  const { userId } = req.query
+  console.log(`get /userInfo/api/size ${userId}`)
+
+  try {
+    const sizeProfile = await SizeProfile.findOne({ userId: userId })
+    console.log(sizeProfile)
+
+    res.status(201).json({ success: true, message: sizeProfile })
+  } catch (error) {
+    console.error('Error finding size :', error)
+    res.status(500).json({ success: false, error: 'Failed to fetch size.' })
+  }
+})
+
+router.get('/api/info', 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.' })
+    }
+    console.log(user)
+    res.status(201).json({ success: true, user })
+  } catch (error) {
+    console.error('User lookup errors :', error)
+    res.status(500).json({
+      success: false,
+      message: 'An error occurred during user lookup.',
+    })
+  }
+})
+
+module.exports = router

Diff for: style/babel-plugin-macros.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  'fontawesome-svg-core': {
+    license: 'free',
+  },
+}

Diff for: style/babelrc.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  // api.cache.forever()
+  api.cache(true)
+  return {
+    plugins: ['macros'],
+  }
+}

Diff for: style/package.json

@@ -3,20 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
+    "babel-plugin-macros": "^3.1.0",
     "bootstrap": "^5.3.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.13.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-tooltip": "^5.16.1",
     "redux": "^4.2.1",
     "styled-components": "^6.0.0-rc.3",

Diff for: style/src/App.js

@@ -1,18 +1,20 @@
 import React from 'react'
 import MainPage from './components/MainPage/MainPage'
-import FittingPage from './components/FittingPage.js'
+import FittingPage from './components/FittingPage/FittingPage.js'
 import RecommendPage from './components/RecommendPage.js'
 import PolicyTerms from './components/Terms/PolicyTerms.js'
 import PrivacyMain from './components/Terms/PrivacyMain.js'
 import 'react-bootstrap'
 import { Routes, Route } from 'react-router-dom'
+import MyPage from './components/MyPage/MyPage.js'
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<MainPage />} />
       <Route path="/fitting" element={<FittingPage />} />
       <Route path="/recommend" element={<RecommendPage />} />
+      <Route path="/myPage" element={<MyPage />} />
       <Route exact path="/policyterms" element={<PolicyTerms />} />
       <Route exact path="/privacymain" element={<PrivacyMain />} />
     </Routes>

Diff for: style/src/components/FittingPage.js

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import CardButton from './CardButton'
+
+import styles from './FittingPage.module.css'
+
+import saveImage from '../../images/save.png'
+import uploadImage from '../../images/upload.png'
+import changeBgImage from '../../images/landscape.png'
+import resetImage from '../../images/reset.png'
+
+// 아직 버튼에 이벤트 없음
+// 각 버튼 누르면 모달창 띄워서 업로드/배경 변경 창 띄우면 좋을듯?
+// 원본 디자인에서 공유 버튼 필요 없을 것 같아 제외 함
+function ButtonBar() {
+  return (
+    <div className={styles.buttonContainer}>
+      <CardButton
+        src={saveImage}
+        alt="save"
+        text="이미지 업로드"
+        onClick={() => {}}
+      />
+      <CardButton
+        src={uploadImage}
+        alt="upload"
+        text="이미지 저장"
+        onClick={() => {}}
+      />
+      <CardButton
+        src={changeBgImage}
+        alt="changeBackground"
+        text="배경 변경"
+        onClick={() => {}}
+      />
+      <CardButton
+        src={resetImage}
+        alt="reset"
+        text="되돌리기"
+        onClick={() => {}}
+      />
+    </div>
+  )
+}
+
+export default ButtonBar

Diff for: style/src/components/FittingPage/ButtonBar.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import styles from './FittingPage.module.css'
+
+function CardButton({ src, alt, text, onClick }) {
+  return (
+    <button className={styles.cardButton} onClick={onClick}>
+      <img className={styles.btnImage} src={src} alt={alt} />
+      <span className={styles.btnText}>{text}</span>
+    </button>
+  )
+}
+
+export default CardButton

Diff for: style/src/components/FittingPage/CardButton.js

@@ -0,0 +1,39 @@
+import Navigation from '../Navigationbar/Nav'
+
+import LeftFitContainer from './LeftFitContainer'
+import RightFitContainer from './RightFitContainer'
+
+import styles from './FittingPage.module.css'
+
+import React from 'react'
+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)
+
+  return (
+    <>
+      <Navigation />
+      <div
+        className={styles.mainContainer}
+        style={{ backgroundImage: `url(${shoppingImage})` }}
+      >
+        <div className="empty-space" />
+        <LeftFitContainer />
+        <div className="empty-space" />
+        <RightFitContainer />
+        <div className="empty-space" />
+      </div>
+    </>
+  )
+}
+export default FittingPage