fix(Select): border 유무에 따라 size가 변형되지 않도록 수정합니다.

[jungwoo3490]

변경사항

close #182

#174 에 설명되어있듯이, triggerContent에 대한 focus style을 별도로 정의하게 되면서 S.input 스타일을 가져다가 사용하지 않게 되었고, S.input에 정의되어 있는 border: 1px solid transparent가 적용되지 않아서 border 유무에 따라 size가 변형되어 다른 요소가 밀리는 이슈가 발생했어요.

이를 해결하기 위해 별도로 정의한 focus style에 정의되어 있던 border를 box-shadow inset으로 변경하여 테두리가 생기더라도 요소의 size가 변형되지 않도록 하여 문제를 해결했어요.

• 논의하고 싶은 점
  이렇게 되면 Select에서 Input의 공통 style을 참조하고 있지 않는데, Select를 Input으로 묶기보다 별도로 분리하는 건 어떤지에 대한 의견을 들어보고 싶어요!!

링크

https://sopt-makers.slack.com/lists/T040QGZF77H/F07LCJ586TS?record_id=Rec07T75VU4T1

시급한 정도

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

[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: c27e0cc

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

[Brokyeom]

이렇게 되면 Select에서 Input의 공통 style을 참조하고 있지 않는데, Select를 Input으로 묶기보다 별도로 분리하는 건 어떤지에 대한 의견을 들어보고 싶어요!!

저도 Select의 스타일은 분리하는게 좋겠다는 생각입니다. 이전에는 비슷한 레이아웃을 공유하기때문에 공통 스타일로 묶은 감이 있는데 달라진다면 분리하는게 맞다고 생각해요!

[Brokyeom]

LGTM !!

[suwonthugger]

LGTM

논의하고 싶은 점
이렇게 되면 Select에서 Input의 공통 style을 참조하고 있지 않는데, Select를 Input으로 묶기보다 별도로 분리하는 건 어떤지에 대한 의견을 > 들어보고 싶어요!!

저도 공통적으로 쓰이는 스타일링이 없다면 Input과 분리하는게 좋을것 같습니다! 의미적으로도 분리하는게 맞을것 같아요!

추가적으로 css reset을 만들어서 스타일링을 어느정도 통일감있게 가져가는게 좋지 않을까 싶습니다. box-size border box 등을 적용하면 크기 관련 문제가 더 줄어들것 같아요