💄design: NavBar 컴포넌트 디자인 변경

[rkdcodus]

✅ 체크리스트

• [x] 스타일 절대 경로 및 sementic 상수명 변경
• [x] @svgr/rollup 설치 및 svg, image 절대 경로 설정
• [x] Header 디자인 변경
• [x] Menubar 디자인 변경
• [x] ButtonWrapper/Interaction/Menu 공용 컴포넌트 생성

📝 작업 상세 내용

1️⃣ 스타일 절대 경로 및 sementic 프로퍼티 이름 변경

styles 절대 경로에 s가 빠져있는 오타가 있어 수정했습니다.

피그마의 sementic background 필드가 bg로 되어있어 background -> bg 로 수정했습니다.

2️⃣ @svgr/rollup 설치 및 svg, image 절대 경로 설정

svg 사용이 많을 것으로 예상됩니다. svg파일과 png 파일을 분리하기 위해 assets에 svg, image 폴더를 생성해두었고 @svg, @image 절대 경로를 지정해주었습니다.

svg 이미지 사용법

svg는 아래처럼 import하면 컴포넌트로 사용할 수 있습니다.

import { ReactComponent as LogoSVG } from '@svg/logo.svg';
...

<LogoSVG />

이렇게 컴포넌트로 사용하게 되면 svg의 최대 장점인 색상, 크기 변경이 가능합니다. 변경하는 방법은 참고 블로그 링크 달아두겠습니다.

일반적으로 img 태그의 src 경로로 지정도 가능합니다. 이 방법은 svg 이미지의 색상 변경이 불가합니다.

import avatarBg from '@svg/avatarBg.svg';
...

<img src={avatarBg}></img>

svg를 컴포넌트로 이용하기 위해서

타입스크립트에서 svg 이미지를 ReactComponent로 사용하기 위해 costom.d.ts 파일을 만든 뒤 tsconfig.json의 includes에 추가해주었습니다. 또한, svg를 리액트 컴포넌트로 변환시켜주는 svgr라이브러리가 필요합니다. CRA로 리액트앱을 생성한다면 자동 설정되어있지만, 잔디일기 처럼 Vite를 사용할 경우, 직접 설정해주어야합니다. 때문에 @svgr/rollup를 설치해주었습니다.

3️⃣ ButtonWrapper/Interaction 공용 컴포넌트 생성

피그마 디자인의 interaction부분(hover, focus 등)은 레이어처럼 쌓아야 하는 구조로 되어있습니다. 이를 구현하기 위해 ButtonWrapper와 Interaction 컴포넌트를 생성했습니다. Interaction은 피그마에 만들어진 것과 같이 Interaction1, Interaction2, Interaction3, Interaction4로 구성되어있습니다.

props

• onClick?: 요소의 onClick 함수 넘겨줌. 생략 가능
• topRadius ?: 요소의 border-top-right/left-radius 설정 가능. 기본값은 0px. 생략 가능
• bottomRadius ?: 요소의 border-bottom-right/left-radius 설정 가능.기본값은 0px. 생략 가능.

사용 예시

<ButtonWrapper>
     // Interaction은 원하는 요소를 감싸는 것이 아닌 그냥 앞에 위치.
    <Interaction1  onClick={함수}  topRadius={8} bottomRadius={8} />
    <LoginBtn>로그인</LoginBtn>
</ButtonWrapper>

Interaction을 사용하고자 할 때는 ButtonWrapper로 감싸준 후 인터랙션이 필요한 컴포넌트 앞에 걸어주시면 됩니다.

4️⃣ Menu/Menus 컴포넌트 생성

Menu 컴포넌트

헤더의 메뉴바 외에도 여러 설정바에 같이 쓰기 위해 Menu 컴포넌트를 생성했습니다. 메뉴바에 들어가는 하나의 메뉴 컴포넌트 입니다.

props

• link?: 메뉴 요소 클릭 시, 이동하기 위함.
• onClick?: 메뉴 요소 클릭시, 이벤트 발생시키기 위함.
• text: 메뉴 이름
• svg: 메뉴 아이콘
• line?: 메뉴 밑 라인(divider) 굵기 설정
• topRadius?: top border radius 설정 ( 제일 처음 메뉴 요소는 topRadius 설정 )
• bottomRadius?: bottom border radius 설정 ( 제일 마지막 메뉴 요소는 bottomRadius 설정)

link, onClick, line, topRadius, bottomRadius은 생략 가능합니다.

Menus 컴포넌트

Menus는 Menu를 감싸는 Container 역할을 하는 컴포넌트입니다.

props

• toggle: 언제 메뉴바를 열고 닫을지 boolean값에 따라 메뉴바가 열고 닫힘.

사용예시

    <Menus toggle={toggle}>
        <Menu link={'/mypage'} text={'마이페이지'} svg={person} line={4} topRadius={16}/>
        <Menu link={'/setting'} text={'설정'} svg={setting} />
        <Menu onClick={handleLogout} text={'로그아웃'} svg={logout} />
        <Menu onClick={deleteAccount} text={'탈퇴'} svg={person_remove} bottomRadius={16}/>
      </Menus>

💡 (추가)

styled props 앞에 $ prefix 달기

// toggle이라는 커스텀 속성을 사용한 Menus 컴포넌트 
const Menus = ({ children, toggle }: MenusProps) => {
  return <MenusContainer $toggle={toggle}>{children}</MenusContainer>;
};

const MenusContainer = styled.div<{ $toggle: boolean }>`
  height: ${props => (props.$toggle ? 'auto' : '0px')};
...
`;

styled component 를 사용할 때 topRadius, bottomRadius, toggle와 같은 커스텀 속성은 HTML DOM에서 인식하지 못합니다. 기본적으로 styled-component는 모든 커스텀 속성을 HTML 속성으로 전달한다고 합니다. 하지만 React props 로 전달 되거나, DOM 요소로 렌더링 되지 않도록 기호($)를 prefix로 붙이는 기능을 제공하고 있어 이를 이용해 경고문을 해결할 수 있습니다.

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

[React] SVG 활용법 React에서 svg파일 사용하는 법 (create-react-app)

vite 환경에서 svg를 사용하기 위한 환경 설정 타입스크립트 상에서 svg 파일을 컴포넌트로서 import할 때 문제]

Warning: Received "true" for a non-boolean attribute 해결하기

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

• [x] 브랜치 확인하기
• [x] 불필요한 코드가 들어가지 않았는지 재확인하기
• [x] issue 닫기
• [x] reiewers, assignees, Lables 등록 확인하기

이슈 번호: Close #165