Frontend

✏️ How to use

1. Cloning

$ git clone https://github.com/Dayflt/Frontend.git

2. Install Packages & Run ⚛️

• install packages

  $ cd Frontend
  $ npm install
  

• run develop cilent

  $ npm start
  

  Checkout web service at http://localhost:3000

🧾 NPM-Packages (libraries)

"@emotion/core"
"@emotion/react"
"@testing-library/jest-dom"
"@testing-library/react"
"@testing-library/user-event"
"axios"
"bootstrap"
"bootstrap-icons"
"bootswatch"
"react"
"react-dom"
"react-notifications-component"
"react-record-webcam"
"react-router-dom"
"react-scripts"
"react-spinners"
"web-vitals"

💡 Tech Stack

Frontend

• 
• 
• 
• 
• 

etc

• 
• 
• 

🔧 Directory Structure

├── Frontend/
    ├── public/
    │    ├── index.html                           - React 프로젝트 표시(favicon, title설정)
    │    └── logo.ico                             - 웹페이지 favicon
    ├── package.json & package.lock.json          - 라이브러리 관리 파일 
    ├── node_modules
    └── src/ 
         ├── index.js & index.css                 - React 프로젝트 파일
         ├── App.js & App.css                     - page component들 관리 파일 
         ├── App.test.js & setupTest.js
         ├── reportWebVitals.js
         ├── api.jsx                              - baseURL 설정
         └── page/
   	         ├── css /                        - 컴포넌트들의 css
   	         ├── imgs /                       - 컴포넌트들의 image
   	         ├── Gallery.js                   - 갤러리 페이지
   	         ├── Home.js                      - 메인 페이지
   	         ├── Preview.js                   - preview 페이지
   	         ├── Record.js                    - 웹캠 페이지
   	         ├── Result.js                    - 결과물 페이지
   	         ├── Selection.js                 - 사진 선택 페이지
   	         └── components/  
                      └── Modal.js                - 결과물의 정보 입력 팝업창