서비스 소개

<aside> 💡 알고리즘 문제 사이트에서 통과한 소스 코드를 손쉽게 업로드할 수 있게 한다.

</aside>

목표

Chrome Extension을 이용하여 알고리즘 문제 사이트에서 필요한 정보를 파싱하여, 자신이 원하는 툴에 손쉽게 업로드 할 수 있게 한다.

🚀 Stacks

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/01bb17aa-9d8a-4b5f-9752-0100651a63e0/246e5bf0-1549-49d0-af01-05da5d24a10e/pngwing.com_(3).png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/01bb17aa-9d8a-4b5f-9752-0100651a63e0/246e5bf0-1549-49d0-af01-05da5d24a10e/pngwing.com_(3).png" width="40px" /> HTML

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/01bb17aa-9d8a-4b5f-9752-0100651a63e0/5e68322b-c560-4299-9d9c-1b80fc230e0e/pngwing.com_(1).png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/01bb17aa-9d8a-4b5f-9752-0100651a63e0/5e68322b-c560-4299-9d9c-1b80fc230e0e/pngwing.com_(1).png" width="40px" /> CSS(SCSS)

</aside>

JavaScript

</aside>

🛠 Tools

<aside> <img src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png" alt="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png" width="40px" /> Git

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/01bb17aa-9d8a-4b5f-9752-0100651a63e0/b636f03b-13b1-4281-91a2-adbfb8aee8b7/icons8-visual-studio-280.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/01bb17aa-9d8a-4b5f-9752-0100651a63e0/b636f03b-13b1-4281-91a2-adbfb8aee8b7/icons8-visual-studio-280.png" width="40px" /> VSCode

</aside>

<aside> <img src="https://img.icons8.com/fluency/48/docker.png" alt="https://img.icons8.com/fluency/48/docker.png" width="40px" /> Docker

</aside>

👥 Collaboration

<aside> <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="https://cdn-icons-png.flaticon.com/512/25/25231.png" width="40px" /> GitHub

</aside>

<aside> <img src="https://cdn.icon-icons.com/icons2/2389/PNG/512/notion_logo_icon_145025.png" alt="https://cdn.icon-icons.com/icons2/2389/PNG/512/notion_logo_icon_145025.png" width="40px" /> Notion

</aside>

UML

sequenceDiagram
	title authentication
	autonumber
	
	actor user
	participant pp as popup page
	participant bg as background
	participant p as platform
	participant st as store
	
	user->>pp: github 인증 요청
	pp->>bg: github 인증 페이지 경로 요청
	bg->>pp: 인증 페이지 주소 반환
	pp->>user: 인증 페이지 이동
	user->>p: access token 요청
	p->>user: access token을 담은 redirect page(github 메인 페이지)로 이동
	user->>bg: <<Event>> access token 전달
	bg->>st: access token 저장
	bg->>pp: 새로고침 요청

sequenceDiagram
	title github uploading
	autonumber
	
	actor user
	participant p as popup page
	participant br as browser
	participant bg as background
	participant st as store
	participant gh as github
	
	Note over user, gh: Github 인증이 필수로 선행되어야 합니다.
	
	user->>p: 업로드 공간 선택
	p->>bg: 업로드 저장소 명 전달
	bg->>st: 업로드 저장소 명 저장
	
	Note over user,gh: Github 업로드 저장소 선택이 필수로 선행되어야 합니다.
	
	user->>br: 업로드 요청
	br->>bg: 업로드 요청
	bg->>st: github aceess token 요청
	st->>bg: 결과 반환
	alt access token 미존재
		bg->>br: No access token
		br->>user: Display 'please autentication'
	else
		bg->>gh: 파일 존재 여부 확인
		gh->>bg: 결과 반환
		alt 파일이 이미 존재할 경우
			alt 소스 코드 내용이 같은 경우
				bg->>br: 소스코드가 같다는 메시지 반환
				br->>user: 오류 메시지 보여주기
			end
		else
			bg->>gh: 파일 업로드 요청
			gh->>bg: 업로드 결과 반환
			bg->>br: 업로드 결과 반환
			alt 업로드 성공
				br->>user: 업로드 경로 보여주기
			else
				br->>user: 업로드 실패 이유 보여주기
			end
		end
	end

sequenceDiagram
	title notion uploading
	autonumber
	
	actor user
	participant p as popup page
	participant br as browser
	participant bg as background
	participant st as store
	participant n as notion
	
	Note over user,n: Notion인증이 필수로 선행되어야 합니다.
	
	user->>p: 업로드 공간 선택
	p->>bg: 업로드 데이터베이스 전달
	bg->>st: 업로드 데이터베이스 명 저장
	
	Note over user,n: 업로드 데이터베이스 선택이 필수로 선행되어야 합니다.
	
	user->>br: 업로드 요청
	br->>bg: 업로드 요청
	bg->>st: notion aceess token 요청
	st->>bg: 결과 반환
	alt access token 미존재
		bg->>br: No access token
		br->>user: Display 'please autentication'
	else
		bg->>bg: 노션 블럭 생성 및 컨텐츠 작성
		bg->>n: 페이지 생성
		n->>bg: 결과 반환
		bg->>br: 결과 반환
		alt 페이지 생성 성공
			br->>user: 업로드 주소 보여주기
		else
			br->>user: 실패 결과 보여주기
		end
	end