[Feat] input supportingText 구현 #41

Bowoon1216 · 2024-07-07T15:16:29Z

해당 이슈 번호

closed #32

체크리스트

📌 내가 알게 된 부분

텍스트 넘어갈 때 아래로 내려주는 css 태그
wordBreak를 알게되었다!

📌사용법

Input 사용할 때, 속성으로 isError, isNotice, supportingText로 Supporting text를 사용할 수 있습니다.
isError 는 빨간색으로, isNotice는 파란색으로, 둘다 아무런 입력이 없으면 모두 false가 기본이고, 둘다 false인데 supporitngText가 있으면 회색으로 나오게 됩니다.
즉,
빨강: isError == true
파랑: isNotice == true
회색: isNotice & isError == false

wuzoo · 2024-07-07T16:07:46Z

src/common/component/Input/Input.tsx

+          {LeftIcon && <LeftIcon />}
+          <input css={inputStyle} {...props} />
+        </div>
+        {supportingText && <SupportingText text={supportingText} isError={isError} isNotice={isNotice} />}


여기서 SupportingText한테 텍스트는 children으로 넘겨준다면 더 깔끔할 것 같다고 생각이 들어요 !

이말을 듣고 children에 대해서 알아보고 적용하였습니다!
children이 사용하기 훨씬 편할 것 같다는 생각이 드네욤 🙇‍♀️
좋은 지적 감사합니다 💟

wuzoo · 2024-07-07T16:08:59Z

src/common/component/Input/Input.style.ts


  '::placeholder': {
    color: theme.colors.gray_500,
+    ...theme.text.body03,
  },
 });


제가 스토리북으로 안 사실인데, input안의 텍스트에 대한 폰트 사이즈와 라인 헤이트도 설정해주셔야 될 것 같습니다 ! GUI 보구요 !

오오! 알려주셔서 넘 감사합니다! 수정완료했습니다 !! 💯

wuzoo · 2024-07-07T16:10:13Z

src/common/component/SupportingText/SupportingText.tsx

+  const textColor = isError ? theme.colors.red : isNotice ? theme.colors.blue_900 : theme.colors.gray_400;
+  return <p css={textStyle(textColor)}>{text}</p>;


요론거 가독성 좋게 return 문은 한 칸 띄워주시면 어떨지..!

그리고 isError랑 isNotice를 textStyle 함수에 바로 넘겨주고, 색깔 정하는 삼항연산자는 스타일 함수 내에서 수행하게 하는 건 어떠신가요 ?

넵!
textStyle에 많은 인자를 넣는 게 깔끔해보이지 않아서 저렇게 밖에서 했는데
주용님 말 들어보니까 스타일은 스타일 함수에서 수행하게 하는 것이 더 깔끔한 방법일 것 같네요!!! 👍
감사합니다 !!

wuzoo

정말 고생하셨습니다 ~! 진짜 실력이 일취월장 하는 모습이 너무 훤히 보여요 !

제가 다 기쁘네용! 반영해주실 것만 반영해주시면 될것 같습니다.

wuzoo

고생하셨습니다 ㅎㅎ 마지막 반영만 !!!!

wuzoo · 2024-07-08T03:09:41Z

