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

2024. 4. 17. 17:45React

24.04.17 대화 / 작업내용
# 1교시
<회의>
이윤주 : 
구글드라이브 켜시고 뒤로 오세요^^
레이아웃 메인 회의 (인스타그램 웹 스크린 샷)

회의내용 : 
이윤주 : 이거 설치하실 때 엔터까지 추가해서 복사하셔야 했는데 혹시 설치 다 한 것도 확인하고 끄셨나요?

정성한 : 예상 질문 리스트 준비의 필요성 제고
https://uiop5809.tistory.com/277

이윤주 : 
프론트엔드 메인화면 및 전체 UI 통일감 필요성 제고
통일감 위한 결정 과정 > 원하는 UI 투표 제작 후 투표

정성한 : 메인화면 템플릿 PPT 제작 스크린샷 공유
이병학 : 메인화면 템플릿 PPT 제작 스크린샷 공유
윤영준 : 메인화면 템플릿 PPT 제작 스크린샷 공유
곽주영 : 메인화면 템플릿 PPT 제작 스크린샷 공유

이윤주 : 
<실버세대와 기성세대를 위한 UI 고민 위한 
실제 이용자 시장 현황 분석>
- 인스타그램 4060 신중년 이용도 추이
https://www.newswire.co.kr/newsRead.php?no=960807

# 2교시
**팀 전원 : 프론트엔드 구현 작업
팀 전체 - 투표 실시
투표 결과 : 메인화면 템플릿 결정
<투표 결과>
1. 헤더고정 0
2. 검색창 상단 가운데 0
3. 어사이드고정 0
4. 게시물고정 0
5. 챗봇 하단 오른쪽 0 
6. 로고 왼쪽 위 0
7. 팔로워 추천 목록 헤더 밑 우측 0
-----------------------------------------------------------

이윤주 : 로고 및 배너 제작

윤영준 : 메시지 상세 페이지 및 답글 구현 React Router 도움 블로그 포스팅
https://velog.io/@jejualrock/%EB%94%94%ED%85%8C%EC%9D%BC%ED%8E%98%EC%9D%B4%EC%A7%80

# 3교시
**팀 전원 : 프론트엔드 구현 작업
곽주영 : 알림은 모달로 틀만 만들었습니다

윤영준 : BoardWrite.jsx 공유


# 4교시
**팀 전원 : 프론트엔드 구현 작업
곽주영 : 임시 AlertModal, SnsBar(header) 입니다 
components > SnsBar.jsx / AlertModal.jsx 공유

이윤주 : 
로고 제작 - 업로드
flowNary(투명배경)
flowNary(하얀배경)

정성한 : 로그인 초안 사진 업로드
로그인초안입니당
이윤주 : flowNary identity color - purple 로 하시는 것 괜찮으신가요? - 전원동의

이병학 : 채팅창 초안 사진 업로드

이윤주 : 
로고 제작 - flownary_Logo_gradation 사진 업로드
flowNary(그라데이션 글자 색 변경)


# 5교시
**팀 전원 : 프론트엔드 구현 작업
정성한 : 두 가지 로그인 페이지 사진 업로드
검은로고랑 컬러로고 비교해주세용
어떤게 나은가여 - 컬러 로고 4명 동의로 바로 결정

곽주영, 윤영준 : 저랑 영준씨 게시물 UI 만들어보겠습니다

이병학 : 저는 팔로우한 사람 목록 UI 만들어볼게요

정성한 : 사진 첨부 - 로그인 / 회원가입 버튼 호버기능 추가

곽주영 : 메인페이지 - 구현 후 메인화면 사진 업로드 - 의견 요청
의견 받습니다
안순현 : 배경을 연한 보라느낌으로 넣어두는건 어떨까용
곽주영 : 한번 그렇게 해볼게요

