Basic_Project<Minimum Challenge>_개발 진행 기록

정윤숙·2022년 11월 20일

Project

목록 보기

3/12

내일배움캠프 4기 스파르타코딩 React B반 9조 외래교란종

1. 프로젝트 주제 회의 내용(221118)

문화 생활 -> 책, 영화, 게임, 음악
-> 글 올릴 때 태그 추가 기능
-> 태그 필터링
Minimum challenge
- 산책하기 - 10분 걷다 오기. 사진_ 산책로, 하늘, 발
- 운동하기 - 5분 운동하기. 유튜브 링크, 운동 후 사진
- 책 읽기 - 한 쪽이라도 읽기. 책 사진
- 공부하기 - 하루 10분 공부하기 ex. 직장인 하루 10분 공부하기. 메모장, 교재 사진
애견카페, 맛집만 모아놓은 사이트

⭐ Minimum challenge로 결정!

2. 추가 기능

☑️ 구현하고 싶은 추가 기능
- 팔로우 구현
- 좋아요 버튼
- 좋아요 누른 게시글 모아보기(+페이지)
- 내가 댓글 쓴 게시글 모아보기(+페이지)
- 운동 공부 독서 카테고리별로 따로 볼 수 있는 기능
- 프로필 삭제 기능

3. 개발 진행 기록

221121

각자 맡은 html 파일을 만드는데 중간에 필요한 추가 페이지도 생기고 다들 html, css가 아직 능숙하지 않은 상태에서 하다 보니 페이지를 분담해도 생각보다 시간이 오래 걸렸다.
대부분이 js를 이용해서 구현해야 하는 거라 그 부분을 생각하는 데서 다들 머리 아파했다.

221122

☑️ 해야 할 일 정리

<전체적인 디자인 색, 버튼 등, 위치>

~~post.js~~
~~firebase 올라가는 거 확인~~
~~main page에 게시물 불러오기~~
~~mypage.js 만들어서 글 불러오기~~
~~mypage에서 프로필 변경 가능하게~~
~~해당 프로필과 닉네임이 다른 페이지에 뜨게(거의 다함)~~
~~social.login 팝업창 뜨다 사라지는 것 고쳐야 함~~
트위터 로그인 연결하기

221123

☑️추가 기능
- ~~로그인 페이지를 팝업창(모달)로 하는 것 구현 해보기~~
- 팝업창 외 부분을 눌렀을 때 팝업창이 꺼지게 하는 기능
- 게시물에 태그 쓰기
  -> 태그 자동완성 / 태그 별로 데이터를 읽어야 함
☑️더 해야 할 일
- ~~메인 로고 = 홈 버튼으로~~
- 각 페이지에 버튼 추가 -> UX 향상
  ex. mypage에 글쓰기 버튼 추가
221124

☑️ 해야 할 일 정리
- main(+loginmain)의 header부분 고정
- 카테고리별 페이지 분리..?
- 진짜 로그아웃 구현하기(로그아웃 누르면 로그인 페이지로만 넘어감. 로그인 유지)
- 메인로고에 if로 유저가 있을 때, 없을 때 홈버튼이 보여주는 페이지 다르게 하기
  
  221125
  
  🔖역할 분담
