2023-10-12 소북소북 | 공통 컴포넌트 및 메인 UI

MUI theme 적용

• 사용될 컬러를 일정하게 맞추고 싶어서 style/theme.ts 파일을 만들어서 createTheme안에 컬러를 미리 정해서 셋팅
• Typography 글꼴 크기를 반응형으로 만들기 위해 MUI에서 제공하는 responsiveFontSizes() helper를 사용

import { red } from "@mui/material/colors";
import { createTheme, responsiveFontSizes } from "@mui/material/styles";

const theme = responsiveFontSizes(
  createTheme({
    palette: {
      ...
    },
  }),
);

export default theme;

------------------------------------------------

...
root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <CssBaseline />
        <App />
      </BrowserRouter>
    </ThemeProvider>
  </React.StrictMode>,
);

https://mui.com/material-ui/customization/typography/#responsive-font-sizes

공통 컴포넌트 만들기

• 특정 구간이 아닌 전반적으로 사용되는 요소들은 공통 컴포넌트로 분류
• 일반버튼, 큰버튼, 텍스트필드, 프로필이미지, 책이미지
  • 최대한 중복되는 코드를 피하기 위해 되도록이면 같은 요소를 활용 하려고 했고 props로 요소의 value나 size를 받아서 재사용하기 쉽도록 하려 노력했음
  • 요소를 여러개 만드는 것보다는 한개를 만들어 놓고 약간의 props를 줘서 변형해서 쓰는게 좋다고 생각해서 이렇게 작업하긴 했는데 너무 어거지로 맞추려고 했나 싶기도 함
• HeaderBar와 Footer가 들어가는 MainLayout과 단순 로그인, 회원가입 화면을 위한 SubLayout을 나누어서 router 설정에서 적용해주었음(<Outlet />사용)
• Layout은 폴더를 따로 뺄까 했는데 좀 애매한 것 같아서 그냥 common 폴더에 몰아둠

메인 UI 냅다 그리기

• 만들어둔 공통컴포넌트를 활용해서 메인 페이지의 UI를 일단 냅다(?) 그려봄
• 중복되는 것들은 이제 별개의 컴포넌트로 쪼개 주어야 하는데 어느 정도 단위로 쪼개야할지,,, 고민이 됨
• 아예 요소를 만들어 놓고 조립하는 식으로 할까 했는데 일단은 전체 구조가 파악되어야 할 것 같아서 MainPage내에서 쭉 작성해보았음

로그인 및 회원가입 UI

• SubLayout으로 감싸져 있는 LoginPage와 JoinPage는 들어가는 요소가 많지 않아서 공통 컴포넌트 가져다가 뚝딱뚝딱 만듬
• TextField의 색깔을 변경하는 과정에서 선택자(?)를 어떻게 써야할지 몰라서 어려웠음
• 이전에 공부할때 styled-component를 써왔어서 일단 익숙한 styled api를 가져다가 썼음
  • 시간 여유가 되면 css함수를 적용해볼 예정

  const StyledTextField = styled(TextField)`
    margin-top: 25px;
    & label {
      color: ${theme.palette.text.primary};
    }
    & label.Mui-focused {
      color: ${theme.palette.text.primary};
    }
    & .MuiOutlinedInput-root {
      & .Mui-focused fieldset {
        border-color: ${theme.palette.text.secondary};
      }
    }
  `;

---

2023년 10월 12일 진행상황

1. themeProvider 설정 완료
   • 추후에 팀원들과 상의해서 컬러나 폰트스타일을 수정할 필요가 있음
2. fe/common : 공통 컴포넌트 만들기 완료
3. fe/login, fe/join : 로그인 및 회원가입 UI만 작업함
   • form 관련 로직 작성 필요
4. fe/main : 메인 UI 작업함
   • 컴포넌트 쪼개기 필요(props 고려하기)

---

어려웠던 점

• MUI에서 요소를 가져다 쓰는 것 까지는 어렵지 않은데 내가 원하는 스타일로 커스터마이징 하는게 어려웠다.
• emotion의 사용법을 잘 모르는 상태에서 MUI와 함께 쓰려고 하니 더 어려웠다. 공부가 필요한 부분이다.
• git branch 다루는게 아직 어렵다😥 VScode에서 gui로 commit push를 했더니 브랜치가 분기되지 않고(git graph로 확인했을때) 자꾸 하나로 합쳐져서 뭐지 싶었는데 아마 자동으로 rebase가 되었던 것 같다.(정확하진않다)
• 종종 내가 있는 branch가 어디인지 헷갈린다. 처음 conflict가 났을 때는 너무 당황해서 그냥 내가 썼던 코드를 조금 날리고 다시 뒤로 돌아와서 작업했다.
• 영어공부,,, 절실,,,히,,, 필요,,, 😣
• 컴포넌트를 쪼갤 때는 데이터의 흐름이나 메소드도 생각해야해서 많이 어렵다. 

할일

• fe/login, fe/join : form 관련 로직 작성
• fe/main : 컴포넌트 쪼개기 및 추가/수정 UI 작성
• HeaderBar Menu들 Link 설정