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

[김영운] Sprint10 #687

Conversation

YoungUnKim
Copy link
Collaborator

@YoungUnKim YoungUnKim commented Jun 14, 2024

요구사항

기본

  • 상품 등록 페이지 주소는 “/addboard” 입니다.
  • 게시판 이미지는 최대 한개 업로드가 가능합니다.
  • 각 input의 placeholder 값을 정확히 입력해주세요.
  • 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
  • 회원가입, 로그인 api를 사용하여 받은accessToken을 사용하여 게시물 등록을 합니다.
  • ‘등록’ 버튼을 누르면 게시물 상세 페이지로 이동합니다.
  • 상품 상세 페이지 주소는 “/addboard/{id}” 입니다.
  • 댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
  • 활성화된 ‘등록' 버튼을 누르면 댓글이 등록됩니다

심화

주요 변경사항

스크린샷

image

멘토에게

  • 아직 만드는 도중입니다..
  • 일단 급하게 올려두고 주말도 작업들어갈것 같습니다.
  • 열심히 만들어 보겠습니다..

@YoungUnKim YoungUnKim self-assigned this Jun 14, 2024
@YoungUnKim YoungUnKim added 미완성🫠 죄송합니다.. 순한맛🐑 마음이 많이 여립니다.. labels Jun 14, 2024
@YoungUnKim YoungUnKim requested a review from kiJu2 June 14, 2024 13:03
@kiJu2
Copy link
Collaborator

kiJu2 commented Jun 17, 2024

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

@@ -13,6 +13,7 @@
"next": "13.5.6",
"react": "^18",
"react-dom": "^18",
"react-hook-form": "^7.51.5",
Copy link
Collaborator

Choose a reason for hiding this comment

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

오호 리액트 훅 폼을 사용하시는군요 !

훌륭한 비제어 컴포넌트 라이브러리지요 ~! 추가로 yup이나 joi같은 유효성 검사 툴도 사용해보실 수 있습니다 !
리액트 훅 폼이랑 찰떡이예요 ~!

예시

import { ErrorMessage } from "@hookform/error-message";
import { useForm, Controller } from "react-hook-form";
import { joiResolver } from "@hookform/resolvers/joi";
import { Input } from "@material-ui/core";
import "./styles.css";
import Joi from "joi";

const schema = Joi.object({
  username: Joi.string().min(4).message("4").max(6).message("6").required()
});
export default function App() {
  const { handleSubmit, control } = useForm({
    mode: "onSubmit",
    defaultValues: {
      username: "12345",
      email: ""
    },
    resolver: joiResolver(schema)
  });
  const onSubmit = (e) => {
    e.preventDefault();
    console.log(e);
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="username"
          control={control}
          render={({
            field: { onChange, onBlur, value, name, ref },
            formState: { errors }
          }) => (
            <div>
              <Input value={value} onChange={onChange} onBlur={onBlur} />
              <ErrorMessage
                errors={errors}
                name={name}
                render={({ message }) => <p>{message}</p>}
              />
            </div>
          )}
        />
      </form>
    </div>
  );
}

Comment on lines +5 to +9
export interface IBoardValues {
title: string;
content: string;
imgFile: string | null;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

export가 필요할까요?

해당 페이지에서만 사용하는 것 같아요. export가 필요할까요?
또한, 해당 페이지에서 export가 많아진다는 것은 역할이 많아지는 것과 같아요.
page의 역할이 무엇일까요?
라우팅과 서버 컴포넌트 자원을 내려주는 역할, 그리고 컴포넌트를 보여줄 수도 있지요.

영운님이 생각하시는 page의 역할은 무엇인가요? 😊

Comment on lines +33 to +36
<label htmlFor="title" className={styles.inputText}>
*제목
</label>
<input id="title" className={styles.TitleInput} type="text" placeholder="제목을 입력해주세요" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

굳굳 ! labelinput이 잘 연결 되었군요 !

</label>
<div className={styles.image_button_area}>
<label htmlFor="picture">
<PlusIcon />
Copy link
Collaborator

Choose a reason for hiding this comment

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

오호 svgr을 사용하시는군요 👍

svg는 용량이 적기에 NextJS Image를 굳이 쓰지 않아도 된다고 사료하고 있습니다.
따라서 저도 svgr을 적극적으로 사용하는데 반갑네요 😊

Comment on lines +77 to +108
.TextInput {
width: 100%;
height: 282px;
padding: 16px 24px;
background-color: #f3f4f6;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 400;
text-decoration: none;
color: #9ca3af;
}

.image_button_area {
width: 282px;
height: 282px;
}

.button {
align-items: center;
background-color: #3692ff;
border-radius: 8px;
color: #fff;
cursor: pointer;
display: flex;
font-size: 16px;
font-weight: 600;
height: 42px;
justify-content: center;
min-width: 88px;
padding: 12px 23px;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

클래스 네이밍 표기법이 일관되지 않아요 !

카멜 케이스, 스네이크 케이스, 파스칼 케이스 .. 하나로 통일하는건 어떨까요 ?

Comment on lines +54 to +56
<div>
<button>X</button>
</div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

X에는 button 타입을 추가해야 할 것 같아요.

Suggested change
<div>
<button>X</button>
</div>
<div>
<button type="button">X</button>
</div>

button의 기본값은 submit이므로 X를 눌러도 formonSubmit이 실행될 수 있어요 😊

Comment on lines +27 to +29
<button className={styles.button} type="submit">
등록
</button>
Copy link
Collaborator

Choose a reason for hiding this comment

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

굳굳 ! 여기는 타입을 정확히 명시하였군요 !

@kiJu2
Copy link
Collaborator

kiJu2 commented Jun 17, 2024

수고 많으셨어요 영운님 !!
저랑 멘토링 하면서 꾸준히 "매주 스프린트 무조건 제출하기 !!" 지켜주셔서 감사드려요.
이 약속은 영운님께 도움이 될 것이라고 확신하고 있습니다 !
별도로 궁금하신 점이 있다면 사전질문이나 멘토링 미팅 시간에 질문 주세요 😊😊😊

@kiJu2 kiJu2 merged commit 1cee13f into codeit-bootcamp-frontend:Next.js-김영운 Jun 17, 2024
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.

2 participants