Giter VIP home page Giter VIP logo

final-11-nigonego's Introduction

니고네고

니고네고

니고네고 목업

🏠 배포 URL: (추후배포)
🔐 Test ID/PW: [email protected] / 123123

목차

  1. 프로젝트 소개
  2. 팀원 소개
  3. 개발 기간
  4. 개발 환경
  5. 폴더 구조
  6. 작업 문화
  7. 주요 기능
  8. 기능 UI
  9. 컨벤션
  10. 리팩토링
  11. 소감
  12. 출처

1. 프로젝트 소개

  • 니고네고는 레고를 좋아하는 사람들을 위한 레고 전용 플랫폼입니다.
  • 니고네고에서 사용자는 자신이 직접 조립한 레고 사진을 공유하고 다양한 유저와 소통할 수 있습니다.
  • 중고 사이트 기준으로 하루 600건 이상 업로드될 정도로 시장이 활발하게 형성되어 있는 만큼, 유저를 위한 중고 거래 기능 또한 제공하고 있습니다.

2. 팀 소개

안녕하세요. 저희는 K(권순호)K(김민지)O(오연주)L(이수아)로 이루어진 꿀조🍯입니다!

1. 팀원 소개

권순호 김민지 오연주 이수아




팀원 팀원 팀장 팀원

2. 역할 분담

김민지

  • 공통 컴포넌트: Modal, Input, Button, Chat
  • 로그인 기능구현
  • 회원가입 기능구현
  • 유효성 검사 기능구현
  • 프로필 설정 기능구현
  • 프로필 수정 기능구현
  • 채팅 마크업
  • 검색 마크업
  • 404 마크업

권순호

  • 로그인 기능구현
  • 회원가입 기능구현
  • 유효성 검사
  • 상품 상세 페이지 기능구현
  • 댓글 input 컴포넌트 기능구현
  • GitHub 관리
  • 업로드 페이지 마크업
  • 데일리 스크럼 작성
  • 로그인 마크업
  • 회원가입 마크업
  • 상품 상세 페이지 마크업
  • 댓글 input 컴포넌트 마크업

오연주

  • 상품 업로드 기능구현
  • 포스트 업로드 기능구현
  • 버튼 활성화 기능구현
  • 헤더 컴포넌트
  • MyProfile, YourProfile 마크업
  • 채팅창 마크업
  • 로그인 마크업
  • 회원가입 마크업

이수아

  • 무한스크롤 기능구현
  • 상품등록 기능구현
  • 판매중인 상품 기능구현
  • 이미지등록 기능구현
  • YourProfile,HomeFeed 기능구현
  • 하단Navbar 기능구현
  • 좋아요,Followers,Followings 기능구현
  • 무한스크롤 마크업
  • 상품등록 마크업
  • 판매중인 상품 마크업
  • 이미지등록 마크업
  • YourProfile,HomeFeed 마크업
  • 하단Navbar 마크업
  • 좋아요,Followers,Followings 마크업

3. 개발 기간

2023.06.12 - 2023.06.28

  • 1주차: 프로젝트 기획, 피그마 디자인 작업, 깃 작업, 역할분담
  • 2주차: 컴포넌트 분리 및 마크업, 기능구현
  • 3주차: 오류 수정

4. 개발 환경

프론트엔드

백엔드: 제공된 API

협업툴

테스트툴: 포스트맨


5. 폴더 구조

final-11-NigoNego
├─ public
  └─ index.html
├─ README.md
└─ src
   ├─ api
     ├─ Api.jsx
     └─ getData
   ├─ App.js
   ├─ assets
     ├─ image
     └─ images
   ├─ atom
   ├─ components
     ├─ Chat
     ├─ common
       ├─ AddProduct
       ├─ button
       ├─ Comment
         ├─ CommentInput
         └─ CommentPost
       ├─ Header
       ├─ Heart
       ├─ Input
       ├─ Modal
       ├─ Navbar
       ├─ User
       └─ UserImage
     ├─ HomePost
     ├─ Product
     ├─ ProfileHeader
     ├─ Test
     └─ YourProfileHeader
   ├─ index.js
   ├─ pages
     ├─ ChatPage
     ├─ HomeFeed
     ├─ HomePage
     ├─ JoinPage
     ├─ LoginMain
     ├─ LoginPage
     ├─ NotFound
     ├─ PostPage
       ├─ PostMain
       └─ PostUpload
     ├─ ProductPage
     ├─ ProfilePage
       ├─ MyProfilePage
       ├─ ProfileEditPage
       └─ YourProfilePage
     ├─ SearchPage
     └─ SplashPage
   ├─ routes
   ├─ store
   └─ styles

