[PR] 과제 업로드 페이지(UploadPage) 모바일 반응형 UI 설정#74
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 implements responsive design across the upload feature components by applying Chakra UI's responsive object syntax to various layout and typography properties. Key changes include refactoring the submit section to use a Button component, updating the assignment type section for better mobile layout, and removing the baseUrl configuration from TypeScript settings. Feedback focuses on improving accessibility and component behavior by using Chakra-specific props like isDisabled and ensuring custom button elements have an explicit type="button" attribute to prevent unintended form submissions.
| disabled={isDisabled} | ||
| fontSize={{ base: "sm", md: "md" }} | ||
| fontWeight="bold" | ||
| h={{ base: 12, md: 14 }} | ||
| maxW={{ base: "full", md: "384px" }} | ||
| opacity={isDisabled ? 0.5 : 1} | ||
| px={8} | ||
| transition="opacity 0.15s" | ||
| px={{ base: 6, md: 8 }} | ||
| transition="opacity 0.15s, background-color 0.15s" | ||
| w="full" | ||
| _hover={{ opacity: isDisabled ? 0.5 : 0.85 }} | ||
| whiteSpace="normal" | ||
| _disabled={{ bg: "seed", cursor: "not-allowed", opacity: 0.5 }} |
There was a problem hiding this comment.
Chakra UI의 Button 컴포넌트에서는 native disabled 속성 대신 isDisabled prop을 사용하는 것이 권장됩니다. isDisabled를 사용하면 Chakra UI가 내부적으로 aria-disabled 상태를 관리하고, _disabled 스타일에 정의된 속성들을 자동으로 적용해 줍니다. 또한, opacity를 삼항 연산자로 직접 제어하는 대신 _disabled 속성 내에서 관리하도록 통합하면 코드가 더 간결해집니다.
| disabled={isDisabled} | |
| fontSize={{ base: "sm", md: "md" }} | |
| fontWeight="bold" | |
| h={{ base: 12, md: 14 }} | |
| maxW={{ base: "full", md: "384px" }} | |
| opacity={isDisabled ? 0.5 : 1} | |
| px={8} | |
| transition="opacity 0.15s" | |
| px={{ base: 6, md: 8 }} | |
| transition="opacity 0.15s, background-color 0.15s" | |
| w="full" | |
| _hover={{ opacity: isDisabled ? 0.5 : 0.85 }} | |
| whiteSpace="normal" | |
| _disabled={{ bg: "seed", cursor: "not-allowed", opacity: 0.5 }} | |
| isDisabled={isDisabled} | |
| fontSize={{ base: "sm", md: "md" }} | |
| fontWeight="bold" | |
| h={{ base: 12, md: 14 }} | |
| maxW={{ base: "full", md: "384px" }} | |
| px={{ base: 6, md: 8 }} | |
| transition="opacity 0.15s, background-color 0.15s" | |
| w="full" | |
| whiteSpace="normal" | |
| _disabled={{ bg: "seed", cursor: "not-allowed", opacity: 0.5 }} |
There was a problem hiding this comment.
isDisplayed는 chacra ui v2일 때 얘기고, 우리 프로젝트는 v3을 사용하고 있어서 displayed를 사용하도록 하겠습니다.
diaplayed 스타일들은 _displayed로 모으는 것으로 수정하겠습니다.
|
|
||
| return ( | ||
| <Flex | ||
| as="button" |
There was a problem hiding this comment.
Flex를 버튼(as="button")으로 사용하실 때, type="button" 속성을 명시적으로 추가하는 것을 권장합니다. 이는 해당 컴포넌트가 나중에 form 태그 내부에 배치되더라도 의도치 않은 form 제출(submit) 동작을 방지하기 위한 안전한 관행입니다.
| as="button" | |
| as="button" | |
| type="button" |
There was a problem hiding this comment.
Flex를 Button 컴포넌트로 변경했고, type=button도 제거해줬습니다.
TTOCHIwas
changed the title
1 participant
📝 요약 (Summary)
✅ 주요 변경 사항 (Key Changes)
💻 상세 구현 내용 (Implementation Details)
1. 업로드 페이지 상단 레이아웃 정리
2. 과제 유형 선택 영역 반응형 적용
3. 내용 작성 / 파일 업로드 영역 개선
4. 제출 영역 정리
px기준으로 맞췄습니다.🚀 트러블 슈팅 (Trouble Shooting)
📸 스크린샷 (Screenshots)
#️⃣ 관련 이슈 (Related Issues)