240830

FACTS(사실, 객관) : 내가 한 일

팀플을 시작했고, 

메인페이지를 먼저 구현했다. 

이렇게 답변 전과 답변 후가 나뉜 탭으로 리스트를 가져와야 했는데, 가장먼저 탭기능부터 구현했다.

https://velog.io/@runmanggo/React-02-%ED%83%AD%EB%A9%94%EB%89%B4-%EA%B5%AC%ED%98%84

[React 02] 탭메뉴 구현

이 글을 정말 많이 참고했는데, 

const TabData = [
    { button: "답변 전", content: "~~~답변 못 받은 질문 리스트~~~" , 
    { button: "답변 후", content: "~~~답변 받은 질문 리스트 ~~~~" },
  ];
return(
  <TabBox>
    {TabData.map((tab, index) => (
      <TabButton
        key={index}
        isActive={activeTab === index}
        onClick={() => setActiveTab(index)}>
        {tab.button}
      </TabButton>
    ))}
  </TabBox>
  <TabContent>{TabData[activeTab].content}</TabContent>
  )

 

이렇게 만든 후 "~~~답변 못 받은 질문 리스트~~~"/"~~~답변 받은 질문 리스트 ~~~~" 를 받아오기 위해 PostListItem.jsx로 새로운 컴포넌트를 생성해 게시글 리스트를 작성한다.

가장 신경썼던 부분은 글자 수와 질문받았을때 / 못받았을때 각각 다른 아이콘을 넣어 표시해주는 부분들 이었다.

포스트 페이지가 아닌 메인 페이지에 리스트로 뿌려지는 것들이라 글자 수가 많아지면 적당히 잘라내고 (...)말줄임표를 넣어야 했는데, 이것은  substring()  을 이용했다.

{post.title.length > 60 ? `${post.title.substring(0, 60)}...` : post.title}

 

이렇게 제목의 경우 60글자로 설정하고, 60글자가 넘어가면 60글자 까지만 자른 후, ...을 붙여 리턴하도록 했다. 

여기선 리스트를 클릭했을 때 당연하게도 디테일 페이지로 넘어가야만 했는데 이부분에서 많이 헤맸었는데 국자님의 도움을 받아 해결했다 

 const handleDetailMove = (post) => {
    navigate(`/detail/${post.id}`);
  };
  
  <StListWrap onClick={() => handleDetailMove(post)}>

 

useNavigate를 import한 후, 리스트에 onCilck이벤트를 줘서 처리했다. 그리고 다시 메인으로 돌아와 

const TabData = [
{
  id: 1,
  button: "답변 전",
  content: <PostListItem posts={posts.filter((post) => !post.solve)} />,
},
{
  id: 2,
  button: "답변 후",
  content: <PostListItem posts={posts.filter((post) => post.solve)} />,
},
];

 

이렇게 solve값으로 filter해서 content를 수정해줬다. 

그리고 디테일 페이지에서도  수정하는 페이지에 이동하면서 제목과 내용 값을 전달해줘야 했다. 

const handleEditPostMove = () => {
    navigate(`/write/${id}`, {
      state: {
        title: posts.title,
        description: posts.description,
      },
    });
  };

 

이렇게 제목과 내용을 전달한다. 

그리고 수정/삭제버튼은 글 작성자만 보이게 해야하는데 이건 리액트의 조건부렌더링을 사용했다.

https://ko.legacy.reactjs.org/docs/conditional-rendering.html

조건부 렌더링 – React

&&은 AND연산자로 보통 사용했는데, 

리액트에서는 if문, &&, ? : 연산자 같은 JavaScript 문법을 사용해 조건부로 jsx를 렌더링할 수 있다는 사실!!!

{loginUser && loginUser.id === posts.writerUserId && (
  <StRightArea>
    <StBtn onClick={handleEditPostMove()}>수정</StBtn>
    <StBtn>삭제</StBtn>
  </StRightArea>
)}

 

바로 적용해서 이렇게 사용했다.

근데 이렇게 적용하고 테스트할 때는 굳이 그럴 필요가 없다고 생각해서 저 코드만 주석처리를 했는데 그러면 메인에서 리스트를 클릭했을 때 디테일페이지로 이동하지 않고, 바로 수정페이지로 넘어가는 문제가 생겼다.. 

더해서 글을 수파베이스의 목업데이터로는 작성한 userid와 user이미지를 못불러오며 이건 이미지는 아예 없고 userid는 null이 뜨는 문제가 생겼는데 해결하진 못했다..

 

앞으로 해결해야 할 것은 

1. 리스트 / 디테일 페이지에 작성자 정보 가져오게하기 

2. 게시글 삭제기능

3. 오늘 난 오류 해결..

---

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

내가 너무 부족해서 팀원분들께 너무 의존하는 느낌이어서 죄송스럽다

심지어 맡은 부분이 여기저기 연결될게 많아서 더 크게 느끼는 것 같기도

---

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

더 열심히 해야겠다

---

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지