diff --git a/package-lock.json b/package-lock.json index 12ebb71..27471d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@testing-library/user-event": "^12.8.3", "axios": "^0.21.1", "react": "^17.0.2", + "react-butterfiles": "^1.3.3", "react-dom": "^17.0.2", "react-modal": "^3.14.3", "react-router-dom": "^5.2.0", @@ -16773,6 +16774,18 @@ "node": ">=10" } }, + "node_modules/react-butterfiles": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-butterfiles/-/react-butterfiles-1.3.3.tgz", + "integrity": "sha512-Fd6oGkG0V75a54pCRbVN1IOR9bXO2xVpKCDsGHMGJaAq6AOFgzFtGx31CHn2KL9Eg1Zcwi3ZAb88qv43AxO30Q==", + "dependencies": { + "@babel/runtime": "^7.2.0", + "bytes": "^3.0.0" + }, + "peerDependencies": { + "react": ">=0.16.0" + } + }, "node_modules/react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -28238,6 +28251,14 @@ "follow-redirects": "^1.10.0" } }, + "axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", diff --git a/public/index.html b/public/index.html index af8e218..82366f4 100644 --- a/public/index.html +++ b/public/index.html @@ -8,10 +8,16 @@ name="description" content="Web site created using create-react-app" /> - - - - + + + + Collusic diff --git a/src/assets/PasswordMatch.png b/src/assets/PasswordMatch.png new file mode 100644 index 0000000..affab73 Binary files /dev/null and b/src/assets/PasswordMatch.png differ diff --git a/src/assets/bg.png b/src/assets/bg.png index f8a28b0..b666e0b 100644 Binary files a/src/assets/bg.png and b/src/assets/bg.png differ diff --git a/src/presentation/page/create/index.jsx b/src/presentation/page/create/index.jsx index b34b60b..cae342b 100644 --- a/src/presentation/page/create/index.jsx +++ b/src/presentation/page/create/index.jsx @@ -18,11 +18,8 @@ const Create = () => { mood: "", file: {}, }); - const [title, setTitle] = useState({ - title: "", - content: "", - }); const [errors, setErrors] = useState([]); + const [isFiled, setIsFiled] = useState(false); const fields = ["멜로디", "악기", "가사"]; const moods = [ "Uplifting", @@ -75,29 +72,46 @@ const Create = () => { }); } }; - const choiceRadio = (e) => { + const genreChoice = (e) => { const parser = new DOMParser(); const decodeString = parser.parseFromString( `${e.target.innerHTML}`, "text/html" ).body.textContent; - console.log(e); - if (form[`${e.target.name}`] === decodeString) { + if (form.genre === decodeString) { setForm({ ...form, - [`${e.target.name}`]: null, + genre: null, }); } else { setForm({ ...form, - [`${e.target.name}`]: decodeString, + genre: decodeString, + }); + } + }; + const moodChoice = (e) => { + const parser = new DOMParser(); + const decodeString = parser.parseFromString( + `${e.target.innerHTML}`, + "text/html" + ).body.textContent; + if (form.mood === decodeString) { + setForm({ + ...form, + mood: null, + }); + } else { + setForm({ + ...form, + mood: decodeString, }); } }; - const fileChoice = (file) => { let newFile = []; newFile.push(file); + setIsFiled(true); setForm({ ...form, file: file, @@ -107,102 +121,86 @@ const Create = () => { const { file } = err[0]; const { type } = err[0]; alert(`${file.name} is ${type}`); - setErrors([...errors, err]); }; const cancelFile = (e) => { setForm({ ...form, file: {} }); }; - const textTyping = (e) => { - setTitle({ - ...title, - [e.target.name]: e.target.value, - }); - }; - const submitProject = (e) => { - e.preventDefault(); - }; return ( <> -
- - + + +
+ + +
+ +
+ + +
+ +
+ 요청 분야
- - + {fields.map((field, i) => { + return ( + + ); + })}
-
- - + 장르 + {genres.map((genre, i) => { + return ( + + ); + })}
- -
- 요청 분야 -
- {fields.map((field, i) => { - return ( - - ); - })} -
-
- 장르 - {genres.map((genre, i) => { - return ( - - ); - })} -
-
- 분위기 - {moods.map((mood, i) => { - return ( - - ); - })} -
+
+ 분위기 + {moods.map((mood, i) => { + return ( + + ); + })}
- - 요청하기 - +
+ + 요청하기 ); }; diff --git a/src/presentation/page/create/styled.js b/src/presentation/page/create/styled.js index ae25736..91457b8 100644 --- a/src/presentation/page/create/styled.js +++ b/src/presentation/page/create/styled.js @@ -125,13 +125,9 @@ const RadioButton = ({ title, onClick, keyword, value }) => { return ( <> {keyword === value ? ( - - {value} - + {value} ) : ( - - {value} - + {value} )} ); diff --git a/src/presentation/page/home/index.jsx b/src/presentation/page/home/index.jsx index 48e3bdf..74a7124 100644 --- a/src/presentation/page/home/index.jsx +++ b/src/presentation/page/home/index.jsx @@ -1,6 +1,7 @@ import React from "react"; import Modal from "react-modal"; import Login from "./LoginModal"; +import Error from "./loginErrorModal"; import BG from "assets/bg.png"; import SignIn from "./SignInModal"; import { @@ -15,6 +16,8 @@ const Home = () => { const [modalIsOpen, setIsOpen] = React.useState(false); const [LoginModalIsOpen, setLoginModalIsOpen] = React.useState(true); const [signInModalIsOpen, setSigninModalIsOpen] = React.useState(false); + const [errorModalIsOpen, setErrorModalIsOpen] = React.useState(false); + const [loginError, setLoginError] = React.useState(""); function openModal() { setIsOpen(true); @@ -32,11 +35,17 @@ const Home = () => { setSigninModalIsOpen(true); setLoginModalIsOpen(false); } + function closeErrorModal() { + setErrorModalIsOpen(false); + } + function openErrorModal() { + setErrorModalIsOpen(true); + } return ( - + { )} - {signInModalIsOpen && } + {signInModalIsOpen && ( + + + + + + )} + + + diff --git a/src/presentation/page/home/loginErrorModal.js b/src/presentation/page/home/loginErrorModal.js new file mode 100644 index 0000000..31cee9b --- /dev/null +++ b/src/presentation/page/home/loginErrorModal.js @@ -0,0 +1,17 @@ +import React from "react"; +import { ErrorModalContainer } from "./styled"; + +const LoginErrorModal = ({ closeErrorModal, error }) => { + return ( + + +

{error}

+ + + + ); +}; + +export default LoginErrorModal; diff --git a/src/presentation/page/home/styled.js b/src/presentation/page/home/styled.js index cfb1d81..9b9b0b9 100644 --- a/src/presentation/page/home/styled.js +++ b/src/presentation/page/home/styled.js @@ -1,6 +1,7 @@ import styled from "styled-components"; import { css } from "styled-components"; import Color from "utils/style/color"; +import { FontFamily } from "utils/style/default"; const customStyles = { content: { @@ -12,7 +13,7 @@ const customStyles = { marginRight: "-50%", transform: "translate(-50%, -50%)", border: "0.5px solid white", - borderRadius: "20px", + borderRadius: "10px", boxShadow: "0 4px 4px 0 rgba(0,0,0,0.3)", }, overlay: { @@ -32,7 +33,7 @@ const HomeNav = styled.div` width: 100%; justify-content: space-between; position: absolute; - color: ${Color.MAIN_COLOR}; + color: white; top: 2em; button { border: none; @@ -44,19 +45,19 @@ const HomeNav = styled.div` font-weight: 700; background-color: inherit; font-family: "Krona One"; - color: ${Color.MAIN_COLOR}; + color: white; } & button:last-child { width: 7em; height: 2.2em; margin-right: 2em; - background-color: #ed8c1b; - color: white; + background-color: white; + color: ${Color.MAIN_COLOR}; border: 1px solid inherit; - font-family: "Krona One"; + font-family: ${FontFamily.KoreanFont}; border-radius: 20px; font-size: 19px; - font-weight: 300; + font-weight: 700; } `; @@ -83,12 +84,10 @@ const ModalButton = css` margin: 0.5em 0.5em; width: 25rem; height: 3.7rem; - font-family: "Noto Sans KR", sans-serif; + font-family: ${FontFamily.EnglishFont}, ${FontFamily.KoreanFont}; `; const ModalInput = css` ${ModalButton} - border: solid 2px #c1c1c1; - padding-left: 2rem; `; const LoginModalContainer = styled.div` @@ -103,8 +102,9 @@ const LoginModalContainer = styled.div` & > form > h2 { color: ${Color.MAIN_COLOR}; font-family: "Krona One"; - font-size: 2.7em; + font-size: 32px; cursor: default; + margin-top: 10px; } & > form > .Modal__Button--Cancel { background-color: inherit; @@ -119,6 +119,10 @@ const LoginModalContainer = styled.div` & > form > input { ${ModalInput}; font-size: 1.3em; + border: none; + border-bottom: solid 1px #909090; + border-radius: 0; + font-family: ${FontFamily.KoreanFont}; &:focus { outline: none; } @@ -128,13 +132,14 @@ const LoginModalContainer = styled.div` } & > form > #LoginModal__LoginButton { ${ModalButton} - width:27rem; + width:10rem; border: 1px solid ${Color.MAIN_COLOR}; background-color: ${Color.MAIN_COLOR}; color: white; - font-family: "Krona One"; + font-family: ${FontFamily.KoreanFont}; + font-weight: 700; cursor: pointer; - font-size: 1.5rem; + font-size: 1.2rem; margin-top: 2rem; } & > form > #LoginModal__SignInButton { @@ -143,7 +148,7 @@ const LoginModalContainer = styled.div` cursor: pointer; text-decoration: underline; font-family: "Noto Sans KR"; - color: #909090; + color: #505050; margin-top: 2rem; } `; @@ -173,14 +178,18 @@ const SignInModalContainer = styled.div` font-size: 2em; opacity: 0.5; } - & > input { + & input { ${ModalInput}; font-size: 1.3em; + border: none; + border-bottom: solid 1px #909090; + border-radius: 0; + font-family: ${FontFamily.KoreanFont}; &:focus { outline: none; } } - & > input::placeholder { + & input::placeholder { color: #c1c1c1; } & > .SingInModal__SignUpButton { @@ -194,6 +203,45 @@ const SignInModalContainer = styled.div` font-size: 1.5rem; margin-top: 2rem; } + & > div { + position: relative; + & > img { + position: absolute; + right: 0; + top: 25%; + display: none; + } + } +`; + +///////////////////////////////////////// +const ErrorModalContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + font-family: ${FontFamily.KoreanFont}; + & > button { + cursor: pointer; + } + & > button:first-child { + position: absolute; + right: 0; + top: 0; + border: none; + background-color: inherit; + font-size: 20px; + } + & > h2 { + margin-top: 40px; + } + & > button:last-child { + border: none; + background-color: inherit; + font-size: 10px; + margin-top: 20px; + } `; export { StyledContainer, @@ -203,4 +251,5 @@ export { customStyles, LoginModalContainer, SignInModalContainer, + ErrorModalContainer, };