refactor(Select): Select padding/border 명세와 상이한 부분 수정

[suwonthugger]

변경사항

close #173

padding값이 오른쪽에 더 적용된것 처럼 보이는 현상

  '::-webkit-scrollbar': {
    width: '16px',
  },

스크롤바 영역이 16px 만큼 차지하고 있어서 그랬습니다. 피그마 디자인 비교했을 때 관련해서 적용해야하는 사항이 없어서 삭제했습니다.

border 미적용 현상

open 됐을 때 border가 아래 스타일 처럼 focus 선택자로 적용되고있었습니다. 해당 스타일은 trigger와 triggerContents로 컴포넌트가 나누어지면서 div태그인 triggerContents에 적용되는 스타일로 , div 태그에는 focus로 스타일을 받을 수 없기 때문에 일어난 현상이었습니다.

export const select = style({
 ...theme.fontsObject.BODY_2_16_M,
 'color': theme.colors.white,
 'width': '160px',
 'height': '48px',
 'borderRadius': '10px',
 'background': theme.colors.gray800,
 'border': '1px solid transparent',
 'padding': '11px 16px',
 'display': 'flex',
 'justifyContent': 'space-between',
 'alignItems': 'center',
 'gap': '12px',
 'cursor': 'pointer',
 'transition': 'border 0.2s',

// 해당 focus 스타일 삭제
 ':focus': {
   border: `1px solid ${theme.colors.gray200}`,
 },

다음과 같이 따로 정의 되어있는 focus 스타일을 적용하여 해결했습니다.

    <div className={`${S.select} ${open ? S.focus : ''} ${className ? className : ''}`}>

approve 받고 스토리북 배포하고, changeset 적용하겠습니다.

링크

https://sopt-makers.slack.com/archives/C07AFHC6LDB/p1728690503017559

시급한 정도

🏃‍♂️ 보통 : 최대한 빠르게 리뷰 부탁드립니다.

기타 사항

select-change.mp4

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2fa556f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[jungwoo3490]

빠른 대응 너무너무 감사해요 👍🏻👍🏻👍🏻
코멘트 한 번 확인해주시면 좋을 것 같아요!!!