Start-as-Web-Developers · hoonystory98 · Jul 2, 2023 · Jul 2, 2023 · Jul 2, 2023 · Jul 23, 2023
diff --git a/frontend/localhost-key.pem b/frontend/localhost-key.pem
@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQD5hvO4g67lKALH
+ni8VLxxygdpDfBXbGfLTykYgkJPxiir3SsXfDx+ea6OklOw/a39Uh7Eyf/RNQkMP
+LQ80vkCIPDyOwSpgeo5D2Js+fj/YZVQ3pAv70AlyqLB3oPn015bf9rt50jTbCsHQ
+Wn0iLEC60NcyX7svm4RzC3bLhg5vSrxyJXOpAZsC3WxpQDe9VbZYohk1H6vxGRmS
+fl/e5a0E2FwVdHPxN8pqUft9YcK+hcu+Bsu595nsbM/HS5lJKEHrwChYk2orfL4a
+CJuNVeCS+8bE5T2aMXlUiBJMoWN7ur1YXW017t1gV/g7ivnIN0u2F78+ITqCoNEE
+5pmpIRxLAgMBAAECggEAec+YgNW/9lxO5xXglC3YbEnZvCICJWCIez1+eH07y6kQ
+ioI1EEw4ukR/sWOF5PvcP+6x4R43q9OSGwF7L9tEc308bs/7mPebJaHDP4GwNzpY
+H4V02CvZwOB6rRunihAItjKjmLe2V8vri4PxHFKQEuLKeuvi3D3GLcdF6dr6hvb1
+PbUBbwyVjMbaR6LBbS8oGbrblE4zo3HiHRxGR8egAr+OGgLa+CTSfpuIcl8vmCFI
+al4xqfXQyxLwZ+nGTndyoIocO5TDl6Msrb5OEuRnEWXwgCZ7pIKMuhCfncmgE455
+pUiEkUNIzexEKaPYAmrg5sCUMAxc1oJ2ah2Mq3WdyQKBgQD8hHfY1AZZ1bFbrbD2
+3MnSZ653pLVFNpDhyPDfHupJAr4/fIq99+zjqGlAmpIzsomkPgZA5t1iVFFfyG73
+FxRsDqAB5Ww6EspW4sn/6/aBYXtcg32vM3XkEbDwK5UHQWVH1DWElJwXxcPzyPeu
+hskC1+zVSLDDOSao6YCADJQOzQKBgQD89+0pXeARXwD5uUVTIzp2WaOQKLTp/f+p
+4FawFHD0PJ1A67UXa0uRhPWk+E5xW5hqhoTHaaKwYahL5JEQM6XVp+Rc6YXjH9ox
+gC4+7bKK2DGrr2F16HKUyLkMnfpJD+2aS1FybhjpI0/A9if2F0MxUldZHTITxTCY
+4QrXgEEndwKBgGnPA/zqEuMvpIp6xE0chMDSSwu9C2u+CoVhUnTbmmYPbTJi+CvT
+qAJYvgmg+yQIap5UkwA8/ITIOfS9oqmMlTUWB7vjqy7GUtyHWQcQk5DxDOTeABsa
+oAp50z8/s8l/gHXRmL8+Gg3oA0yyZ/5MYgv7+DQCqnaTCvz6IqsFGkD9AoGBAJTl
+nYu+vLec0ucqXRq9Xpjw1CxzOWGNZuHnsT69GWs5Dlp7IsFhHz7NIwVyPkHM5x60
+hQ0XKXJmWPgq1hPSQqdKxkjGD0+LnROL3iyeHnxJGptyhIwxQNhAeWNqzToaDQHH
+mW4gTbtUVIpAmW7pbFxomg9S9vnaFGu38ni7/h2rAoGBAM9mhCm3spNf6GB2sUwC
+26FaKGzkTDJNeypdM5Q+AQ6hktv0To/jhY3oJfMKaHZ8eC/Zy/8XKiwrplAtRdgs
+fBgw+6p+W+BFw0i+Q+eujEyAksLuRlDOjUVcKGgf564mR3nxqjHZ4f7nJlPPJ65c
+a+TMeDouInS6mFP8gqJuWwxt
+-----END PRIVATE KEY-----
diff --git a/frontend/localhost.pem b/frontend/localhost.pem
@@ -0,0 +1,26 @@
+-----BEGIN CERTIFICATE-----
+MIIEbjCCAtagAwIBAgIRAKm1+JakyJVgOJw5d1WUOzQwDQYJKoZIhvcNAQELBQAw
+gZ8xHjAcBgNVBAoTFW1rY2VydCBkZXZlbG9wbWVudCBDQTE6MDgGA1UECwwxREVT
+S1RPUC1BSE05VTdKXGhvb255QERFU0tUT1AtQUhNOVU3SiAo7KCV7YOc7ZuIKTFB
+MD8GA1UEAww4bWtjZXJ0IERFU0tUT1AtQUhNOVU3Slxob29ueUBERVNLVE9QLUFI
+TTlVN0ogKOygle2DnO2biCkwHhcNMjMwNjA1MTIyODQ0WhcNMjUwOTA1MTIyODQ0
+WjBlMScwJQYDVQQKEx5ta2NlcnQgZGV2ZWxvcG1lbnQgY2VydGlmaWNhdGUxOjA4
+BgNVBAsMMURFU0tUT1AtQUhNOVU3Slxob29ueUBERVNLVE9QLUFITTlVN0ogKOyg
+le2DnO2biCkwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQD5hvO4g67l
+KALHni8VLxxygdpDfBXbGfLTykYgkJPxiir3SsXfDx+ea6OklOw/a39Uh7Eyf/RN
+QkMPLQ80vkCIPDyOwSpgeo5D2Js+fj/YZVQ3pAv70AlyqLB3oPn015bf9rt50jTb
+CsHQWn0iLEC60NcyX7svm4RzC3bLhg5vSrxyJXOpAZsC3WxpQDe9VbZYohk1H6vx
+GRmSfl/e5a0E2FwVdHPxN8pqUft9YcK+hcu+Bsu595nsbM/HS5lJKEHrwChYk2or
+fL4aCJuNVeCS+8bE5T2aMXlUiBJMoWN7ur1YXW017t1gV/g7ivnIN0u2F78+ITqC
+oNEE5pmpIRxLAgMBAAGjXjBcMA4GA1UdDwEB/wQEAwIFoDATBgNVHSUEDDAKBggr
+BgEFBQcDATAfBgNVHSMEGDAWgBQ4Gvj+2SMUx6T2BeT8+r9irVbQezAUBgNVHREE
+DTALgglsb2NhbGhvc3QwDQYJKoZIhvcNAQELBQADggGBAE9AXM7yPFiceJTbjD90
+BzuP3N9YdPEUDgoUuVtD8FamjZV7XuJ7KK+YGZzW8FD3pPeQWGpf9HyuRhde3to5
+POCgsrgtNlVi0zRQy7fbleiQDukQuzgpvz1mMy05Ea1vnlEQsWoVUWR0XP8u35UH
+pKdmbawanw0A+K90+c5q2ZGIEWetgcdOXJ3CFarjOypDJP/7N7uNbvYThTFg0gR6
+C7Ody+AY3k5L/pmCPnu1qNkkqVplXa4IiMQzn2DB+d8gywTIDap6HhH9EDZrXPHl
+UxLS0fUUuIiKQoyEodyamppsEP/cAJnFRY9ITjiBSNXn2RPEsNlsdtaUrgY67coa
+NuaJNGOacAgtS0lRi8RojMGR68GvizcRS4hUfN/AxbTdXwfCh/agWCG3+4xAN8oV
+G0M8LZolwzTi5NNAXsgd+Uh1tYSPSwwaSQ0rvLleM+nnOzAZrvQopm++EJilGmbq
+PAMdZ9md0Oc1Jc7EXJNvIErS+rNE2ZNTcIza2snSJobVwA==
+-----END CERTIFICATE-----
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,17 +8,19 @@
     "@types/node": "^16.18.23",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
