[Feature] component 페이지 마크업 (avatar, checkbox, switch, header) #197
Conversation
This file contains 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
soulchicken
requested review from
eugene028,
hamo-o and
SeieunYoo
as code owners
|
|
Size Change: 0 B Total Size: 680 kB ℹ️ View Unchanged
|
SeieunYoo
reviewed
Jan 25, 2025
There was a problem hiding this comment.
마크업 작업하시느라 수고 하셨습니다!!
Checkbox 와 Switch pressed hover 관리 여부 같은 경우에는 data 속성을 전달하면 컴포넌트를 새로 만들지 않아도 컴포넌트단 제어는 가능할 거 같아요~
- Checkbox
checkbox 컴포넌트의 pressed 의 상태는 Checkbox 내부에 input 태그에 data-pressed 속성을 주면 pressed 상태를 표현할 수 있는데요,
현재 checkbox input 에 접근하기 위해서는 ref 를 전달해서 ref.current 로 요소를 가져와서 data attribute 를 전달할 수 있을 거 같아요.
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.setAttribute("data-pressed", "true");
}
}, []);- Switch
Switch 컴포넌트는 label 태그에 data 속성을 전달해야 하는데요, 현재 ref 가 input 태그에 전달되고 있어서 label 에 접근하기는 어려울 거 같아요. 🤔
document.querySelector로 label 요소를 가져와야될 듯 한데 아래 방법처럼 돔에 접근하는 방식으로 구현해보는 건 어떨까요?
useEffect(() => {
//label for 속성으로 요소 가져오기
const labelElement = document.querySelector('label[for="example id"]');
if (labelElement) {
labelElement.setAttribute("data-hover", "true");
}
}, []);
<Switch inputProps={{ id: "example id" }} />- pressed, checked, disabled에 맞게 구현 - 코드리뷰에 나온 내용을 토대로 useRef를 사용해서 attribute 추가
- querySelector로 요소를 조작하는 방식을 사용 - disabled의 경우 Switch 컴포넌트가 disabled와 checked가 공존하기 힘들기에 컴포넌트 따로 제작
- GDGoC로 바뀐 내용 반영 - 디자이너님과 이야기하여 PC, Mobile 순서 변경
|
화면이 980px 이상일 때, 아래 사진과 같이 Header의 좌우 여백에 padding 공간이 없는 이유가 xsToLg: {
paddingX: "16px",
height: "66px",
},지금 개발팀 활동 안하고 계시는 홍서현님이 작성하신 코드이긴 한데 관련 이슈는 파두었습니당~ |
eugene028
reviewed
Jan 28, 2025
apps/wow-docs/app/component/switch/_components/ComponentTab.tsx
Outdated
Show resolved
Hide resolved
eugene028
approved these changes
Feb 3, 2025
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.
🎉 변경 사항
🙏 여기는 꼭 봐주세요!
componentTab에서 지금 당장 구현하기 어려운 부분은 이미지 파일로 덮어놓은 상태입니다.GuidelineTab에서 아직 GDSC -> GDGoC로 되지 않은 상태입니다. 디자인팀께 요청드린 상태라서 피그마 바뀌면 업데이트하겠습니다.