프로젝트 설치

<aside> 💡

npx create-next-app@latest .

</aside>

next 16 버전으로 설치되었습니다.

앱 라우터 방식을 사용

폴더 구조

app/
├── page.tsx
├── layout.tsx
├── donday/
│   ├── page.tsx            // 메인페이지
│   └── [id]/
│         └── page.tsx      // 상세 페이지
components/
├── Slider.tsx              // 공유수 top콘텐츠, 오리지널 시리즈, 돈이 되는 1분
├── Catefories.tsx          // 주제별 콘텐츠
├── Banner.tsx              // 똑똑한 전세관리
├── Keywards.tsx            // 추천 키워드
└── Subscribe.tsx           // 구독
containers/
├── TopSharedContainer.tsx  // 공유수 top 콘텐츠
├── CategoriesContainer.tsx // 주제별 콘텐츠
├── BannerContainer.tsx     // 똑똑한 전세관리
├── KeywardsContainer.tsx   // 추천 키워드
├── SeriesContainer.tsx     // 오리지널 시리즈
├── VideoContainer.tsx      // 돈이 되는 1분
└── SubscribeContainer.tsx  // 구독
styles/
├── sliderStyle.css
├── 중략...
└── SubscribeStyle.css
api/
├── fetchPosts.ts
└── fetchVideo.ts

라이브러리

• react-slick 슬라이더 ⇒ 사용X

  • npm i react-slick slick-arousel
  • npm i @types/react-slick

  역할	패키지명	설명
  메인 기능	react-slick	슬라이드 컴포넌트 기능 제공
  스타일	slick-carousel	CSS 테마 및 스타일 포함
  타입 정의 (TS일 때만)	@types/react-slick	타입스크립트에서 IntelliSense 및 타입 지원

  • 왜 사용을 못했느냐,, react-slick은 클래스기반이고, next16은 함수형이라 호환되지 않는 문제 발생 ⇒ swiper로 변경
  • npm uninstall react-slick slick-carousel

• swiper 슬라이더

  • npm i swiper
  • 버전별 복제 방식 차이로 10버전으로 낮춤

• 루시드 아이콘

  • npm install lucide-react

• tailwind CSS

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p
  

  • D 플래그는 개발 의존성으로 설치하는 것을 의미합니다.
  • npx tailwindcss init -p는 tailwind.config.js 와 postcss.config.js 파일을 동시에 생성합니다.

추가 구현 기능

1. 로그인 기능
   1. 관리자 / 회원 구분
      1. 이거는 관리자페이지에서 권한을 줘야하는거 아닌가!?
2. 구독 기능
   1. isSubscribed
3. 게시글 등록
   1. 작성 페이지
   2. 뷰 페이지
   3. 리스트 페이지..?는 없어 메인이야 → 아니 있네????
4. 배너 등록
   1. 배너 등록 후 게시할 배너 선택택