Merge pull request #27 from SIAT-Python-Project/feature/cookie/#14

cookie설정
SIAT-Python-Project · Jun 22, 2024 · ddf417c · ddf417c
2 parents 26200f1 + f1e874f
commit ddf417c
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 8 deletions.
diff --git a/src/api/FectUser.js b/src/api/FectUser.js
@@ -11,5 +11,12 @@ export async function fetchUserSingup(checkName, checkEmail, checkPassword) {
     const response = await axios.post(`/api/sign-up`, { name: checkName, email: checkEmail, password: checkPassword });
     const data = await response.data;
 
+    return data;
+}
+
+export async function fetchUserList() {
+    const response = await axios.post(`/api/userFind`);
+    const data = await response.data;
+
     return data;
 }
diff --git a/src/components/Headers.js b/src/components/Headers.js
@@ -10,6 +10,7 @@ import { fetchPersonNames } from '../api/FetchPerson';
 import { Button, Input } from '@mui/joy';
 import { useAutocomplete } from '@mui/base/useAutocomplete';
 import mainLogo from '../assets/mainLogo.png';
+import { fetchUserList } from '../api/FectUser';
 
 const InputWrapper = styled('div')(({ theme }) => ({
   position: 'relative',
@@ -53,11 +54,31 @@ const CustomButton = styled(Button)(({ theme }) => ({
 
 export default function SearchAppBar() {
   const [personList, setPersonList] = React.useState([]);
+  const [userList, setUserList] = React.useState([]);
   const [value, setValue] = React.useState(''); // 검색어 상태 추가
+  const [userCookie, setUserCookie] = React.useState(null);
+
+
   React.useEffect(() => {
     fetchPersonNames().then((data) => setPersonList(data));
   }, []);
 
+  React.useEffect(()=>{
+    fetchUserList().then((data) => setUserList(data))
+  },[])
+
+  React.useEffect(() => {
+    // 쿠키에서 사용자 정보 가져오기
+    const userEmail = getCookie('email');
+    const userName = getCookie('name');
+    const userId = getCookie('id');
+
+    // 쿠키에 사용자 정보가 있는 경우, 쿠키 상태 업데이트
+    if (userEmail && userName && userId) {
+      setUserCookie({ email: userEmail, name: decodeURIComponent(userName), id: userId });
+    }
+  }, []);
+
   const {
     getInputProps,
     getListboxProps,
@@ -93,14 +114,31 @@ export default function SearchAppBar() {
   }
   };
 
+  const logoutHandleSubmit = (event) => {
+    event.preventDefault();
+    fetch('/api/logout', { method: 'POST' })
+      .then(() => {
+        setUserCookie(null);
+        document.location.href = '/';
+      })
+  };
+
+  const getCookie = (name) => {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+    return null;
+  };
+
+
   return (
     <Box sx={{ flexGrow: 1, width: '100vw' }}>
       <AppBar position="static" sx={{ bgcolor: 'green', padding: '0 10px' }}>
         <Toolbar>
           <Button padding={"0 3vw"} onClick={()=>{document.location.href="/"}} color='transparent'>
             <img src={mainLogo} width={"100px"} />
           </Button>
-          <Typography
+          < Typography
             variant="h5"
             noWrap
             component="div"
@@ -129,12 +167,36 @@ export default function SearchAppBar() {
           <CustomButton type="submit" variant="contained" color="primary" onClick={submitHandler}>
             검색
           </CustomButton>
-          <CustomButton variant="contained" color="neutral">
+          {userCookie != null ? (
+            <>
+              <Typography variant="contained" color="neutral">
+                {userCookie.name}
+              </Typography>
+              <CustomButton variant="contained" color="neutral" onClick={logoutHandleSubmit}>
+                LOGOUT
+              </CustomButton>
+            </>
+          ) : (
+            <>
+              <CustomButton variant="contained" color="neutral" onClick={() => { document.location.href = "/login" }}>
+                LOGIN
+              </CustomButton>
+              <CustomButton variant="contained" color="neutral" onClick={() => { document.location.href = "/sign-up" }}>
+                SIGN IN
+              </CustomButton>
+            </>
+          )}
+
+
+
+
+
+          {/* <CustomButton variant="contained" color="neutral" onClick={() => { document.location.href = "/login" }}>
             LOGIN
           </CustomButton>
           <CustomButton variant="contained" color="neutral">
             SIGN IN
-          </CustomButton>
+          </CustomButton> */}
         </Toolbar>
       </AppBar>
     </Box>

diff --git a/src/pages/SignInPage.js b/src/pages/SignInPage.js
@@ -38,7 +38,7 @@ function Copyright(props) {
 
 export default function SingInPage({ data }) {
   const [userLogin, setUserLogin] = useState({ email: "", password: "" });
-  const [cookies, setCookie, removeCookie] = useCookies(['name']);
+  const [cookies, setCookie, removeCookie] = useCookies(['name','email','id']);
   const navigate = useNavigate();
 
   const handleInputChange = (e) => {
@@ -50,10 +50,11 @@ export default function SingInPage({ data }) {
     event.preventDefault();
     data = new FormData(event.currentTarget);
     fetchUserLogin(userLogin.email, userLogin.password)
-      .then((name) => {
-        console.log(name)
-        // setCookie('name', name, { path: '#' });
-        // navigate('#');
+      .then((response) => {
+        setCookie('name', encodeURIComponent(response.name));
+        setCookie('email', response.email);
+        setCookie('id',response.id)
+        navigate(`/person/${response.id}`);
       })
       .catch(error => {
         alert("아이디 또는 패스워드가 맞지 않습니다");