feat(fe): add user testcase

[juhyeong0505]

Description

1. Tab에 생성된 testcasetab 스크롤 가능하게 구현
2. user testcase 입력받는 모달 버튼 구현

모달 내부 구현 진행도
-sample testcase 보여주는 것은 완료
-usertestcase부분 미완성
-add 버튼 누르면 생성되게 하는 기능 구현 완료(prop을 수정하긴 해야함)
-usertestcase textfield에 있는 'X' 모양 아이콘 누르면 해당 usertestcase 삭제하는 기능 미구현(아이콘은 배치 완료)
-save 버튼 기능 미구현
-cancel 버튼 기능 미구현

add 버튼을 누르면 이렇게 생성이 된다.

closes TAS-1043

Additional context

---

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines
• Read the Contributing Guidelines and follow the Commit Convention
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[juhyeong0505]

am 3:36 너무 졸려서 중단..🥲🥲

[eunnbi]

@juhyeong0505 제가 이어서 작업할게요!

[eunnbi]

Updated

기능 구현

1. 유저 테스트 케이스 추가 / 수정 / 삭제 / 저장 구현: React-hook-form과 zustand persist 사용
2. 샘플 테스트 케이스 복사: CopyButton 공용 컴포넌트 만들었습니다. 아이콘의 색깔과 사이즈를 동적으로 설정하기 위해서 svg file + Image 컴포넌트 방식 대신 아이콘 컴포넌트를 사용했습니다.
3. 유저 테스트 실행 로직 구현: 2개의 POST 요청, Promise.all 사용해 2개의 요청 작업이 성공할 때만 test result polling을 진행하도록 함
4. Test result polling: tanstack query를 이용해 polling 구현
   1. enabled 속성을 이용해 polling on/off
   2. refetchInterval 옵션 사용

Minor changes

1. TestcasePanel 스타일 개선 (탭 UI)
2. EditorHeader에서 불필요한 함수들 제거

폴더 구조
컴포넌트가 계속 추가되다 보니 컴포넌트들의 부모/자식 관계가 잘 파악되지 않는 것 같아서 컴포넌트 폴더를 추가해봤습니다.

(code-editor)/_components
- context
- EditorHeader
- TestcasePanel

(예상 질문)

1. 왜 zustand와 context를 함께 사용하나요?
   • Zustand 상태 초기화가 필요할 때 (https://zustand.docs.pmnd.rs/guides/initialize-state-with-props)
   • Zustand 상태가 App 전체에서 글로벌하지 않을 때, 특정 페이지에 국한된 전역 상태를 관리해야 할 때
   • Context는 의존성 주입 도구로 사용, Zustand로 상태 관리
   • 참고: https://tkdodo.eu/blog/zustand-and-react-context

---

+) CopyButon 컴포넌트 만들 때 Framer Motion을 lazy loading해서 번들사이즈 아주 약간 개선했습니다ㅎㅎ (참고: https://motion.dev/docs/react-reduce-bundle-size)

빌드 결과물 비교 스샷 (2024.11.15 기준)

Main branch

현 브랜치

[notion-workspace]

User Testcase - Add User Testcase

[B0XERCAT]

테스트케이스 패널 내에서 Sample과 User 테스트케이스를 구분해서 표시해야 합니다!
탭에서도 마찬가지입니다

[B0XERCAT]

User Testcase에 input / output을 입력하고 Save 버튼을 눌러도
마지막 User Testcase는 저장이 안되고 있는 것 같습니다!

[B0XERCAT]

수정하다가 탭의 스타일이 깨졌나봐요..

[eunnbi]

수정 완료했습니다

2024-11-16.1.39.02.mov

[B0XERCAT]

고생 많으셨습니다!