merge: 로그인 제한 완화

refactor: 로그인 제한 완화

Author: bellasimi

src/components/Header/index.jsx

@@ -68,9 +68,11 @@ export const Header = ({ prev, title, info, complete, onComplete }) => {
       <InnerRight>
         {info && (
           <>
-            <Badge dot={isSeen}>
-              <Icon.Link to="/user/notification" name="NOTIFICATION" size={30} />
-            </Badge>
+            {token && (
+              <Badge dot={isSeen}>
+                <Icon.Link to="/user/notification" name="NOTIFICATION" size={30} />
+              </Badge>
+            )}
             <Icon.Link to="/user/myinfo" name="MY_INFO" size={30} />
           </>
         )}

src/components/Modal/customs/LoginRequireModal.jsx

@@ -0,0 +1,35 @@
+import { Modal } from 'components';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import theme from 'styles/theme';
+
+const MODAL_TITLE_LOGIN_REQUIRED = '로그인이 필요한 서비스입니다.';
+const MODAL_DESCRIPTION_LOGIN_REQUIRED = '로그인 화면으로 이동하시겠어요?';
+
+const LoginRequireModal = ({ visible, onClose }) => {
+  const navigate = useNavigate();
+
+  const handleClick = useCallback(() => {
+    navigate('/login', { replace: true });
+  }, [navigate]);
+
+  return (
+    <Modal visible={visible} onClose={onClose}>
+      <Modal.Content
+        title={MODAL_TITLE_LOGIN_REQUIRED}
+        description={MODAL_DESCRIPTION_LOGIN_REQUIRED}
+      />
+      <Modal.Button onClick={handleClick}>예</Modal.Button>
+      <Modal.Button onClick={onClose} style={modalButtonStyle}>
+        아니오
+      </Modal.Button>
+    </Modal>
+  );
+};
+
+const modalButtonStyle = {
+  color: theme.color.fontBlack,
+  backgroundColor: theme.color.backgroundNormal,
+};
+
+export default LoginRequireModal;

src/hooks/useScrollToTop.js

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { jsx, css } from '@emotion/react';
+import { css } from '@emotion/react';
 import { useCallback, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
@@ -13,6 +12,9 @@ import { useUserContext } from 'contexts/UserContext';
 import { IMAGE_URLS } from 'utils/constants/images';
 import displayedAt from 'utils/functions/displayedAt';
 import IconButton from 'components/basic/Icon/IconButton';
+import { COMMENT, HEART, HEART_RED } from 'utils/constants/icons/names';
+import { LIKE } from 'utils/constants/notificationTypes';
+import LoginRequireModal from 'components/Modal/customs/LoginRequireModal';
 
 const PostBody = ({ index, post, isDetailPage = false }) => {
   const { _id: postId, image, likes, comments, createdAt, author } = post || {};
@@ -21,7 +23,8 @@ const PostBody = ({ index, post, isDetailPage = false }) => {
   const [heartCount, setHeartCount] = useState(likes.length);
   const [likeId, setLikeId] = useState('');
   const [isShown, setIsShown] = useState(false);
-  const [localToken] = useLocalToken();
+  const [modalOn, setModalOn] = useState(false);
+  const [token] = useLocalToken();
   const { currentUser } = useUserContext();
   const [, setCurrentPostIndex] = useScrollPosition();
   const navigate = useNavigate();
@@ -55,24 +58,29 @@ const PostBody = ({ index, post, isDetailPage = false }) => {
   }, [setCurrentPostIndex, index, postId, post, isDetailPage, navigate]);
 
   const handleClickHeart = useCallback(async () => {
+    if (!token) {
+      setModalOn(true);
+      return;
+    }
+
     setOnHeart(!onHeart);
     if (!onHeart) {
       setHeartCount(heartCount + 1);
-      if (localToken && postId) {
-        const like = await setLike(localToken, postId).then((res) => res.data);
+      if (token && postId) {
+        const like = await setLike(token, postId).then((res) => res.data);
         setLikeId(like._id);
         if (currentUser.id !== author._id) {
-          await setNotification(localToken, 'LIKE', like._id, author._id, postId);
+          await setNotification(token, LIKE, like._id, author._id, postId);
         }
       }
     } else {
       setHeartCount(heartCount - 1);
-      if (localToken && likeId) {
-        await setDisLike(localToken, likeId).then((res) => res.data);
+      if (token && likeId) {
+        await setDisLike(token, likeId).then((res) => res.data);
         setLikeId('');
       }
     }
-  }, [onHeart, heartCount, postId, likeId, author._id, currentUser, localToken]);
+  }, [onHeart, heartCount, postId, likeId, author._id, currentUser, token]);
 
   const handleClickTag = useCallback(
     (tag) => {
@@ -86,9 +94,13 @@ const PostBody = ({ index, post, isDetailPage = false }) => {
     [index, setCurrentPostIndex, navigate],
   );
 
-  const handleClickMore = () => {
+  const handleClickMore = useCallback(() => {
     setIsShown(true);
-  };
+  }, []);
+
+  const handleCloseModal = useCallback(() => {
+    setModalOn(false);
+  }, []);
 
   return (
     <Container>
@@ -103,7 +115,7 @@ const PostBody = ({ index, post, isDetailPage = false }) => {
       <Contents>
         <IconButtons>
           <IconButton
-            name={onHeart ? 'HEART_RED' : 'HEART'} // Todo: 상수화
+            name={onHeart ? HEART_RED : HEART}
             size={22}
             style={IconButtonStyle}
             onClick={handleClickHeart}
@@ -112,7 +124,7 @@ const PostBody = ({ index, post, isDetailPage = false }) => {
               {heartCount}
             </Text>
           </IconButton>
-          <IconButton name="COMMENT" size={22} onClick={navigateToDetailPage}>
+          <IconButton name={COMMENT} size={22} onClick={navigateToDetailPage}>
             <Text fontSize={16} style={IconButtonTextStyle}>
               {comments.length}
             </Text>
@@ -135,6 +147,7 @@ const PostBody = ({ index, post, isDetailPage = false }) => {
         </Tags>
         <DateText>{displayedAt(createdAt)}</DateText>
       </Contents>
+      <LoginRequireModal visible={modalOn} onClose={handleCloseModal} />
     </Container>
   );
 };

src/pages/MainPage/IconButton.jsx

@@ -6,6 +6,7 @@ import { useUserContext } from 'contexts/UserContext';
 import theme from 'styles/theme';
 import useLocalToken from 'hooks/useLocalToken';
 import IconButton from 'components/basic/Icon/IconButton';
+import { MORE } from 'utils/constants/icons/names';
 
 const PostHeader = ({ post, isDetailPage }) => {
   const {
@@ -60,7 +61,7 @@ const PostHeader = ({ post, isDetailPage }) => {
         <Profile src={image} userName={fullName} onClick={handleClickProfile} />
         {isMyPost && (
           <>
-            <IconButton name="MORE" size={20} onClick={handleClickMore} />
+            <IconButton name={MORE} size={20} onClick={handleClickMore} />
             <Modal visible={isModal} onClose={onClose}>
               <Modal.Custom>
                 <Buttons>

src/pages/MainPage/PostBody.jsx

@@ -24,7 +24,7 @@ const MainPage = () => {
       }).then((res) => res.data);
       setPosts(nextPosts);
       setMax(nextPosts[0].channel.posts.length);
-      setOffset(prevPostIndex ? prevPostIndex : 5);
+      setOffset(prevPostIndex ? prevPostIndex : LIMIT);
     })();
   }, []);
 

src/pages/MainPage/PostHeader.jsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import PostItem from 'pages/MainPage/PostItem';
-import { Avatar, Icon, Modal, PageWrapper } from 'components';
+import { Avatar, Modal, PageWrapper } from 'components';
 import IconButton from 'components/basic/Icon/IconButton';
 import theme from 'styles/theme';
 import { useRef, useCallback, useState, useEffect } from 'react';
@@ -10,6 +10,9 @@ import { getPostData } from 'utils/apis/postApi';
 import { useUserContext } from 'contexts/UserContext';
 import { setNotification } from 'utils/apis/userApi';
 import displayedAt from 'utils/functions/displayedAt';
+import { MORE } from 'utils/constants/icons/names';
+import { COMMENT } from 'utils/constants/notificationTypes';
+import LoginRequireModal from 'components/Modal/customs/LoginRequireModal';
 
 const PostDetailPage = () => {
   const navigate = useNavigate();
@@ -19,7 +22,8 @@ const PostDetailPage = () => {
   const inputRef = useRef(null);
   const [localToken] = useLocalToken();
   const { currentUser, onAddComment, onDeleteComment } = useUserContext();
-  const [isModal, setIsModal] = useState(false);
+  const [loginModalOn, setLoginModalOn] = useState(false);
+  const [commentModalOn, setCommentModalOn] = useState(false);
   const commentIdToDelete = useRef('');
 
   useEffect(() => {
@@ -33,6 +37,10 @@ const PostDetailPage = () => {
   const handleSubmit = useCallback(
     async (e) => {
       e.preventDefault();
+      if (!localToken) {
+        setLoginModalOn(true);
+        return;
+      }
       if (!inputRef.current.value) {
         return;
       }
@@ -44,7 +52,7 @@ const PostDetailPage = () => {
       setInputHeight('30px');
       inputRef.current.value = '';
       if (currentUser.id !== post.author._id) {
-        await setNotification(localToken, 'COMMENT', newComment._id, post.author._id, post._id);
+        await setNotification(localToken, COMMENT, newComment._id, post.author._id, post._id);
       }
     },
     [post, localToken, currentUser.id, onAddComment],
@@ -67,12 +75,12 @@ const PostDetailPage = () => {
   );
 
   const handleMoreClick = useCallback((commentId) => {
-    setIsModal(true);
+    setCommentModalOn(true);
     commentIdToDelete.current = commentId;
   }, []);
 
   const handleDeleteComment = useCallback(async () => {
-    setIsModal(false);
+    setCommentModalOn(false);
     if (commentIdToDelete.current) {
       await onDeleteComment(commentIdToDelete.current);
       const nextComments = post.comments.filter(
@@ -85,8 +93,9 @@ const PostDetailPage = () => {
     }
   }, [post, onDeleteComment]);
 
-  const onClose = useCallback(() => {
-    setIsModal(false);
+  const handleCloseModal = useCallback(() => {
+    setLoginModalOn(false);
+    setCommentModalOn(false);
   }, []);
 
   return (
@@ -118,7 +127,7 @@ const PostDetailPage = () => {
                     </Content>
                     {_id === currentUser.id && (
                       <IconButton
-                        name="MORE"
+                        name={MORE}
                         size={20}
                         style={MoreButtonStyle}
                         onClick={() => handleMoreClick(commentId)}
@@ -129,11 +138,14 @@ const PostDetailPage = () => {
                 .reverse()}
             </CommentList>
           </Container>
-          <Modal visible={isModal} onClose={onClose}>
-            <Modal.Custom>
-              <DeleteCommentButton onClick={handleDeleteComment}>삭제</DeleteCommentButton>
-            </Modal.Custom>
-          </Modal>
+          {commentModalOn && (
+            <Modal visible={commentModalOn} onClose={handleCloseModal}>
+              <Modal.Custom>
+                <DeleteCommentButton onClick={handleDeleteComment}>삭제</DeleteCommentButton>
+              </Modal.Custom>
+            </Modal>
+          )}
+          {loginModalOn && <LoginRequireModal visible={loginModalOn} onClose={handleCloseModal} />}
         </PageWrapper>
       )}
     </>

src/pages/MainPage/index.jsx

@@ -0,0 +1,23 @@
+import useLocalToken from 'hooks/useLocalToken';
+import { useNavigate, Outlet } from 'react-router-dom';
+import LoginRequireModal from 'components/Modal/customs/LoginRequireModal';
+import { useCallback } from 'react';
+
+const PrivateWrapper = () => {
+  const [token] = useLocalToken();
+  const navigate = useNavigate();
+
+  const handleCloseModal = useCallback(() => {
+    navigate(-1);
+  }, [navigate]);
+
+  return token ? (
+    <Outlet />
+  ) : (
+    <>
+      <Outlet />
+      <LoginRequireModal visible={true} onClose={handleCloseModal} />
+    </>
+  );
+};
+export default PrivateWrapper;