✨ 프로젝트 명 : 다큐체인 모니터링 뷰어

👉 프로젝트 설명

SeSAC (청년취업사관학교) 에서 진행 된 기업연계 프로젝트 (주)디지털존의 블록체인 프로젝트인 docuchain의 관리자 페이지 구현

• 블록체인 실시간 데이터를 제공

• 관리자 권한여부에 따라서 접근 설정

• 차트 라이브러리를 이용한 시각화

👩‍💻 팀명 & 팀원 소개 👨‍💻

• 팀명 : 행복회로(우리는 언제나 최고의 시나리오만을 생각한다.)
• 팀원 : 옥주희, 문승현, 김원석, 이가은, 박용재, 강신우

🔗 배포 링크 / 프로젝트 결과물

• 개발기간 : 2022년 12월 19일 ~ 2023년 01월 19일

✨ 로그인 기능(권한에 따른 데이터 차등 접근 설정)

✨ 다크 모드 구현

🔗  👉 프로젝트를 자세히 보고싶다면 클릭하세요!

🛠 구현 기능

• JSX 태그 이용하여 웹페이지 구성
  
• ReCharts를 활용하여 분석 및 차트를 구현
  
• MUI 테이블을 활용하여 표를 구현
  
• Scss를 이용하여 전체적인 스타일을 작업
  
• onClick, onChange 등 이벤트 핸들링 작업
  
• props를 이용한 컴포넌트 간 데이터 전달
  
• firebase를 활용한 로그인 기능 구현
  
• React-router를 이용한 라우팅 사용하여 페이지 이동 구현
  
• Firebase에 임의데이터 저장 후 활용 실시간 데이터 출력
  
• 관리자 권한 여부에 따른 접근 설정 구현
  

📑 초안 / 프로젝트 레이아웃

🔗 Figma - docuchain Flow chart 자세히 보기

💡 Menu Structure ( 메뉴구조 )

💡 Flowchart ( 플로우차트 ) / 대시보드, 블록, 트랜잭션

💡 Flowchart ( 플로우차트 ) / 노드, 서비스, 사용자정보

📁 폴더 구조

🗃 Project Folder

📁docuchain
├── 📁vscode
├── 📁node_modules
├── 📁public
└── 📁src
    ├── 📁apis
    ├── 📁lib
    ├── 📁pages
    │    ├── 📁asset
    │    ├── 📁block
    │    │     ├── 📁components
    │    │     ├── 📁style
    │    │     └── 📁utils
    │    ├── 📁common
    │    │     ├── 📁components
    │    │     ├── 📁style
    │    │     └── 📁utils
    │    ├── 📁dashboard
    │    │     ├── 📁dist
    │    │     └── 📁utils
    │    ├── 📁myinfo
    │    │     ├── 📁components
    │    │     └── 📁utils
    │    ├── 📁node
    │    │     ├── 📁components
    │    │     └── 📁utils
    │    ├── 📁service
    │    │     ├── 📁components
    │    │     ├── 📁style
    │    │     └── 📁utils
    │    ├── 📁trans
    │    │     ├── 📁components
    │    │     ├── 📁style
    │    │     └── 📁utils
    │    └──📁usermanaging
    │          ├── 📁components
    │          └── 📁utils
    ├── 📁recoil
    └── 📁routes


.docu.json
.package-lock.json
.package.json
.yarn.lock
.gitignore
.env.local

⚙ 기술 스택

• 프론트 : HTML,SCSS,React, react-hook-form
• 백엔드 : Firebase
• 상태관리 : Recoil
• 배포 : vercel
• 협업관리 : Notion, github
• 툴 : Adobe Photoshop, Adobe Illustrator, Figma,

🛠 사용 기술

FE

Frameworks & Platforms

DB & BE

cooperataion tools

---

🔗   👉 프로젝트를 자세히 보고싶다면 클릭하세요!