Merge pull request #30 from KWcapstone/24-feat-메인페이지-모달-api-연결

24 feat 메인페이지 모달 api 연결

Author: Eunjin03

src/api/main/profile.ts

@@ -1,4 +1,5 @@
 import Send from "@/api/send.ts";
+import { profileData } from "@/types/profileData";
 
 export const getProfile = () => {
   return Send({
@@ -13,3 +14,11 @@ export const Withdraw = () => {
     url: "auth/withdraw",
   });
 };
+
+export const patchProfile = (data: profileData) => {
+  return Send({
+    method: "patch",
+    url: "main/profile",
+    data: data,
+  });
+};

src/api/main/project.ts

@@ -1,5 +1,6 @@
 import Send from "@/api/send.ts";
 import { selectParams } from "@/types/selectParams";
+import { projects } from "@/types/deleteProject";
 
 export const getProject = (params: selectParams) => {
   return Send({
@@ -8,3 +9,11 @@ export const getProject = (params: selectParams) => {
     params: params,
   });
 };
+
+export const deleteProject = (data: projects[]) => {
+  return Send({
+    method: "delete",
+    url: "main/project/delete",
+    data: data,
+  });
+};

src/api/splash/resetPW.ts

@@ -0,0 +1,10 @@
+import Send from "@/api/send.ts";
+import { ResetPWData } from "@/types/loginData";
+
+export const postResetPW = (data: ResetPWData) => {
+  return Send({
+    method: "post",
+    url: "auth/reset_pw",
+    data: data,
+  });
+};

src/types/deleteProject.ts

@@ -0,0 +1,4 @@
+export interface projects {
+  projectId: Array<string>;
+  type: string;
+}

src/types/loginData.ts

@@ -2,3 +2,8 @@ export interface LoginData {
   email: string;
   password: string;
 }
+
+export interface ResetPWData {
+  name: string;
+  email: string;
+}

src/views/main/components/UserModal.tsx

@@ -3,7 +3,7 @@ import Modal from "@/views/components/modal";
 import test from "@/assets/imgs/common/user.svg";
 
 // api
-import { getProfile, Withdraw } from "@/api/main/profile";
+import { getProfile, Withdraw, patchProfile } from "@/api/main/profile";
 import { logout } from "@/api/splash/login";
 
 // import
@@ -19,52 +19,88 @@ interface UserModalProps {
   onCloseModal: () => void;
 }
 
-const UserModal = ({
-  onCloseModal,
-}: UserModalProps) => {
-
+const UserModal = ({ onCloseModal }: UserModalProps) => {
   const [profile, setProfile] = useState<profileData>();
-
+  const [isEdit, setIsEdit] = useState(false);
+  const [editName, setEditName] = useState("");
+  const clickEdit = () => {
+    setEditName(profile?.name ?? "");
+    setIsEdit(true);
+  };
   const clickLogout = () => {
-    logout().then(()=>{
-      alert('로그아웃 되었습니다.')
+    logout().then(() => {
+      alert("로그아웃 되었습니다.");
       clearTokens();
-      window.location.href = '/'
+      window.location.href = "/";
     });
-  }
+  };
 
   const clickWithdraw = () => {
-    if(confirm("정말 계정을 삭제하시겠습니까?")) {
+    if (confirm("정말 계정을 삭제하시겠습니까?")) {
       Withdraw().then(() => {
-        alert('계정이 정상적으로 삭제되었습니다.')
+        alert("계정이 정상적으로 삭제되었습니다.");
         clearTokens();
-        window.location.href = '/'
-      })
+        window.location.href = "/";
+      });
     }
-  }
+  };
 
   useEffect(() => {
     getProfile().then((res: any) => {
       setProfile(res.data.data);
     });
-  },[]);
+  }, []);
+
+  useEffect(() => {
+    if (profile?.name) setEditName(profile.name);
+  }, [profile]);
 
   return (
     <Modal onCloseModal={onCloseModal}>
       <div className="modal-wrap">
         <div className="info-wrap">
           <div className="user-img">
             <img src={profile?.imageUrl ?? test} alt="" />
+            <div className="edit-div" onClick={clickEdit}></div>
           </div>
-          <div className="user-name">{profile?.name}</div>
+          {isEdit ? (
+            <input
+              type="text"
+              value={editName}
+              className="title-rename-input"
+              onChange={(e) => setEditName(e.target.value)}
+              onBlur={() => setIsEdit(false)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  const newName = e.currentTarget.value;
+                  setIsEdit(false);
+                  setEditName(newName);
+                  patchProfile({
+                    name: newName,
+                    imageUrl: profile?.imageUrl ?? "",
+                  } as profileData).then(() => {
+                    console.log("프로필 변경 성공");
+                    setProfile((prev) => prev && { ...prev, name: newName });
+                    window.location.reload();
+                  });
+                }
+              }}
+            />
+          ) : (
+            <div className="user-name">{profile?.name}</div>
+          )}
           <div className="user-email">{profile?.email}</div>
         </div>
         <ul className="edit-wrap">
           {/* <li className="mode-wrap"></li> */}