윤영준 : 일정 체크할 수 있도록 리스트 업로드
- 4/17 ~ 4/20 토요일 / 레이아웃만  프론트엔드 작업 (6명)
- [ ]  헤더(Header)
- [ ]  로그인/레지스터 페이지 : 닉네임, 비밀번호(이름, 이메일 추후에 선택 기능 추가), 로그아웃 시 로그인 창으로 이동
- [ ]  게시물 열람:  책갈피, 업로드 : 영상 - 재생수, 좋아요 수와 누른 유저 정보 / 사진 - 좋아요 수, 댓글, 좋아요, 공유
- [ ]  마이페이지 - 통계(자신의 계시물에 대한 조회수, 댓글수, 좋아요 수), 책갈피 열람
- [ ]  검색, 해시태그 검색 : 무한 스크롤 (한 페이지 열람 가능 사진 수 : 6 / 영상: 1)
- [ ]  검색 결과창
- [ ]  프로필 열람, 팔로우, 언팔로우 반응, 추천친구 목록, 언팔로우 시 비활성화
- [ ]  메세지 DM
- [ ]  게시글알림, 친구추가 알림, 좋아요 알림, 댓글 알림, 메세지 알림 Alert
- [ ]  알림창
- [ ]  세팅창 : 테마, 계정 비활성화, 유저정보 수정, 알림 On/Off
- [ ]  댓글창 : 드롭다운 - 이모티콘 Direct Reply


# 6교시
**팀 전원 : 프론트엔드 구현 작업
곽주영 : 
드라이브에 components -> SnsBar,Board,AlertModal 올렸고
pages -> home.jsx 수정했습니다.

안순현 : 알림창 해볼게용
곽주영 : 알림창 일단 모달로 틀 잡아보긴했어요
안순현 : 그 세부페이지로 해보려구. 일단 알림이 뜨는건 모달로 해야하고
곽주영 : 네넵
안순현 : 알림 전에 검색부터 하겠습니다
윤영준 : 게시물 열람 이쪽 해볼게요

정성한, 안순현 : 로그인 페이지 테마 사진 업로드 (light, dark img)
파일좀 여기다가 다시 보내주세용
모두다
올렸습니다

정성한 : 다크버전 완성본 사진 업로드

안순현 : 연결된 사진있으면 올려주세요 같이 주영씨
곽주영 : 
임시로 다운받은거긴 한데 올릴게요
올렸습니다


# 7교시
**팀 전원 : 프론트엔드 구현 작업
곽주영 : 메인페이지 - 팔로우 추천 프론트엔드 추가 사진 업로드
팔로우추천 리스트 4~5명 보여주고 더보기를 했을때
추천목록 페이지로 이동(페이지에 새로추가 예정)


# 8교시
**팀 전원 : 프론트엔드 이식 작업

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

안순현 : 
1. img 폴더는 src 하부로 통일하겠습니다. 경로 확인 해주세요
2. App.jsx에서 components에 있는 SnsBar를 호출하면 로그인 회원가입에도 그 부분이 나타나기 때문에 다른 페이지에 import를 해서 확인하는 것으로 변경하겠습니다
3. 로그인/회원가입은 테마화를 적용한 부분이기 때문에 폴더가 pages/theme/dark or light로 되어있음을 확인해주세요 - index에서 적용 확인하기
4. components와 pages 폴더 어디로 넣어야 할 지 모르겠으면 각 만든 사람에게 물어보세요
5. css 폴더를 하나 추가해서 src 하부에 추가하겠습니다. 각 pages에 따라 css가 다르게 적용되면 보여지는 부분이 너무 많을 것 같아서 나누는게 좋을 것 같습니다
6. public폴더에 index.html body 부분에 마진을 추가해야 합니다.,<body style="margin:0px;"> 이걸로 변경하세요
7. Home이랑 Follower.jsx에 SnsBar import 해서 사용할 때 Stack 안에 넣으면 오류 나오니까 빈 태그 (<></>) 형성해서 감싼다음 그 다음줄에 넣으세요

안순현 : 
1. 오늘 한거 카톡에 올린다음에 그각자 폴더에 올려주세용
2. 구글 드라이브에 자기 파일 올릴 때 
   본인이 지속적으로 했다는거 보여주기 위해서 
   날짜도 같이 적어서 올려주세요 (파일 따로해서)

정성한 : 
2024/04/17
오전 10시 부터 현재 시간까지
로그인,회원가입(다크, 라이트) 프론트 작업 진행했습니다
flownary 로그인, 가입 - 정성한.zip 업로드
*오늘 작업의 포인트 설명
오전 10 ~ 오후 4시 30분까지 로그인 및 회원가입 프론트 작업 완성하면서, 버튼스타일을 조금 귀엽게(?) 하기위해 신경썼으며,
라이트와 다크테마를 나누면서 사용자들이 원하는테마로 할 수 있게 만들었습니다
그리고 모든사항 완료했습니당

