사용하는 이유

• 모든 component가 props 없이 state를 직접 꺼낼 수 있다.
• 상태관리가 용이하다.

사용한다면 ??

• state 를 보관하는 보관함을 만든다.
  • 여기에다가 다 보관한다
  • ex ) store.js
• 그럼 다른 컴포넌트에서 사용하면된다.

import NavBar from '../layouts/NavBar';
import React from 'react';
import { styled } from 'styled-components';

interface ListItem {
  title: string | number;
  channelTitle: string | number;
  publishedAt: string | number;
}

function List({ title, channelTitle, publishedAt }: ListItem) {
  return (
    <>
      <MainBox>
        <MainImg src="" alt="" />
        <SubBox>
          <SubImg src="" alt="" />
          <InfoBox>
            <TitleTxt>{title}</TitleTxt>

            <SubTxt>
              {channelTitle}﹒{publishedAt}
            </SubTxt>
            {/* 닉네임= channelTitle﹒상세설명=description﹒생성날짜=publishedAt */}
          </InfoBox>
        </SubBox>
      </MainBox>
      <NavBar />
    </>
  );
}

export default List;

const MainBox = styled.div`
  width: 390px;
  height: 300px;
  background-color: gray;
`;

const MainImg = styled.img`
  width: 100%;
  height: 220px;
`;

const SubBox = styled.div`
  width: 378px;
  height: 51px;
  margin-left: 12px;
  margin-top: 4px;
  background-color: black;
  display: flex;
  gap: 12px;
`;

const SubImg = styled.img`
  width: 40px;
  height: 40px;
  background-color: red;
  border-radius: 100%;
`;

const InfoBox = styled.div`
  width: 390px;
  height: 35px;
`;

const TitleTxt = styled.p`
  color: white;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: keep-all;
  margin-bottom: 3px;
`;

const SubTxt = styled.p`
  color: lightgrey;
  font-size: 12px;
`;

import React from 'react';
import GlobalStyles from './GlobalStyles';
import { ThemeProvider } from 'styled-components';
import theme from './theme';
import List from '../src/pages/List';

function App() {
  return (
    <>
      <GlobalStyles />
      <ThemeProvider theme={theme}>
        <List
          title={'이게맞나'}
          channelTitle={'이게맞나 한번 테스트중'}
          publishedAt={'2023.11.22'}
        />
      </ThemeProvider>
    </>
  );
}

export default App;

768부터 1010까지 미디어화면 2개

헤더 네비 똑같은위치 width 값만 늘어나게 하기

1011 부터 1920 까지

미디어화면 4개 네비봐 왼쪽으로 옮기기