2024. 6. 3. 뉴스피드 프로젝트 2일차

 

 

 

 

 

 

 

 

돋보기 이미지 토글 시 검색창 활성화

 

const SearchInput = styled.input`

  padding: 10px;

  font-size: 1rem;

  border: 3px solid #343434;

  border-radius: 5px;

  width: 300px;

  display: ${(props) => (props.show ? 'block' : 'none')};

`;

 

 

const HomeInput = () => {

  const [showInput, setShowInput] = useState(false);

 

  const toggleInput = () => {

    setShowInput(!showInput);

  };

 

  return (

    <>

      <InputImage src={inputimage} onClick={toggleInput} />

      <SearchInput show={showInput} placeholder="검색어를 입력하세요!" />

    </>

  );

};

 

 

useState 훅을 사용해 토글 상태 관리

 

스타일 컴포넌트에 'block' : ' none ' 삼항 연산자

 

 

 

 

 

 

 

 

 

 

 

기본적으로 피드는 9개씩 노출되고, 더보기 버튼 클릭 시 닫기 버튼으로 변하고, 나머지 게시글들이 노출됨
닫기 버튼 클릭 시 더보기 버튼으로 돌아오며, 나머지 노출됬던 게시글이 다시 숨겨지고, 9개만 노출됨

 

 

    <Container>

      <HomeInput />

      <HomeContent>

        {posts.slice(0, showAll ? posts.length : 9).map((post) => (

          <HomePost key={post.id} onClick={() => moveDetailPage(post.id)}>

            <HomePostImage src={post.image} />

            <HomePostOverlay>

              <HomePostTitle>{post.title}</HomePostTitle>

              <HomePostNickname>{post.nickname}</HomePostNickname>

              <HomePostContent>{post.content}</HomePostContent>

            </HomePostOverlay>

          </HomePost>

        ))}

      </HomeContent>

      {showAll ? (

        <CloseButton onClick={() => setShowAll(false)}>닫기</CloseButton>

      ) : (

        <MoreButton onClick={() => setShowAll(true)}>더보기</MoreButton>

      )}

    </Container>

 

 

 

내일 해야할 것 

피드 CSS 수정 및 제목, 내용 검색 기능