Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[손지은] week13 #501

Conversation

wise-Ag
Copy link
Collaborator

@wise-Ag wise-Ag commented Dec 3, 2023

요구사항

기본

  • ‘/folder’ 페이지를 Next.js 프로젝트에 맞게 변경 및 이전 했나요?
  • ‘/shared’ 페이지를 Next.js 프로젝트에 맞게 변경 및 이전 했나요?
  • 다른 페이지로 이동이 필요한 곳에 next/link의 Link를 적용했나요?
  • Input 컴포넌트에 값이 없는 경우 회색의 placeholder값을 볼 수 있나요?
  • Input 컴포넌트에 focus in 하면 파랑색 테두리를 볼 수 있나요?
  • Input 컴포넌트에 눈 모양 아이콘을 누르면 비밀번호 가리기/보기 기능이 토글 되나요?
  • Input 컴포넌트에 값이 에러케이스일 경우 빨강색 테두리와 에러 메세지를 볼 수 있나요?
  • Input 컴포넌트에서 focus out 하면 실행할 함수를 설정할 수 있나요?

주요 변경사항

  • Next.js로 마이그레이션 했습니다.
  • Input컴포넌트를 구현하여 사용하려 했으나 에러 컨트롤이 어려워 signin, signup 각각 html을 구현했습니다. 다음주엔 Input컴포넌트를 만들고 재사용해보겠습니다.
  • 공통 에러확인 함수는 handleSignError.ts로 분리했습니다.
  • signin signup 스타일이 같아 하나의 css파일을 만들고 같은 클래스명을 사용했습니다.
  • vercel을 사용하여 배포했습니다.

스크린샷

배포주소 : https://jieun.vercel.app/signin

멘토에게

  • 홈페이지와 404페이지는 미완성입니다. 다음주까지 하겠습니다.
  • signin, signup 페이지가 꽤나 복잡해보이는데 Input컴포넌트화가 필수인 거 같습니다ㅜㅜ
  • 개선할 점 가감없이 말해주세욥

@wise-Ag wise-Ag added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Dec 3, 2023
@wise-Ag wise-Ag requested a review from llucas93 December 3, 2023 16:49
@wise-Ag wise-Ag changed the base branch from main to part3-손지은 December 4, 2023 05:28
@@ -0,0 +1,69 @@
import { createContext, useEffect, useState } from "react";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

next에서는 폴더를 기준으로 라우팅이 동작됩니다.
pages/folder/index.tsx 처럼 구분해주시는게 좋아보여요 👍
Routing 참고링크

import EyeOffIcon from "@/src/assets/img/eye-off.svg";
import EyeOnIcon from "@/src/assets/img/eye-on.svg";
import clsx from "clsx";

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네 input쪽은 지은님 말씀하신대로 분리가 필요해보입니다 👍
(의견 )(useInput으로 input 로직들만 훅으로 관리해도 좋을것같구요)

const [emailErrorMessage, setEmailErrorMessage] = useState("");
const [pwdErrorMessage, setPwdErrorMessage] = useState("");
const [pwdType, setPwdType] = useState("password");
const emailInput = useRef<any>("");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

타입 any로 선언하신 이유가 있을까요? (any는 지양합시다 👍 )


const handleInputChange = (
e: React.ChangeEvent<HTMLInputElement>,
inputRef: React.MutableRefObject<string>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

inputRef는 따로 파라미터로 받는 이유가 있을까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onChange가 emailInput에서 일어나면 emailInput의 value를, pwdInput에서 일어나면 pwdInput의 value를 바꿔주기 위해서입니다.

}

export async function getFolder({ id }: { id: number }) {
const res = await fetch(`${API.baseURL}/users/${id}/folders`);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

next자체 fetch를 제공해줍니다 추후 리팩토링이나 다음 과제 하실때 아래 링크 참고하시는걸 추천드려요 👍
nextjs Data Fetching

@llucas93
Copy link
Collaborator

llucas93 commented Dec 4, 2023

고생하셨습니다 지은님!
input 컴포넌트만 잘 분리해서 사용한다면 더 좋을것같아요
기타 피드백은 코멘트 달았습니다 👍

@llucas93 llucas93 merged commit 74cd6ec into codeit-bootcamp-frontend:part3-손지은 Dec 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants