[김희진] sprint 10 & 11

[heewls]

요구사항

10, 11 같이 진행했습니다!

기본

• 게시글 등록 페이지 주소는 “/addboard” 입니다.
• 게시판 이미지는 최대 한개 업로드가 가능합니다.
• 각 input의 placeholder 값을 정확히 입력해주세요.
• 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
• 게시글 상세 페이지 주소는 “/board/{id}” 입니다.
• 댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
• 자유게시판 페이지에서 게시글을 누르면 게시물 상세 페이지로 이동합니다.
• 게시글 상세 페이지 주소는 “/board/{id}” 입니다.
• 댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
• 유효한 정보를 입력하고 스웨거 명세된 “/auth/signUp”으로 POST 요청해서 
성공 응답을 받으면 회원가입이 완료됩니다.
• 회원가입이 완료되면 “/login”로 이동합니다.
• 회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.
• 회원가입을 성공한 정보를 입력하고 스웨거 명세된 “/auth/signIp”으로 POST 요청을 하면 로그인이 완료됩니다.
• 로그인이 완료되면 로컬 스토리지에 accessToken을 저장하고 “/” 로 이동합니다.
• 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.
• 로컬 스토리지에 accessToken이 있는 경우 상단바 ‘로그인’ 버튼이 판다 이미지로 바뀝니다.

심화

• 회원가입, 로그인 api를 사용하여 받은 accessToken을 사용하여 게시물 등록을 합니다.
• ‘등록’ 버튼을 누르면 게시물 상세 페이지로 이동합니다.

주요 변경사항

스크린샷

멘토에게

• 죄송합니다... 좀 많습니다🥲 UI 로직들은 이전과 동일해서 비지니스 로직들만 코드리뷰 해주시면 감사하겠습니다!

[kiJu2]

스프리트 미션 하시느라 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

[kiJu2]

죄송합니다... 좀 많습니다🥲 UI 로직들은 이전과 동일해서 비지니스 로직들만 코드리뷰 해주시면 감사하겠습니다!

괜찮습니다 !! 말씀주신대로 비즈니스 로직 위주로 리뷰할게요 ㅎㅎㅎ

[kiJu2]

오호 쿠키를 서버 사이드에서 읽고 대처하셨군요 ? 👍👍

굿굿. NextJS에서 서버사이드의 활용 방법을 잘 이해하신 것으로 보여요 👍

[kiJu2]

layout.tsx에 설정하신 점도 인상깊네요.

레이아웃의 nested 특징을 잘 살리셨네요. 이렇게 된다면 auth 그룹 라우팅에 해당하는 곳들은 해당 레이아웃으로 인해 인가 된 유저들을 효과적으로 구별할 수 있겠어요 👍

[kiJu2]

굿굿 적절한 동적 라우팅이예요 👍👍

NextJs 라우팅을 잘 활용하고 계신데요? 😊😊

[kiJu2]

(의견) 일부 props를 className으로 대체할 수 있을 것 같아요 !

Suggested change

	interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
	children: React.ReactNode;
	fullWidth?: boolean;
	disabled?: boolean;
	className?: string;
	fontSize?: FontSize;
	rounded?: RoundedSize;
	paddingX?: number;
	paddingY?: number;
	}
	export default function Button({
	children,
	fullWidth,
	disabled,
	className,
	fontSize = "18",
	rounded = "40",
	paddingX,
	paddingY,
	...props
	}: ButtonProps) {
	const fontSizeCSS: Record<FontSize, string> = {
	"16": "text-semi16",
	"18": "text-semi18",
	"20": "text-semi20",
	};
	const roundedCSS: Record<RoundedSize, string> = {
	"8": "rounded-lg",
	"40": "rounded-[40px]",
	};
	return (
	<button
	className={clsx(
	"bg-blue flex w-fit items-center justify-center text-white",
	disabled && "bg-gray400",
	fullWidth && "w-full",
	fontSize && fontSizeCSS[fontSize],
	rounded && roundedCSS[rounded],
	className,
	)}
	style={{
	paddingLeft: paddingX,
	paddingRight: paddingX,
	paddingTop: paddingY,
	paddingBottom: paddingY,
	}}
	{...props}
	>
	{children}
	</button>
	);
	}
	interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
	children: React.ReactNode;
	disabled?: boolean;
	className?: string;
	fontSize?: FontSize;
	rounded?: RoundedSize;
	}
	export default function Button({
	children,
	disabled,
	className,
	fontSize = "18",
	rounded = "40",
	...props
	}: ButtonProps) {
	const fontSizeCSS: Record<FontSize, string> = {
	"16": "text-semi16",
	"18": "text-semi18",
	"20": "text-semi20",
	};
	const roundedCSS: Record<RoundedSize, string> = {
	"8": "rounded-lg",
	"40": "rounded-[40px]",
	};
	return (
	<button
	className={clsx(
	"bg-blue flex w-fit items-center justify-center text-white",
	disabled && "bg-gray400",
	fontSize && fontSizeCSS[fontSize],
	rounded && roundedCSS[rounded],
	className,
	)}
	{...props}
	>
	{children}
	</button>
	);
	}

padding, widthFull 등의 props를 className="w-full px-4"처럼 대체해볼 수 있어요. 😊

[kiJu2]

굿굿 ~! props 타입 확장 또한 적절하군요 ! 👍

[kiJu2]

오호.. 엄청 고려하신게 많이 보여요.

FormData 처리, jwt expired 시 재요청 로직, Authorization 헤더 동적 삽입 등 고려해야할 요소들이 잘 녹아있네요. axios를 사용하지 않고 직접 http 클라이언트를 만드시다니, 좋은 학습 경험이 될것이라 생각합니다 👍👍

[kiJu2]

수고하셨습니다 희진님 !!
이번에도 과제를 멋지게 해내셨네요 ㅎㅎㅎ
특히 NextJS를 어떻게 잘 활용할 수 있을지에 대해 고민을 많이한 흔적이 보입니다 😊

희진님은 이번 팀 프로젝트도 멋지게 해내실 수 있을거라 확신합니다 !

과제 수행하시느라 정말 수고 많으셨습니다 🙇‍♂️🙇‍♂️