Next.js 를 이용한 웹프로젝트

김솔빈·2023년 8월 23일
CSS3Reacthtmlmysqlnext.jsnode.js
0
post-thumbnail

웹툰 홈페이지 만들기 ( AVATOON )

 사용 기술- HTML5 / CSS3 / JS / React- Next.js / Node.js / MySql

구현 기능

  • API를 통해 데이터베이스의 저장된 웹툰의사진 , 제목 , 작가 , 좋아요 수 등을 가져와 보여줌

  • 검색 기능을 통해 제목과 관련된 키워드 , 카테고리별로 검색 가능

    • 검색 결과가 없을 시 랜덤웹툰 추천

  • 인기웹툰 (랭킹)을 통해 좋아요 수가 많은 웹툰을순서대로 보여줌

  • 회원가입 및 로그인 구현 (카카오로그인 포함)

    • 로그인을 통한 기능
      • 좋아요 , 좋아요 취소
      • 댓글 작성 

  • 어드민 페이지 구현 

    • 어드민 페이지 기능    
      • 웹툰 추가 / 삭제   
      • 웹툰 에피소드 추가 / 삭제

  • 오늘 날짜의 요일을 'today!'라는 글씨로 알려줌

  • 3000px ~ 360px 까지의 반응형 웹 구현    

  • 리스트페이지에서의 내림차순 / 오름차순 기능

  • 웹툰페이지에서 클릭시 나타나는 레이아웃을 통해   다음화 , 이전화 , 목록 등 이동 가능

MainPage

메인페이지 컴포넌트

  1. header
  2. slider
  3. allToonInfo
  4. mainRank
  5. tag

메인페이지 상세 기능

  1. 데이터 베이스에 존재하는 모든 웹툰을 슬라이드로 보여주는 슬라이드
  2. 요일별 전체 웹툰 : 전체 웹툰을 보여줌
  3. 인기웹툰 : 좋아요가 높은 6개의 웹툰을 순서대로 보여줌
  4. 웹툰 바로가기 : 클릭시 해당 키워드를 검색해 검색결과 페이지로 이동
  5. 요일알림 : 오늘 날짜의 요일을 "today"라는 글씨로 알려줌 ( header )

메인페이지 디테일

  1. 슬라이드 요소 호버 시 컬러 변경
  2. 요일별 전체 웹툰 호버 시 이미지에만 스케일 적용
  3. 인기 웹툰의 1위는 이미지 , 작가 , 제목 , 랭킹 넘버를 애니메이션을 통해 스케일 무한반복
  4. 인기웹툰 호버 시 이미지 스케일 적용
  5. 웹툰 바로가기 호버 시 컬러 변경
슬라이드메인랭크웹툰 바로가기요일 알림전체요일 스케일

반응형

720px360px

DayPage

데이페이지 컴포넌트

  1. 요일별 추천 웹툰
    • 구현 했으나 요일별 웹툰이 적고 , 아예 없는 요일도 있어 메인페이지 슬라이더를 똑같이 사용
  2. DayToonInfo : 각 요일에 해당하는 웹툰들을 보여줌
  3. Rank : 좋아요 순으로 5개의 웹툰을 보여줌
  4. Tag : MainPage의 Tag와 동일

데이페이지 상세 기능

  1. ~요일 전체 웹툰 : 헤더의 월 ~ 금 요일 선택시 해당 요일의 웹툰을 보여줌
    • 하나의 페이지로 url에 day를 라우트 쿼리로 받아와서 사용
      • 헤더 컴포넌트에서 월 화 수 목 금 토 일 day를 지정
  2. 인기웹툰 : 좋아요 순으로 5개의 웹툰을 보여줌
  3. 태그 , 헤더는 동일

데이페이지 디테일

  1. DayToonInfo 호버 시 메인페이지와 동일하게 이미지 스케일
  2. Rank 호버시 tag와 동일하게 컬러 변경
    • 화면이 작아져 Rank 컴포넌트의 Content(웹툰 설명글)의 공간이 충분치 않은 경우
      해당 크기의 화면에서는 Content가 사라짐 / 제목 , 작가 , 순위는 유지

반응형

720px360px

ListPage

리스트페이지 컴포넌트

  1. ListInfo : 해당 웹툰의 메인 썸네일 , 제목 , 작가 , 요일 , 웹툰 설명에 대한 정보를 api를 통해 가져와 보여줌
  2. ListItem : 해당 웹툰의 회차 정보들을 가져와 보여줌

