[Refactor] UI 개선 - Code 길이

[dlsxjzld]

📋 Issue Number

close #

• code 문제의 한 줄의 길이가 70을 넘어가면, 입력창을 넘어가는 문제가 있었습니다.

💻 구현 내용

• code 문제의 한 줄의 길이가 65를 넘어가면, 한 줄에 포함된 공백의 개수에 따라 문제를 적절하게 잘랐습니다.

📷 Screenshots

🤔 고민사항

• 화면에 보이는 문제는 템플릿(공백, 줄넘김)이 적용되어 있는데 2가지 문제가 있습니다.

1. 좌우 길이가 길면 화면에서 문제가 잘리고 스크롤이 생깁니다. (사진 속 문제의 2번째 줄 참고)

   • 

2. 상하 길이가 길면 트랙을 침범합니다.

   • 

• highlight.js 가 적용된 문제 위에 글자만 색상을 입히는 방법은 찾아내지 못했습니다.. 😂
• 디자인을 바꾸게 된다면 트랙, 타수 그리고 정확도 계기판의 위치 조정도 필요할 것 같습니다!
• 좋은 의견 있다면 말씀해주세요!!

[yejinleee]

오 수식으로 줄넘김처리를 하셨군요 👏👏

여긴 디자인분들께도 한번 더 언급드려야할 부분이겠네요 8ㅅ8

코드에선 계기판이 없어지던지 더 줄어들던지,,, 그렇게 되면 한줄(가로길이)이 길어져도 상관없을 것 같거든요!

[yejinleee]

오옷 이렇게 하면 알아서 js거나 java로 하이라이팅이 되나요!!? 따로 인자를 넘긴다거나 하는 작업 없이 ?