Closed rkdcodus closed 1 month ago
기존 Interaction/ButtonWrap 컴포넌트를 지우고 INTERACTION 상수로 대체했습니다. 현재 헤더, 메뉴바, 상세페이지에 적용되어있습니다.
export const INTERACTION = { default: { normal: (background?: string) => ` &:hover { background: ${ background || '' } linear-gradient(to right, rgba(38, 38, 38, 0.05), rgba(38, 38, 38, 0.05)); } &:active { background: ${ background || '' } linear-gradient(to right, rgba(38, 38, 38, 0.08), rgba(38, 38, 38, 0.08)); } &:focus-visible { outline: none; box-shadow: 0 0 0 2px ${semantic.light.interactive.solid.focused} inset; } ... }
INTERACTION은 :hover, :active, :focus-visible 시 효과를 나타냅니다.
INTERACTION
:hover
:active
:focus-visible
기존 :focus에서 :focus-visible로 변경되었습니다. 기존 :focus는 마우스 클릭, 스크린 터치, 키보트 Tab키를 눌렀을 때 요소에 테두리가 생기는 반면 :focus-visible은 오직 키보드에 대해서만 적용됩니다.
:focus
이렇게 변경한 이유는 포커스 효과가 마우스/스크린 사용자에겐 오히려 거슬려서 굳이 필요하지 않다 생각합니다. 하지만 키보드로만 서비스를 이용해야하는 사용자는 해당 속성이 필요하기 때문에 :focus-visible로 변경하였습니다.
주의할 점은 해당 속성은 요소가 button, a, input 요소 일 때 적용됩니다. 포커스 효과가 필요한 부분이라면 INTERACTION을 적용하는 요소를 button 태그로 변경해주세요!
또한 INTERACTION은 background color를 인수로 받을 수 있습니다. INTERACTION을 적용하는 요소가 배경색이 없다면 생략하고 배경색이 있다면 인수로 넘겨주시면 됩니다!
INTERACTION은 피그마에 정의되어있는 interaction레이어의 type과 density에 따라 나누었습니다. 이 부분 참고하여 적용해주시면 될 것 같습니다.
// 배경색이 있을 때 import { INTERACTION } from '@styles/interaction'; const LoginBtn = styled.button` ... background: ${semantic.light.accent.solid.normal}; ${INTERACTION.default.normal(semantic.light.accent.solid.normal)} `;
// 배경색 없을 때 const ArrowButton = styled.button` ... ${INTERACTION.default.normal()} `;
추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.
변경 사항에 대한 스크린샷이 있다면 첨부해주세요.
이슈 번호: 없음
✅ 체크리스트
📝 작업 상세 내용
1️⃣ INTERACTION 상수 생성 및 적용
기존 Interaction/ButtonWrap 컴포넌트를 지우고 INTERACTION 상수로 대체했습니다. 현재 헤더, 메뉴바, 상세페이지에 적용되어있습니다.
INTERACTION
은:hover
,:active
,:focus-visible
시 효과를 나타냅니다.기존
:focus
에서:focus-visible
로 변경되었습니다. 기존:focus
는 마우스 클릭, 스크린 터치, 키보트 Tab키를 눌렀을 때 요소에 테두리가 생기는 반면:focus-visible
은 오직 키보드에 대해서만 적용됩니다.이렇게 변경한 이유는 포커스 효과가 마우스/스크린 사용자에겐 오히려 거슬려서 굳이 필요하지 않다 생각합니다. 하지만 키보드로만 서비스를 이용해야하는 사용자는 해당 속성이 필요하기 때문에
:focus-visible
로 변경하였습니다.주의할 점은 해당 속성은 요소가 button, a, input 요소 일 때 적용됩니다. 포커스 효과가 필요한 부분이라면 INTERACTION을 적용하는 요소를 button 태그로 변경해주세요!
또한 INTERACTION은 background color를 인수로 받을 수 있습니다.
INTERACTION을 적용하는 요소가 배경색이 없다면 생략하고 배경색이 있다면 인수로 넘겨주시면 됩니다!
INTERACTION
은 피그마에 정의되어있는 interaction레이어의 type과 density에 따라 나누었습니다. 이 부분 참고하여 적용해주시면 될 것 같습니다.사용 예시
🚨 버그 발생 이유 (선택 사항)
🔎 후속 작업 (선택 사항)
🤔 질문 사항 (선택 사항)
📚 참고 자료 (선택 사항)
추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.
📸 스크린샷 (선택 사항)
변경 사항에 대한 스크린샷이 있다면 첨부해주세요.
✅ 셀프 체크리스트
이슈 번호: 없음