Design: 회원가입/로그인 페이지 UI

.github/workflows/main_merge.yml

@@ -18,32 +18,28 @@ jobs:
 
       - name: Set .env from secrets
         run: |
-          echo "PORT=${{ secrets.MAIN_PORT }}" > .env
-          echo "WDS_SOCKET_PORT=0" >> .env
-          echo "NODE_PATH=src/" >> .env
-          echo "REACT_APP_API_ROOT=${{ secrets.MAIN_REACT_APP_API_ROOT }}" >> .env
-          echo "REACT_APP_HOME_URL=${{ secrets.MAIN_REACT_APP_HOME_URL }}" >> .env
+          echo "${{ secrets.MAIN_ENV }}" > .env
 
       - name: cat env file
         run: cat .env
 
       - name: Generate build          # React Build
         run: npm run build
 
-      - name: file copy
-        uses: actions/upload-artifact@v3
-        with:
-          name: build
-          path: build
-  deploy:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - name: file download
-        uses: actions/download-artifact@v3
-        with:
-          name: build
-          path: build
+  #     - name: file copy
+  #       uses: actions/upload-artifact@v3
+  #       with:
+  #         name: build
+  #         path: build
+  # deploy:
+  #   needs: build
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: file download
+  #       uses: actions/download-artifact@v3
+  #       with:
+  #         name: build
+  #         path: build
       - name: Upload to S3
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.S3_MAIN_ACCESS_KEY_ID }}

package.json

@@ -21,6 +21,7 @@
     "react-apexcharts": "^1.4.1",
     "react-bootstrap": "^2.9.1",
     "react-cookie": "^6.1.1",
+    "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-modal": "^3.16.1",

src/App.js

@@ -17,17 +17,32 @@ import SalesPage from "../src/pages/Sales/Sales";
 import "./App.css";
 import Auth from "./hoc/auth.jsx";
 import useInterval from "./hooks/useInterval.jsx";
