Merge pull request #57 from JNU-econovation/feature/Issue-19

feat 로그인 서버 통신 구현
Collusic · Jul 28, 2021 · 3895dd4 · 3895dd4
2 parents ff29f53 + 2a72cde
commit 3895dd4
Show file tree

Hide file tree

Showing 9 changed files with 251 additions and 123 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -8,10 +8,16 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
+      rel="stylesheet"
+    />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Collusic</title>
   </head>

diff --git a/src/assets/PasswordMatch.png b/src/assets/PasswordMatch.png
diff --git a/src/assets/bg.png b/src/assets/bg.png
diff --git 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(
       `<!doctype html><body>${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(
+      `<!doctype html><body>${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 (
     <>
-      <form onSubmit={submitProject}>
-        <CreateContainer>
-          <Index index="1"></Index>
+      <CreateContainer>
+        <Index index="1"></Index>
 
+        <div>
+          <TitleInput
+            placeholder="제목을 입력해주세요."
+            type="text"
+            style={{ display: "block" }}
+          />
+          <ContentTextArea
+            rows="5"
+            placeholder="내용을 입력해주세요 (최대300자)"
+          ></ContentTextArea>
+        </div>
+        <Index index="2"></Index>
+        <div>
+          <ContentTextArea
+            rows="10"
+            placeholder="가사를 입력해주세요."
+          ></ContentTextArea>
+          <FileUpload
+            isFiled={isFiled}
+            files={form.file}
+            errors={errors}
+            setFiles={fileChoice}
+            setErrors={occurredError}
+            cancelFile={cancelFile}
+          ></FileUpload>
+        </div>
+        <Index index="3"></Index>
+        <div style={{ width: "60%" }}>
+          <ButtonTitle>요청 분야</ButtonTitle>
           <div>
-            <TitleInput
-              name="title"
-              placeholder="제목을 입력해주세요."
-              type="text"
-              style={{ display: "block" }}
-              onChange={textTyping}
-            />
-            <ContentTextArea
-              name="content"
-              rows="5"
-              placeholder="내용을 입력해주세요 (최대300자)"
-              onChange={textTyping}
-            ></ContentTextArea>
+            {fields.map((field, i) => {
+              return (
+                <SelectButton
+                  onClick={fieldChoice}
+                  arr={form.fieldList}
+                  value={field}
+                  key={i}
+                />
+              );
+            })}
           </div>
-          <Index index="2"></Index>
           <div>
-            <ContentTextArea
-              rows="10"
-              placeholder="가사를 입력해주세요."
-            ></ContentTextArea>
-            <FileUpload
-              files={form.file}
-              errors={errors}
-              setFiles={fileChoice}
-              setErrors={occurredError}
-              cancelFile={cancelFile}
-            ></FileUpload>
+            <ButtonTitle>장르</ButtonTitle>
+            {genres.map((genre, i) => {
+              return (
+                <RadioButton
+                  onClick={genreChoice}
+                  keyword={form.genre}
+                  value={genre}
+                  key={i}
+                />
+              );
+            })}
           </div>
-          <Index index="3"></Index>
-          <div style={{ width: "60%" }}>
-            <ButtonTitle>요청 분야</ButtonTitle>
-            <div>
-              {fields.map((field, i) => {
-                return (
-                  <SelectButton
-                    onClick={fieldChoice}
-                    arr={form.fieldList}
-                    value={field}
-                    key={i}
-                  />
-                );
-              })}
-            </div>
-            <div>
-              <ButtonTitle>장르</ButtonTitle>
-              {genres.map((genre, i) => {
-                return (
-                  <RadioButton
-                    title="genre"
-                    onClick={choiceRadio}
-                    keyword={form.genre}
-                    value={genre}
-                    key={i}
-                  />
-                );
-              })}
-            </div>
-            <div>
-              <ButtonTitle>분위기</ButtonTitle>
-              {moods.map((mood, i) => {
-                return (
-                  <RadioButton
-                    title="mood"
-                    onClick={choiceRadio}
-                    keyword={form.mood}
-                    value={mood}
-                    key={i}
-                  />
-                );
-              })}
-            </div>
+          <div>
+            <ButtonTitle>분위기</ButtonTitle>
+            {moods.map((mood, i) => {
+              return (
+                <RadioButton
+                  title="분위기"
+                  onClick={moodChoice}
+                  keyword={form.mood}
+                  value={mood}
+                  key={i}
+                />
+              );
+            })}
           </div>
-        </CreateContainer>
-        <SubmitButton type="submit">요청하기</SubmitButton>
-      </form>
+        </div>
+      </CreateContainer>
+      <SubmitButton>요청하기</SubmitButton>
     </>
   );
 };

diff --git 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 ? (
-        <CheckedButton name={title} onClick={onClick}>
-          {value}
-        </CheckedButton>
+        <CheckedButton onClick={onClick}>{value}</CheckedButton>
       ) : (
-        <NotCheckedButton name={title} onClick={onClick}>
-          {value}
-        </NotCheckedButton>
+        <NotCheckedButton onClick={onClick}>{value}</NotCheckedButton>
       )}
     </>
   );

diff --git 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 (
     <StyledContainer id="HomeContainer">
       <HomeNav>
         <button>Collusic</button>
-        <button onClick={openModal}>Log in</button>
+        <button onClick={openModal}>로그인</button>
       </HomeNav>
       <Modal
         isOpen={modalIsOpen}
@@ -50,9 +59,41 @@ const Home = () => {
           <Login
             closeModal={closeModal}
             openSignInModal={openSignInModal}
+            setErrorModal={openErrorModal}
+            setError={setLoginError}
           ></Login>
         )}
-        {signInModalIsOpen && <SignIn closeModal={closeModal}></SignIn>}
+        {signInModalIsOpen && (
+          <SignIn
+            closeModal={closeModal}
+            setErrorModal={openErrorModal}
+            setError={setLoginError}
+          >
+            <Modal
+              isOpen={errorModalIsOpen}
+              onAfterOpen={afterOpenModal}
+              onRequestClose={closeErrorModal}
+              style={customStyles}
+              ariaHideApp={false}
+              contentLabel="Error Modal"
+            >
+              <Error
+                closeErrorModal={closeErrorModal}
+                error={loginError}
+              ></Error>
+            </Modal>
+          </SignIn>
+        )}
+      </Modal>
+      <Modal
+        isOpen={errorModalIsOpen}
+        onAfterOpen={afterOpenModal}
+        onRequestClose={closeErrorModal}
+        style={customStyles}
+        ariaHideApp={false}
+        contentLabel="Error Modal"
+      >
+        <Error closeErrorModal={closeErrorModal} error={loginError}></Error>
       </Modal>
       <HomeImageContainer>
         <HomeImage src={BG}></HomeImage>