fix: login

src/components/user/guest-book/GuestBookBanner.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 import { Icon } from '@/components/shared';
-import { useLogin } from '@/hooks/useLogin';
 
 interface GuestBookBannerProps {
   visitLogs?: VisitLog[];
   ownerName: string;
+  isLogin: boolean;
+  onClick: () => void;
 }
 
 interface VisitLog {
@@ -30,8 +31,9 @@ const Log = ({ text, name }: Pick<VisitLog, 'name' | 'text'>) => {
 export const GuestBookBanner = ({
   visitLogs,
   ownerName,
+  isLogin,
+  onClick,
 }: GuestBookBannerProps) => {
-  const { login } = useLogin();
   const [activeIndex, setActiveIndex] = useState(0);
   const [isTransitioning, setIsTransitioning] = useState(false);
   const translateY = -activeIndex * 36;
@@ -66,8 +68,11 @@ export const GuestBookBanner = ({
 
   if (!visitLogs || !visitLogs.length) {
     return (
-      <div className='tw-mx-5 tw-mb-5 tw-mt-3 tw-bg-grayscale-700 tw-px-3.5 tw-py-1.5 tw-text-white'>
-        {login ? (
+      <div
+        onClick={onClick}
+        className='tw-mx-5 tw-mb-5 tw-mt-3 tw-cursor-pointer tw-bg-grayscale-700 tw-px-3.5 tw-py-1.5 tw-text-white'
+      >
+        {isLogin ? (
           <div className='tw-flex tw-flex-row tw-gap-2'>
             <Icon iconType='GuestBook' />
             <p className='tw-text-grayscale-300'>
@@ -88,7 +93,10 @@ export const GuestBookBanner = ({
   }
 
   return (
-    <div className='tw-mx-5 tw-mb-5 tw-mt-3 tw-h-9 tw-overflow-hidden tw-bg-grayscale-700 tw-px-3.5 tw-text-white'>
+    <div
+      onClick={onClick}
+      className='tw-mx-5 tw-mb-5 tw-mt-3 tw-h-9 tw-cursor-pointer tw-overflow-hidden tw-bg-grayscale-700 tw-px-3.5 tw-text-white'
+    >
       <div
         className={`${
           isTransitioning

src/hooks/useStoredUserId.ts

@@ -0,0 +1,16 @@
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+export function useStoredUserId() {
+  const [storedUserId, setStoredUserId] = useState<string | null>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    const id = localStorage.getItem('userId');
+    if (id) {
+      setStoredUserId(id);
+      return;
+    }
+  }, []);
+
+  return { storedUserId };
+}

src/pages/user/[id]/[filmId]/item/index.tsx

@@ -6,13 +6,18 @@ import { QueryClient, dehydrate } from '@tanstack/react-query';
 import { filmsApis, filmsKeys, useGetFilm } from '@/query-hooks/useFilms';
 import { Icon } from '@/components/shared';
 import { ItemsSlide } from '@/components/user/item/ItemsSlide';
-import { useLogin } from '@/hooks/useLogin';
+import { useStoredUserId } from '@/hooks/useStoredUserId';
 
-export default function ItemPage() {
+interface ItemPageProps {
+  userId: string;
+}
+
+export default function ItemPage({ userId }: ItemPageProps) {
   const router = useRouter();
   const filmId = router.query.filmId as string;
   const index = Number(router.query.index) || 0;
-  const { login } = useLogin();
+  const { storedUserId } = useStoredUserId();
+  const getIsLogin = () => userId === storedUserId;
 
   const {
     data: { title: groupName, photo_cuts: items },
@@ -28,7 +33,7 @@ export default function ItemPage() {
         <div className='tw-flex tw-justify-between'>
           <div className='gap-2 tw-flex tw-items-center'>
             <h1 className='tw-text-main-headline tw-text-gray-200'>{title}</h1>
-            {login && (
+            {getIsLogin() && (
               <Link
                 href={`/user/${router.query.id}/${router.query.filmId}/item/edit?cutId=${photo_cut_id}`}
               >
@@ -58,6 +63,7 @@ export default function ItemPage() {
 
 export const getServerSideProps: GetServerSideProps = async ({ query }) => {
   const filmId: string = query.filmId as string;
+  const userId = query.id as string;
   const queryClient = new QueryClient();
 
   await queryClient.prefetchQuery(filmsKeys.item(Number(filmId)), () =>
@@ -66,6 +72,7 @@ export const getServerSideProps: GetServerSideProps = async ({ query }) => {
 
   return {
     props: {
+      userId,
       dehydratedState: dehydrate(queryClient),
     },
   };

src/pages/user/[id]/guest-book/index.tsx

@@ -10,8 +10,8 @@ import {
   usersKeys,
 } from '@/query-hooks/useUsers';
 import { Icon, Input, Modal, Textarea } from '@/components/shared';
-import { useLogin } from '@/hooks/useLogin';
 import { useModal } from '@/hooks/useModal';
+import { useStoredUserId } from '@/hooks/useStoredUserId';
 import { cn } from '@/utils/cn';
 
 interface GuestBookProps {
@@ -23,7 +23,8 @@ export default function GuestBookPage({ userId }: GuestBookProps) {
   const { isOpen, open: openModal, close: closeModal } = useModal();
   const [writerName, setWriterName] = useState('');
   const [content, setContent] = useState('');
-  const { login } = useLogin();
+  const { storedUserId } = useStoredUserId();
+  const getIsLogin = () => userId === storedUserId;
 
   const { data, isLoading } = useGetUserVisitLogs(userId);
   const createMutation = useCreateUserVisitLog();
@@ -91,7 +92,7 @@ export default function GuestBookPage({ userId }: GuestBookProps) {
                     {created_at}
                   </span>
                 </div>
-                {login && (
+                {getIsLogin() && (
                   <Icon
                     iconType='Close'
                     className='tw-cursor-pointer tw-fill-grayscale-300'

src/pages/user/[id]/index.tsx

@@ -1,4 +1,5 @@
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
+import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { QueryClient, dehydrate } from '@tanstack/react-query';
 import { useSafeContext } from '@/hooks';
@@ -21,7 +22,7 @@ import {
   ProfileModal,
 } from '@/components/user';
 import { GuestBookBanner } from '@/components/user/guest-book/GuestBookBanner';
-import { useLogin } from '@/hooks/useLogin';
+import { useStoredUserId } from '@/hooks/useStoredUserId';
 
 export interface Profile {
   profileImage: string;
@@ -37,12 +38,14 @@ interface Film {
 export default function User({
   userId,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  const { login: isLogin } = useLogin();
+  const router = useRouter();
+  const { storedUserId } = useStoredUserId();
   const { isLoading, data: filmList, isError } = useGetFilms(userId);
   const { data: userData } = useGetUser(userId);
   const { data: visitLogData } = useGetUserVisitLogs(userId);
 
   const { status, dispatch } = useSafeContext(ModalContext);
+  const getIsLogin = () => userId === storedUserId;
 
   const {
     isDrawerOpen,
@@ -80,14 +83,19 @@ export default function User({
           src={userData.profile_img ?? '/images/avatar-placeholder.png'}
           nickname={userData.name}
           viewCount={userData.visitors}
-          isLogin={isLogin}
+          isLogin={userId === storedUserId}
           displayMeta
           className='tw-mx-5'
           onEditProfile={handleEditProfile}
         />
       )}
       {userData && (
-        <GuestBookBanner ownerName={userData.name} visitLogs={visitLogData} />
+        <GuestBookBanner
+          onClick={() => router.push(`/user/${userId}/guest-book`)}
+          isLogin={userId === storedUserId}
+          ownerName={userData.name}
+          visitLogs={visitLogData}
+        />
       )}
       <div className='tw-flex tw-flex-col tw-gap-4'>
         {filmList?.map(({ film_id, photo_cuts, title }) => (
@@ -97,17 +105,17 @@ export default function User({
             filmId={film_id}
             photos={photo_cuts}
             title={title}
-            isLogin={isLogin}
+            isLogin={getIsLogin()}
             onEditTitle={() => handleEditTitle(title, film_id)}
           />
         ))}
         {!filmList && (
           <div className='tw-mt-[60px]'>
-            <EmptyView isLogin={isLogin} />
+            <EmptyView isLogin={getIsLogin()} />
           </div>
         )}
       </div>
-      {isLogin && (
+      {getIsLogin() && (
         <Button
           variant='rounded'
           className='tw-fixed tw-bottom-5 tw-right-5'
@@ -116,7 +124,7 @@ export default function User({
           ADD
         </Button>
       )}
-      {isLogin ? (
+      {getIsLogin() ? (
         <Icon
           iconType='Menu'
           onClick={() => dispatch({ type: 'OPEN_DRAWER' })}