rkskekzzz / apitester_for_notion

APITester_For_Notion

APITester_For_Notion은 API 문서를 Notion으로 작성할 때, Notion 내에서 Embeding Block으로 사용할 수 있는 오픈소스 입니다. Embeding Block을 사용할 수 있는 플랫폼이라면, Notion이 아니라도 사용가능 합니다. 현재 제공되는 Theme은 Notion을 기준으로 제작되었습니다.

Easy to Use, Beautiful Design!

Demo

아래 링크에서 Demo 버전을 사용해 보세요!

👉 Demo Link

아래 링크에서 실제 사용 예시를 확인해 보세요!

👉 라이트버전 Notion Link

👉 다크버전 Notion Link

Feature

• Notion등 Embeding Block이 사용가능한 서비스 에서 사용가능 합니다.
• QueryString을 사용해서 포멧이 적용된 블록을 다양하게 생성할 수 있습니다.
• 오픈소스 라이브러리 입니다.

Usage

props	optional?	default	value?
mode	optional	light	기본값은 라이트모드, mode 옵션을 통해서 APITester Block의 기본 테마를 지정할 수 있습니다.
method	optional	get	특정 API에서 사용하는 HTTP메소드를 APITester Block의 기본 메서드로 지정할 수 있습니다. 메서드가 설정되어 있지 않다면 Send버튼이 동작하지 않습니다. get, post, put, delete를 제공합니다.
url	-	-	테스트를 진행하고 싶은 API를 입력합니다, URL이 입력되지 않으면 Send 버튼이 동작하지 않습니다.
body	optional	-	body로 넘길 json형식의 문자열을 입력합니다.
header	optional	-	header로 넘길 key=value형식의 문자열을 입력합니다.
present	optional	''	페이지 보여지는 옵션을 설정합니다. 'onepage'는 한 페이지에 API Request와 Response를 동시에 보여주고, 기본값은 각 값들을 전환하면서 보여줍니다. 입력합니다.

Example

URL을 만드는 방법

url을 생성하는 방법입니다. 노션에 해당 url을 붙여넣은 후, 임베드 시켜주세요 :)

Method

https://heyinsa.kr/apitester/?method=get
https://heyinsa.kr/apitester/?method=post

URL

https://heyinsa.kr/apitester/?url=your_api_url

Theme

https://heyinsa.kr/apitester/?mode=dark
https://heyinsa.kr/apitester/?mode=light

Multy Query

https://heyinsa.kr/apitester/?mode=dark&method=get&url=your_api_url&header={"key":"valye"}

Keywords

• API
• React
• Notion

apitester_for_notion's Issues

CSS Transition 적용

https://reactcommunity.org/react-transition-group/css-transition

를 보고, CSS Transition 적용하면 이쁠거같습니다.

요청 결과 페이지에 HTTP 상태 출력

현재 상황

요청 결과 페이지에 HTTP 상태가 출력되지 않습니다.
예)

요구사항

요청 결과 페이지에서 URL 왼쪽에 HTTP 상태가 출력됐으면 좋겠습니다.
100번대는 회색
200번대는 초록색
300번대는 파란색
400,500번대는 빨간색이였으면 좋겠습니다.
예)

초기에 html body 테마 적용 안되는 버그

현재 상황

처음 접속한경우에는, body 에 테마가 적용되어있지 않습니다.
한번 테마를 토글한 이후부터 적용됩니다.

요구 사항

한번 테마를 토글하지 않더라도 초기에도 body 에 테마가 적용되어있어야합니다.

요청 페이지와 결과 페이지 동시에 보는 옵션 추가

요청 페이지와 결과 페이지를 한 페이지에서 같이 볼수있도록 하는 토글이 있으면 좋겠습니다.

구체적인 화면 설계는 정해봐야할거같습니다.

header 나 body 가 올바른 json 이 아닐경우 에러 처리

현재 상황

header 나 body 가 올바른 json 이 아닐경우에 전송버튼을 누르면, console log 에 오류가 뜨면서 전송되지 않습니다.

요구사항

header가 다음과 같은 형식을 벗어가는 json 이거나, json이 아닌값일경우 전송버튼을 누르면 header 에 빨간줄 효과를 주면 좋겠습니다.

{
  "key1": "value1",
  "key2": "value2",
}

body 는 경우에 따라서 json 이 아닐수있기 때문에 JSON.parse 로 오류가 나는경우에는 그냥 string 으로 인식하여 전송됐으면 좋겠습니다.

요청에 body 가 json이 아닌경우, javascript 에러 메세지 노출

현재 상황

요청시, body가 내용이 없거나 json이 아닌경우, 결과 창이 다음과 같이 출력됩니다.

<ReactJson src={response} />이렇게 되어있어서 response 가 json 이 아니면 저렇게 뜨는거같아요

요구 사항

json 이 아닌경우에는 문자열로 출력하게 해야할거같습니다

header 에 한글 들어가는경우, 오류

header 에 한글이 포함되어있는경우, 요청이 이뤄지지 않고, 빈 결과창이 뜹니다.

conlose log 를 보면, Axios 오류가 나 있습니다.

페이지가 이동되었다가 복귀했을경우, form 이 나중에 바뀌는 현상

파라미터가 포함된 apitester 페이지에서 수정하던 와중에
뒤로갔다가 다시 오고, 다시 수정하려고 form 을 누르는순간, form 이 초기 파라미터 값으로 초기화 됩니다.

링크 여기서 한번 테스트 해보시죠