Feature 27 마이페이지 UI 및 기능 구현

src/components/MyPage/Input/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { InputProps } from "./types";
 
-const Input = ({ value, id, placeholder, type, onChange }: InputProps) => {
+const Input = ({ value, id, placeholder, type, disabled, onChange }: InputProps) => {
   const [isHideClicked, setIsHideClicked] = useState(false);
 
   const handleHideClick = () => {
@@ -10,12 +10,13 @@ const Input = ({ value, id, placeholder, type, onChange }: InputProps) => {
   return (
     <div className="w-full relative">
       <input
-        className="w-full h-10 bg-[#CCEEFF] text-center  "
+        className={`w-full h-10 bg-[#CCEEFF] text-center ${disabled ? "text-gray-400" : ""}`}
         value={value}
         placeholder={placeholder}
         id={id}
-        type={isHideClicked ? "text" : "password"}
+        type={type === "password" && !isHideClicked ? "password" : "text"}
         onChange={onChange}
+        disabled={disabled}
       />
       {type === "password" && (
         <button className="absolute right-3 top-2.5" onClick={handleHideClick}>

src/components/MyPage/Input/types.ts

@@ -5,5 +5,6 @@ export interface InputProps {
   id: string;
   type?: string;
   placeholder: string;
+  disabled?: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }

src/components/MyPage/UserInfo/index.tsx

@@ -1,76 +1,97 @@
-import React, { ChangeEvent, useState, useContext } from "react";
-import AuthContext from "context/AuthContext";
-import Input from "../Input";
+import React, { useState, useEffect } from "react";
 import { UserInfoProps } from "./types";
-import { getAuth, deleteUser } from "firebase/auth";
-import { app } from "firebaseApp";
+import { getAuth, signOut } from "firebase/auth";
 import { toast } from "react-toastify";
 import { useRouter } from "pages/routing";
+import { app, db } from "../../../firebaseApp";
+import { getDocs, collection, deleteDoc, doc } from "firebase/firestore";
 
 const UserInfo = () => {
   const [userInfo, setUserInfo] = useState<UserInfoProps>({
     name: "",
-    id: "",
     email: "",
-    password: "",
-    passwordCheck: "",
+    docId: "",
   });
 
-  const { user } = useContext(AuthContext);
-
-  console.log(user);
-
   const auth = getAuth(app);
   const router = useRouter();
 
-  console.log(auth.currentUser?.uid);
-  console.log("=============");
-
-  const handleUpdateUserInfo = (e: ChangeEvent<HTMLInputElement>) => {
-    const { id, value } = e.target;
+  const handleGetUserInfo = async () => {
+    try {
+      const querySnapshot = await getDocs(collection(db, "userInfo"));
 
-    setUserInfo((prev: UserInfoProps) => ({
-      ...prev,
-      [id]: value,
-    }));
+      querySnapshot.forEach(doc => {
+        const { name, email } = doc.data();
+        setUserInfo(prev => ({
+          ...prev,
+          name,
+          email,
+          docId: doc.id,
+        }));
+      });
+    } catch (e: any) {
+      toast.error("오류가 발생했습니다");
+    }
   };
 
   const handleDeleteUser = async () => {
-    try {
-      await deleteUser(auth.currentUser!).then(res => {
-        console.log(res);
-      });
+    if (confirm("탈퇴하시겠습니까?")) {
+      try {
+        await deleteDoc(doc(db, "userInfo", userInfo.docId));
+        await signOut(auth);
+
+        toast.success("회원탈퇴를 완료하였습니다.");
 
-      toast.success("회원탈퇴를 완료하였습니다.");
-      router.push("/");
-    } catch (error: any) {
-      console.log(error);
+        router.push("/");
+      } catch (error: any) {
+        console.log(error);
+      }
     }
   };
 
+  useEffect(() => {
+    handleGetUserInfo();
+  }, []);
+
   return (
-    <div className="w-1/2 h-full flex-Center flex-col gap-2 border-1 p-2 border-cyan-600">
-      <img className="w-28 h-28 bg-slate-400 rounded-full" src="" />
-      <Input value={userInfo.name} placeholder="이름" id="name" onChange={handleUpdateUserInfo} />
-      <Input value={userInfo.email} placeholder="이메일" id="email" onChange={handleUpdateUserInfo} />
-      <Input
-        value={userInfo.password}
-        placeholder="패스워드"
-        id="password"
-        type="password"
-        onChange={handleUpdateUserInfo}
-      />
-      <Input
-        value={userInfo.passwordCheck}
-        placeholder="패스워드 확인"
-        id="passwordCheck"
-        type="password"
-        onChange={handleUpdateUserInfo}
-      />
-      <button className="w-full h-10 bg-[#FF4A50] text-center text-cyan-50" onClick={handleDeleteUser}>
+    <>
+      <h2 className="text-textBlue font-semibold">마이페이지</h2>
+      <div className="flex items-center w-full">
+        <div className="w-4/5">
+          <img
+            className="flex w-28 h-28 bg-slate-400 rounded-full"
+            src="https://www.ailee-shopperhouse.com/images/avatars/1.png"
+          />
+        </div>
+        <div className="w-1/5">
+          <div className="flex flex-row justify-between font-semibold">
+            <div className="flex flex-col items-center dark:text-textWhite">
+              <h5>생성(개수)</h5>
+              <p>66</p>
+            </div>
+            {/* <div className="flex flex-col items-center font-semibold">
+              <h5>회원등급</h5>
+              <p>VIP</p>
+            </div>
+            <div className="flex flex-col items-center font-semibold">
+              <h5>평점</h5>
+              <p>4.5</p>
+            </div> */}
+          </div>
+        </div>
+      </div>
+      <div className="w-full flex flex-col p-2">
+        <h4 className="text-textBlue font-semibold">{userInfo.name}</h4>
+        <h5 className="text-textPrimary dark:text-textWhite">{userInfo.email}</h5>
+      </div>
+
+      <button
+        className="w-full h-16 border-1 border-[#FF4A50] hover:border-gray-500 text-center font-semibold text-[#FF4A50] hover:text-gray-500"
+        onClick={handleDeleteUser}
+      >
         탈퇴하기
       </button>
-    </div>
+    </>
   );
 };
 

src/components/MyPage/UserInfo/types.ts

@@ -1,7 +1,5 @@
 export interface UserInfoProps {
   name: string;
-  id: string;
   email: string;
-  password: string;
-  passwordCheck: string;
+  docId: string;
 }

src/components/MyPage/UserPrevious/index.tsx

@@ -1,41 +1,38 @@
 import React from "react";
 
+const CHATLISTDATA = [
+  { id: 1, title: "리드미를 써줘", data: "2024-05-10" },
+  { id: 2, title: "borderColor가 원하는 값으로 설정해줘", data: "2024-05-05" },
+  { id: 3, title: "알고리즘이 중요해?", data: "2024-04-29" },
+  { id: 4, title: "자료구조에 대해서 알려줘", data: "2024-04-27" },
+  { id: 5, title: "bfs dfs 차이점", data: "2024-04-25" },
+  { id: 6, title: "스택은 뭐야", data: "2024-04-18" },
+  { id: 7, title: "꿀이랑 허니에 대해 성분 비교 좀", data: "2024-04-13" },
+  { id: 8, title: "프로젝트에 대해서 간략하게 알려줘", data: "2024-03-30" },
+  { id: 9, title: "해당 프로젝트 설치를 어떻게 해", data: "2024-03-27" },
+  { id: 10, title: "테스트 코드를 좀 만들어줘", data: "2024-03-29" },
+];
+
 const UserPreviousList = () => {
   return (
-    <div className="w-full h-full grid grid-cols-5  gap-2 border-1 p-2 border-cyan-600">
-      <button className="h-32 bg-[#BBDDFF] flex-Center hover:scale-110 transition-transform ease-in-out duration-500 whitespace-wrap">
-        ReadMe Monster
-      </button>
-      <button className=" h-32 bg-[#BBDDFF] flex-Center hover:scale-110 transition-transform ease-in-out duration-500">
-        ReadMe Monster
-      </button>
-      <button className=" h-32 bg-[#BBDDFF] flex-Center hover:scale-110 transition-transform ease-in-out duration-500">
-        ReadMe Monster
-      </button>
-      <button className=" h-32 bg-[#BBDDFF] flex-Center hover:scale-110 transition-transform ease-in-out duration-500">
-        ReadMe Monster
-      </button>
-      <button className=" h-32 bg-[#BBDDFF] flex-Center hover:scale-110 transition-transform ease-in-out duration-500">
-        ReadMe Monster
-      </button>
-      <button className=" h-32 bg-[#BBDDFF] flex-Center hover:scale-110 transition-transform ease-in-out duration-500">
-        ReadMe Monster
-      </button>
-      <button className=" h-32 bg-[#BBDDFF] flex-Center hover:scale-110 transition-transform ease-in-out duration-500">
-        ReadMe Monster
-      </button>
-      <button className=" h-32 bg-[#BBDDFF] flex-Center hover:scale-110 transition-transform ease-in-out duration-500">
-        ReadMe Monster
-      </button>
-      <button className=" h-32 bg-[#BBDDFF] flex-Center hover:scale-110 transition-transform ease-in-out duration-500">
-        ReadMe Monster
-      </button>
-      <button className=" h-32 bg-[#BBDDFF] flex-Center hover:scale-110 transition-transform ease-in-out duration-500">
-        ReadMe Monster
-      </button>
-      <button className=" h-32 bg-[#BBDDFF] flex-Center hover:scale-110 transition-transform ease-in-out duration-500">
-        ReadMe Monster
-      </button>
+    <div className="w-full h-full flex flex-wrap gap-2 p-2 ">
+      {CHATLISTDATA.map(data => {
+        return (
+          <div
+            key={data.id}
+            className="relative w-28 h-28 bg-[#BBDDFF] hover:scale-110 transition-transform ease-in-out duration-500 cursor-pointer"
+            style={{ backgroundImage: `url(${"/images/rm-logo.png"})`, backgroundSize: "cover" }}
+          >
+            <div className="absolute top-1 right-0 px-2 py-1 text-xs text-white bg-gray-600 rounded-full">
+              {data.data}
+            </div>
+
+            <div className="absolute bottom-0 left-0 right-0 px-2 text-center bg-gray-800 text-white overflow-hidden whitespace-nowrap">
+              <div className="truncate font-semibold text-sm">{data.title}</div>
+            </div>
+          </div>
+        );
+      })}
     </div>
   );
 };

src/pages/myPage/index.tsx

@@ -4,14 +4,12 @@ import UserPreviousList from "../../components/MyPage/UserPrevious";
 
 const MyPage = () => {
   return (
-    <div className="w-fullflex flex-col items-center justify-center">
-      <section className="w-full">
-        <div className="flex-Center gap-5  h-[calc(100vh-100px)] p-20 ">
-          <UserInfo />
-          <UserPreviousList />
-        </div>
-      </section>
-    </div>
+    <section className="w-full flex justify-center ">
+      <div className="flex flex-col items-center justify-center gap-3 p-10 w-2/5 ">
+        <UserInfo />
+        <UserPreviousList />
+      </div>
+    </section>
   );
 };