+    "http-proxy-middleware": "^2.0.6",
     "jest": "^27.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1",
     "sass": "^1.62.0",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.85.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set HTTPS=true&&set SSL_CRT_FILE=localhost.pem&&set SSL_KEY_FILE=localhost-key.pem&&react-scripts start",
     "build": "react-scripts build",
     "test": "jest",
     "eject": "react-scripts eject"
@@ -73,5 +75,6 @@
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.0.0"
-  }
+  },
+  "proxy": "http://zangsu-backend.store"
 }
diff --git a/frontend/src/Login/LoginForm/LoginForm.tsx b/frontend/src/Login/LoginForm/LoginForm.tsx
@@ -1,17 +1,77 @@
-import React from "react";
+import React, { useState, ChangeEvent, FormEvent } from "react";
 import "./LoginForm.scss";
 
 function LoginForm() {
+  const [loginId, setLoginId] = useState("");
+  const [loginPassword, setLoginPassword] = useState("");
+
+  const handleLoginId = (event: ChangeEvent<HTMLInputElement>) => {
+    const loginIdValue = event.target.value;
+    setLoginId(loginIdValue);
+  };
+  const handleLoginPassword = (event: ChangeEvent<HTMLInputElement>) => {
+    const loginPasswordValue = event.target.value;
+    setLoginPassword(loginPasswordValue);
+  };
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const userLogin = {
+      userId: loginId,
+      userPassword: loginPassword,
+    };
+
+    fetch("https://zangsu-backend.store/user/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Content-Length": String(JSON.stringify(userLogin).length),
+      },
+      body: JSON.stringify(userLogin),
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.ok) {
+          console.log("Login Success");
+          return fetch("https://zangsu-backend.store/user", {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            credentials: "include",
+          });
+        }
+        console.log("Login Failed");
+        return response;
+      })
+      .then((dataResponse) => {
+        if (dataResponse.ok) {
+          return dataResponse.json();
+        }
+        throw new Error("GET 요청이 실패했습니다.");
+      })
+      .then((data) => {
+        // 응답 데이터 처리
+        console.log(data);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
   return (
-    <form className="LoginForm">
+    <form className="LoginForm" onSubmit={handleSubmit}>
       <div>
         <label htmlFor="username">
-          <p className="LoginLabel">이메일 주소</p>
+          <p className="LoginLabel">아이디</p>
           <input
             type="text"
             id="username"
             className="LoginInput"
-            placeholder="이메일 주소를 입력해주세요"
+            placeholder="아이디를 입력해주세요"
+            value={loginId}
+            onChange={handleLoginId}
           />
         </label>
       </div>
@@ -23,6 +83,8 @@ function LoginForm() {
             id="password"
             className="LoginInput"
             placeholder="비밀번호를 입력해주세요"
+            value={loginPassword}
+            onChange={handleLoginPassword}
           />
         </label>
       </div>

diff --git a/frontend/src/Login/Signup.scss b/frontend/src/Login/Signup.scss
@@ -126,6 +126,13 @@
     width: 100%;
     height: 3rem;
     border: none;
+    &:disabled {
+      background-color: gray;
+      cursor: default;
+      &:hover {
+        opacity: 1;
+      }
+    }
   }
 }
 

diff --git a/frontend/src/Login/Signup.tsx b/frontend/src/Login/Signup.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, ChangeEvent } from "react";
+import React, { useState, useEffect, ChangeEvent, FormEvent } from "react";
 import Logo from "../TumblbugLogo/Logo";
 import "./Signup.scss";
 import "./LoginForm/LoginForm.scss";
@@ -17,6 +17,8 @@ function SignupContainer(props: LoginProps) {
     { id: 5, checked: false, required: false },
   ]);
   const [showMessage, setShowMessage] = useState(false);
