enhance(frontend): 사운드 설정을 저장할 때 확실하게 표시하도록

CHANGELOG_CHERRYPICK.md

@@ -34,6 +34,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGELOG.md#2023xx) 문서를 참고하십시오.
 
 ### Client
+- Enhance: 사운드 설정을 저장할 때 확실하게 표시하도록
 - Fix: '모달 배경색 제거' 옵션이 이모지 피커에 반영되지 않음
 - Fix: 열람 주의로 설정된 노트의 반응이 더 보기를 눌러야 표시됨
 

locales/ko-KR.yml

@@ -327,7 +327,7 @@ removed: "삭제했어요!"
 removeAreYouSure: "\"{x}\" 을(를) 삭제할까요?"
 deleteAreYouSure: "\"{x}\" 을(를) 삭제할까요?"
 resetAreYouSure: "정말 초기화를 진행할까요?"
-saved: "저장했어요!"
+saved: "저장됨!"
 messaging: "대화"
 upload: "업로드"
 keepOriginalUploading: "원본 이미지 유지"

packages/frontend/src/pages/settings/sounds.sound.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div class="_buttons">
 		<MkButton inline @click="listen"><i class="ti ti-player-play"></i> {{ i18n.ts.listen }}</MkButton>
-		<MkButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+		<MkButton inline primary @click="save"><span :class="{ [$style.saved]: saved }"><i :class="saved ? 'ti ti-check' : 'ti ti-device-floppy'"></i> {{ saved ? i18n.ts.saved : i18n.ts.save }}</span></MkButton>
 	</div>
 </div>
 </template>
@@ -40,11 +40,29 @@ const emit = defineEmits<{
 let type = $ref(props.type);
 let volume = $ref(props.volume);
 
+let saved = $ref(false);
+
 function listen() {
 	playFile(type, volume);
 }
 
 function save() {
 	emit('update', { type, volume });
+
+	saved = true;
+	window.setTimeout(() => {
+		saved = false;
+	}, 500);
 }
 </script>
+
+<style lang="scss" module>
+@keyframes saved {
+	0% { opacity: 1; }
+	100% { opacity: 0; }
+}
+
+.saved {
+  animation: saved 1s;
+}
+</style>