-import HomePage from "./pages/Home/Home";
-import MainPage from "./pages/Main/MainPage.jsx";
+// import HomePage from "./pages/Home/Home"; 카카오 로그인
+// import MainPage from "./pages/Main/MainPage.jsx";
+// 추가 페이지
+import SignupPage from "./pages/Signup/SignupPage.jsx";
+import LoginPage from "./pages/Login/LoginPage.jsx";
+import FindIdPage from "./pages/Find/FindIdPage/FindIdPage.jsx";//아이디 찾기-전화번호 인증
+import UserFindIdPage from "./pages/Find/FindIdPage/UserFindIdPage/UserFindIdPage.jsx";//아이디 찾기 결과-아이디 반환
+import NoneFindIdPage from "./pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.jsx";//아이디 찾기 결과-회원 X
+import FindPasswordPage from "./pages/Find/FindPasswordPage/FindPasswordPage.jsx";//비밀번호 찾기 - 아이디 조회
+import ChangePasswordPage from "./pages/Find/FindPasswordPage/ChangePasswordPage/ChangePasswordPage.jsx";//비밀번호 변경 - 전화번호 인증
+import ChangeNewPasswordPage from "./pages/Find/FindPasswordPage/ChangePasswordPage/ChangeNewPasswordPage/ChangeNewPasswordPage.jsx";//비밀번호 변경 - 새 비밀번호 인증
+import PhoneAuthPage from "./pages/Signup/PhoneAuth/PhoneAuthPage.jsx";
+import VerificationPage from "./pages/Signup/Verification/VerificationPage.jsx";
+import TermsPage from "./pages/Signup/Terms/TermsPage.jsx";
+import JudgeResultsBeforePage from "./pages/Signup/JudgeResults/JudgeResultsBeforePage.jsx";
+import JudgeResultsRejectPage from "./pages/Signup/JudgeResults/JudgeResultsReject/JudgeResultsRejectPage.jsx";
+import ApplicationForm from "./components/signup/ApplicationForm/ApplicationForm.jsx";
 
 function App() {
   const [cookies, , removeCookies] = useCookies();
   const navigate = useNavigate();
   const apiUrl = process.env.REACT_APP_API_ROOT;
   let location = useLocation();
 
-  const NewLoginPage = Auth(MainPage, false);
-  const NewHomePage = Auth(HomePage, true);
+  // const NewLoginPage = Auth(MainPage, false);
+  // const NewHomePage = Auth(HomePage, true); 카카오 로그인 
   const NewInventoryPage = Auth(InventoryPage, true);
   const NewSalesPage = Auth(SalesPage, true);
   const NewMyPage = Auth(Mypage, true);
@@ -66,7 +81,7 @@ function App() {
       <div>
         <div className="App">
           <Routes>
-            <Route path="/" element={<NewLoginPage />} />
+            <Route path="/" element={<LoginPage />} />
             <Route path="/*" element={<Navigate to="/"></Navigate>}></Route>
           </Routes>
         </div>
@@ -82,10 +97,25 @@ function App() {
 
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
-          <Route path="/home" element={<NewHomePage />} />
+          <Route path="/" element={<LoginPage />} />
           <Route path="/Inventory" element={<NewInventoryPage />} />
           <Route path="/Sales" element={<NewSalesPage />} />
           <Route path="/Mypage" element={<NewMyPage />} />
+          <Route path="/signup" element={<SignupPage />} /> 
+          {/* 추가 */}
+          <Route path="/signup/auth/phone" element={<PhoneAuthPage />} />
+          <Route path="/signup/auth/verification" element={<VerificationPage />} />
+          <Route path="/signup/auth/terms" element={<TermsPage />} />
+          <Route path="/signup/auth/results" element={<ApplicationForm />} />
+          <Route path="/signup/auth/results/before" element={<JudgeResultsBeforePage />} />
+          <Route path="/signup/auth/results/reject" element={<JudgeResultsRejectPage />} />
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/find/id" element={<FindIdPage />} />
+          <Route path="/find/id/serch" element={<UserFindIdPage />} />
+          <Route path="/find/id/none" element={<NoneFindIdPage />} />
+          <Route path="/find/password" element={<FindPasswordPage />} />
+          <Route path="/find/password/change" element={<ChangePasswordPage />} />
+          <Route path="/find/password/change/user" element={<ChangeNewPasswordPage />} />
           <Route path="/*" element={<Navigate to="/"></Navigate>}></Route>
         </Routes>
       </Suspense>

src/components/login/Certification/CertificationInput/CertificationInput.css

@@ -0,0 +1,72 @@
+.loginpage-find-form{
+    height: 18.6rem;
+    min-width: 15rem;
+}
+.loginpage-find-form-input-div{
+    display: flex;
+    align-items: center;
+}
+
+.loginpage-findId-input{
+    border-radius: 0.25rem;
+    border: 0.05rem solid rgba(131, 131, 131, 1);
+    font-size: 0.8rem;
+    min-width: 8.25rem;
+    height: 1rem;
+    padding: 0.8rem 1rem 0.7rem 1rem;
+    margin-right: 0.25rem;
+    font-family: "Pretendard";
+}
+
+.loginpage-findId-form-submit{
+    border-radius: 0.25rem;
+    border: 0.05rem solid rgba(131, 131, 131, 1);
+    /* padding: 0.8rem 1.4rem 0.7rem 1.4rem; */
+    height: 2.5rem;
+    min-width: 3.7rem;
+    align-items: center;
+    justify-content: row;
+    background-color: white;
+    font-family: "Pretendard";
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+.buttonClicked{
+    background-color: #FFEAEF;
+    /* padding: 0.8rem 1.4rem 0.7rem 1.2rem; */
+}
+
+.loginpage-form-submit-button-position{
+    position: absolute;
+    transform: translateX(0%);
+    bottom: 4.95rem;
+}
+
+/* w:768, h:1024일 때 */
+@media screen and (min-width: 481px) and (max-width: 768px) {
+    .loginpage-findId-input {
+        width: 10.5rem;
+    }
+    .loginpage-findId-form-submit{
+        /* width: 5.25rem; */
+        width: 4.25rem;
+    }
+}
+
+/* w:1024, h:1024일 때 */
+@media screen and (min-width: 769px) {
+    .loginpage-findId-input {
+        width: 10.5rem;
+    }
+    .loginpage-findId-form-submit{
+        width: 4.25rem;
+    }
+}
+
+/* w:480, h:800일 때 */
+@media screen and (max-width: 480px) {
+    .loginpage-findId-form-submit{
+        max-width: 4.4rem;
+    }
+}

src/components/login/Certification/CertificationInput/CertificationInput.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import RedButton from "../../redButton/RedButton";
+import "./CertificationInput.css";
+import CertificationNumInput from "../CertificationNumInput/CertificationNumInput";
+// import { Link } from "react-router-dom";
+
+function CertificationInput({ id, type, placeholder, requiredname, text, buttonText }) {
+  const [chkButton, setChkButton] = useState(false); // 인증버튼 클릭 여부
+
+  const handleButtonClick = () => {
+    setChkButton(true);
+  };
+
+  const renderCertificationNumInput = () => {
+    if (type === "tel" && chkButton) {
+      return <CertificationNumInput />;
+    }
+    return null;
+  };
+
+  return (
+    <>
+      <div className="loginpage-find-form-input-div">
+        <input
+          id={id}
+          type={type}
+          placeholder={placeholder}
+          requiredname={requiredname}
+          className="loginpage-findId-input"
+        />
+        <button
+          type="submit"
+          onClick={handleButtonClick}
+          className={`loginpage-findId-form-submit ${chkButton ? "buttonClicked" : ""}`}
+        >
+          {text === "인증" ? (chkButton ? "재인증" : text) : "조회"}
+        </button>
+      </div>
+
+      <form>
+        {renderCertificationNumInput()}
+        <div className="loginpage-form-submit-button-position">
+          <RedButton type="submit" onSubmit={(e) => e.preventDefault()}>
+            {buttonText}
+          </RedButton>
+        </div>
+      </form>
+    </>
+  );
+}
+
+export default CertificationInput;

src/components/login/Certification/CertificationNumInput/CertificationNumInput.css

@@ -0,0 +1,48 @@
+.loginpage-user-num-input-style{
+    position: "relative"
+}
+
+.loginpage-user-auth-num{
+    border-radius: 0.25rem;
+    border: 0.05rem solid rgba(131, 131, 131, 1);
+    font-size: 0.8rem;
+    margin: 0.4375rem 0;
+    width: 15rem;/*17rem-2rem*/
+    height: 1rem; /*2.5rem-1.5rem*/
+    padding: 0.7rem 0.9rem 0.7rem 1rem;
+    font-family: "Pretendard";
+}
+
+.timer{
+    position: absolute;
+    top: 50%;
+    right: 5.1rem;
+    transform: translateY(-50%);
+    font-family: "Pretendard";
+    font-size: 0.8rem;
+    color: #838383;
+}
+
+/* w:768, h:1024일 때 */
+@media screen and (min-width: 481px) and (max-width: 768px) {
+    .loginpage-user-auth-num {
+        width: 15rem;
+    }
+}
+
+/* w:1024, h:1024일 때 */
+@media screen and (min-width: 769px) {
+    .loginpage-user-auth-num {
+        width: 15rem;
+    }
+}
+
+/* w:480, h:800일 때 */
+@media screen and (max-width: 480px) {
+    .loginpage-user-auth-num {
+        max-width: 13rem;
+    }
+    .timer{
+        right: 3.1rem;
+    }
+}

src/components/login/Certification/CertificationNumInput/CertificationNumInput.jsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from "react";
+import LoginChkAlrm from "../../LoginChkAlrm/LoginChkAlrm";
+import "./CertificationNumInput.css";
+
+const AUTH_CODE = "1234";//서버에서 받아오는 값
+const TIMER_DURATION = 600;//타이머 시간 설정(600초)
+
+const Timer = ({ minutes, seconds }) => (
+  <div className="timer">
+    {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
+  </div>
+);
+
+
+function CertificationNumInput(){
+  const [chkNum, setChkNum] = useState("");
+  const [timer, setTimer] = useState(TIMER_DURATION);
+  const [isAuth, setIsAuth] = useState();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimer((prevTimer) => prevTimer - 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [setTimer]);
+
+  const handleInputText = (e) => {
+    const newChkNum = e.target.value;
+    setChkNum(newChkNum);
+    equlChknum(newChkNum, AUTH_CODE);
+  };
+
+  const equlChknum = (inputNum, serverNum) => {
+    if (serverNum === inputNum) {
+      setIsAuth(true);
+    } else if (serverNum !== inputNum) {
+      setIsAuth(false);
+    } else {
+      setIsAuth(null);
+    }
+  };
+
+
+  const renderMessage = () => {
+    if (timer <= 0) {
+      return <LoginChkAlrm icon={"X"} paddingSize={"0.45rem"}>인증 시간이 초과되었습니다.</LoginChkAlrm>;
+    } else if (timer > 0 && !isAuth) {
+      return <LoginChkAlrm icon={"X"} paddingSize={"0.45rem"}>인증번호가 일치하지 않습니다.</LoginChkAlrm>;
+    } else if (timer > 0 && isAuth) {
+      return <LoginChkAlrm icon={""} paddingSize={"0.45rem"}>인증이 완료되었습니다.</LoginChkAlrm>;
+    }
+  };
+
+  return (
+    <>
+      <div className="loginpage-user-num-input-style">
+        <div>
+          <input
+            id="username"
+            type="text"
+            placeholder="인증번호"
+            required
+            name="username"
+            value={chkNum}
+            onChange={handleInputText}
+            className="loginpage-user-auth-num"
+          />
+          {timer > 0 && <Timer minutes={Math.floor(timer / 60)} seconds={timer % 60} />}
+        </div>
+      </div>
+
+      <div>{renderMessage()}</div>
+    </>
+  );
+};
+
+export default CertificationNumInput;