2024.04.17 정성한
0. 오전 10 ~ 오후 4시 30분까지 로그인 및 회원가입 프론트 작업 완성하면서, 
버튼스타일을 조금 귀엽게(?) 하기위해 신경썼으며 라이트와 다크테마를 나누면서 사용자들이 원하는테마로 할 수 있게 만들었습니다
1. 카톡과 구글드라이브에 업로드 완료
2. 자기 파일에 이식 완료
3. 이식 시 문제 발생하면 바로 이야기하고 해결하기 완료
4. 구글 드라이브 회의록에 자신이 한 부분 체크하기 완료
5. 모든 과정 완료시 "모든 사항 완료했습니다." 카톡 남겨주기 완료

안순현 : 
*오늘 작업의 포인트 설명
구글드라이브 파일 관리
프론트엔드 전체 보조

이병학 : 
Follower.jsx - 팔로워 목록
Message.jsx - DM
*오늘 작업의 포인트 설명
ProfileMenu.jsx - 프사나 이름을 클릭할 때 메뉴가 나오도록 만들어둔 컴포넌트
저희 23일에 발표니까 월요일까진 준비를 해야겠네요

곽주영 :
components-> RecommendList.jsx, SnsBar 올렸고
pages -> Home.jsx 수정했습니다.
*오늘 작업의 포인트 설명
2024.04.17 곽주영
(AlertModal.jsx,Board.jsx,RecommendList.jsx) components를 
home.jsx(main페이지)에 import하여 
기본 레이아웃을 짰고 태그들의 특성으로 인해 
칸 조절이 잘 안되어 칸 맞추는것에 중점을 두었습니다.
2024-04-17_홈 레이아웃.zip 파일 업로드

2024.04.17 곽주영
0. 카톡에 오늘 한 일과 작업하면서 중점적으로 생각하고 만든 포인트를 곁들여 설명 추가 해주세요. (완료)
(AlertModal.jsx,Board.jsx,RecommendList.jsx) components를 home.jsx(main페이지)에 import하여 기본 레이아웃을 짰고 태그들의 특성으로 인해 칸 조절이 잘 안되어 칸 맞추는것에 중점을 두었습니다.
1. 카톡과 구글드라이브에 업로드 (완료)
2. 자기 파일에 이식 (완료)
3. 이식 시 문제 발생하면 바로 이야기하고 해결하기 (완료)
4. 구글 드라이브 회의록에 자신이 한 부분 체크하기 (완료)
5. 모든 과정 완료시 "모든 사항 완료했습니다." 카톡 남겨주기 (완료)

윤영준 : 
2024-04-17 작업 내용
1. Board.jsx 제작 과정 참조하여 components , pages 코드 구조 작업
2. mui을 통한 search 구현
3. 게시물 열람 (좋아요 , 책갈피 , 정보, 공유)등  레이아웃 제작 대비 자료 조사

react 프론트엔드 제작 과정을 이해하고 코드제작을 어느정도 할수있게 된것같습니다.

이윤주 : 전체 작업 관리, 디자인 컨펌, 프로젝트 세부계획 제작 및 점검, 기획안 작성, PPT 작성

곽주영 :  
***index.html에서 <title>2조 Flownary</title>이렇게 변경해주세요***

안순현 : flownary.zip 파일 공유
저 나름대로 수정한 부분인데 필요하신 분 쓰세요
import SnsBar from '../components/SnsBar';
기본 경로 입니다 다를 수 있어요
이거 지금 다 올렸고, 구동파일 부분에 App.jsx 같은 파일 있으니까 한번에 넣으실분들 참고하세요

2024.04.17 안순현
0. 카톡에 오늘 한 일과 작업하면서 중점적으로 생각하고 만든 포인트를 곁들여 설명 추가 해주세요. (완료)
구글드라이브 업로드 파일 종합, 곽주영/윤영준/정성한 프론트엔드 보조 및 교육, 프론트엔드 파일들 구동 확인 및 폴더 정리
1. 카톡과 구글드라이브에 업로드 (완료)
2. 자기 파일에 이식 (완료)
3. 이식 시 문제 발생하면 바로 이야기하고 해결하기 (완료)
4. 구글 드라이브 회의록에 자신이 한 부분 체크하기 (완료)
5. 모든 과정 완료시 "모든 사항 완료했습니다." 카톡 남겨주기 (완료)

곽주영 : 구글드라이브 Flownary-React부분에 정리해서 올리실거죠?
안순현 : 제가 답변드릴게요 (팀원 둘이 대화로 해결)