9회차 과제 - 구준혁

[gugitgugit]

UI

1) 홈 화면

2) 회사 소개

3) 회사 목표

4) 공지 사항

4-1) 초기 화면

4-2) 공지 사항 추가

4-3) 공지 사항 수정

4-3-1) 수정 버튼 클릭 시

4-3-2) 수정 후 제출 시

1. 내가 개발한 기능

//App.js
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="" element={<Home />} />
          <Route path="/introduction" element={<Introduction />} />
          <Route path="/target" element={<Target />} />
          <Route path="/notice" element={<Notice />} />
          <Route path="*" element={<Error />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

• react-router-dom을 이용한 중첩 라우팅 .
• 공지사항 페이지의 CRUD 기능.

2. 내가 유의 깊게 개발한 사항

//Notice.js
...
        <DetailInput
          onChange={handleDetail}
          value={inputDetail}
          placeholder="내용"
        />
...
const DetailInput = styled.textarea`
  height: 200px;
`;

내용을 입력하는 태그를 input이 아닌 textarea를 사용하여 줄바꿈 지원.

• 수정 버튼을 클릭 했을 때 별도의 입력 form을 새롭게 생성.
• NavigationBar의 각 버튼 hover 효과 적용.

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

• 여러가지 기능을 개발하려고 하다 보니 각 컴포넌트 사이에서 props가 너무 많이 전달되는 느낌이다... 좀 더 깔끔한 구조를 만들 수 있었을 것 같다.

[jihyun132]

정말 가독성 좋게 잘 구현하신 것 같아요! style 적용하는 것도 너무 보기 좋게 잘 하신 것 같아요!! 정말 많이 배우고 갑니다!! 수고하셨습니다~

[jihyun132]

조건문을 사용해서 이렇게 한번에 navigate를 사용하는 방법도 있군요! 함수 여러 개로 만들지 않고 구현하여 정말 깔끔한 것 같습니다! 많이 배우고 갑니다~

[jihyun132]

저는 id를 date.now()를 통해서 부여했는데 이렇게 작성하면 개발자 입장에서 id 읽기도 쉬울 것 같네요. 👍

[gugitgugit]

@YoonKeumJae 코드리뷰 완료했습니다!!