[서미영] Sprint11 #278

myong39 · 2024-07-26T15:00:19Z

요구사항

기본

유효한 정보를 입력하고 스웨거 명세된 “/auth/signUp”으로 POST 요청해서  성공 응답을 받으면 회원가입이 완료됩니다.
회원가입이 완료되면 “/login”로 이동합니다.
회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.
회원가입을 성공한 정보를 입력하고 스웨거 명세된 “/auth/signIp”으로 POST 요청을 하면 로그인이 완료됩니다.
로그인이 완료되면 로컬 스토리지에 accessToken을 저장하고 “/” 로 이동합니다.
로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.
로컬 스토리지에 accessToken이 있는 경우 상단바 ‘로그인’ 버튼이 판다 이미지로 바뀝니다.

심화

로그인, 회원가입 기능에 react-hook-form을 활용해봅니다.

주요 변경사항

Authform과 InputField 공통화 했던 부분을 react-hook-form으로 변경했습니다.

배포사이트

https://7-sprint-mission.vercel.app/

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다~!! 항상 리뷰 감사드립니다😆
TogglePassword(비밀번호 가시성 토글버튼) 컴포넌트를 클릭해서 상태를 변경하면 로그인이나 회원가입 페이지에서 변경된 그대로 로그인이나 회원가입 페이지로 이동해도 적용돼버립니다.
초기화를 하고 싶은데 useEffect로 주소 변경시 isVisible를 false로 업뎃하게 하거나 클린 함수 써도 초기화가 안되는데 방법이 있을까요?
밑에는 참고 스샷입니다~

dev-kjy · 2024-07-29T04:25:41Z

types/AuthTypes.ts

