20240418 맘대로 해봐라! 3차 프로젝트 FlowNary SNS 3일차

오늘 가장 신경쓰는 항목 어제는 1교시와 8교시만 널널하게 운영하려고 했다면 어제 8교시 50분동안 파일 이식과 피드백 그리고 정리의 시간을 갖는 것이 시간적으로 조금 부족한 것을 경험했기 때문에 오늘은 7교시와 8교시를 이어서 이식, 피드백, 정리의 시간을 갖도록 했다.

 

그리고 정리의 필요성 더욱 강조하게 되었다.

 

게다가 어제 모든 것을 이해한 것 같았지만 실상은 그렇지 않았던 팀원도 발견하고 어떻게 운영하면 좋을지 생각을 했다.

교육하기를 잘하고 기뻐하는 팀원이 있어 3사람을 같은 팀으로 묶어 pages 를 구현하게 했다.

그랬더니 시너지가 나고 훨씬 효율적으로 작업하는 환경을 만들 수 있었다.

 

 

# 1교시 회의 : 전날 작업 피드백, 당일 작업 상의, 결정 사항 토의, 분담 확인, 업무 분장, 작업 방향 결정

# 시청기록 Data의 위치 : Realtime Database (in Firebase의 Data)  Field setting : firebase.js

export asnc function addWatchRecord() - 시청기록과 이전 기록을 갈아끼우고 중복재건 새로운 데이터로 갈아끼움

방금 본 기록으로

 

ㅇ 7교시 - 김철기 선생님 유투브 로그인 / 비로그인 / 관리자 로그인 시 시청기록 구현에 관한 조언

userId 값만 끄집어와서 중복 재건한 결과 getWtchvideoRecord(userId) {

 

}

getWtchvideoRecordByUser() { 

}

 

관리자 지정

admins

관리자의 uid 를 2개 등록

DB 에 있는 admins에 대해서 

관리자 로그인 - 깃허브

관리자 메뉴, 시청기록

관리자 메뉴 사용자별 시청기록 구현

로그인 아이디별 시청기록 - 관리자 열람 가능

서버와 클라이언트와 데이터를 주고 받기 위해서는 json의 object 의 array 형태로 주고받음

관리자 메뉴를 별도 배치

if 로그아웃 시 메뉴가 안뜨고 비디오만 시청

일반 사용자 로그인 하지 않으면 시청기록 안남음

로그인하면 시청기록 남고

관리자는 모든 유저의 시청기록을 다 볼 수 있음

 

서비스 구현 시 참고

 

코드는 선생님 깃허브 참고

 

 

# 8교시 정리 : 파일 합치기

 

 

<카톡 종합 내용>

24.04.17 대화 / 작업내용
# 1교시
회의
4/18 ~ 4/20 토요일 / 레이아웃만 프론트엔드 작업 (6명)
[x(주영, 영준, 순현)] 헤더(Header), 양쪽 Aside(알림, 팔로우추천) = Home
[x(성한)] 로그인/레지스터 페이지 : 닉네임, 비밀번호 (이름, 이메일 추후에 선택)(로그아웃 시 로그인 창으로 이동)
[ ~주영, 영준 ] 게시물 세부내용:  영상 - 재생수, 좋아요 수와 누른 유저의 책갈피, 업로드 정보 / 사진 - 좋아요 수, 댓글, 좋아요, 공유
[ ~병학 ] 마이페이지 - 통계(자신의 게시물에 대한 조회수, 댓글수, 좋아요 수), 책갈피 열람
[~영준] 검색, 해시태그 검색 : 무한 스크롤 (한 페이지 열람 가능 사진 수 : 6 / 영상: 1)
[~병학(프로필 완료)] 프로필 열람, 팔로우, 언팔로우 반응, 추천친구 목록, 언팔로우 시 비활성화
[x 병학] 메세지 DM
[  ] 게시글알림, 친구추가 알림, 좋아요 알림, 댓글 알림, 메세지 알림 Alert
[ ] 알림창
[ ~성한] 세팅창 : 테마, 계정 비활성화, 유저정보(프로필사진, 상태메세지, 비밀번호 변경, ) 수정, 알림 On/Off
[ ] 댓글창 : 드롭다운 - 이모티콘 Direct Reply
이윤주 : 기획안 작성 PPT 목차
1. PPT Cover 첫 페이지
2. 목차
3. 일정
4. 문서 작성 이력
5. flownary 서비스 개요
6. 플로우 차트 : 클라이언트 유저 플로우 / 로그인, 비로그인 프로세스
7. 플로우 차트 : 메인페이지 -  서비스 플로우
8. 플로우 차트 : 클라이언트 - 마이페이지 - 수정 프로세스
9. 플로우 차트 : 관리자 - 프로세스
10. ERD (DB)
11. Routing Table (Parameter)
# 2교시
성한씨 : 프로필 수정페이지 프론트엔드 작업 시작

