검색시 input(select) 창 제거

삼항연산자에 따른 class 분기

select_1, select_2, select_3에 삼항 연산자를 이용해 클래스 생성

className={`${contentsSearch.length !== 0 ? style.select : ""}`}

만약 contentsSearch.length !== 0 이면 즉, 검색으로 컨텐츠가 불러와지면 select 클래스를 생성 하고, 그 클래스의 디스 플레이를 none 으로 지정

.select {
  display: none;
}

컨텐츠 페이지 추가 구현

1. 스크롤시 위로 올라가기 버튼

참고 링크

code

const handleFollow = () => {
    // dispatch(scrollTop(false, window.pageYOffset));
    if (selectLength > 600) {
      // 100 이상이면 버튼이 보이게
      dispatch(scrollTop(true, window.pageYOffset));
    } else {
      // 100 이하면 버튼이 사라지게
      dispatch(scrollTop(false, window.pageYOffset));
    }
  };

  // 클릭하면 스크롤이 위로 올라가는 함수
  const handleTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
    dispatch(scrollTop(false, 0));
  };

  useEffect(() => {
    const watch = () => {
      window.addEventListener("scroll", handleFollow);
    };
    watch();
    return () => {
      window.removeEventListener("scroll", handleFollow);
    };
  });

<div className={style.topBtnContainer}>
  <button 
    className={`${buttonOnOff ? style.topbutton : style.deleteBtn}`} // 버튼 노출 여부
    onClick={handleTop} // 버튼 클릭시 함수 호출>
    <span className={style.triangle}>
      <i className="fas fa-caret-up"></i>
     </span>
  </button>
</div>

2. 좋아요 하트버튼 바로 클릭 가능
   색 유/무, 좋아요 추가/삭제

컨텐츠 모달창 좋아요

1. 좋아요 버튼 클릭
   색 유/무, 좋아요 추가/삭제

2. 디자인 수정 (색, 레이아웃 등)

좋아요 구현 목록

• 비로그인
  • 좋아요 클릭하면 로그인 모달 창
• 로그인
  • 좋아요 클릭하면 색 유, 좋아요 추가 (post로 서버로 전송)
  • 좋아요 재클릭 색 무, 좋아요 삭제 (delete로 서버로 전송)
  • 로그인시 회원이 좋아요한 컨텐츠 색 칠하기

Redux-persist

@ant-design/icons

Icon - Ant Design components/icon 사이트

yarn add @ant-design/icons@4.0.0

사용법

1. icon

   import { X } from '@ant-design/icons';

   < X />

2. button

   npm install antd

   import { Button } from 'antd';

   <Button type = "primary">버튼</Button>

aos

aos 공식 홈페이지

yarn add aos
npm install aos --save
bower install aos --save

carousel

carousel 공식 홈페이지

yarn add react-responsive-carousel

사용법

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';

class DemoCarousel extends Component {
    render() {
        return (
            <Carousel>
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
            </Carousel>
        );
    }
});