20240416 맘대로 해봐라! 3차 프로젝트 FlowNary SNS 시작

토, 일 팀원 한명과 firebase 예습을 하고

월요일 firebase 수업을 한 후 바로 오늘 프로젝트가 시작되었다.

 

팀 전체 1교시 회의 :  컨텐츠분석, 자료조사, 사전조사, 시장조사 등

안순현  2교시 : 회의 내용 노션 정리

이윤주            : 웹 스토리보드 기획안 방법 조사, 양식 다운로드

팀 전체           : 구현하고 싶은 페이지 목록, 기술 작성, 프로젝트이름(brainStoming)

인스타킬로그램은 

NullNull그램이요

npm install

Emotion Flow

Emotion Breeze

페인스타북

탕평책으로

Emotion Ring

탕평책이요

flownary

울림바다
울림나무
울림숲

탕평 크고넓다

크고넓은책

Flow하면

쇼미더머니

 

우리가 주고싶은 게 뭡니까? 

우리가 우리 앱을 통해 사용자에게 주고싶은 메세지는 무엇이며 어떤 콘텐츠를 제공하는데 중심이 있습니까?

 

 

팀전체 3교시 : 프로젝트 겸 App name 결정 - 익명투표, 모두가 의견 제시, 모두 투표 참여

곽주영 : Sweeter - 트위터 짝퉁 / flower - 꽃처럼 아름다운 일상을 공유하세요!
이병학 : 리액트그램 - 리액트 프로젝트로 인스타그램을 만들었음을 의미
이윤주 : 플로우너리 - 트렌드의 흐름을 타고 sns로 전세계 문화가 전파된다는 뜻
정성한 : 탕평책 - 크고 넓은 책을 의미! 마음껏 써도 좋은 소셜네트워크
윤영준 : super star - 본인의 매력을 모두 보여줄수있는 곳이라고 생각해서
안순현 : LifeColor - 모두 다른 사람들이 각자의 색을 표현하는 곳

 

FlowNary로 이름이 정해졌습니다 짝짝짝!

 

 

cmd에 일괄 붙여넣기

: 이거 그대로 cmd에 넣으세요 

한번에 넣으면 알아서 실행 됩니다.
처음 경로만 잘 보고 적으세용!!

 

cd \Workspace\React
npx create-react-app flownary
cd flownary
npm install @mui/material @emotion/react @emotion/styled
npm install react-router-dom --save
npm i @tanstack/react-query
npm install @mui/icons-material
npm install @fontsource/roboto 
npm install timeago.js
npm install firebase

 

설명

cd \Workspace\React
(경로 이동)

npx create-react-app flownary
(react 프로젝트 생성)

cd flownary
(생성된 프로젝트 경로로 이동)

npm install @mui/material @emotion/react @emotion/styled
(mui 설치)

npm install react-router-dom --save
(npm 라우터 설치)

npm i @tanstack/react-query
(npm query 설치)

 

npm install @mui/icons-material
(icon용)

npm install @fontsource/roboto 
(폰트 추가 오픈소스)

npm install timeago.js
(시간표시) 

 

안순현 : 주제 선정 이유, sns를 선택한 이유를 말씀해주세요.

 

정성한 : 최근 sns활동이 급증한 만큼 남녀노소 상관없이 활발하게 글을쓰기위해 편의성을 증가하고자 어쩌구저쩌구 서론은 나머지분즐이..

 

안순현 : 최근 SNS활동이 급증한 만큼 웹으로 SNS 기능을 구현해 우리가 원하는 모습인 쓰고, 읽는 편의성을 증가한 SNS를 구성해보고 싶어 선정하게 되었습니다. 로 수정바랍니다.

 

## 프로젝트 방향

이윤주 : 

- 실버세대, 기성세대, MZ, 알파세대 모두 만족할만한 알찬 서비스.
- 우리 프로젝트 방향은 어르신들도 편하게 사용할 수 있는 단순하면서도 트렌디한 UI.
- 친근감이 느껴지며 직관적으로 구성되어 클릭 한 번으로 여러가지 기능들을 만나볼 수 있는 UI.

 

팀 전체 4교시

사용 기술 정리

사용 기술 및 도구