6. 작업문화

6-1. 데일리스크럼

1. 매일 아침 회의 : 당일 진행할 작업 내용 공유
2. 매일 저녁 회의 : 진행 상황 공유

6-2. 페어코딩

라이브쉐어를 이용해 로그인/회원가입 페이지를 함께 작업했습니다.

6-3. branch 전략

Git Flow
main - dev - feature[기능]

기능에 따라 브랜치를 구별하여 협업의 능률을 높였습니다.
각자 맡은 기능에 집중할  있었고, 연관되는 기능이 있을 경우 관련되는 기능들만 merge를 하여 오류가 나더라도 다른 기능에 영향을 주지 않을  있었습니다.

7. 주요기능

  • 핵심 기능 : 게시물 업로드, 팔로우 기능, 상품 등록, 댓글

8. 기능 UI

로그인/회원가입

Splash 로그인 회원가입 프로필 설정
splash page 로그인 페이지 회원가입 최종 프로필설정

주요기능

홈피드 게시글 상세 게시글 업로드 유저프로필
홈 피드 게시글 상세 게시물 업로드 유저 프로필

그외 기능

마이 프로필 상품등록 모달창 로그아웃 채팅 페이지
마이 프로필 상품등록 모달창 로그아웃 채팅방

9. 컨벤션

커밋 컨벤션
✨ Feat : 새로운 기능 추가
💄 Design : CSS, 사용자 UI 디자인 변경
📝 Docs : 문서 수정
🎨 Style : 코드포맷, 세미콜론, 개행, 코드 구조, 형태
🤔 Test : 테스트
♻️ Refactor : 코드 리팩토링
🐛 Fix : 버그 및 오류 수정
🔥 Remove : 불필요한 파일 삭제
🔨 Chore : 빌드 업무, 패키지매니저, 폴더트리, 세팅 수정
💡 Comment : 필요한 주석 추가 및 변경

10. 리팩토링 방향성

📍 반응형으로 제작하기

UI는 반응형으로 구현하였지만 화면이 커지면 무한스크롤이 제대로 동작하지 않았습니다. 무한스크롤 기능을 다시 한 번 구현하여 모든 화면에 대응하는 무한스크롤을 구현하고 싶습니다.

📍 recoil을 사용해 데이터 관리하기

전역으로 관리할 데이터와 아닌 데이터를 구분하지 않고 페이지마다 불러와서 중복된 API가 많았습니다. 이로 인해 API의 통일성이 없어 데이터 통신에 어려움을 겪었습니다.

📍 다른 사람이 구현한 코드 리팩토링하기

비슷한 기능을 맡아 작업하다보니 다른 팀원이 구현한 기능에 대한 이해도가 부족하다는 생각이 들었습니다. 다른 사람이 구현한 코드를 리뷰하거나 리팩토링해보고 싶습니다.

📍 컴포넌트 정리하기

여러 측면을 고려하여 컴포넌트를 제작하여 재사용성을 높히고 싶습니다.

📍 웹 접근성과 웹 표준을 지키는 코드(lighthouse로 구체적인 수치 기록) 작성하기

📍 기능 및 서비스 추가

조립된상품/ 조립하기전 상품 구분해서 나누는 서비스 추가 카테고리별 상품 등록 추가 지도 api 사용 해서 직거래 위치 pin 추가


11. 소감

권순호

프로젝트가 다들 처음이라 막막하고 앞이 안보였는데 나이로비에서 만난 멋사 동기 여러분들덕분에 여기까지 올 수 있었습니다! 제가 얼마나 부족한지 깨닳는 시간이 되었고 또한 많이 성장하는 시간도 되었습니다 프로젝트를 한번 진행 하고 나니 배우고 싶은 부분이 더욱 많아 졌습니다 (필요에 의해서) 저희조는 멋사 5기수료 그리고 5.5기로 다시 찾아오겠습니다 저희 레파지토리 자주 확인해주세요

김민지

