[이승헌] sprint10

[heony704]

요구사항

스프린트 미션 10 Figma 디자인 확인하러 바로가기

기본

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• 기존의 React, Typescript로 구현한 프로젝트와 별도로 진행합니다.
• Next.js를 사용합니다

게시글 등록 페이지

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

게시글 상세 페이지

• 게시글 상세 페이지 주소는 “/boards/{id}” 입니다.
• 댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
• 활성화된 ‘등록' 버튼을 누르면 댓글이 등록됩니다

주요 변경사항

• 메인 페이지 구현
• 게시글 상세 페이지 구현
• 상품 상세 페이지 구현

스크린샷

🚀 배포 페이지: heony704-pandamarket-10.netlify.app/boards/11

게시글 상세 페이지

멘토에게

• 미완성입니다 🥲

[lunaticscode]

axios.defaults.baseURL = "https://panda";
axios.defaults.headers.common['Content-Type'] = "application/json";
axios.defaults.timeout = 5000;

const instance = axios.create();

// [Client] ------ [interceptor] --------> [Server]
instance.interceptors.request.use( req => { }, err => { } );

// [Client] <------ [interceptor] -------- [Server]
instance.interceptors.response.use( res => { }, erro => { } );

[lunaticscode]

Button, Input 같이 최소 단위 컴포넌트 같은 경우, 보통 forwardRef 적용을 많이 합니다.

이유는 해당 tag의 native 이벤트(클릭, 포커스, 블러 등)를 컴포넌트 외부에서도 조정할 수 있게 끔 하기 위해서입니다.

interface ButtonProps extends PropsWithChildren {};
const Button = forwardRef<HTMLButtonElement, ButtonProps>( (props, ref) => {
   const {children} = props;
   return (
     <button ref={ref}>{children}</button> 
  )
})


// ./page or ./component
const DummyComponent= () => {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const hanldeClickTrigger = () => {
      buttonRef.current?.click();
   }
   return ( 
      <>
       <Button ref={buttonRef} onClick={() => console.log("cliced by trigger-button")} />
       <button onClick={hanldeClickTrigger}>trigger-button</button> 
      <> 
    )
}