Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the MainPage to implement authentication-aware navigation for the start button, including a loading state. Feedback suggests leveraging Chakra UI's isDisabled prop to simplify the button's styling and click handling logic, removing the need for manual state checks and custom CSS properties.
| const handleStartClick = () => { | ||
| if (isStartButtonDisabled) { | ||
| return; | ||
| } | ||
|
|
||
| navigate(startButtonTargetPath); | ||
| }; |
There was a problem hiding this comment.
버튼에 isDisabled 속성을 사용하면 비활성화 상태일 때 클릭 이벤트가 자동으로 차단됩니다. 따라서 핸들러 내부에서 isStartButtonDisabled를 중복으로 체크할 필요가 없으므로 로직을 단순화할 수 있습니다.
const handleStartClick = () => {
navigate(startButtonTargetPath);
};
src/pages/main/MainPage.tsx
Outdated
| cursor={isStartButtonDisabled ? "not-allowed" : "pointer"} | ||
| disabled={isStartButtonDisabled} | ||
| fontSize="xl" | ||
| fontWeight="bold" | ||
| opacity={isStartButtonDisabled ? 0.5 : 1} | ||
| p={6} | ||
| w={{ base: "full", lg: "auto" }} | ||
| w="full" | ||
| _active={{ bg: "seed.active" }} | ||
| _hover={{ bg: "seed.hover" }} | ||
| onClick={() => navigate(ROUTE_PATHS.LOGIN)} | ||
| _hover={{ | ||
| bg: isStartButtonDisabled ? "button.bg" : "seed.hover", | ||
| }} | ||
| onClick={handleStartClick} |
There was a problem hiding this comment.
Chakra UI의 Button 컴포넌트는 isDisabled 속성을 제공합니다. 이를 사용하면 cursor, opacity, _hover 상태 등을 수동으로 제어할 필요 없이 일관된 비활성화 스타일과 동작을 자동으로 처리할 수 있습니다. 만약 비활성화 상태에서 특정 커서 모양(예: not-allowed)을 유지하고 싶다면 _disabled 속성을 활용하는 것이 더 권장되는 방식입니다.
| cursor={isStartButtonDisabled ? "not-allowed" : "pointer"} | |
| disabled={isStartButtonDisabled} | |
| fontSize="xl" | |
| fontWeight="bold" | |
| opacity={isStartButtonDisabled ? 0.5 : 1} | |
| p={6} | |
| w={{ base: "full", lg: "auto" }} | |
| w="full" | |
| _active={{ bg: "seed.active" }} | |
| _hover={{ bg: "seed.hover" }} | |
| onClick={() => navigate(ROUTE_PATHS.LOGIN)} | |
| _hover={{ | |
| bg: isStartButtonDisabled ? "button.bg" : "seed.hover", | |
| }} | |
| onClick={handleStartClick} | |
| fontSize="xl" | |
| fontWeight="bold" | |
| isDisabled={isStartButtonDisabled} | |
| p={6} | |
| w="full" | |
| _active={{ bg: "seed.active" }} | |
| _hover={{ bg: "seed.hover" }} | |
| onClick={handleStartClick} |
There was a problem hiding this comment.
확인했습니다. disabled 속성 사용하도록 수정하겠습니다.
1 participant
📝 요약 (Summary)
시작하기버튼이 로그인 상태에 따라 각각로그인 화면과마이페이지로 이동하도록 수정w="full"로 설정✅ 주요 변경 사항 (Key Changes)
useAuth()를 사용해 메인 CTA의 이동 경로를 각각/login과/mypage로 분기했습니다.시작하기버튼의 너비를w="full"로 변경했습니다.💻 상세 구현 내용 (Implementation Details)
useAuth()의isAuthenticated,isLoading을 사용하도록 변경했습니다.handleStartClick내부에서 로그인 상태에 따라 목적 경로를 직접 분기하도록 정리했습니다.disabled와_disabled를 사용해서 버튼을 비활성화 처리해줬습니다.🚀 트러블 슈팅 (Trouble Shooting)
/login으로 잘못 이동할 수 있었습니다.=> 이를 방지하기 위해
isLoading동안 CTA 버튼 상태를 비활성화되도록 처리했습니다.📸 스크린샷 (Screenshots)
#️⃣ 관련 이슈 (Related Issues)