학생 인증 기능 추가, 유저 정보 등록 리팩터링 #111

mjsdo · 2023-07-13T21:02:20Z

Issues

[FEATURE]: 학생 인증 #65 [REFACTOR]: User Register Form #110

구분

주요 변경점

<Name />, <Avatar />리팩터링 #107 Merge 이후에 업데이트 할게요.
스토리북 msw addon에서 not found module 오류가 계속 발생했는데(관련 이슈), 스토리북 최신버전으로 업그레이드 해보니까 해결이 됐습니다.
- ~~제꺼 리뷰-머지되면 npx storybook@latest upgrade 사용해서 스토리북 업그레이드 한번 해주세요.~~
- yarn 하면 알아서 업데이트 되는 듯 하네요.

스크린샷

기타

- `undefined`도 세팅할 수 있도록 변경

- undefined가 직렬화 불가능해서 undefined로 세팅이 안되는듯 (아예 무시됨)

- 유저 정보에 따라 텍스트 다르게 표시 - ssafyMember가 아닌 경우 - 이미 인증된 유저인 경우 - 인증하지 않은 유저인 경우

parameters.msw.handler -> parameters.msw.handlers

mjsdo

UserRegisterForm쪽은 리팩토링 진행했고,
NameCard부터 학생인증에 필요한 컴포넌트, 스토리, 페이지 작업했습니다.

학생인증은 이 PR로 기능은 다 구현됐어요.

스토리북 링크

mjsdo · 2023-07-14T12:40:32Z

src/components/UserRegisterForm/Fields/Campus.tsx

UserRegisterForm쪽은 전부 StudentCertificationForm이랑 동일한 흐름으로 바꿔놨습니다.

외부에서 onSubmit 전달받음 (기존에는 내부에서 핸들링)

불필요한 컨텍스트 제거

텍스트 큰거 렌더링 하는 용도로 만들어둔 Question컴포넌트 제거

Form 타입과 API 타입 분리해서 작성 (기존에는 두 타입이 일치)

mjsdo · 2023-07-14T17:09:53Z

src/components/Common/SsafyIcon/Track.tsx