이윤주 : 
<부장 역할 분담>
안순현 - QAtest, 백, 프론트 기술 자문 교육 및 파일 정리와 종합 부장 : 앉지 말고 돌아다니면서 말만해 

이병학 - 백엔드 구현 부장 : 앉아서 개발만 

정성한 - 백엔드 보조 및 프론트엔드 구현 부장 : 하루 종일 머리박고 디자인을 아름답게하고 교육자문 호출만 해 

이윤주 - PPT 기획안 디자인 구현 파일 컨펌 부장 : 프론트엔드, 백엔드 기술구현 된거 보고 종합의견 및 컨펌 외 팀원관리, 발표준비 하고 죙일 기록만해 

윤영준 - 데이터베이스 자료 조사 부장 : 말없이 조용히 데이터 추가 및 수정 하는 

곽주영 - 데이터베이스 스프링 관리 부장 : 앉아서 스프링이랑 데이터를 연결하고 관리하는 
----------------------------------------------------------

정성한 : 프로필 수정 페이지 사진 업로드 - 컨펌 ok


# 3교시
병학부장님 : 통계창 만드시는거 시작
이병학 : 마이페이지 페이지 사진 업로드 - 컨펌 ok


# 4교시
이윤주 : 플로우 차트 작성하다가 생각났는데 SNS 관리자 프로세스 넣어야 할 것 같거든요. 관리자 구현 가능할까요?
백엔드 기술 부장님 조언 부탁합니다

이병학 : 관리자 자체는 user DB에 등급 값 하나만 추가하면 되는데
관리자 전용 UI를 만드는 게 시간이 걸리죠

이윤주 : 그럼 동일한 UI 그러니까 pages를 추가해야한다는 말씀이실까요?

안순현 : 조건으로 보이게 안보이게 걸어줘야할거가아요

이병학 : 그거까진 아니고 user의 rank 값을 읽어서
태그를 변경하는 방식으로 하면 될 것 같아요

안순현 : 관리자는 댓글이나 게시글을 모두 지울 수 있어야하니까 일반 유저랑 다른 부분은 그정도일 것 같습니다

이윤주 : 예 알겠습니다. 이 부분은 프론트가 아니라고 하시니 백엔드 작업을 시작하는 다음주에 다시 회의 안건으로 만들어 토의하겠습니다.
제가 이해한 것이 정확한가요?
답 주세요

안순현 : 프론트랑 협업이 조금있으면 될 것 같습니다
ui부분도 함께 진행해야 하니가여

이병학 : 정확합니다 넵 

안순현 : 조건을 걸고 디비에서 받아온 값레 따라 다르게 보여야 하니사로

이윤주 : 프론트엔드 부장님. 역시 관리자 페이지 만드는 담당은 부장님이시겠죠?

정성한 : 예 제가해야죠

이윤주 : 일단 프론트엔드 부장님이 지금꺼 끝나시면 바로 맡으시는 걸로 하겠습니다
뭘 만들어야 하는지는 기술 지원 부장님과 상의하세요


