[유데미x스나이퍼팩토리] 10주 완성 프로젝트 15일차 - Component: AppBar 개발

• 일시 : 23.07.29 토 ~ 07.31 월
• 주제 : 통증관리 시스템 - 분류 3.포인티 디자인 시스템 라이브러리 개발

오늘의 목표

---

• Component 페이지에서 AppBar를 컴포넌트화 한다.

진행 사항

---

✅: 완료, 🌀: 진행중, 🆕: 대기

✅ (개인) Component: Thumbnails 개발

• 팀원 리뷰 이후 merge완료

✅ (개인) Component: Banner 개발

• 팀원 리뷰 이후 merge완료

🌀 (개인) Component: AppBar 개발

코드 보기 (추후 수정 가능성 있음)

• 파일구조

  • Components
    • AppBar
      ├─ index.tsx
      ├─ styles.ts
      └─ type.ts

• index.tsx

import { IconStyles } from '@lib/foundation';
import * as St from './styles';
import { IAppBar } from './type';

const AppBar = ({ pagename = '페이지네임', size = 'large', type }: IAppBar) => {
  return (
    <St.AppBarContainer size={size}>
      {
        // full (페이지네임 + X 아이콘)
        size === 'full' ? (
          <St.FullPopupLayout>
            <div>{pagename}</div>
            <St.IconBoxNomargin>
              <IconStyles name={'delete'} />
            </St.IconBoxNomargin>
          </St.FullPopupLayout>
        ) : (
          // large or medium (<뒤로가기아이콘 + 페이지네임 + 아이콘||텍스트)
          <St.DefalutLayout>
            <St.FixedItems>
              <St.IconBox>
                <IconStyles name={`back`} />
              </St.IconBox>
              <div>{pagename}</div>
            </St.FixedItems>

            {type?.icon && (
              <St.IconItems>
                {type?.icon.icon_L && (
                  <St.IconBox>
                    <IconStyles name={`${type.icon?.icon_L}`} />
                  </St.IconBox>
                )}
                {type.icon.icon_R && (
                  <St.IconBoxNomargin>
                    <IconStyles name={`${type.icon?.icon_R}`} />
                  </St.IconBoxNomargin>
                )}
              </St.IconItems>
            )}

            {type?.text && (
              <St.IconItems>
                {type?.text.text_L && <St.TextBox>{type?.text?.text_L}</St.TextBox>}
                {type?.text.text_R && <St.TextBox>{type?.text?.text_R}</St.TextBox>}
              </St.IconItems>
            )}

            {type?.count && (
              <St.TextBox>
                {type?.count.text}({type?.count.count})
              </St.TextBox>
            )}
          </St.DefalutLayout>
        )
      }
    </St.AppBarContainer>
  );
};

export default AppBar;

• styles.ts

import { styled } from 'styled-components';
import { IAppBar } from './type';

export const AppBarContainer = styled.div<IAppBar>`
  width: ${(props) => (props.size === 'medium' ? '650px' : '1024px')};
  height: ${(props) => (props.size === 'full' ? '56px' : '48px')};
  box-sizing: border-box;
  background-color: white;
  //임시스타일
  margin-bottom: 10px;
`;

// 이하 생략

• type.ts

import { IconName } from '@lib/foundation/Icon/type';

export interface IAppBar {
  size?: 'large' | 'medium' | 'full';
  type?: {
    icon?: { icon_L?: IconName; icon_R?: IconName };
    text?: { text_L?: string; text_R?: string };
    count?: { text?: string; count?: number };
  };
  pagename?: string;
}

적용코드

적용화면

회고

---

더 똑똑한 타입 설정

길잡이

---

---

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.