세부 공지사항 UI 구현

[WhiteHyun]

Screenshots 📸

시연 영상(뒤로가기 색은 신경 안쓰셔도 됩니다)

고민, 과정, 근거 💬

공지를 눌러서 공지 세부 사항으로 넘어가야 하는데 Disclosure를 어떻게 없앨까?

ZStack을 활용하여 NavigationLink를 만든 뒤 opacity를 0으로 설정해서 보이지 않도록 구현했습니다.

Figma에 나와있는 bullet-style을 어떻게 구현해야할까?

단순히 공지사항에 문자를 그대로 보여주기만 하면 되는 문제이긴 하나, bullet이 들어왔을 때 동그라미 형식으로 띄워줘야하는 문제가 있었습니다.
그리고 bullet-style 텍스트와 그 외 텍스트는 폰트가 다르므로, 구분해서 적용해야했습니다.

해결

텍스트가 처음에 -또는 *로 시작하는지 Regex를 통해 확인합니다.

// 공백이 없거나 계속 존재하는 경우 + `-` 또는 `*`가 있는 경우를 찾습니다.
if block.content.starts(with: /\s*[-*]/) {
  // ...
}

만약 찾으면 BulletTextView에게 text를 넘깁니다.

if block.content.starts(with: /\s*[-*]/) {
  BulletTextView(content: block.content)
}

---

디자인을 보면, 상위 불렛과, 그 외 하위 불렛으로 나뉘어 표현되기도 합니다. 따라서 -, *이전의 공백의 개수를 알아야할 필요가 있습니다.
그리고 Regex로 확인할 수 있습니다.^[1]

struct BulletTextView: View {
  ...
  init(content: String) {
    guard let match = content.firstMatch(of: /(?<spacing>\s*)[-*]\s*?(?<content>[^\s].*)/)
    else {
      ...
    }
    ...

또한, 하위불렛과 상위불렛끼리 구분할 때 띄어쓰기가 일관되지 않을 것을 고려하여 공백 개수에서 2만큼 나누었습니다.
예를 들면, 공백이 2개이거나 3개라면 2로 나누어 전부 1로 맞추는 거예요!

struct BulletTextView: View {
  ...
  init(...) {
    ...
    // Calculates the spacing count by dividing the number of leading spaces by 2.
    // This adjustment ensures a consistent and visually appealing spacing, regardless of minor irregularities in the original spacing.
    let repeatSpaceCount = match.spacing.count / 2
    spacingCount = CGFloat(repeatSpaceCount)
  }
  var body: some View {
    HStack {
      Spacer()
        .frame(width: Metrics.bulletPrefixSpacingPerOne * CGFloat(spacingCount) + Metrics.bulletSpacingAlpha)
      Label(...)
      Spacer()
    }

References 📋

1. Meet Swift Regex

---

• Closed: 공지사항 리스트 아이템을 눌러 세부 공지사항을 확인한다. #92

[eung7]

수고하셨습니다! 은근 복잡 하셨을 수도 있으실 것 같은데
너무 깔끔하게 잘 해주셨네요!! 🥹