공통 레이아웃 컴포넌트 작성 https://github.com/Intin1217/assignment/tree/master/src/styles/commonStyle
공용 컴포넌트 작성 https://github.com/Intin1217/assignment/tree/master/src/components/common
- 1번 요구 사항: onMouseEnter 속성을 이용하여 Hover시 모달이 열리게 구현 (1)
- 2번 요구 사항: 드래그 관련 함수 작성 뒤 WordBlock 컴포넌트에 Props로 전달 해 Div 태그 속성인 draggable, onDragStart로 구현 (2)
- 3번 요구 사항 (3A, 3B, 3C)
- 현재 드래그중인 단어가 존재하는지 필터링
const acceptWord = answer[boxIndex];로 현재 박스에 허용되는 정답 단어를 할당- 유효하다면
const newSelectedWords = [...selectedWords];선택된 단어 배열을 복사 유효하지 않을 경우 단어가 박스에 추가되지 않음 - 복사한 배열의 현재 박스 Index 위치에 드래그 된 단어를 할당
newSelectedWords[boxIndex] = draggedWord; setSelectedWords(newSelectedWords);로 선택 된 배열을 업데이트 후 현재 드래그 중인 단어를 초기화 합니다.- 제출 버튼을 누르면 프롬프트가 AI 모델로 전송
https://github.com/Intin1217/assignment/blob/master/src/utils/fetchImage.ts
- 4, 5, 6번 요구 사항 (2A, 3A, 2B, 3B, 2C, 3C)
-
유저 상호작용 여부를 판별하기 위한 전역 상태 작성 https://github.com/Intin1217/assignment/blob/master/src/store/userAfkStore.ts
-
10초간 상호 작용이 없을 경우 isAfk의 상태를 변경
Styled-component를 사용해 blink 속성으로 true가 전달 될 시 애니메이션 적용 |
정답 배열과 선택된 배열의 요소가 같으면 `blink={false}` 전달하여 정답이 입력되어있지 않은 필드의 경우만 깜박이게 구현 |
`isAfk = true`이고 some() 내부에 있는 조건을 만족하면 true를 반환 이후 isBlink를 blink 속성에 전달 |
- 모든 정답이 일치하면 제출 버튼 활성화
- 7, 8, 9번 요구사항 (AI 이미지 선택, 드래그, 이미지 리사이징, 초기화)
-
제출 버튼을 누르면 AI 이미지 선택 모달이 활성화
-
모달이 보이게 되면 API 통신을 통해 이미지 로딩
-
선택된 이미지를 저장하기 위해 https://github.com/Intin1217/assignment/blob/master/src/store/selectImageStore.ts 상태 생성
선택된 이미지가 있을 경우 DragSelectedImage 컴포넌트를 렌더링 |
containerRef를 통해 이미지를 배치할 부모 Div를 참조, useEffect내에서 계산을 통해 컴포넌트 마운트 시 초기 위치를 가운데로 정렬, isInitialized 상태를 통해 위치 계산이 완료 된 후 이미지가 보이게 구현 |
React-Rnd라이브러리를 사용해 원하는 위치에 이미지를 드래그 및 리사이징 기능 구현 |
- 이후 다시하기 버튼이 활성화되며 다시하기를 누를 시 단어 선택부분으로 돌아가게 구현
- 개요 페이지 스타일이 딱딱하다는 느낌을 받아 수정하였습니다
- 이미지 선택 모달에서 API 호출이 완료 되기전에 로딩 이미지를 추가하였습니다
- 학생이 이미지가 마음에 드는게 없을 경우 이미지를 다시 불러 올 수 있는 기능을 추가하였습니다