feat(ui): FieldBox 컴포넌트 구현 #177

Brokyeom · 2024-10-17T12:07:56Z

변경사항

FieldBox 컴포넌트를 구현합니다.
- FieldBox 컴포넌트는 기본적으로 TopAddon, BottomAddon 의 prop을 받고, BottomAddon 은 또다시 left, right Addon 컴포넌트로 구성되어 있어요.
- TopAddon에 사용하기를 권장하는 Label 컴포넌트도 존재합니다. Label컴포넌트는 중기적으로 모든 필드류에 들어가기를 기대하고 있어요

링크

티켓 링크

시급한 정도

🏃‍♂️ 보통 : 최대한 빠르게 리뷰 부탁드립니다.

기타 사항

      <FieldBox
        topAddon={<FieldBox.Label label='안녕?' description='디스크립션' required />}
        bottomAddon={
          <FieldBox.BottomAddon
            leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
            rightAddon={<div style={{ color: colors.white }}>롸이트애드온</div>}
          />
        }
      >
        <span style={{ color: colors.white }}>여긴 본문</span>
      </FieldBox>

height · 2024-10-17T12:07:59Z

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

changeset-bot · 2024-10-17T12:08:00Z

🦋 Changeset detected

Latest commit: 1082902

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@sopt-makers/ui	Minor
docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Brokyeom · 2024-10-17T12:10:05Z

apps/docs/src/App.tsx

+      <div style={{ padding: '20px', backgroundColor: colors.secondary }} />
+      <FieldBox
+        topAddon={<FieldBox.Label label='안녕?' description='디스크립션' required />}
+        bottomAddon={
+          <FieldBox.BottomAddon
+            leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
+            rightAddon={<div style={{ color: colors.white }}>롸이트애드온</div>}
+          />
+        }
+      >
+        <span style={{ color: colors.white }}>여긴 본문</span>
+      </FieldBox>


예제 코드 추가했습니다. 해당 부분 봐 주시면 됩니다!

Brokyeom · 2024-10-20T14:20:44Z

스토리북 프리뷰전달드려요~

suwonthugger

LGTM

suwonthugger · 2024-10-23T12:35:30Z

packages/ui/FieldBox/context.ts

혹시 이 파일 사용하지 않는다면 삭제해도 될 것 같아요

bea327c에서 수정했습니다.
처음에 컨텍스트 사용하려고 파일 만들어두고 사용은 안했네요 ㅎ 일단 삭제했습니다.

suwonthugger · 2024-10-23T12:50:10Z

apps/docs/src/App.tsx

-import { Test } from "@sopt-makers/ui";
-import TextArea from "../../../packages/ui/Input/TextArea";
-import TextField from "../../../packages/ui/Input/TextField";
+import '@sopt-makers/ui/dist/index.css';


이렇게 css 파일 불러오지 않으면 왜 스타일이 적용되지 않는지 궁금한데 혹시 알고계신분 계실까요 ,,, ? 빌드된 파일에서 불러오는거면 스타일이 적용되어있어야하는게 아닌가 싶어서유

빌드된 파일에서 불러오는거면 스타일이 적용되어있어야하는게 아닌가 싶어서유

요게 무슨 말씀인지 궁금하네요!!!

요거 빌드 파일에서 컴포넌트 파일과 css가 따로 빌드 되면서, 사용할때는 css 파일을 import 해야하기 때문인데, 아무래도 이렇게 import 하는 방식이 저도 불편하지 않나? 라는 의문이 계속 들기는 합니다.

다른 오픈소스들을 보면 (Chakra, Radix Theme) 들을 보면 Provider를 루트에 감싸서 css를 제공하는 것 같은데, css파일을 직접 import 하지 않고도 css를 효과적으로 적용할 수 있는 방법이 있다면 적용하는게 좋을 것 같습니다.

빌드된 파일에서 불러오는거면 스타일이 적용되어있어야하는게 아닌가 싶어서유

요게 무슨 말씀인지 궁금하네요!!!

형겸이형 댓글 읽고 생각해보니가 빌드되면 css가 분리되네요 ㅋㅋ 흠 잘못된 말입니다

요거 빌드 파일에서 컴포넌트 파일과 css가 따로 빌드 되면서, 사용할때는 css 파일을 import 해야하기 때문인데, 아무래도 이렇게 import 하는 방식이 저도 불편하지 않나? 라는 의문이 계속 들기는 합니다.

다른 오픈소스들을 보면 (Chakra, Radix Theme) 들을 보면 Provider를 루트에 감싸서 css를 제공하는 것 같은데, css파일을 직접 import 하지 않고도 css를 효과적으로 적용할 수 있는 방법이 있다면 적용하는게 좋을 것 같습니다.

