리액트 숙련 - [과제] 아티스트 컬렉션 만들기 (3)

조건부 스타일링하기

1) 멤버박스에 일단 선택된 애를 css를 했다

   &.selected {
      border: 4px solid #a1619d;

      box-sizing: border-box;
    }

2) 삼항연산자를 이용해서 선택되었으면 selected 클래스로 할당하기로 함

   <MemberBox>
        <li
          className={selectedMember === "전체보기" ? "selected" : ""}
          onClick={function () {
            setSelectedMember("전체보기");
          }}
        >
          전체보기
        </li>
        <li
          className={selectedMember === "쿠로미" ? "selected" : ""}
          onClick={function () {
            setSelectedMember("쿠로미");
          }}
        >
          쿠로미
        </li>
        <li
          className={selectedMember === "마이멜로디" ? "selected" : ""}
          onClick={function () {
            setSelectedMember("마이멜로디");
          }}
        >
          마이멜로디
        </li>
      </MemberBox>

그러면 이렇게 선택하면 테두리가 된다.

헤더 꾸미기

글자도 크게, 폰트도 적용해주고, 반투명하게 했다.
반투명한건 opacity css로 하는게 짱인듯

컴포넌트 분리

홈 화면에서 헤더/입력폼/멤버목록/글목록을 각각 분리했다.
매번 작업할때마다 빨간 오류 투성이 not defind가 뜨면 home에서 연결해주고를 반복했다.

Link가 성공할줄 알았어..

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "pages/Home";
import Detail from "pages/Detail";

const Router = () => {
  //useNavigate -> 파라미터를 넣을 수 있음 \
  //React
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="Detail/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

router.js에 <Route path="Detail/:id" element={} /> 하고 List.jsx에서 <Link to={/detail/${item.id}}>하면 될줄 알았는데...ㅠㅠㅠ 기존 더미데이터는 되는데 새로 생성한게 안된다... 네비게이트 써야한다던데 내일.. 다시해보자