yourssu
[#268] YDS 코드 뷰어
📌 Summary
- YDS Storybook을 보고 실제 코드가 어떻게 생겼는지, 구현하는지에 대해서 설명해주는 코드 뷰어가 있으면 좋겠다는 생각을 했습니다.
- 먼저 SwiftUI에서 code 영역이 있는 방식이 괜찮은지 한 번 확인해보기 위해서 PR을 올려보았습니다.
- 현재 구현 방식, 아이디어 모두 피드백 받을 수 있으면 좋겠습니다!
- 현재는 Text로만 이루어져있는데, 실제 Code Block을 보여준다던다, highlighting만 한다던지, 혹은 Bottomsheet로 보여주면 좋겠다던지 어떤 피드백이던지 환영합니다!
✍️ Description
- 이슈 티켓 : #268
- 피그마 :
- 관련 문서 :
💡 PR Point
- Code의 String 값이 어디에 있어야할지, 그리고 값을 PageView에 어떻게 넘겨줄지에 대해서 고민이 많았습니다.
- 상세 뷰에서 Code에 대한 State 변수로 String 값을 가지고 있고, 해당 값을 Binding으로 PageView에 값을 넘겨줍니다.
- 상세 뷰에서 PageView로 값을 올리려면 Binding으로 데이터를 넘겨주고 싶었는데, 상세 뷰에서 다른 State 값의 업데이트에 따라서 Code의 State 값이 업데이트 되는 것을 어떻게 구현할지에 대해서 고민이 많았습니다.
- onChange를 통해 State 변화를 감지하고, 변화한 경우에 Code 값을 업데이트하도록 변경하였습니다.
📚 Reference
🔥 Test
저 간단히 코멘트만 남기자면! (제가 원하는 거.. 후순위로 생각해주세요 ദ്ദി( ◠‿◠ ))
intellij의 rainbow brackets 같이 함수 명이나 좀 코드 보기 쉽게 ㅎㅎ -> 결국 하이라이팅 해줘 입니다!
아니면 코드 블럭 느낌만 가져가도 좋을 것 같네용! 지금은 코드가 전체 흰 배경에 text로 있는 느낌인데, 코드를 contaier로 묶어 라인을 따준다거나 뒷 배경의 색을 좀 바꾸어 경계를 확실하게 해주는 것도 좋을 것 같아용!
ps. highlight.js(Highlightr)에 스위프트가 있긴 하네용!👀
좋은 아이디어인거 같아요! 사실 만든거 자체는 이런식으로 보여주면 어떨까하고 만들었는데, 그냥 보여주는 것에 초점을 맞추다보니 이렇게 반영? 구현?한거 같아요 ㅎㅎ 단순 text만 보여주는 것보다는 code block과 같은 뷰로 보여주는 것은 동의합니다! 회색 box를 만들어서 추가해주면 간단하게 코드라는 것을 보여줄 수 있을 것 같네욤! 음 아마 code highlighting 같은 경우에는 따로 패키지를 설치해야해서, 추가적으로 패키지가 설치되도 괜찮은지, 아니면 내부적으로 구현할 수 있는지에 대해서는 고민해보는 시간이 필요할 것 같습니다! 내부 구현으로 들어가면 좀 시간이 오래(...) 걸리지 않을까 싶네요!
따로 패키지를 설치하는 것보단 webview에 하는게 좋아보이네요..! 아니면 YDS-Storybook 내에 code viewer 패키지를 설치하는게 더 좋으려나요?
따로 패키지를 설치하는 것보단 webview에 하는게 좋아보이네요..! 아니면 YDS-Storybook 내에 code viewer 패키지를 설치하는게 더 좋으려나요?
스토리북에만 RxSwift 추가되어 있는 것처럼 따로 패키지 추가해도 괜찮긴 한데 WebKit 쓰는 것도 생각보다 깔끔하네요! 작업하시느라 수고했어요!
