Merge pull request #10 from SVTeamJ/feat/#3

물고기 사진 넣는페이지 퍼블리싱완료

frontend/package.json

@@ -16,6 +16,7 @@
     "postcss": "8.4.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-router-dom": "6.6.1",
     "recoil": "0.7.6",
     "tailwindcss": "3.2.4"

frontend/src/components/nav/index.scss

@@ -0,0 +1,23 @@
+.nav {
+  width: 100%;
+  height: 6rem;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  & img {
+    width: 4rem;
+    height: 3rem;
+  }
+}
+
+.nav_goHome {
+  display: flex;
+  &:hover {
+    scale: 1.05;
+  }
+}
+.nav_home {
+  font-size: 1.6rem;
+  margin-right: 2rem;
+  margin-left: 1rem;
+}

frontend/src/components/nav/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import home from '../../assets/home.png';
+import './index.scss';
+const Nav = () => {
+  const goToMain = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <div className="nav">
+      <div onClick={goToMain} className="nav_goHome">
+        <img src={home}></img>
+        <div className="nav_home">집으로 가기</div>
+      </div>
+    </div>
+  );
+};
+
+export default Nav;

frontend/src/page/insertImage/index.scss

@@ -0,0 +1,146 @@
+@import '../../media.scss';
+
+.img-view {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg, #4da8bc 0%, #306c79 100%);
+  position: relative;
+}
+
+.insertImage-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.insert_box {
+  width: 35rem;
+  height: 22.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #ffffff;
+  border-radius: 20px;
+  max-width: 70%;
+
+  @include tablet {
+    height: 25rem;
+  }
+}
+
+.insert_picture {
+  max-width: 65%;
+  width: 30rem;
+  height: 17.5rem;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background: rgba(157, 255, 255, 0.3);
+  border: 3.5px dashed #000000;
+  border-radius: 20px;
+
+  & > div {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  @include tablet {
+    height: 20rem;
+  }
+}
+
+.insert_picture-img {
+  width: 6rem;
+  height: 6rem;
+  margin-bottom: 1.5rem;
+}
+
+.hidden {
+  display: none;
+}
+
+.insert_picture-previewImg {
+  background-size: contain;
+  width: 100%;
+  height: 100%;
+}
+
+.insert_search {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 6rem;
+  height: 3.5rem;
+  margin-top: 10px;
+  background-color: rgb(219, 249, 249);
+  border-radius: 1rem;
+
+  &:hover {
+    scale: 1.05;
+  }
+
+  &:active {
+    position: relative;
+    top: -1px;
+  }
+}
+
+/////// 여기부터는 position으로 이미지를 레이아웃할떄 쓴 css
+.insert_fishImg {
+  position: absolute;
+  width: 8rem;
+  height: 14rem;
+  left: 5px;
+  top: 50%;
+
+  & img {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include tablet {
+    left: calc(30px + 3%);
+  }
+}
+
+.insert_fishImg2 {
+  position: absolute;
+  width: 8rem;
+  height: 14rem;
+  right: 5px;
+  top: 30%;
+
+  & img {
+    width: 100%;
+    height: 100%;
+  }
+  @include tablet {
+    right: calc(30px + 3%);
+  }
+}
+
+.insert_seaweedsImg {
+  width: 14rem;
+  height: 14rem;
+
+  position: absolute;
+  right: 15%;
+  bottom: 0;
+  & img {
+    width: 100%;
+    height: 100%;
+  }
+}