OS : Window 10
WAS : Apache TomCat v10.1 
사용기술 : React, JavaScript, Css, Java, firebase
TOOL : HeidiSQL, SpringBoot v3.2.4, VScode
OpenSource : Mui

곽주영, 윤영준 : 프로젝트 구현 기간(일정) 설정

이윤주 / 안순현 : 기획안 'FlowNary 서비스 개요' 작성 / fireStore 기술 구현 파악(연구) - user DB

 

팀 전체 5교시 회의

Pages 구성 전 List up, Pages 레이아웃 분담 작업 결정회의

 

팀 전체 6교시~ 8교시 레이아웃 그리기

 

윤영준 : 대댓글, 책갈피, 좋아요, 공유

곽주영 : 마이페이지, Mui login page 구현

정성한 : 메인메뉴, 회원가입, 로그인, 마이페이지 세부내용(팔로잉 / 팔로워), 언팔로우 비활성화 페이지, 챗봇 구현

이병학 : 통계, 게시글, 사용자 프로필 팔로우, DM, 설정, 알림창, 알림 세부내용, 게시글, 댓글 목록

이윤주, 안순현 : 검색 레이아웃 / 레이아웃 종합 PPT 제작

 

 

카카오톡 내용 종합

#1 안순현: 노션 1차회의 정리본
https://www.notion.so/b1ec385d5f5346b6bda8914af27d8557?v=1a8a2ba66bcf4c6794297268c36673d8


#2 웹 구현부 분리
2~3명씩 조를 나눠서 구현하면 좋을 것 같습니다 ^^

이병학 : 저는 메신저랑 프로필(개인설정)

