[TIL] 2021 11 28 - 실전 프로젝트 5주차 마무리

오늘 한 일

• 오늘은 일요일이라 잠을 일단 마~~니 잤다.
• 성민님께서 지인분들한테 우리가 배포한 서비스 피드백을 많이 받아와주셔서 그 내용 토대로 수정을 하기로 했다.
• 오늘 수정한 내용들
  • 어드민 계정으로 접속했을 때 수정,삭제 가능하도록 수정 (아직 테스트는 못해봄)
  • 게시판 메인에서 최신순, 인기순 탭 변경했을 때 데이터 오류 났던거 수정
    -> 서버에 보내는 request url 쿼리 스트링이 잘못되어서 그거 수정했다.
  • 모든 클릭 가능한 아이콘, div에 cursor : pointer 추가
• 오늘 알게 된 우리팀 컴포넌트 구조의 잘못된 점
  • 성민님이랑 새벽에 맥주마시면서 왜 window.scrollTop(0,0) 이 안먹을까 연구를해봤는데,,, 당연히 안되는거였다 ㅋ
    일단 우리의 app.js는

        <ConnectedRouter history={history}>
              ...
  
              <Outter>
                <Container>
                  <Header />
                  <Switch>
                    <PublickRoute path="/" exact component={Intro} />
                    <PublickRoute path="/login" exact component={Login} />
                    <PublickRoute path="/signup" exact component={Signup} />
					...
                    
                    <NotFound />
                  </Switch>
                  <BottomNav />
                </Container>
              </Outter>
            </ConnectedRouter>
          );
        }

        const Container = styled.div`
          width: 375px;
          height: 100%;
          padding-bottom: 60px;
          position: relative;
          background: #fff;
          overflow-y: auto;
          overflow-x: hidden;
          ::-webkit-scrollbar {
            display: none;
          }
        `;

        const Outter = styled.div`
          position: fixed;
          left: 60%;
          transform: translate(-60%, 0);
          height: 100vh;
          background-size: cover;
          background-repeat: no-repeat;
        `;

이런식으로 PublicRoute 안에서 로그인체크를해서 로그인을 한 유저에게만 보여지도록 처리를해주고, Container에서 스크롤이 생기며, Outter라는 div를 하나더 만들어줬었다. Outter는 전체 뷰포트 높이를 잡아주고, 웹페이지로 볼때 위치를 지정해주는 역할을 하는데, 이것때문에 scrollTop이 먹지가 않았다. 생각해보니 이 함수는 뷰포트에서 스크롤이 생겼을 때 스크롤 위치를 조정해주는 건데, 우리는 그냥 한 컴포넌트안에서 스크롤을 만들고 그걸 올리려고 하니 당연히 올라가지 않았던 건데 그걸 몰랐다 ㅠ. 이제 알았으니 헤더랑 바텀을 각 페이지안에 넣고, scrollTop을 페이지마다 넣어주면 될 것같다.

내일 할 일

• 오늘 하고 있었던게 글 작성할 때 텍스트길이를 동적으로 체크할 수 있도록 하는 기능을 추가하고 있었다. 하다 말아서 내일 이것부터 마무리지어야겠다.
• 모바일 반응형. 헤더랑, 바텀을 페이지마다 따로 넣는작업