브랜치 :

feature/contact

feaure/about2

## **오늘 TODO**

- [x] about 리뷰 슬라이더 만들기 > elastic-carousel 시도
- [x] admin 리뷰목록 무한스크롤 (admin.jsx-feaure/contact) 시도 → 성공
- [x] contact페이지 전반 수정 및 리사이징
- [x] contact 반응형
- [x] contact문의 보내는척 모달 띄우기
- [ ] 로그인페이지에서 인증버튼 빼기

- [ ] 비밀번호 수정페이지 눈알 추가
- [ ] 비밀번호 수정페이지 유효성검사 ?
- [ ] 반응형 시 세로길이 길어짐 : 탭버튼 스크롤포지션 반응형시 어떻게 바꿀 수 있나 알아보기

→ Position에 따라 스크롤탭 없애고, 스크롤탑 남겨둬보기?

## New thing!

## 1. 무한 스크롤 (프론트 온리)

### 1) 처음 구현한 무한스크롤 : 스크롤내릴때마다 요청!

```jsx
## 상태값

const [productList, setProductList] = useState([]);
const [items, setItems] = useState(10);
const [preItems, setPreItems] = useState(0);

useEffect(() => {
getinfiniteData(setProductList, preItems, items, productList);

window.addEventListener("scroll", infiniteScroll, true);
}, [items]);

const infiniteScroll = () => {
let scrollHeight = Math.max(
document.documentElement.scrollHeight,
document.body.scrollHeight
);
let scrollTop = Math.max(
document.documentElement.scrollTop,
document.body.scrollTop
);
let clientHeight = document.documentElement.clientHeight;

if (scrollTop + clientHeight >= scrollHeight) {
setPreItems(items);
setItems(items + 10);
}
};

##데이터 받아오는 getinfiniteData 함수

export function getinfiniteData(setProductList, preItems, items, productList) {
//art-ground.link
return axios
.get("https://art-ground.link/admin/review")
.then((res) => {
let result = res.data.data.slice(preItems, items);
setProductList([...productList, ...result]);
})
.catch((err) => console.log(err));
}
```

위 코드의 문제점은 ⇒

1. 데이터를 받아서 10개만 잘라서 productlist에 넣어주었다. 그리고 다음 데이터를 받아올때 다시 요청을 일으켜야한다. 따라서 스크롤을 내릴때마다 요청이 계속 일어나는 누수가 발생하게 된다.

1. 가장 하단에 닿은경우 스크롤이 멈추긴 하지만 다시 올라갔다 내려가는 경우 다시 데이터요청이 시작됨..!

### 2) 성공한 무한스크롤 :한번에 데이터 받아와서, 원하는 갯수만큼 랜더

```jsx
## 상태
const [reviewData, setReviewData] = useState([]); //첫 랜더 데이터
const [restData, setRestData] = useState([]); // 나머지
const [isLoading, setIsLoading] = useState(true); //데이터를 받아왔는 지 판별하는 변수

## 스크롤 내릴때 렌더될 데이터 추가하는 함수
const fetchMoreData = async () => {
if (restData.length !== 0) {
setIsLoading(true);
setTimeout(() => {
setReviewData(reviewData.concat(restData.slice(0, 10))); //10개씩 커팅
setRestData(restData.slice(10));
setIsLoading(false);
}, 500);
}
};

## 스크롤 함수 -> 스크롤을 내릴때, get요청을 보내는 것이 아니라, fetchMoreData를 호출
const _infiniteScroll = useCallback(() => {
let scrollHeight = Math.max(
document.documentElement.scrollHeight,
document.body.scrollHeight
);
let scrollTop = Math.max(
document.documentElement.scrollTop,
document.body.scrollTop
);
let clientHeight = document.documentElement.clientHeight;
scrollHeight -= 100;
if (scrollTop + clientHeight >= scrollHeight && isLoading === false) {
fetchMoreData();
}
}, [isLoading]); //

## 데이터 get 요청
const getFetchData = async () => {
setIsLoading(true);
let data = await getinfiniteData();
setReviewData(data.slice(0, 10)); //0-10개만 저장
setRestData(data.slice(10)); //10개를 제외한 나머지 저장
setIsLoading(false);
};

##useEffect1 : 첫 렌더될때 get요청+10개저장+10개제외한나머지저장

useEffect(() => {
setTimeout(() => {
getFetchData();
}, 200);
}, []);

##useEffect2 : 인피니트스크롤 부착
useEffect(() => {
window.addEventListener("scroll", _infiniteScroll, true);
return () => window.removeEventListener("scroll", _infiniteScroll, true);
}, [_infiniteScroll]);

```
```
구글링해서 찾은 요 부분이 포인트였다
if (data.length !== 0) {
dispatch(addArticleList(data));
setCount(count + 12);
}

랜더할 상태값과, 나머지 상태값에 이렇게 값을 나눠서 넣어
바닥에 닿으면, 요게 세팅되어 있는 함수를 재호출한다 ~ 반복
setReviewData(reviewData.concat(restData.slice(0, 10))); //10개씩 커팅
setRestData(restData.slice(10));

```