이윤주 : 저는 업로드(첨부파일) 영역과 마이페이지(프로필 사진 변경, 상태메세지 변경, 친구 조회, 친구 검색, 내가 올린 게시글 목록 / 설정(알림설정, 계정추가, 연락처추가, 이름추가, 게시물비공개설정, 차단친구설정 등) 구현

안순현 : 저는 검색쪽 먼저 해보겠습니당

곽주영 : 저는 기본레이아웃이랑 알림이요

윤영준 : 저는 댓글 좋아요 이쪽 해보고싶습니다


#3 웹 스토리보드 기획안
이윤주 : 1. https://freemoa-blog.com/883
         : 2. https://www.slideshare.net/UGOHWANG/ss-238473870
> 안순현 : 2가지 기획안 목록 확인하여 노션정리
https://www.notion.so/11f01535cb28426291eace7c08d3d6d9?v=40172aa624bd477c846e9dd14dbe8cdb



#4 공유 계정 - 노션 설치 및 멤버 생성 후 사이트공유
곽주영 : 98rmmr@gmail.com
이병학 : wettrimotto@naver.com
          tetromitoto@gmail.com
이윤주 : yj960302@gmail.com
정성한 : jsh000311@gmail.com
윤영준 : gkak1563@gmail.com
안순현 : ash7106@gmail.com

#5 사용 기술 및 도구
기본 UI = Mui 프레임워크

#6 App name 정하기
팀전체 3교시 : 프로젝트 겸 App name 결정 

곽주영 : Sweeter - 트위터 짝퉁 / flower - 꽃처럼 아름다운 일상을 공유하세요!
이병학 : 리액트그램 - 리액트 프로젝트로 인스타그램을 만들었음을 의미
이윤주 : 플로우너리 - 트렌드의 흐름을 타고 sns로 전세계 문화가 전파된다는 뜻
정성한 : 탕평책 - 크고 넓은 책을 의미! 마음껏 써도 좋은 소셜네트워크
윤영준 : super star - 본인의 매력을 모두 보여줄수있는 곳이라고 생각해서
안순현 : LifeColor - 모두 다른 사람들이 각자의 색을 표현하는 곳

FlowNary로 이름이 정해졌습니다 짝짝짝!


#7 
cmd에 일괄 붙여넣기
: 이거 그대로 cmd에 넣으세요 

한번에 넣으면 알아서 실행 됩니다.
처음 경로만 잘 보고 적으세용!!

cd \Workspace\React
npx create-react-app flownary
cd flownary
npm install @mui/material @emotion/react @emotion/styled
npm install react-router-dom --save
npm i @tanstack/react-query
npm install @mui/icons-material
npm install @fontsource/roboto 
npm install timeago.js
npm install firebase



설명

cd \Workspace\React
(경로 이동)

npx create-react-app flownary
(react 프로젝트 생성)

cd flownary
(생성된 프로젝트 경로로 이동)

npm install @mui/material @emotion/react @emotion/styled
(mui 설치)

npm install react-router-dom --save
(npm 라우터 설치)

npm i @tanstack/react-query
(npm query 설치)



npm install @mui/icons-material
(icon용)

npm install @fontsource/roboto 
(폰트 추가 오픈소스)

npm install timeago.js
(시간표시) 

#8
안순현 : 주제 선정 이유, sns를 선택한 이유를 말씀해주세요.
정성한 : 최근 sns활동이 급증한 만큼 남녀노소 상관없이 활발하게 글을쓰기위해 편의성을 증가하고자 어쩌구저쩌구 서론은 나머지분즐이..
안순현 : 최근 SNS활동이 급증한 만큼 웹으로 SNS 기능을 구현해 우리가 원하는 모습인 쓰고, 읽는 편의성을 증가한 SNS를 구성해보고 싶어 선정하게 되었습니다. 로 수정바랍니다.

이윤주 : 프로젝트 방향 "기획 목적" 제시 - 기획안3p
- 실버세대, 기성세대, MZ, 알파세대 모두 만족할만한 알찬 서비스.
- 우리 프로젝트 방향은 어르신들도 편하게 사용할 수 있는 단순하면서도 트렌디한 UI.
- 친근감이 느껴지며 직관적으로 구성되어 클릭 한 번으로 여러가지 기능들을 만나볼 수 있는 UI.

#9 
4교시
정성한 챗봇 구현 pm12:06
https://blog.naver.com/powersub1101/223311400983
이병학: 기본 pages 파일 형성
         깃허브 https://github.com/Tetrodomino/HumanFinalProject
안순현 : 파이어 스토어 기능 확인


이윤주 : 
기획안, FlowNary 서비스 개요 PPT 공유
성한씨. 병학씨 지금 어떤 작업 하고 계세요?
병학씨 제가 보내드린 기획안에 들어간 내용을 구현할 방법 탐색을 해주세요~
성한씨도 부탁드립니다 ^^


선생님 notice : loginModal : SearchHeader.jsx 맨 뒤에 버튼에 loginModal 넣어줌 
                  SignIn/Signup 작업을 loginModal 에서 함


이윤주 : 
자료 수집 부탁드리고 정리한 내용을 노션에 올려주세요 ^^ 
개인 노션 만들어 드릴게요. 
거기에 정리 부탁드립니다. 
특별히 스크린샷 해주셔서 같이 첨부해 주시면 좋은 공유 자료가 될 것 같습니다! 
부탁드립니다 ^^

윤영준, 곽주영 :
2024-04-16 화 ~ 2024-05-31 금
1. 기획, 기본 레이아웃 제작, login, register 제작 :  04-16 화 ~ 04-26 금

2. 제작(기능 구현) : 04-29 월 ~ 05-10 금

※ flownary 서비스 개요 및 주요기능 참고
※좋아요,댓글,통계
home
seach
message (DM)
mypage
setting

3. 추가  : 05-13 월 ~ 05-17 금
기능추가 : 릴스 + @

4. 보안 : 05-20 월 ~ 05-24 금
코드 수정 , 각 파일들 구동

5. ppt 제작 및 발표점검, 기능 최종 점검:  05-27 월 ~ 05-31 금

*기획 제작(기능 구현) ppt 제작  중간발표 
*팀장, 발표자 정하기

안순현 : 체크리스트 생성 - 팀원 분업 완료 시 댓글 달면서 체크 요청

이윤주 : 
죄송한데요 순현씨
배치도 작업에 똑같이 체크리스트 전체 복사해서 붙여넣기 해주세요
지금은 4/21일이 아닙니다
그 부분은 기술구현 부분이라서
백엔드라고 써주세요

6~7교시 레이아웃 공유를 위해 구글 드라이브 형성 및 공유
https://drive.google.com/drive/folders/15wsX-YrfQzlxXViZSiz447T6I7imFXZ_?usp=drive_link