Fix: 댓글 기능 추가(댓글 줄바꿈 표시, 비회원 댓글창 클릭시 로그인 모달, 답글 작성자 프로필 클릭 로직 추가), 인트…

…로 페이지 영상 ios 자동재생 문제 테스트 (#242) * Feat: 답글 프로필 클릭시 해당 유저 마이리스트 페이지도 이동하도록 하는 기능 구현 * Fix: 비회원 댓글창 클릭시 로그인 모달 뜨게 구현 * Feat: textarea 출력시 줄바꿈 인식되게 수정 * Fix: 인트로 페이지 영상 ios에서 자동재생 안되는 문제 (테스트) * Fix: 답글도 줄바꿈 되도록 수정 * Fix: 댓글 작성 폼 모달 GTM id 수정
8-Sprinters · May 21, 2024 · e1a67f1 · e1a67f1
1 parent 2a61b39
commit e1a67f1
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 83 deletions.
diff --git a/src/app/intro/_components/Section3.tsx b/src/app/intro/_components/Section3.tsx
@@ -26,7 +26,7 @@ function Section3() {
               <span>{introLocale[language].section.message6}</span>
             </div>
             <div className={styles.imageWrapper}>
-              <video src={'/videos/video_section3.mp4'} autoPlay loop muted className={styles.video} />
+              <video src={'/videos/video_section3.mp4'} autoPlay loop muted playsInline className={styles.video} />
               <div className={styles.blurBox}></div>
             </div>
           </div>

diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts
@@ -63,9 +63,10 @@ export const commentCreatedTime = style({
 export const commentContent = style({
   fontSize: '1.2rem',
   fontWeight: 500,
-  lineHeight: 'normal',
+  // lineHeight: 'normal',
   letterSpacing: '-0.36px',
   wordBreak: 'break-word',
+  whiteSpace: 'pre-wrap',
 });
 
 export const deletedComment = style({

diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx
@@ -139,7 +139,7 @@ function Comment({
               <span className={styles.commentCreatedTime}>{comment && timeDiff(comment?.updatedDate)}</span>
             </div>
             {!comment?.isDeleted ? (
-              <p className={styles.commentContent}>{comment?.content}</p>
+              <div className={styles.commentContent}>{comment?.content}</div>
             ) : (
               <span className={styles.deletedComment}>{commentLocale[language].deletedMessage}</span>
             )}

diff --git a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
@@ -1,11 +1,14 @@
-import { ChangeEvent, useEffect } from 'react';
+import { ChangeEvent, Dispatch, useEffect, SetStateAction } from 'react';
 
 import { useUser } from '@/store/useUser';
 import { useIsEditing, useCommentStatus } from '@/store/useComment';
 import { useLanguage } from '@/store/useLanguage';
 import useResizeTextarea from '@/hooks/useResizeTextarea';
 import { commentPlaceholder } from '@/lib/constants/placeholder';
 import { commentLocale } from '@/app/list/[listId]/locale';
+import Modal from '@/components/Modal/Modal';
+import LoginModal from '@/components/login/LoginModal';
+import useBooleanOutput from '@/hooks/useBooleanOutput';
 
 import { vars } from '@/styles/theme.css';
 import * as styles from './Comments.css';
@@ -37,6 +40,7 @@ function CommentForm({
   const { language } = useLanguage();
   const { isEditing } = useIsEditing();
   const { textareaRef, handleResizeHeight } = useResizeTextarea();
+  const { isOn, handleSetOn, handleSetOff } = useBooleanOutput();
 
   const handleResetTextArea = () => {
     if (textareaRef.current !== null) {
@@ -51,13 +55,11 @@ function CommentForm({
 
   const handleSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
     handleSubmit(e);
-    // handleResizeHeight();
     handleResetTextArea();
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey && !isPending) {
-      // handleResizeHeight();
       handleResetTextArea();
       e.preventDefault();
       handleSubmit(e);
@@ -69,6 +71,12 @@ function CommentForm({
     handleResizeHeight();
   };
 
+  const handleClickInactiveForm = () => {
+    if (!userId) {
+      handleSetOn();
+    }
+  };
+
   const textAreaHeight = () => {
     if (textareaRef.current === null) {
       return false;
@@ -106,61 +114,69 @@ function CommentForm({
   }, [textareaRef, handleResizeHeight]);
 
   return (
-    <div className={styles.formWrapperOuter}>
-      <div
-        className={`${styles.formWrapperInner} ${!!activeNickname || isEditing || textAreaHeight() ? styles.activeFormWrapper : ''}`}
-      >
-        {status === 'createReply' && activeNickname && (
-          <div className={styles.activeReplyWrapper}>
-            <span className={styles.replyNickname}>
-              {language === 'ko'
-                ? `@${activeNickname} ${commentLocale.ko.replyNickname}`
-                : `${commentLocale.en.replyNickname} @${activeNickname}`}
-            </span>
-            <CancelButton
-              className={styles.clearButton}
-              alt={commentLocale[language].cancelButtonAlt}
-              onClick={handleUpdate}
-              width={18}
-              height={18}
-              fill={vars.color.gray7}
-            />
-          </div>
-        )}
-        {status === 'edit' && isEditing && (
-          <div className={styles.activeReplyWrapper}>
-            <span className={styles.replyNickname}>{commentLocale[language].editing}</span>
-            <CancelButton
-              className={styles.clearButton}
-              alt={commentLocale[language].cancelButtonAlt}
-              onClick={handleCancelForm}
-              width={18}
-              height={18}
-              fill={vars.color.gray7}
-            />
-          </div>
-        )}
-        <form className={styles.formContainer} onSubmit={handleSubmitForm}>
-          <textarea
-            rows={1}
-            className={styles.formInput}
-            value={comment}
-            onChange={handleTextareaChange}
-            disabled={!userId}
-            ref={textareaRef}
-            placeholder={
-              userId === null ? commentPlaceholder[language].requiredLogin : commentPlaceholder[language].comment
-            }
-            onKeyDown={handleKeyDown}
-          />
-          {comment && (
-            <button type="submit" disabled={isPending} className={styles.formButton}>
-              <Airplane width={20} height={20} fill={vars.color.blue} />
-            </button>
+    <>
+      {isOn && (
+        <Modal handleModalClose={handleSetOff} size="large">
+          <LoginModal id="commentLoginBtn" />
+        </Modal>
+      )}
+      <div className={styles.formWrapperOuter}>
+        <div
+          className={`${styles.formWrapperInner} ${!!activeNickname || isEditing || textAreaHeight() ? styles.activeFormWrapper : ''}`}
+        >
+          {status === 'createReply' && activeNickname && (
+            <div className={styles.activeReplyWrapper}>
+              <span className={styles.replyNickname}>
+                {language === 'ko'
+                  ? `@${activeNickname} ${commentLocale.ko.replyNickname}`
+                  : `${commentLocale.en.replyNickname} @${activeNickname}`}
+              </span>
+              <CancelButton
+                className={styles.clearButton}
+                alt={commentLocale[language].cancelButtonAlt}
+                onClick={handleUpdate}
+                width={18}
+                height={18}
+                fill={vars.color.gray7}
+              />
+            </div>
+          )}
+          {status === 'edit' && isEditing && (
+            <div className={styles.activeReplyWrapper}>
+              <span className={styles.replyNickname}>{commentLocale[language].editing}</span>
+              <CancelButton
+                className={styles.clearButton}
+                alt={commentLocale[language].cancelButtonAlt}
+                onClick={handleCancelForm}
+                width={18}
+                height={18}
+                fill={vars.color.gray7}
+              />
+            </div>
           )}
-        </form>
+          <form className={styles.formContainer} onSubmit={handleSubmitForm}>
+            <textarea
+              rows={1}
+              className={styles.formInput}
+              value={comment}
+              onChange={handleTextareaChange}
+              readOnly={!userId}
+              ref={textareaRef}
+              placeholder={
+                userId === null ? commentPlaceholder[language].requiredLogin : commentPlaceholder[language].comment
+              }
+              onKeyDown={handleKeyDown}
+              onClick={handleClickInactiveForm}
+            />
+            {comment && (
+              <button type="submit" disabled={isPending} className={styles.formButton}>
+                <Airplane width={20} height={20} fill={vars.color.blue} />
+              </button>
+            )}
+          </form>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 

diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Replies.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Replies.css.ts
@@ -41,7 +41,7 @@ export const deleteButton = style({
 });
 
 export const profileImage = style({
-  flex: '0 0 1',
+  flex: '0 0 0',
 
   borderRadius: '16px',
   backgroundColor: vars.color.gray7,
@@ -85,4 +85,5 @@ export const replyContent = style({
   fontWeight: 500,
   lineHeight: 'normal',
   letterSpacing: '-0.36px',
+  whiteSpace: 'pre-wrap',
 });
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx
@@ -1,5 +1,6 @@
 'use client';
 import Image from 'next/image';
+import Link from 'next/link';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import DeleteModalButton from '@/app/list/[listId]/_components/ListDetailOuter/DeleteModalButton';
@@ -81,6 +82,7 @@ function Reply({ reply, listId, currentUserInfo, handleEdit, commentId }: ReplyP
   const { setStatusEdit } = useCommentStatus();
   const { setCommentId } = useCommentId();
   const { setReplyId } = useReplyId();
+
   const deleteReplyMutation = useMutation({
     mutationFn: () => deleteReply({ listId: listId, commentId: reply?.commentId, replyId: reply?.id }),
     onSuccess: () => {
@@ -98,32 +100,35 @@ function Reply({ reply, listId, currentUserInfo, handleEdit, commentId }: ReplyP
   const handleDeleteButtonClick = () => {
     deleteReplyMutation.mutate();
   };
+
   return (
     <>
       <div className={styles.replyWrapper}>
-        {reply.userProfileImageUrl ? (
-          <Image
-            src={reply.userProfileImageUrl}
-            className={styles.profileImage}
-            width={20}
-            height={20}
-            alt={replyLocale[language].profileImageAlt}
-            style={{
-              objectFit: 'cover',
-            }}
-          />
-        ) : (
-          <Image
-            src={fallbackProfile}
-            className={styles.profileImage}
-            width={20}
-            height={20}
-            alt={replyLocale[language].profileImageAlt}
-            style={{
-              objectFit: 'cover',
-            }}
-          />
-        )}
+        <Link href={`/user/${reply?.userId}/mylist`}>
+          {reply.userProfileImageUrl ? (
+            <Image
+              src={reply.userProfileImageUrl}
+              className={styles.profileImage}
+              width={20}
+              height={20}
+              alt={replyLocale[language].profileImageAlt}
+              style={{
+                objectFit: 'cover',
+              }}
+            />
+          ) : (
+            <Image
+              src={fallbackProfile}
+              className={styles.profileImage}
+              width={20}
+              height={20}
+              alt={replyLocale[language].profileImageAlt}
+              style={{
+                objectFit: 'cover',
+              }}
+            />
+          )}
+        </Link>
         <div className={styles.replyContainer}>
           <div className={styles.replyInformationWrapper}>
             <span className={styles.replyWriter}>{reply.userNickname}</span>