로그인 UI 변경 #168

Im-younique · 2024-06-04T01:57:16Z

closed #164

로그인 UI 변경 _ Figma 디자인에 맞게 수정

Im-younique

UI 변동사항 위주라 로직은 크게 변하지 않았습니다~

client/public/images/check.png

Im-younique · 2024-06-04T01:59:03Z

client/src/app/login/components/LoginForm/index.tsx

아이디와 비밀번호로 로그인하는 폼을 컴포넌트로 분리하는게 낫다고 생각하여 분리하며 스타일 수정

Im-younique

로그인으로 이동하는 걸 조작하다 보니 네비게이터를 좀 건드리게 되어서 로직이 추가된 부분이 있습니다 확인해주시고 코멘트 달아주세요~

client/src/components/Navigator/index.tsx

Im-younique · 2024-06-07T07:44:12Z

client/src/hooks/common/useClickAway.ts

Dropdown에 사용된 훅으로 드롭다운 메뉴 바깥의 아무대나 클릭했을 때 dropdown메뉴가 자연스럽게 닫히는 것을 구현

Im-younique · 2024-06-07T07:44:42Z

client/src/hooks/common/useServerLoginCheck.ts

초기 서버로딩에서 로그인 여부를 체크할 수 있는 커스텀 훅

Im-younique · 2024-06-07T07:45:08Z

client/src/hooks/common/useClientLoginCheck.ts

초기 서버로딩에서 받은 initialUserLogin 여부와 더불어 이후 CSR로 로그인 여부를 체크할 수 있는 커스텀 훅

Im-younique · 2024-06-07T07:46:52Z

client/src/lib/redux/store.ts

+const createNoopStorage = () => {
+  return {
+    getItem() {
+      return Promise.resolve(null);
+    },
+    setItem(value: string) {
+      return Promise.resolve(value);
+    },
+    removeItem() {
+      return Promise.resolve();
+    },
+  };
+};
+
+const storage =
+  typeof window === 'undefined'
+    ? createNoopStorage()
+    : createWebStorage('local');


ServerSide에서 redux-persist를 사용했을 때 발생하는 버그를 방지하기 위해 해당 코드가 추가되었습니다.

이슈내용

리덕스랑 ssr이 호환성이 좋지 않은가 보군...

Im-younique · 2024-06-07T07:47:21Z

client/yarn.lock

@@ -7992,11 +7992,6 @@ neo-async@^2.5.0, neo-async@^2.6.2:
  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==

-next-redux-wrapper@^8.1.0:


해당 패키지를 app router에서 지원되지 않는다고 합니다 그래서 삭제하였습니다.

bae-sh · 2024-06-07T08:48:07Z

client/src/app/login/components/LoginForm/index.tsx

