GDSC 3주차 WIL

박수빈·2021년 10월 10일

TIL gdsc

과제 화면

게시판

체크된 것에 따라, 메인화면의 게시판이 달라집니다

react-slick

잘 적용 했구요!

게시글 목록

게시글

게시글 작성

메인화면 설정

여기도 선택한대로 메인화면에 반영됩니다!

WIL

홈 화면 설정

탑 네비게이션
- 전에 마이페이지에서 만들어둔 탑 네비게이션과 형태가 같음
- MyPageNavigation.jsx를 AroowNavigation.jsx로 바꿔준 후 재사용 가능하도록 props를 이용함
체크박스
- 체크박스가 눌렸을 때, 색이 채워지는게 아니라 체크된 이미지가 채워져야함
- background: url("${checkImg}");
local storage

게시판

react-slick
- react-slick의 한 종류가 carousel 인줄 알았는데, 그 반대
- carousel은 회전목마라는 뜻
- 구현할거는 계속 회전하진 않고 끝이 존재하는,,,carousel이라고 생각하면 될 듯

  const settings = {
    className: "slider-wrapper",
    dots: false, // 광고 배너를 상상했을 때, 아래 넘어가는게 느껴지도록 있는 점들
    infinite: false, // 계~속 돌게 하는거
    slideToShow: 1, // 한번에 보여질 개수
    slideToScroll: 1, // 슬라이드 당 넘어갈 수
    afterChange: (index) => setSliderId(index), // 인덱스 바꾸는 callback
    ref: mySlider, // 다른 슬라이더에 ref 넘겨줌
  };

css를 적용해 주지 않아서, 버튼 작동이 안됐다 꼭! css가 필요한 녀석이다
동작방식은 2가지: 손으로 슬라이드 했거나, 상단의 네비게이션을 클릭했을 때다.

  <button onClick={() => moveSlider(0)}>
  	<UnderLine text="게시판" isActive={sliderId === 0} />
  </button>

그래서 상단 네비게이션을 버튼으로 구성해서, 버튼 클릭시 moveSlider() 함수가 호출되어 setSliderID()를 활용해 페이지 인덱스를 변경해준다.
슬라이더가 작동했을 때도 setting의 afterChange: (index) => setSliderId(index)를 통해 페이지 인덱스가 변경된다.

즐겨찾는 게시판
- setting에 이용했던 체크박스와 동일한 방식으로 즐겨찾기 할 수 있게 했다
- local storage를 이용해서 메인화면에 선택한 것만 보이게 했다.
- 근데 이미지 적용이 안돼서 일단 누르면 색이 칠해지는 체크박스로 만들었다ㅜㅜㅜㅜㅜ
진로, 홍보 슬라이더
- 이 곳의 게시판 모양은, 메인의 핫게시판 + 실시간의 형태
- 둘의 코드를 이용해 BoardBox.jsx를 만듦
- props를 이용해 title과 content를 매번 바꿀 수 있게하여 재사용했다.

  const BoardBox = ({ title, contents, to }) => {
    return (
      <BoardWrapper className="board-wapper">
        <div>// 이 곳에 title과 to props를 이용해 제목과 더보기 버튼</div>
        <div>
          {contents.map((content) => (
            <ContentWrapper>
              // content는 title, date, like, comments, content를 갖고있음 //
              백엔드 연결하면 Link 태그 이용해 게시글 자세히 보는 페이지로 이동
            </ContentWrapper>
          ))}
        </div>
      </BoardWrapper>
    );
  };

게시글 목록, 세부 페이지

<Link to={/board/list/${board.link}}>로 연결해주기

댓글 입력 창
- 체크 박스 누르면 익명 글씨도 빨강색
- styled를 이용해서 <MainWrapper isSecret={isSecret}> 로 props를 넘겨주고 color: ${(props) => props.isSecret ? COLORS.red : COLORS.grey_400};로 색을 입혀줬다.
- isSecret는 state로 체크박스가 체크될 때 true, 언쳌될때 false로 바꿔줬다.
이미지 삽입