프론트엔드 부트캠프 78일차, 팀 프로젝트(20) 글은 일인당 하나로 제한합니다.
오늘은 1인 1개 넘으면 못 쓰게 할거야
어제하던 코드는 그냥 container에서 주는 것으로 바꿨다.
더 위로 타고 올라가기엔 쿼리를 추가로 날려야하기 때문에 추가로 안날려도 되고 딱 &&하나만 써도 되는 지점에서 isReviewer를 써도 될 것 같다고 생각했다!
useEffect(() => {
data?.fetchReservationsUser.filter(
(ele: IFetchReservationData) =>
ele.theme_menu.theme?.id === router.query.id
).length >= 1
? setIsReviewer(true)
: setIsReviewer(false);
}, []);
return (
isReviewer &&
<ThemeCommentWriteUI
register={register}
handleSubmit={handleSubmit}
formState={formState}
setValue={setValue}
trigger={trigger}
onClickSubmit={onClickSubmit}
onClickUpdate={onClickUpdate}
isEdit={props.isEdit}
setIsEdit={props.setIsEdit}
el={props.el}
isReviewer={isReviewer}
/>
);
}
이렇게 했더니 생긴 문제!!!
리렌더가 한 번 되야지만 setIsReviewer가 true가 된다. data?.fetchReservationsUser가 불러와지기전까진 undefined라서 isReviewer 상태가 false다.
useEffect(() => {
data?.fetchReservationsUser.filter(
(ele: IFetchReservationData) =>
ele.theme_menu.theme?.id === router.query.id
).length >= 1
? setIsReviewer(true)
: setIsReviewer(false);
}, [data?.fetchReservationsUser]);그래서 의존성 배열에 data?.fetchReservationsUser를 추가했다. (데이터 불러오면 useEffect가 다시 일어날 수 있도록)
이제 잘 작동은 하는데 방식에 이게 진짜 괜찮은 방법인가?에 대한 의문이 든다,,, 의존성배열을 이용해서 뭔가 할 때마다 드는 의문이다.
한 번 후기 쓴 사람은 또 못 달게 하기
1. 한 번도 단적이 없는가?
2. 매장 예약을 한 적이 있는가?
이 둘의 교집합만 댓글을 달 수 있게 하면 될 것 같다.
반대로 말하자면 하나라도 false면 댓글을 못 단다.
그럼 지금 조건에서 한 번도 단적이 없는가?에서 아닌 사람을 isReviewer false 처리하기만 하면 되는건가?
지금 CommentWrite 부분에서 setIsReviewer를 하고 있는데, 그럼 여기서 CommentList를 불러오는 쿼리를 써야하나?
앗 근데 이미 여기서 FETCH_THEME_REVIEWS 이 쿼리를 쓴적이 있다!
그래서 그냥 썼다.
useEffect(() => {
if (
data?.fetchReservationsUser.filter(
(ele: IFetchReservationData) =>
ele.theme_menu.theme?.id === router.query.id
).length === 0
)
setIsReviewer(false);
// 예약한 내역이 없으면 댓글 다는 권한 false로 변경
fetchThemeReviews?.fetchThemeReviews.filter(
(el: IFetchThemeReviewsData) => el.user.id === userInfo.id
).length >= 1
? setIsReviewer(false)
: setIsReviewer(true);
// 댓글 작성한 적이 있으면 댓글 다는 권한 false로 변경
}, [fetchThemeReviews?.fetchThemeReviews]);최종... 코드?
테마 예약한 건 어차피 예약 페이지나 다른 페이지를 갔다 와야 업데이트 되는거니까 의존성 배열에서 뺐고, 기존엔 isReviewer가 true였던 걸 false로 바꾸는 역할만 한다. 그리고 댓글 지우거나 댓글 다는 건 fetchThemeReviews 변동이 있으니까 여기서 true랑 false 스위치를 준다.
!!!!!!!!!!!!!!!!!!!!!...심각한 오류...!!!!!!!!!!!!!!!!!!!!
댓글 수정을 누르면 isEdit 이 true가 되면서 write 컨테이너가 불러와져야하는데, 그 안에서 isReviewer로 없애냐 마냐 하고 있으니까... 그게 false면 안보여버리는 것ㅠㅠㅠ그니까 isReviewer를 write 안에서 왔다갔다하게 하는 게 문제다, 아예 댓글 '작성'만 하는 부분에서 isReviewer에 따라 달라지게 만들어야 한다... 그니까 전에 거기서 처리할걸 그랬어-! 라고 생각했던게 맞았던 것 같다....
import { gql, useQuery } from "@apollo/client";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useRecoilState } from "recoil";
import { userInfoState } from "../../../src/commons/store";
import ThemeCommentList from "../../../src/components/units/theme/comment/list/ThemeCommentList.container";
import ThemeCommentWrite from "../../../src/components/units/theme/comment/write/ThemeCommentWrite.container";
import ThemeDetail from "../../../src/components/units/theme/detail/ThemeDetail.container";
const FETCH_THEME_REVIEWS = gql`
query fetchThemeReviews($themeId: String!) {
fetchThemeReviews(themeId: $themeId) {
id
clear
rank
content
createdAt
star
user {
id
}
}
}
`;
const FETCH_RESERVATIONS_USER = gql`
query fetchReservationsUser($page: Float) {
fetchReservationsUser(page: $page) {
id
reservation_date
theme_menu {
reservation_time
theme {
id
title
}
}
}
}
`;
interface IFetchReservationData {
theme_menu: {
theme: {
id: string;
};
};
}
interface IFetchThemeReviewsData {
id: string;
user: {
id: string;
};
}
export default function ThemeDetailPage() {
const router = useRouter();
const [isReviewer, setIsReviewer] = useState(true);
const [userInfo] = useRecoilState(userInfoState);
const { data } = useQuery(FETCH_RESERVATIONS_USER, {
variables: {
page: 1,
},
});
const { data: fetchThemeReviews } = useQuery(FETCH_THEME_REVIEWS, {
variables: {
themeId: router.query.id,
},
});
useEffect(() => {
if (
data?.fetchReservationsUser.filter(
(ele: IFetchReservationData) =>
ele.theme_menu.theme?.id === router.query.id
).length === 0
)
setIsReviewer(false);
// 예약한 내역이 없으면 댓글 다는 권한 false로 변경
fetchThemeReviews?.fetchThemeReviews.filter(
(el: IFetchThemeReviewsData) => el.user.id === userInfo.id
).length >= 1
? setIsReviewer(false)
: setIsReviewer(true);
// 댓글 작성한 적이 있으면 댓글 다는 권한 false로 변경
if (!userInfo.id) setIsReviewer(false);
// 비로그인 회원이면 권한 false로 변경
}, [fetchThemeReviews?.fetchThemeReviews]);
return (
<>
<ThemeDetail />
{isReviewer && <ThemeCommentWrite />}
<ThemeCommentList />
</>
);
}이러니까 수정이 되긴된다! 근데 예약 안 해도 댓글창이 뜨길래 조금 수정했다.
useEffect(() => {
fetchThemeReviews?.fetchThemeReviews.filter(
(el: IFetchThemeReviewsData) => el.user.id === userInfo.id
).length >= 1
? setIsReviewer(false)
: setIsReviewer(true);
// 댓글 작성한 적이 있으면 댓글 다는 권한 false로 변경
if (
data?.fetchReservationsUser.filter(
(ele: IFetchReservationData) =>
ele.theme_menu.theme?.id === router.query.id
).length === (0 || undefined)
) {
setIsReviewer(false);
}
// 예약한 내역이 없으면 댓글 다는 권한 false로 변경
if (!userInfo.id) setIsReviewer(false);
// 비로그인 회원이면 권한 false로 변경
}, [fetchThemeReviews?.fetchThemeReviews]);좋아요대로 sorting 하기
하기 전에 되는지 아리까리해서 RunJS로 먼저 해봤다.
그리고 블로그에서 sort 검색해서 나온 Junny is cute 멘토님 풀이 참고했다.
const Boards = [{id: "03030", likes:"32", content:"blabla"},
{id: "4232", likes:"1", content:"얄라얄라"},
{id: "3421", likes:"34", content:"라라일라이"},
{id: "2213", likes:"0", content:"출석체크"},
{id: "21323", likes:"28", content:"해야하는데"}];
Boards.sort((a,b)=> {
return b.likes-a.likes
})
// 결과
[
{ id: '3421', likes: '34', content: '라라일라이' },
{ id: '03030', likes: '32', content: 'blabla' },
{ id: '21323', likes: '28', content: '해야하는데' },
{ id: '4232', likes: '1', content: '얄라얄라' },
{ id: '2213', likes: '0', content: '출석체크' }
]이러면 좋아요가 높은 순대로 정렬된다!!!
Boards.sort((a,b)=> {
return b.likes-a.likes
}).map((el)=> (el.content))이런식으로 하면 정렬된 것에서 content만 뽑아올 수도 있다!
const { data: hotThemes } = useQuery(FETCH_THEMES, {
variables: {
page: 2,
},
});
TypeError: Cannot assign to read only propery '0' of obejct '[object Array]'
Error while sorting array of objects Cannot assign to read only property '2' of object '[object Array]'
I'm having array of objects where object looks like this (values change): { stats: { hp: 2, mp: 0, defence: 4, agility: 11, speed: 6, streng...
stackoverflow.com
배열을 직접적으로 건들이려고 하면 나는 오류라고 한다.
const hotThemes = props.themesAll?.fetchThemesAll
.slice()
.sort((a: IFetchThemes, b: IFetchThemes) => {
return b.like - a.like;
})
.slice(0, 4);테마를 모두 뽑아오고, 거기서 like 내림차순으로 정렬한다. 거기서 앞에 있는 네 개를 잘라내서 hotThemes에 담고 이걸 캐러셀 돌리는 곳에 던져줬다!
인기테마 만들기 끝 - 따란~ 꾸벅_ _)
모바일로 봤을 때 자꾸 오른쪽 여백이 조금 남았었는데, 캐러셀을 없애면 정상적인 모습이 되었다... 하지만 캐러셀을 없앨 순 없잖아? 그리고 설정을 여기저기 다 만져봐도 안돼서,! 그걸 감싸고 있는 Slider에 overflow-x : hidden 을 주었다...^^ 해결!
그리고 어제 우엉님께 여쭤본다는 것을 여쭤봤다! fetchThemes(page를 인자값으로 받음)을 fetchThemesAll 이런 거 만드려면 오래걸리냐고 여쭤보니까, 별로 안 걸린다고 30분 정도(?) 걸린다고 하셨다. 우엉님을 볼 수 있는 날이 이틀밖에 남지 않았다! 비상비상... 그 전에 더 많이 얘기를 해야해!
🐻 프론트엔드
- 추가작업, 퍼블리싱 다듬기
🐻❄️ 백엔드
- 사실 모르겠습니다. 아마도 api를 수정하셨겠죠?
🍚 점심
- 달걀(hp +70)*2
🍬 간식
- X
☕️ 커피
- 엄마가 타주신 유자민트티~~~~>_<b
🎵 노래
- X
👀 비고
- 오늘은 정말 ... 짧은 시간 안에 많은 걸 한 것 같긴 하다. 근데 정말 그만큼 집중이 안됐다고 해야하나, 역설적이긴 한데! 정확히는 집중이 잘 안돼서 빨리 끝내버리고 싶었던 것 같다. 음... 결과적으론 집중해서 했다...? ㅎ 그리고 에너지가 주체가 안되는 하루였다. 집에 와서 좀 자다가 다시 해야지! 했는데 잠도 안오고 생각만 핑핑핑핑 돌았다. 결국 그냥 일어나서 금요일에 사진찍을 것 대비 고데기나 해봤다... 그리고 운동기구도 쓰고 노트북도 뚜껑 열었다 덮었다하다가 운동을! 해야겠다는 생각을 했다. 놀랍다... 내가 운동을 ? 자발적으로? 해야겠다고..? 수영이 아닌 운동을...?! 근데 정말 동적인 에너지가 주체가 안되는 느낌 뭔가 막 발산해버리고 싶었다. 그래서 달걀(hp +70)*2 먹고 엄마랑 같이 나갔다. 엄마에게 런데이 총각을 소개시켜드리고 옆에서 나도 같이 뛰었다! 마구 뛰고 싶었지만 무리하면 안된대서 설렁설렁 뛰었다. 그리고 음악분수도 구경했다... 오늘 뭐야 완전 좋은날이잖아.
음악분수 구경하고 가려는데 공원 운동장쪽에서 다들 모여서 춤추고 있었다. 엄마도 저거 신청했다고 하지 않았어?!(내 기억으론 멧돌댄스...?였는데...) 하니 맞다고 그리고 아무나 할 수 있는거라고 한 곡만 할래? 해서 따라췄다..ㅎ 한 곡은 두 곡이 되고 두 곡은 세 곡이 되고... 한 30분은 췄는데, 일단 노래가 나오면 자리를 뜨기가 어려웠고(신남) 점점 주변을 의식하지 않는 나를 보면서...! 이거 다른 사람 시선 신경 안 쓰는 연습에 되게 좋을 것 같다란 생각이 들어서 그냥 췄다. 진짜 나도 지나가면서 춤추시는 분들 보게됐었고, 내가 추고 있을 때 지나가는 사람들도 진짜 전부 한번씩은 쳐다본다. 근데 그게 특별히 나를 쳐다보는 게 아닌 것도 알고, 열심히 추는 분들이 멋있어 보여서 그냥 열심히 췄다! 좀 자유로워진 기분이라 좋았다...ㅎ 참고로 이건 시간대별로 입는 티셔츠 색깔이 다르고, 한 달에 5000원 내면 티셔츠를 준다고 한다. 돈은 안 내도 춤 출 수 있지만 많이 춘다면 티셔츠값 내고 하는 게 좋을 것 같다! 그리고 수박 사오시는 분도 계시고 그러는데, 먹고가라고 문자로 알림도 온다고 한다. 굉장히 싼 가격에 좋은 운동,,, 수박까지...
수락산에 살 때 저녁쯤 되면 베란다에서 중랑천에서 춤 추시는 분들이 저멀리 보였다. 그땐 다이어트에 좋을 것 같아서 춰보고 싶단 생각을 했었다. 근데 어떻게 하는 건지도 모르겠고 부끄러워서 못했었는데, 그냥 옆에서 추면 되는 거였다!!!!! 그리고 생각보다 안 부끄러웠다... 그냥 더 잘 파닥거리고 싶을 뿐. 아예 안 부끄러워지는 날까지~~~~가끔 춰야지.
아무튼 오늘은 알차게 놀았다 ^__^아직 이러면 안될것 같긴한데, 좋은 리프레쉬였다~~~