Form/#16 #39

seonghunYang · 2024-03-01T09:29:02Z

📌 작업 내용

구현 내용 및 작업 했던 내역

form view 컴포넌트를 개발하였습니다.
form에 사용되는 input, select, button 컴포넌트를 리팩토링하였습니다.
zod 패키지를 설치하고, 유효성 검사 로직을 작성하였습니다.
form 컴포넌트에 대한 stories를 만들고 interaction을 작성하였습니다.

🤔 고민 했던 부분

form 컴포넌트에 컴파운드 패턴을 적용하여 form의 하위 요소에 대한 인터페이스를 분리하였습니다. 이를 통해 각 하위 요소에 적절한 책임을 분리하고자 노력했습니다.
interaction이 필요한 form 같은 컴포넌트를 테스트하기 위해 storybook의 play 기능을 사용하였습니다. 너무너무너무 신기하네요. 꼭 확인해주세요(interactions tab에 있어요)
버튼 컴포넌트가 label을 props로 받고 있어, form 구현 시 필요한 spinner icon을 어떻게 확장할지 고민했습니다. 이에 설계상 props로 받는 것이 적절하다고 판단하고, loading props를 전달하여 구현하였습니다. 또한, disabled 상태의 버튼에 대한 스타일링이 없어 추가하였습니다.

🔊 도움이 필요한 부분

form-root 컴포넌트 파일에 filterChildrenByType라는 함수가 있습니다. 이런 함수를 utils 폴더에 빼놓고 싶은데, 어떤 파일로 빼놓을지 고민이 됐습니다. 좋은 의견 있으신가요?

… Icon

…ement

…Path stories

github-actions · 2024-03-01T09:34:59Z

🚀storybook: https://65ccb85d5afe55a024495bc0-ipmsclyvct.chromatic.com/

yougyung · 2024-03-01T11:46:57Z

app/ui/view/molecule/form/form.context.ts

+import { createContext } from 'react';
+import type { FormState } from './form-root';
+
+type FormContext = FormState & { formId: string };


저는 확장이 쉽다는 이유로 객체의 타입을 선언하는 경우에 interface로 타입을 선언하는 것을 선호합니다. 인덱스 시그니처의 사용과 같이 type이 필요한 경우에는 섞어서 사용을 해왔었는데요.

저희 프로젝트안에서 전반적으로 컨벤션 통일이 필요할 것 같다는 생각이 드네요. 혹시 type으로 선언하는 것을 선호하시는 이유가 있다면 궁금합니다.

저번 회의 결과대로 interface로 마이그레이션 했습니다.
3e5be8c

yougyung · 2024-03-01T11:58:56Z

app/ui/view/molecule/form/form-submit-button.tsx

+        form={formId}
+        size={size}
+        variant={variant}
+        type="submit"


button의 default값이 submit이라는 이유로 저는 별도로 작성을 하지 않는 편인데, 혹시 작성하시는 특별한 이유가 있으시다면 궁금합니다 !

기본값이라도 명시적으로 선언하는 것을 더 선호합니다. 그렇게 하면 코드를 읽는 사람이 내부 기본값이 무엇인지 확인할 필요가 없기 때문입니다.

yougyung · 2024-03-01T12:23:13Z

app/ui/view/molecule/form/form-password-input.tsx

FormNumberInput, FormPasswordInput, FormTextInput가 type만 별도로 갖는 동일한 역할을 하는 컴포넌트인 것 같은데 별도로 분리하신 이유가 궁금합니다.

이 부분에 대해 저도 많이 고민했습니다. 설계 당시에 3가지 input이 거의 동일한 로직을 가질 것이라고 생각하여, type을 이용해 하나의 input으로 분리할지 여부를 고민했습니다.

그러나 컴포넌트를 분리한 이유는 다음과 같습니다.

현재 상황에서는 3가지 컴포넌트가 중복된 것처럼 보일 수 있으나, 확장이 이루어질 경우에는 충분히 변경될 수 있다고 봅니다. 이때 type으로 분리해 두면 나중에 수정하기가 매우 어려워집니다.

심지어 확장이 이루어지지 않는다 해도, type으로 분리하는 것보다 컴포넌트 수준으로 분리하는 것이 사용자에게 더 선언적이고 명확하며, 컴파운드 패턴에도 적합하다고 판단합니다. (예: form 컴포넌트 내의 input 하위 컴포넌트에서 type으로 분기하는 것보다, 하위 컴포넌트 수준에서 Number, Password, Text input이 있는 것이 이 form에서 지원하는 것을 파악하기 더 쉽다고 생각합니다.)

