12월 19일 (일) First Project [2주 프로젝트], (상품업로드 페이지)

남이섬·2021년 12월 19일
0
post-thumbnail
post-custom-banner

상품페이지

  • 데이더 가져오기(storage, category, foodName, quantity, expirationDate)
    • 가져온 데이터 post 요청으로 등록 하기
  • 등록 완료 메세지 보내기
  • 이미지업로드

냉장고 페이지

  • storage(냉장, 냉동, 실온) CSS 추가 수정
  • 삭제버튼 눌렀을때 delete 요청으로 삭제하기

수량 변경

input 박스에 숫자만 입력되도록 설정하는 4가지 방법

  1. 'type'을 'number'로 지정하기
  2. oninput 이벤트, 정규식, replace() 함수 활용하기
  3. pattern 속성 활용하기

1. 'type'을 'number'로 지정하기

숫자옆에 숫자를 추가하거나 뺄수있는 버튼이 생긴다

난 플러스, 마이너스 버튼을 사용하고 싶기 때문에 다른방법을 생각해보자

input type 'number'에서 옆에 버튼 삭제하기

input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

추가적으로 해야할 부분

  • 상품페이지
    • 이미지 업로드 (12/20 (월))
    • 등록완료 메세지 구현 (12/21 (화)) / 로그인 완료 / 로그아웃 완료 / 회원가입 완료
  • 냉장고 페이지
    • delete 버튼 (12/20 (월))
    • product position absolute 부분 수정 (12/21 (화))
  • 로그인 페이지, 상품업로드페이지, 회원가입페이지
    • Bare minimun: 새로운 페이지로 이동하여 구현 (12/21 (화))
    • Advanced: 모달창으로 구현

OAuth 관련

참고

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=hjinha2&logNo=221171730314

https://www.daleseo.com/google-oauth/

profile
즐겁게 살자
post-custom-banner

0개의 댓글