🍊감귤마켓

기간: 22.01 - 22.04

Deploy

1. 프로젝트 소개

• 멋쟁이사자처럼 프론트엔드 스쿨 1기 팀 프로젝트로 진행한 감귤마켓입니다
• 상품을 등록, 판매하고 자신의 일상을 공유할 수 있는 SNS 마켓입니다

2. 스택

• React Hook
• Next.js
• TypeScript
• Emotion

3. 역할 분담

각 기능 별로 역할을 나누어 진행하였습니다

김정희

github/wjdgml3834

• 홈 화면 게시글
• 팔로우, 팔로우 취소
• 게시글 복수 이미지 캐러셀
• 팔로워, 팔로잉 페이지

이현호

github/LEEHYUNHO2001

• next-auth를 이용한 로그인
• 회원가입, 프로필 미리보기
• 감귤마켓의 유저 검색
• 좋아요 및 좋아요 취소
• 프로필 수정

최성이

github/choisung2

• 게시글 등록, 수정, 삭제
• 상품 등록, 수정, 삭제
• 게시글 상세 페이지
• 유저 프로필
• 댓글 기능

4. 폴더 구조

펼쳐보기

├── src
│   ├── components
│   │   ├── BackButton.tsx
│   │   ├── Border.tsx
│   │   ├── Custom404.tsx
│   │   ├── Error.tsx
│   │   ├── Loading.tsx
│   │   ├── ProfileForm.tsx
│   │   ├── ProfileUpdate.tsx
│   │   ├── developer
│   │   │   ├── Developer.tsx
│   │   │   └── Footer.tsx
│   │   ├── follower
│   │   │   ├── Card.tsx
│   │   │   ├── CardContainer.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── Header.tsx
│   │   │   └── Main.tsx
│   │   ├── following
│   │   │   ├── Card.tsx
│   │   │   ├── CardContainer.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── Header.tsx
│   │   │   └── Main.tsx
│   │   ├── home
│   │   │   ├── Card.tsx
│   │   │   ├── CardContainer.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── Header.tsx
│   │   │   ├── Main.tsx
│   │   │   ├── Nonfeed.tsx
│   │   │   ├── ReportCancelModal.tsx
│   │   │   └── ReportModal.tsx
│   │   ├── layouts
│   │   │   ├── Layout.tsx
│   │   │   ├── StatusBar.tsx
│   │   │   └── index.tsx
│   │   ├── login
│   │   │   ├── Email.tsx
│   │   │   └── Main.tsx
│   │   ├── postDetail
│   │   │   ├── CoReportCancelModal.tsx
│   │   │   ├── Comment.tsx
│   │   │   ├── CommentDelModal.tsx
│   │   │   ├── CommentList.tsx
│   │   │   ├── CommentModal.tsx
│   │   │   ├── Container.tsx
│   │   │   └── DetailCard.tsx
│   │   ├── postUpload
│   │   │   ├── Container.tsx
│   │   │   ├── EditContainer.tsx
│   │   │   ├── FileUpload.tsx
│   │   │   ├── PostEdit.tsx
│   │   │   └── PostUpload.tsx
│   │   ├── product
│   │   │   ├── Container.tsx
│   │   │   ├── EditContainer.tsx
│   │   │   ├── FileUpload.tsx
│   │   │   ├── Modification.tsx
│   │   │   ├── ProductDeleteModal.tsx
│   │   │   ├── ProductModal.tsx
│   │   │   └── Register.tsx
│   │   ├── profile
│   │   │   ├── Carousel.tsx
│   │   │   ├── CarouselCard.tsx
│   │   │   ├── DeleteModal.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── Info.tsx
│   │   │   ├── LogOutModal.tsx
│   │   │   ├── MyContainer.tsx
│   │   │   ├── MyPostCard.tsx
│   │   │   ├── MyPostContainer.tsx
│   │   │   ├── MyProfileModal.tsx
│   │   │   ├── PostModal.tsx
│   │   │   ├── ProfileAppPost.tsx
│   │   │   └── ProfilePost.tsx
│   │   ├── research
│   │   │   ├── Card.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── Header.tsx
│   │   │   └── Main.tsx
│   │   └── signup
│   │       ├── SignUp.tsx
│   │       └── SignUpProfile.tsx
│   ├── constants
│   │   └── index.ts
│   ├── pages
│   │   ├── 404.tsx
│   │   ├── _app.tsx
│   │   ├── api
│   │   │   └── auth
│   │   │       └── [...nextauth].ts
│   │   ├── developer
│   │   │   └── index.tsx
│   │   ├── follow
│   │   │   └── [id]
│   │   │       ├── follower.tsx
│   │   │       └── following.tsx
│   │   ├── home
│   │   │   └── index.tsx
│   │   ├── home.tsx
│   │   ├── index.tsx
│   │   ├── login.tsx
│   │   ├── post
│   │   │   ├── [...params].tsx
│   │   │   └── upload.tsx
│   │   ├── postdetail
│   │   │   └── [id].tsx
│   │   ├── product
│   │   │   ├── [...params].tsx
│   │   │   └── index.tsx
│   │   ├── profile
│   │   │   ├── [...params].tsx
│   │   │   ├── edit.tsx
│   │   │   └── index.tsx
│   │   ├── research.tsx
│   │   └── signup.tsx
│   └── types
│       ├── Comments.ts
│       ├── Follower.ts
│       ├── Following.ts
│       ├── MyPost.ts
│       ├── Posts.ts
│       └── Product.ts

실행 방법

$yarn dev

5. 기능

1) 홈

로그인	회원가입	홈

계정검색(팔로우 O)	계정검색(팔로우 X)	개발자

2) 프로필

마이 프로필	팔로워	팔로잉

프로필 수정	로그아웃	유저 프로필

3) 게시글

작성	수정	삭제

신고	댓글 작성	댓글 신고 및 삭제

4) 상품

등록	수정	삭제

6. 느낀점

• 이번 프로젝트에서 Next.js, TypeScript 를 처음 접했습니다. 초반에는 어려운 부분이 많아 많이 헤맸지만 열심히 공부하며, 팀원분들과 소통하며 빠르게 성장할 수 있었던 것 같습니다. 배울 수 있는 기회가 많았던 프로젝트였습니다.
• 아쉬운 점은 1. 타입 스크립트 사용이 미흡했다는 점과 next에서 제공하는 dynamic 을 활용하지 못했다는 점입니다. 추후 리팩토링 시 any와 never 등의 타입은 대체할 예정이며, dynamic의 ssr 옵션 등을 활용해 보고 싶습니다.