-
{myInfo.universityName}
-
- {myInfo.name} {myInfo.studentNumber}
-
+ {user ? (
+ <>
+ {user.universityName}
+
+ {user.name} {user.studentNumber}
+
+
+ ) : (
+ <>
+
+
+
+ )}
-
diff --git a/src/pages/Home/components/InfiniteClubCarousel.tsx b/src/pages/Home/components/InfiniteClubCarousel.tsx
index 9af06721..899d763f 100644
--- a/src/pages/Home/components/InfiniteClubCarousel.tsx
+++ b/src/pages/Home/components/InfiniteClubCarousel.tsx
@@ -9,6 +9,16 @@ interface InfiniteClubCarouselProps {
clubs: HomeClubCardItem[];
}
+function isPriorityImage(index: number, clubsLength: number, shouldLoop: boolean) {
+ if (!shouldLoop) {
+ return index < 2;
+ }
+
+ const middleSegmentStartIndex = clubsLength;
+
+ return index >= middleSegmentStartIndex - 1 && index <= middleSegmentStartIndex + 1;
+}
+
function InfiniteClubCarousel({ clubs }: InfiniteClubCarouselProps) {
const {
displayClubs,
@@ -45,6 +55,8 @@ function InfiniteClubCarousel({ clubs }: InfiniteClubCarouselProps) {
club={club}
className="w-full"
ariaHidden={isDuplicate}
+ imageFetchPriority={isPriorityImage(index, clubs.length, shouldLoop) ? 'auto' : 'low'}
+ imageLoading={isPriorityImage(index, clubs.length, shouldLoop) ? 'eager' : 'lazy'}
tabIndex={isDuplicate ? -1 : 0}
/>
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..7637e8a0 100644
--- a/src/stores/authStore.ts
+++ b/src/stores/authStore.ts
@@ -2,6 +2,9 @@ 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;
+
interface AuthState {
user: MyInfoResponse | null;
accessToken: string | null;
@@ -21,29 +24,70 @@ export const useAuthStore = create((set, get) => ({
isLoading: true,
initialize: async () => {
- if (get().user) {
- set({ isLoading: false });
+ const { accessToken, isAuthenticated, user } = get();
+
+ if (user) {
+ set({ isAuthenticated: true, isLoading: false });
return;
}
- try {
- const accessToken = await refreshAccessToken();
- set({ accessToken });
+ const hydrateUser = async (nextAccessToken: string) => {
+ if (hydrateUserPromise) return hydrateUserPromise;
- const user = await getMyInfo();
+ hydrateUserPromise = (async () => {
+ try {
+ const nextUser = await getMyInfo();
- set({ user, isAuthenticated: true, isLoading: false });
+ if (get().accessToken !== nextAccessToken) return;
- try {
- if (window.ReactNativeWebView) {
- window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'LOGIN_COMPLETE', accessToken }));
+ set({ user: nextUser });
+
+ try {
+ if (window.ReactNativeWebView) {
+ window.ReactNativeWebView.postMessage(
+ JSON.stringify({ type: 'LOGIN_COMPLETE', accessToken: nextAccessToken })
+ );
+ }
+ } catch {
+ // 브릿지 전달 실패가 인증 성공 상태를 롤백시키지 않도록 무시
+ }
+ } catch {
+ if (get().accessToken !== nextAccessToken) return;
+
+ set({ user: null, accessToken: null, isAuthenticated: false });
+ } finally {
+ hydrateUserPromise = null;
}
+ })();
+
+ return hydrateUserPromise;
+ };
+
+ if (isAuthenticated && accessToken) {
+ set({ isLoading: false });
+ void hydrateUser(accessToken);
+ return;
+ }
+
+ if (initializePromise) {
+ return initializePromise;
+ }
+
+ initializePromise = (async () => {
+ try {
+ 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 +96,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,
+ },
});