+        try {
+          const userData = await userManager.loginUser({ data: sendData });
+          dispatch(logIn(userData));
+          router.push('/');


로그인 완료시에 뒤로가기 하면 어떻게될까? 만약 뒤로가기가 불필요하다면 replace를 써도 될거같아

말해준대로 로그인 시 이전페이지로 가는 것이 더 올바른 작동방식이라고 생각이 들었엉 그렇지만 그냥 router.back()을 쓰자니 앞으로 가기가 남아져서 불편한 감을 느꼈고 replace를 사용하는 방법이 최적의 방법이라 생각했습니다.

그래서 로그인 페이지 이전에 경로를 받기 위해서 documet.referrer를 사용하려 했더니 서버사이드 렌더링에서는 그렇게 여유치 않았고 login 페이지로 이동하는 버튼을 클릭했을 때 sessionStorage에 previousURL값을 저장해두고 로그인 성공시 replace로 이동하는 것으로 로직을 수정했습니다.

만일 다이렉트로 로그인페이지로 왔다면 root로 돌아갈수 있게 하였습니다~

bae-sh · 2024-06-07T11:16:22Z

client/src/hooks/common/useClickAway.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+
+const events: Array<'mousedown' | 'touchstart'> = ['mousedown', 'touchstart'];


이벤트를 2개를 단 이유가 뭐야?

위에도 코멘트 했지만 다른 프로젝트에서 사용했던 훅을 다시 가져오다보니까 이벤트가 두개가 되었는데, 왜 그랬는지 생각해보니까 모바일에서의 사용편의성을 위해 두개로 분리했던거 같아.

사실 onclick 이벤트로 퉁치고 해도 되지만 모바일의 경우 modal이 띄어졌을때 modal 바깥의 부분을 자연스럽게 누르고 modal이 닫히면 그대로 스크롤하는 경우들도 존재하다보니까 touchstart로 분리해뒀던게 UX측면에서 좀 더 도움이 되더라구, 그래서 이벤트를 분리해두고 사용했습니다!

오오 모바일!!

bae-sh · 2024-06-07T11:19:37Z

client/src/hooks/common/useClickAway.ts

+    const handleEvent = (e: ClickEvent) => {
+      !element.contains(e.target as HTMLElement) && saveHandler.current(e);
+    };


이게 어떤 역할을 하는지도 궁금..

드롭다운 박스를 생각하면, 드롭다운 내부의 요소가 클릭됐을 때는 드롭다운이 닫히는 handler의 동작이 이뤄지면 안되는 것이자나, 그래서 ref가 포함한 내부요소를 mousedown이나 touchstart를 했을 때는 handler를 동작시키지 않는 역할을 하는 것이라고 보면 될 것 같아!

bae-sh · 2024-06-07T11:21:40Z

client/src/hooks/common/useServerLoginCheck.ts

+  let initialUserLogin = null;
+
+  if (token) {
+    initialUserLogin = true;
+  } else {
+    initialUserLogin = false;
+  }


const initialUserLogin = !!token

으로도 할 수 있을듯??

천...천젠대? 🤗

bae-sh · 2024-06-07T11:24:57Z

client/src/lib/redux/store.ts

+const createNoopStorage = () => {
+  return {
+    getItem() {
+      return Promise.resolve(null);
+    },
+    setItem(value: string) {
+      return Promise.resolve(value);
+    },
+    removeItem() {
+      return Promise.resolve();
+    },
+  };
+};
+
+const storage =
+  typeof window === 'undefined'
+    ? createNoopStorage()
+    : createWebStorage('local');


리덕스랑 ssr이 호환성이 좋지 않은가 보군...

bae-sh · 2024-06-07T11:35:14Z

client/src/hooks/common/useClickAway.ts

+
+type ClickEvent = MouseEvent | TouchEvent;
+
+const useClickAway = (handler: (e: ClickEvent) => void) => {


만약 ref만 뱉는다면 네이밍을 useClickAwayRef 처럼 지어도 괜찮을 거같아

좀 더 명확한거 같아 반영했습니다!

bae-sh · 2024-06-07T11:40:53Z

client/src/components/Dropdown/Wrapper/index.tsx

+  const ref = useClickAway((e) => {
+    if (!ref.current || !ref.current.parentNode) {
+      return;
+    }
+    if (!ref.current.parentNode.contains(e.target as HTMLElement)) {
+      setDropdownOpen(false);
+    }
+  });


왠지 내생각은 이렇게 검증하는것도 useClickAway안에 넣어버리면 좋을거같은데? 이 훅을 쓸때마다 검증하는 로직을 handler로 넣어주는것 보다 props로 event랑 handler(여기서는 setDropdownOpen(false);) 만 넘겨주기만 해도 될거같은?

해당 로직은 Dropdown에서 유효하게 사용할 수 있는 로직이라고 생각해. 만일 useClickAway라는 것을 modal이나 alert창에서 사용하게 된다면 위에 로직이 아마 바뀌게 될 것이라 확장성을 위해서 handler는 분리해두는 것이 좋다고 생각해!

(다른 프로젝트에서 사용했던 useClickAway를 가져왔다 보니까 그 프로젝트에는 modal에 이 훅을 적용시켰거든 그 때 handler의 동작방식이 달라지게 되더라구!)

Im-younique

리뷰 반영완료했습니다~ 한번 더 확인부탁드릴께요~

Im-younique · 2024-06-08T03:45:20Z

client/src/app/login/components/LoginForm/index.tsx

+        try {
+          const userData = await userManager.loginUser({ data: sendData });
+          dispatch(logIn(userData));
+          router.push('/');


말해준대로 로그인 시 이전페이지로 가는 것이 더 올바른 작동방식이라고 생각이 들었엉 그렇지만 그냥 router.back()을 쓰자니 앞으로 가기가 남아져서 불편한 감을 느꼈고 replace를 사용하는 방법이 최적의 방법이라 생각했습니다.

그래서 로그인 페이지 이전에 경로를 받기 위해서 documet.referrer를 사용하려 했더니 서버사이드 렌더링에서는 그렇게 여유치 않았고 login 페이지로 이동하는 버튼을 클릭했을 때 sessionStorage에 previousURL값을 저장해두고 로그인 성공시 replace로 이동하는 것으로 로직을 수정했습니다.

만일 다이렉트로 로그인페이지로 왔다면 root로 돌아갈수 있게 하였습니다~

Im-younique · 2024-06-08T03:47:44Z

client/src/components/Dropdown/Wrapper/index.tsx

+  const ref = useClickAway((e) => {
+    if (!ref.current || !ref.current.parentNode) {
+      return;
+    }
+    if (!ref.current.parentNode.contains(e.target as HTMLElement)) {
+      setDropdownOpen(false);
+    }
+  });


해당 로직은 Dropdown에서 유효하게 사용할 수 있는 로직이라고 생각해. 만일 useClickAway라는 것을 modal이나 alert창에서 사용하게 된다면 위에 로직이 아마 바뀌게 될 것이라 확장성을 위해서 handler는 분리해두는 것이 좋다고 생각해!

(다른 프로젝트에서 사용했던 useClickAway를 가져왔다 보니까 그 프로젝트에는 modal에 이 훅을 적용시켰거든 그 때 handler의 동작방식이 달라지게 되더라구!)

Im-younique · 2024-06-08T03:51:52Z

client/src/hooks/common/useClickAway.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+
+const events: Array<'mousedown' | 'touchstart'> = ['mousedown', 'touchstart'];


위에도 코멘트 했지만 다른 프로젝트에서 사용했던 훅을 다시 가져오다보니까 이벤트가 두개가 되었는데, 왜 그랬는지 생각해보니까 모바일에서의 사용편의성을 위해 두개로 분리했던거 같아.

사실 onclick 이벤트로 퉁치고 해도 되지만 모바일의 경우 modal이 띄어졌을때 modal 바깥의 부분을 자연스럽게 누르고 modal이 닫히면 그대로 스크롤하는 경우들도 존재하다보니까 touchstart로 분리해뒀던게 UX측면에서 좀 더 도움이 되더라구, 그래서 이벤트를 분리해두고 사용했습니다!

Im-younique · 2024-06-08T03:54:08Z

client/src/hooks/common/useClickAway.ts

+
+type ClickEvent = MouseEvent | TouchEvent;
+
+const useClickAway = (handler: (e: ClickEvent) => void) => {


좀 더 명확한거 같아 반영했습니다!

Im-younique · 2024-06-08T03:56:04Z

client/src/hooks/common/useClickAway.ts

+    const handleEvent = (e: ClickEvent) => {
+      !element.contains(e.target as HTMLElement) && saveHandler.current(e);
+    };


드롭다운 박스를 생각하면, 드롭다운 내부의 요소가 클릭됐을 때는 드롭다운이 닫히는 handler의 동작이 이뤄지면 안되는 것이자나, 그래서 ref가 포함한 내부요소를 mousedown이나 touchstart를 했을 때는 handler를 동작시키지 않는 역할을 하는 것이라고 보면 될 것 같아!

Im-younique · 2024-06-08T03:57:00Z

client/src/hooks/common/useServerLoginCheck.ts

+  let initialUserLogin = null;
+
+  if (token) {
+    initialUserLogin = true;
+  } else {
+    initialUserLogin = false;
+  }


천...천젠대? 🤗

Im-younique added 8 commits June 3, 2024 14:28

[chore] login, profile Navigation 라우팅 변경

fc3f05e

[chore] 메인로고 컴포넌트 생성

692be84

[feat] 로그인 폼 컴포넌트 분리 및 UI 수정

1758ea1

[feat] 비밀번호 보기 기능 추가

d19fbeb

[chore] 로그인 화면 UI 완성

dc2d6b2

[chore] 로그인 페이지 스타일 수정

8eec5aa

[chore] 로그인 유지 default로 설정

1a52150

[chore] 준비 중인 기능 모달 표시 추가

36fae78

Im-younique added UI 유저 인터페이스 구현 UX 유저 경험 개선 labels Jun 4, 2024

Im-younique self-assigned this Jun 4, 2024

Im-younique commented Jun 4, 2024

View reviewed changes

Im-younique added 11 commits June 5, 2024 12:06

[feat] useClickAway Custom hook 추가

00269fc

[chore] 불필요한 store 파일 제거

0dbfa10

[chore] app-router 이전에 따른 next-redux-wrapper 패키지 제거

9cda4d9

[Add] redux-persist 패키지 추가

81fc2db

[feat] redux-persist 적용 (auth)

29843a0

[feat] Navigator 로그인 체크 로직 추가

3e1b4ca

[fix] redux-persist 서버사이드 에러 제거

251738d

[chore] 불필요한 async 함수 제거

00c45c7

[chore] 비로그인시 네비게이터 수정

be95496

[feat] Dropdown 컴포넌트 생성

403f02a

[feat] ProfileButton내 Dropdown 적용

251a475

Im-younique commented Jun 7, 2024

View reviewed changes

bae-sh reviewed Jun 7, 2024

View reviewed changes

Im-younique added 3 commits June 8, 2024 12:38

[chore] 로그인 성공시 라우팅 수정

beff118

[chore] useClickAwayRef로 네이밍 변경

2ef2507

[chore] useServerLoginCheck 코드 단순화

1dec392

Im-younique commented Jun 8, 2024

View reviewed changes

bae-sh approved these changes Jun 8, 2024

View reviewed changes

Im-younique merged commit df090f9 into dev Jun 8, 2024
1 of 2 checks passed

Im-younique deleted the ui/#164-sign-in branch June 8, 2024 04:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

로그인 UI 변경 #168

로그인 UI 변경 #168

Im-younique commented Jun 4, 2024

Im-younique left a comment

Im-younique Jun 4, 2024

Im-younique left a comment

Im-younique Jun 7, 2024

Im-younique Jun 7, 2024

Im-younique Jun 7, 2024

Im-younique Jun 7, 2024

bae-sh Jun 7, 2024

Im-younique Jun 7, 2024

bae-sh Jun 7, 2024

Im-younique Jun 8, 2024

bae-sh Jun 7, 2024

Im-younique Jun 8, 2024

bae-sh Jun 8, 2024

bae-sh Jun 7, 2024

Im-younique Jun 8, 2024

bae-sh Jun 7, 2024

Im-younique Jun 8, 2024

bae-sh Jun 7, 2024

bae-sh Jun 7, 2024

Im-younique Jun 8, 2024

bae-sh Jun 7, 2024

Im-younique Jun 8, 2024

Im-younique left a comment

Im-younique Jun 8, 2024

Im-younique Jun 8, 2024

Im-younique Jun 8, 2024

Im-younique Jun 8, 2024

Im-younique Jun 8, 2024

Im-younique Jun 8, 2024

		@@ -0,0 +1,37 @@
		import { useEffect, useRef } from 'react';

		const events: Array<'mousedown' \| 'touchstart'> = ['mousedown', 'touchstart'];


		type ClickEvent = MouseEvent \| TouchEvent;

		const useClickAway = (handler: (e: ClickEvent) => void) => {

로그인 UI 변경 #168

로그인 UI 변경 #168

Conversation

Im-younique commented Jun 4, 2024

Im-younique left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Im-younique 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

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

Im-younique 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