Merge pull request #97 from WASSUP-Project/develop

[close #96] 내 정보 조회 페이지 구현

src/containers/main/Main.tsx

@@ -15,7 +15,7 @@ import BillPolicy from "@/containers/policy/bill/BillPolicy";
 import Support from "@/containers/support/Support";
 import About from "@/containers/about/About";
 import Home from "./contents/Home";
-import { getAdminName } from "@/services/admin/admin";
+import { ResponseAdmin, getAdmin } from "@/services/admin/admin";
 import { logout } from "@/services/login/login";
 import { adminState } from "@/states/admin";
 import styles from "./Main.module.css";
@@ -31,10 +31,14 @@ export default function Main() {
   useEffect(() => {
     const fetchAdminName = async () => {
       try {
-        const data = await getAdminName();
+        const data = await getAdmin();
         setAdmin(
           data
-            ? { id: data.id, name: data.name, phoneNumber: data.phoneNumber }
+            ? ({
+                id: data.id,
+                name: data.name,
+                phoneNumber: data.phoneNumber,
+              } as ResponseAdmin)
             : null
         );
       } catch (error) {

src/containers/profile/Profile.module.css

@@ -5,15 +5,62 @@
     justify-content: center;
     height: 100vh;
     background-color: #f3f3f3;
+    padding: 20px;
+}
+
+.loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.profileContent {
+    width: 100%;
+    max-width: 600px;
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.profile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+}
+
+.info {
+    text-align: center;
+}
+
+.name {
+    font-size: 1.6rem;
+    margin-bottom: 10px;
+}
+
+.infoItem {
+    font-size: 1.2rem;
+    margin: 5px 0;
 }
 
 .link {
-    font-size: 0.9rem;
-    color: #7B7288;
+    margin-top: 20px;
+    font-size: 1rem;
+    color: #646464;
     text-decoration: none;
-    cursor: pointer;
 }
 
 .link:hover {
     text-decoration: underline;
+}
+
+.message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 20px;
+    text-align: center;
 }

src/containers/profile/Profile.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { ResponseAdmin, getAdminName } from "@/services/admin/admin";
+import { ResponseAdmin, getAdmin } from "@/services/admin/admin";
 import styles from "./Profile.module.css";
 import { Link, Spinner } from "@nextui-org/react";
-import Image from "next/image";
 
 export default function Profile() {
   const [accessToken, setAccessToken] = useState<string | null>(null);
@@ -14,10 +13,8 @@ export default function Profile() {
   useEffect(() => {
     const token = localStorage.getItem("accessToken");
     if (token) {
-      setIsLoading(true);
       setAccessToken(token);
-
-      const response = getAdminName();
+      const response = getAdmin();
       response
         .then((data) => {
           setAdmin(data || null);
@@ -30,47 +27,54 @@ export default function Profile() {
     } else {
       setIsLoading(false);
     }
-  }, [accessToken]);
+  }, []);
 
   return (
-    <>
+    <div className={styles.container}>
       {isLoading && (
         <div className={styles.loading}>
           <Spinner size="lg" />
         </div>
       )}
 
       {!isLoading && (
-        <div style={{ overflow: "scroll" }}>
-          <div>
+        <>
+          <div className={styles.profileContent}>
             {accessToken ? (
-              <div>
-                {admin ? (
-                  <div className={styles.container}>
-                    <Image
-                      src="/profile.png"
-                      alt="profile"
-                      width={700}
-                      height={650}
-                    />
-                    <Link href="/" className={styles.link}>
-                      홈으로 돌아갈래요.
-                    </Link>
-                  </div>
-                ) : (
-                  <div>
-                    <h1>관리자 정보를 불러오는 중입니다.</h1>
+              admin ? (
+                <div className={styles.profile}>
+                  <div className={styles.info}>
+                    <h2 className={styles.name}>{admin.name} 님</h2>
+                    <p className={styles.infoItem}>
+                      <strong>연락처:</strong> {admin.phoneNumber}
+                    </p>
+                    <p className={styles.infoItem}>
+                      <strong>관리 그룹수:</strong> {admin.groupCount}
+                    </p>
+                    <p className={styles.infoItem}>
+                      <strong>관리 인원수:</strong> {admin.memberCount}
+                    </p>
+                    <p className={styles.infoItem}>
+                      <strong>가입일:</strong> {admin.createdAt}
+                    </p>
                   </div>
-                )}
-              </div>
+                </div>
+              ) : (
+                <div className={styles.message}>
+                  <h1>관리자 정보를 불러오는 중입니다.</h1>
+                </div>
+              )
             ) : (
-              <div>
+              <div className={styles.message}>
                 <h1>로그인이 필요합니다.</h1>
               </div>
             )}
           </div>
-        </div>
+          <Link href="/" className={styles.link}>
+            홈으로 돌아갈래요.
+          </Link>
+        </>
       )}
-    </>
+    </div>
   );
 }

src/services/admin/admin.ts

@@ -3,12 +3,16 @@ import axios from 'axios';
 axios.defaults.baseURL = process.env.NEXT_PUBLIC_API_BASE_URL;
 
 export type ResponseAdmin = {
-    id: string;
+    id: number;
     name: string;
     phoneNumber: string;
+    createdAt: string;
+    updatedAt: string;
+    groupCount: number;
+    memberCount: number;
 };
 
-export const getAdminName = async () => {
+export const getAdmin = async () => {
     try {
         const response = await axios.get(`/api/admins`, {
             headers: {
@@ -20,4 +24,4 @@ export const getAdminName = async () => {
     } catch (error) {
         console.error(error);
     }
-}
+};