Hijob

서은서·2023년 5월 15일
0

1. Cummunity page 구현하기

1) 하단바 Component 생성 및 사용

  • 메뉴/커뮤니티/홈/이력서/마이페이지 의 버튼이 있는 하단바 생성(추후 내용 추가)

2) 메뉴바 만들기

  • 전체글/인기글/공지를 누를 시 보이는 화면이 다르게 만들고자 함
  • 어떤 식으로 메뉴바를 만들지?
    → 1️⃣ input radio를 이용해 만들자! ( default 값을 전체글로 해서 제일 처음 화면에는 전체글이 보이도록 하자!)
    // 먼저 개별 radio버튼을 나타내는 component를 생성
function Radio({children,value,name,defaultChecked,disabled}){
       	return(
            <label>
                <input type="radio" value={value}name={name} defaultChecked={defaultChecked} disabled={disabled} />{children}</label>);
    }
// 다수의 radio를 사용할 예정이기에 RadioGroup component를 생성

function RadioGroup({label,children}){
        return(
            <fieldset>
                <legend>{label}</legend>
                {children}
            </fieldset>
        );
    }

Radio,RadioGroup component는 비제어(uncontrolled) 컴포넌트로 바로 사용이 가능하다!
→ 2️⃣ list를 이용해서 만들자
클릭하면 이동(다른 컴포넌트로) 및 굵은 글씨로 바뀌는 함수를 만들어보자!(SelectMenu 함수 만들기)
className 동적할당 하는 방법

  • 화면 바꿈은 어떻게?
    → 함수를 만들어볼까?

3) 게시글 컴포넌트 만들기

  • 커뮤니티에 있는 게시글들은 똑같은 형식의 구조를 따른다. 따라서 컴포넌트를 만들어 텍스트를 변환하는 식으로 구성할 것!
function SimplePost({title,author,time,count,like,reply}){
    return(
        <>
        <div className="post_container">
            <div id="text_box">
                <h2>{title}</h2>
                <div><span id="cummunity_author">{author}</span> <span id="cummunity_time">{time} </span></div>
                <div><span id="cummunity_count">조회수 {count} </span><span id="cummunity_like">추천수 {like}</span></div>
            </div>
            <div id="reply_box">
                <h4>{reply}</h4>
                <span id="cummunity_reply">댓글</span>
            </div>
        </div>
        <hr className="mainline"/>
        </>
    );
}

4) 어떻게 게시글만 움직이게, 화면에서 벗어날때 어떻게 할까?

  • 게시글이 여러개일 경우 화면을 벗어날 수 있다. 이때 css의 overflow:auto를 활용하여 규격에서 벗어나는 경우 스크롤을 통해 움직일 수 있도록 한다.
    Cummunity 구현 화면
profile
내일의 나는 오늘보다 더 나아지기를 :D

0개의 댓글