You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
3.1 KiB
36 lines
3.1 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "f23a868536c07da991b1d4e773161e25",
|
|
"translation_date": "2025-08-24T00:15:35+00:00",
|
|
"source_file": "7-bank-project/4-state-management/assignment.md",
|
|
"language_code": "ko"
|
|
}
|
|
-->
|
|
# "거래 추가" 대화상자 구현
|
|
|
|
## 지침
|
|
|
|
우리 은행 앱에는 아직 중요한 기능이 하나 부족합니다: 새로운 거래를 입력할 수 있는 기능입니다. 이전 네 가지 레슨에서 배운 모든 것을 활용하여 "거래 추가" 대화상자를 구현하세요:
|
|
|
|
- 대시보드 페이지에 "거래 추가" 버튼을 추가하세요.
|
|
- HTML 템플릿을 사용하여 새 페이지를 만들거나, JavaScript를 사용하여 대시보드 페이지를 떠나지 않고 대화상자 HTML을 표시/숨기는 방법을 구현하세요. 이를 위해 [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) 속성이나 CSS 클래스를 사용할 수 있습니다.
|
|
- 대화상자를 위한 [키보드 및 화면 읽기 접근성](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)을 반드시 처리하세요.
|
|
- 입력 데이터를 받을 HTML 폼을 구현하세요.
|
|
- 폼 데이터를 JSON 데이터로 변환하여 API에 전송하세요.
|
|
- 새로운 데이터로 대시보드 페이지를 업데이트하세요.
|
|
|
|
[서버 API 사양](../api/README.md)을 확인하여 호출해야 할 API와 예상되는 JSON 형식을 확인하세요.
|
|
|
|
다음은 과제를 완료한 후의 예시 결과입니다:
|
|
|
|
|
|
|
|
## 평가 기준
|
|
|
|
| 기준 | 모범적 | 적절함 | 개선 필요 |
|
|
| --------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
|
|
| | 거래 추가가 레슨에서 배운 모든 모범 사례를 따라 완벽하게 구현되었습니다. | 거래 추가가 구현되었지만 레슨에서 배운 모범 사례를 따르지 않거나 부분적으로만 작동합니다. | 거래 추가가 전혀 작동하지 않습니다. |
|
|
|
|
**면책 조항**:
|
|
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서를 해당 언어로 작성된 상태에서 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다. |