✨ feat: INTERACTION 상수 생성

✅ 체크리스트

[x] 상세페이지 댓글 수 표기
[x] 댓글 hover 제거
[x] INTERACTION 상수 생성 및 적용

📝 작업 상세 내용

1️⃣ INTERACTION 상수 생성 및 적용

기존 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 시 효과를 나타냅니다.

기존 :focus에서 :focus-visible로 변경되었습니다. 기존 :focus는 마우스 클릭, 스크린 터치, 키보트 Tab키를 눌렀을 때 요소에 테두리가 생기는 반면 :focus-visible은 오직 키보드에 대해서만 적용됩니다.

이렇게 변경한 이유는 포커스 효과가 마우스/스크린 사용자에겐 오히려 거슬려서 굳이 필요하지 않다 생각합니다. 하지만 키보드로만 서비스를 이용해야하는 사용자는 해당 속성이 필요하기 때문에 :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()}
`;

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

[x] 브랜치 확인하기
[x] 불필요한 코드가 들어가지 않았는지 재확인하기
[x] issue 닫기
[x] reiewers, assignees, Lables 등록 확인하기

이슈 번호: 없음

CHZZK-Study / Grass-Diary-Client