TextEditor에 placeHolder 보여주기

👋 들어가기 전

흠.. 먼저 슬픈 소식이 있다..

 

3일간 열심히 적은 Modern Cell 포스팅이, 클릭 실수 한번에 사라졌다.

 

열심히 삭제된 게시글 복구 방법을 찾아봤지만, 대부분 크롬의 검색 결과 캐싱을 이용하는

 

방법이 있다고 하지만, 재 때, 구글 서치 콘솔과 SEO 설정을 하지않아 해당 포스팅은
구글 검색에 노출 되지 않아, 캐싱된 데이터가 없었다. 

 

늦게라도 일단 검색 콘솔 등록은 했지만, 너무 아픈 경험이다 ㅠㅠ..

 

각설하고, 오늘 포스팅은 다소 어이가 없는 경험을 적어보려한다.

---

🏁 학습할 내용

• TextEdit란
• 시도해본 방법
• 가장 좋았던 해결 경험

---

📝 TextEditor

 

먼저 TextEditor은 여러줄의 텍스트를 입력받을 때 사용하며, 내부에 스크롤 기능을 갖고있다.

 

🤷‍♂️ placeHolder가 없어?

응 진짜 없다.

 

TextField는 있는데, TextEditor는 명백히 없다. 

 

흠 구현하기 많이 어려운가?? 왜 안했을까???

 

📌 시도해본 방법

• Overlay를 이용
  • cursor 높이가 글자가 있을때와 없을 때 차이가 발견 
  • placeHolder와 실제 입력 Text의 간격 차이를 볼 수 있음, 실제 텍스트가 약간 올라가는 현상

    HStack(alignment: .top, spacing: 10) {
      TextEditor(text: $commentText)
        .foregroundStyle(Color.grayScale.c800)
        .frame(minHeight: 18, maxHeight: 70)
        .background(.red)
        .font(Pretendard.ParagraphStyle.p4)
        .padding(.leading, Spacing.sp3)
        .overlay {
          if commentText.isEmpty {
            Text("댓글을 입력해주세요.")
              .font(Pretendard.ParagraphStyle.p4)
              .foregroundStyle(Color.grayScale.c500)
              .frame(maxWidth: .infinity, alignment: .leading)
              .padding(.leading)
          }
        }
        .background(.green)

      Button {} label: {
        Image(systemName: "paperplane")
      }
      .frame(width: 20, height: 20)
      .padding([.vertical, .trailing], Spacing.sp3)
    }

 

• Zstack와 Offset을 이용
  • cursor 높이가 글자가 있을때와 없을 때 차이가 여전히 있음
  • placeHolder와 실제 입력테스트가 차이가 없음
  • offset으로 보간함

HStack(alignment: .top, spacing: 10) {
      ZStack {
        Group {
          TextEditor(text: $commentText)
            .foregroundStyle(Color.grayScale.c800)
            .frame(minHeight: 15, maxHeight: 70)
            .background(.clear)
            .offset(y: 2)

          if commentText.isEmpty {
            Text("댓글을 입력해주세요.")
              .foregroundStyle(Color.grayScale.c500)
              .padding(.leading, 5)
              .frame(maxWidth: .infinity, alignment: .leading)
          }
        }
        .font(Pretendard.ParagraphStyle.p4)
      }
      .padding(.leading, Spacing.sp3)

      Button {} label: {
        Image(systemName: "paperplane")
      }
      .frame(width: 20, height: 20)
      .padding([.vertical, .trailing], Spacing.sp3)
    }

---

✅ 가장 좋았던 해결 경험

 

여러가지 다른 방법들도 시도해봤는데, cursor 높이해결까지는 하지못했다.

UIKit까지 가야할 것 같은데, 그러기에는 너무 딥하게 가는 것 같은 느낌...

 

그래서 나는 2번째 Zstack과 Offset을 이용한 방법이 가장 좋았다.

---

출처