답변 감사합니다! 효과적으로 적용할수 있는 방법이 있는지 찾아봐야겠어요

jungwoo3490

LGTM 고생하셨어요!!! 🚀

jungwoo3490 · 2024-10-23T19:44:29Z

apps/docs/src/App.tsx

-import { Test } from "@sopt-makers/ui";
-import TextArea from "../../../packages/ui/Input/TextArea";
-import TextField from "../../../packages/ui/Input/TextField";
+import '@sopt-makers/ui/dist/index.css';


빌드된 파일에서 불러오는거면 스타일이 적용되어있어야하는게 아닌가 싶어서유

요게 무슨 말씀인지 궁금하네요!!!

Brokyeom added 4 commits October 11, 2024 16:33

feat: add FieldBox

e74c02d

Merge branch 'main' into feat/ui-fieldbox

f6a4952

feat: publish FieldBox.Label

be5a46a

feat: publish FieldBox BottomAddon

1018502

pull-request-size bot added the size/L label Oct 17, 2024

github-actions bot assigned Brokyeom Oct 17, 2024

Brokyeom commented Oct 17, 2024

View reviewed changes

Brokyeom added 4 commits October 19, 2024 16:30

refactor: move sub-components to components folder.

9ed6eb5

fix: interface name

ba396ed

feat: Add ErrorMessage Component.

17fbd58

docs: FieldBox Storybook docs

822d681

Brokyeom marked this pull request as ready for review October 20, 2024 14:12

Brokyeom requested review from sohee-K, jungwoo3490 and suwonthugger as code owners October 20, 2024 14:12

Brokyeom and others added 3 commits October 20, 2024 23:36

cs

030e899

add accessibility arrts.

0c839b1

Merge branch 'main' into feat/ui-fieldbox

c084bff

suwonthugger approved these changes Oct 23, 2024

View reviewed changes

jungwoo3490 approved these changes Oct 23, 2024

View reviewed changes

Brokyeom added 3 commits October 24, 2024 06:35

fix: remove context.ts

bea327c

Enhancing Storybook documentation.

05301ab

fix

1082902

Brokyeom merged commit 95401ea into main Oct 24, 2024
1 check passed

Brokyeom deleted the feat/ui-fieldbox branch October 24, 2024 05:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): FieldBox 컴포넌트 구현 #177

feat(ui): FieldBox 컴포넌트 구현 #177

Brokyeom commented Oct 17, 2024

height bot commented Oct 17, 2024

changeset-bot bot commented Oct 17, 2024 •

edited

Loading

Brokyeom Oct 17, 2024

Brokyeom commented Oct 20, 2024

suwonthugger left a comment

suwonthugger Oct 23, 2024

Brokyeom Oct 23, 2024

suwonthugger Oct 23, 2024 •

edited

Loading

jungwoo3490 Oct 23, 2024

Brokyeom Oct 23, 2024 •

edited

Loading

suwonthugger Oct 24, 2024 •

edited

Loading

suwonthugger Oct 24, 2024

jungwoo3490 left a comment

jungwoo3490 Oct 23, 2024

feat(ui): FieldBox 컴포넌트 구현 #177

feat(ui): FieldBox 컴포넌트 구현 #177

Conversation

Brokyeom commented Oct 17, 2024

변경사항

링크

시급한 정도

기타 사항

height bot commented Oct 17, 2024

changeset-bot bot commented Oct 17, 2024 • edited Loading

🦋 Changeset detected

Brokyeom Oct 17, 2024

Choose a reason for hiding this comment

Brokyeom commented Oct 20, 2024

suwonthugger left a comment

Choose a reason for hiding this comment

suwonthugger Oct 23, 2024

Choose a reason for hiding this comment

Brokyeom Oct 23, 2024

Choose a reason for hiding this comment

suwonthugger Oct 23, 2024 • edited Loading

Choose a reason for hiding this comment

jungwoo3490 Oct 23, 2024

Choose a reason for hiding this comment

Brokyeom Oct 23, 2024 • edited Loading

Choose a reason for hiding this comment

suwonthugger Oct 24, 2024 • edited Loading

Choose a reason for hiding this comment

suwonthugger Oct 24, 2024

Choose a reason for hiding this comment

jungwoo3490 left a comment

Choose a reason for hiding this comment

jungwoo3490 Oct 23, 2024

Choose a reason for hiding this comment

changeset-bot bot commented Oct 17, 2024 •

edited

Loading

suwonthugger Oct 23, 2024 •

edited

Loading

Brokyeom Oct 23, 2024 •

edited

Loading

suwonthugger Oct 24, 2024 •

edited

Loading