[포트폴리오-1] 지금까지 정리

본 포트폴리오는 인프런 강의 " [코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스 "에서 실습 과제로 진행하는 포트폴리오입니다.

 

실습을 시작한 시점부터 현재까지 기록한 내용이 없기 때문에 지금까지의 주요 내용들을 정리할 것입니다.

이후부터 코드를 추가하거나 수정하게 되면 블로그에 그 내용을 기록할 예정입니다.

 

---

 

파일 구조

 

boards 폴더에는 자유게시판과 관련된 파일들이 위치합니다.

/boards는 자유게시판 목록을 보여줍니다.

/boards/new는 게시글 작성 화면을 보여줍니다.

/boards/[id]는 게시글 상세 화면을 보여줍니다.

/boards/[id]/edit은 게시글 수정 화면을 보여줍니다. 

 

 

src 폴더에는 여러 곳에서 사용가능한 함수나 쿼리, 타입을 위치해둔 commons와 컴포넌트들을 위치해둔 components 파일들이 위치합니다.

 

commons 폴더 내부의 libraries는 공통 함수들을 저장해 놓은 utils 파일이 위치합니다.

styles는 글로벌 스타일을 저장해 놓은 globalStyles 파일이 위치합니다.

types/generated는 graphql을 통해 백엔드에서 받은 데이터들의 타입이 저장된 types 파일이 위치합니다.

그리고 graphql의 쿼리문을 등록해놓은 queries 파일이 commons에 위치합니다.

 

components 폴더 내부는 재사용이 가능한 commons 컴포넌트와 단일 컴포넌트들을 모아놓은 units 폴더가 위치합니다.

commons의 apollo 폴더에는 apollosetting을 위한 컴포넌트가 위치합니다.

layout 폴더에는 layout을 구성하는 header, banner, navigation 들의 컴포넌트가 위치합니다.

pagination 폴더에는 페이지네이션 기능의 컴포넌트가 위치합니다.

Rate 폴더에는 별점 기능의 컴포넌트가 위치합니다.

youtube 폴더에는 유튜브 영상 기능의 컴포넌트가 위치합니다.

 

units의 boards 폴더에는 게시글 목록 컴포넌트가 위치합니다.

comment 폴더에는 댓글 작성 컴포넌트가 위치합니다.

comment_list 폴더에는 댓글 목록 컴포넌트가 위치합니다.

detail 폴더에는 게시글 상세 컴포넌트가 위치합니다.

new 폴더에는 게시글 작성 컴포넌트가 위치합니다.

other_comment 폴더에는 댓글 목록에서 보여질 댓글 컴포넌트가 위치합니다.

 

 

주요 기능

 

헤더, 배너, 네비게이션

 

• 로고 버튼을 클릭하면 메인화면인 /boards로 이동합니다.
• 캐러셀이 구현되어 있습니다.
• 메뉴의 자유게시판, 중고마켓, 마이페이지 버튼을 클릭하면 해당 페이지로 이동합니다.

 

 

게시글 목록

• 페이지네이션 기능이 구현되어 있습니다.
• 게시글의 제목을 클릭하면 해당 게시글의 상세 페이지로 이동합니다.
• 게시글 등록하기 버튼을 클릭하면 게시글 등록하기 페이지로 이동합니다.

 

 

게시글 등록

• 작성자, 비밀번호, 게시글 내용을 입력하지 않으면 등록하기 버튼이 활성화되지 않습니다.
• 우편번호 검색 버튼을 클릭하면 주소 검색창이 나타납니다.

 

 

게시글 상세-1

 

---

게시글 상세-2

• 게시글 작성 시 입력했던 주소가 툴팁으로 나타납니다.
• 좋아요 버튼과 싫어요 버튼이 구현되어 있습니다.
• 목록으로 버튼을 누르면 게시글 목록 페이지으로 이동합니다.
• 수정하기 버튼을 누르면 게시글 수정 페이지로 이동합니다.
• 삭제하기 버튼을 누르면 게시글이 삭제됩니다.

 

 

게시글 수정

• 게시글 수정 페이지로 이동시 입력했던 정보들이 인풋창에 defaultValue로 초기화되어 있습니다.
• 작성자는 변경할 수 없도록 readOnly 처리되어 있습니다.

 

 

댓글 입력

• 별점 기능이 구현되어 있습니다.

 

 

댓글 삭제

• 삭제 버튼 클릭 시 비밀번호 입력창이 나타납니다.

 

 

댓글 수정

• 수정 버튼 클릭 시 댓글 수정 폼이 나타납니다.
• 입력했던 정보들이 인풋창에 defaultVaule로 초기화되어 있습니다.
• 작성자는 변경할 수 없도록 readOnly 처리되어 있습니다.

 

사용한 라이브러리 및 프레임워크

 

라이브러리

react

emotion

apollographql

axios

typescript

react-daum-postcode

 

 

프레임워크

next.js

antdesign

---

아직 배포하지 않았기 때문에 사이트 주소가 없습니다.

현재까지의 진행 코드는 https://github.com/Cheolyong-Kim/portfolio-1 에서 확인할 수 있습니다.