@@ -18,7 +18,7 @@ import { defaultify } from '~/utils';
 // import 구문 옆에다 주석 달면 린트 오류가 발생해서 여기 적어둡니다.

 export interface TrackProps<Track extends keyof typeof tracks> {
-  name?: Track;
+  name?: Track | null;


트랙이 없는경우 서버에서 값이 null로 넘어오기 때문에 추가

mjsdo · 2023-07-14T17:10:30Z

src/components/GlobalModal/GlobalModal.stories.tsx

@@ -123,8 +121,7 @@ export const ModalInModal = () => {
        <Button onClick={handleOpenModal}>트리거 버튼</Button>
      </div>

-      {/* 이 모달은 `_app.tsx`에서 한번만 렌더링합니다. */}
-      <GlobalModal />
+      {/* `GlobalModal`은 `_app.tsx`에서 한번만 렌더링합니다. */}


스토리북의 Preview.tsx에 반영했습니다.

mjsdo · 2023-07-14T17:17:48Z

src/stories/StudentCertificationPage.stories.tsx

+  parameters: {
+    msw: {
+      handlers: {
+        // 기본적으로 정의한 유저 정보 핸들러가 데이터를 `userInfo.initialUser`로 채우기 때문에
+        // Effect 에서 세팅하는 `userInfo.uncertifiedSsafyUserInfo`와 충돌합니다. (500ms 딜레이를 가지고 API를 응답하기 때문에)
+        // 해당 핸들러를 제거할 목적으로 override 합니다.
+        member: [certifyStudent],
+      },
+    },
+  },
+};


페이지 스토리를 추가하실 때는 이런식으로 핸들러 오버라이드 하시면 됩니다.

우려되는 점은, 이쪽은 타입이 아예 정의되지 않아서 오탈자를 잡아주지 않는다는 건데 (작업하면서 handlers를 handler로 오타내서 의도한대로 동작하지 않은 경우도 있었어요)

StoryObj타입을 확장시킬까 생각중입니다.
일단은 사용하게 된다면 스펠링을 주의해서 적어주시면 될것 같아요.

참고로 member키에 들어가는 핸들러의 기본값은 여기서 볼 수 있는데, 지금 여기있는 49번 라인처럼 작성하면 머지되는게 아니라 아예 교체하게 됩니다.

전 이 페이지에서 이 API만 필요하기 때문에 상관없지만, 만약에 어느 하나를 제거할 생각이라면
member: memberHandlers.filter(h => h === certifyStudent)이런식으로 사용하시면 될 것 같아요.

참고할게요! 곧 하나 올라갈듯..!!

mjsdo · 2023-07-14T17:21:38Z

src/stories/SignInPage.stories.tsx

+  parameters: {
+    msw: {
+      handlers: {
+        member: [],
+      },
+    },
+  },


여기도 마찬가지로,
유저 정보가 없어야 하는데, 기본적으로 msw에서 유저정보를 500ms 딜레이를 가지고 응답하기 때문에 오버라이드 했습니다.

mjsdo · 2023-07-14T17:22:47Z

src/stories/IntroSsafyCertificationPage.stories.tsx

+    useEffect(() => {
+      const myInfo = !ssafyMember
+        ? userInfo.nonSsafyUserInfo
+        : certified
+        ? userInfo.certifiedSsafyUserInfo
+        : userInfo.uncertifiedSsafyUserInfo;


msw에서 사용하던 data값들을 그대로 가져와서 쓰는 것이니,
필요하신 경우 저처럼 mock 데이터 가져와서 쓰세요!

mjsdo · 2023-07-14T17:26:58Z

src/pages/certification/student/index.tsx

+  if (certificationSuccess) {
+    return (
+      <DelayedRedirection to={routes.main()} seconds={3}>
+        <PreviewCertifiedMyInfo userInfo={myInfo as NonNullable<UserInfo>} />
+      </DelayedRedirection>
+    );
+  }


원래는 이 페이지의 JSX 반환문에서

success ? <인증성공화면 /> : <인증Form />

이런식으로 보여주려고 했는데,

바로 아래에 이미 인증된 상태라면 리다이렉션 시키는 조건문 로직 떄문에,
인증 성공 이후에 트랙 정보나 인증상태 이런거 세팅하는 순간 거기 걸려서 아래로 내려오질 못하게 됩니다.
그래서 더 위에서 JSX를 반환하는 방식으로 했어요.

이쪽부분 복잡했을 것 같은데 이렇게 하는게 나을 것 같아요

mjsdo · 2023-07-14T17:33:57Z

src/components/UserRegisterForm/index.tsx

기존에 있었던 컨텍스트를 삭제하고 여기로 옮겼습니다.

otterp012 · 2023-07-16T16:20:03Z

src/components/DelayedRedirection/index.tsx

  replace?: boolean;
 }

 const DelayedRedirection = (props: DelayedRedirectionProps) => {
-  const { children, to, seconds, replace = false } = props;
+  const { children, to, seconds = 3, replace = false } = props;


좋습니다!
개인적으로 개발자간에 합의만 된다면 default value가 있는 게 좋다고 생각했어요

otterp012 · 2023-07-16T16:21:53Z

src/components/NameCard/index.tsx

+};
+
+const formatSsafyInfo = (year: number, campus: string) => {
+  return `${campus}캠퍼스 SSAFY ${year}기`;


별건 아닌 부분이지만 아마 year 대신 semester를 사용해서 용어를 맞춰놔도 좋을 것 같아요!

저번에 말씀드렸듯이 의미상으로 semester가 아닌 year가 맞아서 이렇게 놔뒀습니다!

otterp012 · 2023-07-16T16:23:02Z

src/components/RedirectionGuide/index.tsx

@@ -51,8 +54,8 @@ export default RedirectionGuide;

 const selfCss = css(
  {
-    minHeight: '100vh',
-    height: 'max-content',
+    minHeight: pageMinHeight,


minHeight를 전체적으로 통일하기 위해 사용한 부분일까요?

네. vh로만 높이를 주면 높이가 낮은 디바이스에서 어색하게 보여서요.

src/components/UserRegisterForm/Fields/Year.tsx

github-actions · 2023-07-17T06:35:36Z

🎉 Storybook chromatic deployment results

Results
Build result	Link
Storybook preview	Link
Component count	48

mjsdo requested a review from otterp012 July 13, 2023 21:02

mjsdo self-assigned this Jul 13, 2023

mjsdo changed the title ~~Feature/ssafy certification 2 #65~~ 학생 인증 완료, 유저 정보 등록 리팩터링 Jul 13, 2023

mjsdo changed the title ~~학생 인증 완료, 유저 정보 등록 리팩터링~~ 학생 인증 기능 추가, 유저 정보 등록 리팩터링 Jul 13, 2023

mjsdo mentioned this pull request Jul 14, 2023

스토리 카테고리 분류 #114

Closed

5 tasks

mjsdo added 25 commits July 14, 2023 21:32

feat: 스토리북 유틸리티 추가

435c447

feat: NameCard 추가

7ef22d8

feat: seconds 디폴트 값 추가

2c013b4

feat: Track Type null 추가

a08fc86

feat: PreviewCertifiedMyInfo 추가

88daf97

fix: 타입 수정

173b0f3

feat: 학생 인증 성공 케이스 핸들링

4803bac

feat: Button, MainLayout 스타일 업데이트

547e58b

feat: RollingAllTracks 추가

8222a75

feat: IntroStudentCertification 페이지 추가

e9072c2

feat: setMyInfo 파라미터 업데이트

036185d

- `undefined`도 세팅할 수 있도록 변경

feat: gutter -> paddingX 이름 변경

3155768

refactor: UserRegisterForm Context, Layout 삭제

6d4589b

refactor: UserRegisterFormValues 타입 추가, Question 삭제

4da6f49

refactor: css 업데이트

745a0fc

refactor: 유저정보 등록 페이지 submit handler 추가

16fd270

feat: intro page routes 추가

9714d3f

chore: mock api 업데이트

e82e13a

chore: storybook 업데이트

fb20f2d

fix: undefined 세팅 안되는 문제

9b5d2dd

- undefined가 직렬화 불가능해서 undefined로 세팅이 안되는듯 (아예 무시됨)

feat: IntroSsafyCertificationPage 스토리 추가, 조건 오류 수정

d01e634

fix: GlobalModal 스토리북 전역에서 렌더링하도록 변경

301d1a3

fix: router 훅이 아니라 전역 router 사용하고 있던것 수정

4f264bc

feat: 스토리북에 Toaster 추가

33c1f2b

feat: SignIn, StudentCertification Page 스토리북 업데이트

166139d

mjsdo added 9 commits July 14, 2023 21:32

feat: RollingAllTracks 스토리 추가

7e6f4f2

feat: RedirectionGuide 스토리 추가

303649c

feat: 학생 인증 유도 페이지 버튼 텍스트 업데이트

2d1eb3a

- 유저 정보에 따라 텍스트 다르게 표시 - ssafyMember가 아닌 경우 - 이미 인증된 유저인 경우 - 인증하지 않은 유저인 경우

fix: 스토리 msw 핸들러 관련 버그 수정

234174d

fix: 버튼 텍스트 표시

6cff1a4

fix: 스토리 오타 수정

088425d

parameters.msw.handler -> parameters.msw.handlers

refactor: page min height 추가

437ac6f

refactor: page layout

210b1ca

refactor: page layout

22a715b

mjsdo force-pushed the feature/ssafy-certification-2-#65 branch from b802334 to 22a715b Compare July 14, 2023 12:32

mjsdo commented Jul 14, 2023

View reviewed changes

feat: 회원가입 이후, ssafyMember 구분 없이 intro 페이지로 리다이렉션

5a374a3

mjsdo commented Jul 14, 2023

View reviewed changes

otterp012 reviewed Jul 16, 2023

View reviewed changes

otterp012 approved these changes Jul 16, 2023

View reviewed changes

otterp012 reviewed Jul 16, 2023

View reviewed changes

src/components/UserRegisterForm/Fields/Year.tsx Show resolved Hide resolved

otterp012 approved these changes Jul 16, 2023

View reviewed changes

mjsdo merged commit 0ba538e into main Jul 17, 2023

mjsdo mentioned this pull request Jul 17, 2023

<RecruitCard /> #119

Closed

5 tasks

mjsdo deleted the feature/ssafy-certification-2-#65 branch July 21, 2023 17:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

학생 인증 기능 추가, 유저 정보 등록 리팩터링 #111

학생 인증 기능 추가, 유저 정보 등록 리팩터링 #111

mjsdo commented Jul 13, 2023 •

edited

Loading

mjsdo left a comment •

edited

Loading

mjsdo Jul 14, 2023

mjsdo Jul 14, 2023

mjsdo Jul 14, 2023

mjsdo Jul 14, 2023

otterp012 Jul 16, 2023

mjsdo Jul 14, 2023

mjsdo Jul 14, 2023

mjsdo Jul 14, 2023

otterp012 Jul 16, 2023

mjsdo Jul 14, 2023

otterp012 Jul 16, 2023 •

edited

Loading

otterp012 Jul 16, 2023 •

edited

Loading

mjsdo Jul 17, 2023

otterp012 Jul 16, 2023

mjsdo Jul 17, 2023

github-actions bot commented Jul 17, 2023

학생 인증 기능 추가, 유저 정보 등록 리팩터링 #111

학생 인증 기능 추가, 유저 정보 등록 리팩터링 #111

Conversation

mjsdo commented Jul 13, 2023 • edited Loading

Issues

구분

주요 변경점

스크린샷

기타

mjsdo left a comment • 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

otterp012 Jul 16, 2023 • edited Loading

Choose a reason for hiding this comment

otterp012 Jul 16, 2023 • 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

github-actions bot commented Jul 17, 2023

🎉 Storybook chromatic deployment results

mjsdo commented Jul 13, 2023 •

edited

Loading

mjsdo left a comment •

edited

Loading

otterp012 Jul 16, 2023 •

edited

Loading

otterp012 Jul 16, 2023 •

edited

Loading