Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feat/#37] Input 컴포넌트 구현 #38

Merged
merged 13 commits into from
Jan 17, 2025
Merged

[Feat/#37] Input 컴포넌트 구현 #38

merged 13 commits into from
Jan 17, 2025

Conversation

zzz-myam
Copy link
Collaborator

@zzz-myam zzz-myam commented Jan 10, 2025 •
edited
Loading

📌 관련 이슈번호

체크리스트

  • 🎋 base 브랜치를 develop 브랜치로 설정했나요?
  • 🖌️ PR 제목은 형식에 맞게 잘 작성했나요?
  • 🏗️ 빌드는 성공했나요? (yarn build)
  • 🧹 불필요한 코드는 제거했나요? e.g. console.log
  • 🙇‍♂️ 리뷰어를 지정했나요?
  • 🏷️ 라벨은 등록했나요?

✅ Key Changes

이번 PR에서 작업한 내용을 간략히 설명해주세요

  1. input 컴포넌트 구현
    • input 컴포넌트는 label과 input 태그로 구현했으며, label은 옵셔널로 사용할 수 있도록 지정해두었습니다! (@youtheyeon 님 감사합니다!!)
    • 컴포넌트를 사용하실 때는 아래와 같은 코드를 참고하셔서 사용하시면 될 것 같습니다!
const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);

<Input
          inputLabel={'성함/연락처'}
          value={inputValue}
          onChange={handleInputChange}
          placeholder={'입력하세요'}
        />

📢 To Reviewers

  • 부족한 점은 언제든 말씀해주세요! 빠르게 반영하겠습니다 :)

📸 스크린샷 or 실행영상

  • 커서가 올라가서 작성 중일 때만 border의 색이 변합니다
image image image

@zzz-myam zzz-myam self-assigned this Jan 10, 2025
@github-actions GitHub Actions
Copy link

🍰 Storybook 배포가 완료되었습니다! 🔗 https://677cb5c3ab50c3f524eaae19-jjvcakbpnb.chromatic.com/

@github-actions GitHub Actions
Copy link

🍰 Storybook 배포가 완료되었습니다! 🔗 https://677cb5c3ab50c3f524eaae19-ypzvinascs.chromatic.com/

@github-actions GitHub Actions
Copy link

🍰 Storybook 배포가 완료되었습니다! 🔗 https://677cb5c3ab50c3f524eaae19-dolkujherr.chromatic.com/

@github-actions GitHub Actions
Copy link

🍰 Storybook 배포가 완료되었습니다! 🔗 https://677cb5c3ab50c3f524eaae19-zbisvopqfg.chromatic.com/

@github-actions GitHub Actions
Copy link

🍰 Storybook 배포가 완료되었습니다! 🔗 https://677cb5c3ab50c3f524eaae19-nokimtbaow.chromatic.com/

@youtheyeon youtheyeon changed the title [Feat/#37] input 컴포넌트 구현 [Feat/#37] Input 컴포넌트 구현 Jan 17, 2025
youtheyeon
youtheyeon approved these changes Jan 17, 2025
View reviewed changes
Copy link
Collaborator

@youtheyeon youtheyeon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

너무 수고하셨습니다! label까지 꼼꼼하게 고려해주셔서 감사해요 짱 👍

src/components/common/Input/Input.css.ts Outdated
export const inputContainer = style([
flexGenerator('column', 'center', 'flex-start'),
{
gap: '0.38rem',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

피그마에는 0.4rem로 되어 있는 것 같습니다!

src/components/common/Input/Input.css.ts Outdated
},
]);

export const icFromDot = style({ width: '2rem' });
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dot으로부터.......
근데 이렇게 스타일을 하나 만드는 것 보다 아이콘 자체에 width={20} height={20}을 주는 게 더 좋을 것 같습니다!

src/components/common/Input/Input.tsx Outdated
const Input = ({ inputLabel, value, onChange, placeholder }: InputProps) => {
return (
<div className={inputContainer}>
<label htmlFor="value" className={inputTitle}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 "value"가 아니라 {value}로 가능할까요?
"value"로 하면 정말 value라는 문자열로 지정이 되어서 모든 input과 다 연결이 될 것 같습니다.
label과 input을 각각 쌍을 지어 연결하려면 쌍 마다 값을 다르게 지정해줘야 하므로 {value}로 변경 부탁드립니다!

src/components/common/Input/Input.tsx Outdated
<input
className={inputStyle({ state: value ? 'active' : 'default' })}
type="text"
id="value"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 {value}로!

@github-actions GitHub Actions
Copy link

🍰 Storybook 배포가 완료되었습니다! 🔗 https://677cb5c3ab50c3f524eaae19-fxxdzmxwgy.chromatic.com/

thisishwarang
thisishwarang reviewed Jan 17, 2025
View reviewed changes
src/components/common/Input/Input.css.ts Outdated
export const inputStyle = recipe({
base: {
width: '100%',
backgroundColor: vars.colors.gray100,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이거 백그라운드 컬러 피그마 상에서는 white인것 같은데 확인 부탁드립니다!

thisishwarang
thisishwarang reviewed Jan 17, 2025
View reviewed changes
src/components/common/Input/Input.css.ts Outdated
default: { color: vars.colors.gray400 },
active: {
color: vars.colors.gray900,
border: `1px solid ${vars.colors.red1}`,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

border 컬러도 gray500으로 변경된 것 같은데 반영 부탁드립니다!

thisishwarang
thisishwarang reviewed Jan 17, 2025
View reviewed changes
src/components/common/Input/Input.css.ts Outdated
]);

export const inputStyle = recipe({
base: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

폰트 body07 넣어주시기 바랍니다!

@github-actions GitHub Actions
Copy link

🍰 Storybook 배포가 완료되었습니다! 🔗 https://677cb5c3ab50c3f524eaae19-hjzmwjslvh.chromatic.com/

@github-actions GitHub Actions
Copy link

🍰 Storybook 배포가 완료되었습니다! 🔗 https://677cb5c3ab50c3f524eaae19-zcypajpole.chromatic.com/

@github-actions GitHub Actions
Copy link

🍰 Storybook 배포가 완료되었습니다! 🔗 https://677cb5c3ab50c3f524eaae19-elsgkiuuag.chromatic.com/

@thisishwarang thisishwarang merged commit 6335715 into develop Jan 17, 2025
3 checks passed
@thisishwarang thisishwarang deleted the feat/#37/input-components branch January 17, 2025 17:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@youtheyeon youtheyeon youtheyeon approved these changes

@thisishwarang thisishwarang thisishwarang approved these changes

@chaeneey chaeneey Awaiting requested review from chaeneey

Assignees

@zzz-myam zzz-myam

Labels
✨ feature 기능 개발 😽 지유
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Feat] Input 공통 컴포넌트 만들기
3 participants
@zzz-myam @thisishwarang @youtheyeon