diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9cb5f26..8dc712a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,6 +15,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" @@ -1711,6 +1712,14 @@ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, + "node_modules/attr-accept": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", + "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==", + "engines": { + "node": ">=4" + } + }, "node_modules/autoprefixer": { "version": "10.4.13", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz", @@ -3055,6 +3064,22 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/file-selector": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", + "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", + "dependencies": { + "tslib": "^2.4.0" + }, + "engines": { + "node": ">= 12" + } + }, + "node_modules/file-selector/node_modules/tslib": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", + "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -4478,7 +4503,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -5011,7 +5035,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -5085,11 +5108,26 @@ "react": "^18.2.0" } }, + "node_modules/react-dropzone": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", + "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==", + "dependencies": { + "attr-accept": "^2.2.2", + "file-selector": "^0.6.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">= 10.13" + }, + "peerDependencies": { + "react": ">= 16.8 || 18.0.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-refresh": { "version": "0.14.0", @@ -7309,6 +7347,11 @@ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, + "attr-accept": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", + "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==" + }, "autoprefixer": { "version": "10.4.13", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz", @@ -8275,6 +8318,21 @@ "flat-cache": "^3.0.4" } }, + "file-selector": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", + "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", + "requires": { + "tslib": "^2.4.0" + }, + "dependencies": { + "tslib": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", + "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" + } + } + }, "fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -9261,8 +9319,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" }, "object-hash": { "version": "3.0.0", @@ -9610,7 +9667,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -9655,11 +9711,20 @@ "scheduler": "^0.23.0" } }, + "react-dropzone": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", + "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==", + "requires": { + "attr-accept": "^2.2.2", + "file-selector": "^0.6.0", + "prop-types": "^15.8.1" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "react-refresh": { "version": "0.14.0", diff --git a/frontend/package.json b/frontend/package.json index bff1dbe..b9a4d7f 100644 --- a/frontend/package.json +++ b/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" diff --git a/frontend/src/assets/download.png b/frontend/src/assets/download.png new file mode 100644 index 0000000..8434625 Binary files /dev/null and b/frontend/src/assets/download.png differ diff --git a/frontend/src/assets/home.png b/frontend/src/assets/home.png new file mode 100644 index 0000000..b69a98c Binary files /dev/null and b/frontend/src/assets/home.png differ diff --git a/frontend/src/assets/seaweeds.png b/frontend/src/assets/seaweeds.png new file mode 100644 index 0000000..8a4201f Binary files /dev/null and b/frontend/src/assets/seaweeds.png differ diff --git a/frontend/src/assets/smallFish.png b/frontend/src/assets/smallFish.png new file mode 100644 index 0000000..62a42b5 Binary files /dev/null and b/frontend/src/assets/smallFish.png differ diff --git a/frontend/src/components/nav/index.scss b/frontend/src/components/nav/index.scss new file mode 100644 index 0000000..412fd19 --- /dev/null +++ b/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; +} diff --git a/frontend/src/components/nav/index.tsx b/frontend/src/components/nav/index.tsx new file mode 100644 index 0000000..52a7d49 --- /dev/null +++ b/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 ( +
+
+ +
집으로 가기
+
+
+ ); +}; + +export default Nav; diff --git a/frontend/src/page/insertImage/index.scss b/frontend/src/page/insertImage/index.scss new file mode 100644 index 0000000..a5388bf --- /dev/null +++ b/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%; + } +} diff --git a/frontend/src/page/insertImage/index.tsx b/frontend/src/page/insertImage/index.tsx new file mode 100644 index 0000000..7029f71 --- /dev/null +++ b/frontend/src/page/insertImage/index.tsx @@ -0,0 +1,97 @@ +import Nav from '@/components/nav'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import download from '@/assets/download.png'; +import smallFish from '@/assets/smallFish.png'; +import seaweeds from '@/assets/seaweeds.png'; +import './index.scss'; +import { useDropzone } from 'react-dropzone'; +const InsertImage = () => { + const imageRef = useRef(null); + const [imagefile, setImageFile] = useState(); + const [preview, setPreview] = useState(''); + + //이미지 클릭시 file선택창이 나오게하는 함수 + const openFile = () => { + imageRef.current?.click(); + }; + + //이미지를 올리고 저장해주는 함수 + const raiseImg = (e: React.ChangeEvent) => { + if (e.target.files) { + const file = e.target?.files[0]; + setImageFile(file); + const formData = new FormData(); + formData.append('img', file); + } + }; + + //파일이 바뀔떄마다 preview데이터를 바꿔주는 훅 + useEffect(() => { + if (imagefile) { + const reader = new FileReader(); + reader.onloadend = () => { + setPreview(reader.result as string); + }; + reader.readAsDataURL(imagefile); + } + }, [imagefile]); + + const onDrop = useCallback((acceptedFiles: File[]) => { + setImageFile(acceptedFiles[0]); + }, []); + + const { getRootProps, getInputProps, isDragActive } = useDropzone({ + accept: { + 'image/*': [], + }, + onDrop, + }); + + return ( +
+
+ ); +}; + +export default InsertImage; diff --git a/frontend/src/page/insetImage/index.tsx b/frontend/src/page/insetImage/index.tsx deleted file mode 100644 index d706eb9..0000000 --- a/frontend/src/page/insetImage/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -const InsertImage = () => { - return
이미지 넣는 페이지입니다
; -}; - -export default InsertImage; diff --git a/frontend/src/page/main/index.tsx b/frontend/src/page/main/index.tsx index 30c3c5d..165e5f2 100644 --- a/frontend/src/page/main/index.tsx +++ b/frontend/src/page/main/index.tsx @@ -1,11 +1,10 @@ import React from 'react'; -import InsertImage from '../insetImage'; +import InsertImage from '../insertImage'; const Main = () => { return (
메인페이지입니다
-
안녕
); diff --git a/frontend/src/reset.scss b/frontend/src/reset.scss index c035571..f9bd24f 100644 --- a/frontend/src/reset.scss +++ b/frontend/src/reset.scss @@ -84,6 +84,7 @@ time, mark, audio, video { + overflow-x: hidden; margin: 0; padding: 0; border: 0;