Project_Kulture_Tech_회고🎵

프로젝트 영상링크 🌼
https://www.youtube.com/watch?v=v78D9IcYdU8

1. Styled Component 활용

이전 프로젝트와 가장 큰 차이점은 Styled Component를 활용해 보았다는 점이다.
Styled Component를 활용하면 코드가 깔끔하게 정리되고 코드 스크롤이 줄어든다.
html/css가 코드와 분리되어 jsx파일에는 완전히 기능을 위한 코드만이 분리되어 관리되므로
확인이 편리하고 구조 확인에 용이하다. 또한 클래스 명에 대한 고민을 줄일 수 있었고,
실수로 중복된 클래스명을 갖게 되는 경우가 없어 잘못된 css가 적용되어 오염되는 경우가 없었다.

---

2. EventCard Component

1. type

{type !== 'wishlist' ? (
          ''
        ) : (
          <S.Check
            src={
              checkList.includes(event_id)
                ? '/images/common/check-true.png'
                : '/images/common/check-false.png'
            }
            onClick={() => handleChecked(event_id)}
          />
        )}

EventCard 컴포넌트는 하나의 컴포넌트 이지만, wishlist와 그 외 페이지에서 활용도가 다르다.
예를 들어 checklist기능은 wishlist에만 있다. 이러한 기능들의 차이를 따로 관리할 수 있도록
각 페이지에서 EventCard 컴포넌트를 불러올 때 type을 부여한다.

이 type이 wishlist 인지, 그 외인지를 구분하여 각각 다르게 렌더링할 수 있도록 작업하였다.
위의 선택삭제를 위한 체크리스트 뿐만 아니라 UX적인 관점에서도,
다른 페이지에서는 이벤트 자체의 정보를 전달하는 데 주력하고
wishlist 페이지에서는 이미 user가 이벤트에 대한 정보를 갖고 흥미를 가진 상태이므로
'입찰 마감 남은 시간'과 '남은 티켓 수'를 표기하도록 하여 구매 욕구를 증대할 수 있게 고안하였다.

2. fetchLiked

모든 페이지에서 렌더링 될 eventCard의 wishlist 포함 여부의 상태를 한번에 관리할 수 있도록
기능을 따로 fetchLiked 함수로 만들어 관리하였다.

이 함수를 만들 때 recoil 사용과 고민을 해보게 되었다.
하지만 단순히 프론트 단에서 저장과정 없이 사용할 데이터가 아니고,
새로고침이나 예상치 못한 페이지의 닫힘 등이 생겼을 때에도 유지가 되어야 하기 때문에
백 단과 바로 바로 통신하면서 user data 안에서 관리되어야 한다고 생각하였다.

그래서 user가 liked(heart)를 누를 때 마다 통신이 일어날 수 있어야 하고
로그인 된 user만 사용할 수 있는 기능, 즉 TOKEN을 부여 받은 경우에만 사용할 수 있도록 만들었다.

TOKEN, url, wishlist(data), event_id를 주요로 전달받도록 하고

const isExistData =
    wishlist &&
    wishlist.filter(el => el.event_id === Number(event_id)).length > 0;

wishlist data에 들어있는 event_id와 data에서 받은 event_id를 filter로 비교하여 1개라도 wishlist에 data가 존재하면 DELETE통신을 진행하고 존재하지 않으면 event_id를 기준으로 POST 통신을 진행한다.

이 통신과 함께 eventCard Component 내부에서는 wishlist ID 여부를 includes로 체크하여 컴포넌트 내부의 heart를 상태 변환한다.

3. fetchLiked 활용

모든 페이지에서 fetchLiked를 호출하여 EventCard 가 렌더링 될 때 해당 데이터를 전달한다.

const setId = (data, event_id) => {
	fetchLiked(TOKEN, APIS.wishlist, data, event_id, setWishlist, getWishList);
		  };

여기서 getWishlist는 wishlist를 불러오는 통신으로 따로 선언된 변수에 담아두고 실행하도록 한다.

---

3. Wishlist

 📍 wishlist 통신은 항상 TOKEN 값을 기본으로 갖도록 하여 회원 각각의 wishlist 를 올바르게 관리할 수 있도록 한다.

1. emptyBox

UX적인 관점에서 wishlist가 비어있다고 아무것도 노출되지 않으면 사용자는 아직 렌더링이 진행 중인지, wishlist가 비어있는지 파악하기가 어렵다. 그래서 한 눈에 알 수 있도록 wishlist.length를 활용하여 0이라면 미리 지정해둔 문구 (이벤트 카드를 담아주세요!) 를 렌더링 할 수 있도록 조건부 렌더링을 사용하였다.

