🔨 fix: 릴리즈 배포 후 버그 해결 및 필요한 기능 추가

grass-diary/src/components/Button/Menus.tsx

@@ -24,7 +24,9 @@ const Menus = ({ children, icon }: MenusProps) => {
       }
     };
 
-    document.addEventListener('click', closeMenus);
+    if (open) {
+      document.addEventListener('click', closeMenus);
+    }
 
     return () => document.removeEventListener('click', closeMenus);
   }, [open]);

grass-diary/src/components/Comment/CommentDisplay.tsx

@@ -10,19 +10,11 @@ import { COMMENT } from '@constants/message';
 
 const CommentDisplay = ({ comment, parentId }: CommentDisplayProps) => {
   const { data: writer } = useWriterProfile(comment.memberId);
-  const memberId = useUser();
+  const { memberId } = useUser();
   const { setReplyId } = useCommentActions();
   const { date } = useTodayDate();
-  const setting = useRef<HTMLDivElement>(null);
   const [isToday, setIsToday] = useState(false);
 
-  const reply = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    if (setting.current) {
-      if (setting.current.contains(e.target as HTMLElement)) return;
-    }
-    setReplyId(parentId);
-  };
-
   useEffect(() => {
     if (date && comment.createdDate) {
       if (
@@ -43,7 +35,7 @@ const CommentDisplay = ({ comment, parentId }: CommentDisplayProps) => {
       </S.WriterBox>
     </S.CommentItem>
   ) : (
-    <S.CommentItem onClick={reply} $isMe={memberId === comment.memberId}>
+    <S.CommentItem $isMe={memberId === comment.memberId}>
       <S.TopBox>
         <S.WriterBox>
           {comment.depth ? <ReplyIcon /> : null}
@@ -59,16 +51,19 @@ const CommentDisplay = ({ comment, parentId }: CommentDisplayProps) => {
               : ''}
           </S.TimeText>
         </S.WriterBox>
-        <div ref={setting}>
-          <CommentSetting
-            commentId={comment.commentId}
-            writerId={comment.memberId}
-          />
-        </div>
+        <CommentSetting
+          commentId={comment.commentId}
+          writerId={comment.memberId}
+        />
       </S.TopBox>
-      <S.ContentBox $isReply={comment.depth ? true : false}>
-        {comment.content}
-      </S.ContentBox>
+      <S.BottomBox>
+        <S.ContentText $isReply={comment.depth ? true : false}>
+          {comment.content}
+        </S.ContentText>
+        <S.ReplyButton onClick={() => setReplyId(parentId)}>
+          댓글 달기
+        </S.ReplyButton>
+      </S.BottomBox>
     </S.CommentItem>
   );
 };

grass-diary/src/components/Comment/CommentSetting.tsx

@@ -13,7 +13,7 @@ import { Menus, Menu } from '@components/index';
 
 const CommentSetting = ({ commentId, writerId }: CommentSettingProps) => {
   const diaryId = useParamsId();
-  const memberId = useUser();
+  const { memberId } = useUser();
   const { detail } = useDiaryDetail(diaryId);
   const { setEditId } = useCommentActions();
   const { mutate: deleteComment } = useDeleteComment(diaryId);

grass-diary/src/components/Comment/Input.tsx

@@ -1,5 +1,5 @@
 import * as S from '@styles/component/Comment/Input.style';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useParamsId } from '@hooks/useParamsId';
 import { useUser } from '@state/user/useUser';
@@ -18,10 +18,10 @@ const CommentInput = ({
   isCancelBtn,
   isPatch,
 }: CommentInputProps) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { profileImageURL, nickname } = useProfile();
   const { resetEditId, resetReplyId } = useCommentActions();
   const [focus, setFocus] = useState(false);
-  const [rows, setRows] = useState(1);
 
   // focus 될 때
   const onFocus = () => setFocus(true);
@@ -31,7 +31,6 @@ const CommentInput = ({
 
   const commentHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setText(e.target.value);
-    setRows(e.target.value.split('\n').length);
   };
 
   const cancel = () => {
@@ -41,12 +40,13 @@ const CommentInput = ({
 
   const submitBtn = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
     submit(e);
-    setRows(1);
   };
 
   useEffect(() => {
-    if (text) {
-      setRows(text.split('\n').length);
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height =
+        textareaRef.current.scrollHeight + 'px';
     }
   }, [text]);
 
@@ -61,7 +61,8 @@ const CommentInput = ({
       </S.TopBox>
       <S.InputBox>
         <S.Input
-          rows={rows}
+          rows={1}
+          ref={textareaRef}
           value={text}
           onFocus={onFocus}
           onBlur={onBlur}
@@ -84,7 +85,7 @@ const CommentInput = ({
 // parentId가 null이라면 댓글, 아니라면 대댓글
 const PostInput = ({ parentId }: PostInputProps) => {
   const diaryId = useParamsId();
-  const memberId = useUser();
+  const { memberId } = useUser();
   const { mutate: postComment } = usePostComment(diaryId);
   const { resetReplyId } = useCommentActions();
   const [text, setText] = useState('');

grass-diary/src/components/Feed/Feed.tsx

@@ -19,9 +19,9 @@ interface IFeedProps {
 
 const Feed = ({ feed, isTop }: IFeedProps) => {
   const navigate = useNavigate();
-  const memberId = useUser();
+  const { memberId } = useUser();
   const { data: writer } = useWriterProfile(feed.memberId);
-  const { modal } = useModal();
+  const { modal, loginModal } = useModal();
 
   const title =
     `${feed.createdAt.slice(2, 4)}년 ` +
@@ -56,7 +56,7 @@ const Feed = ({ feed, isTop }: IFeedProps) => {
     const button2 = {
       active: true,
       text: MODAL.login_induce.button,
-      clickHandler: handleGoogleLogin,
+      clickHandler: loginModal,
       color: semantic.light.accent.solid.hero,
       interaction: INTERACTION.accent.subtle(),
     };

grass-diary/src/components/Layout/Footer.tsx

@@ -6,14 +6,32 @@ import logoIcon from '@image/sampleLogo_white.png';
 import { FOOTER } from '@constants/message';
 
 const Footer = () => {
+  const moving = (url: string) => {
+    window.open(url, '_blank', 'noopener, noreferrer');
+  };
+
   return (
     <S.Footer>
       <S.Container>
-        <S.LogoBox>
-          <S.LogoIcon src={logoIcon} />
-          <LogoText fill={semantic.light.base.solid.white} />
-        </S.LogoBox>
-        <S.CopyRightText>{FOOTER.copyright}</S.CopyRightText>
+        <S.TopBox>
+          <S.LogoBox>
+            <S.LogoIcon src={logoIcon} />
+            <LogoText fill={semantic.light.base.solid.white} />
+          </S.LogoBox>
+          <S.ButtonContainer>
+            <S.FooterButton onClick={() => moving(FOOTER.terms_of_use_url)}>
+              이용약관
+            </S.FooterButton>
+            <S.FooterButton onClick={() => moving(FOOTER.privacy_policy_url)}>
+              개인정보 처리방침
+            </S.FooterButton>
+          </S.ButtonContainer>
+        </S.TopBox>
+
+        <S.CopyRightContainer>
+          <S.Text>{FOOTER.copyright_front}</S.Text>
+          <S.Text> {FOOTER.copyright_back}</S.Text>
+        </S.CopyRightContainer>
       </S.Container>
     </S.Footer>
   );

grass-diary/src/components/Layout/Header.tsx

@@ -4,14 +4,35 @@ import MenuBar from './MenuBar';
 import { Profile } from '@components/index';
 import { useNavigate } from 'react-router-dom';
 import { useUser } from '@state/user/useUser';
-import { API_URI } from '@services/index';
+import { useModal } from '@state/modal/useModal';
+import { useEffect } from 'react';
+import { MODAL } from '@constants/message';
+import { semantic } from '@styles/semantic';
+import { INTERACTION } from '@styles/interaction';
 
 const Header = () => {
-  const memberId = useUser();
+  const { memberId, isError } = useUser();
+  const { modal, loginModal } = useModal();
   const navigate = useNavigate();
-  const handleGoogleLogin: TGoogleLogin = () => {
-    window.open(`${API_URI}/api/auth/google`, '_self');
-  };
+
+  useEffect(() => {
+    const manualLogout = localStorage.getItem('manualLogout');
+    if (isError && manualLogout === null) {
+      const setting = {
+        title: MODAL.login_expiration.title,
+        content: MODAL.login_expiration.content,
+      };
+
+      const button1 = {
+        active: true,
+        text: MODAL.confirm,
+        color: semantic.light.accent.solid.hero,
+        interaction: INTERACTION.accent.subtle(),
+      };
+
+      modal(setting, button1);
+    }
+  }, [isError]);
 
   return (
     <S.Header>
@@ -29,7 +50,7 @@ const Header = () => {
             <MenuBar />
           </S.MenuBarBox>
         ) : (
-          <S.LoginButton onClick={handleGoogleLogin}>로그인</S.LoginButton>
+          <S.LoginButton onClick={loginModal}>로그인</S.LoginButton>
         )}
       </S.Container>
     </S.Header>

grass-diary/src/components/Layout/Layout.tsx

@@ -1,8 +1,7 @@
 import { Outlet } from 'react-router-dom';
 import Header from './Header';
 import Footer from './Footer';
-import SnackBar from './SnackBar';
-import { Toast, Modal } from '@components/index';
+import { Toast, Modal, SnackBar } from '@components/index';
 
 const Layout = () => {
   return (

grass-diary/src/components/Layout/MenuBar.tsx

@@ -3,6 +3,7 @@ import setting from '@svg/settings.svg';
 import logout from '@svg/logout.svg';
 import arrow from '@svg/arrow_drop_down.svg';
 import useLogout from '@hooks/useLogout';
+import history from '@svg/history.svg';
 import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { Menus, Menu } from '@components/index';
@@ -23,6 +24,11 @@ const MenuBar = () => {
           onClick={() => navigate('/mypage')}
           text={'마이페이지'}
           svg={person}
+        />
+        <Menu
+          onClick={() => navigate('/rewardpage')}
+          text={'리워드 내역'}
+          svg={history}
           line={0.25}
         />
         <Menu