2024. 4. 17. 17:45ㆍReact
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부분에 정리해서 올리실거죠?
안순현 : 제가 답변드릴게요 (팀원 둘이 대화로 해결)
'React' 카테고리의 다른 글
20240418 맘대로 해봐라! 3차 프로젝트 FlowNary SNS 4일차 (0) | 2024.04.19 |
---|---|
20240418 맘대로 해봐라! 3차 프로젝트 FlowNary SNS 3일차 (0) | 2024.04.18 |
20240416 맘대로 해봐라! 3차 프로젝트 FlowNary SNS 시작 (0) | 2024.04.16 |
20240414 (0) | 2024.04.14 |
20240413 firebase 설치 및 react 웹 구현 (0) | 2024.04.14 |