20231124 TIL 팀프로젝트 4일 차

목표

•  tag 필터 적용하기
• 검색 기능 구현 하기

새로 알게 된것/ 오늘의 코드

우선 지금까지 구현 한 전체!

메인 화면 = 나

레이아웃 , 상세페이지,  login , 회원가입 등 =  경열님

글쓰기 페이지 = 건우님

마이페이지 프로필 = 하빈님

마이페이지 포스트 = 형준님

 

원래는 메인과 상세페이지를 맡았는데 경열님이 맡으신 부분을 다 하셨다고 상세페이지를 하시겠다고 하셨다.  그래서  어쩌다 보니 생각보다 적은 부분을 맡게 되었는데 내가 맡은 부분이라도 잘 구현해야겠다고 생각했다. 

 

우리가 웃기게도 피그마로 와이어프레임을 짜고 역할을 분담했는데  와이어프레임구현은 

 

메인 화면 = 형준님

login =  경열님

글쓰기 페이지, 디테일 = 건우님

회원가입 = 하빈님

마이페이지 = 나 

 

이렇게 해놓고 역할을 사다리 게임해서 각자 다른 부분을 맡게되어서 조금 혼란이 있었다. 

내가 구현해야했던 메인페이지는 와이어페이지가 저랬지만 구현 하다보니 조금 웹앱이라지만 너무 앱에 중심이 잡혀있는 것 같아서 새롭게 구성해서 만들어봤고 기사를 추가 할 수있게 하는 요소가 없어서 추가했다. 

 

1일날 한 것을 왜 이제 말하느냐하면.. 솔직히 정신이 하나도 없어서 정신이 쏙 나가있었고 그리고 버튼을 

<button>#전체</button>
<button>#인공지능</button>
<button>#프론트엔드</button>
<button>#백엔드</button>
<button>#웹개발</button>
<button>#어쩌고</button>
<button>#저쩌고</button>

 

이런 식으로 하드코딩을 했었는데..  

 경열님 say . 이야 이거 하드코딩이 장난아니네~!!  파이어베이스에서 가져와서 해결하셔요

 

앗.. 넵!

 

그랫는데 경열님이 전역상태로 user info와 tags를 가져와주셔서 useRoot()를 사용해서 사용했다!

SelectBtn.jsx

  const { tags } = useRoot();

  const onActiveTag = (event) => {
    if (event.target === event.currentTarget) return;
    setTag(event.target.textContent);
  };
  return (
    <St.BtnContainer onClick={onActiveTag}>
      <St.SelectBtn $activeTag={tag}>#전체</St.SelectBtn>
      {tags.map((t) => {
        return <St.SelectBtn $activeTag={tag}>{t.tag_name}</St.SelectBtn>;
      })}
    </St.BtnContainer>
  );
}

 

News.jsx

 const tagFiltered = news.filter((n) => {
    if (tag == "#전체") {
      return news;
    } else {
      const filter = n.tag_name_list.filter((item) => tag.includes(item));
      return tag.includes(...filter);
    }
  });

원래 생각했던 것은 정해진 해시태그만 사용가능하도록 하려했는데 글쓰면서 임의적으로 태그를 추가할 수 있도록 데이터 베이스를 세팅해줬고 (경열님이) 그것을 나는 데이터를  map으로 돌려주는 역할을 했다. 전체만 별개로 지정해주고 map을 돌렸더니 깔끔하게 정리가 되었다.

 

검색기능 구현

사실 결과적으로는 실패를 했다.  검색기능을 살리면 태그기능이 죽고 태그기능을 사리면 검색기능이 죽는 딜레마에 걸려버렸다... 

검색  필터

const searchFilter = news.filter((n) => {
    return (
      n.title.toUpperCase().includes(searchInput.toUpperCase()) ||
      n.content.toUpperCase().includes(searchInput.toUpperCase())
    );
  });

검색 + 태그 필터

const filterNews = searchFilter && tagFiltered;

원래 됐었는데 갑자기 컴포넌트 이동을 좀 했더니 왜 안되는지... 

 

그래서 경열님이 하시겠다고.. 하셨다 월욜에 결과를 들어야지.. 

이번에는 정말 열심히 하려했는데 머리가 안 따라준다. 그래서 우선 다른 분들의 작업을 도와준 것으로 채워보기로 했다..

 

첫 번째 해결

건우님이 pull해가신 내 부분이 오류가 나서 뜨지 않는다고 하셨다. 튜터님께도 다녀오셨는데 created-at 부분이  오류가 나고 있었다.

<St.Time>{n.created_at}</St.Time>

이부분을 지우면 오류가 안나신다고.. 

오류내용을 해석하면 문자열을 받는 곳인데 객체가 들어오고 있다는 오류 였다. 

확실히  n은 news-feed를 뿌려주는 map의 콜백함수 인자인데  데이터베이스 news-feed에는 객체로 들어가는 부분이 tag_name_list 밖에 없기때문에 "코드에는 오류가 없을 텐데? " 라고 생각해서 건우님의 데이터베이스를 확인해봤더니 처음 봤을 때는 문자열같아보였다. 하지만

이게 진짜 문자열, 건우님 것은 페이크데이터중에 하나가 타임스탬프로 찍히고 있었다. 데이터 모두가 그런 것이 아니어도 하나만 달라도 오류가 나서 잘 확인하기 잘했다! 

 

파이어베이스에서 끌어오는 정보가 오류가 나면 오류를 바로 캐치할 수 없는 것이 어려운 것 같다. 

 

두 번째 해결 

하빈님의 마이페이지에서 프로필 이미지 디폴트값 지정하고 수정하기 했을 때 원래 정보를 디폴트로 가져가는 것을 했어야했는데 우선  프로필 이미지 디폴트값은 넣어둔 이미지파일이 없을 경우에 뜨는 것이니까 

 <img src={imgStorage ? imgStorage : `/img/default-avatar.png`}

삼항연산자로 나타내주면 되는데 사실 위에 수정부분에는 이미 처리가 되어있길래 밑에 기본부분에만 추가를 해주었다.

그리고 원래 하빈님이 여쭤보신 것은 수정데이터가 글은 기본데이터가 끌어와져서 보이는데 이미지는 보이지 않는다는 것이었다. 

그래서 isEditing 부분에 초기값을 확인해봤더니 ""빈값이 들어있었다. 그래서 초기값에 imgStorage를 넣어줬더니 잘 되었다. 너무 정신없이 할 것이 많아서 생긴 빈틈이었다. 

 

큰도움은 되지 못했지만 자잘한 도움이라도 드릴 수 있어서 좋았다..

 

목표 달성여부

•  tag 필터 적용하기
• 검색 기능 구현 하기(실패)

내일 목표

• 클론코딩 해보기