✨ Toast & Input 컴포넌트 구현 #18

Legitgoons · 2024-12-01T09:19:56Z

CheckList

gap를 이용하여 flex 컨테이너 내 자식 요소간의 간격을 제어하였나요? (iOS 14 미지원으로 gap -> space-x, space-y 적용)

작업 이유

공통 컴포넌트 중 Toast와 Input 구현

작업 사항

1️⃣ Toast 구현

react toastify 라이브러리를 사용해서 구현했습니다.
toast에 사용되는 icon과 message를 객체에 추가하고, 이를 toastHandler의 매개변수로 사용하도록 했습니다.

// 이벤트 호출 예시
<button onClick={() => toastHandler(message, icon)}>Toast</button> 
<Toast />

2️⃣ Input 구현

입력받는 부분만을 shared/Input에 두고 이 외 부분은 직접 제작해서 사용하는 것을 전제로 구현하였습니다.
- 현재 figma에 정리된 Input의 경우, style이 모두 다릅니다.
- 그렇기에 이를 모두 shared/Input에 구현하는 것은 오히려 shared에 어울리지 않는다고 생각했습니다.

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

이슈 1번을 인지하였는지
추가적으로 구현해야할 부분이 없는지

발견한 이슈

Toast의 경우 width 및 height 속성 등 일부 스타일이 의도된대로 수정되지 않음

다음의 방법들을 시도해보았습니다.
1. tailwind css로 style 적용: 의도한대로 속성이 수정되지 않음
2. classname props들로 style 수정: 현재 적용된 방법, 일부 속성들이 정상적으로 수정되지 않음
3. ✅ css 파일로 직접 수정: 의도된대로 수정이 이뤄지지만, 컨벤션에서 벗어나게 됨
  => 우선은 의도대로 수정이 이뤄지는것에 중점을 맞춰 3번을 선택했는데, 팀원분들의 의견은 어떠신지 궁금합니다.

Input 컴포넌트에서 피드에 작성되는 commnet를 고려하지 않음
=> 여러 줄의 입력에는 TextArea가 더 적절하다고 판단되어 이를 고려해 구현하지 않았습니다.

Toast에서 icon을, toastHandler에서 message를 받는 대신, toastHandler에서 icon과 message를 모두 받도록 수정

github-actions · 2024-12-01T09:21:57Z

🔍 Visual review for your branch is published 🔍

Here are the links to:

aws-amplify-ap-northeast-2 · 2024-12-01T09:23:45Z

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-18.d1rrzjx2upcmxq.amplifyapp.com

BangDori

컨벤션에 어긋나는 부분이긴 하지만 직접 개발하였을때의 개발 비용을 무시하긴 어렵다고 생각되어, css 파일로 직접 수정하는 부분에 대해서 동의합니다.

고생하셨습니다! 리뷰를 너무 늦게 드려서 죄송하네욧..ㅠ

BangDori · 2024-12-03T09:19:38Z

src/shared/ui/toast/ui/Toast.tsx

