리팩토링 과정에서 타이틀을 공통 컴포넌트로 묶고 링크를 달아서 클릭하면 /title 로 이동하게끔, 그러니까 흔히 로고를 클릭하면 홈으로 이동하는 그거를 구현하려고 했다.

문제1. CSR

Title에다가 styled-components로 스타일링을 했다.
원래 링크는 파란색 글씨에 밑줄이 디폴트니까 그걸 밑줄 없는 검은색으로 바꾸고, 가운데 정렬하고. 그 정도였다.

근데 그랬더니 이거는 SSR이 안되고 클라이언트 사이드에서만 할 수 있어서
먼저 파란색 밑줄 쳐진 못생긴 링크가 보임 => 클라이언트 사이드가 마저 렌더링된 뒤에야 디자인 적용됨
이렇게 디자인 적용에 딜레이가 생기더라.

결국 styled-components를 버리고 className을 붙인 다음 global.css에서 스타일을 적용하는 방식으로 회귀했다.
스타일링을 전부 styled-components로 갈아타려고 했는데 부득이하게 됐다.
이걸 SSR로 하는 방법이 없지는 않은 것 같던데, 굳이 그 복잡한 방법을 택할 이유가 없었다.

문제2. 이거 딱 세 번 쓰는데

초기화면에 Easiest CV
비관리자 화면
관리자 화면

이 세 가지 외에는 더 이상 쓰일 일이 없단 말이지 적어도 내 머리로는 예상이 안 됨

근데 초기화면: 초기화면 자신으로 새로고침되거나 아예 안 눌려야 함
비관리자 화면: 비관리자 화면의 home으로
관리자 화면: ???

그냥 냅다 href={"/title"} 로 해놨더니 초기화면에서 Easiest CV 제목을 클릭하면
/Easiest%20CV 뭐 이런 데로 가버리더라고 물론 없는 아이디니까 No Such User 뜨고

그리고 관리자 화면일 경우 바로 저 주소, 그러니까 비관리자 화면의 home으로 가버리면
실수로 눌렀을 때 아직 저장 안 했는데 내용 날라가고 로그아웃되는 거랑 똑같아지니까
그럼 /title/admin 으로 이동해야 하나? 이 경우도 같은 문제 생길 것 같고
그럼 대체 관리자 화면에서는 어디로 이동해야 하는가

이렇게 세 가지 경우가 있는데
더 이상 확장 가능성도 (아마) 없는 주제에
이걸 공통 컴포넌트가 props 같은 걸로 조건을 받아다가 조건문으로 처리해야겠냐고
어차피 공통 컴포넌트가 가질 기능 디자인이랑 링크랑 대문자로 바꾸기밖에 없는데 그냥 각자의 자리에서 알아서 처리하면 안 되는 거야?

결론

그래서 그냥 Title 컴포넌트 없애버림 링크도 없애버림
className 설정하고 global.css에서 cursor: default 로 설정해서 제목에 손 올리면 커서로 바뀌는 것도 안 되게 막음
드래그는 여전히 되긴 하는데 이건 그냥 냅둘 생각