# 5교시
프로필편집 페이지 모달 - 프론트엔드 이미지 업로드
이름 닉네임 이메일 비밀번호 변경 페이지 완료
비밀번호 입력시 보이지 않게 처리 완료

이윤주 : 컨펌 ok

# 6교시
곽주영 : pages에 있는 Aside.jsx 지우고
components에 AlertModal을 Aside.jsx로 바꾸기로했습니다
Home.jsx에서 Aside로 import하면 됩니다

윤영준 : 게시물 페이지 무한스크롤 chat.GPT
네, 이 코드는 무한 스크롤을 구현하기에 적합합니다. useEffect 훅을 사용하여 사용자가 페이지를 스크롤할 때 이벤트를 감지하고, 사용자가 페이지의 맨 아래에 도달했을 때 더 많은 항목을 로드하도록 설계되었습니다.

여기서 handleScroll 함수는 사용자가 페이지의 맨 아래에 도달했는지 확인하고, 그렇다면 loadMoreItems 함수를 호출하여 새로운 항목을 로드합니다. loadMoreItems 함수는 가상의 API 호출을 시뮬레이션하여 새 항목을 가져오고, 그 후 setItems 함수를 사용하여 이전 항목 배열에 새 항목을 추가합니다.

이렇게 하면 사용자가 페이지를 스크롤할 때마다 새 항목이 로드되어 무한 스크롤 효과를 구현할 수 있습니다.


무한 스크롤을 구현하는 코드를 작성해 보겠습니다. 아래는 무한 스크롤을 위한 간단한 예제입니다. 이 예제는 React의 useState 및 useEffect를 사용하여 상태를 관리하고, window 객체의 scroll 이벤트를 사용하여 스크롤을 감지합니다.


import React, { useState, useEffect } from "react";
import axios from "axios"; // 이 예제에서는 axios를 사용하여 가짜 데이터를 가져옵니다.

function InfiniteScroll() {
  const [items, setItems] = useState([]); // 아이템 상태
  const [loading, setLoading] = useState(false); // 데이터 로딩 중 여부 상태
  const [page, setPage] = useState(1); // 페이지 번호 상태

  useEffect(() => {
    // 초기 데이터 로드
    fetchData();
  }, []); // 페이지가 처음 로드될 때만 실행

  useEffect(() => {
    // 스크롤 이벤트 핸들러
    const handleScroll = () => {
      // 스크롤이 페이지의 하단에 도달하면 새로운 데이터를 로드
      if (
        window.innerHeight + document.documentElement.scrollTop ===
        document.documentElement.offsetHeight
      ) {
        fetchData();
      }
    };

    window.addEventListener("scroll", handleScroll); // 스크롤 이벤트 리스너 등록

    return () => {
      window.removeEventListener("scroll", handleScroll); // 컴포넌트가 언마운트되면 이벤트 리스너 제거
    };
  }, [loading]); // loading 상태가 변경될 때마다 실행

  const fetchData = async () => {
    setLoading(true); // 데이터 로딩 중 표시

    try {
      // 실제 API 호출 대신 여기서는 가짜 데이터를 가져오는 예제입니다.
      const response = await axios.get(`https://jsonplaceholder.typicode.com/photos?_page=${page}&_limit=10`);

      // 새로운 아이템을 현재 아이템 목록에 추가
      setItems((prevItems) => [...prevItems, ...response.data]);

      // 페이지 번호 증가
      setPage((prevPage) => prevPage + 1);
    } catch (error) {
      console.error("Error fetching data:", error);
    } finally {
      setLoading(false); // 데이터 로딩 완료
    }
  };

  return (
    <div>
      <h1>Infinite Scroll Example</h1>
      <div>
        {items.map((item) => (
          <div key={item.id}>
            <img src={item.thumbnailUrl} alt={item.title} />
            <p>{item.title}</p>
          </div>
        ))}
        {loading && <p>Loading...</p>}
      </div>
    </div>
  );
}

export default InfiniteScroll;
 
