Refactor/#400 비로그인 상태로 댓글 작성 시도 시 로그인 권유 모달이 표시되도록 변경 (#401)

* refactor: 로그인 모달의 로그인 버튼 클릭시 로그인 페이지로 이동하도록 변경

* refactor: 비로그인 상태로 댓글 입력 시도 시, 로그인 모달이 표시되도록 변경

변경 과정에서 Avatar, Input 컴포넌트에 대한 중복된 삼항연산자를 제거하였음.

* refactor: 입력할 수 없는 input에 부여한 maxLength 속성 제거

* refactor: disabled 속성을 활용한 개선

input을 모달 열린 상태일 때 비활성화 하도록 하여 핸들러 함수를 제거함

* refactor: 로그인 버튼을 Link 태그로 랩핑

* refactor: 사용하지 않는 코드 삭제

* fix: 린트 에러 수정

frontend/src/features/auth/components/LoginModal.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import Modal from '@/shared/components/Modal/Modal';
 import ROUTE_PATH from '@/shared/constants/path';
@@ -10,12 +10,6 @@ interface LoginModalProps {
 }
 
 const LoginModal = ({ isOpen, closeModal, messageList }: LoginModalProps) => {
-  const navigate = useNavigate();
-
-  const linkToAuth = () => {
-    navigate(ROUTE_PATH.LOGIN);
-  };
-
   return (
     <Modal isOpen={isOpen} closeModal={closeModal}>
       <ModalTitle>로그인이 필요합니다</ModalTitle>
@@ -28,9 +22,9 @@ const LoginModal = ({ isOpen, closeModal, messageList }: LoginModalProps) => {
         <ConfirmButton type="button" onClick={closeModal}>
           닫기
         </ConfirmButton>
-        <LoginButton type="button" onClick={linkToAuth}>
-          로그인하러 가기
-        </LoginButton>
+        <FlexLink to={ROUTE_PATH.LOGIN}>
+          <LoginButton type="button">로그인하러 가기</LoginButton>
+        </FlexLink>
       </ButtonContainer>
     </Modal>
   );
@@ -66,7 +60,7 @@ const ConfirmButton = styled(Button)`
 `;
 
 const LoginButton = styled(Button)`
-  flex: 1.5;
+  width: 100%;
   background-color: ${({ theme: { color } }) => color.primary};
 `;
 
@@ -75,3 +69,7 @@ const ButtonContainer = styled.div`
   gap: 16px;
   width: 100%;
 `;
+
+const FlexLink = styled(Link)`
+  flex: 1.5;
+`;

frontend/src/features/comments/components/CommentForm.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
 import { css, styled } from 'styled-components';
 import defaultAvatar from '@/assets/icon/avatar-default.svg';
 import shookshook from '@/assets/icon/shookshook.svg';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
+import LoginModal from '@/features/auth/components/LoginModal';
 import Avatar from '@/shared/components/Avatar';
+import useModal from '@/shared/components/Modal/hooks/useModal';
 import useToastContext from '@/shared/components/Toast/hooks/useToastContext';
-import ROUTE_PATH from '@/shared/constants/path';
 import { useMutation } from '@/shared/hooks/useMutation';
 import fetcher from '@/shared/remotes';
 
@@ -18,6 +18,7 @@ interface CommentFormProps {
 
 const CommentForm = ({ getComment, songId, partId }: CommentFormProps) => {
   const [newComment, setNewComment] = useState('');
+  const { isOpen, closeModal: closeLoginModal, openModal: openLoginModal } = useModal();
   const { user } = useAuthContext();
 
   const isLoggedIn = !!user;
@@ -48,28 +49,31 @@ const CommentForm = ({ getComment, songId, partId }: CommentFormProps) => {
     <Container onSubmit={submitNewComment}>
       <Flex>
         {isLoggedIn ? (
-          <Avatar src={shookshook} alt="슉슉이" />
-        ) : (
-          <Avatar src={defaultAvatar} alt="익명 프로필" />
-        )}
-        {isLoggedIn ? (
-          <Input
-            type="text"
-            value={newComment}
-            onChange={changeNewComment}
-            placeholder="댓글 추가..."
-            maxLength={200}
-          />
-        ) : (
-          <LoginLink to={ROUTE_PATH.LOGIN}>
+          <>
+            <Avatar src={shookshook} alt="슉슉이" />
             <Input
               type="text"
               value={newComment}
               onChange={changeNewComment}
               placeholder="댓글 추가..."
               maxLength={200}
             />
-          </LoginLink>
+          </>
+        ) : (
+          <>
+            <Avatar src={defaultAvatar} alt="익명 프로필" />
+            <Input
+              type="text"
+              onFocus={openLoginModal}
+              placeholder="댓글 추가..."
+              disabled={isOpen}
+            />
+            <LoginModal
+              isOpen={isOpen}
+              messageList={['로그인하고 댓글을 작성해 보세요!']}
+              closeModal={closeLoginModal}
+            />
+          </>
         )}
       </Flex>
       {isLoggedIn && (
@@ -88,10 +92,6 @@ const CommentForm = ({ getComment, songId, partId }: CommentFormProps) => {
 
 export default CommentForm;
 
-const LoginLink = styled(Link)`
-  flex: 1;
-`;
-
 const Flex = styled.div`
   display: flex;
   gap: 14px;