src/common/component/Input/Input.style.ts

  const style = {
    outline: {
-      boxShadow: ` 0px 0px 0px 1px ${theme.colors.gray_400}`,
+      boxShadow: ` 0px 0px 0px 1px ${borderColor}`,


요거 inset 추가해주어야 하지 않나요 ?

inset 안하면 원래의 경계선에 shadow가 생기고 inset을 설정하면 경계선 안에 shadow가 생기더라구요!
underline 상태도 inset을 하지 않았기 때문에 outline도 inset설정하지 않았습니당

outline의 취지가 안에 border처럼 선이 생길려고 하는 의도가 맞지 않나요 ?? 지금처럼 작성해주면 말 그대로 box에 흐릿한 그림자가 생기는 것이라input의 의도상 inset이 맞지 않나 싶네요 !

그리고 추가적인 의견인데 outline 보다는 default 어떤가요 ? 저희 서비스 특징 상 input의 기본적인 형상이 outline이기 때문에 의견 한 번 내봅니다 !

그리고 현재 boxShadow에 할당한 스트링에 맨 앞 공백 다 제거해주시면 감사하겠습니다 !

wuzoo · 2024-07-08T03:15:52Z

src/common/component/Input/Input.tsx

+const Input = ({
+  variant,
+  size = 'medium',
+  label,
+  LeftIcon,
+  isError = false,
+  isNotice = false,
+  supportingText,
+  ...props
+}: InputProps) => {


특히 Input 컴포넌트는 forwardRef를 통해서 외부에서 ref를 전달받을 수 있도록 구현하는 것이 정말 좋아요 ! 왜냐하면 input이란 요소 자체가 ref를 통해 focus나 value 관련 기능을 많이 필요로 하기 때문입니다.

forwardRef는 말 그대로 부모 컴포넌트에게 ref를 전달할 수 있게끔 해주는 녀석이에요. Input은 순수 html 태그로 이루어진 jsx 요소가 아니기 때문에 원래는 ref를 전달하지 못하지만 다음과 같이 forwardRef를 사용하여 ref를 전달할 수 있어요.

const Input = ({ ... }: InputProps, ref: ForwardRef<HTMLInputElement>) => { return <input ref={ref} />; } export default forwardRef(Input)

이제 해당 Input 컴포넌트를 사용할 때도, 외부에서 ref를 prop으로 전달할 수 있게 되면서 하나의 DOM 노드로서 기능할 수 있도록 해준답니다 :)

넵! 알려주셔서 감사합니다~~!!
수정하였습니다!! 👍

wuzoo · 2024-07-08T03:18:15Z

src/common/component/SupportingText/SupportingText.tsx

+  isError?: boolean; //red
+  isNotice?: boolean; //blue


주석을 사용하실거라면 저렇게 red, blue 보다는 해당 prop이 어떤 용도로 쓰이는지를 적어주시는게 더 나을 것 같아요

넵! 이름에서 용도가 드러난다고 판단해서 주석 삭제하였습니당

wuzoo · 2024-07-08T03:19:51Z

src/common/component/SupportingText/SupportingText.style.ts

+export const textStyle = ({ isError, isNotice }: { isError: boolean; isNotice: boolean }) => {
+  const textColor = isError ? theme.colors.red : isNotice ? theme.colors.blue_900 : theme.colors.gray_400;
+
+  const style: CSSObject = { color: textColor, wordBreak: 'break-word', ...theme.text.body04 };
+
+  return style;
+};


반환 객체의 타입을 따로 지정하지 않아도 동작하지 않나요 ?

CSSObject를 반환하는게 아니라 그냥 style을 css 함수로 작성하면 될 것 같습니다.

const style = css({ ... });

타입스크립트 css-in-js에서 color나 다른 속성들은 타입을 문자열로 받아도 유연하게 대처하는데 제가 사용한 wordBreak 속성은 css 표준에 정의된 특정값 (CSSObject 형태) 로 받아야 에러가 나지 않더라구요!
그래서 문자열로 보냈을 때 에러를해결하기 위해 CSSObject 키워드를 붙여줬습니다. !

wuzoo

고생하셨습니다 ! 마지막 반영... !

wuzoo · 2024-07-08T06:23:03Z

src/common/component/Input/Input.style.ts

  const style = {
    outline: {
-      boxShadow: ` 0px 0px 0px 1px ${theme.colors.gray_400}`,
+      boxShadow: ` 0px 0px 0px 1px ${borderColor}`,


outline의 취지가 안에 border처럼 선이 생길려고 하는 의도가 맞지 않나요 ?? 지금처럼 작성해주면 말 그대로 box에 흐릿한 그림자가 생기는 것이라input의 의도상 inset이 맞지 않나 싶네요 !

그리고 추가적인 의견인데 outline 보다는 default 어떤가요 ? 저희 서비스 특징 상 input의 기본적인 형상이 outline이기 때문에 의견 한 번 내봅니다 !

wuzoo · 2024-07-08T06:23:39Z

src/common/component/Input/Input.style.ts

  const style = {
    outline: {
-      boxShadow: ` 0px 0px 0px 1px ${theme.colors.gray_400}`,
+      boxShadow: ` 0px 0px 0px 1px ${borderColor}`,


그리고 현재 boxShadow에 할당한 스트링에 맨 앞 공백 다 제거해주시면 감사하겠습니다 !

wuzoo · 2024-07-08T06:29:16Z

src/common/component/Input/Input.tsx

+    <article css={containerStyle}>
      {label && <Label id={label}>{label}</Label>}
-      <div css={[inputWarpperStyle, variantStyle(variant), sizeStyle(size)]}>
-        {LeftIcon && <LeftIcon />}
-        <input css={[inputStyle]} {...props} />
+      <div css={inputSupportStyle}>
+        <div css={[warpperStyle, variantStyle({ variant, isError }), sizeStyle(size)]}>
+          {LeftIcon && <LeftIcon />}
+          <input ref={ref} css={inputStyle} {...props} />
+        </div>
+        {supportingText && (
+          <SupportingText isError={isError} isNotice={isNotice}>
+            {supportingText}
+          </SupportingText>
+        )}
      </div>
    </article>
  );
 };


Label을 현재 inputSupportingStyle을 부여한 div안으로 넣어줄 수 있지 않나요 ? 그렇다면 최상위 컨테이너 요소인 article을 하나 더 적어줄 필요가 없을 것 같습니다.

<article> <Label> <div css={wrapperStyle}> {<LeftIcon />} <input /> </div> <SupportingText> </article>

구조로도 충분히 구현할 수 있을 것 같아요

namdaeun

보운이 넘 고생하셨습니다 !! 코멘트만 해결해주시면 될 것 같아용

namdaeun · 2024-07-08T06:39:24Z

src/common/component/Input/Input.tsx

 }

-const Input = ({ variant, size = 'medium', label, LeftIcon, ...props }: InputProps) => {
+const Input = ({
+  variant,


스타일 적용한 거 보니까 Required로 variant 값을 가져왔던데, 그렇다면 variant 값을 옵셔널로 주는 방향으로 코드를 작성하는 게 맞는 것 같습니다 !

namdaeun · 2024-07-08T06:42:23Z

src/common/component/SupportingText/SupportingText.style.ts

+import { theme } from '@/common/style/theme/theme';
+
+export const textStyle = ({ isError, isNotice }: { isError: boolean; isNotice: boolean }) => {
+  const textColor = isError ? theme.colors.red : isNotice ? theme.colors.blue_900 : theme.colors.gray_400;


야무지다 !!!

Jeongbowoon added 5 commits July 7, 2024 20:35

#32 feat: input error border 처리

0cac093

#32 feat: support text 컴포넌트 생성 및 세팅

465f73a

#32 feat:input컴포넌트에 supportingText 적용

dae1ec7

#32 feat: supporting text 구현

5dc7127

#32 fix:build에러 수정

c1ea374

Bowoon1216 added ✨Feature 🤍보운 labels Jul 7, 2024

Bowoon1216 requested review from rtttr1, namdaeun, cindy-chaewon and wuzoo July 7, 2024 15:16

Bowoon1216 self-assigned this Jul 7, 2024

wuzoo reviewed Jul 7, 2024

View reviewed changes

Jeongbowoon added 3 commits July 8, 2024 10:15

#32 fix: 머지 충돌 해결

e0c0c76

#32 refactor: style 지정 style 파일 내에서

40ec4af

#32 refactor: input text style 지정

5453d32

wuzoo reviewed Jul 8, 2024

View reviewed changes

#32 feat: input ref 추가

fe286bd

wuzoo reviewed Jul 8, 2024

View reviewed changes

namdaeun reviewed Jul 8, 2024

View reviewed changes

Jeongbowoon added 2 commits July 8, 2024 16:24

#32 refactor: style 함수 수정 및 코드리뷰반영

f1c01fd

#32 refactor: label, supporting text 위치수정

c0cbac3

wuzoo merged commit 7bc7c29 into develop Jul 8, 2024
1 check failed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] input supportingText 구현 #41

[Feat] input supportingText 구현 #41

Bowoon1216 commented Jul 7, 2024 •

edited

Loading

wuzoo Jul 7, 2024

Bowoon1216 Jul 8, 2024

wuzoo Jul 7, 2024

Bowoon1216 Jul 8, 2024

wuzoo Jul 7, 2024

Bowoon1216 Jul 8, 2024

wuzoo left a comment

wuzoo left a comment

wuzoo Jul 8, 2024

Bowoon1216 Jul 8, 2024

wuzoo Jul 8, 2024

wuzoo Jul 8, 2024

wuzoo Jul 8, 2024

Bowoon1216 Jul 8, 2024

wuzoo Jul 8, 2024

Bowoon1216 Jul 8, 2024

wuzoo Jul 8, 2024

Bowoon1216 Jul 8, 2024

wuzoo left a comment

wuzoo Jul 8, 2024

wuzoo Jul 8, 2024

wuzoo Jul 8, 2024

namdaeun left a comment

namdaeun Jul 8, 2024

namdaeun Jul 8, 2024

		const textColor = isError ? theme.colors.red : isNotice ? theme.colors.blue_900 : theme.colors.gray_400;
		return <p css={textStyle(textColor)}>{text}</p>;

[Feat] input supportingText 구현 #41

[Feat] input supportingText 구현 #41

Conversation

Bowoon1216 commented Jul 7, 2024 • edited Loading

해당 이슈 번호

체크리스트

📌 내가 알게 된 부분

📌사용법

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wuzoo left a comment

Choose a reason for hiding this comment

wuzoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wuzoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

namdaeun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Bowoon1216 commented Jul 7, 2024 •

edited

Loading