From 0d0d04fd09a7b76213bf7f49d838fc4592f63302 Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Mon, 31 Aug 2020 15:25:51 +0900 Subject: [PATCH 01/29] test --- src/components/App.js | 2 +- src/components/Banner/BestPicture.js | 2 - .../Detail/DetailFunction/Article.js | 27 ---- .../Detail/DetailFunction/KakaoMap.js | 87 ------------- .../Detail/DetailFunction/Message.js | 10 +- src/components/Detail/DetailPage.js | 1 - src/components/Mypage/Mypost.js | 4 +- src/components/Mypage/Picture.js | 59 +++++++-- .../Upload/UploadFunction/Atmosphere.js | 2 +- .../Upload/UploadFunction/Dropzone.js | 3 +- .../Upload/UploadFunction/Rating.js | 2 +- .../Upload/UploadFunction/TitleName.js | 7 +- .../Upload/UploadFunction/advertisement.js | 4 +- src/components/Upload/UploadPage.js | 117 +++++++++++++----- src/const/apiConst.js | 1 - src/routes/Area.js | 1 - src/routes/DefaultArea.js | 2 +- src/routes/Login.js | 5 +- src/routes/Mypage.js | 3 +- src/routes/Register.js | 2 +- yarn.lock | 5 + 21 files changed, 160 insertions(+), 186 deletions(-) delete mode 100644 src/components/Detail/DetailFunction/KakaoMap.js diff --git a/src/components/App.js b/src/components/App.js index 24173f7..b8b1f72 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -18,7 +18,7 @@ const GlobalStyle = createGlobalStyle` `; function App() { - const [{ user }, dispatch] = useStateValue(); + const [{ user }] = useStateValue(); return ( diff --git a/src/components/Banner/BestPicture.js b/src/components/Banner/BestPicture.js index 4aec175..741d033 100644 --- a/src/components/Banner/BestPicture.js +++ b/src/components/Banner/BestPicture.js @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import DetailPage from '../Detail/DetailPage'; - const LeftBottomContainer = styled.div` position: absolute; left: 6px; @@ -11,7 +10,6 @@ const LeftBottomContainer = styled.div` align-items: center; visibility: hidden; `; - const RightBottomContainer = styled.div` position: absolute; bottom: 5px; diff --git a/src/components/Detail/DetailFunction/Article.js b/src/components/Detail/DetailFunction/Article.js index 6bca23a..95a4e40 100644 --- a/src/components/Detail/DetailFunction/Article.js +++ b/src/components/Detail/DetailFunction/Article.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from 'styled-components'; export const PostName = styled.h2` font-weight: bold; @@ -24,29 +23,3 @@ export const DetailContent = styled.div` display: none; } `; -// function Article(props) { -// const executeOnClick = (isExpanded) => { -// console.log(isExpanded); -// }; -// let example = '123213213123213'; -// -// return ( -//
-//
-// -// -// {example} -// -// -//
-//
-// ); -// } diff --git a/src/components/Detail/DetailFunction/KakaoMap.js b/src/components/Detail/DetailFunction/KakaoMap.js deleted file mode 100644 index 9211c1d..0000000 --- a/src/components/Detail/DetailFunction/KakaoMap.js +++ /dev/null @@ -1,87 +0,0 @@ -import React, { useEffect } from 'react'; -import { KakaoMapAPI } from '../../../const/apiConst'; -import ButtonGroup from '@material-ui/core/ButtonGroup'; -import { Button } from '@material-ui/core'; -const { kakao } = window; - -const KakaoMap = (props) => { - useEffect(() => { - const script = document.createElement('script'); - script.async = true; - script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${KakaoMapAPI}&libraries=services,clusterer,drawing`; - document.head.appendChild(script); - - script.onload = () => { - kakao.maps.load(() => { - // 이미지 지도에 표시할 마커입니다 - // 이미지 지도에 표시할 마커를 아래와 같이 배열로 넣어주면 여러개의 마커를 표시할 수 있습니다 - var markers = [ - { - position: new kakao.maps.LatLng( - props.latitude, - props.longitude - ), - // text: '부산경치맛집', text 옵션을 설정하면 마커 위에 텍스트를 함께 표시할 수 있습니다 - }, - ]; - - var staticMapContainer = document.getElementById('staticMap'), // 이미지 지도를 표시할 div - staticMapOption = { - center: new kakao.maps.LatLng( - props.latitude, - props.longitude - ), // 이미지 지도의 중심좌표 - level: 4, // 이미지 지도의 확대 레벨 - marker: markers, // 이미지 지도에 표시할 마커 - }; - - // 이미지 지도를 생성합니다 - var staticMap = new kakao.maps.StaticMap( - staticMapContainer, - staticMapOption - ); - }); - }; - }, []); - const onClickToNev = () => { - window.open( - // `https://map.kakao.com/link/to/Hello World!,${props.latitude},${props.longitude}` - `https://map.kakao.com/link/to/${props.address},${props.latitude},${props.longitude}` - ); - }; - const onClickToMap = () => { - window.open( - `https://map.kakao.com/link/map/${props.address},${props.latitude},${props.longitude}` - ); - }; - return ( -
-
-
- - - - -
-
- ); -}; - -export default KakaoMap; diff --git a/src/components/Detail/DetailFunction/Message.js b/src/components/Detail/DetailFunction/Message.js index 5eb0cbe..bb7b84d 100644 --- a/src/components/Detail/DetailFunction/Message.js +++ b/src/components/Detail/DetailFunction/Message.js @@ -11,7 +11,7 @@ const Avartar = styled.div` background repeat: no-repeat; margin-right:20px; `; -const User_message = styled.p` +const UserMessage = styled.p` font-family: Noto Sans KR; font-style: normal; font-weight: 500; @@ -32,12 +32,12 @@ function Message(props) { > - + {props.user} - - + + {props.message} - + {/*

*/} {/* {props.user}*/} {/* {new Date(props.timestamp?.toDate()).toUTCString()}*/} diff --git a/src/components/Detail/DetailPage.js b/src/components/Detail/DetailPage.js index 833a23f..bccbee7 100644 --- a/src/components/Detail/DetailPage.js +++ b/src/components/Detail/DetailPage.js @@ -21,7 +21,6 @@ import { CommentBox, } from './DetailStyle'; import { DetailContent, PostName } from './DetailFunction/Article'; -import KakaoMap from './DetailFunction/KakaoMap'; import ClearTwoToneIcon from '@material-ui/icons/ClearTwoTone'; import ShowMoreText from 'react-show-more-text'; import { SubtitleFont } from '../Upload/UploadStyled'; diff --git a/src/components/Mypage/Mypost.js b/src/components/Mypage/Mypost.js index d7c8691..6eb82a7 100644 --- a/src/components/Mypage/Mypost.js +++ b/src/components/Mypage/Mypost.js @@ -64,7 +64,7 @@ export default () => { const [mood, setMood] = useState(''); const [hasMore, setHasMore] = useState(true); const moods = ['내가 올린 사진', '신기해요', '찜목록']; - const [{ user }, dispatch] = useStateValue(); + const [{ user }] = useStateValue(); useEffect(() => { const unsubscribe = db .collection('posts') @@ -82,7 +82,7 @@ export default () => { return () => { unsubscribe(); }; - }, [last]); + }, [user.displayName]); const next = () => { if (last) { diff --git a/src/components/Mypage/Picture.js b/src/components/Mypage/Picture.js index 52c4470..ddc9c5a 100644 --- a/src/components/Mypage/Picture.js +++ b/src/components/Mypage/Picture.js @@ -5,6 +5,7 @@ import { Button } from '@material-ui/core'; import makeStyles from '@material-ui/core/styles/makeStyles'; import ButtonGroup from '@material-ui/core/ButtonGroup'; import db from '../../firebase'; +import UploadPage from '../Upload/UploadPage'; const useStyles = makeStyles((theme) => ({ ButtonGroup: { width: '150px', @@ -32,6 +33,11 @@ const RightTopContainer = styled.div` align-items: center; visibility: hidden; `; + +const Image = styled.img` + width: 100%; + border-radius: 20px; +`; const ButtonContainer = styled.div` position: absolute; top: 40%; @@ -39,11 +45,6 @@ const ButtonContainer = styled.div` align-items: center; visibility: hidden; `; -const Image = styled.img` - width: 100%; - border-radius: 20px; -`; - const Box = styled.div` width: 100%; margin: 0 0 45px; @@ -83,6 +84,9 @@ const ImageContainer = styled.div` ${ButtonContainer} { visibility: visible; } + ${Box} { + visibility: hidden; + } } `; @@ -112,8 +116,11 @@ export default ({ id, }) => { const [isModalOpen, setIsModalOpen] = useState(false); + const [IsUpdateModalOpen, setIsUpdateModalOpen] = useState(false); + const onClose = () => { setIsModalOpen(false); + setIsUpdateModalOpen(false); }; const classes = useStyles(); @@ -131,6 +138,8 @@ export default ({ } }; const UpdatePost = () => { + setIsUpdateModalOpen(true); + // let PostInfoChange = db.collection('posts').doc(id); // return PostInfoChange.update({ // title: '이렇게업데이트하는구나', @@ -138,6 +147,26 @@ export default ({ }; return ( <> + - {/*onClick={() => setIsModalOpen(true)}*/} + - + setIsModalOpen(true)} + /> - {title} - {review?.slice(0, 20)}... + setIsModalOpen(true)}> + {title} + + setIsModalOpen(true)}> + {review?.slice(0, 20)}... + ); diff --git a/src/components/Upload/UploadFunction/Atmosphere.js b/src/components/Upload/UploadFunction/Atmosphere.js index 2c1418e..bd9bf84 100644 --- a/src/components/Upload/UploadFunction/Atmosphere.js +++ b/src/components/Upload/UploadFunction/Atmosphere.js @@ -32,7 +32,7 @@ const MoodList = styled.div` export default function ToggleButtons(props) { const classes = useStyles(); - const [alignment, setAlignment] = React.useState(''); + const [alignment, setAlignment] = React.useState(props.mood); const handleAlignment = (event, newAlignment) => { setAlignment(newAlignment); diff --git a/src/components/Upload/UploadFunction/Dropzone.js b/src/components/Upload/UploadFunction/Dropzone.js index df9ebba..45d41c6 100644 --- a/src/components/Upload/UploadFunction/Dropzone.js +++ b/src/components/Upload/UploadFunction/Dropzone.js @@ -37,10 +37,9 @@ const useStyles = makeStyles((theme) => ({ // font-size: 24px; // line-height: 35px; // color: #ff534b; -// `; +// function Dropzone(props) { const classes = useStyles(); - const onDrop = (file) => { props.setHadImageurl(file[0]); }; diff --git a/src/components/Upload/UploadFunction/Rating.js b/src/components/Upload/UploadFunction/Rating.js index 118e16a..62f5858 100644 --- a/src/components/Upload/UploadFunction/Rating.js +++ b/src/components/Upload/UploadFunction/Rating.js @@ -20,7 +20,7 @@ function Rating(props) { useEffect(() => { props.setHadRating(value); }); - const [value, setValue] = React.useState(null); + const [value, setValue] = React.useState(props.rating); const handleChange = (event) => { setValue(event.target.value); }; diff --git a/src/components/Upload/UploadFunction/TitleName.js b/src/components/Upload/UploadFunction/TitleName.js index 7eecbcc..3a15d95 100644 --- a/src/components/Upload/UploadFunction/TitleName.js +++ b/src/components/Upload/UploadFunction/TitleName.js @@ -3,8 +3,8 @@ import Input from '@material-ui/core/Input'; import TextField from '@material-ui/core/TextField'; function TitleName(props) { - const [titleValue, setTitleValue] = useState(''); - const [reviewValue, setReviewValue] = useState(''); + const [titleValue, setTitleValue] = useState(props.title); + const [reviewValue, setReviewValue] = useState(props.review); const onChageTitle = (e) => { e.preventDefault(); setTitleValue(e.target.value); @@ -16,12 +16,11 @@ function TitleName(props) { useEffect(() => { props.setHadReview(reviewValue); props.setHadTitlename(titleValue); - }); + }, [reviewValue, titleValue]); return (
{ setSelectedValue(event.target.value); diff --git a/src/components/Upload/UploadPage.js b/src/components/Upload/UploadPage.js index c19c30e..0dec2a1 100644 --- a/src/components/Upload/UploadPage.js +++ b/src/components/Upload/UploadPage.js @@ -31,41 +31,40 @@ let currentPage = 1; export default function UploadPage(props) { let [locations, setLocations] = useState([]); const [hasSelectedAddress, setHasSelectedAddress] = useState(false); - const [address, setAddress] = useState(''); - const [latitude, setLatitude] = useState(''); //위도 - const [longitude, setLongitude] = useState(''); //경도 - const [advertising, setAdvertising] = useState(false); //광고여부 - const [mood, setMood] = useState(''); //분위기 - const [rating, setRating] = useState(''); //평점 - const [title, setTitle] = useState(null); //제목명 - const [review, setReview] = useState(null); //상세내용 - const [imageUrl, setImageUrl] = useState(null); //이미지 + const [address, setAddress] = useState(props.address ? props.address : ''); + const [latitude, setLatitude] = useState( + props.latitude ? props.latitude : '' + ); //위도 + const [longitude, setLongitude] = useState( + props.longitude ? props.longitude : '' + ); //경도 + const [advertising, setAdvertising] = useState( + props.advertising ? props.advertising : false + ); //광고여부 + const [mood, setMood] = useState(props.mood ? props.mood : ''); //분위기 + const [rating, setRating] = useState(props.rating ? props.rating : ''); //평점 + const [title, setTitle] = useState(props.title ? props.title : null); //제목명 + const [review, setReview] = useState(props.review ? props.review : null); //상세내용 + const [imageUrl, setImageUrl] = useState( + props.imageUrl ? props.imageUrl : null + ); //이미지 const [{ user }] = useStateValue(); //로그인유저 - const [area, setArea] = useState(null); + const [area, setArea] = useState(props.area ? props.area : null); useEffect(() => { resetSearchLocation(); }, []); - + useEffect(() => { + // setHasSelectedAddress(false); + // setAddress(props.address ? props.address : ''); + // setAdvertising(props.advertising ? props.advertising : false); + // setMood(props.mood ? props.mood : ''); + // setRating(props.rating ? props.rating : ''); + // setTitle(props.title ? props.title : null); + // setReview(props.review ? props.review : null); + // setImageUrl(props.imageUrl ? props.imageUrl : null); + }, []); const onHandleUpload = (e) => { e.preventDefault(); - - // if(imageUrl===null){ - // console.error("이미지 오류") - // } - // const uploadTask=db.ref(`/images/${imageUrl.name}`).put(imageUrl) - // uploadTask.on('state_changed', - // (snapShot)=>{ - // console.error(snapShot) - // },(err)=>{ - // //catch the err - // console.error(err) - // },()=>{ - // db.ref('images').child(imageUrl.name).getDownloadURL() - // .then(fireBaseUrl=>{ - // setImageUrl(prevObject=>({...prevObject,imgUrl:fireBaseUrl})) - // }) - - // }) if ( imageUrl === null || //이미지업로드 X title === null || //제목이(x) @@ -114,11 +113,50 @@ export default function UploadPage(props) { }); } ); + alert('업로드 완료'); props.close(); } }; + const onHandleUpdate = (e) => { + // console.log('id', props.id); + // console.log('광고', advertising); + // console.log('제목', title); + // console.log('상세내용', review); + // console.log('무드', mood); + // console.log('레이팅', Rating); + // console.log('아리아', area); + e.preventDefault(); + if ( + imageUrl === null || //이미지업로드 X + title === null || //제목이(x) + review === null || //상세내용x + mood === '' || //분위기가(X) + area === null || //지역체크(위치X) + rating === '' //평점(X) + ) { + alert('업로드내용을 입력해주세요'); + } else { + let PostInfoChange = db.collection('posts').doc(props.id); + PostInfoChange.update({ + advertising: advertising, //광고 + area: area, //지역 + avatar: user.photoURL, //아바타 + imageUrl: imageUrl, //이미지 + latitude: latitude, //위도 + longitude: longitude, //경도 + mood: mood, //분위기 + rating: rating, //평점 + review: review, //리뷰 + timestamp: firebase.firestore.FieldValue.serverTimestamp(), //시간 + title: title, //제목 + address: address, //주소 + }).then((temp) => console.log('success', temp)); + alert('게시물이 수정되었습니다.'); + props.close(); + } + }; const searchLocation = (reset = false) => { if (isSearching || isEndReached || !address) { return; @@ -234,11 +272,16 @@ export default function UploadPage(props) { <> - + @@ -246,10 +289,11 @@ export default function UploadPage(props) { - +
{hasSelectedAddress && ( - + )} @@ -324,9 +371,11 @@ export default function UploadPage(props) { display: 'flex', justifyContent: 'center', }} - onClick={onHandleUpload} + onClick={ + props.username ? onHandleUpdate : onHandleUpload + } > - 완료 + {props.username ? '수정' : '완료'}

diff --git a/src/const/apiConst.js b/src/const/apiConst.js index ebd46b2..e69de29 100644 --- a/src/const/apiConst.js +++ b/src/const/apiConst.js @@ -1 +0,0 @@ -export const KakaoMapAPI = '437988abfa77c2e8be54e8f54cb601a1'; diff --git a/src/routes/Area.js b/src/routes/Area.js index 61bb6b6..91a943d 100644 --- a/src/routes/Area.js +++ b/src/routes/Area.js @@ -111,7 +111,6 @@ function Area() { const [mood, setMood] = useState(''); const [hasMore, setHasMore] = useState(true); const moods = ['도시', '자연', '몽환', '여유', '고요', '활기', '낭만']; - const [{}, dispatch] = useStateValue(); useEffect(() => { setPosts([]); const unsubscribe = db diff --git a/src/routes/DefaultArea.js b/src/routes/DefaultArea.js index cf291ac..2c97721 100644 --- a/src/routes/DefaultArea.js +++ b/src/routes/DefaultArea.js @@ -17,7 +17,7 @@ const MiddleTitle = styled.h2` line-height: 58px; `; function DefaultArea(props) { - const [{}, dispatch] = useStateValue(); + const [, dispatch] = useStateValue(); return (
{ event.preventDefault(); }; diff --git a/src/routes/Mypage.js b/src/routes/Mypage.js index 7f9c2c5..e85199d 100644 --- a/src/routes/Mypage.js +++ b/src/routes/Mypage.js @@ -1,6 +1,5 @@ import React from 'react'; import styled from 'styled-components'; -import { useStateValue } from '../StateProvider'; import Mypost from '../components/Mypage/Mypost'; const Container = styled.div` position: relative; @@ -27,7 +26,7 @@ const BackgroundImage = styled.div` `; function Mypage() { - const [{ user }, dispatch] = useStateValue(); + // const [{ user }, dispatch] = useStateValue(); return ( <> diff --git a/src/routes/Register.js b/src/routes/Register.js index a685231..bf612d5 100644 --- a/src/routes/Register.js +++ b/src/routes/Register.js @@ -17,7 +17,7 @@ import { SocialCollection } from '../components/CommonStyle/SocialCollection'; import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'; function Register() { - const [{}, dispatch] = useStateValue(); + const [, dispatch] = useStateValue(); const [NickName, setNickName] = useState(''); const [Email, setEmail] = useState(''); const [UserId, setUserId] = useState(''); diff --git a/yarn.lock b/yarn.lock index 8f322d4..82453ac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9556,6 +9556,11 @@ react-app-polyfill@^1.0.6: regenerator-runtime "^0.13.3" whatwg-fetch "^3.0.0" +react-confirm-alert@^2.6.2: + version "2.6.2" + resolved "https://registry.yarnpkg.com/react-confirm-alert/-/react-confirm-alert-2.6.2.tgz#775c6e5233cd2c4b06f4ddedd59b8de03e071876" + integrity sha512-lvlk+Sic7p3wbOcsetkCHVXA3LJCDViqjO8sV7FtCfJwjw36ZKCJv2FiaxUCiw3g8PXvmpjEtvAvLqPKb8yh/A== + react-dev-utils@^10.2.1: version "10.2.1" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19" From 88238f8316672901129ae698da9f4a6e5b2eb29f Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Mon, 31 Aug 2020 16:27:18 +0900 Subject: [PATCH 02/29] Update Defaultpage --- src/routes/Area.js | 1 + src/routes/DefaultArea.js | 24 +++++++++++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/src/routes/Area.js b/src/routes/Area.js index 91a943d..52cf8a9 100644 --- a/src/routes/Area.js +++ b/src/routes/Area.js @@ -130,6 +130,7 @@ function Area() { })) ); setLast(snapshot.docs[snapshot.docs.length - 1]); + setMood(''); }); return () => { diff --git a/src/routes/DefaultArea.js b/src/routes/DefaultArea.js index 2c97721..d7f3c38 100644 --- a/src/routes/DefaultArea.js +++ b/src/routes/DefaultArea.js @@ -3,6 +3,7 @@ import { Button } from '@material-ui/core'; import { actionTypes } from '../reducer'; import styled from 'styled-components'; import { useStateValue } from '../StateProvider'; + const Toptitle = styled.h1` font-weight: 500; font-size: 70px; @@ -17,6 +18,19 @@ const MiddleTitle = styled.h2` line-height: 58px; `; function DefaultArea(props) { + let RecommendArea = [ + //10개개 + '서울', + '부산', + '대구', + '인천', + '경기도', + '강원도', + '전라도', + '경상도', + '제주도', + ]; + const [{ term }] = useStateValue(); const [, dispatch] = useStateValue(); return (
@@ -52,9 +66,17 @@ function DefaultArea(props) { color: '#FFFFFF', }} onClick={() => { + let randomNum = Math.floor(Math.random() * 8); dispatch({ type: actionTypes.SET_SERACH_TERM, - term: '부산', + term: + term === RecommendArea[randomNum] + ? RecommendArea[ + randomNum === 8 + ? randomNum - 1 + : randomNum + 1 + ] + : RecommendArea[randomNum], }); }} > From d74950034d38b0d74f5e89dbceb3aa681ebcb568 Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Mon, 31 Aug 2020 16:36:20 +0900 Subject: [PATCH 03/29] Update_Defaulpage --- src/routes/Area.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/Area.js b/src/routes/Area.js index 52cf8a9..91a943d 100644 --- a/src/routes/Area.js +++ b/src/routes/Area.js @@ -130,7 +130,6 @@ function Area() { })) ); setLast(snapshot.docs[snapshot.docs.length - 1]); - setMood(''); }); return () => { From 20f1995443054711a08d53273352635adf6e3fdb Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Mon, 31 Aug 2020 18:02:58 +0900 Subject: [PATCH 04/29] test --- src/components/Upload/UploadPage.js | 18 +++++++++--------- src/routes/Area.js | 1 + src/routes/DefaultArea.js | 1 - src/routes/Mypage.js | 18 ++++++++++++++++-- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/components/Upload/UploadPage.js b/src/components/Upload/UploadPage.js index 0dec2a1..ce147e1 100644 --- a/src/components/Upload/UploadPage.js +++ b/src/components/Upload/UploadPage.js @@ -54,15 +54,15 @@ export default function UploadPage(props) { resetSearchLocation(); }, []); useEffect(() => { - // setHasSelectedAddress(false); - // setAddress(props.address ? props.address : ''); - // setAdvertising(props.advertising ? props.advertising : false); - // setMood(props.mood ? props.mood : ''); - // setRating(props.rating ? props.rating : ''); - // setTitle(props.title ? props.title : null); - // setReview(props.review ? props.review : null); - // setImageUrl(props.imageUrl ? props.imageUrl : null); - }, []); + setHasSelectedAddress(false); + setAddress(props.address ? props.address : ''); + setAdvertising(props.advertising ? props.advertising : false); + setMood(props.mood ? props.mood : ''); + setRating(props.rating ? props.rating : ''); + setTitle(props.title ? props.title : null); + setReview(props.review ? props.review : null); + setImageUrl(props.imageUrl ? props.imageUrl : null); + }, [props.close]); const onHandleUpload = (e) => { e.preventDefault(); if ( diff --git a/src/routes/Area.js b/src/routes/Area.js index 7bbb980..5bfcef0 100644 --- a/src/routes/Area.js +++ b/src/routes/Area.js @@ -29,6 +29,7 @@ const BackgroundImage = styled.div` ), url(${(props) => props.bg}); background-size: cover; + background-repeat: no-repeat; background-position: center center; `; diff --git a/src/routes/DefaultArea.js b/src/routes/DefaultArea.js index d7f3c38..7c279b0 100644 --- a/src/routes/DefaultArea.js +++ b/src/routes/DefaultArea.js @@ -19,7 +19,6 @@ const MiddleTitle = styled.h2` `; function DefaultArea(props) { let RecommendArea = [ - //10개개 '서울', '부산', '대구', diff --git a/src/routes/Mypage.js b/src/routes/Mypage.js index e85199d..c3aa444 100644 --- a/src/routes/Mypage.js +++ b/src/routes/Mypage.js @@ -1,6 +1,9 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import styled from 'styled-components'; import Mypost from '../components/Mypage/Mypost'; +import { useStateValue } from '../StateProvider'; +import db from '../firebase'; +import firebase from 'firebase'; const Container = styled.div` position: relative; z-index: 1; @@ -23,12 +26,23 @@ const BackgroundImage = styled.div` url(${(props) => props.bg}); background-size: cover; background-position: center center; + background-repeat: no-repeat; `; function Mypage() { - // const [{ user }, dispatch] = useStateValue(); + const [{ user }, dispatch] = useStateValue(); + const [userInfo, setUserInfo] = useStateValue(''); + useEffect(() => { + // db.collection('users') + // .doc(user.uid) + // .get() + // .then((doc) => { + // setUserInfo(doc); + // }); + }); return ( <> + {console.log(userInfo)} Date: Mon, 31 Aug 2020 19:01:35 +0900 Subject: [PATCH 05/29] Add_MYpage" --- src/routes/Mypage.js | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/routes/Mypage.js b/src/routes/Mypage.js index c3aa444..f3f1b58 100644 --- a/src/routes/Mypage.js +++ b/src/routes/Mypage.js @@ -3,7 +3,6 @@ import styled from 'styled-components'; import Mypost from '../components/Mypage/Mypost'; import { useStateValue } from '../StateProvider'; import db from '../firebase'; -import firebase from 'firebase'; const Container = styled.div` position: relative; z-index: 1; @@ -30,25 +29,27 @@ const BackgroundImage = styled.div` `; function Mypage() { - const [{ user }, dispatch] = useStateValue(); + const [{ user }] = useStateValue(); const [userInfo, setUserInfo] = useStateValue(''); useEffect(() => { - // db.collection('users') - // .doc(user.uid) - // .get() - // .then((doc) => { - // setUserInfo(doc); - // }); - }); + db.collection('users') + .doc(user.uid) + .get() + .then((doc) => { + setUserInfo(doc); + }); + }, []); + + // {console.log(userInfo)} + // {console.log(userInfo.user.background)} 배경 + // {console.log(userInfo.user.displayName)} 이름 + // {console.log(userInfo.user.email)} 이메일 + // {console.log(userInfo.user.introduction)} 소개 + // {console.log(userInfo.user.photoURL)} 아바타타{' '} return ( <> - {console.log(userInfo)} - + From 698ed75aea317edb3c557cb0a8a2239b16de16f9 Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Tue, 1 Sep 2020 17:10:46 +0900 Subject: [PATCH 06/29] Add Mypage --- src/components/Mypage/Edit.js | 208 ++++++++++++++++++++++++++++++++++ src/routes/Mypage.js | 109 +++++++++++++++++- 2 files changed, 312 insertions(+), 5 deletions(-) create mode 100644 src/components/Mypage/Edit.js diff --git a/src/components/Mypage/Edit.js b/src/components/Mypage/Edit.js new file mode 100644 index 0000000..bb73654 --- /dev/null +++ b/src/components/Mypage/Edit.js @@ -0,0 +1,208 @@ +import React, { useState } from 'react'; +import Dialog from '@material-ui/core/Dialog'; +import ClearTwoToneIcon from '@material-ui/icons/ClearTwoTone'; +import { DropzoneArea } from 'material-ui-dropzone'; +import makeStyles from '@material-ui/core/styles/makeStyles'; +import styled from 'styled-components'; +import TextField from '@material-ui/core/TextField'; +import { Button } from '@material-ui/core'; +const useStyles = makeStyles((theme) => ({ + DropZoneArea: { + height: '558px', + width: '1142px', + border: '4px dashed #FFFFFF;', + boxSizing: 'border-box', + borderRadius: '20px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + margin: 'auto 0', + background: 'none', + }, + DropzoneParagrap: { + fontFamily: 'Noto Sans KR', + fontStyle: 'normal', + display: 'flex', + alignItems: 'center', + color: '#FFFFFF', + fontWeight: '500', + fontSize: '26px', + lineHeight: '38px', + }, + AvatarDropZoneArea: { + height: '295px', + width: '295px', + border: '4px dashed #FFFFFF;', + borderRadius: '160px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + margin: 'auto 0', + background: 'none', + marginRight: '100px', + }, + AvatarDropzoneParagrap: { + display: 'flex', + alignItems: 'center', + color: '#FFFFFF', + fontWeight: '500', + fontSize: '20px', + lineHeight: '29px', + }, + Introduction: { + width: '60%', + height: '295px', + display: 'flex', + }, + InputOption: { + fontWeight: 'normal', + fontSize: '20px', + lineHeight: '28px', + color: '#FFFFFF', + }, + PlaceOption: { + fontSize: '30px', + lineHeight: '43px', + color: '#979797', + }, + UpdateBtn: { + width: '110px', + height: '50px', + background: '#FF534B', + borderRadius: '35px', + fontWeight: 500, + fontSize: '30px', + lineHeight: '43px', + color: '#FFFFFF', + display: 'flex', + justifyContent: 'center', + }, +})); + +const TotalContainer = styled.div` + width: 1300px; + height: 1100px; + display: flex; + justify-content: center; +`; +function Edit(props) { + const [backroundFile, setBackroundFile] = useState(null); + const onDrop = (file) => {}; + const classes = useStyles(); + return ( + + +
+
+
+ +
+
+ +
+
+ {/*상단 드롭존*/} + {/*하단Avartar 드롭존*/} +
+ + +
+
+ +
+
+ + + ); +} + +export default Edit; diff --git a/src/routes/Mypage.js b/src/routes/Mypage.js index f3f1b58..5d2483c 100644 --- a/src/routes/Mypage.js +++ b/src/routes/Mypage.js @@ -1,15 +1,32 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import Mypost from '../components/Mypage/Mypost'; import { useStateValue } from '../StateProvider'; import db from '../firebase'; +import Button from '@material-ui/core/Button'; +import { makeStyles } from '@material-ui/core/styles'; +import { Avatar } from '@material-ui/core'; +import Edit from '../components/Mypage/Edit'; +const useStyles = makeStyles((theme) => ({ + Edit: { + width: '75px', + height: '46px', + border: '1px solid #FFFFFF', + boxSizing: 'border-box', + borderRadius: '25.5px', + fontWeight: 'normal', + fontSize: '24px', + lineHeight: '35px', + letterSpacing: '-0.48px', + color: '#FFFFFF', + }, +})); const Container = styled.div` position: relative; z-index: 1; margin-bottom: 14px; margin-top: -20px; `; - const BackgroundImage = styled.div` width: 100%; height: 787px; @@ -27,8 +44,26 @@ const BackgroundImage = styled.div` background-position: center center; background-repeat: no-repeat; `; - +const Username = styled.p` + font-weight: 500; + font-size: 24px; + line-height: 35px; + letter-spacing: -0.48px; + margin-top: 12px; + margin-bottom: 20px; +`; +const IntroductionFont = styled.p` + font-family: Noto Sans KR; + font-style: normal; + font-weight: 500; + font-size: 24px; + line-height: 35px; + text-align: left; + letter-spacing: -0.48px; + color: #ffffff; +`; function Mypage() { + const classes = useStyles(); const [{ user }] = useStateValue(); const [userInfo, setUserInfo] = useStateValue(''); useEffect(() => { @@ -46,13 +81,77 @@ function Mypage() { // {console.log(userInfo.user.email)} 이메일 // {console.log(userInfo.user.introduction)} 소개 // {console.log(userInfo.user.photoURL)} 아바타타{' '} + const [isEditModalOpen, setIsEditModalOpen] = useState(false); + + const onClose = () => { + setIsEditModalOpen(false); + }; return ( - <> +
+ +
+
+ + {/*// */} + {userInfo.user.displayName} + +
+
+
+ 내 소개 + + {userInfo.user.introduction} + +
+
+
- +
); } From d0b8363055630eb661e329ebb95238d7df8e5b20 Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Tue, 1 Sep 2020 18:03:59 +0900 Subject: [PATCH 07/29] Add introduction mypage --- src/components/Mypage/Edit.js | 50 ++++++++++++++++++++++++++++++++--- src/routes/Mypage.js | 22 ++++++++++++--- 2 files changed, 65 insertions(+), 7 deletions(-) diff --git a/src/components/Mypage/Edit.js b/src/components/Mypage/Edit.js index bb73654..ecaf248 100644 --- a/src/components/Mypage/Edit.js +++ b/src/components/Mypage/Edit.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import Dialog from '@material-ui/core/Dialog'; import ClearTwoToneIcon from '@material-ui/icons/ClearTwoTone'; import { DropzoneArea } from 'material-ui-dropzone'; @@ -6,6 +6,9 @@ import makeStyles from '@material-ui/core/styles/makeStyles'; import styled from 'styled-components'; import TextField from '@material-ui/core/TextField'; import { Button } from '@material-ui/core'; +import db from '../../firebase'; +import firebase from 'firebase'; +import { useStateValue } from '../../StateProvider'; const useStyles = makeStyles((theme) => ({ DropZoneArea: { height: '558px', @@ -85,10 +88,44 @@ const TotalContainer = styled.div` display: flex; justify-content: center; `; +// isIntroduction={userInfo.user.introduction} //소개 +// isBackground={userInfo.user.background} //백그라운드 +// isAvartar={userInfo.user.photoURL} //아바타 function Edit(props) { - const [backroundFile, setBackroundFile] = useState(null); const onDrop = (file) => {}; const classes = useStyles(); + const [isAvartar, setIsAvartar] = useState(props.isAvartar); + const [isBackground, setIsbackground] = useState(props.isBackground); + const [isIntroduction, setIsIntroduction] = useState(props.isIntroduction); + const [{ user }] = useStateValue(); + + useEffect(() => { + setIsIntroduction(props.isIntroduction); + setIsbackground(props.isBackground); + setIsAvartar(props.isAvartar); + }, [props.close]); + const onChageTitle = (e) => { + e.preventDefault(); + setIsIntroduction(e.target.value); + }; + const onClickChange = (e) => { + e.preventDefault(); + if (isIntroduction === '') { + alert('소개글을 입력해주세요'); + } else { + let userInfoChange = db.collection('users').doc(user.uid); + userInfoChange + .update({ + introduction: isIntroduction, + }) + .then((temp) => console.log('success', temp)); + props.setIsAvartar(isAvartar); + props.setIsBackground(isBackground); + props.setIsIntroduction(isIntroduction); + alert('게시물이 수정되었습니다.'); + props.close(); + } + }; return ( - +
diff --git a/src/routes/Mypage.js b/src/routes/Mypage.js index 5d2483c..5598598 100644 --- a/src/routes/Mypage.js +++ b/src/routes/Mypage.js @@ -86,11 +86,25 @@ function Mypage() { const onClose = () => { setIsEditModalOpen(false); }; + const [isAvartar, setIsAvartar] = useState(userInfo.user.photoURL); + const [isBackground, setIsBackground] = useState(userInfo.user.background); + const [isIntroduction, setIsIntroduction] = useState( + userInfo.user.introduction + ); return (
- + - +
- {userInfo.user.introduction} + {isIntroduction}
From c0376e8052f80ab4f2ca2b7b4f4c76c12068236e Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Thu, 3 Sep 2020 20:33:12 +0900 Subject: [PATCH 08/29] Update Mypage --- src/components/Mypage/Edit.js | 181 ++++++++++++++++++++++++++++++++-- src/routes/Mypage.js | 43 ++++---- src/routes/Register.js | 2 + 3 files changed, 194 insertions(+), 32 deletions(-) diff --git a/src/components/Mypage/Edit.js b/src/components/Mypage/Edit.js index bb73654..419bdab 100644 --- a/src/components/Mypage/Edit.js +++ b/src/components/Mypage/Edit.js @@ -6,6 +6,9 @@ import makeStyles from '@material-ui/core/styles/makeStyles'; import styled from 'styled-components'; import TextField from '@material-ui/core/TextField'; import { Button } from '@material-ui/core'; +import { useStateValue } from '../../StateProvider'; +import db, { storage } from '../../firebase'; +import { actionTypes } from '../../reducer'; const useStyles = makeStyles((theme) => ({ DropZoneArea: { height: '558px', @@ -86,9 +89,162 @@ const TotalContainer = styled.div` justify-content: center; `; function Edit(props) { - const [backroundFile, setBackroundFile] = useState(null); - const onDrop = (file) => {}; const classes = useStyles(); + const [isAvartar, setIsAvartar] = useState(props.isAvartar); + const [isBackground, setIsbackground] = useState(props.isBackground); + const [isIntroduction, setIsIntroduction] = useState(props.isIntroduction); + const [{ user }, dispatch] = useStateValue(); + //local err + const onChageTitle = (e) => { + e.preventDefault(); + setIsIntroduction(e.target.value); + }; + + // AvartarFileName: '', + // BackgroundFileName: '', + const onClickChange = (e) => { + e.preventDefault(); + if (isIntroduction === '') { + alert('소개글을 입력해주세요'); + } else { + let userInfoChange = db.collection('users').doc(user.uid); + if (isAvartar !== props.isAvartar) { + // 이경우에는 수정해야함 + ////////////////////////////// + if (user.AvartarFileName !== '') { + let desertRef = storage.ref( + `images/${user.AvartarFileName}` + ); + desertRef + .delete() + .then(function () { + console.log('삭제성공'); + }) + .catch(function (error) { + console.log(error); + }); + } + //////////////////////////////// + const randomNum = Math.floor( + Math.random() * (1000000 - 0) + 1000000 + ); + const AvartarName = `${isAvartar.name}${randomNum}`; //아바타이름 + const uploadavatar = storage + .ref(`images/${AvartarName}`) + .put(isAvartar); + uploadavatar.on( + 'state_changed', + (snapshot) => {}, + (error) => { + console.log(error); + }, + () => { + storage + .ref('images') + .child(AvartarName) + .getDownloadURL() + .then((url) => { + userInfoChange + .update({ + AvartarFileName: AvartarName, + photoURL: url, + }) + .then((temp) => { + props.setIsAvartar(url); + console.log('Avartar success', temp); + db.collection('users') + .doc(user.uid) + .get() + .then((doc) => { + dispatch({ + type: actionTypes.SET_USER, + user: doc.data(), + }); + }); + }); + }); + } + ); + } + if (isBackground !== props.isBackground) { + // 이경우에는 수정해야함 + if (user.BackgroundFileName !== '') { + let desertRef = storage.ref( + `images/${user.BackgroundFileName}` + ); + desertRef + .delete() + .then(function () { + console.log('백그라운드삭제성공'); + }) + .catch(function (error) { + console.log(error); + }); + } + const randomNum = Math.floor( + Math.random() * (1000000 - 0) + 1000000 + ); + const BackgroundName = `${isBackground.name}${randomNum}`; //아바타이름 + const uploadbackground = storage + .ref(`images/${BackgroundName}`) + .put(isBackground); + uploadbackground.on( + 'state_changed', + (snapshot) => {}, + (error) => { + console.log(error); + }, + () => { + storage + .ref('images') + .child(BackgroundName) + .getDownloadURL() + .then((url) => { + userInfoChange + .update({ + background: url, + BackgroundFileName: BackgroundName, + }) + .then((temp) => { + props.setIsBackground(url); + console.log('background success', temp); + db.collection('users') + .doc(user.uid) + .get() + .then((doc) => { + dispatch({ + type: actionTypes.SET_USER, + user: doc.data(), + }); + }); + }); + }); + } + ); + } + userInfoChange + .update({ + introduction: isIntroduction, + }) + .then((temp) => { + console.log('success', temp); + }); + db.collection('users') + .doc(user.uid) + .get() + .then((doc) => { + console.log(user); + dispatch({ + type: actionTypes.SET_USER, + user: doc.data(), + }); + console.log(user); + }); + props.setIsIntroduction(isIntroduction); + alert('게시물이 수정되었습니다.'); + props.close(); + } + }; return ( { + setIsbackground(file[0]); + }} dropzoneClass={classes.DropZoneArea} dropzoneParagraphClass={ classes.DropzoneParagrap @@ -145,7 +303,7 @@ function Edit(props) { 'image/png', 'image/bmp', ]} - showPreviews={true} + // showPreviews={true} showPreviewsInDropzone={false} useChipsForPreview //사진이 아니라 이름으로 보여주기 위함 filesLimit={1} //파일 갯수 @@ -156,7 +314,9 @@ function Edit(props) { {/*하단Avartar 드롭존*/}
{ + setIsAvartar(file[0]); + }} dropzoneClass={classes.AvatarDropZoneArea} dropzoneParagraphClass={ classes.AvatarDropzoneParagrap @@ -168,12 +328,14 @@ function Edit(props) { 'image/png', 'image/bmp', ]} - showPreviews={true} + // showPreviews={true} showPreviewsInDropzone={false} useChipsForPreview //사진이 아니라 이름으로 보여주기 위함 filesLimit={1} //파일 갯수 /> - +
diff --git a/src/routes/Mypage.js b/src/routes/Mypage.js index 5d2483c..2ef5cdc 100644 --- a/src/routes/Mypage.js +++ b/src/routes/Mypage.js @@ -1,8 +1,7 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import styled from 'styled-components'; import Mypost from '../components/Mypage/Mypost'; import { useStateValue } from '../StateProvider'; -import db from '../firebase'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; import { Avatar } from '@material-ui/core'; @@ -65,32 +64,27 @@ const IntroductionFont = styled.p` function Mypage() { const classes = useStyles(); const [{ user }] = useStateValue(); - const [userInfo, setUserInfo] = useStateValue(''); - useEffect(() => { - db.collection('users') - .doc(user.uid) - .get() - .then((doc) => { - setUserInfo(doc); - }); - }, []); - - // {console.log(userInfo)} - // {console.log(userInfo.user.background)} 배경 - // {console.log(userInfo.user.displayName)} 이름 - // {console.log(userInfo.user.email)} 이메일 - // {console.log(userInfo.user.introduction)} 소개 - // {console.log(userInfo.user.photoURL)} 아바타타{' '} const [isEditModalOpen, setIsEditModalOpen] = useState(false); - const onClose = () => { setIsEditModalOpen(false); }; + const [isAvartar, setIsAvartar] = useState(user.photoURL); + const [isBackground, setIsBackground] = useState(user.background); + const [isIntroduction, setIsIntroduction] = useState(user.introduction); return (
- + - +
{/*// */} - {userInfo.user.displayName} + {user.displayName}
@@ -154,5 +148,4 @@ function Mypage() { ); } - export default Mypage; diff --git a/src/routes/Register.js b/src/routes/Register.js index 8e36edb..d3d4a6d 100644 --- a/src/routes/Register.js +++ b/src/routes/Register.js @@ -48,6 +48,8 @@ function Register() { introduction: '인삿말이 없습니다', photoURL: user.photoURL, uid: user.uid, + AvartarFileName: '', + BackgroundFileName: '', }); db.collection('users') .doc(user.uid) From 89ffdb2888ba365fed509bd8ddce27719cc7a19e Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Thu, 3 Sep 2020 23:24:40 +0900 Subject: [PATCH 09/29] Add count Follower --- .../Detail/DetailFunction/Subscribe.js | 55 ++++++++++++++++--- src/components/Detail/DetailPage.js | 25 +++++---- src/components/Mypage/Edit.js | 2 - 3 files changed, 60 insertions(+), 22 deletions(-) diff --git a/src/components/Detail/DetailFunction/Subscribe.js b/src/components/Detail/DetailFunction/Subscribe.js index ee1014b..e939c22 100644 --- a/src/components/Detail/DetailFunction/Subscribe.js +++ b/src/components/Detail/DetailFunction/Subscribe.js @@ -26,17 +26,33 @@ function Subscribe(props) { const classes = useStyles(); const [{ user }] = useStateValue(); const [subscribed, setSubscribed] = useState(false); + const [SubscribeNumber, setSubscribeNumber] = useState(0); useEffect(() => { db.collection('subscribe') .where('userTo', '==', props.userTo) - .where('userFrom', '==', user.uid) - .onSnapshot((snapshot) => { - if (snapshot.empty) { - setSubscribed(false); + .get() + .then((doc) => { + if (doc.empty) { + setSubscribeNumber(0); } else { - setSubscribed(true); + setSubscribeNumber(doc.size); } }); + { + user && + user.uid && + db + .collection('subscribe') + .where('userTo', '==', props.userTo) + .where('userFrom', '==', user.uid) + .onSnapshot((snapshot) => { + if (snapshot.empty) { + setSubscribed(false); + } else { + setSubscribed(true); + } + }); + } }, []); const onSubscribe = () => { if (subscribed) { @@ -81,11 +97,34 @@ function Subscribe(props) { }); setSubscribed(true); } + db.collection('subscribe') + .where('userTo', '==', props.userTo) + .get() + .then((doc) => { + if (doc.empty) { + setSubscribeNumber(0); + } else { + setSubscribeNumber(doc.size); + } + }); }; return ( - + <> +

+ 팔로워 {SubscribeNumber} +

+ {user && user.uid && ( + + )} + ); } diff --git a/src/components/Detail/DetailPage.js b/src/components/Detail/DetailPage.js index ea6c476..1d53daa 100644 --- a/src/components/Detail/DetailPage.js +++ b/src/components/Detail/DetailPage.js @@ -74,6 +74,7 @@ export default function DetailPage(props) { `https://map.kakao.com/link/map/${props.address},${props.latitude},${props.longitude}` ); }; + useEffect(() => { if (props.id) { db.collection('posts') @@ -164,18 +165,18 @@ export default function DetailPage(props) { }} > {props.username} -

- 팔로워 {'223'} -

- {user && user.uid && ( - - )} + {/**/} + {/* 팔로워 {'223'}*/} + {/*

*/} + {/*{user && user.uid && (*/} + + {/*)}*/} {/* { - console.log(user); dispatch({ type: actionTypes.SET_USER, user: doc.data(), }); - console.log(user); }); props.setIsIntroduction(isIntroduction); alert('게시물이 수정되었습니다.'); From 242d48484ee09f3e516e6505e3a7e41aea042038 Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Fri, 4 Sep 2020 14:38:39 +0900 Subject: [PATCH 10/29] Update Avatar --- src/components/Banner/BestPicture.js | 13 +--- .../Detail/DetailFunction/Avartar.js | 61 +++++++++++++++++++ .../Detail/DetailFunction/Subscribe.js | 2 - src/components/Detail/DetailPage.js | 35 +++++------ src/components/MainArea/Picture.js | 13 +--- 5 files changed, 81 insertions(+), 43 deletions(-) create mode 100644 src/components/Detail/DetailFunction/Avartar.js diff --git a/src/components/Banner/BestPicture.js b/src/components/Banner/BestPicture.js index d502a71..a9e99f0 100644 --- a/src/components/Banner/BestPicture.js +++ b/src/components/Banner/BestPicture.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import DetailPage from '../Detail/DetailPage'; +import Avartar from '../Detail/DetailFunction/Avartar'; const LeftBottomContainer = styled.div` position: absolute; left: 6px; @@ -119,17 +120,7 @@ function BestPicture({ setIsModalOpen(true)}> - + {username} diff --git a/src/components/Detail/DetailFunction/Avartar.js b/src/components/Detail/DetailFunction/Avartar.js new file mode 100644 index 0000000..931d94f --- /dev/null +++ b/src/components/Detail/DetailFunction/Avartar.js @@ -0,0 +1,61 @@ +import React, { useEffect, useState } from 'react'; +import db from '../../../firebase'; +function Avartar(props) { + const [detailuser, setDetailUser] = useState(null); + useEffect(() => { + db.collection('users') + .doc(props.uid) + .get() + .then((doc) => { + setDetailUser(doc.data().photoURL); + }); + }, []); + if (props.Type === 'Detail') { + return ( + Avartarimage + ); + } else if (props.Type === 'Best') { + return ( + Avartarimage + ); + } else if (props.Type === 'MainArea') { + return ( + Avartarimage + ); + } +} + +export default Avartar; diff --git a/src/components/Detail/DetailFunction/Subscribe.js b/src/components/Detail/DetailFunction/Subscribe.js index 0bc1ee6..adcf345 100644 --- a/src/components/Detail/DetailFunction/Subscribe.js +++ b/src/components/Detail/DetailFunction/Subscribe.js @@ -3,8 +3,6 @@ import { useStateValue } from '../../../StateProvider'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; import db from '../../../firebase'; -import { actionTypes } from '../../../reducer'; -import firebase from 'firebase'; const useStyles = makeStyles((theme) => ({ FollowBtn: { color: '#FFFFFF', diff --git a/src/components/Detail/DetailPage.js b/src/components/Detail/DetailPage.js index 1d53daa..9ee4d70 100644 --- a/src/components/Detail/DetailPage.js +++ b/src/components/Detail/DetailPage.js @@ -33,9 +33,7 @@ import ChatInput from './DetailFunction/ChatInput'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Subscribe from './DetailFunction/Subscribe'; -import { useStateValue } from '../../StateProvider'; -import { Route } from 'react-router-dom'; -import Mypage from '../../routes/Mypage'; +import Avartar from './DetailFunction/Avartar'; const useStyles = makeStyles((theme) => ({ FollowBtn: { @@ -65,8 +63,6 @@ const useStyles = makeStyles((theme) => ({ })); export default function DetailPage(props) { const classes = useStyles(); - const [{ user }] = useStateValue(); - const [subscribe, setSubscribe] = useState(false); const [roomDetails, setRoomDetails] = useState(null); const [roomMessages, setRoomMessages] = useState([]); const openMap = () => { @@ -144,20 +140,21 @@ export default function DetailPage(props) { {props.heart} - Avartarimage + + {/**/} + {/* alt="Avartarimage"*/} + {/*/>*/}
- + {username} From 79c87564e0ebef25fe626f7a6633aceabdfb83ab Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Fri, 4 Sep 2020 14:54:47 +0900 Subject: [PATCH 11/29] Update FollowBtn --- src/components/Detail/DetailFunction/Subscribe.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/Detail/DetailFunction/Subscribe.js b/src/components/Detail/DetailFunction/Subscribe.js index adcf345..b9a722c 100644 --- a/src/components/Detail/DetailFunction/Subscribe.js +++ b/src/components/Detail/DetailFunction/Subscribe.js @@ -16,6 +16,7 @@ const useStyles = makeStyles((theme) => ({ boxSizing: 'border-box', borderRadius: '16px', marginTop: '10px', + background: 'black', }, })); //{user.displayName} 지금 유저이름 @@ -105,9 +106,17 @@ function Subscribe(props) { > 팔로워 {SubscribeNumber}

- {user && user.uid && ( - )} From 2f6e9557e28b71714a32926cc032977070618525 Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Fri, 4 Sep 2020 14:57:32 +0900 Subject: [PATCH 12/29] ReUpdate --- src/components/Detail/DetailFunction/Subscribe.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Detail/DetailFunction/Subscribe.js b/src/components/Detail/DetailFunction/Subscribe.js index b9a722c..5280034 100644 --- a/src/components/Detail/DetailFunction/Subscribe.js +++ b/src/components/Detail/DetailFunction/Subscribe.js @@ -112,11 +112,11 @@ function Subscribe(props) { onClick={onSubscribe} style={{ backgroundColor: `${ - subscribed ? '#ff534b' : '#000000' + subscribed ? '#000000' : '#ff534b' }`, }} > - {subscribed ? '팔로잉' : '팔로우'} + {subscribed ? '팔로우' : '팔로잉'} )} From b01bf04e2a86c476f756742e522e2f46838f874f Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Fri, 4 Sep 2020 17:27:12 +0900 Subject: [PATCH 13/29] Add like_inter --- public/images/Detail/Interesting.png | Bin 0 -> 1003 bytes public/images/Detail/ex_Interstring.png | Bin 0 -> 1318 bytes public/images/Detail/ex_like.png | Bin 0 -> 894 bytes public/images/Detail/like.png | Bin 0 -> 591 bytes .../Detail/DetailFunction/Like_Interest.js | 227 ++++++++++++++++++ src/components/Detail/DetailPage.js | 36 +-- src/components/MainArea/Picture.js | 49 ++-- 7 files changed, 273 insertions(+), 39 deletions(-) create mode 100644 public/images/Detail/Interesting.png create mode 100644 public/images/Detail/ex_Interstring.png create mode 100644 public/images/Detail/ex_like.png create mode 100644 public/images/Detail/like.png create mode 100644 src/components/Detail/DetailFunction/Like_Interest.js diff --git a/public/images/Detail/Interesting.png b/public/images/Detail/Interesting.png new file mode 100644 index 0000000000000000000000000000000000000000..a09b7ca3e17a6552f9c7dc38c33a74ff9169a096 GIT binary patch literal 1003 zcmVddH&Z5b$?14u`S_mO0ET~c6(Qnsi+)09CviLy~T!wjPa1JaR#=tBR#o0WT^8Q8)rCl z1z=lcm`Y83MFpU7r=f8bJ8BhIYq77@l*UCX^MZ7;F;pM`f1bg?L1!QkfLJVMyqI>k z7;wXPCxG#y(Wo)6u0at(NtjMHo!1VLj*gD|Q&UrF)I%f^0k_+&zu3$r9t+VoBJ|vN z0+x9!hLW#YEeSLw60ekG4FQe2wDU~8P$BYS_}X{udJ*X^D4z`osi2k?%|i1V7J?I<~bY=umXqO@lU)A(D=>(7tqqu zl2m)Es;Z!^t<9Lq?gT`4cQPV+N}V0g^0eU&it?DCrI*6Fmsl(0$_W8 zS-n8l+SMu-K)g{*5`=ar2Po-Pch7C-jKxod@pTBn)&V1btX|t8Xd4)iVN^H(TLL^{ zx^_ChSIF-`5kclA*j&uwUplYW_3QTZ7#vpj`%4Rve$6zYDny@!oGWtJQvVcNCjhMs;)!Cjj=9NEWHP1=;$EP) z6iN5zm57Maz?iYv{R*v4N4G&j+^1|dMwCv9kg;iv4Pqru>ZDN{NhVsLQw}ShjD&bPOV+*TcEhkRk-T#sLEGIoM{R#LM3J#`kpL z;|FLrqdY>{Kv@t%d{-7o%2rgDP`LIfy;YQ1GHwhh5^$;e6?;$Q2^iOBsMg;}=Wnf1 zQz%{ngAINHA{#}(Z=rgZN=t-dH{Mqp)DXeB5O-?U?BD4#!J7wm=*(-smod_a@&&*e z4++ll0bTr(-OC#}2)6`t1aP!&Qv>45sSCf6%bQ+aUiS3#^t{^D)pdDta`O2iByKyv z-*keHkB`5^dP74)I@>AG^u2JEJm(@7rnM(r@V!p8UY(x3xI>=j*0{63zyES7mGW|X zX=&+<-|x?KcX$8gF!eHkeQ*WukGJg3;o;%d`T6-~TW@`R-8(%!{ezPNwSM-He*7@E z3RrO_M;Of@amOGJ1)HgIVq(?_be=VX1 zx9#GT)$rbH6VkXQ%@uh4o3EX-sUREhKkxi%Pk>VPgb`;znk6e( zRU;ewgBcUBE*K;9aG&9l;4qRStAf&EUGoX2?|V&^Oz%Z`W5^W+!H@{3u1!u~5kr3FFq#kJ@U7-Lg&77h7RB*q zl!WwtuH;=&@oktVA~+AM_K2z{-1fanfvqY6c_QYMOXpMy;q*oH*fZs)*T2NCW2!Z( ceHpX-2c%5t+H)SRZU6uP07*qoM6N<$f+yo_&Hw-a literal 0 HcmV?d00001 diff --git a/public/images/Detail/ex_like.png b/public/images/Detail/ex_like.png new file mode 100644 index 0000000000000000000000000000000000000000..bd5553a1af8a5b2cb4d003254ebfc799f163b4a7 GIT binary patch literal 894 zcmV-^1A+XBP)}xH8`M2PkeY-f z*gKtBW9kryjftS&%ff1B_M0Ei%p%MHIi2F23O)frg%HXJP?UW{xYU}?kwUlNe)M4u z{y1L6LVBkZzSRUJktcwG$g`F%groCW@;JRQYHRxW&L#2=5^s zt-|qPJGr5fiiQoZCx;9Xf<9=dZfkpog-}+eUS&(q#u9Z<8@-|Ptz?Yg^-hg0got>7 zh`vtCYmK#k^3WQ7_Ih&f6VKc`k-mQ;2!qpSY$2+WifFq$@x(0nx)`}{FhKr z7}TB%Ba^5AQD-dQEgT>0Psm(1PwN(7Cn7ScKBp+g6$#07Diw(&_L?HKYB-)WYIkIBp zG7y*h?5XPnW1h)J}4;L zL{MaAoU`F?$boTKGKFRie4~e`q?m|Ngn&g@1LAvyha$9m^GD$uSOemFEmFVKLumCm zR0B!ExPYw+=021B0Gni=s~r<_imIYzcVLyk_&)4P?wLAsPaCa?ceppf3UJr-PB>vI z<3eld&7>V%JEvvN=ANmDIcr8%44dCO(%Ynm@f1*f?S8m?L}nF)qR}KgnMLFYnV3+r z>1~B}<`SPq&*?$SaR8t#BDRm8LWf8M~R2jY`Q;GYb*PIT^UJ7?A3j7|F@*IZKyG{#4Jz zkhXD8_9G8Ha2ZIRk+ML_zA&NTfqv1iFtcZph=+HXeH9n3O|BQFU@9({Jc7y#;MK`t z9Tr3`GSh?z(c!0wy9|+~$O!nI)nW~k#>zz6Or! Uu=HtzeEe_RU01z#HHR;0DSG>=8)RXoSwVTM!Wo z-ER5&5(2yIvR}8`nE@e!*V5g-gK~g`yC9MSL>~lwMtEGmI;lepdVYrRNKo=3vZdz> zODiC(Z(f}?N5|uEbBT&IYLq2j#4H?*I1n zc`M!KiLjwMw!i>K@HlgQ^6=CCD&HRkC^azR?}daC;SP|~m~;hEbP)=AdwV+o4M+s~ zYwYZyS8S7RGP;$d0vZ?KB76^TK~g05Nx^lf)7u621?;KxUx`t-p}orP4zaV6hjdiH z5>e;xojL~u9Hf;<1*#B0umq6kK(s(ypeO3^N^At2B`n<*ZL8;09n&T(1gz=E**g&4U)!-T0FRcc4G)E+0mEQO7T8f2oxv_#?rVkOdwm { + //포스트 별좋아요 수를 나타낸다 + db.collection('Like_Inter') + .where('postId', '==', props.postId) + .where('type', '==', 'Like') + .get() + .then((doc) => { + if (doc.empty) { + setLikeCount(0); + } else { + setLikeCount(doc.size); + } + }); + { + user && + user.uid && + db + .collection('Like_Inter') + .where('postId', '==', props.postId) + .where('user', '==', user.uid) + .where('type', '==', 'Like') + .onSnapshot((snapshot) => { + if (snapshot.empty) { + setLiked(false); + } else { + setLiked(true); + } + }); + } + }, []); + useEffect(() => { + //포스트 별좋아요 수를 나타낸다 + db.collection('Like_Inter') + .where('postId', '==', props.postId) + .where('type', '==', 'Interest') + .get() + .then((doc) => { + if (doc.empty) { + setInterstCount(0); + } else { + setInterstCount(doc.size); + } + }); + { + user && + user.uid && + db + .collection('Like_Inter') + .where('postId', '==', props.postId) + .where('user', '==', user.uid) + .where('type', '==', 'Interest') + .onSnapshot((snapshot) => { + if (snapshot.empty) { + setInterested(false); + } else { + setInterested(true); + } + }); + } + }, []); + ////////////////////////////////////////////// + const onHandleLike = () => { + if (liked) { + let collectionRef = db.collection('Like_Inter'); + collectionRef + .where('postId', '==', props.postId) + .where('user', '==', user.uid) + .where('type', '==', 'Like') + .get() + .then((snapshot) => { + snapshot.forEach((doc) => { + doc.ref + .delete() + .then(() => { + console.log('delete success'); + }) + .catch(function (err) { + console.log(err); + }); + }); + }) + .catch(function (err) { + console.log(err); + }); + setLiked(false); + } else { + //이미 구독중이 아니라면 + db.collection('Like_Inter').add({ + postId: props.postId, + user: user.uid, + type: 'Like', + }); + setLiked(true); + } + db.collection('Like_Inter') + .where('postId', '==', props.postId) + .where('type', '==', 'Like') + .where('user', '==', user.uid) + .get() + .then((doc) => { + if (doc.empty) { + setLikeCount(0); + } else { + setLikeCount(doc.size); + } + }); + }; + /////////////////////////////////////////////// + const onHandleInterest = () => { + if (interested) { + let collectionRef = db.collection('Like_Inter'); + collectionRef + .where('postId', '==', props.postId) + .where('user', '==', user.uid) + .where('type', '==', 'Interest') + .get() + .then((snapshot) => { + snapshot.forEach((doc) => { + doc.ref + .delete() + .then(() => { + console.log('delete success'); + }) + .catch(function (err) { + console.log(err); + }); + }); + }) + .catch(function (err) { + console.log(err); + }); + setInterested(false); + } else { + //이미 구독중이 아니라면 + db.collection('Like_Inter').add({ + postId: props.postId, + user: user.uid, + type: 'Interest', + }); + setInterested(true); + } + db.collection('Like_Inter') + .where('postId', '==', props.postId) + .where('type', '==', 'Interest') + .where('user', '==', user.uid) + + .get() + .then((doc) => { + if (doc.empty) { + setInterstCount(0); + } else { + setInterstCount(doc.size); + } + }); + }; + return ( +
+ + + {interstCount} + + {likeCount} +
+ ); +} + +export default LikeInterest; diff --git a/src/components/Detail/DetailPage.js b/src/components/Detail/DetailPage.js index 9ee4d70..08a5ccf 100644 --- a/src/components/Detail/DetailPage.js +++ b/src/components/Detail/DetailPage.js @@ -34,6 +34,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Subscribe from './DetailFunction/Subscribe'; import Avartar from './DetailFunction/Avartar'; +import LikeInterest from './DetailFunction/Like_Interest'; const useStyles = makeStyles((theme) => ({ FollowBtn: { @@ -122,23 +123,26 @@ export default function DetailPage(props) { borderRadius: '20px', }} /> - - - {props.novelty} - - {props.heart} + + + {/**/} + {/* */} + {/* {props.novelty}*/} + {/* */} + {/* {props.heart}*/} + {/**/} {/* - setIsModalOpen(true)} ref={ref}> + - + setIsModalOpen(true)} + ref={ref} + src={imageUrl} + alt="" + /> {username} - - - {novelty} - - {heart} - + + {/**/} + {/* */} + {/* {novelty}*/} + {/* */} + {/* {heart}*/} + {/**/} Date: Fri, 4 Sep 2020 20:03:12 +0900 Subject: [PATCH 14/29] Update --- .../Detail/DetailFunction/Avartar.js | 16 ++++++++++++ .../Detail/DetailFunction/ChatInput.js | 1 + .../Detail/DetailFunction/Message.js | 26 ++++++++++--------- src/components/Detail/DetailPage.js | 11 ++++++-- 4 files changed, 40 insertions(+), 14 deletions(-) diff --git a/src/components/Detail/DetailFunction/Avartar.js b/src/components/Detail/DetailFunction/Avartar.js index 931d94f..5bc15cc 100644 --- a/src/components/Detail/DetailFunction/Avartar.js +++ b/src/components/Detail/DetailFunction/Avartar.js @@ -55,6 +55,22 @@ function Avartar(props) { alt="Avartarimage" /> ); + } else if (props.Type === 'comment') { + return ( + + ); } } diff --git a/src/components/Detail/DetailFunction/ChatInput.js b/src/components/Detail/DetailFunction/ChatInput.js index 247e56f..5cbd5e6 100644 --- a/src/components/Detail/DetailFunction/ChatInput.js +++ b/src/components/Detail/DetailFunction/ChatInput.js @@ -28,6 +28,7 @@ function ChatInput(props) { timestamp: firebase.firestore.FieldValue.serverTimestamp(), user: user.displayName, userimage: user.photoURL, + uid: user.uid, }); } } diff --git a/src/components/Detail/DetailFunction/Message.js b/src/components/Detail/DetailFunction/Message.js index bb7b84d..776cb0f 100644 --- a/src/components/Detail/DetailFunction/Message.js +++ b/src/components/Detail/DetailFunction/Message.js @@ -1,16 +1,16 @@ import React from 'react'; import styled from 'styled-components'; - -const Avartar = styled.div` - border-radius: 20px; - width:40px; - height:40px; - background-image: url(${(props) => props.bg}); - background-size: cover; - background-position: center center; - background repeat: no-repeat; - margin-right:20px; -`; +import Avartar from './Avartar'; +// const Avartar = styled.div` +// border-radius: 20px; +// width:40px; +// height:40px; +// background-image: url(${(props) => props.bg}); +// background-size: cover; +// background-position: center center; +// background repeat: no-repeat; +// margin-right:20px; +// `; const UserMessage = styled.p` font-family: Noto Sans KR; font-style: normal; @@ -30,8 +30,10 @@ function Message(props) { alignItems: 'center', }} > - + {/**/} + {/**/} + {props.user} diff --git a/src/components/Detail/DetailPage.js b/src/components/Detail/DetailPage.js index 08a5ccf..b974c8a 100644 --- a/src/components/Detail/DetailPage.js +++ b/src/components/Detail/DetailPage.js @@ -96,7 +96,7 @@ export default function DetailPage(props) { maxWidth={false} open={props.open} onClose={props.close} - aria-labelledby="form-dialog-title" + // aria-labelledby="form-dialog-title" PaperProps={{ style: { backgroundColor: 'rgba(64, 64, 64, 0.7)', @@ -363,7 +363,13 @@ export default function DetailPage(props) { > {roomMessages.map( ( - { message, timestamp, user, userimage }, + { + message, + timestamp, + user, + userimage, + uid, + }, index ) => ( ) )} From 9307e3d1f8ca722cc84aa47964cea10802c0e37d Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Mon, 7 Sep 2020 14:25:30 +0900 Subject: [PATCH 15/29] Update Mypage --- src/components/App.js | 2 + .../Detail/DetailFunction/Avartar.js | 4 + .../Detail/DetailFunction/Like_Interest.js | 4 +- src/components/Detail/DetailPage.js | 1 - src/components/Mypage/Mypost.js | 90 +++++++++---------- src/components/Mypage/Picture.js | 30 ++++--- src/components/PickBox/PickBox.js | 7 ++ src/routes/FollowPage.js | 7 ++ 8 files changed, 80 insertions(+), 65 deletions(-) create mode 100644 src/routes/FollowPage.js diff --git a/src/components/App.js b/src/components/App.js index b8b1f72..857118c 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -7,6 +7,7 @@ import Login from '../routes/Login'; import Area from '../routes/Area'; import Register from '../routes/Register'; import Mypage from '../routes/Mypage'; +import FollowPage from '../routes/FollowPage'; import { useStateValue } from '../StateProvider'; const GlobalStyle = createGlobalStyle` @@ -30,6 +31,7 @@ function App() { + {user && user.uid && ( { if (doc.empty) { @@ -159,8 +159,6 @@ function LikeInterest(props) { db.collection('Like_Inter') .where('postId', '==', props.postId) .where('type', '==', 'Interest') - .where('user', '==', user.uid) - .get() .then((doc) => { if (doc.empty) { diff --git a/src/components/Detail/DetailPage.js b/src/components/Detail/DetailPage.js index b974c8a..daf26b7 100644 --- a/src/components/Detail/DetailPage.js +++ b/src/components/Detail/DetailPage.js @@ -15,7 +15,6 @@ import { LeftBottomContainer, TextBox, LeftTopContainer, - Countbox, RightBottomContainer, RightTopContainer, CommentBox, diff --git a/src/components/Mypage/Mypost.js b/src/components/Mypage/Mypost.js index 6ee1efc..f4be2df 100644 --- a/src/components/Mypage/Mypost.js +++ b/src/components/Mypage/Mypost.js @@ -38,7 +38,6 @@ const Mood = styled.li` box-sizing: border-box; color: ${(props) => (props.active ? '#ff534b' : '')}; cursor: pointer; - font-style: normal; font-weight: 300; font-size: 26px; @@ -60,12 +59,14 @@ const Container = styled.div` export default () => { const [posts, setPosts] = useState([]); + const [postList, setPostList] = useState([]); const [last, setLast] = useState(null); const [mood, setMood] = useState(''); const [hasMore, setHasMore] = useState(true); const moods = ['내가 올린 사진', '신기해요', '찜목록']; const [{ user }] = useStateValue(); useEffect(() => { + setMood('내가 올린 사진'); const unsubscribe = db .collection('posts') .where('username', '==', user.displayName) @@ -82,57 +83,53 @@ export default () => { return () => { unsubscribe(); }; - }, [user.displayName]); - - const next = () => { - if (last) { + }, []); + + const onChagnePost = (e) => { + let newPostList = []; + setPosts([]); + setMood(e.currentTarget.innerText); + const unsubscribe = db; + if (e.currentTarget.innerText === '내가 올린 사진') { db.collection('posts') - // .orderBy('timestamp', 'desc') .where('username', '==', user.displayName) - .startAfter(last) - .limit(10) .onSnapshot((snapshot) => { - if (snapshot.empty) { - setHasMore(false); - - return; - } - setPosts([ - ...posts, - ...snapshot.docs.map((doc) => ({ + setPosts( + snapshot.docs.map((doc) => ({ id: doc.id, post: doc.data(), - })), - ]); + })) + ); setLast(snapshot.docs[snapshot.docs.length - 1]); }); + } else { + let Like_Inter; + { + if (e.currentTarget.innerText === '신기해요') + Like_Inter = 'Interest'; + else Like_Inter = 'Like'; + } + { + db.collection('Like_Inter') + .where('user', '==', user.uid) + .where('type', '==', Like_Inter) + .onSnapshot((snapshot) => { + newPostList = [...postList]; + snapshot.docs.map((doc) => { + db.collection('posts') + .doc(doc.data().postId) + .onSnapshot((snapshot) => { + newPostList.push({ + id: snapshot.id, + post: snapshot.data(), + }); + setPosts([...newPostList]); + }); + }); + }); + } } }; - - const moodNext = () => { - if (last) { - db.collection('posts') - // .orderBy('timestamp', 'desc') - .where('username', '==', user.displayName) - .startAfter(last) - .limit(10) - .onSnapshot((snapshot) => { - if (snapshot.empty) { - setHasMore(false); - return; - } - setPosts([ - ...posts, - ...snapshot.docs.map((doc) => ({ - id: doc.id, - post: doc.data(), - })), - ]); - setLast(snapshot.docs[snapshot.docs.length - 1]); - }); - } - }; - return ( @@ -141,18 +138,17 @@ export default () => { {moods.map((moodText) => ( {moodText} ))} - setHasMore(false)} hasMore={hasMore} loader={} > diff --git a/src/components/Mypage/Picture.js b/src/components/Mypage/Picture.js index 6144ecc..7ef9711 100644 --- a/src/components/Mypage/Picture.js +++ b/src/components/Mypage/Picture.js @@ -6,6 +6,7 @@ import makeStyles from '@material-ui/core/styles/makeStyles'; import ButtonGroup from '@material-ui/core/ButtonGroup'; import db from '../../firebase'; import UploadPage from '../Upload/UploadPage'; +import LikeInterest from '../Detail/DetailFunction/Like_Interest'; const useStyles = makeStyles((theme) => ({ ButtonGroup: { width: '150px', @@ -198,20 +199,21 @@ export default ({ alt="" onClick={() => setIsModalOpen(true)} /> - - - {novelty} - - {heart} - + + {/**/} + {/* */} + {/* {novelty}*/} + {/* */} + {/* {heart}*/} + {/**/}
@@ -103,6 +107,9 @@ function PickBox() { background: 'linear-gradient(150.6deg, #851095 -11.03%, #821297 -11.03%, #A75DEA 42.9%, #6159DE 86.99%)', }} + onClick={() => { + user && user.uid && history.push('/Follow'); + }} > 팔로워 PICK
- {/**/} + + ); } diff --git a/src/routes/Mypage.js b/src/routes/Mypage.js index 2ef5cdc..08149dc 100644 --- a/src/routes/Mypage.js +++ b/src/routes/Mypage.js @@ -144,7 +144,7 @@ function Mypage() { - + ); } From 01cab2ad8862f7ef2b68ea1bac0b12d007aa5ae2 Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Mon, 7 Sep 2020 23:36:30 +0900 Subject: [PATCH 20/29] Update --- src/components/Mypage/Mypost.js | 4 +- src/components/Mypage/Picture.js | 84 ++++++++++++++++---------------- src/routes/FrinedsPage.js | 8 ++- 3 files changed, 51 insertions(+), 45 deletions(-) diff --git a/src/components/Mypage/Mypost.js b/src/components/Mypage/Mypost.js index 7d0d9e5..99f9062 100644 --- a/src/components/Mypage/Mypost.js +++ b/src/components/Mypage/Mypost.js @@ -89,10 +89,9 @@ export default (props) => { const onChagnePost = (e) => { let newPostList = []; setPosts([]); - setCategory(e.currentTarget.innerText); const unsubscribe = db; - if (e.currentTarget.innerText === '내가 올린 사진' || '최근') { + if (e.currentTarget.innerText === '내가 올린 사진') { db.collection('posts') .where('uid', '==', props.uid) .onSnapshot((snapshot) => { @@ -157,6 +156,7 @@ export default (props) => { {posts.map(({ post, id }) => ( ({ ButtonGroup: { width: '150px', @@ -73,7 +75,6 @@ const Description = styled.p` const ImageContainer = styled.div` position: relative; - &: hover { ${RightTopContainer} { visibility: visible; @@ -116,10 +117,11 @@ export default ({ username, address, id, + videoId, }) => { const [isModalOpen, setIsModalOpen] = useState(false); const [IsUpdateModalOpen, setIsUpdateModalOpen] = useState(false); - + const [{ user }] = useStateValue(); const onClose = () => { setIsModalOpen(false); setIsUpdateModalOpen(false); @@ -191,7 +193,6 @@ export default ({ username={username} address={address} /> - */} {/* {heart}*/} {/**/} - - - - - {/**/} - - - + + {/**/} + + + + )} setIsModalOpen(true)}> {title} diff --git a/src/routes/FrinedsPage.js b/src/routes/FrinedsPage.js index ab86bc0..71eedf0 100644 --- a/src/routes/FrinedsPage.js +++ b/src/routes/FrinedsPage.js @@ -62,6 +62,7 @@ const IntroductionFont = styled.p` `; function FriendsPage(props) { const [userinfo, setUserInfo] = useState(''); + const videoId = props.match.params.friendid; ///URL 에서 가져옴 useEffect(() => { const videoId = props.match.params.friendid; ///URL 에서 가져옴 db.collection('users') @@ -127,8 +128,11 @@ function FriendsPage(props) { - - + ); } From dc509ed71837fc874e99362945bf00d0802d9b50 Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Mon, 7 Sep 2020 23:55:40 +0900 Subject: [PATCH 21/29] Reupdate --- src/components/Mypage/Mypost.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Mypage/Mypost.js b/src/components/Mypage/Mypost.js index 8a7ff13..f21e362 100644 --- a/src/components/Mypage/Mypost.js +++ b/src/components/Mypage/Mypost.js @@ -60,12 +60,11 @@ export default (props) => { const [posts, setPosts] = useState([]); const [postList, setPostList] = useState([]); const [last, setLast] = useState(null); - const [category, setCategory] = useState('내가 올린 사진'); + const [category, setCategory] = useState(''); const [hasMore, setHasMore] = useState(true); const lists = ['내가 올린 사진', '신기해요', '찜목록']; useEffect(() => { if (props.uid) { - setCategory('내가 올린 사진'); const unsubscribe = db .collection('posts') .where('uid', '==', props.uid) @@ -90,7 +89,7 @@ export default (props) => { setPosts([]); setCategory(e.currentTarget.innerText); const unsubscribe = db; - if (e.currentTarget.innerText === '내가 올린 사진' || '최근') { + if (e.currentTarget.innerText === '내가 올린 사진') { db.collection('posts') .where('uid', '==', props.uid) .onSnapshot((snapshot) => { @@ -155,7 +154,6 @@ export default (props) => { {posts.map(({ post, id }) => ( Date: Tue, 8 Sep 2020 17:15:01 +0900 Subject: [PATCH 22/29] Update_mypage_followpage --- package-lock.json | 11 ++- package.json | 1 + public/LogoBig.png | Bin 0 -> 9564 bytes public/index.html | 2 +- .../Detail/DetailFunction/Avartar.js | 42 +++++++-- src/components/Mypage/Mypost.js | 22 ++++- src/components/Mypage/Picture.js | 85 +++++++++--------- src/routes/FollowPage.js | 1 + src/routes/FrinedsPage.js | 13 +-- yarn.lock | 2 +- 10 files changed, 116 insertions(+), 63 deletions(-) create mode 100644 public/LogoBig.png diff --git a/package-lock.json b/package-lock.json index 0706232..7a0f69e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4076,9 +4076,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001109", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001109.tgz", - "integrity": "sha512-4JIXRodHzdS3HdK8nSgIqXYLExOvG+D2/EenSvcub2Kp3QEADjo2v2oUn5g0n0D+UNwG9BtwKOyGcSq2qvQXvQ==" + "version": "1.0.30001124", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001124.tgz", + "integrity": "sha512-zQW8V3CdND7GHRH6rxm6s59Ww4g/qGWTheoboW9nfeMg7sUoopIfKCcNZUjwYRCOrvereh3kwDpZj4VLQ7zGtA==" }, "capture-exit": { "version": "2.0.0", @@ -11825,6 +11825,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz", "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==" }, + "react-flip-move": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-flip-move/-/react-flip-move-3.0.4.tgz", + "integrity": "sha512-HyUVv9g3t/BS7Yz9HgrtYSWyRNdR2F81nkj+C5iRY675AwlqCLB5JU9mnZWg0cdVz7IM4iquoyZx70vzZv3Z8Q==" + }, "react-infinite-scroll-component": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-5.0.5.tgz", diff --git a/package.json b/package.json index d29048b..587d6bc 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-dom": "^16.13.1", "react-flip-move": "^3.0.4", "react-infinite-scroll-component": "^5.0.5", + "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "styled-components": "^5.1.1" diff --git a/public/LogoBig.png b/public/LogoBig.png new file mode 100644 index 0000000000000000000000000000000000000000..74287013cf9107cd85eba4ace3ad982425c2cc3b GIT binary patch literal 9564 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 literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html index 8d18f84..12c0b6e 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + { db.collection('users') @@ -20,7 +22,13 @@ function Avartar(props) { }, []); if (props.Type === 'Detail') { return ( - + + + + + { + const { friendid } = useParams(); const [posts, setPosts] = useState([]); const [postList, setPostList] = useState([]); const [last, setLast] = useState(null); const [category, setCategory] = useState(''); const [hasMore, setHasMore] = useState(true); - const lists = ['내가 올린 사진', '신기해요', '찜목록']; + let lists = ['내가 올린 사진', '신기해요', '찜목록']; + let Friendlists = ['최신', '신기해요', '찜목록']; + const [{ user }] = useStateValue(); useEffect(() => { if (props.uid) { + { + user && user.uid && user.uid === props.uid + ? setCategory('내가 올린 사진') + : setCategory('최신'); + } + const unsubscribe = db .collection('posts') .where('uid', '==', props.uid) @@ -89,7 +99,10 @@ export default (props) => { setPosts([]); setCategory(e.currentTarget.innerText); const unsubscribe = db; - if (e.currentTarget.innerText === '내가 올린 사진') { + if ( + e.currentTarget.innerText === '내가 올린 사진' || + e.currentTarget.innerText === '최신' + ) { db.collection('posts') .where('uid', '==', props.uid) .onSnapshot((snapshot) => { @@ -134,7 +147,10 @@ export default (props) => { 게시물 - {lists.map((categoryText) => ( + {(user && user.uid && user.uid === props.uid + ? lists + : Friendlists + ).map((categoryText) => ( ({ ButtonGroup: { width: '150px', @@ -117,8 +117,8 @@ export default ({ username, address, id, - videoId, }) => { + const location = useLocation(); const [isModalOpen, setIsModalOpen] = useState(false); const [IsUpdateModalOpen, setIsUpdateModalOpen] = useState(false); const [{ user }] = useStateValue(); @@ -215,46 +215,49 @@ export default ({ {/* />*/} {/* {heart}*/} {/**/} - {user && user.uid && videoId === user.uid && ( - - - - {/**/} - - - - )} + + {/**/} + + + + )} setIsModalOpen(true)}> {title} diff --git a/src/routes/FollowPage.js b/src/routes/FollowPage.js index 6f15280..f8d9722 100644 --- a/src/routes/FollowPage.js +++ b/src/routes/FollowPage.js @@ -215,6 +215,7 @@ function FollowPage() { if (doc !== undefined) return ( diff --git a/src/routes/FrinedsPage.js b/src/routes/FrinedsPage.js index f7a92a4..a43215a 100644 --- a/src/routes/FrinedsPage.js +++ b/src/routes/FrinedsPage.js @@ -5,6 +5,7 @@ import { useStateValue } from '../StateProvider'; import { makeStyles } from '@material-ui/core/styles'; import { Avatar } from '@material-ui/core'; import db from '../firebase'; +import { useParams } from 'react-router'; const useStyles = makeStyles((theme) => ({ Edit: { width: '75px', @@ -61,14 +62,12 @@ const IntroductionFont = styled.p` color: #ffffff; `; function FriendsPage(props) { + const { friendid } = useParams(); const [userinfo, setUserInfo] = useState(''); - const videoId = props.match.params.friendid; ///URL 에서 가져옴 - useEffect(() => { - const videoId = props.match.params.friendid; ///URL 에서 가져옴 db.collection('users') - .doc(videoId) + .doc(friendid) .get() .then((doc) => { setUserInfo(doc.data()); @@ -130,11 +129,7 @@ function FriendsPage(props) { - + ); } diff --git a/yarn.lock b/yarn.lock index 1997960..38c4976 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9645,7 +9645,7 @@ react-router-dom@^5.2.0: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-router@5.2.0: +react-router@5.2.0, react-router@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293" integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw== From 8971fd8b112d06886bb4f2c52188a50f1c548c0b Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Tue, 8 Sep 2020 17:57:58 +0900 Subject: [PATCH 23/29] Update FriendPage --- .../Detail/DetailFunction/Avartar.js | 10 +-- .../Detail/DetailFunction/Subscribe.js | 79 +++++++++++++------ src/components/Mypage/Picture.js | 2 +- src/routes/FrinedsPage.js | 3 +- 4 files changed, 64 insertions(+), 30 deletions(-) diff --git a/src/components/Detail/DetailFunction/Avartar.js b/src/components/Detail/DetailFunction/Avartar.js index 6988287..78dd519 100644 --- a/src/components/Detail/DetailFunction/Avartar.js +++ b/src/components/Detail/DetailFunction/Avartar.js @@ -25,7 +25,7 @@ function Avartar(props) { @@ -51,7 +51,7 @@ function Avartar(props) { @@ -74,7 +74,7 @@ function Avartar(props) { @@ -97,7 +97,7 @@ function Avartar(props) { @@ -122,7 +122,7 @@ function Avartar(props) { diff --git a/src/components/Detail/DetailFunction/Subscribe.js b/src/components/Detail/DetailFunction/Subscribe.js index 5280034..b80e957 100644 --- a/src/components/Detail/DetailFunction/Subscribe.js +++ b/src/components/Detail/DetailFunction/Subscribe.js @@ -18,6 +18,19 @@ const useStyles = makeStyles((theme) => ({ marginTop: '10px', background: 'black', }, + Follow: { + color: '#FFFFFF', + border: '2px solid #FF534B', + height: '45px', + width: '112px', + fontWeight: 500, + fontSize: '24px', + lineHeight: '35px', + boxSizing: 'border-box', + borderRadius: '30px', + marginTop: '10px', + background: 'black', + }, })); //{user.displayName} 지금 유저이름 //{prop.userTo} post 유저이름 @@ -95,32 +108,52 @@ function Subscribe(props) { } }); }; - return ( - <> -

- 팔로워 {SubscribeNumber} -

- {user && user.uid && user.uid !== props.userTo && ( - + )} + + ); + } else { + return ( + <> +

- {subscribed ? '팔로우' : '팔로잉'} - - )} - - ); + 팔로워 {SubscribeNumber} +

+ {user && user.uid && user.uid !== props.userTo && ( + + )} + + ); + } } export default Subscribe; diff --git a/src/components/Mypage/Picture.js b/src/components/Mypage/Picture.js index 53be9c3..228db32 100644 --- a/src/components/Mypage/Picture.js +++ b/src/components/Mypage/Picture.js @@ -218,7 +218,7 @@ export default ({ {/**/} {user && user.uid && - location.pathname === `/user/:${user.uid}` && ( + location.pathname === `/user/${user.uid}` && ( ({ Edit: { width: '75px', @@ -106,6 +106,7 @@ function FriendsPage(props) { }} /> {userinfo.displayName} +
Date: Tue, 8 Sep 2020 20:12:48 +0900 Subject: [PATCH 24/29] Update --- src/components/Banner/BestPicture.js | 31 +++++++++---------- .../Detail/DetailFunction/Like_Interest.js | 22 ++++++++++--- src/components/Mypage/Edit.js | 6 ++-- src/routes/Area.js | 30 +++++++++++++++++- 4 files changed, 64 insertions(+), 25 deletions(-) diff --git a/src/components/Banner/BestPicture.js b/src/components/Banner/BestPicture.js index a9e99f0..b9c8d10 100644 --- a/src/components/Banner/BestPicture.js +++ b/src/components/Banner/BestPicture.js @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import DetailPage from '../Detail/DetailPage'; import Avartar from '../Detail/DetailFunction/Avartar'; +import LikeInterest from '../Detail/DetailFunction/Like_Interest'; const LeftBottomContainer = styled.div` position: absolute; left: 6px; @@ -26,7 +27,6 @@ const RightTopContainer = styled.div` right: 6px; display: flex; align-items: center; - visibility: hidden; `; const Image = styled.img` @@ -52,9 +52,7 @@ const ImageContainer = styled.div` ${RightBottomContainer} { visibility: visible; } - ${RightTopContainer} { - visibility: visible; - } + ${Image} { opacity: 0.9; transition: opacity 450ms ease-out; @@ -124,18 +122,19 @@ function BestPicture({ {username} - - {novelty} - - {heart} + + {/**/} + {/*{novelty}*/} + {/**/} + {/*{heart}*/} {interstCount} diff --git a/src/routes/Area.js b/src/routes/Area.js index 4a6bcfa..042a145 100644 --- a/src/routes/Area.js +++ b/src/routes/Area.js @@ -7,6 +7,7 @@ import Picture from '../components/MainArea/Picture'; import styled from 'styled-components'; import DefaultArea from './DefaultArea'; import FlipMove from 'react-flip-move'; +import DetailPage from '../components/Detail/DetailPage'; const Container = styled.div` position: relative; @@ -209,16 +210,43 @@ function Area() { setLast(snapshot.docs[snapshot.docs.length - 1]); }); }; + const [isModalOpen, setIsModalOpen] = useState(false); + const onClose = () => { + setIsModalOpen(false); + }; return ( <> {posts[0] && (
+ {term}의 여행지들 - 배경 리뷰 보기 + setIsModalOpen(true)}> + 배경 리뷰 보기 + From fe2531f8aaa6272e1c6e024a30e59234049a983b Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Wed, 9 Sep 2020 14:38:07 +0900 Subject: [PATCH 25/29] test --- src/components/Banner/BestPicture.js | 12 ---- .../Detail/DetailFunction/Like_Interest.js | 68 +++++++++---------- .../Detail/DetailFunction/Message.js | 8 --- .../Detail/DetailFunction/Subscribe.js | 32 ++++----- src/components/Detail/DetailPage.js | 60 +--------------- src/components/MainArea/Picture.js | 26 ------- src/components/Mypage/Edit.js | 10 +-- src/components/Mypage/Mypost.js | 21 ++---- src/components/Mypage/Picture.js | 29 +------- .../Upload/UploadFunction/Atmosphere.js | 2 +- .../Upload/UploadFunction/Rating.js | 2 +- .../Upload/UploadFunction/advertisement.js | 2 +- src/components/Upload/UploadPage.js | 16 +---- src/routes/DefaultArea.js | 1 - src/routes/FollowPage.js | 1 - src/routes/FrinedsPage.js | 16 ----- src/routes/Mypage.js | 2 +- 17 files changed, 68 insertions(+), 240 deletions(-) diff --git a/src/components/Banner/BestPicture.js b/src/components/Banner/BestPicture.js index b9c8d10..7697a11 100644 --- a/src/components/Banner/BestPicture.js +++ b/src/components/Banner/BestPicture.js @@ -123,18 +123,6 @@ function BestPicture({ - {/**/} - {/*{novelty}*/} - {/**/} - {/*{heart}*/} { //포스트 별좋아요 수를 나타낸다 db.collection('Like_Inter') @@ -28,22 +27,21 @@ function LikeInterest(props) { setLikeCount(doc.size); } }); - { - user && - user.uid && - db - .collection('Like_Inter') - .where('postId', '==', props.postId) - .where('user', '==', user.uid) - .where('type', '==', 'Like') - .onSnapshot((snapshot) => { - if (snapshot.empty) { - setLiked(false); - } else { - setLiked(true); - } - }); - } + + user && + user.uid && + db + .collection('Like_Inter') + .where('postId', '==', props.postId) + .where('user', '==', user.uid) + .where('type', '==', 'Like') + .onSnapshot((snapshot) => { + if (snapshot.empty) { + setLiked(false); + } else { + setLiked(true); + } + }); }, []); useEffect(() => { //포스트 별좋아요 수를 나타낸다 @@ -58,24 +56,22 @@ function LikeInterest(props) { setInterstCount(doc.size); } }); - { - user && - user.uid && - db - .collection('Like_Inter') - .where('postId', '==', props.postId) - .where('user', '==', user.uid) - .where('type', '==', 'Interest') - .onSnapshot((snapshot) => { - if (snapshot.empty) { - setInterested(false); - } else { - setInterested(true); - } - }); - } + + user && + user.uid && + db + .collection('Like_Inter') + .where('postId', '==', props.postId) + .where('user', '==', user.uid) + .where('type', '==', 'Interest') + .onSnapshot((snapshot) => { + if (snapshot.empty) { + setInterested(false); + } else { + setInterested(true); + } + }); }, []); - ////////////////////////////////////////////// const onHandleLike = () => { if (liked) { let collectionRef = db.collection('Like_Inter'); @@ -89,7 +85,7 @@ function LikeInterest(props) { doc.ref .delete() .then(() => { - console.log('delete success'); + // console.log('delete success'); }) .catch(function (err) { console.log(err); @@ -136,7 +132,7 @@ function LikeInterest(props) { doc.ref .delete() .then(() => { - console.log('delete success'); + // console.log('delete success'); }) .catch(function (err) { console.log(err); diff --git a/src/components/Detail/DetailFunction/Message.js b/src/components/Detail/DetailFunction/Message.js index 776cb0f..d01b6eb 100644 --- a/src/components/Detail/DetailFunction/Message.js +++ b/src/components/Detail/DetailFunction/Message.js @@ -30,9 +30,6 @@ function Message(props) { alignItems: 'center', }} > - {/**/} - {/**/} - {props.user} @@ -40,11 +37,6 @@ function Message(props) { {props.message} - {/*

*/} - {/* {props.user}*/} - {/* {new Date(props.timestamp?.toDate()).toUTCString()}*/} - {/*

*/} - {/*

{props.message}

*/}
); } diff --git a/src/components/Detail/DetailFunction/Subscribe.js b/src/components/Detail/DetailFunction/Subscribe.js index b80e957..c5d7940 100644 --- a/src/components/Detail/DetailFunction/Subscribe.js +++ b/src/components/Detail/DetailFunction/Subscribe.js @@ -3,6 +3,7 @@ import { useStateValue } from '../../../StateProvider'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; import db from '../../../firebase'; + const useStyles = makeStyles((theme) => ({ FollowBtn: { color: '#FFFFFF', @@ -50,21 +51,20 @@ function Subscribe(props) { setSubscribeNumber(doc.size); } }); - { - user && - user.uid && - db - .collection('subscribe') - .where('userTo', '==', props.userTo) - .where('userFrom', '==', user.uid) - .onSnapshot((snapshot) => { - if (snapshot.empty) { - setSubscribed(false); - } else { - setSubscribed(true); - } - }); - } + + user && + user.uid && + db + .collection('subscribe') + .where('userTo', '==', props.userTo) + .where('userFrom', '==', user.uid) + .onSnapshot((snapshot) => { + if (snapshot.empty) { + setSubscribed(false); + } else { + setSubscribed(true); + } + }); }, []); const onSubscribe = () => { if (subscribed) { @@ -78,7 +78,7 @@ function Subscribe(props) { doc.ref .delete() .then(() => { - console.log('delete success'); + //console.log('delete success'); }) .catch(function (err) { console.log(err); diff --git a/src/components/Detail/DetailPage.js b/src/components/Detail/DetailPage.js index daf26b7..c95b62f 100644 --- a/src/components/Detail/DetailPage.js +++ b/src/components/Detail/DetailPage.js @@ -86,7 +86,7 @@ export default function DetailPage(props) { ); }, [props.id]); const executeOnClick = (isExpanded) => { - console.log(isExpanded); + // console.log(isExpanded); }; return ( @@ -105,13 +105,11 @@ export default function DetailPage(props) { }, }} > - {/*최악의 세대*/} - {/* 이곳에 짱큰 이미지 넣어주시면 됩니다. */} {'사진'} - {/**/} - {/* */} - {/* {props.novelty}*/} - {/* */} - {/* {props.heart}*/} - {/**/} - {/**/} - {/* alt="Avartarimage"*/} - {/*/>*/}
{props.username} - {/**/} - {/* 팔로워 {'223'}*/} - {/*

*/} - {/*{user && user.uid && (*/} - - {/*)}*/} - {/**/} - {/* {subscribe*/} - {/* ? 'subscribed'*/} - {/* : '팔로우'}*/} - {/**/}
diff --git a/src/components/MainArea/Picture.js b/src/components/MainArea/Picture.js index 734e739..d57327e 100644 --- a/src/components/MainArea/Picture.js +++ b/src/components/MainArea/Picture.js @@ -22,15 +22,6 @@ const RightBottomContainer = styled.div` align-items: center; visibility: hidden; `; - -const RightTopContainer = styled.div` - position: absolute; - top: 15px; - right: 12px; - display: flex; - align-items: center; -`; - const Image = styled.img` width: 100%; border-radius: 20px; @@ -150,23 +141,6 @@ const Picture = forwardRef( {username} - {/**/} - {/* */} - {/* {novelty}*/} - {/* */} - {/* {heart}*/} - {/**/} { props.setIsAvartar(url); - console.log('Avartar success', temp); + //console.log('Avartar success', temp); db.collection('users') .doc(user.uid) .get() @@ -175,7 +175,7 @@ function Edit(props) { desertRef .delete() .then(function () { - console.log('백그라운드삭제성공'); + //console.log('백그라운드삭제성공'); }) .catch(function (error) { console.log(error); @@ -207,7 +207,7 @@ function Edit(props) { }) .then((temp) => { props.setIsBackground(url); - console.log('background success', temp); + //console.log('background success', temp); db.collection('users') .doc(user.uid) .get() @@ -227,7 +227,7 @@ function Edit(props) { introduction: isIntroduction, }) .then((temp) => { - console.log('success', temp); + //console.log('success', temp); }); db.collection('users') .doc(user.uid) diff --git a/src/components/Mypage/Mypost.js b/src/components/Mypage/Mypost.js index 9bb1300..8210515 100644 --- a/src/components/Mypage/Mypost.js +++ b/src/components/Mypage/Mypost.js @@ -6,8 +6,6 @@ import Loader from '../MainArea/Loader'; import styled from 'styled-components'; import '../MainArea/MainGrid.css'; import { useStateValue } from '../../StateProvider'; -import { useParams } from 'react-router'; - const MarginContainer = styled.div` max-width: 1440px; margin: auto; @@ -58,7 +56,6 @@ const Container = styled.div` `; export default (props) => { - const { friendid } = useParams(); const [posts, setPosts] = useState([]); const [postList, setPostList] = useState([]); const [last, setLast] = useState(null); @@ -69,12 +66,9 @@ export default (props) => { const [{ user }] = useStateValue(); useEffect(() => { if (props.uid) { - { - user && user.uid && user.uid === props.uid - ? setCategory('내가 올린 사진') - : setCategory('최신'); - } - + user && user.uid && user.uid === props.uid + ? setCategory('내가 올린 사진') + : setCategory('최신'); const unsubscribe = db .collection('posts') .where('uid', '==', props.uid) @@ -98,7 +92,6 @@ export default (props) => { let newPostList = []; setPosts([]); setCategory(e.currentTarget.innerText); - const unsubscribe = db; if ( e.currentTarget.innerText === '내가 올린 사진' || e.currentTarget.innerText === '최신' @@ -116,11 +109,9 @@ export default (props) => { }); } else { let Like_Inter; - { - if (e.currentTarget.innerText === '신기해요') - Like_Inter = 'Interest'; - else Like_Inter = 'Like'; - } + if (e.currentTarget.innerText === '신기해요') + Like_Inter = 'Interest'; + else Like_Inter = 'Like'; { db.collection('Like_Inter') .where('user', '==', props.uid) diff --git a/src/components/Mypage/Picture.js b/src/components/Mypage/Picture.js index 228db32..b63963b 100644 --- a/src/components/Mypage/Picture.js +++ b/src/components/Mypage/Picture.js @@ -8,7 +8,7 @@ import db from '../../firebase'; import UploadPage from '../Upload/UploadPage'; import LikeInterest from '../Detail/DetailFunction/Like_Interest'; import { useStateValue } from '../../StateProvider'; -import { useParams, useLocation } from 'react-router'; +import { useLocation } from 'react-router'; const useStyles = makeStyles((theme) => ({ ButtonGroup: { width: '150px', @@ -92,12 +92,6 @@ const ImageContainer = styled.div` } `; -const TextBox = styled.label` - font-size: 16px; - font-weight: 500; - line-height: 23px; - letter-spacing: -0.32px; -`; export default ({ setCheckUpdate, uid, @@ -135,7 +129,7 @@ export default ({ .doc(id) .delete() .then(function () { - console.log('Document successfully deleted!'); + //console.log('Document successfully deleted!'); }) .catch(function (error) { console.error('Error removing document: ', error); @@ -144,11 +138,6 @@ export default ({ }; const UpdatePost = () => { setIsUpdateModalOpen(true); - - // let PostInfoChange = db.collection('posts').doc(id); - // return PostInfoChange.update({ - // title: '이렇게업데이트하는구나', - // }); }; return ( <> @@ -202,20 +191,6 @@ export default ({ onClick={() => setIsModalOpen(true)} /> - {/**/} - {/* */} - {/* {novelty}*/} - {/* */} - {/* {heart}*/} - {/**/} {user && user.uid && location.pathname === `/user/${user.uid}` && ( diff --git a/src/components/Upload/UploadFunction/Atmosphere.js b/src/components/Upload/UploadFunction/Atmosphere.js index bd9bf84..ebdd11b 100644 --- a/src/components/Upload/UploadFunction/Atmosphere.js +++ b/src/components/Upload/UploadFunction/Atmosphere.js @@ -39,7 +39,7 @@ export default function ToggleButtons(props) { }; useEffect(() => { props.setHadAtmophere(alignment); - }); + },[alignment]); return (
diff --git a/src/components/Upload/UploadFunction/Rating.js b/src/components/Upload/UploadFunction/Rating.js index 62f5858..56955dd 100644 --- a/src/components/Upload/UploadFunction/Rating.js +++ b/src/components/Upload/UploadFunction/Rating.js @@ -19,7 +19,7 @@ export const RatingFont = styled.p` function Rating(props) { useEffect(() => { props.setHadRating(value); - }); + },[value]); const [value, setValue] = React.useState(props.rating); const handleChange = (event) => { setValue(event.target.value); diff --git a/src/components/Upload/UploadFunction/advertisement.js b/src/components/Upload/UploadFunction/advertisement.js index 569a4e2..6bd56d3 100644 --- a/src/components/Upload/UploadFunction/advertisement.js +++ b/src/components/Upload/UploadFunction/advertisement.js @@ -22,7 +22,7 @@ function Advertisement(props) { const handleChange = (event) => { setSelectedValue(event.target.value); - console.log(selectedValue); + //console.log(selectedValue); props.setHasSelectedadvertisement( selectedValue === 'YES' ? true : false ); diff --git a/src/components/Upload/UploadPage.js b/src/components/Upload/UploadPage.js index d34b8b4..c9c3cb0 100644 --- a/src/components/Upload/UploadPage.js +++ b/src/components/Upload/UploadPage.js @@ -121,13 +121,6 @@ export default function UploadPage(props) { }; const onHandleUpdate = (e) => { - // console.log('id', props.id); - // console.log('광고', advertising); - // console.log('제목', title); - // console.log('상세내용', review); - // console.log('무드', mood); - // console.log('레이팅', Rating); - // console.log('아리아', area); e.preventDefault(); if ( imageUrl === null || //이미지업로드 X @@ -153,8 +146,8 @@ export default function UploadPage(props) { timestamp: firebase.firestore.FieldValue.serverTimestamp(), //시간 title: title, //제목 address: address, //주소 - }).then((temp) => console.log('success', temp)); - alert('게시물이 수정되었습니다.'); + }).then((temp) => alert('게시물이 수정되었습니다.')); + props.close(); } }; @@ -269,7 +262,6 @@ export default function UploadPage(props) { }, }} > - {/*최악의 세대*/} <> @@ -313,10 +305,6 @@ export default function UploadPage(props) { maxHeight: '140px', }} > - {/*{console.log(*/} - {/* 'hasSelectedAddress',*/} - {/* hasSelectedAddress*/} - {/*)}*/} {!hasSelectedAddress && locations.map((location, index) => ( ({ - Edit: { - width: '75px', - height: '46px', - border: '1px solid #FFFFFF', - boxSizing: 'border-box', - borderRadius: '25.5px', - fontWeight: 'normal', - fontSize: '24px', - lineHeight: '35px', - letterSpacing: '-0.48px', - color: '#FFFFFF', - }, -})); const Container = styled.div` position: relative; z-index: 1; diff --git a/src/routes/Mypage.js b/src/routes/Mypage.js index 08149dc..94d58d2 100644 --- a/src/routes/Mypage.js +++ b/src/routes/Mypage.js @@ -113,7 +113,7 @@ function Mypage() { boxSizing: 'border-box', }} /> - {/*// */} + {user.displayName}
From 283d073dbf74e4c63f8606d6d258e3a4e9adb196 Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Wed, 9 Sep 2020 17:04:58 +0900 Subject: [PATCH 27/29] Remove Error --- src/components/Mypage/Mypost.js | 2 ++ src/components/Upload/UploadFunction/Rating.js | 6 ++++-- src/routes/FollowPage.js | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Mypage/Mypost.js b/src/components/Mypage/Mypost.js index 8210515..65b58d9 100644 --- a/src/components/Mypage/Mypost.js +++ b/src/components/Mypage/Mypost.js @@ -71,6 +71,7 @@ export default (props) => { : setCategory('최신'); const unsubscribe = db .collection('posts') + .orderBy('timestamp', 'desc') .where('uid', '==', props.uid) .onSnapshot((snapshot) => { setPosts( @@ -97,6 +98,7 @@ export default (props) => { e.currentTarget.innerText === '최신' ) { db.collection('posts') + .orderBy('timestamp', 'desc') .where('uid', '==', props.uid) .onSnapshot((snapshot) => { setPosts( diff --git a/src/components/Upload/UploadFunction/Rating.js b/src/components/Upload/UploadFunction/Rating.js index 56955dd..051a880 100644 --- a/src/components/Upload/UploadFunction/Rating.js +++ b/src/components/Upload/UploadFunction/Rating.js @@ -16,11 +16,13 @@ export const RatingFont = styled.p` align-items: center; text-align: center; `; + function Rating(props) { + const [value, setValue] = React.useState(props.rating); useEffect(() => { props.setHadRating(value); - },[value]); - const [value, setValue] = React.useState(props.rating); + }, [value]); + const handleChange = (event) => { setValue(event.target.value); }; diff --git a/src/routes/FollowPage.js b/src/routes/FollowPage.js index cd18212..119dbad 100644 --- a/src/routes/FollowPage.js +++ b/src/routes/FollowPage.js @@ -103,6 +103,7 @@ function FollowPage() { .then((querySnapshot) => { querySnapshot.docs.map((subscriber) => { db.collection('posts') + .orderBy('timestamp', 'desc') .where('uid', '==', subscriber.data().userTo) .onSnapshot((snapshot) => { snapshot.docs.map((doc) => { From 0efb46a89d2a3fb54305d30b76be8f3991f9237d Mon Sep 17 00:00:00 2001 From: BAEK DONGWOO Date: Thu, 10 Sep 2020 14:38:38 +0900 Subject: [PATCH 28/29] Remove Error --- package-lock.json | 6 +++--- src/components/Mypage/Mypost.js | 3 --- src/components/Mypage/Picture.js | 5 ++--- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7a0f69e..fbab3ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4076,9 +4076,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001124", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001124.tgz", - "integrity": "sha512-zQW8V3CdND7GHRH6rxm6s59Ww4g/qGWTheoboW9nfeMg7sUoopIfKCcNZUjwYRCOrvereh3kwDpZj4VLQ7zGtA==" + "version": "1.0.30001125", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001125.tgz", + "integrity": "sha512-9f+r7BW8Qli917mU3j0fUaTweT3f3vnX/Lcs+1C73V+RADmFme+Ih0Br8vONQi3X0lseOe6ZHfsZLCA8MSjxUA==" }, "capture-exit": { "version": "2.0.0", diff --git a/src/components/Mypage/Mypost.js b/src/components/Mypage/Mypost.js index 65b58d9..5dca716 100644 --- a/src/components/Mypage/Mypost.js +++ b/src/components/Mypage/Mypost.js @@ -188,6 +188,3 @@ export default (props) => { ); }; - -//orderBy 설정을하면 에러뜨는부분에서 설정해줘야하는데 설정하는 법을 몰라서 일단 주석처리해뒀습니다 -// 그리고 마이페이지에 뜨는 사진도 orderby 설정하는법을 몰라서 일단 주석 처리해두고 진행했습니다. diff --git a/src/components/Mypage/Picture.js b/src/components/Mypage/Picture.js index b63963b..027e748 100644 --- a/src/components/Mypage/Picture.js +++ b/src/components/Mypage/Picture.js @@ -93,7 +93,6 @@ const ImageContainer = styled.div` `; export default ({ - setCheckUpdate, uid, advertising, area, @@ -111,7 +110,6 @@ export default ({ username, address, id, - videoId, }) => { const location = useLocation(); const [isModalOpen, setIsModalOpen] = useState(false); @@ -193,7 +191,8 @@ export default ({ {user && user.uid && - location.pathname === `/user/${user.uid}` && ( + location.pathname === `/user/${user.uid}` && + uid === user.uid && ( Date: Thu, 10 Sep 2020 17:53:19 +0900 Subject: [PATCH 29/29] Add interest page --- src/components/App.js | 3 +- src/components/PickBox/InterestPick.js | 123 +++++++++++++++++++++++++ src/components/PickBox/PickBox.js | 3 + 3 files changed, 128 insertions(+), 1 deletion(-) create mode 100644 src/components/PickBox/InterestPick.js diff --git a/src/components/App.js b/src/components/App.js index 3904072..05b7977 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -10,6 +10,7 @@ import Mypage from '../routes/Mypage'; import FollowPage from '../routes/FollowPage'; import { useStateValue } from '../StateProvider'; import FriendsPage from '../routes/FrinedsPage'; +import InterestPick from './PickBox/InterestPick'; const GlobalStyle = createGlobalStyle` body { @@ -33,12 +34,12 @@ function App() { + - {user && user.uid && ( { + //포스트 별좋아요 수를 나타낸다 + let newPostList = []; + db.collection('posts').onSnapshot((snapshot) => { + snapshot.docs.map((postInfo) => { + db.collection('Like_Inter') + .where('postId', '==', postInfo.id) + .where('type', '==', 'Interest') + .get() + .then((doc) => { + if (doc.empty) { + newPostList.push({ + id: postInfo.id, + post: postInfo.data(), + interestCount: 0, + }); + setInterstCount(0); + } else { + newPostList.push({ + id: postInfo.id, + post: postInfo.data(), + interestCount: doc.size, + }); + } + newPostList.sort(function (a, b) { + if (a.interestCount > b.interestCount) { + return -1; + } + if (a.interestCount < b.interestCount) { + return 1; + } + // a must be equal to b + return 0; + }); + setPosts([...newPostList]); + }); + }); + }); + }, [interested]); + return ( + + setHasMore(false)} + hasMore={hasMore} + loader={} + > +
+ 신기한 PICK +
+ Interesting +
+
+ + {posts.map(({ post, id }) => ( + + ))} + + + + ); +} + +export default InterestPick; diff --git a/src/components/PickBox/PickBox.js b/src/components/PickBox/PickBox.js index bee26d5..89f43c6 100644 --- a/src/components/PickBox/PickBox.js +++ b/src/components/PickBox/PickBox.js @@ -127,6 +127,9 @@ function PickBox() { background: 'linear-gradient(151.01deg, #61BFDA -17.86%, #4366E9 105.09%)', }} + onClick={() => { + history.push('/interest'); + }} > Interesting