Merge pull request #19 from AIVLE-School-Third-Big-Project/mergeTemp

💄 Design : 피팅 페이지 수정

Author: Titosvarius

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,
 ]

style/src/components/FittingPage/ButtonBar.js

@@ -10,6 +10,7 @@ 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 helpImage from '../../images/help.png'
 import { API_URL } from '../../api/apiConfig'
 import ClassMerger from '../common/ClassNameGenerater'
 
@@ -147,6 +148,7 @@ function ButtonBar({ setErrorCode, showAlert, setIsDefaultPage }) {
         text="되돌리기"
         onClick={() => setIsDefaultPage(true)}
       />
+      <CardButton src={helpImage} alt="help" text="도움말" onClick={() => {}} />
       {isModalOpen && (
         <div
           className={styles.modal}

style/src/components/FittingPage/FittingPage.module.css

@@ -18,7 +18,7 @@
 
 
     display: grid;
-    grid-template-columns: 6% 42% 4% 42% 6%;
+    grid-template-columns: 4% 46% 4% 42% 4%;
     height: var(--height);
     /* overflow: hidden; */
 }
@@ -63,6 +63,7 @@
 
 .fittingImage {
     height: 650px;
+    object-fit: cover;
 }
 
 .rightFitContainer {
@@ -282,17 +283,23 @@
 
 .closet {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    grid-auto-rows: minmax(250px, 1fr);
-    grid-gap: 20px;
+    grid-template-columns: repeat(3, minmax(220px, 1fr));
+    grid-auto-rows: 269px;
+    /* grid-gap: 20px; */
     overflow-y: auto;
     max-height: 72%;
+    justify-content: space-between;
+    padding: 5px;
 }
 
 .clothesElement {
-    width: 242px;
-    height: 264px;
+    width: 232px;
+    height: 254px;
     display: inline-block;
+    border-radius: 6px;
+    background-color: #f6f6f6;
+    margin: 10px 10px;
+    padding: 12px;
     /* border: 1px solid black; */
 }
 
@@ -305,8 +312,8 @@
 .clothesImage {
     display: block;
     margin: 0 auto;
-    width: 180px;
-    height: 200px;
+    width: 160px;
+    height: 180px;
 }
 
 .favoriteBtn {

style/src/components/FittingPage/LeftFitContainer.js

@@ -46,7 +46,7 @@ function LeftFitContainer({
       <ButtonBar setErrorCode={setErrorCode} showAlert={showAlert} />
       <div className={styles.imageContainer}>
         <img
-          className={styles.mainImage}
+          className={styles.fittingImage}
           src={isDefaultPage ? defaultImageUrl : fittingImage}
           alt="userImage"
         />