위의 코드는 InfiniteScroll 컴포넌트를 정의하고, 해당 컴포넌트가 처음으로 렌더링될 때 useEffect 훅을 사용하여 초기 데이터를 가져오도록 설정합니다. 그런 다음 스크롤 이벤트를 감지하고, 페이지의 하단에 도달하면 새로운 데이터를 가져오는 무한 스크롤 동작을 구현합니다.

이 코드는 axios를 사용하여 실제 API 호출을 시뮬레이션하며, 각 페이지마다 10개의 항목을 가져옵니다. 렌더링할 때 현재까지 가져온 항목 목록을 매핑하여 화면에 표시합니다. 페이지의 하단에 도달하면 "Loading..." 텍스트가 표시되고, 새로운 데이터를 가져올 때까지 기다립니다.

무한 스크롤을 테스트하려면 axios가 필요하지만, 이 코드를 실행하려면 axios를 설치하고 적절한 데이터 소스로 교체해야 합니다.

정성한 : 정성한 - 설정 및 프로필 편집, 오전 10시 ~ 오후 3:34
설정창 관리를 했으며, 오전 10시에는 전체적인 틀을 잡았고
오전 11시 부터 오후 2시까지 CSS 작업에 들어갔습니다.
그 이후는
스위치나 토글버튼 부분은 Mui로 대체했고, 비밀번호를 입력 할 때
표시 혹은 비표시기능을 넣어 본인이 어떤 비밀번호를 했는지 확인할 수 있는 편의기능도 넣었습니다.


# 7교시
곽주영 : components -> Aside,Board jsx
pages -> Home.jsx  올렸습니다

이병학 : pages : mypage.jsx, Profile.jsx 올렸습니다

정성한 : public -> img -> profile 
src -> Setting.jsx 올렸습니다.

이병학 : npm install --save chart.js react-chartjs-2
npm install date-fns chartjs-adapter-date-fns --save

이윤주 : 2024.04.17 이윤주
0. 카톡에 오늘 한 일과 작업하면서 중점적으로 생각하고 만든 포인트를 곁들여 설명 추가 해주세요. 완료
1. 카톡과 구글드라이브에 업로드 완료
2. 자기 파일에 이식 완료
3. 이식 시 문제 발생하면 바로 이야기하고 해결하기 완료
4. 구글 드라이브 회의록에 자신이 한 부분 체크하기 완료
5. 모든 과정 완료시 "모든 사항 완료했습니다." 카톡 남겨주기 완료
완료 또는 0 으로 표시 해서 완료 카톡 남겨주세요

이 형식에 맞춰서 마무리 작업 완료 해주세요 8교시 끝나기 20분 전까지 부탁드립니다

전원 다 완료 주셔야 제가 퇴근 합니다 ^^

# 8교시
안순현 : Setting.zip 파일 업로드
setting 이거롤 변경하세요

2024.04.18 안순현
0. 카톡에 오늘 한 일과 작업하면서 중점적으로 생각하고 만든 포인트를 곁들여 설명 추가 해주세요. 완료
home과 게시판에서 card나 modal의 크기 호환이 어려워 stack과 padding, margin을 사용해서 조절하는데 어려움이 있었음.
원하는 위치에 구현하기 위해서 stack과 grid를 활용했으며 이를 팀원들에게 공유함.
-구글드라이브 업로드 파일 종합
-곽주영/윤영준/정성한 프론트엔드(Home, 게시판, 설정 페이지 + Stack 및 Grid, padding과 margin) 보조 및 교육
-오늘 구현된 프론트엔드 파일 구동 확인 및 수정 후 배포
1. 카톡과 구글드라이브에 업로드 완료
2. 자기 파일에 이식 완료
3. 이식 시 문제 발생하면 바로 이야기하고 해결하기 완료
4. 구글 드라이브 회의록에 자신이 한 부분 체크하기 완료
5. 모든 과정 완료시 "모든 사항 완료했습니다." 카톡 남겨주기 완료

