과제 화면

게시판

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

react-slick

잘 적용 했구요!

게시글 목록

게시글

게시글 작성

메인화면 설정

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

WIL

홈 화면 설정

1. 탑 네비게이션

   • 전에 마이페이지에서 만들어둔 탑 네비게이션과 형태가 같음
   • MyPageNavigation.jsx를 AroowNavigation.jsx로 바꿔준 후 재사용 가능하도록 props를 이용함

2. 체크박스

   • 체크박스가 눌렸을 때, 색이 채워지는게 아니라 체크된 이미지가 채워져야함
   • background: url("${checkImg}");

3. local storage

게시판

1. 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)를 통해 페이지 인덱스가 변경된다.

1. 즐겨찾는 게시판

   • setting에 이용했던 체크박스와 동일한 방식으로 즐겨찾기 할 수 있게 했다
   • local storage를 이용해서 메인화면에 선택한 것만 보이게 했다.
   • 근데 이미지 적용이 안돼서 일단 누르면 색이 칠해지는 체크박스로 만들었다ㅜㅜㅜㅜㅜ

2. 진로, 홍보 슬라이더

   • 이 곳의 게시판 모양은, 메인의 핫게시판 + 실시간의 형태
   • 둘의 코드를 이용해 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}`}>로 연결해주기

1. 댓글 입력 창

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

2. 이미지 삽입

   • <input type="file" accept="image/*" />를 이용해서 이미지를 업로드 하도록 했다
   • 선택했을 때 이미지 보여지게 하는건… 백엔드 연결하면서 하기로했다!
   • 미래의 나 화이팅! ㅋㅎ

마치며

전에 만들어둔게 계속해서 쓰여서, local storage 사용하는거 말곤 새로운건 없었던 것 같다
전에 만들어둔걸 많이 복붙했다..
리액트하면서 제일 어려운건, 요소를 가운데 정렬하는 일인데……^^… 왜 이게 어렵지 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