gahyuun

고생하셨습니다

gahyuun · 2024-03-01T12:36:21Z

app/business/auth/user.command.ts

@@ -0,0 +1,67 @@
+'use server';
+
+import { State } from '@/app/ui/view/molecule/form/form-root';


form root 파일에서 state 를 export 하지 않는다는 에러가 뜨네요 확인 부탁드립니다!

수정했습니다. 고맙습니다.
6b0bef3

gahyuun · 2024-03-01T12:42:04Z

app/business/auth/user.command.ts

+type User = z.infer<typeof SignUpFormSchema>;
+
+export async function createUser(prevState: State, formData: FormData): Promise<State> {


User 타입과 prevState는 사용하지 않는 것 같은데 따로 선언하신 이유가 있을까용?

User 타입은 회원가입 로직을 구현할 때 사용할 예정입니다.

react-dom의 useFormState를 사용할 때 컨벤션입니다

gahyuun · 2024-03-01T12:45:57Z

app/business/auth/user.command.ts

+      .max(20, {
+        message: 'User ID must be at most 20 characters',
+      }),
+    password: z.string().regex(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!^%*#?&])[A-Za-z\d@$!^%*#?&]{8,}$/, {


placeholder에는 기호를 포함한 8자 이상 20자 이하인데 정규식에는 숫자가 무조건 포함되도록 만드신 것 같습니다! 확인 부탁드립니당

기존 placeholder를 그대로 옮겼지만, 이번에 비밀번호 규칙을 정규표현식에 따라 수정할 계획입니다. 로직을 구현할 때 placeholder도 수정하겠습니다.

gahyuun · 2024-03-01T13:15:15Z

app/ui/view/molecule/form/index.tsx

Required 필드에는 필수 입력 표시 (ex 별표)가 있으면 ux적으로 더 좋을 것 같습니다!

수정했습니다. 덕분에 더 좋은 결과물이 나왔네요:)
a65ada4

gahyuun · 2024-03-01T13:27:55Z

app/ui/view/molecule/form/form-submit-button.tsx

+  variant?: 'primary' | 'secondary';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'default';


button component props에서 가져와서 사용해도 될 것 같아요~!

gahyuun · 2024-03-01T13:29:41Z

app/ui/view/molecule/form/form.stories.tsx

+
+export const SignUpFormActionWithFailure: Story = {
+  ...SingUpFormTemplate,
+  play: async ({ canvasElement }) => {


play 기능 정말 신기하네요 👍🏻

gahyuun · 2024-03-01T13:30:57Z

app/ui/view/molecule/form/form.stories.tsx

+import type { Meta, StoryObj } from '@storybook/react';
+
+import Form from '.';


import문 띄어쓰기로 분리하신 게 가독성을 위해서 의도하신 거 맞을까요?

네, 맞습니다. 실제로도 다른 성질의 import를 분리하는 것을 선호하며, storybook docs의 스타일을 따른 것이기도 합니다.
https://storybook.js.org/docs/writing-stories/args#story-args

gahyuun · 2024-03-01T13:32:25Z

app/ui/view/molecule/form/form-root.tsx

+  errors: Record<string, string[] | undefined>;
+};
+
+// Refactor: 애를 따로 빼고싶은데 utils 폴더에 어떤 파일명이 좋을까?


하위 컴포넌트들을 다루는 함수이기에 component.util.ts도 괜찮을 것 같네용

form에서만 사용될 것으로 예상된다면 가현이가 의견 내준 것 처럼 form.util.ts도 괜찮을 것 같고, 재사용이 예상된다면 filter기능을 한다는 의미에서 filter.ts는 어떤가요?

엇 저는 form.util.ts처럼 컴포넌트_이름.util.ts가 아닌 component.util.ts 네이밍을 의미했습니다!

component.util.ts로 추출했습니다. 사실 혼동의 여지가 좀 있는 것 같아서 아주 마음에 들진 않는데, 차선인 것 같습니다. 하다가 더 좋은 네이밍이 떠오르면 변경하겠습니다
71a471c

gahyuun · 2024-03-01T14:34:34Z

app/ui/view/molecule/form/form-root.tsx

현재 submit button을 클릭했을 때 유효성 검사를 진행하는 것으로 보입니다!
onChange 또는 다른 필드를 선택한 경우에도 유효성 검사를 진행할 수 있는데 위 방식을 선택하신 이유가 따로 있는 지 궁금합니다!

Next docs에 나오는 Server Actions를 사용하여 폼을 구현하려 했습니다. 이 방법이 RSC 사용 목적에 더 적합하다고 생각했습니다.

솔직히, 사용해보니 Server Actions의 장점은 아직 잘 모르겠습니다. onChange나 다른 필드 선택 시 보여주는 UX 관점에서는 더 좋지 않을까 생각됩니다.

이와 관련하여 Next의 문서를 읽어봤는데, 캐싱, 보안, 점진적 향상 측면에서 장점이 있다고 합니다.

대부분은 공감하기 어렵지만, 기존에 클라이언트 측에서 유효성 검사를 진행하는 것에 반해 서버 액션을 사용하면 서버 측에서 유효성 검사를 진행하는 아키텍처로 변경되며, 이는 보안 측면에서 확실히 좋을 것 같습니다.

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#server-side-validation-and-error-handling
https://nextjs.org/blog/security-nextjs-server-components-actions
https://nextjs.org/learn/dashboard-app/mutating-data

server action으로 구현했을 때 보안과 성능에 장점이 있네요
기술적으로 server action을 사용함으로써 좋은 시도라고 생각합니다!

ux적으로는 on change가 더 좋은것 같지만 저의 주관적인 판단이 아닐까 싶네요
졸부 회원가입 form이 사용자에게 그렇게 어렵지 않은 점, placeholder 이 작성해야 하는 방향을 알려주는 점을 고려해봤을 때 일단은 onsubmit으로 진행해도 좋을 것 같네요!

yougyung · 2024-03-01T19:38:12Z

app/ui/view/molecule/form/form-root.tsx

+  errors: Record<string, string[] | undefined>;
+};
+
+// Refactor: 애를 따로 빼고싶은데 utils 폴더에 어떤 파일명이 좋을까?


form에서만 사용될 것으로 예상된다면 가현이가 의견 내준 것 처럼 form.util.ts도 괜찮을 것 같고, 재사용이 예상된다면 filter기능을 한다는 의미에서 filter.ts는 어떤가요?

yougyung · 2024-03-01T19:50:52Z

app/ui/view/molecule/select/select-root.tsx

@@ -35,10 +47,40 @@ export const SelectRoot = React.forwardRef<HTMLInputElement, SelectProps>(functi

  return (
    <div className="w-full min-w-[10rem] relative text-base">
+      <select
+        title="select-hidden"


해당 숨겨진 select는 어떻게 쓰이나요?

Headless UI의 listbox를 form에서 사용할 때, hidden input을 만들어서 값을 숨기는 방식이 마음에 들지 않아서, 직접 hidden select를 만들었습니다.

https://headlessui.com/react/listbox#using-with-html-forms

이런 방식이 마음에 들지 않는 이유는 다음과 같아요.

Select와 같이 동작하지만, input에 value를 숨겨두고 있어서 오해가 생길 수 있습니다.

이를 예로 들면, Storybook play를 작성할 때, select tag를 아래와 같이 selector로 사용할 수 있다고 생각할 수 있습니다.

await userEvent.selectOptions(canvas.getByLabelText('영어', { selector: 'select' }), 'level12', { delay: 100, });

하지만, 이렇게 하면 오류가 발생합니다. select가 아닌 hidden input에 value가 있기 때문에, selector를 input으로 설정해야 합니다.

저는 이 사항을 알고 있어서 대처가 가능하지만, 다른 사람들이 사용할 때는 이 사항을 모르고 내부 구현을 찾아봐야 할 수도 있습니다. 이런 오해를 없애기 위해 hidden select를 구현하였습니다.

seonghunYang · 2024-03-02T07:33:51Z

나머지 답변은 좀 더 고민해보고, 수정해서 남기도록 하겠습니다

…n.tsx

github-actions · 2024-03-05T10:43:35Z

🚀storybook: https://65ccb85d5afe55a024495bc0-jbitqugsgx.chromatic.com/

seonghunYang added 22 commits February 27, 2024 09:22

feat: Add form components

b642c7b

refactor: Refactor form rendering and add label styling

6312b6b

feat: Add number type support to TextInput component

da37770

feat: Add NumberWithPlaceholder story to text-input.stories.tsx

e26fd75

feat: Add FormSelect component

d3a471a

feat: Add form number and password inputs

6f3d246

refactor: Refactor FormRoot component to use useFormState hook

9cc2281

feat: Add FormSubmitButton component to FormRoot

b639717

feat: Add FormContext to form-root.tsx

5590017

chore: Add zod package dependency

67fe26c

feat: Add text input component to display multiple error messages and…

d551ab9

… Icon

refactor: Refactor Select component to support multiple error messages

a63472e

feat: Add form error handler

2e07a21

feat: Refactor form validation and add password confirmation check

95ea983

feat: Add validation sign-up-form

9268a16

[web] chore: Install storybook testing library

fab3691

refactor: Refactor SelectRoot component to include a hidden select el…

6fd6210

…ement

feat: Add full play interaction stories

b68d49e

feat: Update form inputs to disable during pending state

96840f1

feat: Add disabled and loading state to Button

605839a

feat: Add loading state to form button

3549a70

refactor: Refactor form state and schema names

cd36ce9

seonghunYang requested review from yougyung and gahyuun as code owners March 1, 2024 09:29

test: Add SignUpFormActionWithFailure and SignUpFormActionWithSuccess…

ca6ec56

…Path stories

Myongji-Graduate deleted a comment from github-actions bot Mar 1, 2024

yougyung reviewed Mar 1, 2024

View reviewed changes

gahyuun reviewed Mar 1, 2024

View reviewed changes

yougyung reviewed Mar 1, 2024

View reviewed changes

yougyung previously approved these changes Mar 2, 2024

View reviewed changes

seonghunYang added 5 commits March 5, 2024 09:55

fix: Fix invalid type import

6b0bef3

feat: Add required props to form sub components

a65ada4

refactor: Update button size type in button.tsx and form-submit-butto…

af6519f

…n.tsx

refactor: Extract filterChildrenByType utility function

71a471c

refactor: migration type to interface

3e5be8c

seonghunYang dismissed yougyung’s stale review via 3e5be8c March 5, 2024 10:41

gahyuun approved these changes Mar 5, 2024

View reviewed changes

yougyung approved these changes Mar 8, 2024

View reviewed changes

seonghunYang merged commit f8e3283 into main Mar 8, 2024
3 checks passed

seonghunYang deleted the form/#16 branch March 8, 2024 09:29

yougyung assigned seonghunYang Mar 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Form/#16 #39

Form/#16 #39

seonghunYang commented Mar 1, 2024 •

edited

Loading

github-actions bot commented Mar 1, 2024

yougyung Mar 1, 2024

seonghunYang Mar 5, 2024

yougyung Mar 1, 2024

seonghunYang Mar 2, 2024

yougyung Mar 1, 2024

seonghunYang Mar 2, 2024

gahyuun left a comment

gahyuun Mar 1, 2024

seonghunYang Mar 5, 2024 •

edited

Loading

gahyuun Mar 1, 2024

seonghunYang Mar 2, 2024 •

edited

Loading

gahyuun Mar 1, 2024

seonghunYang Mar 2, 2024

gahyuun Mar 1, 2024

seonghunYang Mar 5, 2024

gahyuun Mar 1, 2024

seonghunYang Mar 5, 2024

gahyuun Mar 1, 2024

gahyuun Mar 1, 2024

seonghunYang Mar 2, 2024

gahyuun Mar 1, 2024

yougyung Mar 1, 2024

gahyuun Mar 2, 2024

seonghunYang Mar 5, 2024

gahyuun Mar 1, 2024

seonghunYang Mar 2, 2024

gahyuun Mar 2, 2024

yougyung Mar 1, 2024

yougyung Mar 1, 2024

seonghunYang Mar 2, 2024 •

edited

Loading

seonghunYang commented Mar 2, 2024

github-actions bot commented Mar 5, 2024

		@@ -0,0 +1,67 @@
		'use server';

		import { State } from '@/app/ui/view/molecule/form/form-root';

		type User = z.infer<typeof SignUpFormSchema>;

		export async function createUser(prevState: State, formData: FormData): Promise<State> {

		variant?: 'primary' \| 'secondary';
		size?: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'default';

		import type { Meta, StoryObj } from '@storybook/react';

		import Form from '.';

Form/#16 #39

Form/#16 #39

Conversation

seonghunYang commented Mar 1, 2024 • edited Loading

📌 작업 내용

🤔 고민 했던 부분

🔊 도움이 필요한 부분

github-actions bot commented Mar 1, 2024

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

gahyuun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seonghunYang Mar 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seonghunYang Mar 2, 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

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

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

Choose a reason for hiding this comment

seonghunYang Mar 2, 2024 • edited Loading

Choose a reason for hiding this comment

seonghunYang commented Mar 2, 2024

github-actions bot commented Mar 5, 2024

seonghunYang commented Mar 1, 2024 •

edited

Loading

seonghunYang Mar 5, 2024 •

edited

Loading

seonghunYang Mar 2, 2024 •

edited

Loading

seonghunYang Mar 2, 2024 •

edited

Loading