+type ValidationFunction = (input: string) => boolean;
+
+export interface AuthFormProps {
+  mode: "login" | "signup";


문자열 대신 더 특정적인 타입으로 해주신 부분 좋습니다! 👍👍

dev-kjy · 2024-07-29T04:26:54Z

types/AuthTypes.ts

+}
+
+export interface PageConfigType {
+  mode: "login" | "signup";


mode에 대한 타입값인 "login" | "signup" 가 다시 쓰이고 있으므로 별도의 type으로 분리해서 공통화하면 좋을 것 같아요.

dev-kjy · 2024-07-29T04:29:34Z

pages/auth/[mode].tsx

+  const router = useRouter();
+  const queryMode = router.query.mode;
+
+  const mode: AuthFormProps["mode"] =


types/AuthTypes.ts 파일에서 드린 피드백과 비슷한 내용인데요. mode의 경우 여러군데에서 쓰이고 있으므로 별도 타입으로 분리하는 것이 좋아보여요

dev-kjy · 2024-07-29T04:36:45Z

lib/authApi.ts

+    // console.log("사용자:", user);
+    // console.log("액세스 토큰:", accessToken);
+    // console.log("리프레시 토큰:", refreshToken);


콘솔은 PR 업로드 전 지우는 것을 추천드립니다. 😄

다만, 현실적으로 통신을 통해 가져온 값들을 체크하면서 개발하면 편리한 부분이 있는 것은 사실입니다. 🤔 만약, 개발 환경에서 제한적으로 콘솔을 보고 싶은 니즈가 있다면 아래와 같이 작성할도 있습니다.

Suggested change

// console.log("사용자:", user);

// console.log("액세스 토큰:", accessToken);

// console.log("리프레시 토큰:", refreshToken);

if (process.env.NODE_ENV === 'development') {

console.log("사용자:", user);

console.log("액세스 토큰:", accessToken);

console.log("리프레시 토큰:", refreshToken);

}

또한, 별도의 dev logger 의 역할을 하는 함수를 만든다면 조금 더 편하게 작성할 수 있고, 개발 로그 전체를 컨트롤 할 수 있어 조금 더 안전할 것 같네요. (다만, 실제 프로덕션 환경에서 자유롭게 쓰는 것은 고민해봐야 할 것 같습니다.)

const devLog = (...args: any[]): void => { if (process.env.NODE_ENV === 'development') { console.log(...args); } };

dev-kjy · 2024-07-29T04:45:42Z

lib/authApi.ts

+import axios from "axios";
+
+const instance = axios.create({
+  baseURL: "https://panda-market-api.vercel.app/",


현재는 baseURL이 각각의 api파일에서 관리되고 있어 조금 아쉽습니다. 실제 개발을 진행하게 되면 baseURL이 바뀌는 경우가 꽤 흔하기 때문입니다. 백엔드도 개발을 진행하면서 url 자체가 바뀔수도 있고, 아니면 환경에 따라 url이 변경되게 됩니다. (개발 환경, 테스트 환경, QA 환경 등)

이런식으로 상수로 관리하는 것이 더 좋은 방식이라고 볼 수 있을 것 같아요.

// constants/constants.ts const baseURL = 'https://panda-market-api.vercel.app/'

dev-kjy · 2024-07-29T04:51:46Z

components/layout/SearchInput.tsx

@@ -21,7 +22,7 @@ export default function SearchInput({
        placeholder="검색할 상품을 입력해주세요"
        onKeyDown={handleKeyDown}
      />
-      <img className={styles.search} src={searchImg.src} alt="검색 돋보기" />
+      <Image className={styles.search} src={searchImg} alt="검색 돋보기" />


next의 Image 컴포넌트 사용해 주신 부분 좋습니다. 👍

dev-kjy · 2024-07-29T04:53:55Z

components/layout/Header/Header.tsx

+          {!isLogin && <Button href="auth/login">로그인</Button>}
+          {isLogin && <Image src={userImage} alt="유저 로그인 프로필" />}


각각, isLogin이 truthy, falsy할 때 보여주는 컴포넌트이다보니, 이 부분은 삼항연산자가 더 어올리는 것 같아요.

dev-kjy · 2024-07-29T05:01:06Z

components/layout/Auth/EasyLogin.tsx

+          ([
+            key,
+            {
+              href,
+              target,
+              rel,
+              img: { src, alt, width },
+            },
+          ]) => (


구조분해할당을 정말 잘 활용해주셨습니다. 👍👍

다만, Links가 객체라서 map으로 사용할 때 depth가 깊어져 사용하는 부분에서는 약간의 불편함도 있는 것 같습니다. 아예 Links를 배열로 선언하면 조금 더 편하게 쓸 수 있을 것 같아요.

dev-kjy · 2024-07-29T05:27:31Z

components/layout/Auth/AuthConfig.ts

+  PASSWORDCONFIRMATION = "passwordConfirmation",
+}
+
+export const fields: { [id: string]: FieldInfo } = {


Record를 사용해주시면 더 좋을 것 같습니다.

Suggested change

export const fields: { [id: string]: FieldInfo } = {

export const fields: Record<FIELDTYPE, FieldInfo> = {

dev-kjy · 2024-07-29T05:28:59Z

components/layout/Auth/AuthForm.tsx

+import { useRouter } from "next/router";
+import styles from "./Auth.module.scss";
+import Button from "../Button";
+import { useForm, SubmitHandler } from "react-hook-form";


RHF(react-hook-form)을 잘 사용해 주셨습니다 👍

dev-kjy · 2024-07-29T05:31:08Z

미영님, 이번주 과제 제출도 수고 많으셨습니다. 적절한 공통화와 react-hook-form 사용이 돋보이는 내용이었네요. 회원가입 페이지의 경우 로직이 많아 복잡해 지기 쉬운데 적절한 모듈화를 통해 가독성이 좋은 부분이 아주 좋았습니다. 👍👍👍

dev-kjy · 2024-07-29T05:33:32Z

다만, 이번 과제 요구사항은 React 구현인데, 연습을 위해 별도로 Next.js로 구현하신건지 궁금하네요. 🤔

dev-kjy · 2024-07-30T03:02:28Z

TogglePassword(비밀번호 가시성 토글버튼) 컴포넌트를 클릭해서 상태를 변경하면 로그인이나 회원가입 페이지에서 변경된 그대로 로그인이나 회원가입 페이지로 이동해도 적용돼버립니다.
초기화를 하고 싶은데 useEffect로 주소 변경시 isVisible를 false로 업뎃하게 하거나 클린 함수 써도 초기화가 안되는데 방법이 있을까요?
밑에는 참고 스샷입니다~

요 부분은 리뷰 완료하고 나서 확인했네요. 😲
오늘이나 내일 중으로 살펴보고 태그와 함께 피드백 드릴게요~

dev-kjy · 2024-07-30T09:23:57Z

components/layout/Auth/TogglePassword.tsx

+    setVisible(updatedVisible);
+    onPasswordVisible(updatedVisible);
+  };
+


주소의 변경에 따라 isVisible 기본 값을 false로 설정해주는 로직이 필요합니다.
signup과 login 주소를 오가는 과정에서 password 에 해당하는 TogglePassword 컴포넌트는 최초랜더링 이후 리랜더링만 진행되고 있습니다. 이 과정에서 이전에 선택한 상태값이 보존되고 있으므로 페이지가 변화하였을 때는 기본 상태를 변경하는 로직이 필요합니다. 😁

Suggested change

const router = useRouter();

useEffect(() => {

setVisible(false);

}, [router.asPath]);

myong39 added 2 commits July 23, 2024 16:08

refactor: review feedback incorporated

6c69d42

sprint misson11 init

cca4e01

myong39 requested a review from dev-kjy July 26, 2024 15:00

myong39 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Jul 26, 2024

myong39 changed the base branch from main to Next-서미영 July 26, 2024 15:04

myong39 added 6 commits July 28, 2024 20:02

feat: add component for authentication validation

c29749a

feat: integrate signup API

d58480b

feat: integrate signin API

ca03e90

feat: add token management with local storage

979abae

feat: add alert for login failure

992a7e3

refactor: destructure field object in input field

63b05f0

myong39 removed the 미완성🫠 죄송합니다.. label Jul 28, 2024

dev-kjy approved these changes Jul 29, 2024

View reviewed changes

dev-kjy merged commit 7bd1bfb into codeit-bootcamp-frontend:Next-서미영 Jul 29, 2024

dev-kjy reviewed Jul 30, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[서미영] Sprint11 #278

[서미영] Sprint11 #278

myong39 commented Jul 26, 2024 •

edited

Loading

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy Jul 29, 2024

dev-kjy commented Jul 29, 2024

dev-kjy commented Jul 29, 2024

dev-kjy commented Jul 30, 2024

dev-kjy Jul 30, 2024

dev-kjy Jul 30, 2024

		{!isLogin && <Button href="auth/login">로그인</Button>}
		{isLogin && <Image src={userImage} alt="유저 로그인 프로필" />}

	export const fields: { [id: string]: FieldInfo } = {
	export const fields: Record<FIELDTYPE, FieldInfo> = {

+  const router = useRouter();
+  useEffect(() => {
+    setVisible(false);
+  }, [router.asPath]);

[서미영] Sprint11 #278

[서미영] Sprint11 #278

Conversation

myong39 commented Jul 26, 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

dev-kjy commented Jul 29, 2024

dev-kjy commented Jul 29, 2024

dev-kjy commented Jul 30, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

myong39 commented Jul 26, 2024 •

edited

Loading