2. handleChecked

const handleChecked = event_id => {
    if (checkList.includes(event_id)) {
      setCheckList(checkList.filter(el => el !== event_id));
    } else {
      setCheckList([...checkList, event_id]);
    }
  };

wishlist에서만 렌더링 되는 check icon을 클릴할 때마다 handleChecked가 실행된다.
checklist 가 이미 해당 event_id를 포함하고 있을 경우 배열 내에서 삭제하고, 포함되지 않았을 경우 추가한다.

3. handleDeleteChecked

const handleDeleteChecked = id => {
    if (checkList !== []) {
      let copy = [...wishlist];
      setWishlist(copy.filter(el => !checkList.includes(el.id)));
      setType('checked');
    }
    
    const url = `${APIS.wishlist}`;
    const deleteCards = checkList.join(',');

    fetch(`${url}/${deleteCards}`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json;charset=urf-8',
        Authorization: TOKEN,
      },
    }).then(response => {
      if (response.ok) {
        getWishList();
      }
    });
  };

위의 handleChecked로 만든 checklist 배열이 빈배열이 아닐 경우 setWishlist를 활용하여 wishlist에서 checklist( 삭제를 위해 선택된 이벤트 들의 id가 포함된 배열 ) 에 포함된 id 배열을 join하여 endpoint에 담아 보냄으로써 선택된 event를 wishlist에서 삭제한다.

이 때 type을 checked로 지정함으로써 삭제 모달이 떴을 때 선택 삭제를 진행할 지 전체 삭제를 진행할 지 전달한다.

4. handleDeleteAll

wishlist 배열 내 모든 개체를 join해서 endpoint에 담아 보냄으로써 모든 wishlist를 삭제한다.

5. 무한렌더링 (더보기)

let limit = searchParams.get('limit');

const handleMoreEvent = () => {
	searchParams.set('limit', Number(limit) + 6);
    setSearchParams(searchParams);
  };

limit을 백엔드에서 기본값 6으로 전달받고 있다. 그래서 먼저 limit 을 searchParams.get()으로 받아오도록 한다. 그런 다음 화면 하단에 더보기 버튼을 클릭할 때 마다 limit에 6을 계속해서 더할 수 있도록 작업하였다.

---

4. EventList

1. 라이브러리 활용 ( calendar/range filter )

1. calendar

• React-calendar 활용
• https://projects.wojtekmaj.pl/react-calendar/

라이브러리를 활용한 것은 처음이라 처음 작업할 때는 매우 작은 거 부터 많이 헤맸다. 새로운 파일을 추가해서 CSS를 적용해 커스터마이징을 한 후에 기능 작업에 들어갔는데, 처음에 onClick 자체가 동작을 하지 않아 너무 당황스러웠다. 그래서 그 다음엔 onChange를 적용해 보니 작동은 제대로 하지만, 한 템포 느리게 작동하는 것이 마음에 들지 않았다.

다시 공식 문서를 꼼꼼히 살펴보니 onClickDay라는 메서드가 따로 정리 되어 있었다. 이걸 활용하니 정상적으로 원하던 대로 작동했다. 이렇게 출력한 userDate를

const dateFormat = userDate => {
    const year = userDate.getFullYear();

    const month = String(userDate.getMonth() + 1).padStart(2, '0');
    const date = String(userDate.getDate()).padStart(2, '0');

    return `${year}-${month}-${date}`;
  };

백엔드와의 통신에 알맞는 형태로 만들도록 했다. 처음에 한 자리 수만 앞에 0을 더해주는 것에 대해 조금 헤맸는데 padStart를 활용해서 해결했다.

padStart(size, '빈자리를 채울 string')

그리고 다시 이 fomattedDate를 searchParams에 활용하여 해당 날짜에 해당하는 이벤트만 출력할 수 있도록 하였다.

2. Range Filter

• material-ui (MUI) 활용
• https://mui.com/material-ui/react-slider/

min값과 max값을 value로 전달받아 query에 활용할 수 있도록 하였고,
공식 문서를 통해 step을 이용해 필요한 간격(10단위)으로만 이동할 수 있도록 지정하였다.
어떤 특정 값이 추가되어 필터링 되는 것이 아니라 특정 값 내의 범위가 계속 노출될 수 있도록 해야하기 때문에
min값과 max값은 url에 minPrice, maxPrice로 기본으로 전달되도록 했다.

2. Category Component

• data 구조

