[React] 구글 Keep만들기2

react-router-dom 및 전역스타일 생성

라우터 작성

App.js

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Sidebar />
        <div className="app_container">
          <Routes>
            <Route path="/" elemtent={<AllNotes />} />
            <Route path="/archive" element={<ArchiveNotes />} />
            <Route path="/trash" element={<TrashNotes />} />
            <Route path="/tag/:name" element={<TagNotes />} />
            <Route path="/404" element={<ErrorPage />} />
            <Route path="/*" element={<Navigate to={"/404"} />} /> 
          </Routes>
        </div>
      </BrowserRouter>
    </div>
  );
}

전역스타일 및 컴포넌트스타일 작성

styles-components를 사용해서 컴포넌트별로 스타일링한다.

Navbar.styles.ts

import styled from "styled-components";

export const StyledNav = styled.div`
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.12);
  padding: 0 30px;

  .nav__menu {
    display: none;
  }

  @media screen and (max-width: 950px) {
    padding: 0 15px;
    .nav__menu {
      display: block;
      flex-basis: 5%;
      margin: 8px 10px 0px 0px;
      svg {
        font-size: 1.65rem;
        cursor: pointer;
      }
    }
  }
`;

export const Container = styled.div`
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .nav__page-title {
    font-weight: 600;
    font-size: 1.3rem;
  }

  @media screen and (max-width: 950px) {
    margin-top: 7px;
  }
`;

styles/styles.tsx : 컨테이너, 박스, 버튼 공통 스타일 컴포넌트
App.css : app, app__container등 전역 스타일
index.css : a태그 및 기본 reset같은 부분

interface 생성

types/note.ts

import { Tag } from "./tag";

export interface Note {
    title: string;
    content: string;
    tags: Tag[];
    color: string;
    priority: string;
    isPinned: boolean;
    isRead: boolean;
    date: string;
    createdTime: number;
    editedTime: null | number;
    id: string;
}

types/tag.ts

export interface Tag {
    tag: string;
    id: string;
}

error페이지 만들기

src/pages/ErrorPage/ErrorPage.tsx

에셋가져올때 public에서 절대경로로 가져와도 되는데
import해서 가져올 수도 있음(URL을 통해 에셋 가져오기)

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

리덕스 사용을 위해서 준비하기

sllice 생성

menuSlice

import { createSlice } from "@reduxjs/toolkit";

interface MenuState {
    isOpen: boolean;
}

const initialState: MenuState = {
  isOpen: false,
}

const menuSlice = createSlice({
    name: "menu",
    initialState,
    reducers: {}

})

export default menuSlice.reducer;

modalSlice

import { createSlice } from '@reduxjs/toolkit';

interface ModalState {
  viewEditTagsModal: boolean;
  viewAddTagsModal: boolean;
  viewCreateTagsModal: boolean,
  viewFilterTagsModal: boolean,
}

const initialState:ModalState = {
  viewEditTagsModal: false,
  viewAddTagsModal: false,
  viewCreateTagsModal: false,
  viewFilterTagsModal: false,
}

const modalSlice = createSlice({
    name: 'modal',
    initialState,
    reducers: {}
})

export default modalSlice.reducer

notesListSlice

import { createSlice } from '@reduxjs/toolkit';
import { Note } from '../../types/note';

interface NoteState {
  mainNotes: Note[],
  archiveNotes: Note[],
  trashNotes: Note[],
  editNote: null | Note
}

const initialState: NoteState = {
  mainNotes: [],
  archiveNotes: [],
  trashNotes: [],
  editNote: null,
}

const notesListSlice = createSlice({
    name: 'notesList',
    initialState,
    reducers: {}
})

export default notesListSlice.reducer

tagsSlice

import { createSlice } from '@reduxjs/toolkit';
import { v4 } from 'uuid';

const initialState = {
  tagsList: [
    { tag: "learnings", id: v4() }, // v4: unique값 생성
    { tag: "work", id: v4() },
    { tag: "quotes", id: v4() },
  ],
}

const tagsSlice = createSlice({
    name: 'tags',
    initialState,
    reducers: {},
})

export default tagsSlice.reducer

store생성

store/index.ts

import { configureStore } from '@reduxjs/toolkit';
import menuReducer from './menu/menuSlice';
import modalReducer from './modal/modalSlice';
import notesListReducer from './notesList/notesListSlice';
import tagsReducer from './tags/tagsSlice';

export const store = configureStore({
    reducer: {
        menu: menuReducer,
        modal: modalReducer,
        notesList: notesListReducer,
        tags: tagsReducer,
    }
})

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

redux생성

hooks/redux.ts

import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
import { AppDispatch, RootState } from "../store";

export const useAppDispatch = () => useDispatch<AppDispatch>(); // AppDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; // parameter에 rootstate안넣어주기위해

Provider로 감싸기

main.tsx

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>,
)