[온보딩페이지] STEP01 이름 입력 컴포넌트 뷰 구현 & 나머지 단계 타이틀만 구현

[ExceptAnyone]

이슈 넘버

• close [온보딩페이지] step1 선물방 생성_이름 입력 #41

구현 사항

• STEP01 이름 입력 컴포넌트 뷰 구현
• & 나머지 단계 타이틀만 구현
• 추후 useFunnel 훅을 위한 상수 작성

Need Review

• ~ 부분 이렇게 구현했어요, 피드백 부탁해요!

온보딩 페이지에서 타이틀 부분은 공통으로 쓰이는 폰트 크기와 색깔이 있어서 따로 빼두었습니다.

import styled from 'styled-components';
import theme from '../../style/theme';

export const TitleWrapper = styled.div`
  margin-left: 2rem;
  margin-right: 2rem;
`;

export const Title = styled.p`
  color: ${theme.colors.B_01};
  ${theme.fonts.heading_01};
`;

export const SubTitle = styled.p`
  color: ${theme.colors.G_10};
  ${theme.fonts.caption_02};
`;

그리고 아래와 같은 방식으로 구현하였습니다.

import * as S from './Onboarding.style';

const SetTournamentSchedule = () => {
  return (
    <S.TitleWrapper>
      <S.Title>선물 토너먼트</S.Title>
      <S.Title>시작 일정을 설정해주세요</S.Title>
      <S.SubTitle>토너먼트 시작 전까지 선물을 등록할 수 있어요.</S.SubTitle>
    </S.TitleWrapper>
  );
};

export default SetTournamentSchedule;

다만, STEP01은 인풋창까지 구현하였습니다.

현재 크롬 업데이트를 하지 않으면 한글을 입력했을 시 10글자 제한일 경우에 11글자까지 입력이 된다고 합니다. 크롬을 업데이트하면 해결이 된다고 하지만, 정규표현식으로 제한하여 구현하였습니다.

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = e.target.value;
    const unicodeChars = [...inputValue].filter((char) => /[\ud800-\udfff]/.test(char)).length;

    inputValue.length + unicodeChars <= 10 ? setText(inputValue) : e.preventDefault();
  };

또한 placeholder 의 색상과 폰트를 변경하는 것도 구버전의 크롬 등에선 작동이 안된다고 하여 추가 로직 구현하였습니다.

input::placeholder {
    color: ${theme.colors.G_07};
    ${theme.fonts.body_06}
  }
  &::-webkit-input-placeholder {
    color: ${theme.colors.G_07};
    ${theme.fonts.body_06}
  }

  &:-ms-input-placeholder {
    color: ${theme.colors.G_07};
    ${theme.fonts.body_06}
  }

또한 추후 useFunnel 훅을 위한 상수처리 할 값이 필요해서 core 폴더 안에 작성해놓았습니다.

export const ONBOARDING_FORM_STEP = [
  'NAME',
  'THUMBNAIL',
  'PRESENT',
  'TOURNAMENT_SCHEDULE_REGISTRATION',
  'TOURNAMENT_PROCEEDING',
] as const;

📸 스크린샷

2024-01-09.3.59.32.mov

Reference

지민이를 위한 인풋값에 따른 색 변경 로직

<Input
            type='text'
            onChange={onChange}
            maxLength={10}
            placeholder='이름을 입력해주세요'
            hasContent={text.length > 0}
            maxLengthReached={text.length === 10}
          />

const Input = styled.input<{ hasContent: boolean; maxLengthReached: boolean }>`
  width: 100%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.8rem;
  outline: none;
  border-bottom: 0.1rem solid ${theme.colors.G_02};

  ${(props) =>
    props.hasContent &&
    css`
      border-bottom: 0.1rem solid ${theme.colors.P_06};
    `}

  ${(props) =>
    props.maxLengthReached &&
    css`
      border-bottom: 0.1rem solid ${theme.colors.G_02};
    `}

    input::placeholder {
    color: ${theme.colors.G_07};
    ${theme.fonts.body_06}
  }

  &::-webkit-input-placeholder {
    color: ${theme.colors.G_07};
    ${theme.fonts.body_06}
  }

  &:-ms-input-placeholder {
    color: ${theme.colors.G_07};
    ${theme.fonts.body_06}
  }
`;

