### I. 워크스페이스 생성

![KakaoTalk_20230413_130150692](<https://user-images.githubusercontent.com/107928377/231907424-54ad0914-4fd8-4a05-a474-35e4e73b1082.png>)

![KakaoTalk_20230413_130150692_01](<https://user-images.githubusercontent.com/107928377/231907444-e4eaf7d1-a9b0-4ace-ba66-6212b300039c.png>)

---

- 1단계 : 팀에서 사용하고 있는 피그마 url을 입력하면 피그마 API를 이용해 피그마 정보를 불러옵니다.
- 2단계 : 프로젝트의 정보를 작성합니다. 이름, 설명, 기간 등을 입력하고, 팀원도 초대합니다.
- 3단계 : 팀에서 사용할 피그마 섹션 목록을 선택하고 워크스페이스 생성을 마무리합니다.

<br />

### II. 워크스페이스 홈화면

![<https://user-images.githubusercontent.com/82074636/231802841-09783a57-3536-47f4-b890-c103503993a2.gif>](<https://user-images.githubusercontent.com/82074636/231802841-09783a57-3536-47f4-b890-c103503993a2.gif>)

---

- 왼쪽 상단은 워크스페이스 생성시 작성한 프로젝트 정보입니다.
- 왼쪽 하단은 명세한 API 목록입니다.
- 오른쪽 상단은 전체 API 목록중 테스트가 완료된 API 갯수와 비율입니다.
- 오른쪽 하단은 팀원 목록입니다.

<br />

### III. DTO 명세 & API 명세

![<https://user-images.githubusercontent.com/82074636/231800806-ba0835ff-b4cc-4968-a578-eb29c2a2dd16.gif>](<https://user-images.githubusercontent.com/82074636/231800806-ba0835ff-b4cc-4968-a578-eb29c2a2dd16.gif>)

---

- 오른쪽에서 DTO 명세를 작성합니다. 필드의 이름과 타입, 제약조건까지 작성합니다.
- 등록한 DTO는 왼쪽에서 확인할 수 있습니다.
- 오른쪽 상단 DTO 코드 버튼을 누르면 명세한 정보를 바탕으로 생성된 DTO 클래스 코드를 받을 수 있습니다.

[이미지]

---

- 왼쪽은 피그마에서 작성한 섹션입니다. 피그마를 보며 오른쪽에서 API 명세를 작성할 수 있습니다.
- 명세에는 param, path variable, header, body 정보를 입력합니다.
- body에 객체 형태의 필드가 들어간다면 명세했던 DTO를 불러와 추가할 수 있습니다.

<br />

### IV. Figma 화면별 사용되는 API 연결

![<https://user-images.githubusercontent.com/82074636/231799802-dcd8e5b7-12e2-48a8-8f15-e52faf246143.gif>](<https://user-images.githubusercontent.com/82074636/231799802-dcd8e5b7-12e2-48a8-8f15-e52faf246143.gif>)
- 
---

- 화면별로 사용될 API를 연결하는 단계입니다.
- 왼쪽 피그마 섹션중 하나를 골라 API 전체 목록중 사용할 API들을 선택해 저장합니다.

<br />

### V. API 요청 및 Axios 요청 객체 코드 반환

![KakaoTalk_20230413_130431882_01](<https://user-images.githubusercontent.com/107928377/231905895-8a7330c4-a47e-4b1c-b339-1054700fba07.gif>)

---

- 명세했던 정보를 바탕으로 요청을 보내는 단계입니다.
- 명세 정보를 확인하며 데이터를 삽입한 후 바로 요청을 보낼 수 있습니다.
- 요청한 정보를 바탕으로 Axios 요청 객체 코드를 받을 수 있습니다.

<br />

### VI. 유스케이스 테스트

![KakaoTalk_20230413_130614224](<https://user-images.githubusercontent.com/107928377/231906060-14a991d4-33eb-4c14-8bd2-58e3823901a5.gif>)

---

- 유스케이스 검증에 필요한 API 목록을 선택합니다.
- API 명세를 바탕으로 적절한 데이터를 삽입합니다.
- 변수 관계 설정 : "Response 연결" 버튼을 눌러 오른쪽의 이전 응답 데이터 중 하나를 골라 변수 관계를 만들어줍니다.
- 유스케이스 성공시에는 마지막 API의 요청 결과가, 실패시에는 가장 마지막으로 요청된 API 요청 결과가 뜹니다.

<br />

### VII. 성능테스트

![](<https://velog.velcdn.com/images/bisous1519/post/80aef058-5980-4485-aa28-9eeb9f90d6af/image.gif>)
- 서버 소유 인증 : 상단의 코드 중 서버의 프레임워크와 일치하는 코드를 복사하여 서버에 붙입니다. 이때 요청을 받을 수 있는 경로가 "[server_url]/api/ssfast" 인지 꼭 확인해야합니다.
- 모든 서버에 대한 인증이 완료되어야 성능테스트를 이용할 수 있습니다.
- 테스트하고자 하는 API를 선택해서 데이터를 삽입하고 초당 요청 횟수, duration을 입력하고 요청합니다.

---

- 

<br />