# 작업 화면 미리보기에 이미지 제거 버튼 추가
**URL:** https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005
**Category:** Feature
**Tags:** completed
**Created:** [7월 15, 2022, 9:56오후 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005 "2022-07-15T21:56:44Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [7월 15, 2022, 9:56오후 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/1 "2022-07-15T21:56:44Z")
안녕하세요,
컴포저에서 이미지를 쉽게 삭제할 수 있는 새로운 기능을 고민하고 있습니다. 사용자가 여러 이미지를 업로드한 후 그중 하나만 삭제하려고 할 때, 마크다운에 익숙하지 않은 사용자에게는 정말 복잡한 작업입니다. 물론 시도해 보지만, 결과적으로는 깨진 링크 등이 생기는 경우가 대부분입니다.
이미지 대체 텍스트(alt text)를 수정할 수 있도록 한 기능이 있었는데, 이 기능은 꽤 잘 작동하며 사용자 친화적이었습니다. 이 기능은 미리보기 화면에서 대체 텍스트를 편집할 수 있는 기능을 추가했습니다.
> [@2.8.0.beta8: API 키 개선, 이미지 대체 텍스트 편집, 전체 화면 테이블 등](https://meta.discourse.org/t/2-8-0-beta8-api-key-improvements-image-alt-text-editing-fullscreen-tables-and-more/209178#easier-editing-of-image-alt-text-3):
>
> New features in 2.8.0.beta8: API key improvements New read-only scope: API Keys can now be created with a read-only scope, allowing the key to be used for any GET API requests. This is in addition to the existing global scope, allowing unrestricted access, and granular, allowing admins to specify which groups of routes the key grants access to. API key pagination: The API Key page now properly handles large numbers of API keys, with auto-load support as one scrolls. Easier editing of image alt…
* * *
미리보기 화면의 이미지 위에 삭제 버튼을 배치할 수 있다면 정말 좋겠습니다. 예를 들어 이미지 모서리에 🗑 아이콘이나 X 표시를 두고, 해당 버튼을 클릭하면 실제 이미지 마크다운 코드를 자동으로 찾아서 삭제할 수 있도록 하는 방식입니다. 🙂
감사합니다 🙂
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [7월 17, 2022, 4:06오후 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/3 "2022-07-17T16:06:27Z")
Don, 감사합니다. 유용한 버튼이네요. 추가하는 것도 어렵지 않을 것 같습니다. 이 이슈를 #pr-welcome으로 표시하겠습니다. 추가되는 것을 기대하겠습니다.
---
### Author:  [@ghassan](https://meta.discourse.org/u/ghassan)
#### Post date: [7월 18, 2022, 12:45오후 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/4 "2022-07-18T12:45:05Z")
이 문제를 해결하는 중입니다. 거의 작동하는 개념 증명(Proof of Concept)을 만들었습니다.
`d-editor.js`와 `composer-editor,js`라는 두 컴포넌트 사이에 혼란스러운 부분이 하나 있습니다. 지금까지의 제 해결책은 d-editor.js 컴포넌트 내에서 미리보기/HTML 콘텐츠가 업데이트될 때 이를 청취하는 방식에 기반하고 있습니다… 등.
제 방향이 맞을까요?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [7월 18, 2022, 1:50오후 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/5 "2022-07-18T13:50:51Z")
이미지를 삭제하는 가장 적절한 위치는 컴포저 미리보기에서 마우스를 올리면 표시되는 이미지 크기 조절 및 대체 텍스트 추가 버튼 옆입니다.
이미지 마크업을 삭제하는 훅은 100%/75%/50% 버튼과 매우 유사해야 합니다. 이미지 크기가 어떻게 조정되는지 [여기](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/composer-editor.js#L559)에서 확인할 수 있습니다.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [7월 18, 2022, 11:36오후 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/6 "2022-07-18T23:36:40Z")
> [@pmusaraj](#):
>
> 이미지를 삭제하는 가장 적절한 위치는 작성자 미리보기에서 이미지를 리사이즈하고 대체 텍스트를 추가하기 위해 호버 시 표시되는 버튼 옆일 것입니다.
거기에 추가하는 것에 대해서는 약간 의견이 갈립니다. 왜냐하면 그 기능이 필요한 경우가 매우 드물고, 시각적 노이즈를 더할 것 같아서입니다.
편집 버튼과 너무 가깝지 않도록, 해당 줄의 오른쪽 정렬에 “휴지통” 아이콘을 배치하는 것은 어떨까요?
@awesomerobot 의견은 어떠신가요?
또한, 여기서 작업 순서가 올바른지 궁금합니다. 회전과 자르기가 더 중요한가요?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [7월 19, 2022, 2:11오전 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/7 "2022-07-19T02:11:08Z")
삭제 버튼만 추가하는 것이라면 이렇게 할 수 있습니다:
편집 버튼을 왼쪽으로 이동하면(보너스: 작성 입력 필드까지 마우스 이동 거리가 줄어듦), 삭제 버튼을 오른쪽에 배치할 수 있습니다… 이렇게 하면 무해한 동작과 위험한 동작 사이에 일정한 간격이 생깁니다.
다른 좋은 아이디어들:
- 편집 아이콘을 50%, 75% 버튼처럼 파란색으로 변경
- 텍스트는 검은색으로 유지하되, 클릭 시 입력 필드로도 이동하게 함
- 제목 편집기가 열려 있을 때, 미리보기 텍스트의 베이스라인과 일치하도록 위치를 조정할 수 있을까요 (예: z-레이어를 위에 놓기)? 이렇게 하면 클릭 시 화면이 덜 흔들립니다:
> [@sam](#):
>
> 또한, 여기서는 동작 순서가 올바른지 궁금합니다. 회전과 자르기가 더 중요할까요?
이는 더 큰 범위의 문제이지만, 회전과 자르기 기능을 위해 완전히 다른 종류의 메뉴가 필요할 수도 있습니다.
[http://notion.so](http://notion.so) 에 좋은 예시가 있습니다:
여기서는 버튼에 여러 옵션이 있고, 크기는 핸들을 클릭하여 드래그하는 방식으로 조절합니다…
한 가지 좋은 세부 사항은, 버튼 오버레이보다 너무 작은 이미지를 추가했을 때, 사용자가 조작을 시도하면 버튼이 완전히 포함되도록 이미지 크기를 강제 조정한다는 점입니다. 이는 호버 시 주변 콘텐츠를 가리는 버튼이避免出现됩니다.
---
### Author:  [@ghassan](https://meta.discourse.org/u/ghassan)
#### Post date: [7월 19, 2022, 9:36오전 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/8 "2022-07-19T09:36:08Z")
@awesomerobot 피드백 감사합니다. 같은 맥락인지 확인하기 위해 한 가지 더 질문이 있습니다. 이 부분에 대해:
> [@awesomerobot](#):
>
> 제목 편집기가 열려 있을 때, 미리보기 텍스트의 베이스라인과 일치하도록 위치를 설정할 수 있을까요(즉, z-레이어 위에)? 이렇게 하면 클릭 시 요소가 덜 흔들립니다:
“스케일 버튼” 컨테이너가 "대체 텍스트 편집 버튼"과 함께 나타나는 시나리오가 두 가지 있기 때문입니다.
보통은 같은 줄에 나타납니다. 하지만 대체 텍스트가 길면 대체 텍스트 컨테이너가 다음 줄로 넘칩니다:
같은 줄
넘침
다시 위 질문에 돌아가면, 넘침 동작을 기본값으로 원하신다면 그 제안이 타당해 보입니다. 그렇지 않다면 짧은 대체 텍스트의 경우 삭제 버튼이 대체 텍스트 편집 버튼 바로 옆에 놓이게 됩니다.
또 다른 대안으로, 스케일 버튼 앞에 대체 텍스트 컨테이너를 표시하는 방법이 있습니다. 예:
같은 줄:
넘침:
즉, 삭제 버튼이 50% 버튼 뒤에 오는 것은 명확하지만, 위에서 언급한 두 시나리오에서는 어떻게 작동할지 명확하지 않습니다.
---
### Author:  [@ghassan](https://meta.discourse.org/u/ghassan)
#### Post date: [7월 19, 2022, 11:21오전 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/9 "2022-07-19T11:21:38Z")
[Update]
위에서 언급한 두 번째 접근 방식을 따랐습니다:
결과가 어떻게 보이는지 영상으로 공유합니다.
모두 괜찮아 보인다면, 코드를 리팩토링하여 PR을 생성/푸시하겠습니다.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [7월 25, 2022, 8:05오후 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/10 "2022-07-25T20:05:58Z")
추가 설명해 주셔서 감사합니다! 이 정도면 괜찮아 보입니다!
---
### Author:  [@ghassan](https://meta.discourse.org/u/ghassan)
#### Post date: [7월 26, 2022, 7:05오전 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/11 "2022-07-26T07:05:03Z")
감사합니다. 이미 PR을 제출했습니다: [FEATURE: add image delete button in preview. - Pull Request #17624 - discourse/discourse - GitHub](https://github.com/discourse/discourse/pull/17624)
---
### Author:  [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [8월 4, 2022, 10:03오후 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/12 "2022-08-04T22:03:06Z")
오늘부로 이 변경 사항이 병합되었습니다
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [8월 5, 2022, 6:38오전 UTC](https://meta.discourse.org/t/image-remover-button-to-composer-preview/233005/13 "2022-08-05T06:38:18Z")