hanana1253 / crabbook

🦀 CrabBook

링크를 카테고리와 해시태그 등으로 라벨링하여 저장하고, 이에 기반한 추천 링크와 통계그래프를 제공하는 페이지

❓ Problem

Problem1	Problem2

🗓 Duration

2021.10.30 ~ 2021.11.05

👨‍💻 Team : 수집해조

이름	GitHub	Profile	역할
이한결	@hanana1253		사이드바, 해시태그 기반 추천사이트 링크
임소형	@sosoYim		마이페이지, Chart.js 데이터 시각화
박준규	@jkpark104		칸반 보드 구현, 스크랩 링크 Drag & Drop 기능 구현
김정호	@Hoya-kim		링크 객체 설계, 링크 카드 컴포넌트 구현

📚 Skills

• HTML
• CSS(Sass)
• Javascript
• Node.js
• Express
• Open Graph Scraper
• Chart.js
• Cheerio

✨ Features

Responsive Web

Responsive1	Responsive2

Scrap & Categorizing

Scrap	Categorizing

Scrap Analysis

Personal Recommendation

Link to Page

🔗 References

• Webpack
• Express
• open-graph-scraper
• Chart.js | Chart.js
• cheerio-httpcli

crabbook's Issues

Mypage(statistics)

한 것

• Chart.js CDN 임포트
• 임시 Mock data를 store 객체 state에 넣어서 get 방식으로 볼러옴
• 테스트 그래프
  state{
  links: {Array<글을가지고있는데이터>},
  categories: {Array}
  }

해야할 것

• 필요한 그래프들을 다 구현한 다음 그래프 세팅 함수를 만들면 될 듯
• 페이지 디자인을 더 구체적으로 해야 함
• 그래프에 이용될 색 팔레트가 필요함

상세 구현 리스트

• 전체 레이아웃
• 서버와 연결
• 그래프 구현
  • 카테고리 별 링크 비율 원그래프
  • 읽은 링크 / 안 읽은 링크 막대그래프
  • 날짜별 스크랩 / 읽은 링크 잔디밭
  • 최근 스크랩 링크 목록
  • 회원 정보 (아이디, 유저 프로필)

1차 회의록

Done

• 사이드바 : 마크업, 사스 초안
• 칸반 #1
  • 드래그 앤 드롭
• 마이페이지 #2
  • Chart.js cdn 임포트
  • 임시 store-test.js 노션 참조

To do tomorrow

• 기획 발표 준비
• 일정 정하기 -> 마일스톤
• 와이어프레임 완성
• 목 서버 구현
• url 처리 로직
• 폴더 구조

Comments

• 구현이 일찍 될 것 같으니 완성도를 높이자
• 매일 각자의 진행 상황을 공유하는 시간을 가지고 회의록을 남기자

Sidebar

• hover/active 시 요소들의 css 변경
• url submit하면 서버에 보내고 카드 동적생성
• 드래그앤드롭으로 카드 이동

Kanban Page

• 마크업
• 스타일 (SCSS)
• 관리할 state
• Drag & Drop 기능

추천 사이트 링크로 보여주기

• 해시태그를 조합하여 구글에서 검색한 결과 중 하나를 랜덤으로 띄워주는 기능
• 구글 검색결과 스크래핑
• 마크업, 스타일링
• 서버에서 결과물 보내주는 로직