handleChange

client/src/Utils/Oauth.js

-import { Spinner, Button, Row } from 'react-bootstrap';
-
+import { Spinner, Button, Row, Alert } from 'react-bootstrap';
+import Swal from 'sweetalert2'
+import '../App.css'
 
 // export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
 
 const { Kakao } = window;
 
+
 export function LoginWithKakao() {
     //authObj : response.data에 들어가 있는 부분 object 형식
     Kakao.Auth.loginForm({
@@ -12,7 +14,6 @@ export function LoginWithKakao() {
         scope: 'account_email, profile_nickname',
         // 추가 동의 받을 동의 항목 ID 목록, 하나의 문자열에 여러 개의 ID를 쉼표(,)로 구분하여 전달
         success: function (authObj) {
-            alert('로그인 되었습니다. @@@@@@@@@')
             console.log(JSON.stringify(authObj))
 
             console.log('accT ;;', authObj.access_token)
@@ -33,14 +34,29 @@ export function LoginWithKakao() {
                     localStorage.setItem('nickname', nickValue)
                     const nickname = localStorage.getItem('nickname')
                     console.log(nickname)
-                    window.location.replace('/' + '?nickname=' + `${nickname}`)
+                    Swal.fire({
+                        title: '로그인 성공!',
+                        text: '🙌 환영합니다 🙌',
+                        icon: 'success',
+                        customClass: 'swal-wide',
+                        confirmButtonText: '확인',
+                    }).then((res) => {
+                        if (res.isConfirmed) {
+                            window.location.replace('/' + '?nickname=' + `${nickname}`)
+                        }
+                        else {
+                            window.location.replace('/' + '?nickname=' + `${nickname}`)
+                        }
+                    })
                 }
             });
         },
         fail: function (err) {
             alert(JSON.stringify(err))
+            console.log(JSON.stringify(err))
         },
-    })
+    }
+    )
 }
 
 export function kakaoLogout() {
@@ -53,9 +69,21 @@ export function kakaoLogout() {
     }
     Kakao.Auth.logout(function () {
         // 로그인 시 발급받은 토큰을 만료시키는 함수
-        alert('logout ok\naccess token -> ' + Kakao.Auth.getAccessToken())
         localStorage.clear();
-        window.location.replace('/')
+        Swal.fire({
+            title: '로그아웃 성공!',
+            text: '🙏 안녕히 가세요 🙏',
+            icon: 'warning',
+            customClass: 'swal-wide',
+            confirmButtonText: '확인',
+        }).then((res) => {
+            if (res.isConfirmed) {
+                window.location.replace('/')
+            }
+            else {
+                window.location.replace('/')
+            }
+        })
     })
 }
 

client/src/components/LoginComp.js

@@ -31,8 +31,17 @@ function LoginComp() {
 
     function CheckEmailSend() {
         setEmailSent(!emailSent)
+        localStorage.setItem('Email-Address', emailAddress)
     }
 
+    const [emailAddress, setEmailAddress] = useState('')
+
+    function handleChange(event) {
+        setEmailAddress(event.target.value)
+        console.log(emailAddress)
+    }
+
+    const 
     return (
         <Row className='text-center w-100 my-2'>
             <Card style={cardstyled}>
@@ -50,7 +59,7 @@ function LoginComp() {
                                 <Col>
                                     😍 이메일 전송이 완료 되었습니다.
                                 </Col>
-                                <Alert.Link href='/' style={{ fontSize: '0.8em' }}>
+                                <Alert.Link href='/' target='_blank' style={{ fontSize: '0.8em' }}>
                                     이메일 확인 하러가기 ➞
                                 </Alert.Link>
                             </Alert>
@@ -66,9 +75,8 @@ function LoginComp() {
                     </Row>
                     <Form style={inboxstyled}>
                         <Form.Group controlId="formBasicEmail">
-                            <Form.Control type="email" placeholder="Email" />
+                            <Form.Control type="email" placeholder="Email" onChange={handleChange} />
                         </Form.Group>
-
                         <Button variant='light' type="submit" id='formbtn' onClick={CheckEmailSend}>
                             LOGIN
                         </Button>