+  const [username, setUsername] = useState("");
+  const [userId, setUserId] = useState("");
   const [email, setEmail] = useState("");
   const [emailConfirm, setEmailConfirm] = useState("");
   const [isValidEmail, setIsValidEmail] = useState(true);
@@ -25,6 +27,7 @@ function SignupContainer(props: LoginProps) {
   const [passwordConfirm, setPasswordConfirm] = useState("");
   const [isValidPassword, setIsValidPassword] = useState(true);
   const [isValidPasswordConfirm, setIsValidPasswordConfirm] = useState(true);
+  const [submitAvailable, setSubmitAvailable] = useState(false);
 
   const handleAllChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { checked } = event.target;
@@ -59,6 +62,14 @@ function SignupContainer(props: LoginProps) {
     setShowMessage(hasUncheckedRequired);
   }, [checkboxes]);
 
+  const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const usernameValue = event.target.value;
+    setUsername(usernameValue);
+  };
+  const handleUserIdChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const userIdValue = event.target.value;
+    setUserId(userIdValue);
+  };
   const handleEmailChange = (event: ChangeEvent<HTMLInputElement>) => {
     const emailValue = event.target.value;
     setEmail(emailValue);
@@ -95,20 +106,70 @@ function SignupContainer(props: LoginProps) {
     transferBox(signinup);
   };
 
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const userData = {
+      userId,
+      userPassword: password,
+      userName: username,
+      userEmail: email,
+    };
+
+    fetch("https://zangsu-backend.store/user", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(userData),
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.ok) {
+          console.log("회원가입이 성공했습니다.");
+
+          return fetch("https://zangsu-backend.store/user", {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            credentials: "include",
+          });
+        }
+        console.log("회원가입이 실패했습니다.");
+        return response;
+      })
+      .then((dataResponse) => {
+        if (dataResponse.ok) {
+          return dataResponse.json();
+        }
+        throw new Error("GET 요청이 실패했습니다.");
+      })
+      .then((data) => {
+        // 응답 데이터 처리
+        console.log(data);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
   return (
     <section className="SignupSection">
       <div className="SignupImage" />
       <section className="SignupBox">
         <Logo />
         <h2 className="SignupTitle">이메일로 가입하기</h2>
-        <form className="SignupForm">
+        <form className="SignupForm" onSubmit={handleSubmit}>
           <label htmlFor="username" className="SignupLabel">
             <p className="LoginLabel">이름</p>
             <input
               type="text"
               id="username"
               className="LoginInput"
               placeholder="사용하실 이름을 입력해주세요."
+              value={username}
+              onChange={handleUsernameChange}
             />
           </label>
           <label htmlFor="userid" className="SignupLabel">
@@ -118,6 +179,8 @@ function SignupContainer(props: LoginProps) {
               id="userid"
               className="LoginInput"
               placeholder="사용하실 아이디를 입력해주세요."
+              value={userId}
+              onChange={handleUserIdChange}
             />
           </label>
           <label htmlFor="useremail" className="SignupLabel">
@@ -254,14 +317,18 @@ function SignupContainer(props: LoginProps) {
               </p>
             )}
           </div>
-          <button type="submit" className="LoginButton">
+          <button
+            type="submit"
+            className="LoginButton"
+            disabled={submitAvailable}
+          >
             가입하기
           </button>
         </form>
         <div className="SignuptoLogin">
           <p className="SignupSuggestion">이미 텀블벅 계정이 있으신가요?</p>
           <button
-            type="button"
+            type="submit"
             className="LoginSuggestionLink"
             onClick={() => clickTransfer("login")}
           >

diff --git a/frontend/src/Main/Body.tsx b/frontend/src/Main/Body.tsx
@@ -1,15 +1,41 @@
-import React from 'react';
+import React, {useState,useEffect} from 'react';
 import BodyFilterBtnArea from './BodyFilterBtnArea';
 import BodyTitle from './BodyTitle';
 import CardArea from './CardArea';
 import "./body.scss";
 
+type cardContent = {
+  projectImg: string;
+  projectIdx: number;
+  category: string;
+  createrName: string;
+  title: string;
+  comment: string;
+  endDate: string;
+  like: number;
+  goalMoney: number;
+  totalMoney: number;
+};
+
 function Body() {
+  const [cards, setCards] = useState<cardContent[]>([]);
+
+  useEffect(() => {
+    fetch("https://zangsu-backend.store/projects/ongoing?sort=new")
+      .then(response => response.json())
+      .then((data: cardContent[]) => {
+        setCards(prevCards => [...prevCards, ...data]);
+      })
+      .catch(error => {
+        console.error("�����͸� �������� �� ������ �߻��߽��ϴ�:", error);
+      });
+  }, []);
+
   return (
     <section className="body">
       <BodyFilterBtnArea />
-      <BodyTitle />
-      <CardArea />
+      <BodyTitle cardNumber={cards.length}/>
+      <CardArea cards={cards}/>
     </section>
   );
 }

diff --git a/frontend/src/Main/BodyTitle.tsx b/frontend/src/Main/BodyTitle.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import './bodyTitle.scss';
-import { cards } from './CardArea';
 
-function BodyTitle() {
+interface props{
+  cardNumber: number;
+}
+
+function BodyTitle(prop: props) {
   return (
     <h1 className="bodyTitle">
-      <span className="bodyTitle__projectNumber">{cards.length}</span>
+      <span className="bodyTitle__projectNumber">{prop.cardNumber}</span>
       <span className="bodyTitle__projectExplain">
         개의 프로젝트가 있습니다.
       </span>