{
    "id": 1,
    "mainCategory": "카테고리",
    "subCategory": ["페스티벌", "콘서트", "퍼포먼스", "클래식"],
    "key": "categoryId"
  },
  {
    "id": 2,
    "mainCategory": "나이",
    "subCategory": ["전체", "성인"],
    "key": "ageRange"
  },
  {
    "id": 3,
    "mainCategory": "국가",
    "subCategory": ["국내", "미국", "호주", "일본"],
    "key": "countryId"
  },
  {
    "id": 4,
    "mainCategory": "입찰가",
    "subCategory": ""
  }

메인 카테고리를 기준으로 세부 카테고리가 나뉘어 지는 형태였는데, 전체 카테고리 데이터를 하나의 파일로 만드는 게 좋지 않을까? 라고 생각해서 data 구조를 위와 같이 만들었다. 여기서 key는 query를 넣어주었다. 그리고 mainCategory를 기준으로 component화 해서 map() 메서드를 활용해서 구현하였다.

먼저 subCategory가 array가 아닌 경우를 빼기 위해 Array.isArray(subCategory)를 활용하였다.

* Array.isArray(subCategory )
    - subCategory가 array 인지 확인 후 아니면 subCategory를 그대로 출력
    - Array 일 경우
		: key 값으로 subcategory 부여 
		  (subcategory = 인자 === subCategory 배열 내 문자 그자체) -> query를 위함

<S.SubCategories
	key={subcategory}
	onClick={() => {
		handleCheckedCategory(String(idx + 1));
		handleCategoryState(subcategory, data.key);
		}}

여기서 idx에 +1 을 하는 이유는 배열은 idx가 0 부터 시작하고,
이 idx를 이후 data의 id 값과 비교할 것이기 때문이다 !

3. DropBox Component

• data 구조

export const DROP_MENU = [
	{ id: 0, name: '날짜순', key: 'dateAsc' },
	{ id: 1, name: '가격 낮은 순', key: 'priceAsc' },
	{ id: 2, name: '가격 높은 순', key: 'priceDesc' },
	];

위의 카테고리 data 구조와 동일하게 id를 index로 활용하여 key값을 searchParams를 활용해 orderBy에 전달할 수 있도록 했다.

4. handleCategoryState

const handleCategoryState = (category, key, categoryData) => {
const categoryIndex = categoryData.subCategory.indexOf(category) + 1;
const categoryIdArr = searchParams.getAll(key);

if (categoryIdArr.includes(String(categoryIndex))) {
	const newArr = categoryIdArr.filter(el => el != categoryIndex);
	searchParams.delete(key);
	newArr.forEach(el => {
	searchParams.append(key, el);
    });
    } else {
      searchParams.append(key, categoryIndex);
    }

    setSearchParams(searchParams);
  };

배열은 index가 0부터 시작하므로 id 와 맞추기 위해 +1을 해준다.
categoryIdArr 는 searchParams.getAll(key)를 통해 key와 일치하는 파라미터를 array로 가져온다. 그 뒤 includes메서드를 사용하여 categoryIdArr에 categoryIndex가 이미 포함되어 있는 지 확인하고 있다면 해당 카테고리 인덱스를 제외한 새로운 배열 (newArr)를 만들고 기존 쿼리를 지우고 다시 append하여 중복된 카테고리를 삭제한다.

만약 중복된 인덱스가 없다면 append 한다.

또 마지막 줄의 setSearchParams(searchParams)를 통해 새로고침 시에도 쿼리가 유지될 수 있도록 구현하였다.

* value(min/max), limit, location.search, checkLiked 의존성 배열
        

5. API fetch

useEffect(() => {
    const url = `${APIS.events}${location.search}&minPrice=${value[0]}&maxPrice=${value[1]}`;

    fetch(url)
      .then(response => response.json())
      .then(result => {
        setCardData(result.data);
      });
  }, [value, limit, location.search, checkLiked]);

fetch의 의존성 배열에는 value(mixPrice / maxPrice), location.search(쿼리 파라미터), checkLiked(개별 좋아요 통신) 를 갖는다.

5. goToTop Component

상단 이동 컴포넌트를 만들 때에는 UX/UI 부분에서 고민을 좀 해보았다.
화면의 형태가 좌/우로 명확하게 나누어져 있고, 좌측 카테고리 체크하는 부분에 마우스가 자주 이동할 수 있다는 점을
감안하여 다른 페이지는 우측 하단에만 있는 상단 이동 컴포넌트를 좌측 하단에도 해당 부분에 맞게 디자인을 수정하여 구현했다. 이 것도 위의 Eventcard component가 wishlist에서만 다르게 나타날 수 있도록 조건부 렌더링을 했던 것 처럼 type을 부여해서 페이지를 구분하여 페이지에 맞는 다른 디자인이 나올 수 있도록 구현하였다.