리스트페이지 상세기능

  1. 메인페이지 ~ 데이페이지 등 에서 웹툰 클릭시 해당 웹툰의 EnName(영문이름)과 webtoonID를 받아
    리스트 페이지로 이동시킴
  2. 좋아요 기능
    • 로그인 x : 토큰이 없어 예외처리 발생 / alert를 통해 " 로그인 해야 이용 가능합니다 " 출력
    • 로그인 o :
      • 해당 아이디가 좋아요를 누르지 않은 상태이면 좋아요 수 증가
      • 해당 아이디가 좋아요를 누른 상태이면 좋아요 수 감소
  3. 첫화보기 : 해당 웹툰의 첫번째 회차로 이동
  4. 내림차순 / 오름차순 : 웹툰의 회차를 내림차순으로 볼지 오름차순으로 볼지 선택 가능

반응형

720px360px

WebToonPage

웹툰페이지 컴포넌트

  1. 클릭레이아웃 : 헤더밑에 붙어있는 검정바
  2. 코멘트 : 해당 웹툰의 달린 댓글들을 보여주고 작성하는 컴포넌트

웹툰 페이지 상세기능

  1. 클릭레이아웃을 이용한 회차 이동
    • "<이전화" : 이전화로 이동 (이전화가 없을 시 예외처리로 동작 x )
    • "다음화>" : 다음화로 이동 (다음화가 없을 시 예외처리로 동작 x )
    • "목록" : 해당 웹툰의 리스트페이지로 이동
  2. 스크롤 상단 , 하단 이동 버튼
  3. 댓글 작성 기능

웹툰 페이지 디테일

  1. 클릭레이아웃 : 처음엔 헤더 밑에 붙어 있다가 스크롤 이동을 통해 헤더가 가려지는
    스크롤 위치에서는 화면의 최상단의 붙음
댓글작성클릭레이아웃 컴포넌트 위치 바뀌는 구간다음화 이전화

SerachPage

페이지 상세 기능

  1. 헤더 검색바를 통한 검색 기능
  2. Tag(웹툰바로가기)를 통한 검색 기능
  3. 검색 결과가 없을 시 전체 웹툰 중 하나 랜덤으로 추천

페이지 디테일

  1. 검색창에 입력한 값을 SerachPage에서 초록색 컬러로 표시
  2. 검색창에 입력한 값이 무엇인지 보여줌
    • "~~"에 대한 검색 결과
헤더를 통한 검색웹툰 바로가기를 통한 검색

로그인 / 회원가입 페이지

회원가입 페이지로그인 페이지

회원가입 페이지 상세 기능

  1. 비밀번호와 비밀번호확인의 값이 일치하지 않으면 회원가입 로직에 예외처리를 주어 동작 x

로그인 페이지 상세 기능

  1. 회원가입을 통해 만들어진 아이디 패스워드를 입력하면 DB에서 확인 후 토큰을 받아 로그인함
  2. 카카오 로그인 API를 통해 카카오 로그인 구현

로그인 기능

  1. 리스트페이지에서의 좋아요 기능
  2. 웹툰페이지에서의 댓글 기능
  3. 어드민 페이지에서의 웹 관리 기능

AdminPage

어드민페이지 상세 기능

  1. 어드민 계정으로 로그인 해야만 접근 가능
    • 쿠키의 토큰을 통해 어드민 구별
    • 어드민 계정이 아닐시 "접근불가"라는 텍스트만 보여줌
  2. 웹툰 추가/삭제
  3. 에피소드 추가/삭제

어드민페이지 디테일

  1. 웹툰 추가/삭제
    • 현재 웹툰 목록에서 ID와 좋아요 옆에 검은색 삼각형을 이용해 각각 내림차순 오름차순 가능
    • 웹툰 등록시 웹툰 제목,작가,썸네일 이미지를 입력하면 메인페이지에 어떻게 보일지 미리보기 가능
    • 현재 웹툰 목록 위 검색창을 통해 검색어가 포함된 열의 색을 입히고 검색어에도 색을 입혀 찾기 쉽게 함
  2. 에피소드 추가/삭제
    • 리스트 페이지와 동일한 UI를 구현해 어드민 페이지에서 헷갈리지 않게함
    • 상단의 웹툰 이름과 작가가 적혀있는 버튼을 통해 관리
검색미리보기에피소드 관리

End / 시연영상

AWS 서버 유지비용이 발생해 배포는 했지만 DB에 데이터를 사용할 수 없게 되었습니다.

작성된 내용은 모두 정상 동작하며
마지막으로 시연영상 링크를 올려두겠습니다.

profile
김솔빈
김솔빈
다음 포스트

Next.js 쇼핑몰 프로젝트

0개의 댓글