+
+export const Toast = () => {
+  return (
+    <ToastContainer


P4: 현재 Toast 컴포넌트는 범용적으로 활용될 수 있는 shared보다는 특정 요구사항에 적합한, 추상화 수준이 매우 낮은 widgets에 적합한 것 같습니다.

ToastContainer가 변경에 유연하게 대응할 수 있도록 하기 위해, Toast 컴포넌트의 Props로 react-toastify에서 제공해주는 ToastContainer의 props를 받도록 하는 건 어떨까요? 이렇게 된다면 다양한 요구사항에 맞춰 Toast 컴포넌트를 변환할 수 있을 것이며, 높은 추상화 수준을 갖출 수 있다고 생각합니다.

Toast props로 ToastContainerProps를 사용하자
=> 동의합니다. 이에 맞게 수정하겠습니다!

Toast 컴포넌트를 조금 더 shared하게 사용하기 위해 props로 ToastContainerProps를 적용하고 shared에 위치하도록 하자가 제 의견이였는데, 제가 정리가 잘 안되었나 봅니다ㅠㅠ.. 다음부터 제대로 정리해서 전달드릴게요!

BangDori · 2024-12-03T09:40:29Z

src/shared/ui/toast/consts/index.ts

P5: 메시지와 같은 부분은 다음과 같이 상수명으로 두는 것이 좋다고 생각되는데 혹시 이 부분에 대해서 어떻게 생각하시는지 수환님과 함께 얘기해보면 좋을 것 같습니다!

// 1. 객체명에 대해서만 적용 export const TOAST_MESSAGE = { reportSuccess: '신고가 접수되었어요', reportFail: '다시 시도해 주세요', networkError: '인터넷 연결이 불안정해요', commonDeleteSuccess: '댓글이 삭제되었어요', }; // 2. 객체명과 필드명 모두 상수화 export const TOAST_MESSAGES = { REPORT_SUCCESS: '신고가 접수되었어요', REPORT_FAIL: '다시 시도해 주세요', NETWORK_ERROR: '인터넷 연결이 불안정해요', COMMON_DELETE_SUCCESS: '댓글이 삭제되었어요', };

메시지가 고정되어 있다보니, 저도 key name을 상수형으로 주는 부분 좋은 것 같습니다!

저도 좋습니다! 반영하겠습니다

BangDori · 2024-12-03T09:48:31Z

src/shared/ui/input/ui/Input.stories.tsx

+
+import { Input } from './Input';
+
+export default {


P4: 현재 Input 스토리에는 Docs가 누락되어 있어 argTypes의 내용이 정상적으로 반영되고 있지 않은 것 같아요. 작업 사항에 작성해주신 내용을 바탕으로 docs 내용을 추가해주시는 것도 나쁘지 않을 것 같습니다! (Toast Story도 동일)

src/shared/ui/input/ui/Input.stories.tsx

suhwan2004

고생많으셨습니다! 병준님이 자세히 봐주셔서 많이 질문드릴 것이 없네요ㅎㅎ

스타일 파일에 정의해서 사용하는 부분의 경우, 저도 피드 작성 페이지 css파일에 추가 정의를 해야 적용이 되는 이슈에 대해 공감도 가고, 괜찮다고 생각합니다!

다음에는 빠른 PR Review 드리겠습니다...! 죄송하고 감사합니다

suhwan2004 · 2024-12-03T10:45:12Z

src/shared/ui/input/ui/Input.tsx

+}
+
+export const Input = (props: IInputProps) => {
+  return <input {...props} className="w-full h-full focus:outline-none" />;


P4: 혹시, props에서 className을 받아오는건 어떻게 생각하시나요? 지금 같은 경우에는 스타일 설정 시, div와 같은 래핑 태그로 한번 덮어서 스타일을 줘야되는 것으로 보여서요

props로 className을 주는 방식도 고려했으나, 안그래도 className이 길어지면 관리가 어려워지는 tailwind css 특성 상
더 복잡해질 우려가 있다고 생각해 래핑 태그를 사용하는 방식을 선택했습니다!

suhwan2004 · 2024-12-03T10:45:57Z

src/shared/ui/toast/consts/index.ts

메시지가 고정되어 있다보니, 저도 key name을 상수형으로 주는 부분 좋은 것 같습니다!

Uichan Lee added 10 commits November 22, 2024 20:47

feat: react-toastify 설치

3e6732c

feat: icon 추가

bb6b1fe

feat: toast/consts 작성

5f71491

feat: Toast UI 구현

7308206

feat: toast/lib/toastHandler 구현

d0d3073

feat: Toast.stories.tsx 구현

ba15723

feat: toastHandler icon param 추가

34b8e49

Toast에서 icon을, toastHandler에서 message를 받는 대신, toastHandler에서 icon과 message를 모두 받도록 수정

feat: input/consts 추가

8181c29

feat: Input 컴포넌트 구현

75cbb40

feat: Input.stories.tsx 구현

6a4b112

Legitgoons requested review from BangDori and suhwan2004 December 1, 2024 09:19

Legitgoons self-assigned this Dec 1, 2024

Uichan Lee added 4 commits December 2, 2024 00:48

feat: Toast.css 구현 및 적용

ac8a194

feat: Toast.stories.tsx 수정

5f13093

fix: Input.stories.tsx 수정

d7fa823

fix: toast autoClose 오기입

4e5f97e

Legitgoons marked this pull request as ready for review December 1, 2024 17:19

BangDori approved these changes Dec 3, 2024

View reviewed changes

suhwan2004 reviewed Dec 3, 2024

View reviewed changes

Uichan Lee added 2 commits December 3, 2024 20:34

feat: toast message 상수화

4d33ec5

feat: toast ToastContainerProps 추가

37973ea

suhwan2004 approved these changes Dec 6, 2024

View reviewed changes

Uichan Lee added 2 commits December 7, 2024 16:36

feat: Input Docs 추가

d37ae6a

feat: toast & input export 작성

91ff7c6

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ Toast & Input 컴포넌트 구현 #18

✨ Toast & Input 컴포넌트 구현 #18

Legitgoons commented Dec 1, 2024 •

edited by suhwan2004

Loading

github-actions bot commented Dec 1, 2024 •

edited

Loading

aws-amplify-ap-northeast-2 bot commented Dec 1, 2024

BangDori left a comment

BangDori Dec 3, 2024

Legitgoons Dec 3, 2024 •

edited

Loading

BangDori Dec 3, 2024

BangDori Dec 3, 2024

suhwan2004 Dec 3, 2024

Legitgoons Dec 3, 2024

BangDori Dec 3, 2024

suhwan2004 left a comment •

edited

Loading

suhwan2004 Dec 3, 2024

Legitgoons Dec 3, 2024 •

edited

Loading

suhwan2004 Dec 3, 2024

✨ Toast & Input 컴포넌트 구현 #18

Are you sure you want to change the base?

✨ Toast & Input 컴포넌트 구현 #18

Conversation

Legitgoons commented Dec 1, 2024 • edited by suhwan2004 Loading

CheckList

작업 이유

작업 사항

1️⃣ Toast 구현

2️⃣ Input 구현

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

발견한 이슈

github-actions bot commented Dec 1, 2024 • edited Loading

🔍 Visual review for your branch is published 🔍

aws-amplify-ap-northeast-2 bot commented Dec 1, 2024

BangDori left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Legitgoons Dec 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

suhwan2004 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Legitgoons Dec 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Legitgoons commented Dec 1, 2024 •

edited by suhwan2004

Loading

github-actions bot commented Dec 1, 2024 •

edited

Loading

Legitgoons Dec 3, 2024 •

edited

Loading

suhwan2004 left a comment •

edited

Loading

Legitgoons Dec 3, 2024 •

edited

Loading