/coloseum_sheet

물류창고 데이터 조회 기능을 가진 웹을 담은 레포지토리입니다.

Primary LanguageJavaScript

상품 등록 과제

서비스 링크 : https://fervent-tereshkova-9b041a.netlify.app/

👏 프로젝트 소개

json-server 로 만든 가상의 서버에서 대화 목록을 가져와 대화 목록을 화면에 출력한 후 대화에 참여한 사용자가 메시지를 전송할 수 있도록 하는 페이지 제작.

🙋‍♀️🙋‍♂️ 팀원

프로필 이름 담당 기능
우종원
박중섭
이태림
임수영

🚀 스택

React

⚙ 설치

# clone the project
$ git clone https://github.com/console-lo9/README-TEMPLATE.git

# install modules
$ cd README-TEMPLATE
$ npm ci || yarn

# start
$ npm start || yarn start

⠀
⠀  You can now view this project in the browser.
⠀  http://localhost:3000/
⠀

🔗 의존성

  "dependencies": {
    "axios": "^0.25.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.4"
  },

📂 파일 구조

 ├── public
 └── src
     ├── components
     │   ├── BuyerRecommendImg
     │   └── UploadImages
     ├── layout
     │   ├── Inputs
     │   └── Section
     ├── pages
     ├── store
     │   └── Contexts
     └── utils
         └── svg

작성 후 삭제 참고 (https://www.lesstif.com/lpt/linux-tree-54952142.html)

$ tree -N -L 2 -d -I "node_modules"

또는 vscode File-tree-generator extension 사용

✨ 구현 사항

  • 노출 기한 설정
    • 제한 없음이 default
    • 자동 미노출 상태
  • 판매 기한 설정
    • 제한 없음이 default
    • 자동 미노출 상태
  • 카테고리 지정
    • 체크 박스 선택을 통해 해당 상품에 카테고리 지정 가능
    • 체크 박스 지정 해제로 카테고리 지정 해제
    • 선택된 카테고리 X 버튼으로 카테고리 지정 해제
    • 최소 1개 이상의 카테고리 지정 필수
  • 필터 태그 지정
    • 필터 태그 검색창 포커스 시 모든 필터 태그 제공
    • 검색 결과 없는 경우 검색 결과 없음 안내
    • 검색한 필터 태그 TAP 시 해당 필터 태그 지정
      • 이미 지정되어 있는 태그 재선택하는 경우 기존 지정 태그 유지
    • 지정된 태그 검색창 아래에 표시

🗺 한 눈으로 보는 구현 기능

  1. 첫 번째 기능

  2. 두 번째 기능

💡 과제 후기

우종원 🍀

박중섭 ✨

이태림 🐯

임수영 🐧