Merge pull request #36 from boostcampaitech5/IMR-51/feat

IMR-51 feat: Add some guides for input img

front/src/components/page/UploadPage.css

@@ -17,11 +17,47 @@
 }
 
 .UploadPage .guideBox {
-  height: 60%;
+  height: 63%;
   width: 90%;
   background-color: #e3e3e3;
   border-radius: 15px;
   margin: auto;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.UploadPage .exImg {
+  display: flex;
+  margin-top: 1%;
+  justify-content: center;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.UploadPage .imgSet {
+  width: 28%;
+  border-radius: 15px;
+  margin-right: 3%;
+}
+.exImg img:last-child {
+  margin-right: 0;
+}
+
+.guideBox p {
+  font-family: 'Noto Sans KR', sans-serif;
+  margin-top: 9%;
+  margin-bottom: 3%;
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 0.85em;
+  text-align: center;
+  width: 85%;
 }
 
 .UploadPage .uploadBnt {

front/src/components/page/UploadPage.jsx

@@ -3,6 +3,12 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { FiUpload } from 'react-icons/fi';
 import './UploadPage.css';
 import heic2any from 'heic2any';
+import WrongImg1 from '../../wrong1.jpg';
+import WrongImg2 from '../../wrong2.jpg';
+import WrongImg3 from '../../wrong3.jpg';
+import GoodImg1 from '../../good1.jpg';
+import GoodImg2 from '../../good2.jpg';
+import GoodImg3 from '../../good3.jpg';
 
 function ImageUploadPage() {
   const location = useLocation();
@@ -59,9 +65,51 @@ function ImageUploadPage() {
           <h1>일상 사진을 올려주세요</h1>
           <h3>어울리는 노래를 찾고싶은 사진을 선택해주세요</h3>
         </div>
-        <div className="guideBox" />
+        <div
+          className="guideBox"
+          onContextMenu={(e) => {
+            e.preventDefault();
+          }}
+          // onSelect={(e) => {
+          //   e.preventDefault();
+          // }}
+          draggable="false"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="40"
+            viewBox="0 -960 960 960"
+            width="40"
+            style={{ marginTop: '4%' }}
+          >
+            <path d="m421-298 283-283-46-45-237 237-120-120-45 45 165 166Zm59 218q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z" />
+          </svg>
+          <br />
+          <div className="exImg">
+            <img className="imgSet" src={GoodImg1} alt="shaking" />
+            <img className="imgSet" src={GoodImg2} alt="shaking" />
+            <img className="imgSet" src={GoodImg3} alt="shaking" />
+          </div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="40"
+            viewBox="0 -960 960 960"
+            width="40"
+            style={{ marginTop: '7%' }}
+          >
+            <path d="m330-288 150-150 150 150 42-42-150-150 150-150-42-42-150 150-150-150-42 42 150 150-150 150 42 42ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z" />
+          </svg>
+          <div className="exImg">
+            <img className="imgSet" src={WrongImg1} alt="shaking" />
+            <img className="imgSet" src={WrongImg2} alt="shaking" />
+            <img className="imgSet" src={WrongImg3} alt="shaking" />
+          </div>
+          <p>
+            배경이 잘 보이지 않는 사진은 <br />
+            결과가 정확하지 않을 수도 있어요
+          </p>
+        </div>
       </div>
-
       <div className="footer">
         <label htmlFor="file" className="bnt-container">
           <div className="uploadBnt">