[WSC-018] home/together 페이지 리팩토링/ 다이나믹 라우팅 구현

[junh0328]

📄 이슈 내용

• 기존 POST 요청을 통해 백엔드로 넘겨준 데이터를 넘겨받기 위해 (GET) 가상의 데이터를 넣고 리팩토링한다
• id 값을 바탕으로 해당 페이지에 대한 다이나믹 라우팅을 구현한다

📝 상세 내용

기존 마크 업으로 작업 되어있는 코드를 더미 데이터를 통해 실제로 받는 상황으로 변환하여 코드를 구현한다

다이나믹 라우팅

1. 폴더 구조를 생성한다

📁 pages/post/[id].tsx

function Post() {
  const router = useRouter()
  const { id } = router.query

   ...

  return (
    <>
      <div>
        <h1 style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'center', margin: '20px 0' }}>🌟 {id}번 게시물 🌟</h1>
      </div>
       ...

2. id는 더미데이터를 기준으로 넘겨준다

📁 apis/dummyData

export const studyArr1 = [
  {
    id: 1, 🌟🌟🌟🌟
    title: '[서울] 모각코 할 사람!',
    schedule: '올해 하반기까지 끝내는 것이 목표',
    qualification: '주 2회 / 온라인',
    summary: 'Swift UI가 아니라  UIkit 기반의 ...',
    peopleNum: '코로나 때문에 4명 전후로 모집할 예정입니다',
    hashtagArr: ['UI-KIT', 'IOS', '오프라인', '모여라'],
  },

3. 더미 데이터를 렌더링한 정보를 바탕으로 props를 사용하여 링크를 연결해준다

👨‍👨‍👦  상위 컴포넌트 (StudySlider)
function StudySlider({ data }: Props) {
  return (
    <div css={studyContentListWrap}>
      <ul css={studyContentList}>
        {data?.map((s) => (
          <StudyBox key={s.id} uniq={s.id} listTitle={s.title} hashtagArr={s.hashtagArr} />
        ))}
      </ul>
    </div>
  )
}

👨‍👦 하위 컴포넌트 (StudyBox)

type Props = {
  key: number
  uniq: number
  listTitle: string
  hashtagArr: string[]
}

function StudyBox({ uniq, listTitle, hashtagArr }: Props) {
  return (
    <li css={studyContentBox}>
      <Link href={`/post/${uniq}`}>        
// 📍 Link로 넘겨주는 uniq > 더미데이터의 id 값을 useRouter를 통해 router.query에 저장할 수 있다
        <a>
          <article>
            <h3>{listTitle}</h3>
            {hashtagArr.map((v, i) => (
              <p key={i}>#{v}</p>
            ))}
          </article>
        </a>
      </Link>
    </li>
  )
}

✔ 체크리스트

• 더미데이터를 기존 데이터 형식으로 넘겨 주었는가?
• 이슈 내용을 모두 마무리 했는가?

레퍼런스

faker 라이브러리

결과

result.mov

의논이 필요한 부분

모각코/ 스터디/ 토이 프로젝트 모임을 어떻게 구분할건지? (글쓰기에 추가해야 하는지 여부)

환경설정 이벤트를 눌렀을 때 어떻게 표시할 것인지?

모집중/ 기간 종료는 어떻게 받아올 지?

모바일 미디어쿼리에서 함께해요 + 버튼 안보이는 이슈

nav 크기 main 처럼 (600 고정은 어떤지?)