[오픈마인드] eslint jsx 이슈, 헤더 스타일링

오늘 한 거 : 질문 피드 페이지 헤더 만듦

 

eslint jsx 문법을 사용했는데 .jsx 파일은 찾을 수 없다는 에러

Oops! Something went wrong! :(

ESLint: 8.56.0

No files matching the pattern "./src/**/*.jsx" were found.
Please check for typing mistakes in the pattern.

husky - pre-commit hook exited with code 2 (error)

 

"rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

 

eslint 에러가 나서 jsx 문법으로 작성한 파일은 .jsx로 일단 바꿨다.

 

eslint 맞게 jsx를 쓸지 아니면, eslint 문법을 수정해서 .js 파일 확장자로 바꿀지 팀원들과 상의해봐야 할 것 같다.

 

---

피그마 시안을 보며 헤더 스타일링 적용

- 피그마 시안 헤더

 

 

 

- 내 파일 헤더

background-color: blue, red는 위치를 구분하기 위해 임시로 스타일했다. 나중에 지울 예정

 

피그마 시안은 이미지 파일 위에 여백이 있다. 하지만 내 이미지 파일은 여백이 없다. 이 여백을 어떻게 줘야 할지 고민을 했다.

 

이미지 파일에 부모 태그를 한번 더 감싸줘서 각각 height 값을 주었다.

 

이미지 파일은 밑으로 내려야 하기 때문에 부모 태그에 position relative를 주고 자식 태그에 absoulte를 주었다.

 

그 후에, 자식 태그에 bottom: 0을 줘서 밑으로 내려주었다.

 

 

index.jsx

 <header className="pheed-page-header">
        <div className="header-background">
          <Link to="/">
            <img src="/assets/images/logo.png" className="logo" alt="로고" />
          </Link>
        </div>
 </header>

 

style.js

 .pheed-page-header {
    position: relative;
    height: 234px;
    background-color: red;
  }
  .header-background {
    position: absolute;
    bottom: 0;
    background-image: url(/assets/images/logoWithoutBg.png);
    background-repeat: no-repeat;
    background-position: center top -10%;
    height: 184px;
    background-color: blue;
    width: 100%;
    display: flex;
    justify-content: center;
  }

 

 

 

게더타운에서 코딩 작업

 

캐릭터 근처에 가면 실시간으로 대화가 되는게 좋았다. 디스코드보다 대화할 때 접근성이 좋은 듯.