초반 프로젝트 설정에서 시간을 많이 소요하고 네명이서 머리를 맞대고 고민해봐도 진도가 늦어서 걱정이 많았지만, 오히려 다같이 고민하고 알아가는 시간이 많아서 좋았습니다. 무언가 안되면 한명이 고민하는게 아니라 넷이 다 같이 해결해가는 과정이 즐거웠습니다. 프로젝트 기간이 끝나고도 다같이 공부하며 취업할 때까지 빠져나가지 못하는 개미지옥으로 만들겠습니다.

오연주

함께 코드에 대해 고민하고 해결해가는 과정이 즐거웠습니다. 돌이켜보면 부족한 부분에 대한 아쉬운 마음도 있지만 이런 아쉬움 또한 성장의 결과물이라고 생각합니다. 함께 성장할 수 있도록 도와주신 모든 분들께 감사드립니다.

이수아

많이 부족했고 오류도 정말 많이 봤지만 결국 완성은 시켰다는 마음에 너무 뿌듯하고 정말 많이 배웠습니다. 해당 기능이 왜 필요하고 동기, 비동기적인 데이터 통신에 대한 공부가 왜 필요한지 리액트의 상태관리는 왜 해야하는지 뼈로 새겼던 프로젝트 였습니다. 7월 3일부터 아쉬웠던부분, 구현하고 싶었던 기능 , 오류를 잡아가며 즐거운 리펙토링 해나가겠습다! 다들 고생많으셨고 취업하실때까지 봅시다^^


12. 출처

splash 이미지

https://codepen.io/Keyon/pen/jXjMKj

final-11-nigonego's People

Contributors

kimmming avatar likelionfes avatar oh5yeonju avatar snowkwon420 avatar suconpa avatar

Stargazers

 avatar  avatar  avatar

final-11-nigonego's Issues

Login 메인페이지 작업

오늘할일

  • Login 메인페이지 마크업
  • styled-component 작업
  • 로그인 버튼 작업
  • 회원가입 버튼 작업

리뷰

[recoil 상태관리] 전역 설정

  • recoil 사용 token, accountname 저장해서 페이지에 뿌리기
  • token 저장되어 있을 시 splash 페이지에서 바로 점프
  • 로그아웃 하면 token 삭제
  • 로그인, 로그아웃 하고 나서 뒤로가기 막기
  • follower 가 없으면 HomePage, 있으면 HomeFeed
  • [ ]

[유저 프로필 페이지] 기능구현

공통

  • 상단 더보기 버튼 클릭 시 로그인 관련 모달창
  • 로그아웃 클릭 시 로그아웃되며 로그인 페이지로 이동

상단 프로필

  • 클릭한 유저의 데이터 화면에 구현하기: useLocation
  • 팔로우 버튼 클릭 시 언팔로우 버튼으로 변경
  • 팔로우/언팔로우 버튼 클릭 시 followers 숫자 변동

유저가 판매 중인 상품

  • GET 요청으로 데이터 불러오기
  • 불러온 데이터 화면에 구현하기
  • CSS 작업: 제품 화면 넘어가면 스크롤 생기도록 구현

유저가 작성한 게시글

  • GET 요청으로 데이터 불러오기
  • 불러온 데이터 화면에 구현하기
  • 상단 이미지 정렬 버튼 클릭 시 보여지는 컴포넌트 변화

[회의] 리팩토링

  1. 이미지 업로드 버튼을 컴포넌트화를 해야 할까요?
    포스트업로드, 상품 수정, 프로필 이미지 넣기에서 중복으로 사용하는 '파일 업로드 버튼'을 컴포넌트화 해야 한다는 의견이 있었습니다.
회의  버튼 컴포넌트화

[회의] 공통 컴포넌트의 width 는 100%로 설정

공통컴포넌트에 width를 임의대로 설정했을 떄 재사용시 width가 원하는 크기로 설정이 되지않는 문제가 있었습니다.
아래 활성화된 로그인 버튼의 width는 80% 로 설정된 상태이며 이럴 경우 로그인 버튼의 부모 div의 width에 따라 80%를 유지하게 됩니다.
해당 문제를 해결하기 위해 공통 컴포넌트의 width는 100%로 설정해야합니다.
image

해당 코드
https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/blob/e6796655e95b6467fcdfc262d82d301775146ece/src/components/common/button/Button.jsx#LL49C1-L101C3

[게시물 페이지] 게시물 댓글 기능 구현

작업 목록

  • 댓글창에 입력시 게시버튼 활성화
  • 댓글 데이터 요청
  • 댓글 리스트 구현
  • 댓글 리스트에 댓글 input 데이터를 가져와 포스트 해주기
  • 무한 스크롤 구현

