From 1314081c3f7622797b6192def8274ba224a18a05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=84=ED=98=84?=
 <77152650+Creative-Lee@users.noreply.github.com>
Date: Thu, 14 Sep 2023 12:16:12 +0900
Subject: [PATCH] =?UTF-8?q?Refactor/#400=20=EB=B9=84=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EC=83=81=ED=83=9C=EB=A1=9C=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EC=8B=9C=EB=8F=84=20=EC=8B=9C=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EA=B6=8C=EC=9C=A0=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=EC=9D=B4=20=ED=91=9C=EC=8B=9C=EB=90=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20(#401)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

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

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

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

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

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

* fix: 린트 에러 수정
---
 .../features/auth/components/LoginModal.tsx   | 20 ++++-----
 .../comments/components/CommentForm.tsx       | 42 +++++++++----------
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/frontend/src/features/auth/components/LoginModal.tsx b/frontend/src/features/auth/components/LoginModal.tsx
index 9d5a5b296..259daf090 100644
--- a/frontend/src/features/auth/components/LoginModal.tsx
+++ b/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;
+`;
diff --git a/frontend/src/features/comments/components/CommentForm.tsx b/frontend/src/features/comments/components/CommentForm.tsx
index 9c523bd76..a1f99e03b 100644
--- a/frontend/src/features/comments/components/CommentForm.tsx
+++ b/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,20 +49,8 @@ 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}
@@ -69,7 +58,22 @@ const CommentForm = ({ getComment, songId, partId }: CommentFormProps) => {
               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;