참고

[https://ghur2002.medium.com/react에서-infinite-scroll-구현하기-128d64ea24b5](https://ghur2002.medium.com/react%EC%97%90%EC%84%9C-infinite-scroll-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-128d64ea24b5)

[https://velog.io/@jerrrry/React-Infinite-Scroll-무한-스크롤](https://velog.io/@jerrrry/React-Infinite-Scroll-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4)

[https://velog.io/@ntk100/무한-스크롤-적용](https://velog.io/@ntk100/%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%A0%81%EC%9A%A9)

## 2. elastic-carousel

[https://www.npmjs.com/package/react-elastic-carousel](https://www.npmjs.com/package/react-elastic-carousel)

기본 캐러솔, 그래서 레퍼가 별로 없는지도 → 사용할지 안할지는 모르겠다.

```jsx
## 디스크 커스텀 기본 : 디폴트인 보라색은 절대 사라지지 않음 ...!
엘리먼트에서 찾아낸 값들로 적용해줌
/* square buttons */
.rec.rec-arrow {
border-radius: 0;
}
/* round buttons on hover */
.rec.rec-arrow:hover {
border-radius: 50%;
}
/* hide disabled buttons */
.rec.rec-arrow:disabled {
visibility: hidden;
}
/* disable default outline on focused items */
/* add custom outline on focused items */
.rec-carousel-item:focus {
outline: none;
box-shadow: inset 0 0 1px 1px lightgrey;
}
```

```jsx
import Carousel, { consts } from "react-elastic-carousel";

const AboutRevSlider = (props) => {
const breakPoints = [
{ width: 1, itemsToShow: 1 },
{ width: 550, itemsToShow: 2, itemsToScroll: 2 },
{ width: 768, itemsToShow: 3 },
// { width: 1200, itemsToShow: 4 },
];

const myArrow = ({ type, onClick, isEdge }) => {
const pointer = type === consts.PREV ? "<" : ">";
return (

{pointer}

);
};

const [items, setItems] = useState([
{},{},{},{}
]);

return (
<>

아트그라운드에서 수백개의 관람 후기를 만나보세요.

);
};

export default AboutRevSlider;
```

처음 인스톨하면, 왜인지 모르게 babel is empty가 뜸.. !

원인을 모르겠으나 노드모듈스 새로 갱신해주면 된다. 스타일드 컴포넌트를 필수로 사용하라고 하는데,

보니 굳이 사용하지 않아도 일반 css로 가능하다.

근데 디폴트 색상이 보라색인것이 너무나 마음에 들지 않음. 화살표도 이미지 링크로는 커스텀이 안되는 모양새이다. 라이브러리 치고 너무 그냥 그렇다..

장점은 ! 반응형 아주 잘먹는다