[프로필설정 페이지] 기능구현

joinMember.jsx

프로필 수정이미지 업로드

  • 계정 ID API 통신으로 유효성 검사
  • 계정 ID 중복될 때 에러메시지 띄우기

LoginPage.jsx

로그인 할 때 로컬스토리지 token 추가로 Home 화면 넘기기

  • 로컬스토리토큰

[회원가입 페이지] 기능 구현

목표

  • focus 이동 시 회원가입 validation(api 연동)
  • focus 이동 시 비밀번호 validation(6글자 이상)
  • 통과하지 못하면 경고 문구
  • 모든 validation 통과하면 버튼 활성화
  • 버튼 클릭: 프로필 설정 폼으로 이동 구현

[로그인] 기능 구현

목표

  • validation 조건 수정
  • 로그인 api 연동
  • 로그인 실패: 경고문구창 구현
  • 로그인 성공: 홈피드로 이동 구현

[공통 컴포넌트] 변경한 내용 기록합니다

김민지 작업 목록

Routing.jsx

  • following 이 있으면 homefeed 로 이동 / following 이 없으면 home 으로 이동하도록 추가

components/ProfileHeader/MyProfileBtn.jsx

  • 프로필 수정 / 상품등록 클릭시 각각 profileedit 과 postuplad 페이지로 이동하도록 추가
    image

[공통 작업]공통 컴포넌트 구현

  • 연주 : product, comment

  • 순호 : 공통 컴포넌트 구현 user- search user-follow

  • 수아 : 공통 컴포넌트 구현 homepost homepost -text-only

  • 민지 : 공통 컴포넌트 구현 modal

  • 민지: profile

[채팅 / 검색 / 404 페이지] 마크업 구현

채팅 페이지 마크업 구현

  • 채팅 Date 위치 조정
  • 하단 Navber 조정
  • 하단 '채팅 전송' 만들기
  • post-modal 만들기

검색 페이지 마크업 구현

  • 마크업 구현

404 페이지 마크업 구현

  • 마크업 구현

[상품 추가 페이지] 기능구현

  • GET/POST 이미지 미리보기 페이지 구현
  • input validation
  • input validation 통과 시 버튼 활성화
  • POST 전체 데이터 전송하기
  • 저장 버튼 클릭 시 페이지 이동
  • CSS 작업: 이미지 업로드 버튼 이미지 내로 이동

경로: pages/ProductPage/ProductPage
주소: product

[회원가입 페이지] 기능구현

작업목록

  • 추후 작성

joinMember.jsx

  • 프로필 수정이미지 업로드
  • 계정 ID API 통신으로 유효성 검사
  • 계정 ID 중복될 때 에러메시지 띄우기

LoginPage.jsx

  • 로그인 할 때 로컬스토리지 token 추가로 Home 화면 넘기기

[게시물 업로드 페이지] 기능구현

  • GET/POST 요청으로 첨부파일 이미지 미리보기 구현
  • 첨부파일+게시글 입력 시 업로드 버튼 활성화
  • POST로 작성한 데이터 보내기
  • 업로드 버튼 클릭 시 PostMain으로 이동
  • CSS 수정: 이미지 글 작성 영역 하단으로 이동
이슈  게시물이미지

[공통작업] 프로필설정,홈피드 구현

할일

  • join membership-2
  • Input 컴포넌트 생성
  • Home 컴포넌트 생성
  • TopMainNav 컴포넌트 생성
  • TabMenu 컴포넌트 생성
  • top-basic-nav, top-search-nav,top-main-nav,top-upload-nav,top-chat-nav 마크업

[회의] h,p 태그 등에 있는 기본 margin/padding 값 초기화해야할까요?

현재 normalize.css를 사용한 상태에서 h태그와 p 태그에 기본 margin과 padding 값이 지정되어 있습니다. 이 값을 매번 초기화할 경우, 중복되는 코드가 많아질 수 있어 globalstyle에 초기값을 설정하자는 의견이 있었습니다.

[margin, padding 초기화를 하지 않은 상태]
기본margin,padding

의견1. globalstyle에 초기값을 지정할 경우, 지금까지 작성한 코드에 변화가 있을 수 있기 떄문에 우선 그대로 진행합니다.
의견2. 앞으로 마크업에서 코드 중복을 줄일 수 있도록 globalstyle에 초기값을 지정합니다.

[홈피드 페이지] 기능 구현

