9회차과제-김도연

[tkv00]

1.구현화면

모나미 회사 사이트 : http://www.monami.com/index.php

1)메인

2)Nav바

3)회사소개

4)회사목표 페이지가 없어서 회사윤리강령으로 대체

5)회사 공지사항

6)404페이지

2.내가 개발한 기능

function App() {
  return (
    <BrowserRouter>
      <Navbar />  
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path='*' element={<NotFound/>}/>
        <Route path='/products/:id' element={<BestProduct></BestProduct>}></Route>
        <Route path='/introduction' element={<CompanyInfo/>}/>
        <Route path='/introduction/ethics' element={<CompanyEthics/>}></Route>
        <Route path='/support/notification' element={<Notification/>}></Route>
        
      </Routes>
    </BrowserRouter>
  );
}

<Route path='*' element={<NotFound/>}/> path에 존재하지 않으면 404패이지가 뜨도록 구현했습니다.또한 Navbar를 Routes위에 배치하여 라우터를 통한 모든 페이지에 Navbar가 뜰 수 있도록 했습니다.

function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(null);

  const toggleMenu = (menuName) => {
    setIsMenuOpen(isMenuOpen === menuName ? null : menuName);
  };

  const navigate = useNavigate();

  const goToHome = () => {
    navigate("/home");
  };

<Logo src="/img/Logo.jpg" onClick={goToHome}></Logo> Nav바에 있는 모나미 로고이미지를 클릭하면 홈화면으로 이동할 수 있도록 구현했습니다. onMouseEnter={() => toggleMenu(name)} ,onMouseLeave{()=>setIsMenuOpen(null)}를 구현하여 Nav바에 마우스를 올리면 해당하는 메뉴들의 상세 카테고리를 볼 수 있도록 구현했습니다.

const [posts, setPosts] = useState([]);

  const submitPost = (e) => {
    e.preventDefault();
    const form = e.target;
    const newPost = {
      id: posts.length + 1,
      title: form.title.value,
      author: form.author.value,
      content: form.content.value,
    };
    setPosts([...posts, newPost]);
    form.reset();
  };

  const deletPost = (id) => {
    setPosts(posts.filter((post) => post.id !== id));
  };

e.preventDefault();을 통해 기본 클릭동작을 방지했습니다.form.reset();을 통해 폼의 작성돤 내용을 초기화하였습니다.

3.개발하면서 들었던 의문사항

페이지 수와 컴포넌트 수가 증가하면서 페이지와 각 컴포넌트의 관계가 헷갈렸다. 각 페이지의 관계성을 미리 설계하고 작업해야 할 것 같다.

[yeongipark]

저번 유튜브 과제도 그렇고 클론 코딩을 정말 잘 하시는 거 같아요! 많이 배워갑니다~

[yeongipark]

중첩 라우팅과 Outlet을 이용해서 navigation 구현하면 더 자유롭게 커스텀 할 수 있어요!
ex) 페이지별로 naviagtion이 다른 경우?

[yeongipark]

useState로 공지사항을 저장하면 새로고침하면 다 사라져서 로컬스토리지,세션스토리지,firebase등을 이용해서 구현했으면 더 좋을 거 같아요! 기능 구현은 깔끔하네요!

[yeongipark]

저는 css hover만을 이용해서 navigation을 구현했었는데 onMouseEnter과 onMouseLeave를 통해서도 구현을 할 수 있네요! 배워갑니다~