211119 프론트엔드 집중 답변 : mui & css #41

Closed JeongGod closed 2 years ago

In GitLab by @nahyun on Nov 19, 2021, 21:28

개발 시 어려운 점을 아래 리스트 중에 체크해주세요.

이슈 Label	해당 사항 체크(✅,❎)
전체적인 아이디어, 프로젝트 진행 방향성에 관한 이슈
To-do 기능 구현의 어려움	✅
딥러닝 결과 해석의 어려움
버그
서버 이슈
속도 이슈
gitlab 이슈
그 외	✅

이슈에 대한 자세한 설명 :

<개발 이슈>

1. 개발 시 이슈가 무엇이었는지 예상 동작과 현재 동작에 대해 자세히 기입해주세요.

1. mui Grid 컴포넌트를 사용하고 있는데, 기본 Grid는 한 아이템에 grid-row 속성으로 몇 열을 차지할 것인지 정할 수 있는데, mui grid는 문서에서 columns밖에 없어서 어떻게 조정할지 모르겠습니다.
1. mui Select 컴포넌트 내부 input 태그에 들어가있는 padding값을 수정하고싶은데, 어떻게 접근해야 할까요?

2. 이슈에 대한 원인을 기입해주세요.

1. sx나 styled로는 input을 감싼 div까지만 접근되는 것 같습니다. 선택자로 > input도 써봤는데 적용이 안되는것 같습니다ㅜㅜ

3. 문제가 발생한 코드 및 스크린샷을 기입해주세요.


const Box = styled.div`
display: grid;
grid-template-columns: 5fr 3fr;
grid-template-rows: repeat(3, auto);
column-gap: 1rem;
row-gap: 1.5rem;
margin-bottom: 2rem;
`;

const BrandBox = styled.div grid-row: 1 / 3; ;


-> 이런식으로 한 아이템 공간을 2행 크기만큼 적용하고 싶습니다!
- 2. [해당 input 태그의 padding값 조절 필요](/uploads/15ac9feb5720c95f7786341f47b400a3/스크린샷_2021-11-19_오후_9.13.30.png)

### 4. 이슈를 어떻게 고칠 것인지 자세히 설명해주세요. (해결 방법을 못 찾을 시, 5. 궁금한 점에 기입해주세요)

😿

### 5. 그 외 궁금한 점을 기입해주세요.

1. 웹폰트를 사용할 때 `@font-face`와 `@import`의 차이는 불러오는 파일 형식(.woff vs .css)의 차이인가요?  
2. themeProvider로 지정해둔 스타일 값은 매번 `color: (props) => props.theme.colors.blueM`이런식으로 가져와야 하나요? 너무 길어서 비효율적으로 느껴집니다..ㅜ 그리고 태그 내부에서 `<div style={{backgroundColor: [theme 값]}} />` 이런식으로는 어떻게 사용할 수 있나용?  
3. 검색 페이지에 페이지네이션기능을 구현해야 하는데, 주로 구현하는 방법이 정해져있나요? 검색 꿀팁 같은것이 있다면 부탁드립니다🙏  

질문이 너무 많긴 하지만,,ㅎㅎ 주말 잘보내세요! 감사합니다🥰

In GitLab by @nahyun on Nov 19, 2021, 21:30

changed the description

In GitLab by @leejyart on Nov 20, 2021, 20:10

4팀, 안녕하세요! 주말에도 고생이 많습니다 ㅠ.ㅜ

1.@import 와 @font-face 의 차이 @import 는 다른 스타일 sheet 에서 규칙을 가져올 때 사용됩니다. 즉, @font-face를 통해 다운로드 받은 웹폰트를, 직접 설정한 font-family 명을 통해 사용하도록 만든 규칙을 다른 css 파일(index.css)에서도 사용할 수 있도록 가져오는 것입니다.

해당 답변을 참고해주세요. https://stackoverflow.com/questions/56141957/difference-between-font-face-and-import-url/56142023

2.Grid

Mui 에서는 12(whole viewport width)를 기준으로 Item에 원하는 값을 부여합니다.
예를들어 한 줄에 2개 아이템을 넣고 싶으면 6,6으로 값을 주고, 4개를 넣고 싶으면 3,3,3,3 으로 값을 주면 됩니다. 또한 spacing props를 통해 아이템의 간격을 조절합니다.

해당 문서를 참고하세요! https://mui.com/components/grid/#main-content

3.props.theme

새로추가된 문법인 ‘비구조화할당’을 사용하면 됩니다. 특히, 중첩된 객체 및 배열의 구조 분해 부분을 참고해보세요.

ex. const Header = styled.span((props) => {
  const {
    theme: {
      font: { header }
      colors: { borderColor }
    }
  } = props
  return css`
    font-size: 1rem;
    text-transform: uppercase;
    font-family: ${header};
    border: solid ${borderColor};
  `
})

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%EC%A4%91%EC%B2%A9%EB%90%9C_%EA%B0%9D%EC%B2%B4_%EB%B0%8F_%EB%B0%B0%EC%97%B4%EC%9D%98_%EA%B5%AC%EC%A1%B0_%EB%B6%84%ED%95%B4

4.pagination

Material ui 에서 제공하는 pagination 이 있습니다. https://mui.com/components/pagination/#main-content

5.text field 의 padding값 변경

해당 글을 참고해보세요! 요약하자면, inputProps를 사용하여, mui의 textField 가 아닌 native input 의 속성을 변경하는 것입니다.
https://stackoverflow.com/questions/53419092/remove-padding-of-the-textbox-which-comes-from-material-ui https://mui.com/api/text-field/

화이팅!

Whatcar / What-Car