[Error] Styled-components 에서 props 사용할 때의 문제

## 어떤 에러가 발생했나요?
- Link 태그에 props 를 전달하고 styled-component 로 꾸미려했으나 되지 않았던 점

### 에러가 발생한 폴더
client > src > components > common > navBar.jsx

### 에러 원인
- Styled-components 를 SCSS 처럼 활용하고 있었다.
- props 로 전달받을 수 있는 것은 컴포넌트이며 일반 태그가 아니라는 점, 그리고 Styled-component 로 스타일이 작성될 때 props 는 현재 작성하고 있는 styled-component 에 전달되는 props 이지, 자식의 컴포넌트로부터 전달받는 props가 아니다
- 아래의 예제를 보며 얘기하면 marginLeft, marginRight, active 는 FlexBox 라는 컴포넌트에서 props 로 받은 것이지 자식 태그인 a 에서 active props 를 받아오는 것이 안다

```
const FlexBox = styled.div`
display: flex;
margin-left: ${({ marginLeft }) => marginLeft || '0'};
margin-right: ${({ marginRight }) => marginRight || '0'};
justify-content: center;
align-items: center;
> a {
height: 100%;
display: flex;
align-items: center;
text-decoration: none;
margin-left: 1rem;
border-bottom: ${({ active }) => (active === 'true' ? '3px solid #000' : '3px solid #fff')};
}
`;
```

### 에러 해결 방법
- 내가 원하는 기능을 구현하기 위한 정확한 해결방법은 아니나 FlexBox 에 props 로 acitve 를 넣어주면 된다./

## 에러 핸들링을 위해 참고한 레퍼런스 링크
- 같은 팀원인 예지님께서 에러 핸들링을 해주셨다