트위터클론코딩3

그외의 부분들을 리뷰해본다.
리액트 쿼리를 가져와서 그저 보여주는것은 따로 설명하지 않고
클론코딩하면서 추가적으로 새로해본것만 추가해보겠다.

위의 첫번때 input창에서 다음 input 창의로 만들어 보았는데 다른 materialUI 같은데서 가져오면 간단하게 구현할 수 있으나 styled-component만 이용해서 구현 하기로 했다.

여기서 구현하는 방법은

const IdInput = styled.input`
  margin: 20px 0 0 0;
  padding: 25px 0 5px 5px;
  border: 1px solid rgb(214, 218, 227);
  border-radius: 5px;
  background-color: transparent;
  font-size: 1rem;
  line-height: 24px;
  width: 100%;
  &:disabled {
    background-color: rgb(210, 210, 210, 0.3);
  }
  &::placeholder {
    color: transparent;
  }
  &:not(:placeholder-shown) {
    outline: none;
    + span {
      position: absolute;
      top: 30%;
      left: 3%;
      pointer-events: none;
      font-size: 0.8rem;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
    }
  }
  &:focus {
    outline: none;
    border: 2px solid #1d9bf0;
    + span {
      position: absolute;
      top: 30%;
      left: 3%;
      color: #1d9bf0;
      pointer-events: none;
      font-size: 0.8rem;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
    }
  }
`;

생각보다 간단하였다. placeholder을 쓰지않고 span이나 label을 사용하여 input과 span을 감싸는 div를 만들어 position을 relative로 하고 span의 position을 absolute로 하여 forcus 되었을때 글자가 입력되어있을때의 위치를 조정해주면 되었다.

탭을 변경해주는 부분은 탭을 눌렀을때 불러오는 데이터를 바꾸는 방법인데 다른팀원분과 같이 만들어 보았다

const [tabIndex, setTabIndex] = useState(0);
const tabArray = [
    {
      key: "tweets",
      tab: (
        <div
          className={tabIndex === 0 ? "select" : ""}
          onClick={() => setTabIndex(0)}
        >
          Tweets
        </div>
      ),
      content: <Tweets userId={profile?.userId} tweets={myTweets} />,
    },
    {
      key: "likes",
      tab: (
        <div
          className={tabIndex === 1 ? "select" : ""}
          onClick={() => setTabIndex(1)}
        >
          Likes
        </div>
      ),
      content: <Likes memberId={memberId} />,
    },
  ];
  // view 부분
  <StyledTab>
            {tabArray.map((item) => {
              return (
                <div key={item.key} className="tab">
                  {item.tab}
                </div>
              );
            })}
          </StyledTab>
          {tabArray[tabIndex].content}
        </StyledTabDiv>

해당 탭을 클릭시 다른걸로 갈아끼우는 방식이였다. 원래는 탭 클릭시 내용만 바뀌게 만들생각이였다.
나의 트윗이 되면 useQuery로 가져온 myTweets이 보여지고 좋아요이면 멤버아이디를 props로 내려 Likes 컴포넌트에서 해당 아이디로 다시 데이터를 가져오는 방식이였다.