+
+
+ );
+}
diff --git a/src/components/layout/Header/components/InfoHeader.tsx b/src/components/layout/Header/components/InfoHeader.tsx
index b3937b05..b64b4b71 100644
--- a/src/components/layout/Header/components/InfoHeader.tsx
+++ b/src/components/layout/Header/components/InfoHeader.tsx
@@ -1,19 +1,28 @@
import { useLocation } from 'react-router-dom';
-import { useMyInfo } from '@/pages/User/Profile/hooks/useMyInfo';
+import { useAuthStore } from '@/stores/authStore';
import NotificationBell from './NotificationBell';
function InfoHeader() {
const { pathname } = useLocation();
- const { myInfo } = useMyInfo();
+ const user = useAuthStore((state) => state.user);
const showChatTooltip = pathname === '/home';
return (
-
{myInfo.universityName}
-
- {myInfo.name} {myInfo.studentNumber}
-
+ {user ? (
+ <>
+ {user.universityName}
+
+ {user.name} {user.studentNumber}
+
+
+ ) : (
+ <>
+
+
+
+ )}
{hasHeader &&
-
+
+
-
+
+
{showBottomNav &&
);
diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx
index 6de7fd1a..b42f7f81 100644
--- a/src/pages/Auth/Login/index.tsx
+++ b/src/pages/Auth/Login/index.tsx
@@ -1,5 +1,5 @@
+import chatCatLoginImage from '@/assets/image/chat-cat-login.png';
import AppleFigmaIcon from '@/assets/svg/apple-figma.svg';
-import ChatCatIcon from '@/assets/svg/chat-cat.svg';
import GoogleIcon from '@/assets/svg/google.svg';
import KakaoIcon from '@/assets/svg/kakao.svg';
import NaverIcon from '@/assets/svg/naver.svg';
@@ -66,7 +66,16 @@ function Login() {
-
diff --git a/src/pages/Home/components/InfiniteClubCarousel.tsx b/src/pages/Home/components/InfiniteClubCarousel.tsx
index 9af06721..fde6bba9 100644
--- a/src/pages/Home/components/InfiniteClubCarousel.tsx
+++ b/src/pages/Home/components/InfiniteClubCarousel.tsx
@@ -9,6 +9,23 @@ interface InfiniteClubCarouselProps {
clubs: HomeClubCardItem[];
}
+function isPriorityImage(index: number, clubsLength: number, shouldLoop: boolean) {
+ const visibleCount = 2;
+
+ if (!shouldLoop) {
+ return index < visibleCount;
+ }
+
+ const middleSegmentStartIndex = clubsLength;
+ const middleSegmentVisibleRadius = 1;
+ const isInInitialVisibleRange = index < visibleCount;
+ const isInMiddleVisibleRange =
+ index >= middleSegmentStartIndex - middleSegmentVisibleRadius &&
+ index <= middleSegmentStartIndex + middleSegmentVisibleRadius;
+
+ return isInInitialVisibleRange || isInMiddleVisibleRange;
+}
+
function InfiniteClubCarousel({ clubs }: InfiniteClubCarouselProps) {
const {
displayClubs,
@@ -34,6 +51,7 @@ function InfiniteClubCarousel({ clubs }: InfiniteClubCarouselProps) {
{displayClubs.map(({ club, key }, index) => {
const isDuplicate = shouldLoop && (index < clubs.length || index >= clubs.length * 2);
+ const isPriority = isPriorityImage(index, clubs.length, shouldLoop);
return (
diff --git a/src/pages/Home/components/RecommendedClubCard.tsx b/src/pages/Home/components/RecommendedClubCard.tsx
index f8551752..e774a055 100644
--- a/src/pages/Home/components/RecommendedClubCard.tsx
+++ b/src/pages/Home/components/RecommendedClubCard.tsx
@@ -7,9 +7,18 @@ interface RecommendedClubCardProps {
className?: string;
tabIndex?: number;
ariaHidden?: boolean;
+ imageLoading?: 'eager' | 'lazy';
+ imageFetchPriority?: 'auto' | 'high' | 'low';
}
-function RecommendedClubCard({ club, className, tabIndex, ariaHidden = false }: RecommendedClubCardProps) {
+function RecommendedClubCard({
+ club,
+ className,
+ tabIndex,
+ ariaHidden = false,
+ imageLoading = 'lazy',
+ imageFetchPriority = 'low',
+}: RecommendedClubCardProps) {
return (
diff --git a/src/pages/Home/hooks/useGetHomeCouncilNotices.ts b/src/pages/Home/hooks/useGetHomeCouncilNotices.ts
new file mode 100644
index 00000000..95ce5401
--- /dev/null
+++ b/src/pages/Home/hooks/useGetHomeCouncilNotices.ts
@@ -0,0 +1,14 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { getCouncilNotice } from '@/apis/council';
+import { councilQueryKeys } from '@/pages/Council/CouncilDetail/hooks/useGetCouncilInfo';
+
+interface UseGetHomeCouncilNoticesParams {
+ limit?: number;
+}
+
+export const useGetHomeCouncilNotices = ({ limit = 3 }: UseGetHomeCouncilNoticesParams = {}) => {
+ return useSuspenseQuery({
+ queryKey: councilQueryKeys.noticesPreview(limit),
+ queryFn: () => getCouncilNotice({ page: 1, limit }),
+ });
+};
diff --git a/src/stores/authStore.ts b/src/stores/authStore.ts
index fb8b7e38..a21577c1 100644
--- a/src/stores/authStore.ts
+++ b/src/stores/authStore.ts
@@ -2,6 +2,58 @@ import { create } from 'zustand';
import { getMyInfo, refreshAccessToken } from '@/apis/auth';
import type { MyInfoResponse } from '@/apis/auth/entity';
+let initializePromise: Promise | null = null;
+let hydrateUserPromise: Promise | null = null;
+
+const isAccessTokenExpired = (accessToken: string | null) => {
+ if (!accessToken) return true;
+
+ const [, payload] = accessToken.split('.');
+ if (!payload) return true;
+
+ try {
+ const normalizedPayload = payload.replace(/-/g, '+').replace(/_/g, '/');
+ const padding = '='.repeat((4 - (normalizedPayload.length % 4)) % 4);
+ const parsedPayload = JSON.parse(atob(`${normalizedPayload}${padding}`)) as { exp?: number };
+
+ return typeof parsedPayload.exp !== 'number' || parsedPayload.exp * 1000 <= Date.now();
+ } catch {
+ return true;
+ }
+};
+
+const hydrateUser = async (nextAccessToken: string) => {
+ if (hydrateUserPromise) return hydrateUserPromise;
+
+ hydrateUserPromise = (async () => {
+ try {
+ const nextUser = await getMyInfo();
+
+ if (useAuthStore.getState().accessToken !== nextAccessToken) return;
+
+ useAuthStore.setState({ user: nextUser });
+
+ try {
+ if (window.ReactNativeWebView) {
+ window.ReactNativeWebView.postMessage(
+ JSON.stringify({ type: 'LOGIN_COMPLETE', accessToken: nextAccessToken })
+ );
+ }
+ } catch {
+ // 브릿지 전달 실패가 인증 성공 상태를 롤백시키지 않도록 무시
+ }
+ } catch {
+ if (useAuthStore.getState().accessToken !== nextAccessToken) return;
+
+ useAuthStore.setState({ user: null, accessToken: null, isAuthenticated: false });
+ } finally {
+ hydrateUserPromise = null;
+ }
+ })();
+
+ return hydrateUserPromise;
+};
+
interface AuthState {
user: MyInfoResponse | null;
accessToken: string | null;
@@ -21,29 +73,41 @@ export const useAuthStore = create((set, get) => ({
isLoading: true,
initialize: async () => {
- if (get().user) {
+ const { accessToken, isAuthenticated, user } = get();
+ const hasValidAccessToken = !isAccessTokenExpired(accessToken);
+
+ if (user) {
+ if (hasValidAccessToken) {
+ set({ isAuthenticated: true, isLoading: false });
+ return;
+ }
+ }
+
+ if (isAuthenticated && accessToken && hasValidAccessToken) {
set({ isLoading: false });
+ void hydrateUser(accessToken);
return;
}
- try {
- const accessToken = await refreshAccessToken();
- set({ accessToken });
-
- const user = await getMyInfo();
-
- set({ user, isAuthenticated: true, isLoading: false });
+ if (initializePromise) {
+ return initializePromise;
+ }
+ initializePromise = (async () => {
try {
- if (window.ReactNativeWebView) {
- window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'LOGIN_COMPLETE', accessToken }));
- }
+ const nextAccessToken = await refreshAccessToken();
+
+ // Open protected routes as soon as the access token is restored.
+ set({ accessToken: nextAccessToken, isAuthenticated: true, isLoading: false });
+ void hydrateUser(nextAccessToken);
} catch {
- // 브릿지 전달 실패가 인증 성공 상태를 롤백시키지 않도록 무시
+ set({ user: null, accessToken: null, isAuthenticated: false, isLoading: false });
+ } finally {
+ initializePromise = null;
}
- } catch {
- set({ user: null, accessToken: null, isAuthenticated: false, isLoading: false });
- }
+ })();
+
+ return initializePromise;
},
setUser: (user) => set({ user, isAuthenticated: !!user, isLoading: false }),
@@ -52,5 +116,9 @@ export const useAuthStore = create((set, get) => ({
getAccessToken: () => get().accessToken,
- clearAuth: () => set({ user: null, accessToken: null, isAuthenticated: false, isLoading: false }),
+ clearAuth: () => {
+ initializePromise = null;
+ hydrateUserPromise = null;
+ set({ user: null, accessToken: null, isAuthenticated: false, isLoading: false });
+ },
}));
diff --git a/vite.config.ts b/vite.config.ts
index 12ef5ec5..9d46bc07 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
import { sentryVitePlugin } from '@sentry/vite-plugin';
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
+import { visualizer } from 'rollup-plugin-visualizer';
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';
@@ -9,11 +10,25 @@ const sentryProject = process.env.SENTRY_PROJECT;
const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN;
const sentryRelease = process.env.SENTRY_RELEASE;
+const shouldAnalyzeBundle = process.env.ANALYZE === 'true';
const shouldUploadSourcemaps = Boolean(sentryOrg && sentryProject && sentryAuthToken);
// https://vite.dev/config/
export default defineConfig({
build: {
+ rollupOptions: {
+ plugins: shouldAnalyzeBundle
+ ? [
+ visualizer({
+ brotliSize: true,
+ filename: 'docs/perf/assets/bundle-stats.html',
+ gzipSize: true,
+ open: false,
+ template: 'treemap',
+ }),
+ ]
+ : [],
+ },
sourcemap: shouldUploadSourcemaps ? 'hidden' : false,
},
plugins: [
@@ -47,4 +62,7 @@ export default defineConfig({
server: {
port: 3000,
},
+ preview: {
+ port: 3000,
+ },
});