📨 모바일 쿠폰 중고 거래 사이트

📝 과제 설명

• 앱 형태의 모습으로 웹에서 구현하였다.
• 데이터를 연동하는 과정이 매우 많아서 반복숙달에 큰 도움이 되었다.
• Next.js를 사용하여 SSR의 이점과 보다 간편한 router 기능을 경험했다.

⚙️ 기술 스택

• React, Next.js
• Typescript, JavaScript, Styled-Component
• Git & GitHub, Build Tool (Create Next App)

💻 기능 구현

• 메인 홈 카테고리 카드 / 카테고리 페이지 / Footer

🏷 메인 홈 카테고리 카드

• 카테고리 카드를 ConCard라는 컴포넌트를 만들어 사용하였다.
• ConCard에 category데이터를 넣어준 뒤에 map을 돌려서
  9개의 카테고리 카드를 구현할 수 있었다.

    <CategoryContainer>
      <ul>
        {categories &&
          categories.map((category: Category) => (
            <ConCard key={category.id} category={category} />
          ))}
      </ul>
    </CategoryContainer>

📊 카테고리 페이지

• 카테고리 페이지에서도 동일하게 ConCard를 재사용하면서 세부적인
  데이터를 받아와 새로운 카드를 구현하였다.
• 카테고리 페이지는 크게 상단 탭, 하단 콘 카드로 나누어 작업하였으며,
  데이터의 id값과 탭에서 받아온 id가 동일하면 색상을 변경해주는 작업도 하였다.

// 카테고리 전체부분
 <>
   <CategoryTab id={id} />
      {id === '1' ? (
        <DealList />
      ) : (
        <CategoryContainer>
          {categories &&
            categories.map((category: ConCategory1) => (
              <ConCard key={category.id} category={category} />
            ))}
        </CategoryContainer>
  </>
 // 상단 탭 부분
 <TabSection ref={sectionRef}>
      {categories &&
        categories.map((category: Category, i) => (
          <TabButton
            key={`tab-${i}`}
            category={category}
            idx={i}
            id={id}
            setToMove={setToMove}
          />
        ))}
    </TabSection>

🪑 Footer

• 회사 정보에 관한 레이아웃 구현 및 세부정보는 아이콘 클릭 시 show / hide 기능 추가
• boolean 상태값을 추가하여 true / false를 구별하여 clasName에 차별을 주어 로직을 구현하였다.

🌅 최종 구현

배포사이트 보러가기

Next.js를 처음 사용하면서 CSR / SSR의 차이점을 이해하였고 직접 그 차이를 경험할 수 있었다. 또한, react에서 사용하는 router만 경험했다가 이번 계기를 통해서 폴더 구조를 통한 router 기능을 구현해주는 것을 보면서 신세계?!를 경험했다. 매번 새로운 것을 경험하면서 어렵지만 그 과정에서 재미를 느끼고 있는 나를 보면 스스로 뿌듯하고 기분이 좋다. 여기서 멈추치 않고 계속 복습하고 공부하자.📸