공통

  • 상단 돋보기 버튼 클릭 시 Search 페이지로 이동

메인페이지

  • 유저 정보 클릭시 YourProfile 페이지로 이동: useNavigation
  • 유저가 작성한 게시글 클릭 시 해당 게시글의 PostMain으로 이동
  • GET 요청으로 팔로잉한 유저 데이터 불러오기
  • 팔로잉한 유저의 최신 게시글 화면에 표시하기

[공통 컴포넌트 생성] 버튼 컴포넌트 생성

할일

  • 다음활성화버튼 만들기
  • 다음 비활성화 버튼 만들기
  • 팔로우 활성화 버튼 만들기
  • 팔로우 비활성화 버튼 만들기
  • 언팔로우 버튼 만들기
  • 저장 활성화 버튼
  • 저장 비활성화 버튼
  • 작은 팔로우 버튼
  • 작은 팔로우 취소 버튼

리뷰

[에러] 로그인 버튼 활성화 오류

default.mov

모든 비밀번호를 지워도 버튼이 활성화된 상태가 유지되는 오류가 있습니다.
비밀번호를 모두 지우고 한 글자를 입력하면 다시 비활성화 상태로 변하고, 또 한 글자를 작성하면 활성화 됩니다.

[push 실수 삭제][Routing 추가] Test용 router 추가

공통 컴포넌트인 App.js 를 건들이지 않고 작업하기 위해서 Routing 컴포넌트에 /test 추가 하였습니다.
@Oh5Yeonju
@snowkwon420
@kimmming

해당코드: de5885b

git push 잘못 했을 때 해결 방법

  1. git log --oneline
  • commit 이력을 확인 후
  1. git reset --hard "커밋 아이디"
  • 되돌아가고 싶은 시점의 커밋 아이디를 입력합니다.

3.git push origin 브랜치명

  • 되돌아간 상태로 push를 진행하고 되지않는다면 4.강제 push를 진행
  1. git push -f origin 브랜치명
  • 강제 push가 되지 않는다면 아래 이미지 참고

image

[회의] Input 컴포넌트 경고창 추가할지?

경고문구를 input 컴포넌트 안에서 구현할지 아니면 그냥 페이지마다 따로 구현할지 고민해 봅시다!!

  • 로그인 페이지

로그인 버튼 클릭할때 경고창
image

  • 회원가입 페이지

다음 버튼 클릭시 경고창
image

image

  • 프로필 설정 페이지

니고네고 시작하기 버튼 클릭시
image

image

[마이프로필 페이지] 기능 구현

공통

  • CSS 작업: 전반적인 CSS 디자인 수정

상단 프로필

  • GET 요청으로 데이터 불러오기
  • 불러온 데이터 화면에 구현하기
  • 프로필 수정 버튼 클릭 시 ProfileEdit 페이지로 이동
  • 상품등록 클릭 시 ProductUpload 페이지로 이동

내가 판매 중인 상품

  • GET 요청으로 데이터 불러오기
  • 불러온 데이터 화면에 구현하기
  • CSS 작업: 제품 화면 넘어가면 스크롤 생기도록 구현
  • 이미지가 없는 데이터일 경우 기본 이미지 설정

내가 작성한 게시글

  • GET 요청으로 데이터 불러오기
  • 불러온 데이터 화면에 구현하기
  • 게시물 상단 더보기 버튼 클릭 시 모달창 구현
  • DELETE 요청으로 모달창 내 '삭제' 버튼 누르면 해당 게시글 삭제되는 기능 구현
  • 상단 이미지 정렬 버튼 클릭 시 보여지는 컴포넌트 변화
  • 게시글 클릭 시 해당 게시글 상세 페이지로 이동
  • 리팩토링 이슈 생성: GET 요청 받아오는 위치 변경(컴포넌트에서 페이지로)

[프로필 페이지] profile 마크업 구현

  • your profile 컴포넌트화
  • 상품 영역 컴포넌트화
  • my profile 컴포넌트화
  • your profile followers 페이지
  • 리스트형 정렬 컴포넌트화
  • 바둑판형 정렬 컴포넌트화
  • 모달창 컴포넌트화

[유저 API] 유저 & 프로필 API 연경

  • [API 연결] 유저 & 프로필 API 연경
  • 로그인 api 연결 & 로그인 되면 home 라우터로 보내기 (useNavigate)
  • 로그인 안될 때 input 밑에 오류 메시지 표시

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.