[Main_day10]2022.11.21 회고_하단 스크롤 안내문구 구현 완료

wool·2022년 12월 10일

회고

목록 보기

16/29

Intro

기상 시간	오전 8시 30분
전날 취침 시간	새벽 2시
컨디션	흠

1121 회고 이슈

잘해오고 있는 부분

<개인>

랜딩, 사용설명페이지 하단 스크롤 안내 문구 구현 완료
회고기록(링크 https://www.notion.so/Mainday10-2022-11-21--a8ea1f00b7014ad8b1f3265de64bdc8e)

<함께 진행 한 것>

사용설명, 랜딩페이지 코드 합치기
인증페이지 스프린트 분담

아쉬운 부분

안 풀리는 것을 환기 없이 오랜 시간 붙잡아서 오타를 보지 못한 것 (별 문제같지도 않은 오타로 시간을 꽤 오래 잡아먹어버림..)
회고 하루 밀림..! 마음이 조급해지니 기록에 신경을 쓰지 못한 것

개선할 점

안 풀릴 땐 내 코드에 내가 보지 못한 오타가 있을 수 있으니 바로바로 물어보자
편한 마음으로! 임하기

Today log

스크롤 시 문구 변화 구현 완료!!

원래는 스크롤를 내릴 때 배경색이 주황일때도 있고 하얀색 일 때도 있어서 위치에 맞춰 색을 변경 해 주려 하였으나 많은 시도 끝에 실패로 그냥 스크롤 된 위치를 시작, 중간, 끝으로만 감지하여 태그에 직접접근하여 if조건문으로 관리 해 주는 방법으로 풀어냈다.
로직은 진즉에 완성 되었지만 내가 id값을 줘 놓고 조건문에서 id값 수정을 하지 않는 바람에 4시간 가량을 헛짓을 했다.
개발자 친구가 오류를 봐 준다기에 내 문제를 설명 한다고 설명하던 중에 오타를 발견했고 그 오타를 고침과 동시에 문제가 해결 되었다.
^^.. 오늘의 교훈 : 안풀릴땐 한 숨 자자

완성코드

import { useEffect } from "react";

const ScrollImg = () => {
  useEffect(() => {
    window.addEventListener("scroll", () => {
      const pTag = document.getElementById("scroll-text");
      if (!pTag) return;
      const box = document.getElementById("box");
      if (!box) return;

      const scrollable =
        document.documentElement.scrollHeight - window.innerHeight;
      const scrolled = Math.ceil(window.pageYOffset);

      if (scrolled === 0) {
        box.style.display = "flex";
        pTag.innerText = "스크롤을 내려 Gallendar에 대해서 확인하세요!";
      } else if (scrolled >= 1 && scrolled < scrollable) {
        box.style.display = "flex";
        pTag.innerText = "스크롤을 내려 확인하세요!";
      } else if (scrolled === scrollable) {
        box.style.display = "none";
      }
    });
  });

  return (
    <>
      <div
        id="box"
        className="w-full z-40 text-base flex items-center justify-center bottom-5 fixed"
      >
        <span className="absolute animate-ping flex h-10 w-10 rounded-full bg-mainOrange opacity-75"></span>
        <svg
          className="h-5 md:h-6 lg:h-7 fill-none text-white	stroke-white drop-shadow-[0_0px_3px_rgba(0,0,0,1)]"
          viewBox="0 0 18 35"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M10.7799 28.0179H7.06376C3.72819 28.0179 1 25.7215 1 22.9143V12.1314C1 9.32429 3.72886 7.02783 7.06376 7.02783H10.7792C14.1148 7.02783 16.843 9.32429 16.843 12.1314V22.9143C16.843 25.7215 14.1141 28.0179 10.7792 28.0179H10.7799Z"
            stroke-miterlimit="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M12.4582 31.1336L8.95757 34.0803M5.42871 31.1336L8.92938 34.0803M5.42871 3.94669L8.92938 1M12.4582 3.94669L8.95757 1M8.9777 15.3939H8.86495C8.50389 15.3932 8.15787 15.2721 7.90256 15.0572C7.64725 14.8423 7.50342 14.5511 7.50254 14.2471V10.8321C7.50254 10.2016 8.11596 9.68585 8.86495 9.68585H8.9777C9.7267 9.68585 10.3401 10.2016 10.3401 10.8327V14.2483C10.3401 14.8787 9.7267 15.3951 8.9777 15.3951V15.3939Z"
            stroke-miterlimit="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        <p
          id="scroll-text"
          className="ml-1 font-SCDream3 md:font-SCDream4 lg:font-SCDream5 text-[9px] md:text-sm lg:text-base text-white drop-shadow-[0_0px_5px_rgba(0,0,0,1)]"
        >
          {" "}
          스크롤을 내려 Gallendar에 대해서 확인하세요!{" "}
        </p>
      </div>
    </>
  );
};

export default ScrollImg;