컴포넌트 마이그레이션 현황

아래는 common 으로 관리되고 있던 사항

개요

PDS단계로 올릴만한 컴포넌트가 있는지 알아보기 위해 전체적인 common 컴포넌트의 진행 현황을 파악한다.

완성도가 높은 아이들을 파란색으로 표시한다.

전체적으로 다크모드 또는 다른 배경색이 있을 경우를 고려하여 논의가 필요하다. → Button이나 Input등의 내부에 있는 흰색 배경을 유지하는 부분과 투명으로 하는 것에 대해 논의 필요.

모바일 웹 플랫폼

Button
- 커스텀 컬러부분 수정 필요
CheckBox
- ic_CheckboxIndeterminate관련이 들어가 있지 않음
- 새로운 컨벤션에 맞춰 코드 수정 필요
- 글씨체 굵기 - 스트링 키값 쓰는 부분에서 상충되는 부분이 있어 검토 필요
DropdownInput
- 민우님이 사용하시다가 오류를 마주해서, select를 만드실거라고 들었는데 해당 부분 확인 필요
- 배경색에 관한 논의 필요
Form
- 배경색에 관한 논의 필요
I18nComponent
Icon
- 제플린 반영 완료
ImageCarousel
- 제플린 반영 완료
- 코드 형식 수정 필요
Modal
- 전체 수정 및 업데이트 필요
ModalDialog
- 전체 수정 및 업데이트 필요
Popup
- 완성도는 있으나 레이어 구조 적용시 수정의 가능성 있음
RatioImage
- 제플린 반영 완료
ScrollContext
- 사용하고 있는 곳이 별로 없어서 확인 필요
ScrollView
- 사용하고 있는 곳이 별로 없어서 확인 필요
SmartLink
- 완성도는 있으나 기능에 대한 정리 필요
TextFieldButton
- 제플린 반영 완료

명시되어 있지만 쓰이고 있지 않은 요소
- fontFamilyRoboto
혼란의 여지가 있는 요소
- colors와 textColors가 혼용되어 쓰이고 있다 → 컬러시스템이 도입되면 리뉴얼 되면서 혼동이 없어지지 않을까 생각
- marginSideNormal - 한군데에서만 쓰이고 있다.
고민중인 사항
- 각각의 요소들에 대한 그룹핑
- 이름 앞에 ‘text’이런식으로 프리픽스를 붙여줘야하는지
- shadow 추가 여부
- radius 추가 여부
- spacing 추가 여부

theme 현황

CODE

import { DefaultTheme } from 'styled-components';

export const colors = {
  blue700: '#0040bb',
  blue500: '#455eef',
  blue300: '#838bff',
  green700: '#00b884',
  green500: '#1eebb4',
  green300: '#6effd1',
  greenBadge: '#1dd4ca',
  red500: '#ff463a',
  grey900: '#1e1e20',
  grey500: '#68686b',
  grey400: '#aaaab1',
  grey100: '#e8eaed',
  grey50: '#f5f6f8',
  white: 'white',
  black: 'black'
};

export const textColors = {
  textPrimary: '#1e1e20',
  textSecondary: '#68686b',
  textDisable: '#aaaab1'
};

export const fontSize = {
  fontSizeH1: '32px',
  fontSizeH2: '24px',
  fontSizeSubtitle: '18px',
  fontSizeBody1: '16px',
  fontSizeBody2: '14px',
  fontSizeCaption1: '12px',
  fontSizeCaption2: '10px'
};

export const fontLineHeight = {
  fontLineHeight: '1.5em'
};

export const fontFamily = {
  fontFamilyNoto: '"Noto Sans CJK KR"',
  fontFamilyRoboto: '"Roboto"'
};

export const fontWeight = {
  fontWeightNormal: 'normal',
  fontWeightBold: 'bold'
};

export const margins = {
  marginSideNormal: '0 24px'
};

const theme: DefaultTheme = {
  ...colors,
  ...textColors,
  ...fontSize,
  ...fontLineHeight,
  ...fontFamily,
  ...fontWeight,
  ...margins
};

export default theme;

웹 플랫폼

