Sign in/#58 #58

seonghunYang · 2024-03-29T05:48:48Z

📌 작업 내용

구현 내용 및 작업 했던 내역

sign-in 컴포넌트 구현
로그인 로직 구현
로그인 API 모킹
다음으로는 권한에 따른 라우팅 설정과 fetch 시 토큰을 함께 전달할 수 있도록 작업을 할 예정입니다.

🤔 고민 했던 부분

zod로 응답값의 유효성 검사하고, 만든 스키마로 타입 체킹까지 한번에 하고 싶었는데, 잘 안되다가 isValidation이란 함수가 탄생했습니다.
next의 cookies가 storybook 환경에서 동작하지 않아 webpack의 alias 기능을 활용하여 모킹했습니다. 개발 환경에서는 cookies가 잘 작동하는 것을 확인했습니다.
서버 액션 부분 코드가 좀 길어지는 것 같다는 생각이 들었습니다. 어떻게 분리해야 할지 고민해보려고 합니다.

🔊 도움이 필요한 부분

Sign up form/#7

…ndler.mock.ts

github-actions · 2024-03-29T05:51:11Z

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

gahyuun

고생하셨습니다!

gahyuun · 2024-03-29T12:17:46Z

app/business/user/user.command.ts

+function isValidation<T extends z.ZodObject<any>>(data: any, schema: T): data is z.infer<T> {
+  try {
+    schema.parse(data);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}


이 함수가 user.validation.ts가 아닌 user.command.ts에 있는 이유가 따로 있을까요??

정확하게 말하면, 이 함수는 user 도메인뿐만 아니라 모든 zod 기반의 유효성 검사 상황에서 사용할 수 있어서, 어디에 위치시킬지 고민이었습니다.

이 함수가 zod에 강한 의존성을 가지고 있다고 판단하여, utils 폴더에 zod 폴더를 만들어서 해당 함수를 배치했습니다.

'특정 라이브러리의 이름을 폴더 구조의 이름으로 사용해도 되는가?'에 대한 고민이 있었지만, util 계층이 모든 계층에서 사용 가능한 계층임을 고려하면, 외부 요소와 인터랙션을 위한 어댑터를 여기다 만들어 두는 것이 생각보다 괜찮다고 판단했습니다. 또한 이미 shadcn 폴더도 존재하고 있습니다.

gahyuun · 2024-03-29T12:24:36Z

app/mocks/handlers/user-handler.mock.ts

+      const signInData = await request.json();
+
+      const isSuccess = mockDatabase.signIn(signInData);
+      await delay(500);


혹시 delay를 걸어주지 않으면 오류가 발생하나용?

아니요. 오류는 발생하지 않으며, delay는 실제동작을 모사하기 위한 장치입니다.

gahyuun · 2024-03-29T12:37:19Z

app/ui/user/sign-in-form/sign-in-form.stories.tsx

+  decorators: [
+    (Story) => (
+      <div className="w-96">
+        <Story />
+      </div>
+    ),
+  ],


Suggested change

decorators: [

(Story) => (

<div className="w-96">

<Story />

</div>

),

],

decorators: [

(Story) => {

const beforeEach = () => {

resetMockDB();

mockDatabase.createUser({

authId: 'testtest',

password: 'test1234!',

studentNumber: '60000001',

engLv: 'ENG12',

});

};

beforeEach();

return (

<div className="w-96">

<Story />

</div>

);

},

],

이렇게 해서 반복적인 코드를 줄일 수 있을 것 같아요!

오호, 정말 좋네요! 스토리북 테스트에서 beforeEach를 만들지 못하는 것이 가장 큰 문제였는데, 해결된 것 같습니다.

너무 고마워요

gahyuun · 2024-03-29T12:43:07Z

app/ui/user/sign-in-form/sign-in-form.tsx

+interface SignInFormProps {
+  onNext?: () => void;
+}
+


onNext 함수를 props로 받는 이유가 따로 있을까요?!

form 이 성공하면 페이지 이동을 할텐데 SignInForm에서 처리하지 않는 이유가 따로 있을까요!?

funnel이라면 onNext 라는 이름이 적절해보이는데 그게 아니라면 페이지 이동 요론 네이밍이 더 적절하지 않을까용?

사실 로그인에도 퍼널을 적용하려고 했지만, 라우팅이 더 적합해보이네요. 그렇게 되면 prop을 받을 필요가 없어 보입니다.

이 부분은 다음 브랜치에서 작업해도 괜찮을까요? 테스트 모킹이 변경되어야 하는데, 그 부분이 다음 작업 시에 결정될 것 같습니다.

yougyung

next의 cookies가 storybook 환경에서 동작하지 않아 webpack의 alias 기능을 활용하여 모킹했습니다. 개발 환경에서는 cookies가 잘 작동하는 것을 확인했습니다.

Invariant: cookies() expects to have requestAsyncStorage, none available.

webpack의 alias 기능을 활용하여 모킹하지 않을 경우, 어떤 에러를 반환하는지 궁금해서 제거해봤고, 해당 에러문구가 노출되는 것을 확인했습니다. 혹시 next/headers의 cookies가 서버컴포넌트에서만 동작하는 특징과 해당 에러 케이스가 연관있다고 생각하시나요?

app/business/user/user.command.ts

app/(sub-page)/sign-in/page.tsx

Co-authored-by: 박가현 <[email protected]>

github-actions · 2024-03-31T11:51:44Z

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

seonghunYang · 2024-03-31T11:53:18Z

Co-authored-by: 박가현 [email protected]

4c8bf01 제안해주신 커밋에 대한 답변입니다

오호, 정말 좋네요! 스토리북 테스트에서 beforeEach를 만들지 못하는 것이 가장 큰 문제였는데, 해결된 것 같습니다.
너무 고마워요

seonghunYang · 2024-03-31T11:59:50Z

next의 cookies가 storybook 환경에서 동작하지 않아 webpack의 alias 기능을 활용하여 모킹했습니다. 개발 환경에서는 cookies가 잘 작동하는 것을 확인했습니다.

Invariant: cookies() expects to have requestAsyncStorage, none available.

webpack의 alias 기능을 활용하여 모킹하지 않을 경우, 어떤 에러를 반환하는지 궁금해서 제거해봤고, 해당 에러문구가 노출되는 것을 확인했습니다. 혹시 next/headers의 cookies가 서버컴포넌트에서만 동작하는 특징과 해당 에러 케이스가 연관있다고 생각하시나요?

음 정확하게 말하면, 스토리북의 런타임 환경과 Next의 런타임 환경이 다르기 때문에 문제가 발생하는 문제인 것 같아요.
스토리북은 렌더링하는데 Next를 전혀 모르기 때문입니다. 스토리북뿐만 아니라 Jest와 같은 테스트 러너도 Next를 모르기 때문에, Next 관련 모듈을 모킹해야 하는 경우가 자주 있습니다.

github-actions · 2024-03-31T12:02:54Z

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

github-actions · 2024-03-31T12:05:15Z

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

gahyuun

고생하셨습니다!

seonghunYang added 9 commits March 27, 2024 19:22

Merge pull request #50 from Myongji-Graduate/sign-up-form/#7

e44512e

Sign up form/#7

feat: Add sign-in form component and stories

b47d953

feat: Add authentication functionality for sign-in

a26c166

feat: Add sign-in functionality to user handler

77b0c1c

test: Add sign-in form stories and update sign-in form component

b42608b

feat: Add SignInResponse interface to user.type.ts and update user-ha…

1b9b3c2

…ndler.mock.ts

feat: Add SignInResponseSchema to user.command.ts

b0c0a63

feat: Add aliases and new files for mocking in storybook

8a8dcd1

fix: clear unnecessary annotation

1d46ae5

seonghunYang requested review from yougyung and gahyuun as code owners March 29, 2024 05:48

gahyuun reviewed Mar 29, 2024

View reviewed changes

yougyung previously approved these changes Mar 29, 2024

View reviewed changes

app/business/user/user.command.ts Outdated Show resolved Hide resolved

app/(sub-page)/sign-in/page.tsx Outdated Show resolved Hide resolved

feat: Add isValidation function to handle Zod validation

d21a53f

seonghunYang dismissed yougyung’s stale review via 4c8bf01 March 31, 2024 11:49

Update app/ui/user/sign-in-form/sign-in-form.stories.tsx

4c8bf01

Co-authored-by: 박가현 <[email protected]>

chore: merge

c3b868e

seonghunYang added 2 commits March 31, 2024 12:01

fix: Update sign-up success page link to sign-in

564ed77

feat: Enable secure cookie setting in production environment

5f6c004

yougyung approved these changes Mar 31, 2024

View reviewed changes

gahyuun approved these changes Mar 31, 2024

View reviewed changes

seonghunYang merged commit 72b5127 into main Mar 31, 2024
2 of 3 checks passed

seonghunYang deleted the sign-in/#58 branch March 31, 2024 14:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sign in/#58 #58

Sign in/#58 #58

seonghunYang commented Mar 29, 2024 •

edited

Loading

github-actions bot commented Mar 29, 2024

gahyuun left a comment

gahyuun Mar 29, 2024

seonghunYang Mar 31, 2024

seonghunYang Mar 31, 2024

gahyuun Mar 29, 2024

seonghunYang Mar 31, 2024

gahyuun Mar 29, 2024

seonghunYang Mar 31, 2024

gahyuun Mar 29, 2024

seonghunYang Mar 31, 2024

gahyuun Mar 31, 2024

yougyung left a comment

github-actions bot commented Mar 31, 2024

seonghunYang commented Mar 31, 2024

seonghunYang commented Mar 31, 2024

github-actions bot commented Mar 31, 2024

github-actions bot commented Mar 31, 2024

gahyuun left a comment

-  decorators: [
-    (Story) => (
-      <div className="w-96">
-        <Story />
-      </div>
-    ),
-  ],
+ decorators: [
+    (Story) => {
+      const beforeEach = () => {
+        resetMockDB();
+        mockDatabase.createUser({
+          authId: 'testtest',
+          password: 'test1234!',
+          studentNumber: '60000001',
+          engLv: 'ENG12',
+        });
+      };
+      beforeEach();
+      return (
+        <div className="w-96">
+          <Story />
+        </div>
+      );
+    },
+  ],

Sign in/#58 #58

Sign in/#58 #58

Conversation

seonghunYang commented Mar 29, 2024 • edited Loading

📌 작업 내용

🤔 고민 했던 부분

🔊 도움이 필요한 부분

github-actions bot commented Mar 29, 2024

gahyuun left a 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

yougyung left a comment

Choose a reason for hiding this comment

github-actions bot commented Mar 31, 2024

seonghunYang commented Mar 31, 2024

seonghunYang commented Mar 31, 2024

github-actions bot commented Mar 31, 2024

github-actions bot commented Mar 31, 2024

gahyuun left a comment

Choose a reason for hiding this comment

seonghunYang commented Mar 29, 2024 •

edited

Loading