-          <li className="log-out" onClick={clickLogout}>로그아웃</li>
+          <li className="log-out" onClick={clickLogout}>
+            로그아웃
+          </li>
           <li className="pwd-edit">비밀번호 변경</li>
         </ul>
-        <button className="remove" onClick={clickWithdraw}>계정 삭제</button>
+        <button className="remove" onClick={clickWithdraw}>
+          계정 삭제
+        </button>
         <p>개인 정보 처리 방침・이용약관</p>
       </div>
     </Modal>

src/views/main/page/ProjectPage.tsx

@@ -6,7 +6,7 @@ import test from "@/assets/imgs/common/user.svg";
 
 // api
 import { getSearch, patchProjectName } from "@/api/common/common";
-import { getProject } from "@/api/main/project";
+import { getProject, deleteProject } from "@/api/main/project";
 
 // component
 import SideBar from "@/views/main/components/SideBar";
@@ -19,6 +19,7 @@ import { Link } from "react-router-dom";
 
 // type
 import { projectData } from "@/types/projectData";
+import { projects } from "@/types/deleteProject";
 
 const ProjectPage = () => {
   // value
@@ -32,6 +33,7 @@ const ProjectPage = () => {
   const [editedTitle, setEditedTitle] = useState<string>("");
   const menuRef = useRef<HTMLUListElement | null>(null);
   const orderRef = useRef<HTMLDivElement | null>(null);
+  const [deleteProjectList, setDeleteProjectList] = useState<projects[]>([]);
 
   // modal
   type ModalType = "dwn" | "share" | null;
@@ -44,6 +46,17 @@ const ProjectPage = () => {
     setOpenMenuId((prev) => (prev === id ? null : id));
   };
 
+  const clickProjectDelete = (projectID: Array<string>) => {
+    if (confirm("정말 프로젝트를 삭제하시겠습니까?")) {
+      setDeleteProjectList([{ projectId: projectID, type: "project" }]);
+
+      deleteProject(deleteProjectList).then(() => {
+        alert("프로젝트가 정상적으로 삭제되었습니다.");
+        window.location.reload();
+      });
+    }
+  };
+
   const getSearchList = () => {
     setTap("all");
     setOrder("latest");
@@ -229,7 +242,18 @@ const ProjectPage = () => {
                     >
                       공유하기
                     </li>
-                    <li className="del">삭제하기</li>
+                    <li
+                      className="del"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        clickProjectDelete(list.projectId);
+                        setOpenMenuId(null);
+                        setProjectId(list.projectId);
+                      }}
+                    >
+                      삭제하기
+                    </li>
                   </ul>
                 )}
                 <div className="info-wrap">
@@ -258,9 +282,6 @@ const ProjectPage = () => {
                               .catch(() => {
                                 console.log("이름 변경 실패");
                               });
-
-                            // 여기서 API 호출도 함께 하면 좋음
-                            // await updateProjectName(list.projectId, editedTitle);
                           }
                         }}
                       />

src/views/main/style/user-modal.sass

@@ -15,6 +15,16 @@
       +padding(bottom 32px)
       +flex-box(center, center)
       flex-direction: column
+      .title-rename-input
+        +margin(top 8px)
+        +border(1px solid $gray-200)
+        +size(100px, 30px)
+        +border-radius(4px)
+        +box-sizing(border-box)
+        +padding(6px 4px)
+        font-weight: 500
+        line-height: 21px
+        background-color: $gray-50
 
       .user-img
         position: relative
@@ -25,7 +35,7 @@
           border-radius: 50px
           background: #B3C4DE
 
-        &:after
+        .edit-div
           content: ""
           +size(24px, 24px)
           +box-sizing(border-box)