마비노기 재우's AI 다운로더 - 04 '상세 모달 제작'

아직 CSS적 요소로 다듬을 부분이 많지만 우선 급한대로 GUI를 수제작하여 얼추 틀을 잡는데 성공했다.

 

 

PC방에서는 다운받은 파일 경로에 대한 접근이 힘들다. 클립보드 복사하기는 로컬에서만 저장되는 펫 AI 때문에 PC방 접속 시 일일히 AI를 갱신해야하는 번거로움을 조금이나마 덜고자 추가하였다. 이정도까지는 원래 기획에 들어가 있었으니 큰 문제는 없다.

 

 

파일 다운로드와 클립보드 복사에 대한 기능이다. 이제보니 겹치는 switch가 굉장히 많이 보인다. 클립보드 복사와 파일 다운로드에는 완전히 동일한 switch가 들어가고 있다. 이건 좋지 않으니 지역변수로 사용되던 content를 밖으로 꺼내봐야겠다.

 

한 눈에 봐도 코드가 확실히 줄었다. switch문이 조금 더러워졌지만 같은 코드를 반복시키는 것이 훨씬 더러우니 신경쓰지 않는다. 정상 작동 역시 확인되었다.

 

다음으로 제작한 것은 툴팁이었다.

 

 

마비노기를 한 번이라도 플레이 해봤다면 어느정도 짐작하겠지만, 지금 UI구조는 마비노기의 스킬창과 굉장히 흡사하게 만들었다. 아이콘 옆 이름, 그 옆에 스킬사용 버튼. 내 경우엔 복사랑 다운이지만 말이다. 그렇다면 이름 버튼을 눌렀을 때 스킬의 상세 설명이 나오던 것도 보았을 것이다.

 

 

여기까지 구현하는데 리팩토링과 삽질의 향연이었다. Props로 값을 넘겨줄까 하다가도 리덕스 전역변수 관리를 해야겠다 싶어서 그걸로 바꾸고, 그 와중에 Props 넘기는 걸로 되어있던 코드가 꼬이고........이래서 초기 기획이 중요한 것이다. 혼자하니 어쩔 수 없다만....

 

 

상세 모달의 코드 일부이다. 윗부분은 그냥 전역변수 끌어다 쓰는 부분이니 이것이 끝이라 볼 수 있다. 사실 여기의  switch도 꽤나 퍼져있어서, 이것들을 하나로 합치는 과정을 하고 캡처한 것이다. 일단 벌려놓고 나중에 리팩토링하는 거 이거 규모가 큰 프로젝트 할 때엔 조심해야하는 습관일탠데....