Feat#7 header bar

[YangJJune]

Summary

#6
대부분의 탑뷰가 다음과 같이
로고(뒤로가기), (뷰 이름), (텍스트가 들어간 버튼) 으로 이루어져 있다는 것을 생각하여 컴포넌트를 제작하였습니다.

PR 유형 및 세부 작업 내용

• 새로운 기능 추가

세부 내용

• TopBarText 컴포넌트를 추가합니다
• 현재 인자는 다음과 같습니다
• left :LeftEnum (LeftEnum을 이용하여 로고, 뒤로가기, 또는 공백 선택 가능)
• center : string (중간에 들어갈 문자, 공백 가능)
• right : string (텍스트 버튼)
• 현재 right의 라우팅을 제외하고는 기능적으로는 작동합니다.

test 완료 여부

-> 확인을 위해 임시로 homepage를 클릭하면 VoiceRoomListPage로 이동하게 구현

리뷰 요구사항

컴포넌트 개발이 처음이에요.
이렇게 하는 건지 잘 모르겠어요.

[Turtle-Hwan]

• JSX (react return() 구문)이 아닌, 단순히 이런 style 파일은 확장자를 .ts 로 저장하는 것이 낫습니다.

• styled-component 파일이라는 것을 명시하기 위해 파일 명을 [컴포넌트명].styled.ts 이런 방식으로 만드는 것이 좋습니다.

[Turtle-Hwan]

• 반응형 웹을 위해 최대한 px 단위를 쓰지 않고, rem, % 단위를 쓰는 것이 좋습니다.

[YangJJune]

%랑 rem 확인했습니다

[YangJJune]

그리고 ts 파일 구분하는거 강의에서 봤었는데 이것저것 너무 많이해서 깜빡했네요
혹시 해당 부분 변경이 필요할까요

[Turtle-Hwan]

해당 style이 다른 곳에서도 사용되는 것이 아니라, 현재 이 컴포넌트에서만 사용되는 것이라면

컴포넌트와 같은 폴더 위치에 [컴포넌트명].styled.ts 파일로 만들어 두는 것이 좋을 것 같습니다.

---

• 아래에 style={{}} 과 styled component가 섞인 것 같은데 onClick이 있을 때만 pointer 변화를 주고 싶었던 거라면 잘 하신 것 같습니다!

• 추가적인 다른 방법으로는 styled-component도 일종의 컴포넌트기 때문에 props를 받을 수 있습니다!!

const StyledLeftDiv = styled.div`
  ${props => props.onClick && 'cursor: pointer;'}
`;

이런 방식으로 onClick 이벤트가 잇을 때만 pointer로 바꾸는 것으로 하는 것도 괜찮을 거 같네요

[YangJJune]

네 onClick 일때만 cursor를 바꾸거나, style로 지정하기에 오히려 코드가 길어진다고 생각되는 (1줄 짜리 css라던가) 내용은 단순히 style에 넣어 작업하고 있습니다

[Turtle-Hwan]

요렇게 props 받아오는 걸로 바꿨습니다.

img 관련 css도 styled에 통일하기 위해 여기서 width 속성을 줬습니다.