Coder Social home page Coder Social logo

crucial-sub / requests-for-partner Goto Github PK

View Code? Open in Web Editor NEW

This project forked from console-lo9/requests-for-partner

1.0 0.0 0.0 1.21 MB

요청서를 관리하는 과제 구현 내용을 담은 레포지토리입니다

HTML 2.50% TypeScript 97.50%

requests-for-partner's Introduction

요청서 관리 과제

서비스 링크 :

👨‍👨‍👦‍👦 팀원

이름 Github 담당 기능
우종원 Ubermensch0608 카드 컴포넌트 구현, 재사용 가능 컴포넌트 구현, 컴포넌트 분리
박중섭 crucial-sub 반응형 헤더 & 메뉴 구현
이태림 ttaerrim 필터링 기능 구현
임수영 penguin311 CRA 초기 세팅, 토글 기능 구현

담당 기능은 일단 pull request 보고 적었는데 수정하시면 돼요~~!

⚙ 설치

# clone the project
$ git clone https://github.com/console-lo9/requests-for-partner.git

# install modules
$ cd requests-for-partner
$ npm ci

# start
$ npm run dev

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

🔗 의존성

  "dependencies": {
        "@types/jest": "^27.4.0",
        "@types/node": "^16.11.22",
        "@types/react": "^17.0.39",
        "@types/react-dom": "^17.0.11",
        "axios": "^0.25.0",
        "concurrently": "^7.0.0",
        "json-server": "^0.17.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "5.0.0",
        "styled-components": "^5.3.3",
        "styled-normalize": "^8.0.7",
        "typescript": "^4.5.5",
        "web-vitals": "^2.1.4"
    },

안 쓰는 패키지 있으면 삭제하고 올리기

📂 파일 구조

├── public
└── src
    ├── assets
    ├── components
    │   ├── Cards
    │   ├── Filter
    │   ├── Header
    │   └── Toggle
    ├── layout        # 재사용 가능 컴포넌트
    ├── pages
    └── utils
        └── constants   # 상수 관리

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

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

또는 vscode File-tree-generator extension 사용

✅ 구현 사항

  • typescript 구현

  • 헤더

  • json-server 사용

    • concurrently 라이브러리 사용해 json-server와 react 동시 실행
  • 견적 요청 카드

    • 프로젝트 명
    • 요청한 고객사
    • 고객의 희망 납기일
    • 요청한 도면 개수
    • 요청한 제품 총 수량
    • 가공 방식: 도면 별로 밀링, 선반 중 한 가지 방식 선택
    • 재료: 도면 별로 한 가지 재료 선택
      • ❗️ 재료 필터의 합금강을 스테인리스강으로 수정
    • 카드 전체 영역에 마우스 hover시 보더 스타일
  • 필터링

    • 가공 방식 필터가 선택되면 해당 방식 조건이 포함된 카드 모두 노출
    • 재료 필터 선택되면 해당 재료 조건 포함된 카드 모두 노출
    • 가공 방식과 재료 필터가 둘 다 선택되면 교집합 노출
    • 필터링 리셋 누르면 전체 필터 선택 해제
  • 토글

    • 상담 중인 요청만 보기 토글 활성화하면 상담 중 뱃지가 달린 카드만 노출
  • 빈 화면일 때 '조건에 맞는 견적 요청이 없습니다.' 문구 출력

  • 반응형 구현

    • 햄버거 메뉴 아이콘 탭하면
      • 백그라운드 #000000 50%
      • 메뉴 화면이 왼쪽에서 들어옴
    • 백그라운드 영역 탭하면 메뉴 close

🗺 스크린샷

requests-for-partner's People

Contributors

ubermensch0608 avatar ttaerrim avatar crucial-sub avatar

Stargazers

Roman avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.