Sprint mission 3

[goeulho]

스프린트 미션3(v2) 요구사항

스프린트 미션 3의 요구사항은 두 가지 주요 API(Article API와 Product API)를 사용하여 다양한 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 구현하는 것입니다.
API 명세 확인하러 가기
위 명세를 참고해 아래 요구사항에 따라 함수들을 구현하세요.

기본 요구사항

공통

• Github에 스프린트 미션 PR을 만들어 주세요.
• 'https://panda-market-api-crud.vercel.app/docs/#/Article' API를 이용하여 아래 함수들을 구현해 주세요.
  • getArticleList() : GET 메서드를 사용해 주세요.
    • page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.
  • getArticle() : GET 메서드를 사용해 주세요.
  • createArticle() : POST 메서드를 사용해 주세요.
    • request body에 title, content, image 를 포함해 주세요.
  • patchArticle() : PATCH 메서드를 사용해 주세요.
  • deleteArticle() : DELETE 메서드를 사용해 주세요.
• fetch 혹은 axios 를 이용해 주세요.
  • 응답의 상태 코드가 2XX가 아닐 경우, 에러메시지를 콘솔에 출력해 주세요.
• .then() 메서드를 이용하여 비동기 처리를 해주세요.
• .catch() 를 이용하여 오류 처리를 해주세요.
• 'https://panda-market-api-crud.vercel.app/docs/#/Product' API를 이용하여 아래 함수들을 구현해 주세요.
  • getProductList() : GET 메서드를 사용해 주세요.
    • page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.
  • getProduct() : GET 메서드를 사용해 주세요.
  • createProduct() : POST 메서드를 사용해 주세요.
    • request body에 name, description, price, tags, images 를 포함해 주세요.
  • patchArticle() : PATCH 메서드를 사용해 주세요.
  • deleteArticle() : DELETE 메서드를 사용해 주세요.
• async/await 을 이용하여 비동기 처리를 해주세요.
• try/catch 를 이용하여 오류 처리를 해주세요.
• 구현한 함수들을 아래와 같이 파일을 분리해 주세요.
  • export를 활용해 주세요.
  • ProductService.js 파일 Product API 관련 함수들을 작성해 주세요.
  • ArticleService.js 파일에 Article API 관련 함수들을 작성해 주세요.
• 이외의 코드들은 모두 main.js 파일에 작성해 주세요.
  • import를 활용해 주세요.
  • 각 함수를 실행하는 코드를 작성하고, 제대로 동작하는지 확인해 주세요.

스프린트 미션3 요구사항

기본요구 사항

로그인, 회원가입 페이지 공통

• Github에 스프린트 미션 PR을 만들어 주세요.
• 로그인 및 회원가입 페이지의 이메일, 비밀번호, 비밀번호 확인 input에 필요한 유효성 검증 함수를 만들고 적용해 주세요.
• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
• Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
• [] 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다.