Button
- 메인 버튼(라운드) - 제플린 반영 완료
CheckBox
- ic_CheckboxIndeterminate관련이 들어가 있지 않음
- 새로운 컨벤션에 맞춰 코드 수정 필요
- 글씨체 굵기 - 스트링 키값 쓰는 부분에서 상충되는 부분이 있어 검토 필요
DataTable
- common에 있는 datatable외에 각자가 사용하는 테이블 부분이 더 많아서 common의 최신화가 필요
- 시각적 보정 필요
  - THeader부분에 1/14에서 앞에 오는 것 볼드 처리
  - 목록 개수 드롭다운 길이
  - Header row와 Row의 그리드 맞춰주기
  - Header row와 Row의 텍스트 크기 점검 필요
  - Header row와 Row 사이의 구분선 길이 조절 가능한지 살펴보기
  - 체크박스 모양이나 컬러 바꿀 수 있는지 살펴보기
  - rowHeightdp 사이즈 제한 추가 필요
  - THeader와 table 사이 마진 조정 필요
  - …등등 다수
- 새로운 컨벤션에 맞춰 코드 수정 필요
Dropdown
- nomal부분만 구현되어있음
EditApplyInput
- 제플린 반영 완료
- 다른 form과 코드 단에서 구조를 맞출건지 점검 필요
FloatingActionButton
- 제플린 반영 완료
Form
- Texfield를 가져와서 활용하고 있음
- form끼리 코드 구조 맞출지 점검 필요
- InputField와 inputFieldButton으로 나뉘어 있음
I18nComponent
Icon
- 제플린 반영 완료
Modal
- 전체 수정 및 업데이트 필요
Overlay
- 제플린 반영 되어있으나, 레이아웃 정리 등에 따라 변경 필요
Popup
- 완성도는 있으나 쓰이는 곳이 많이 없어 점검 필요
SmartLink
- 완성도는 있으나 기능에 대한 정리 필요
TextFieldButton
- 점검 필요

theme

CODE

import { DefaultTheme } from 'styled-components';

export const colors = {
  blue700: '#0040bb',
  blue500: '#455eef',
  blue300: '#838bff',
  green700: '#00b884',
  green500: '#1eebb4',
  green300: '#6effd1',
  greenBadge: '#1dd4ca',
  greenDownload: '#32d64c',
  red500: '#ff463a',
  grey900: '#1e1e20',
  grey500: '#68686b',
  grey400: '#aaaab1',
  grey100: '#e8eaed',
  grey50: '#f5f6f8',
  white: 'white',
  black: 'black'
};

export const textColors = {
  textPrimary: '#1e1e20',
  textSecondary: '#68686b',
  textDisable: '#aaaab1'
};

export const fontSize = {
  displayHeading: '2.5rem',
  heading: '1.5rem',
  leadParagraph: '1.25rem',
  subtitle: '1.125rem',
  body1: '1rem',
  body2: '0.875rem',
  caption1: '0.75rem',
  caption2: '0.625rem'
};

export const fontLineHeight = {
  fontLineHeight: '1.5em'
};

export const fontFamily = {
  fontFamilyNoto: '"Noto Sans CJK KR"',
  fontFamilyRoboto: '"Roboto"'
};

export const fontWeight = {
  fontWeightNormal: 'normal',
  fontWeightBold: 'bold'
};

export const margins = {
  marginSideNormal: '0 24px'
};

const theme: DefaultTheme = {
  ...colors,
  ...textColors,
  ...fontSize,
  ...fontLineHeight,
  ...fontFamily,
  ...fontWeight,
  ...margins
};

export default theme;

명시되어 있지만 쓰이고 있지 않은 요소
- marginSideNormal - UM에서 그대로 넘어온 것으로 예상
- fontFamilyRoboto
혼란의 여지가 있는 요소
- colors와 textColors가 혼용되어 쓰이고 있다 → 컬러시스템이 도입되면 리뉴얼 되면서 혼동이 없어지지 않을까 생각
고민중인 사항
- 각각의 요소들에 대한 그룹핑
- 이름 앞에 ‘text’이런식으로 프리픽스를 붙여줘야하는지
- shadow 추가 여부
- radius 추가 여부
- spacing 추가 여부

레이블 없음

문서 작성 정보

소유자 / 관리자	안은수
변경 이력	2021/09/03 : 작성 위치 이동 - 박윤규 2021/08/26: 다크모드에 대한 고려에 대한 내용 개요에 추가 - 안은수 2021/08/24: 초안 작성 - 안은수