2024. 5. 31. 뉴스피드 프로젝트 시작

우리 팀의 주제는 Our Knowledge " 우리의 지식"

기본적으로 개발자들이 본인들의 코드를 공유하며 피드백을 의도하거나, 정보를 공유하고, 해당 게시글을 조회한 개발자들은 의견을 댓글로 달아 소통을 하는 사이트 입니다. 개발자들은 물론 개발자를 희망하거나, 개발자들이 어떤 코드를 짜고 공유하고 있는 지 궁금해하는 일반인들도 방문하여 정보를 얻어가고, 간혹 개발자들이 생각할 수 없는 아이디어를 타 직종 종사자들이 공유해줄 수도 있다는 기대를 하며 개발하게 되었습니다.
(본인 아이디어 채택되서 기분 좋음)

---

 

1. 뉴스피드 ( 게시글 간략, 사용자 정보, 좋아요 수, 토글 시 상세페이지 이동) (메인페이지)
2. 마이페이지 (프로필 수정, 내 게시글 확인, 게시글 토글 시 상세페이지 이동) (마이페이지)
3. 로그인, 회원가입 모달 (로그인, 회원가입)
4. 게시글 상세 정보, 사용자 정보, 게시글 수정 및 글쓰기 에디터 버튼, 댓글 버튼 (상세페이지)
5. 글쓰기 에디터 ( 코드 블럭 자동 감지) 댓글 수정, 삭제.

---

여기서 내가 맡은 부분은 메인페이지 (피드) 부분이다.

 

 

최우선적으로 헤더부터 구현한 후 피드가 들어가는 부분, 그리고 푸터. 위에서 아래로 내려갈 예정이다.

 

 

헤더

 

헤더는 일단 큰 문제 없이 구현하는데 성공하긴 했지만, 한 가지 문제점이 발생했다. 아주 사소하지만,, 사소하지 않은..

 

페이지 배율을 땡겼을 때 150%

 

ctrl + 휠 버튼으로 페이지의 배율을 줌인 했을 때 버튼이 딸려오면서 헤더가 쪼그라드는? 현상을 마주했다.

 

전역 스타일링으로 width 1280 px 을 준 상태니 헤더도 1280px 로 수정하면 해결은 됬지만, 헤더는 100%.. 여야한다.

 

 

어떻게 하지? 부모 요소의 스타일을 건드려야 하나? 헤더 스타일을 건드려야 하나? 하며 이것저것 검색해보다가

 

Naver 의 헤더를 줌 인 해보았다...........................

 

네이버 헤더 125% 배율

 

 

네이버 헤더 150$ 배율

 

어? 사라진다 버튼이.. 옆으로 밀려난것도 아니고 그냥 사라진다.

 

개발자인 나는 단숨에 깨달았다. 아.. 이거 윈도우 배율이 일정 배율 이상 되면 버튼을 사라지게 하는구나..

 

 

내 페이지의 배율 150% 상태 (버튼들 사라짐)

 

const HomeHeaderBtns = styled.div`

  position: absolute;

  right: 20px;

  display: ${(props) => (props.hide ? 'none' : 'flex')};

`;

const Home = () => {

  const [hideButtons, setHideButtons] = useState(false);

  const checkZoom = () => {

    const zoomLevel = Math.round((window.outerWidth / window.innerWidth) * 100);

    setHideButtons(zoomLevel >= 150);

  };

  useEffect(() => {

    window.addEventListener('resize', checkZoom);

    checkZoom();

    return () => {

      window.removeEventListener('resize', checkZoom);

    };

  }, []);

 

 

 

1. checkZoom 함수를 사용하여 현재 페이지의 배율을 계산하고, 배율이 150% 이상일 때 상태값 hideButtons를 true로 설정하여 버튼들을 숨긴다.

 

2.useEffect 훅을 사용하여 윈도우의 resize 이벤트에 리스너를 추가하고, 컴포넌트가 마운트될 때와 배율이 변경될 때마다 checkZoom 함수를 호출하여 배율을 체크한다.

 

3.HomeHeaderBtns 스타일드 컴포넌트는 hide prop 에 따라 버튼들을 숨긴다.