Skip to content

Commit

Permalink
Merge pull request #94 from choiyoubin/test
Browse files Browse the repository at this point in the history 
Feat: 빌드오류해결
  • Loading branch information
@1223v
1223v authored Jan 18, 2024
2 parents cb5a40b + fc65b63 commit 2c1b920
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 79 deletions.
15 changes: 15 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 22 additions & 22 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { message } from "antd";
import axios from "axios";
import React, { Suspense } from "react";
import { useCookies } from "react-cookie";
import {
Navigate,
Route,
Expand All @@ -17,32 +16,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 HomePage from "./pages/Home/Home";
// import MainPage from "./pages/Main/MainPage.jsx";
// 추가 페이지
import SignupPage from "./pages/Signup/SignupPage.jsx";
import ApplicationForm from "./components/signup/ApplicationForm/ApplicationForm.jsx";
import FindIdPage from "./pages/Find/FindIdPage/FindIdPage.jsx"; //아이디 찾기-전화번호 인증
import NoneFindIdPage from "./pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.jsx"; //아이디 찾기 결과-회원 X
import UserFindIdPage from "./pages/Find/FindIdPage/UserFindIdPage/UserFindIdPage.jsx"; //아이디 찾기 결과-아이디 반환
import ChangeNewPasswordPage from "./pages/Find/FindPasswordPage/ChangePasswordPage/ChangeNewPasswordPage/ChangeNewPasswordPage.jsx"; //비밀번호 변경 - 새 비밀번호 인증
import ChangePasswordPage from "./pages/Find/FindPasswordPage/ChangePasswordPage/ChangePasswordPage.jsx"; //비밀번호 변경 - 전화번호 인증
import FindPasswordPage from "./pages/Find/FindPasswordPage/FindPasswordPage.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";
import PhoneAuthPage from "./pages/Signup/PhoneAuth/PhoneAuthPage.jsx";
import SignupPage from "./pages/Signup/SignupPage.jsx";
import TermsPage from "./pages/Signup/Terms/TermsPage.jsx";
import VerificationPage from "./pages/Signup/Verification/VerificationPage.jsx";

function App() {
const [cookies, , removeCookies] = useCookies();
//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(LoginPage, false);
const NewHomePage = Auth(HomePage, true);
const NewInventoryPage = Auth(InventoryPage, true);
const NewSalesPage = Auth(SalesPage, true);
const NewMyPage = Auth(Mypage, true);
Expand All @@ -52,11 +51,11 @@ function App() {
useInterval(() => {
// console.log(cookies.refreshToken);
if (
cookies.refreshToken !== "undefined" &&
cookies.refreshToken !== undefined &&
cookies.refreshToken
localStorage.refreshToken !== "undefined" &&
localStorage.refreshToken !== undefined &&
localStorage.refreshToken
) {
if (cookies.accessToken) {
if (localStorage.accessToken) {
const config = {
withCredentials: true,
};
Expand All @@ -65,7 +64,7 @@ function App() {
.then((response) => {
console.log(response);
if (!response.data) {
removeCookies();
localStorage.clear()
navigate("/");
}
})
Expand Down Expand Up @@ -97,7 +96,8 @@ function App() {

<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<LoginPage />} />
<Route path="/test1" element={<NewLoginPage />} />
<Route path="/home" element={<NewHomePage />} />
<Route path="/Inventory" element={<NewInventoryPage />} />
<Route path="/Sales" element={<NewSalesPage />} />
<Route path="/Mypage" element={<NewMyPage />} />
Expand Down
1 change: 1 addition & 0 deletions src/Atom/status.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export const getAuthenticatedSelector = selector({
effects_UNSTABLE: [persistAtom],
});

// TODO: 여기 변경하기
export const loginState = atom({
key: "loginState",
default: {
Expand Down
4 changes: 2 additions & 2 deletions src/components/login/redButton/RedButton.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import "./RedButton.css";
const RedButton=({ type, className, children, ...rest })=>{
const RedButton=({ type, className, children, onClick, ...rest })=>{
return(
<button type={type} className="red-button">{children}</button>
<button type={type} className={`red-button ${className}`} onClick={onClick} >{children}</button>
)
}
export default RedButton;
92 changes: 45 additions & 47 deletions src/hoc/auth.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import { message } from "antd";
import moment from "moment";
import { useEffect } from "react";
import { useCookies } from "react-cookie";
import { useLocation, useNavigate } from "react-router-dom";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { getUserSelector, isAuthenticatedState, loginState } from "../Atom/status";

//import { useLocation, useNavigate } from "react-router-dom";
//import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
//import { getUserSelector, isAuthenticatedState, loginState } from "../Atom/status";
import { useRecoilValue } from 'recoil';
import { getUserSelector } from '../Atom/status';
function Auth(SpecificComponent, option) {
function AuthenticationCheck(props) {
const navigate = useNavigate();
const location = useLocation();
//const navigate = useNavigate();
//const location = useLocation();
const userInfo = useRecoilValue(getUserSelector);
// const tokenInfo = useRecoilValue(getAuthenticatedSelector);
const [isAuth, setIsAuth] = useRecoilState(isAuthenticatedState);
const setIsLoggedIn = useSetRecoilState(loginState);
const [cookies] = useCookies(["accessToken"]);
//const [isAuth, setIsAuth] = useRecoilState(isAuthenticatedState);
//const setIsLoggedIn = useSetRecoilState(loginState);
// const [cookies] = useCookies(["accessToken"]);

// const refresh = async () => {
// await Refresh();
Expand All @@ -23,49 +21,49 @@ function Auth(SpecificComponent, option) {

useEffect(() => {
console.log(userInfo);
if (option && userInfo === "404" && location.pathname !== "/") {
navigate('/');
} else{
// if (option && userInfo === "404" && location.pathname !== "/") {
// navigate('/');
// } else{

if (
!isAuth &&
cookies?.accessToken
) {
// 첫 로그인 시
setIsAuth(true);
setIsLoggedIn({
accessToken: getAccessTokenFromCookie(),
expiredTime: moment().add(1, "minutes").format("yyyy-MM-DD HH:mm:ss"),
});
navigate("/home");
message.success("로그인에 성공하셨습니다.");
} else {
if (cookies?.accessToken && location.pathname === "/") {
// 로그인 상태에서 로그인 화면으로 갔을 경우
navigate("/home");
}
}
}
// if (
// !isAuth &&
// localStorage?.accessToken
// ) {
// // 첫 로그인 시
// setIsAuth(true);
// setIsLoggedIn({
// accessToken: localStorage.accessToken,
// expiredTime: moment().add(1, "minutes").format("yyyy-MM-DD HH:mm:ss"),
// });
// navigate("/home");
// message.success("로그인에 성공하셨습니다.");
// } else {
// if (localStorage.accessToken && location.pathname === "/") {
// // 로그인 상태에서 로그인 화면으로 갔을 경우
// navigate("/home");
// }
// }
//}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return <SpecificComponent />;
}
return AuthenticationCheck;
}

export const getAccessTokenFromCookie = () => {
const cookieString = document.cookie;
if (cookieString) {
const cookies = cookieString.split("; ");
// export const getAccessTokenFromCookie = () => {
// const cookieString = document.cookie;
// if (cookieString) {
// const cookies = cookieString.split("; ");

for (const cookie of cookies) {
const [name, value] = cookie.split("=");
if (name === "accessToken") {
return value;
}
}
}
return null;
};
// for (const cookie of cookies) {
// const [name, value] = cookie.split("=");
// if (name === "accessToken") {
// return value;
// }
// }
// }
// return null;
// };

export default Auth;
60 changes: 52 additions & 8 deletions src/pages/Login/LoginPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import Container from "../../components/login/Container/Container";
import "./LoginPage.css";
import axios from "axios";
import { useState } from "react";
import RedButton from "../../components/login/redButton/RedButton";
import { Link } from "react-router-dom";
import { useRecoilState } from "recoil";
import { loginState } from "../../Atom/status";
import Container from "../../components/login/Container/Container";
import LoginChkAlrm from "../../components/login/LoginChkAlrm/LoginChkAlrm";
import RedButton from "../../components/login/redButton/RedButton";
import "./LoginPage.css";

const LoginFindUserIdAndPassword=()=>{
return(
Expand All @@ -24,16 +27,57 @@ function LoginPage () {

// 로그인값 받아오기..
// const [userData, setUserData] = useState(true);
const userData = useState(true);

// 로그인 내용
const [loginInfo, setLoginInfo ] = useRecoilState(loginState);
const [EmailText,setEmailText] = useState("");
const [Password, setPassword] = useState("");

const onEmailHandler = (event) => {
setEmailText(event.currentTarget.value);
};

const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value);
};

const handleLogin = async ( ) => {
alert(1);
try {
const apiUrl = process.env.REACT_APP_API_ROOT;
const response = await axios.post(`${apiUrl}/api/v1/user/login`, {
email: EmailText,
password: Password
});

console.log(response.data)
if (response.data.success) {
// 로그인 성공: Recoil 상태와 localStorage에 토큰 저장
setLoginInfo({
...loginInfo,
accessToken: response.data.accessToken,
refreshToken: response.data.refreshToken,
});
localStorage.setItem('accessToken', response.data.accessToken);
localStorage.setItem('refreshToken', response.data.refreshToken);
console.log('로그인 성공:', response.data.message);
} else {
console.log('로그인 실패:', response.data.message);
}
} catch (error) {
console.error('로그인 요청 실패:', error);
}
};

return(
<Container title={"통합 로그인"} containerWidth={containerSize[0]} containerHeight={containerSize[1]} logoMarginTop={containerSize[2]} logoMarginBottom={"2.55rem"}>
<form className="loginpage-form">
<input id="username" type="text" placeholder="아이디" required name="username" className="loginpage-user-id"/>
<input id="password" type="password" placeholder="비밀번호" required name="usernamepassword" className="loginpage-user-password"/>
{!userData &&<LoginChkAlrm icon={"X"} paddingSize={"0.45rem"}>아이디 또는 비밀번호가 일치하지 않습니다.</LoginChkAlrm>}
<input type="email" name="userName" placeholder="Email" value={EmailText} onChange={onEmailHandler} className="loginpage-user-id"/>
<input type="password" name="userPassword" placeholder="Password" value={Password} onChange={onPasswordHandler} className="loginpage-user-password"/>
{!loginInfo &&<LoginChkAlrm icon={"X"} paddingSize={"0.45rem"}>아이디 또는 비밀번호가 일치하지 않습니다.</LoginChkAlrm>}
<LoginFindUserIdAndPassword/>
<div className="loginpage-form-login-wrapper">
<RedButton type="submit">로그인</RedButton>
<RedButton type="submit" onClick={handleLogin} className="loginButton">로그인</RedButton>
</div>
</form>
<button className="loginpage-sign-button">
Expand Down

0 comments on commit 2c1b920

Please sign in to comment.