user정보수정

Spaces-Place · Nov 21, 2024 · 6c31cc3 · 6c31cc3
1 parent a38e5df
commit 6c31cc3
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 61 deletions.
diff --git a/src/pages/login.js b/src/pages/login.js
@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import '../styles/login.css';
-import authService from '../utils/AuthContext/authService';
-import { AuthContext } from '../utils/AuthContext/AuthContext';
+import authService from '../utils/authService';
+import { AuthContext } from '../utils/AuthContext';
 
 const USER_TYPE_LABELS = {
   'consumer': '일반',

diff --git a/src/pages/owner-mypag.js b/src/pages/owner-mypag.js
@@ -1,14 +1,46 @@
-import { useState } from "react";
+import { useState, useEffect, useContext } from "react";
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import '../styles/OwnerMypage.css';
 import RegistrationModal from './registrationModal';
+import { AuthContext } from "../utils/AuthContext";
+import authService from '../utils/authService';
+import UserInfomation from "../components/UserInfo";
 
 export default function OwnerMypage() {
+    const {user, isAuthenticated} = useContext(AuthContext);
     const [activeTab, setActiveTab] = useState('all');
     const [date, setDate] = useState(new Date());
     const [isModalOpen, setIsModalOpen] = useState(false);
 
+    const [userInfo, setUserInfo] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+
+    useEffect(() => {
+        const fetchUserInfo = async () => {
+            try {
+                setLoading(true);
+                console.log(user.userid);
+                const info = await authService.getUserInfo(user.userid);
+                setUserInfo(info);
+                setError(null);
+                console.log(info);
+                console.log(userInfo);
+            } catch (err) {
+                setError('사용자 정보를 불러오는데 실패했습니다.');
+                console.error('Error fetching user info:', err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (user?.userid) {
+            fetchUserInfo();
+        }
+    }, [user?.userid]);
+
     // 시설 데이터 예시 (스키마 기반)
     const facilityData = [
         {
@@ -157,22 +189,11 @@ export default function OwnerMypage() {
             <div className="owner-container">
                 <div className="owner-info">
                     <h2 className="owner-title">관리자 페이지</h2>
-                    <div className="owner-info-grid">
-                        <div className="owner-label">사업자번호</div>
-                        <div className="owner-value">123-45-67890</div>
-                    </div>
-                    <div className="owner-info-grid">
-                        <div className="owner-label">상호명</div>
-                        <div className="owner-value">행복한 캠핑</div>
-                    </div>
-                    <div className="owner-info-grid">
-                        <div className="owner-label">대표자명</div>
-                        <div className="owner-value">김대표</div>
-                    </div>
-                    <div className="owner-info-grid">
-                        <div className="owner-label">연락처</div>
-                        <div className="owner-value">02-123-4567</div>
-                    </div>
+                    <UserInfomation 
+                        userInfo={userInfo}
+                        loading={loading}
+                        error={error}
+            />
                 </div>
 
                 {/* 시설 관리 섹션 */}

diff --git a/src/pages/renter-mypage.js b/src/pages/renter-mypage.js
@@ -1,14 +1,45 @@
-import { useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import {useNavigate} from "react-router-dom";
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import '../styles/mypage.css';
+import { AuthContext } from "../utils/AuthContext";
+import authService from '../utils/authService';
+import UserInfomation from "../components/UserInfo";
 
 export default function RenterMypage() {
     const navigate = useNavigate();
+    const {user, isAuthenticated} = useContext(AuthContext);
     const [activeTab, setActiveTab] = useState('all');
     const [date, setDate] = useState(new Date());
+    const [userInfo, setUserInfo] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
 
+
+    useEffect(() => {
+        const fetchUserInfo = async () => {
+            try {
+                setLoading(true);
+                console.log(user.userid);
+                const info = await authService.getUserInfo(user.userid);
+                setUserInfo(info);
+                setError(null);
+                console.log(info);
+                console.log(userInfo);
+            } catch (err) {
+                setError('사용자 정보를 불러오는데 실패했습니다.');
+                console.error('Error fetching user info:', err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (user?.userid) {
+            fetchUserInfo();
+        }
+    }, [user?.userid]);
+
     const bookingData = [
         {
             id: 1,
@@ -112,25 +143,11 @@ export default function RenterMypage() {
         <div className="Mypagebox">
             <div className="mypage-header"></div>
             <div className="Mypage-Container">
-            <div className="userInfo">
-                <h2 className="user-title">마이페이지</h2>
-                <div className="mypage-info-grid">
-                    <div className="userID-label">ID</div>
-                    <div className="userID-value">dusqo</div>
-                </div>
-                <div className="mypage-info-grid">
-                    <div className="userID-label">이름</div>
-                    <div className="userID-value">새싹</div>
-                </div>
-                <div className="mypage-info-grid">
-                    <div className="userID-label">이메일</div>
-                    <div className="userID-value">[email protected]</div>
-                </div>
-                <div className="mypage-info-grid">
-                    <div className="userID-label">연락처</div>
-                    <div className="userID-value">000-000-0000</div>
-                </div>
-            </div>
+            <UserInfomation 
+                        userInfo={userInfo}
+                        loading={loading}
+                        error={error}
+            />
             </div>
             <div className="myplant">
     <h2>내 예약 목록</h2>

diff --git a/src/styles/spaceList.css b/src/styles/spaceList.css
@@ -39,34 +39,13 @@
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
 }
 
-/* 캠핑 타입 스타일 */
-.space-box.camping-box {
+.space-box {
   background: linear-gradient(135deg, #ffd6e7, #c8e7ff);
-}
-
-.space-box.camping-box .list-with-box {
   border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.space-box.camping-box .list-space-name {
   color: #4a6baf;
   font-weight: 600;
 }
 
-/* 합주실 타입 스타일 */
-.space-box {
-  background: linear-gradient(135deg, #ffe6d5, #d4f0ff);
-}
-
-.space-box.rehearsal-box .list-with-box {
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.space-box.rehearsal-box .list-space-name {
-  color: #e85a5a;
-  font-weight: 600;
-}
-
 /* 카드 내부 콘텐츠 스타일 */
 .list-with-box {
   width: 92%;