input 관련 공통 스타일 상수, 컴포넌트 만들기

[NamJwong]

⛓ Related Issues

• close input 관련 공통 스타일 상수, 컴포넌트 만들기 #26

📋 작업 내용

• input, textarea 스타일 상수 만들기
• CommonInput 컴포넌트에 상수 적용
• CommonLabel 컴포넌트 만들기

📌 PR Point

input, textarea 스타일 상수

CommonInput이 아닌 textarea에서도 같은 스타일을 사용하기 때문에 스타일만 따로 상수로 지정했습니다
그리고 CommonInput의 스타일 컴포넌트에 해당 상수를 적용시켰습니다

CommonLabel 컴포넌트

등록 관련 뷰마다 input or textarea의 라벨 스타일이 겹쳐서 만들어봤는데 솔직히 다 만들고나니 굳이? 싶어요......

위처럼 '(선택)'이 붙는 것도 있어서 isOptional prop으로 설정 가능하게 했고,
margin-bottom이 다 같진 않길래 설정 가능하게 했어요

생각보다 오히려 불편할 수도 있을 것 같은데 만들면서 공부는 많이 됐으니,, 이거 쓰면 좋을지 아닐지 의견 솔직하게 말해쥬세요!~~
다음부턴 이렇게 너무 작은 것에 대한 재사용성에 집착하지 않겠어ㅠ,,,,,, (앱잼 기간 내 한정)

👀 스크린샷 / GIF / 링크

input, textarea 스타일 상수

아래처럼 테스트 코드 작성해서 이상 없는지 확인했습니다~

import GlobalStyle from '@styles/global';
import Router from '@routes/Router';
import CommonInput from '@components/common/CommonInput';

function App() {
  return (
    <>
      <GlobalStyle />
      <Router />
      <CommonInput width="350px" placeholder="placeholder 테스트" />
    </>
  );
}

export default App;

CommonLabel 컴포넌트

아래처럼 테스트 코드 작성해서 이상 없는지 확인했습니다~

import GlobalStyle from '@styles/global';
import Router from '@routes/Router';
import CommonInput from '@components/common/CommonInput';
import CommonLabel from '@components/common/CommonLabel';
import styled from 'styled-components';

function App() {
  return (
    <StApp>
      <GlobalStyle />
      <Router />
      <CommonLabel
        content="어떤 일이 있었는지 기록해주세요"
        marginBottom="16px"
        isOptional={true}
      />
      <CommonInput width="350px" placeholder="placeholder 테스트" />
    </StApp>
  );
}

export default App;

const StApp = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
`;

[SeojinSeojin]

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~

[SeojinSeojin]

수고하셨습니닷!! 네이밍 제안은 참고만 하심 될 것 가타여

참고로 마크다운에서 코드를 쓸 때 ``` 옆에 ts 혹은 tsx를 적어준다면 코드에 색을 칠해줘여~~

[SeojinSeojin]

COMMON 대신 MAIN 어때염?
버튼도 그렇게 썼길래!!

[NamJwong]

버튼은 CORAL_MAIN 색상이어서 그렇게 한 것이구 이거는 CommonInput 컴포넌트랑 같은 맥락으로 이렇게 했어!!

[SeojinSeojin]

오케오케!!

그런데 CommonInput 컴포넌트가 있으면 앞으로 거의 모든 인풋에 대해 CommonInput 컴포넌트를 갖다가 사용할 것이고, 그럼 다른 Input 컴포넌트를 정의할 때 이 css 값을 가져다 사용할 일이 많을 것 같지는 않다는 생각이 들엇어.. 이미 CommonInput 컴포넌트에 이 css 값이 들어있으니까!

그치만 이미 만들었으니까 써보자!

[NamJwong]

수고하셨습니닷!! 네이밍 제안은 참고만 하심 될 것 가타여

참고로 마크다운에서 코드를 쓸 때 ``` 옆에 ts 혹은 tsx를 적어준다면 코드에 색을 칠해줘여~~

우왕 흑백인게 거슬렸는데 꿀팁 감사합니다~.~

[SeojinSeojin]

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~

[SeojinSeojin]

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~

[SeojinSeojin]

울 웹쁜이~~ 라벨은 지금 봤네!!

라벨은 안에 막 스팬 써야하고 색 따로 줘야 하고 그럴 텐데 공통 컴포넌트로 빼서 쓰면 진짜 편할 것 같다!!!

그리고 언니가 맞다고 생각하면 일단 다 갈겨~!~!

[Hyoin-Kim]

공통적인부분 추가적으로 빼줘서 고마워~시간쪼개서 구현해줘서 고생많았어ㅜㅜ