기능구현 - 유저정보CRUD(Delete) (#3)

src/app/page.tsx

@@ -1,109 +1,9 @@
-"use client";
-
-import axios from "axios";
-import { FormEvent, useState, ChangeEvent } from "react";
-import { Update, UpdateState } from "./types/update";
+import axios from 'axios';
 
 export default function Home() {
-  const [editData, setEdit] = useState<UpdateState>({
-    username: "병주",
-    password: "4790",
-    phone: "010-7329-7895",
-    birth: "99-02-05",
-  });
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setEdit((prevFormData) => ({
-      ...prevFormData,
-      [name]: value,
-    }));
-  };
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-
-    const request = new UpdateRequest(
-      editData.username,
-      editData.phone,
-      editData.birth,
-      editData.password
-    );
-    const response = await request.send();
-  };
 
   return (
     <main>
-      <h1>회원정보수정</h1>
-      <form onSubmit={handleSubmit}>
-        <div>
-          <label>Password</label>
-          <input
-            type="text"
-            name="password"
-            value={editData.password}
-            onChange={handleChange}
-          />
-        </div>
-        <div>
-          <label>Username</label>
-          <input
-            type="text"
-            name="username"
-            value={editData.username}
-            onChange={handleChange}
-          />
-        </div>
-        <div>
-          <label>Phone</label>
-          <input
-            type="text"
-            name="phone"
-            value={editData.phone}
-            onChange={handleChange}
-          />
-        </div>
-        <div>
-          <label>Birth</label>
-          <input
-            type="text"
-            name="birth"
-            value={editData.birth}
-            onChange={handleChange}
-          />
-        </div>
-        <button type="submit" style={{ width: "100px", height: "100px" }}>
-          update
-        </button>
-      </form>
     </main>
-  );
-}
-
-export class UpdateRequest {
-  username?: string;
-  phone?: string;
-  password?: string;
-  birth?: string;
-
-  constructor(
-    username?: string,
-    phone?: string,
-    birth?: string,
-    password?: string
-  ) {
-    this.username = username;
-    this.phone = phone;
-    this.password = password;
-    this.birth = birth;
-  }
-
-  async send(): Promise<Update> {
-    const response = await axios.put(
-      "http://www.ideaconnect.online/user",
-      this
-    );
-    const data: Update = response.data;
-    return data;
-  }
+  )
 }

src/pages/user/delete.tsx

@@ -0,0 +1,11 @@
+"use client";
+import Popup from '@/utils/popup';
+
+export default function Delete() {
+
+  return (
+    <main>
+      <Popup></Popup>
+    </main>
+  )
+}

src/utils/popup.tsx

@@ -0,0 +1,102 @@
+"use client";
+import axios, { AxiosResponse } from 'axios';
+import { useState } from 'react';
+
+
+export default function Popup() {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [pw, set_pw] = useState<string>("");
+  const [isS, set_isS] = useState<boolean>(false);
+  const AUTH_API_BASE_URL = 'https://www.ideaconnect.online';
+  const openPopup = () => {
+    setIsOpen(true);
+  };
+
+  const closePopup = () => {
+    setIsOpen(false);
+  };
+
+  const fetchDelete = async () => {
+    try {
+      const response: AxiosResponse<Response> = await axios.get(`${AUTH_API_BASE_URL}/auth`);
+      const status:number = response.status
+      if (status === 200) {
+        alert('정상적으로 탈퇴 되었습니다.');
+      }
+      if (status === 401) {
+        alert('인증되지 않아 해당 작업을 수행할 수 없습니다.');
+      }
+    } catch (error) {
+        alert('탈퇴 요청 실패')
+    }
+  };
+
+  const fetchAuthentication = async () =>{
+
+    try{
+      const response: AxiosResponse<Response> = await axios.post(`${AUTH_API_BASE_URL}/login`,{
+        'id' : '쿠키에 저장되어있던 id', //로그인 구현시 인터페이스 정의 예정
+        'pw' : pw
+      })
+      const status:number = response.status
+      if (status === 200) {
+        alert('인증에 성공했습니다');
+        closePopup()
+        set_isS(true);
+      }
+      if (status === 401) {
+        alert('비밀번호를 확인해 주세요');
+
+      }
+    } catch (error) {
+        alert('인증 요청 실패, 다시 시도해 주세요')
+        closePopup()
+    }
+  }
+
+  return (
+    <div>
+        {
+            isS ? <button onClick={openPopup}>탈퇴하기(인증)</button> : <button onClick={fetchDelete}>탈퇴하기</button>
+        }
+
+
+        {isOpen && (
+            <div className="popup">
+            <div className="popup-content">
+                <h1>본인 인증</h1>
+                <p>확인을 위해 비밀번호를 입력해 주세요</p>
+                <input type='password' onChange={(e)=> { set_pw(e.target.value) }}/>
+                <button onClick={()=>{ fetchAuthentication() }}>제출</button><br/>
+                <button onClick={closePopup}>닫기</button>
+            </div>
+            </div>
+        )}
+
+        <button onClick={()=>{isS ? set_isS(false) : set_isS(true)}}>2중 인증 상태 변경</button>
+        <p>현재 인증 상태</p>
+        {
+            isS ? <p>인증 안됨</p> : <p>인증 됨</p>
+        }
+      <style jsx>{`
+        .popup {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0, 0, 0, 0.5);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .popup-content {
+          background-color: white;
+          padding: 20px;
+          border-radius: 5px;
+        }
+      `}</style>
+    </div>
+  );
+}