로그인한 사용자만 별(즐겨찾기) 클릭 가능하도록 구현

src/components/BestRestaurantItem/index.tsx

@@ -17,16 +17,22 @@ import { IconButton } from '@/components';
 import { Star } from '@/components/IconButton';
 import theme from '@/styles/theme';
 import { BestRestaurantType } from '@/components/BestRestaurants';
+import { useAppSelector } from '@/store/hooks';
 
 interface BestRestaurantItemType {
   restaurant: BestRestaurantType;
 }
 
 const BestRestaurantItem = ({ restaurant }: BestRestaurantItemType) => {
+  const { isUserLogin } = useAppSelector(({ user }) => user);
   const [starState, setStarState] = useState(false);
 
   const changeStar = (e: MouseEvent) => {
-    setStarState(!starState);
+    if (isUserLogin) {
+      setStarState(!starState);
+    } else {
+      alert('로그인한 사용자만 사용할 수 있는 기능입니다.');
+    }
   };
 
   return (

src/components/Header/Header.styled.tsx

@@ -30,6 +30,7 @@ export const StyledHeader = styled.header<headerprops>`
 
   a {
     margin: 0 25px;
+    text-decoration-line: none;
 
     img {
       width: 100px;
@@ -145,10 +146,6 @@ export const HeaderInput = styled.div<headerInputprops>(({ isMain }) =>
       },
 );
 
-export const headerLink = css`
-  text-decoration-line: none;
-`;
-
 export const searchIcon = css`
   width: 25px;
   height: 25px;

src/components/Header/index.tsx

@@ -7,7 +7,6 @@ import logo from '@/assets/img/logo.svg';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMagnifyingGlass, faUser } from '@fortawesome/free-solid-svg-icons';
 import {
-  headerLink,
   searchIcon,
   blankDiv,
   StyledHeader,
@@ -16,24 +15,26 @@ import {
 
 import { auth } from '@/firebase';
 import { onAuthStateChanged } from 'firebase/auth';
+
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { modalActions } from '@/store/modal/modal-slice';
+import { userActions } from '@/store/user/user-slice';
 
 const Header = () => {
   const dispatch = useAppDispatch();
   const { isOverlayModalOpen } = useAppSelector(({ modal }) => modal);
+  const { isSearchBackModalOpen } = useAppSelector(({ modal }) => modal);
+  const { isUserLogin } = useAppSelector(({ user }) => user);
+
   const [showHeader, setShowHeader] = useState<boolean>(true);
   const [isMainPage, setIsMainPage] = useState<boolean>(false);
-  const [isLogin, setIsLogin] = useState(false);
   const [profileImage, setProfileImage] = useState<string | null>('');
-  const [scrollPosition, setScrollPosition] = useState(0);
+  const [scrollPosition, setScrollPosition] = useState<number>(0);
 
   useEffect(() => {
     window.addEventListener('scroll', updateScroll);
   });
 
-  const { isSearchBackModalOpen } = useAppSelector(({ modal }) => modal);
-
   const onClickToggleSearchBackModal = useCallback(() => {
     dispatch(modalActions.handleSearchBackModal());
   }, [dispatch]);
@@ -42,8 +43,6 @@ const Header = () => {
   }, [dispatch]);
 
   const { pathname } = useLocation();
-  // console.log(pathname);
-  // console.log(isLogin);
 
   const updateScroll = () => {
     setScrollPosition(window.scrollY || document.documentElement.scrollTop);
@@ -52,10 +51,9 @@ const Header = () => {
   onAuthStateChanged(auth, (user) => {
     if (user) {
       setProfileImage(user?.providerData[0].photoURL);
-      setIsLogin(true);
+      dispatch(userActions.handleUserLogin(true));
     } else {
-      // console.log('no user');
-      setIsLogin(false);
+      dispatch(userActions.handleUserLogin(false));
     }
   });
 
@@ -88,18 +86,18 @@ const Header = () => {
             </HeaderInput>
             <ul>
               <li>
-                <Link to="/matjib_list" css={headerLink}>
+                <Link to="/matjib_list">
                   <span>맛집 리스트</span>
                 </Link>
               </li>
               <li>
-                <Link to="/" css={headerLink}>
+                <Link to="/">
                   <span>술집 리스트</span>
                 </Link>
               </li>
             </ul>
             <div>
-              {isLogin ? (
+              {isUserLogin ? (
                 <button className="profileImgBtn" onClick={onClickToggleModal}>
                   <img src={profileImage!} alt="프로필이미지"></img>
                 </button>
@@ -120,7 +118,7 @@ const Header = () => {
       {isOverlayModalOpen && (
         <ProfileIcon
           onClickToggleModal={onClickToggleModal}
-          isLogin={isLogin}
+          isLogin={isUserLogin}
           scroll={scrollPosition}
         ></ProfileIcon>
       )}

src/components/ProfileIcon/List.tsx

@@ -2,6 +2,7 @@ import { useState, MouseEvent } from 'react';
 
 import { Star } from '@/components/IconButton';
 import theme from '@/styles/theme';
+import { useAppSelector } from '@/store/hooks';
 
 import foodImage from '@/assets/img/food.jpg';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -15,10 +16,15 @@ export interface ListProps {
 }
 
 const List = ({ name, address, category, score }: ListProps) => {
+  const { isUserLogin } = useAppSelector(({ user }) => user);
   const [starState, setStarState] = useState(false);
 
   const changeStar = (e: MouseEvent) => {
-    setStarState(!starState);
+    if (isUserLogin) {
+      setStarState(!starState);
+    } else {
+      alert('로그인한 사용자만 사용할 수 있는 기능입니다.');
+    }
   };
 
   return (

src/firebase/type.ts

@@ -20,7 +20,7 @@ export interface PostsOther {
   phone: string;
   category: string;
   time: string[];
-  break: string;
+  breakTime: string;
   menu: [];
   score: number;
   description: string;

src/store/auth/auth-actions.ts

@@ -7,6 +7,11 @@ export const login = createAsyncThunk(
   async (loginType: SocialType, { rejectWithValue }) => {
     try {
       const result = await loginWithSocial(loginType);
+      console.log(result);
+      if (!result) {
+        return;
+      }
+
       await registUser(result?.user?.uid);
       return result?.user?.uid;
     } catch (error: any) {

src/store/index.ts

@@ -1,9 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
 import auth from './auth/auth-slice';
 import modal from './modal/modal-slice';
+import user from './user/user-slice';
 
 const store = configureStore({
-  reducer: { auth, modal },
+  reducer: { auth, modal, user },
 });
 
 export type RootState = ReturnType<typeof store.getState>;

src/store/user/user-slice.ts

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  isUserLogin: false,
+};
+
+const userSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    handleUserLogin(state, action) {
+      state.isUserLogin = action.payload;
+    },
+  },
+});
+
+export const userActions = userSlice.actions;
+
+export default userSlice.reducer;