이병학 : 
2024-04-18 이병학
0. Grid를 이용해서 반응형으로 profile.jsx 제작 완료(디자인 꾸미기는 필요), chart.js를 사용하여 x축을 날짜로 한 차트를 생성시킨 mypage.jsx 제작(레이아웃 세부 제작 필요?)
1. 구글드라이브 업로드 완료
2. 파일 이식 완료
3. 문제 해결 완료 
5. 모든 사항 완료했습니다

정성한 : 2024.04.18 정성한
0. 카톡에 오늘 한 일과 작업하면서 중점적으로 생각하고 만든 포인트를 곁들여 설명 추가 해주세요. 완료
- 로그인, 레지스터 css 파일 분리 할려다가 완벽하게 실패
- Setting파일 프론트 작업 완료 및 Stack 이슈 해결
1. 카톡과 구글드라이브에 업로드 완료
2. 자기 파일에 이식 완료
3. 이식 시 문제 발생하면 바로 이야기하고 해결하기 완료
4. 구글 드라이브 회의록에 자신이 한 부분 체크하기 완료
5. 모든 과정 완료시 "모든 사항 완료했습니다." 카톡 남겨주기 완료

곽주영 : 
2024.04.18 곽주영
0. 카톡에 오늘 한 일과 작업하면서 중점적으로 생각하고 만든 포인트를 곁들여 설명 추가 해주세요. 완료
   Aside.jsx에 카테고리를 넣었고 Board.jsx 기본레이아웃을 짜고 댓글창을 Modal로 만들었습니다.
   댓글창을 구현하면서 여러번 수정을 통해 깔끔하게 틀을 잘 맞추는것에 중점을 두었습니다.

   
1. 구글드라이브에 업로드 완료
2. 자기 파일에 이식 완료
3. 이식 시 문제 발생하면 바로 이야기하고 해결하기 완료
4. 구글 드라이브 회의록에 자신이 한 부분 체크하기 완료
5. 모든 과정 완료시 "모든 사항 완료했습니다." 카톡 남겨주기 완료

안순현 : 
4/19 목표
1. 로그인/ 회원가입 - 테마 바꾸기 css 구현하기
2. setting - style css 밖으로 빼기
3. DB 작업 - entity 및 ERD 만들기 (매우 중요)
4. 알림 - modal로 구현된 부분 리스트로 바꾸기, 알림 종류에 따른 틀만 형성하기
5. 댓글창 - 이모티콘 드롭다운 만들기
6. 마이페이지 - 책갈피 추가
7. 모든 페이지에 bar부분/ aside 부분/ 추천친구 부분 들어가야 할거 추가하기

이병학 : 통계 페이지 / 마이페이지 스크린샷 업로드

곽주영 : 메인 페이지 / 게시글 상세페이지 스크린샷 업로드

이병학 : Mypage.jsx 갱신완료

윤영준 : 2024.04.18 윤영준
0. 카톡에 오늘 한 일과 작업하면서 중점적으로 생각하고 만든 포인트를 곁들여 설명 추가 해주세요. (완료)
- Grid 구조 설명 듣고 Search.jsx 제작 (미흡한 부분은 수정,추가 필요)
- 무한 스크롤 코드 제작 자료 조사 ,  chatgpt  react 무한 스크롤 제작 코드에 대한 설명 참조 후 추후 제작 해보겠습니다.
1. 카톡과 구글드라이브에 업로드 (완료)
2. 자기 파일에 이식 (완료)
3. 이식 시 문제 발생하면 바로 이야기하고 해결하기 (완료)
4. 구글 드라이브 회의록에 자신이 한 부분 체크하기 (완료)
5. 모든 과정 완료시 "모든 사항 완료했습니다." 카톡 남겨주기 (완료)

안순현 : Mypage.zip 파일 업로드
마이페이지 수정하세요

윤영준 : 태그 검색창 페이지 스크린샷 업로드

안순현 : 
내일 목표에서
1번 구현 완료

src.zip 파일 업로드
이위치에 이렇게 넣어주세요 그럼 setting에 지저분하게 추가되어있는 style 부분 없어집니다