From 05d82e33b2297ae68a3ed0cd15ef3375dd4ed0f5 Mon Sep 17 00:00:00 2001 From: chaewonkong Date: Tue, 15 Aug 2023 16:12:59 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=F0=9F=90=9B=20handle=20undefined=20?= =?UTF-8?q?case=20for=20userData?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/guest_book.svg | 7 ++ src/assets/icons/index.ts | 1 + .../user/guest-book/GuestBookBanner.tsx | 96 +++++++++++++++++++ src/hooks/useLogin.ts | 2 +- src/pages/user/[id]/index.tsx | 14 ++- 5 files changed, 114 insertions(+), 6 deletions(-) create mode 100644 src/assets/icons/guest_book.svg create mode 100644 src/components/user/guest-book/GuestBookBanner.tsx diff --git a/src/assets/icons/guest_book.svg b/src/assets/icons/guest_book.svg new file mode 100644 index 0000000..b523483 --- /dev/null +++ b/src/assets/icons/guest_book.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 28870c1..6aab020 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -11,3 +11,4 @@ export { default as Camera } from './camera.svg'; export { default as ArrowDown } from './arrow-down.svg'; export { default as Pencil } from './pencil.svg'; export { default as Close } from './close.svg'; +export { default as GuestBook } from './guest_book.svg'; diff --git a/src/components/user/guest-book/GuestBookBanner.tsx b/src/components/user/guest-book/GuestBookBanner.tsx new file mode 100644 index 0000000..6fd3cec --- /dev/null +++ b/src/components/user/guest-book/GuestBookBanner.tsx @@ -0,0 +1,96 @@ +import { useEffect, useState } from 'react'; +import { Icon } from '@/components/shared'; + +interface GuestBookBannerProps { + visitLogs?: VisitLog[]; + ownerName: string; +} + +interface VisitLog { + name: string; + text: string; + log_id: number; + created_at: string; + user_id: string; +} + +const Log = ({ text, name }: Pick) => { + return ( +
+
+ +

{text}

+
+ +
+ ); +}; + +export const GuestBookBanner = ({ + visitLogs, + ownerName, +}: GuestBookBannerProps) => { + const [activeIndex, setActiveIndex] = useState(0); + const [isTransitioning, setIsTransitioning] = useState(false); + const translateY = -activeIndex * 36; + + useEffect(() => { + if (visitLogs && isTransitioning) { + const id = setTimeout(() => { + setIsTransitioning(false); + if (activeIndex === visitLogs.length) { + setActiveIndex(0); + } + }, 300); + + return () => clearTimeout(id); + } + }, [activeIndex, isTransitioning, visitLogs]); + + const nextItem = () => { + setIsTransitioning(true); + if (visitLogs && visitLogs.length) { + setActiveIndex((prevIndex) => (prevIndex + 1) % (visitLogs.length + 1)); + } + }; + + useEffect(() => { + const id = setInterval(() => { + nextItem(); + }, 2500); + + return () => clearInterval(id); + }, []); + + if (!visitLogs || !visitLogs.length) { + return ( +
+
+ +

{`${ownerName}님께 방명록을 남겨주세요`}

+
+ +
+ ); + } + + return ( + <> +
+
+ {visitLogs.map(({ log_id, name, text }) => ( + + ))} +
+
+ + + ); +}; diff --git a/src/hooks/useLogin.ts b/src/hooks/useLogin.ts index 1f82a06..476d75e 100644 --- a/src/hooks/useLogin.ts +++ b/src/hooks/useLogin.ts @@ -2,7 +2,7 @@ import { useState } from 'react'; import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'; export function useLogin() { - const [login, setLogin] = useState(null); + const [login, setLogin] = useState(false); useIsomorphicLayoutEffect(() => { const user_id = localStorage.getItem('userId'); diff --git a/src/pages/user/[id]/index.tsx b/src/pages/user/[id]/index.tsx index 315ce3f..855cd98 100644 --- a/src/pages/user/[id]/index.tsx +++ b/src/pages/user/[id]/index.tsx @@ -6,7 +6,7 @@ import { ModalContext } from '@/providers'; import { useGetFilms } from '@/query-hooks/useFilms'; import filmsApis from '@/query-hooks/useFilms/api'; import filmsKeys from '@/query-hooks/useFilms/keys'; -import { useGetUser } from '@/query-hooks/useUsers'; +import { useGetUser, useGetUserVisitLogs } from '@/query-hooks/useUsers'; import usersApis from '@/query-hooks/useUsers/apis'; import usersKeys from '@/query-hooks/useUsers/keys'; import { Avatar, Button, Icon, Tooltip } from '@/components/shared'; @@ -20,6 +20,7 @@ import { FilmTitleModal, ProfileModal, } from '@/components/user'; +import { GuestBookBanner } from '@/components/user/guest-book/GuestBookBanner'; import { useLogin } from '@/hooks/useLogin'; export interface Profile { @@ -39,6 +40,7 @@ export default function User({ const { login: isLogin } = useLogin(); const { isLoading, data: filmList, isError } = useGetFilms(userId); const { data: userData } = useGetUser(userId); + const { data: visitLogData } = useGetUserVisitLogs(userId); const { status, dispatch } = useSafeContext(ModalContext); @@ -68,7 +70,6 @@ export default function User({ dispatch({ type: 'OPEN_PROFILE_MODAL' }); }; - if (isLogin === null) return null; if (isLoading) return
로딩중...
; if (isError) return
에러 ㅋ
; @@ -85,9 +86,9 @@ export default function User({ onEditProfile={handleEditProfile} /> )} -
- 방명록 기능이 추가될 공간입니다 ㅎ -
+ {userData && ( + + )}
{filmList?.map(({ film_id, photo_cuts, title }) => ( usersApis.getUser(userId), ), + queryClient.prefetchQuery(usersKeys.visitLogs(userId), () => + usersApis.getUserVisitLogs(userId), + ), ]); return { From 00236eb15729b95975c6476239aa40d985999e0d Mon Sep 17 00:00:00 2001 From: chaewonkong Date: Tue, 15 Aug 2023 16:16:18 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=F0=9F=90=9B=20remove=20button=20onl?= =?UTF-8?q?y=20needed=20for=20testing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/guest-book/GuestBookBanner.tsx | 29 +++++++++---------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/components/user/guest-book/GuestBookBanner.tsx b/src/components/user/guest-book/GuestBookBanner.tsx index 6fd3cec..ca20365 100644 --- a/src/components/user/guest-book/GuestBookBanner.tsx +++ b/src/components/user/guest-book/GuestBookBanner.tsx @@ -75,22 +75,19 @@ export const GuestBookBanner = ({ } return ( - <> -
-
- {visitLogs.map(({ log_id, name, text }) => ( - - ))} -
+
+
+ {visitLogs.map(({ log_id, name, text }) => ( + + ))}
- - +
); }; From 0b4e93ff9816da30c910db2d3bfbb750e6d096aa Mon Sep 17 00:00:00 2001 From: chaewonkong Date: Tue, 15 Aug 2023 17:06:47 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=F0=9F=A4=96=20show=20different=20?= =?UTF-8?q?view=20for=20logged=20in=20user?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/guest-book/GuestBookBanner.tsx | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/src/components/user/guest-book/GuestBookBanner.tsx b/src/components/user/guest-book/GuestBookBanner.tsx index ca20365..6b43b57 100644 --- a/src/components/user/guest-book/GuestBookBanner.tsx +++ b/src/components/user/guest-book/GuestBookBanner.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react'; import { Icon } from '@/components/shared'; +import { useLogin } from '@/hooks/useLogin'; interface GuestBookBannerProps { visitLogs?: VisitLog[]; @@ -30,6 +31,7 @@ export const GuestBookBanner = ({ visitLogs, ownerName, }: GuestBookBannerProps) => { + const { login } = useLogin(); const [activeIndex, setActiveIndex] = useState(0); const [isTransitioning, setIsTransitioning] = useState(false); const translateY = -activeIndex * 36; @@ -65,11 +67,22 @@ export const GuestBookBanner = ({ if (!visitLogs || !visitLogs.length) { return (
-
- -

{`${ownerName}님께 방명록을 남겨주세요`}

-
- + {login ? ( +
+ +

+ 아직 작성된 방명록이 없습니다 +

+
+ ) : ( + <> +
+ +

{`${ownerName}님께 방명록을 남겨주세요`}

+
+ + + )}
); }