[Week1] 프로젝트 초기 세팅

⭐️ 프로젝트 초기 세팅

1. README.md 작성

코드스테이츠에서 레퍼런스로 준 다른 프로젝트의 README.md를
참고삼아 작성한 우리팀의 README.md!

프로젝트 마무리 단계에서, 해야할 일들!

• Donorticon Hompage 링크를 실제 홈페이지 링크로 변경
• Feature 내용 추가
• TEAM K2H2 아바타 사진 변경
• Wiki로 갈 수 있는 링크 추가

2. styled-component GlobalStyle 설정

이 부분은 지난 semi-final 때도 내가 맡아서 했기에, 후딱후딱 설정을 마칠 수 있었다.
간단하게 코드를 보자면 아래와 같다.

(App.js)

import { ThemeProvider } from 'styled-components';
import Router from './Router';
import GlobalStyle from './styles/GlobalStyle';
import Theme from './styles/Theme';

const App = () => {
  return (
    <ThemeProvider theme={Theme}>
      <GlobalStyle />
      <Router />
    </ThemeProvider>
  );
};

export default App;

(./styles/GlobalStyle)

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
    ${reset}
    * {
        box-sizing: border-box;
    }
    html,body {
        font-size: 15px;
        font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    a {
        text-decoration:none;
        color:inherit;
        cursor: pointer;
    }
    button {
        all:unset;  
    }
`;

export default GlobalStyle;

styled-reset을 이용해서 모든 스타일들을 reset 시켜주는 건데,
왜 버튼이나 인풋 스타일은 그대로일까? 🌚
버튼에 먹혀 있는 스타일을 너모너모너모너모 싫어하기에 무조건 all:unset 필수 ‼️

(./styles/Theme)

// 전역으로 사용할 색상
const color = {
  main: '#FFCE44',
  mainDark: '#E5B93D',
  error: '#B71C1C',
};

// 반응형 대응하기 위한 화면 크기
const deviceSize = {
  mobile: '414px',
  tablet: '768px',
  laptop: '1240px',
  big: '2560px',
};

const device = {
  mobile: `screen and (max-width: ${deviceSize.mobile})`,
  tablet: `screen and (max-width: ${deviceSize.tablet})`,
  laptop: `screen and (max-width: ${deviceSize.laptop})`,
  big: `screen and (max-width: ${deviceSize.big})`,
};

const theme = { color, device };

export default theme;

theme을 사용할때에는, 아래와 같이 두가지 방법으로 사용 가능!

const Container = styled.div`
	color: ${(props) => props.theme.color.main}
`

const Container = styled.div`
	color: ${({theme}) => theme.color.main}
`

3. Redux 환경설정

• redux-toolkit 사용! 자세한 내용은 아래 링크로 고고
  리덕스 툴킷 설명 참고 블로그
• 새로고침을 하면, 로그인한 상태값이 초기값(로그아웃 상태)으로 되돌아 가는 불미스러운 일을 방지하고자 redux-persist 사용!