Skip to content

chore: limit console to log just once #183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bigmooon merged 1 commit into from
Sep 8, 2025
Merged

chore: limit console to log just once #183

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 15 additions & 20 deletions src/pages/center/MyPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useEffect, useCallback } from 'react';
import { useState, useEffect, useCallback, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/custom/Button';
import Spinner from '@/components/loading/Spinner';
Expand All @@ -16,6 +16,9 @@ import DefaultProfile from '@/assets/images/elder-basic-profile.png';
export default function MyPage() {
const navigate = useNavigate();
const [profileSrc, setProfileSrc] = useState(DefaultProfile);
const didLogMountRef = useRef(false);
const didLogDataRef = useRef(false);
const didLogImageRef = useRef(false);
const [performanceMetrics, setPerformanceMetrics] = useState({
componentMountTime: null,
dataLoadStartTime: null,
Expand All @@ -29,8 +32,10 @@ export default function MyPage() {
const setHeaderProps = useHeaderPropsStore((state) => state.setHeaderProps);
const clearHeaderProps = useHeaderPropsStore((state) => state.clearHeaderProps);

// 컴포넌트 마운트 시간 측정
// 컴포넌트 마운트 시간 측정 (초기 1회)
useEffect(() => {
if (didLogMountRef.current) return;
didLogMountRef.current = true;
const mountTime = performance.now();
setPerformanceMetrics((prev) => ({ ...prev, componentMountTime: mountTime }));
console.log('🚀 MyPage 컴포넌트 마운트 시작');
Expand All @@ -39,9 +44,11 @@ export default function MyPage() {
return () => clearHeaderProps();
}, [clearHeaderProps, setHeaderProps]);

// React Query 데이터 로딩 상태 추적
// React Query 데이터 로딩 상태 추적 (초기 1회)
useEffect(() => {
if (didLogDataRef.current) return;
if (!isLoading && managerProfile) {
didLogDataRef.current = true;
const dataLoadEndTime = performance.now();
setPerformanceMetrics((prev) => ({
...prev,
Expand All @@ -63,8 +70,9 @@ export default function MyPage() {
}
}, [isLoading, managerProfile, performanceMetrics]);

// 프로필 이미지 로딩 및 성능 측정
// 프로필 이미지 로딩 및 성능 측정 (초기 1회)
useEffect(() => {
if (didLogImageRef.current) return;
if (!managerProfile) return;

const imageLoadStartTime = performance.now();
Expand All @@ -83,6 +91,7 @@ export default function MyPage() {

// 전체 성능 메트릭 출력
logPerformanceMetrics();
didLogImageRef.current = true;
} else {
// if profile image doesn't exist, set default profile image
console.log('🔄 기본 프로필 이미지 로딩 중...');
Expand All @@ -98,6 +107,7 @@ export default function MyPage() {

// 전체 성능 메트릭 출력
logPerformanceMetrics();
didLogImageRef.current = true;
})
.catch(() => {
setProfileSrc(DefaultProfile);
Expand All @@ -110,6 +120,7 @@ export default function MyPage() {

// 전체 성능 메트릭 출력
logPerformanceMetrics();
didLogImageRef.current = true;
});
}
}, [managerProfile]);
Expand Down Expand Up @@ -255,22 +266,6 @@ export default function MyPage() {

if (isLoading || !managerProfile) return <Spinner />;

console.log('📊 현재 프로필 사진 상태:', {
profileSrc,
hasManagerProfile: !!managerProfile,
hasImgAddress: !!managerProfile?.imgAddress,
imgSeq: managerProfile?.imgSeq,
reactQueryStatus: {
isLoading,
isFetching: false, // react-query의 isFetching 상태도 확인 가능
dataSource: 'cache', // 캐시에서 가져온 데이터인지 확인
},
zustandState: {
isEditMode,
hasFormData: !!useManagerProfileStore.getState().formData,
},
});

return (
<article className='flex flex-col'>
{/* profile header */}
Expand Down