✨공통 컴포넌트 구현 #15

Legitgoons · 2024-04-25T06:23:22Z

작업 이유

작업 속도 및 유지보수성 향상을 위해 공통 컴포넌트 구현

작업 사항

1️⃣ 컴포넌트 구현

BasicButton / ActiveButton

복잡성 제어를 고려해 isDisabled 속성에 따라 별개의 컴포넌트로 구현
interface는 type.ts에서 상속받아 사용
선언된 class들을 prop로 입력하도록 설정

//BasicButton.tsx
export type BasicStyle = 'defalut' | 'confirm-cancle' | 'bsm-cancle' | 'bsm-option';
interface BasicButtonProps extends ButtonProps {
  styleClass: BasicStyle;
}
<button onClick={onClick} className={styleClass}>

Modal

index.html에 overlays div태그를 생성

// index.html
  <body>
    <div id="root"></div>
    <div id="overlays"></div>
  </body>

ModalOverlay내에 createPortal을 사용해 Modal이 상위요소의 위치에 영향을 받지 않도록
BottomSheetModal의 경우를 고려해, styleClass prop에 따라 다른 classname이 설정되도록 함

type ModalOverlayClass = 'bottom-sheet' | 'modal';

export const ModalOverlay = ({ styleClass, children, onClose, }: ModalOverlayProps) => {
  return (
    <>
      {createPortal(<Backdrop onClick={onClose} />, portalElement)}
      {createPortal(
        <figure className={styleClass}>{children}</figure>,
        portalElement,
//...

이를 다른 Modal들에서 사용

// ConfirmModal.tsx
<ModalOverlay styleClass='modal' onClose={onClose}>
  <div className='confirm-modal'>
// ...

BottomSheetModal

{options.map((option, index) => (
  <Fragment key={index}>
    <BasicButton onClick={option.onClick} styleClass='bsm-option'>
      {option.label}
    </BasicButton>
    {index < options.length - 1 && <hr className='option-divider' />}
    // 마지막 option을 제외한 option에만 hr태그 생성
  </Fragment>
))}

.optionDivider {
  height: 1px; // 0.5px 사용시 이슈 있음
}

PageHeader

{page} 중앙 정렬을 위해 right padding 44px 사용

2️⃣ vite-plugin-svgr 사용

svg를 컴포넌트로 사용하기 위해 vite-plugin-svgr 설치 및 설정
아래와 같이 사용 시 svg를 컴포넌트로 사용 가능

import {svgComponent} from '{경로}/{svgName}.svg?react';

3️⃣ 기타

reset.scss를 사용해 style sheet 초기화
icon을 담기 위해 shared/icon 폴더 생성
- logo를 담당하던 기존의 icon.svg는 혼동의 여지가 있기에 logo.svg로 이름 변경
네이밍 룰에 따라 폴더 이름 수정
- shared/ui/FNB -> fnb로 변경
fonts.scss 파일 font들에 사이즈를 주석으로 작성

리뷰어가 중점적으로 확인해야 하는 부분

컴포넌트가 적절하게 구현되었는지
컴포넌트의 이름이 적절한지
vite-plugin-svgr를 사용해 svg를 컴포넌트로 사용하는 것을 인지하였는지
아래의 이슈를 인지하였는지

발견한 이슈

Design팀에서 BottomModal의 구분선을 0.5px로 설정, 하지만 chrome에서 0.5px가 정상적으로 출력 되지 않음

* feat: 반응형 레이아웃을 위한 mixin responsive-dimensions 구현 * feat: 공용 style의 쉬운 사용을 위해 _index.scss 생성

- husky install 수정 - CI 파이프라인 스크립트 및 이미지 수정

modal은 z-index 10, backdrop은 z-index 5로 구현

{page} 중앙 정렬을 위해 우측에 dummy div 태그 사용

BangDori

FSD Architecture에서는 Public API를 이용하여 필요한 부분만을 외부로 추출하고, 내부 정보는 숨기는 걸로 알고있습니다.

근데 현재, shared/ui 부분에 Public API 적용 부분이 빠져있는 것 같아서 Request Changes 하였습니다.

참고: https://feature-sliced.design/docs/reference/public-api

src/shared/ui/profile/Profile.tsx

src/shared/ui/modal/ConfirmReportModal.tsx

src/shared/ui/button/BasicButton.tsx

src/shared/ui/button/BasicButton.scss

따로 style class가 없는 button을 고려했기에 class 내용을 작성하지 않았습니다. styleClass prop를 optinal하게 두는 방안도 고려했습니다. 하지만 어떤 styleClass를 사용하는지 명시적으로 작성하는 것이 실수를 줄이기에 더 유리하다고 생각합니다.

명확한 역할을 위해 global.scss -> reset.scss로 수정

Modal이 상위요소의 위치에 따라 영향을 받지 않도록 createPortal을 사용한 ModalOverlay 컴포넌트를 구현했습니다.

…/CollaBu/pennyway-client-webview into feature/PW-251-shared-components

BangDori

아래 이미지처럼 ui 폴더 자체에 대한 public api도 적용되어야 할 것 같아요!

참고: https://github.com/noveogroup-amorgunov/nukeapp/blob/main/src/shared/ui/index.ts

src/shared/ui/profile/Profile.tsx

src/shared/ui/modal/ModalOverlay.tsx

src/shared/ui/button/index.ts

src/shared/styles/reset.scss

BangDori

Profile 컴포넌트에서 제가 말한 의도가 제대로 전달되지 못한 거 같아요!

죄송해요. 마지막으로 확인 부탁드릴게요.

src/shared/ui/profile/ProfileImage.tsx

BangDori

공통 컴포넌트에 대한 내용이 생각보다 너무 많았네요..

의찬님 코드 리뷰하면서 PR을 되도록 이면 간략하게, 하나의 기능에 집중해서 하는 것이 얼마나 중요한지에 대해 깨달을 수 있었던 시간이였던 것 같습니다 ㅎㅎ

저어어엉ㅇ~~~말 고생많으셨습니다!! 🔥🔥🔥🔥🔥

Legitgoons and others added 28 commits April 24, 2024 17:26

⚙️반응형 사이즈 설정 (#14)

4e07edf

* feat: 반응형 레이아웃을 위한 mixin responsive-dimensions 구현 * feat: 공용 style의 쉬운 사용을 위해 _index.scss 생성

⚙️ CI 파이프라인 및 husky 스크립트 수정 (#13)

9cd1880

- husky install 수정 - CI 파이프라인 스크립트 및 이미지 수정

fix: FNB 폴더 네이밍 룰에 따라 fnb로 수정

539390d

feat: fonts의 사이즈를 주석으로 작성

c62fece

feat: BaseButtonProps와 이를 상속한 ActiveButtonProps 작성

ef967c7

feat: ConfirmButton, ConfirmCancleButton 구현

254ffb8

feat: FollowButtonLg, FollowButtonSm 구현

617e9c1

feat: Profile 구현

e45e2b2

feat: shared/ui/button/buttonType -> types로 이름 변경

39f1dfa

feat: svg를 컴포넌트로 사용하기 위해 vite-plugin-svgr 설치

e71932a

feat: '*.svg' 타입 선언을 위해 svg.d.ts파일 생성

c528013

feat: vite-plugin-svgr를 tsconfig.json과 vite.config.ts에 추가

95cdbf1

feat: back-icon.svg 파일 추가

0a33c54

feat: 기존의 icon.svg은 logo.svg로 이름 변경

2ecf1ec

feat: Normalize로 기본 stylesheet reset

5fae6f6

fix: fnb 폴더명 변경 적용

73fd764

fix: confirmButtonActive 매개변수 수정

9abd5f0

feat: Backdrop 컴포넌트 구현

6e498ba

modal은 z-index 10, backdrop은 z-index 5로 구현

feat: ConfirmModal 구현

c64cd6a

feat: BottomModal 구현

58183c6

feat: modal/types.ts 구현

2b5ee7e

feat: PageHeader 컴포넌트 구현

2bfdf21

{page} 중앙 정렬을 위해 우측에 dummy div 태그 사용

feat: Profile.scss 내 class 정렬

a7b1d4b

feat: BottomSheetModal 이름 변경 및 bottom-sheet 폴더로 이동

b8d96b5

feat: ConfirmModal description -> content로 수정

c8ad855

feat: ConfirmModal mixin 생성, confirmReportModal 분기처리하도록 구현

797fedc

feat: 변경 가능성 고려 ConfirmReportModal 구현

93a50e8

feat: PageHeader 사용하지 않는 태그 삭제

4c6e1a5

Legitgoons self-assigned this Apr 25, 2024

fix: 이름 변경 후 남아있는 FNB 폴더 삭제

f56ac10

Legitgoons added 2 commits April 26, 2024 20:50

feat: BottomSheetModal 컴포넌트 내 버튼이 BasicButton 사용하도록 수정

d01f009

feat: naming rule에 따라 style class들을 케밥케이스로 수정

74aa30c

BangDori requested changes Apr 26, 2024

View reviewed changes

Legitgoons added 16 commits April 28, 2024 01:02

feat: ProfileImage 없을 경우 기본 이미지 출력하도록 구현

a871afb

feat: 사용자의 Union Type 인지를 돕기 위해 ActiveStyle, BasicStyle Union Type 분리

3485c92

Merge branch 'main' into feature/PW-251-shared-components

053f65b

feat: public api를 통해 export하기 위해 화살표 함수 컴포넌트로 수정

370b9c5

feat: public api를 사용해 export 하도록 각 ui폴더에 index.ts 구현

8c00c53

feat: reset.scss 코드 추가 및 이름 수정

157443b

명확한 역할을 위해 global.scss -> reset.scss로 수정

feat: reset.scss를 사용하기에 normalize.css 삭제

d85bf46

feat: react portal 사용을 위해 index.html에 overlays div태그 생성

7a751ac

feat: Modal에 상위요소가 영향을 미치지 않도록 ModalOverlay 컴포넌트 구현

5e58b46

Modal이 상위요소의 위치에 따라 영향을 받지 않도록 createPortal을 사용한 ModalOverlay 컴포넌트를 구현했습니다.

feat: Modal들이 ModalOverlay를 사용하도록 수정

040a833

feat: BottomSheetModal을 shared/ui/modal로 이동, ModalOverlay를 사용하도록 수정

6694039

fix: RootLayout에서 FNB를 public api로 사용하도록 수정

01547fe

fix: followButton mixin 잘못 명시한 class 수정

457e804

fix: bsm-option에 누락된 border-radius 속성 추가

fab9856

Merge branch 'feature/PW-251-shared-components' of https://github.com…

79d177d

…/CollaBu/pennyway-client-webview into feature/PW-251-shared-components

BangDori reviewed Apr 29, 2024

View reviewed changes

src/shared/ui/profile/Profile.tsx Outdated Show resolved Hide resolved

src/shared/ui/modal/ModalOverlay.tsx Outdated Show resolved Hide resolved

src/shared/ui/button/index.ts Outdated Show resolved Hide resolved

src/shared/styles/reset.scss Outdated Show resolved Hide resolved

Legitgoons added 4 commits April 30, 2024 00:24

feat: modal의 의미를 더 잘 나타낼 수 있는 section태그로 수정

d19a116

feat: ProfileImage 컴포넌트 분리

df8b713

feat: 잘못 export한 button type들 삭제

6ecb75a

feat: shared/ui 전체의 index.ts 파일 생성

aae91f0

BangDori reviewed Apr 29, 2024

View reviewed changes

src/shared/ui/profile/ProfileImage.tsx Outdated Show resolved Hide resolved

Legitgoons added 2 commits April 30, 2024 01:02

feat: ProfileImage / Profile 컴포넌트 병합

412d01a

fix: shared/ui/index 수정

a5c5228

BangDori approved these changes Apr 29, 2024

View reviewed changes

Legitgoons merged commit 893a0e9 into main Apr 29, 2024
2 checks passed

Legitgoons deleted the feature/PW-251-shared-components branch April 29, 2024 16:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨공통 컴포넌트 구현 #15

✨공통 컴포넌트 구현 #15

Legitgoons commented Apr 25, 2024 •

edited by BangDori

Loading

BangDori left a comment

BangDori left a comment

BangDori left a comment

BangDori left a comment

✨공통 컴포넌트 구현 #15

✨공통 컴포넌트 구현 #15

Conversation

Legitgoons commented Apr 25, 2024 • edited by BangDori Loading

작업 이유

작업 사항

1️⃣ 컴포넌트 구현

BasicButton / ActiveButton

Modal

BottomSheetModal

PageHeader

2️⃣ vite-plugin-svgr 사용

3️⃣ 기타

리뷰어가 중점적으로 확인해야 하는 부분

발견한 이슈

BangDori left a comment

Choose a reason for hiding this comment

BangDori left a comment

Choose a reason for hiding this comment

BangDori left a comment

Choose a reason for hiding this comment

BangDori left a comment

Choose a reason for hiding this comment

Legitgoons commented Apr 25, 2024 •

edited by BangDori

Loading