- ~~PPT ~~
- ~~main(index.html page, loginmain page의 header 부분(로고부터 로그아웃~전체보기 최신글 누르는 버튼 있는 부분) positon:fixed로 고정시키기~~
  -> 유진
- 메인 로고(홈 버튼) if문 적용 -> 영준
- ~~프로필 모달 구현~~ / ~~모달 배경 누를 때 꺼지는 기능~~
  -> 대호
- ~~각 페이지에 버튼 추가~~ -> 유안
- ~~필수 기능 JS 만들기~~ -> 윤숙
- ~~전체적인 페이지 CSS 적용 - 특히 창 작아질 때 프로필 페이지 강아지 멀리 나가있는 부분..~~
- ~~포스팅 올라오는 것 wireframe처럼 3개씩 줄 맞춰 올라오게 수정~~
- ~~댓글 CSS도!~~
- 포스팅할 때 JS로 자동으로 이미지 줄여서 올라가지는 것(튜터님이 보내주신 주소 참고)
- 초기화 코드 주석처리한 것 살펴보기
221126
문제
- 헤더를 fixed하고 게시물을 쭉 내려가다 로그인 버튼을누르니 로그인 모달창도 헤더 쪽에 fixed되어 있음
☑️ 해야 할 것
- ~~모달 고정 해제~~
- ~~mypage css -> profile 변경~~
- loginmain page에서 profile(home 아이콘)누르면
  프로필 모달창
- 각 getPostList의 temp_html 보고 CSS wireframe처럼 변경
- 전체보기에 onclick 함수 적용
- feed에 특정 게시물만 불러오기
- 최신 버튼 = 폴링?
- 트위터버튼 삭제
- post 알람 뜨는 것 방지
- 프로필 모달 오류 수정
- community CSS 적용
- community 수정누르면 댓글입력칸+완료버튼 사라지는 오류 해결

문제

~~프로필 페이지 X버튼 기능 안 함~~
-> CSS 문제였음
~~수정하기 눌러서 mypage 다시 갔을 때 포스팅 안 보임(새로 고침 해야 함)~~
-> mypage 삭제
~~진짜로 로그아웃 되게~~

221127

☑️ 할 일
- ~~getpost 정렬 및 css~~ -> main, loginmain(css=loginmain) - 대호
- ~~post page css~~ - 유진
- ~~main, loginmain css~~ - 윤숙
- ~~발제문 다시 확인 및 발표구성~~ - 영준
- ~~community css, dark mode~~ - 유안
- 최신 버튼 어떻게 할 건지?
  -> 최신 게시글을 불러오는 폴링 기능은 구현 못하고
  전체보기 운동 독서 공부 커뮤니티 카테고리로 나눠 전체보기에는 전체 게시물을 불러오는 함수 적용
- 반응형 구현하기
- ~~배포한 사이트 파일 업로드~~
- ~~firebase Key를 바꿔서 해당 카테고리에 맞는 게시물 올리기 = 피드 채우기~~
- ~~dark mode 성공~~

221128

✅ 확인
- 시연용 = Main branch 최종본(width-1200px for laptop)
- 발표용 = Dev branch 최종본(for desktop)
- nimum-challenge.shop = 우선 발표용으로 파일 업로드(width-1600px)
- 발표 끝나면 site laptop size로 파일 재업로드
추가
- ~~PPT에 어려웠던 점 추가해서 최최종본 만들기~~
- ~~발표 리허설(zoom) 진행~~

튜터님 피드백

1. 운동하기 / 공부하기 / 독서하기 탭을 누르고 새로고침 하면 그대로 유지 되는지?
-> 탭 별 페이지를 만들어 #값을 주면 해결될 것 같음

2. 최신화 버튼 만든 거 칭찬칭찬 - 폴링 기능!
-> 아직 구현 안 함.. 금요일 CS 특강 참고
- 디자인 간단, UX차원에서 마음에 든다고 하심
(iconize, color-coding 등)

3. 로그인에 따라 헤더 분기한 것 칭찬(로그인 하면 로그아웃 버튼 옆에 00님 환영합니다!+프로필 이미지 구현한 것)

4. 권한에 따라 접근할 수 있는 페이지를 UI적으로만 접근을 막는 게 아니라 강제로 주소를(ex.mypage)입력해 접근했을 때 어떻게 처리할건지?
-> 실제로 로그인된 상태에서 주소에 #auth로 강제로 로그인 페이지로 가면 그대로 로그인 페이지가 뜨고 로그인이 풀림

5. 로그인 창이 열려있는 상태에서 뒷 배경은 클릭이 불가능 하게 하는 것도 괜찮을 듯
-> Wireframe에는 로그인창을 모달(팝업)로 구현한다 했는데 일단 만든건 그냥 page여서 이 부분은 필수 기능 구현 후에 다시 살펴볼 것

질문
- 게시물이 카테고리(운동, 독서, 공부)별로 올라가는데 메인 페이지에서 해당 탭을 눌렀을 때 해당 게시물만 가져오는 건 db에서 직접 컬렉션을 추가해야 하나요?
  -> 게시물 올릴 때 카테고리에 id값을 주고
  db에 객체 형식으로 들어가니 key, value값을 설정해서 분류돼서 저장되게 하기
  -> JS에서 Where절로 해당 게시물만 불러오기