20210314 26일차 로딩 효과 구현

구현 사항

• 로딩 구현(완료)

• CSS 리팩토링(완료)

 

네비게이션 바를 통해 페이지 이동과 일기 작성 및 수정 시에 아래와 같이 로딩 이미지가 뜨도록 구현했다.

로딩 중에는 마우스 클릭이나 키보드 입력이 불가한데 이는 pointer-events: stroke; 를 이용했다. SVG 형식만 클릭이 가능.

해당 로딩 엘리먼트는 최상위 App 컴포넌트 에 위치시켰는데, useEffect 가 실행될때마다 세션스토리지에 loadingImg 키 값을 확인하고(페이지 이동 버튼을 클릭할 시점에 세션스토리지에 해당 키값을 저장해준다. )visible 일 경우에만 해당 엘리먼트를 찾아 CSS display 값을 flex 로 바꿔준다. 그리고 setTimeOut 을 이용하여 일정 시간이 지난 후 none 으로 바꾸어 주었다. 물론 세션스토리지에서 loadingImg 키값은 바로 삭제해준다.

 

function App(): ReactElement {
	const [isSignin, setSignin] = useState(false);
	const [weatherData, setWeatherData] = useState("");
	const [contentInfo, setContentInfo] = useState(0);
	const [imageUrl, setImgUrl] = useState("");
	const [imageData, setImgData] = useState("");
	const [pContent, setPcontent] = useState(0);
	const [diaryInfo, setDiaryInfo] = useState([]);
	const [content, setContent] = useState([]);
	// const [loadImg, setLoadingImg] = useState(false);

	const setContentId = (e: any) => {
		setContent(e);
	};
	const diaryCollect = (e: any) => {
		setDiaryInfo(e);
	};
	const contentPicker = (e: number) => {
		setPcontent(e);
	};
	const changeSignin = (e: boolean) => {
		setSignin(e);
	};
	const changeWeather = (e: string) => {
		setWeatherData(e);
	};
	const changeImgUrl = (e: string) => {
		setImgUrl(e);
	};
	const changeImgData = (e: string) => {
		setImgData(e);
	};
	const conveyContent = (e: any) => {
		setContentInfo(e);
	};

	const isLogin = JSON.parse(sessionStorage.getItem("isLogin") || "{}");
	useEffect(() => {
		if (isLogin === true) {
			changeSignin(true);
		} else {
			changeSignin(false);
		}
		const loadImg = document.getElementById("loading");
		const loadVisible = sessionStorage.getItem("loadingImg");
		if (loadImg !== null && loadVisible === "visible") {
			loadImg.style.display = "flex";
			setTimeout(() => {
				loadImg.style.display = "none";
			}, 2900);
			sessionStorage.removeItem("loadingImg");
		}
	}, [isLogin]);
	return (
		<Router>
			<LoadingBox id="loading">
				<LoadingImg src={bookImg} alt="Loading Img" />
			</LoadingBox>
			<Main>
				<Switch>
					<Route exact path="/">
						<Manual />
						<SignIn changeSignin={changeSignin} isSignin={isSignin} />
					</Route>

2) 페이지 이동 시키기

특정 버튼을 클릭했을때 페이지 이동과 새로고침을 한꺼번에 해야되기 때문에 아래와 같은 코드를 사용했다.

window.location.href = "해당 endpoint"

세션스토리지에 임시로 loadingImg 라는 키값을 만들어주는데, App 컴포넌트에서 필요하기 때문이다. (useEffect 가 실행될때마다 로딩이미지가 나타나면 안되므로, 판단기준 필요)

const movePage = (e: any) => {
		if (e.target.id === "createDiary") {
			sessionStorage.setItem("loadingImg", "visible");
			window.location.href = "/createDiary";
		} else if (e.target.id === "myDiary") {
			sessionStorage.setItem("loadingImg", "visible");
			window.location.href = "/diaryview";
		} else if (e.target.id === "publicDiary") {
			sessionStorage.setItem("loadingImg", "visible");
			window.location.href = "/diarypublic";
		} else if (e.target.id === "myInfo") {
			sessionStorage.setItem("loadingImg", "visible");
			window.location.href = "/userinfo/calendar";
		} else if (e.target.id === "developer") {
			sessionStorage.setItem("loadingImg", "visible");
			window.location.href = "/developer";
		}
	};
중략...
	return (
		<Main>
			<Navsole>
				<Navin color={colorType.color1} />
				<Navout id="createDiary" color={colorType.color6} onClick={movePage}>
					일기쓰기
				</Navout>
			</Navsole>
			{userNav ? (
				<Navsole className="userMenu">
					<Navin color={colorType.color2} />
					<Navout id="myDiary" color={colorType.color7} onClick={movePage}>
						나의일기
					</Navout>
				</Navsole>
			) : null}
			<Navsole
 후략...

3) 이미지를 제외한 부분의 opacity 만 변경하는 방법

LoadingImg 가 LoadingBox에 포함되어 있는 상황인데, background-color 를 아래와 같이 rgba 를 사용하여 표현해주면 된다. 이때 4번째 인자인 0.5 가 포함된 이미지를 제외한 opacity 이다.

const LoadingBox = styled.div`
	/* border: 5px solid purple; */
	position: absolute;
	background-color: rgba(240, 240, 240, 0.5);
	top: 0rem;
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 99;
	pointer-events: stroke;
	@media only screen and (max-width: 1200px) {
		height: 110rem;
	}
	@media only screen and (max-width: 480px) {
		height: 77.5rem;
	}
`;
const LoadingImg = styled.img`
	width: 25rem;
	height: 20rem;
	margin-bottom: 5rem;
`;

 

 

해야할것

클라이언트 배포: js로 컴파일하여 배포?

발표준비: 위키, ppt, 기술발표

메뉴얼 페이지에 GIF 이미지 넣어서 구현

 

도움받은 사이트

새로고침과 페이지이동을 한꺼번에 하는법: m.blog.naver.com/PostView.nhn?blogId=diceworld&logNo=220180929456&proxyReferer=https:%2F%2Fwww.google.com%2F

opacity, 배경만 투명하게 하는법: sawol-today.tistory.com/338

gif 파일의 배경 삭제: www.unscreen.com/upload

pointer-events: developer.mozilla.org/ko/docs/Web/CSS/pointer-events