[github-actions]

PR Preview Action v1.4.6
🚀 Deployed preview to https://SWEET-DEVELOPERS.github.io/sweet-client/pr-preview/pr-50/
on branch gh-pages at 2024-01-09 12:06 UTC

[urjimyu]

공통으로 분리해주신 거랑 텍스트필드 코드 너무 감사해요!! 코멘트 남긴 자잘한 부분만 수정하면 될 것 같습니다! 고생하셨습니다!!!🙌

[urjimyu]

구조 분해 할당을 사용하면 subTitleProps를 통해서 가져올 필요 없이 바로 변수 불러올 수 있을 것 같습니다~!
SubTitle = ({subTitle}: SubTitleProps)로 불러오면 <S.SubTitle>{subTitle}</S.SubTitle>;로 쓸 수 있을 것 같습니다!

[urjimyu]

이거 스니펫 익스텐션 써서 scpt 써서 리팩토링 하면 theme import 필요 없어질 것 같아요!

[ExceptAnyone]

현재 계속 자동완성이 안되는 이슈로... 나중에 바꾸겠슴다 ㅎㅎ

[urjimyu]

여기 스타일 코드들 개행 해주면 나중에 찾아볼 때 더 편리할 것 같아요~!
분류기준에 참고하기 좋은 레퍼런스
자잘하게 쪼개면 오히려 번거로울 수도 있긴 해서 참고로 보고 정안님이 편리한 정도로만 구분하면 좋을 것 같아요!

[urjimyu]

'토'가 누락된 것 같습니다~!

[ExceptAnyone]

수정하였습니다!!

[imeureka]

고생하셨습니다 :)

[imeureka]

이거 저희 theme에서 mixin inlineFlexBox 사용해보면 될 것 같아용!

[ExceptAnyone]

습관이 참 무섭네요 ㅠ ㅋㅋㅋ mixin 바로 적용하겠슴다

[imeureka]

공통 컴포넌트 너무 좋아요! 고마워요!૮⑅ᐡ•ﻌ•ᐡა

[imeureka]

theme import 말고
${({ theme }) => theme.fonts.Title};
이용해주시면 좋을 것 같아요! 왜냐묜 theme도 글로벌처럼 쓰이니까 import 하면 모호해질 것 같아요:)

[ExceptAnyone]

지금 자동완성이 안되는 이슈로... ㅎㅎ 추후 고치겠슴다!!

[imeureka]

mixin flexbox! 요기 활용할 수 있을 것 같아요!

[imeureka]

오옹! 중복되는 부분으로 공통 스타일을 뺀거군요! 너무 좋아요! 다만 걱정되는 부분은 title이 그저 span의 역할인거같은데 title이 적용돼서 가독성과 일관성이 떨어져 보이지 않을까? 하는 고민이 있습니다!
아니면 <br/> 이용해보는 것도 다른 방법일 것 같습니다!

[ExceptAnyone]

엇 무엇을 이용하면 된다는 말씀이실까용??

[hoeun0723]

음 이 부분이 고민이 많이 되네요. 이걸 공통으로 뺐을때 과연 이게 최선일지는 ㅠㅠ 하지만 기능 구현에 우선순위를 두고 추후 리펙토리이 하는 방법도 있을 거 같아요

[hoeun0723]

음 이 부분이 고민이 많이 되네요. 이걸 공통으로 뺐을때 과연 이게 최선일지는 ㅠㅠ 하지만 기능 구현에 우선순위를 두고 추후 리펙토리이 하는 방법도 있을 거 같아요