fix : 대학 페이지 스크롤 및 검색 로직 수정 및 멘토 페이지 무한 스피너 버그 해결 #397
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 대학 목록 가상화 제거 및 전체 페이지 스크롤 적용 - 검색바 스티키 고정 및 검색 시 현재 경로 유지하도록 수정 - authStore 초기화(hydration) 후 isInitialized 상태 업데이트 로직 추가 - 대학 페이지 레이아웃 및 문구 수정
- university list에서 제거된 enable virtualization prop 사용 제거 - biome lint 자동 수정 적용
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough이 변경사항은 대학교 검색 및 표시 기능의 UI/UX를 개선하고 성능 최적화 관련 코드를 단순화합니다. 주요 변경사항은 다음과 같습니다:
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/web/src/lib/zustand/useAuthStore.ts`:
- Around line 66-71: The onRehydrateStorage callback in your persist config
mutates state directly (state.isInitialized = true) which can bypass zustand
subscribers; modify the persist usage to accept the third parameter api
(persist((set, get, api) => ...)) and inside onRehydrateStorage call
api.setState({ isInitialized: true }) instead of direct mutation so all
subscribers are notified; update the persist closure signature and replace the
direct assignment in onRehydrateStorage accordingly (referencing
onRehydrateStorage and api.setState in useAuthStore.ts).
Comment on lines
+66
to
+71
| onRehydrateStorage: () => (state) => { | ||
| // hydration 완료 후 isInitialized를 true로 설정 | ||
| if (state) { | ||
| state.isInitialized = true; | ||
| } | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n apps/web/src/lib/zustand/useAuthStore.tsRepository: solid-connection/solid-connect-web
Length of output: 2452
🏁 Script executed:
# Check if there are any other stores or patterns in the codebase using onRehydrateStorage
rg "onRehydrateStorage" --type ts --type tsx -A 3Repository: solid-connection/solid-connect-web
Length of output: 105
🏁 Script executed:
# Check if there are any other stores or patterns in the codebase using onRehydrateStorage
rg "onRehydrateStorage" -A 3Repository: solid-connection/solid-connect-web
Length of output: 395
🏁 Script executed:
# Check zustand persist middleware usage patterns in the codebase
rg "persist\(" -B 2 -A 5Repository: solid-connection/solid-connect-web
Length of output: 582
hydration 이후 직접 변이 대신 api.setState()를 사용하여 구독자에게 알려주세요.
현재 구현에서 onRehydrateStorage 콜백이 상태를 직접 변이시키면 zustand의 구독자들이 변경을 감지하지 못할 수 있어, UI에 isInitialized 업데이트가 반영되지 않을 수 있습니다. api.setState()를 통해 명시적으로 상태를 업데이트하면 모든 구독자에게 제대로 알림이 전달됩니다.
수정 사항:
-
persist 콜백에
api파라미터 추가- 세 번째 파라미터로
api를 받아서 onRehydrateStorage 클로저에서 접근할 수 있게 합니다.
- 세 번째 파라미터로
-
onRehydrateStorage에서
api.setState()호출- 직접
state.isInitialized = true대신api.setState({ isInitialized: true })로 변경합니다.
- 직접
✅ 수정 제안
- persist(
- (set) => ({
+ persist(
+ (set, _get, api) => ({
accessToken: null,
isAuthenticated: false,
isLoading: false,
isInitialized: false,
refreshStatus: "idle",
setAccessToken: (token) => {
set({
accessToken: token,
isAuthenticated: true,
isLoading: false,
isInitialized: true,
refreshStatus: "success",
});
},
clearAccessToken: () => {
set({
accessToken: null,
isAuthenticated: false,
isLoading: false,
isInitialized: true,
refreshStatus: "idle",
});
},
setLoading: (loading) => {
set({ isLoading: loading });
},
setInitialized: (initialized) => {
set({ isInitialized: initialized });
},
setRefreshStatus: (status) => {
set({ refreshStatus: status });
},
}),
{
name: "auth-storage",
partialize: (state) => ({
accessToken: state.accessToken,
isAuthenticated: state.isAuthenticated,
}),
- onRehydrateStorage: () => (state) => {
- // hydration 완료 후 isInitialized를 true로 설정
- if (state) {
- state.isInitialized = true;
- }
- },
+ onRehydrateStorage: () => () => {
+ // hydration 완료 후 isInitialized를 true로 설정
+ api.setState({ isInitialized: true });
+ },
},
),
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| onRehydrateStorage: () => (state) => { | |
| // hydration 완료 후 isInitialized를 true로 설정 | |
| if (state) { | |
| state.isInitialized = true; | |
| } | |
| }, | |
| persist( | |
| (set, _get, api) => ({ | |
| accessToken: null, | |
| isAuthenticated: false, | |
| isLoading: false, | |
| isInitialized: false, | |
| refreshStatus: "idle", | |
| setAccessToken: (token) => { | |
| set({ | |
| accessToken: token, | |
| isAuthenticated: true, | |
| isLoading: false, | |
| isInitialized: true, | |
| refreshStatus: "success", | |
| }); | |
| }, | |
| clearAccessToken: () => { | |
| set({ | |
| accessToken: null, | |
| isAuthenticated: false, | |
| isLoading: false, | |
| isInitialized: true, | |
| refreshStatus: "idle", | |
| }); | |
| }, | |
| setLoading: (loading) => { | |
| set({ isLoading: loading }); | |
| }, | |
| setInitialized: (initialized) => { | |
| set({ isInitialized: initialized }); | |
| }, | |
| setRefreshStatus: (status) => { | |
| set({ refreshStatus: status }); | |
| }, | |
| }), | |
| { | |
| name: "auth-storage", | |
| partialize: (state) => ({ | |
| accessToken: state.accessToken, | |
| isAuthenticated: state.isAuthenticated, | |
| }), | |
| onRehydrateStorage: () => () => { | |
| // hydration 완료 후 isInitialized를 true로 설정 | |
| api.setState({ isInitialized: true }); | |
| }, | |
| }, | |
| ), |
🤖 Prompt for AI Agents
In `@apps/web/src/lib/zustand/useAuthStore.ts` around lines 66 - 71, The
onRehydrateStorage callback in your persist config mutates state directly
(state.isInitialized = true) which can bypass zustand subscribers; modify the
persist usage to accept the third parameter api (persist((set, get, api) =>
...)) and inside onRehydrateStorage call api.setState({ isInitialized: true })
instead of direct mutation so all subscribers are notified; update the persist
closure signature and replace the direct assignment in onRehydrateStorage
accordingly (referencing onRehydrateStorage and api.setState in
useAuthStore.ts).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
관련 이슈
작업 내용
대학 페이지 스크롤 및 검색 로직 수정 및 멘토 페이지 무한 스피너 버그 해결
특이 사항
리뷰 요구사항 (선택)