From 3cda9eba484aa74e175ff89feee5e3d679c0fc4f Mon Sep 17 00:00:00 2001
From: Eugene Ahn <70089733+Eugene-A-01@users.noreply.github.com>
Date: Thu, 6 Jun 2024 00:33:36 +0900
Subject: [PATCH] =?UTF-8?q?ListyWave=20ver2.4.2=20:=20=EB=8C=93=EA=B8=80?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=EC=B6=94=EA=B0=80/=EB=A6=AC=ED=94=84?=
 =?UTF-8?q?=EB=A0=88=EC=8B=9C=ED=86=A0=ED=81=B0=20=EB=A7=8C=EB=A3=8C?=
 =?UTF-8?q?=EA=B8=B0=EA=B0=84=20=EC=9E=AC=EC=84=A4=EC=A0=95/=EA=B0=9C?=
 =?UTF-8?q?=EC=9D=B8=EC=A0=95=EB=B3=B4=EC=B2=98=EB=A6=AC=EB=B0=A9=EC=B9=A8?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80/=EC=BD=9C=EB=A0=89=EC=85=98?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=EC=88=98=EC=A0=95=20(#247)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix: 댓글 기능 추가(댓글 줄바꿈 표시, 비회원 댓글창 클릭시 로그인 모달, 답글 작성자 프로필 클릭 로직 추가), 인트로 페이지 영상 ios 자동재생 문제 테스트 (#242)

* Feat: 답글 프로필 클릭시 해당 유저 마이리스트 페이지도 이동하도록 하는 기능 구현

* Fix: 비회원 댓글창 클릭시 로그인 모달 뜨게 구현

* Feat: textarea 출력시 줄바꿈 인식되게 수정

* Fix: 인트로 페이지 영상 ios에서 자동재생 안되는 문제 (테스트)

* Fix: 답글도 줄바꿈 되도록 수정

* Fix: 댓글 작성 폼 모달 GTM id 수정

* Refactor: refreshToken 만료시간 재설정 (#241)

* Style: 주석 정리

* Feat: useUser store에 사용하지 않는 accessToken 저장 로직 삭제 (사용자 id값만 저장되도록 수정)

* Feat: refreshToken 쿠키 만료시간 재설정

* Feat: 개인정보 처리방침 페이지 연결 추가

* fix: 콜렉션 페이지 bottom nav에 가려지는  하단부 여백 추가

---------

Co-authored-by: 강나현 <142777396+Nahyun-Kang@users.noreply.github.com>
Co-authored-by: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com>
Co-authored-by: Seoyoung <seoyoungiyo@gmail.com>
---
 src/app/auth/redirect/kakao/page.tsx          |   2 +-
 src/app/collection/page.css.ts                |   6 +-
 src/app/collection/page.tsx                   |   4 +-
 src/app/intro/_components/Footer.tsx          |   7 +-
 src/app/intro/_components/Section3.tsx        |   2 +-
 src/app/intro/locale.ts                       |   2 +-
 .../ListDetailOuter/Comment.css.ts            |   3 +-
 .../_components/ListDetailOuter/Comment.tsx   |   2 +-
 .../ListDetailOuter/CommentForm.tsx           | 128 ++++++++++--------
 .../ListDetailOuter/Replies.css.ts            |   3 +-
 .../_components/ListDetailOuter/Replies.tsx   |  51 +++----
 src/components/login/LoginModal.tsx           |  13 --
 src/lib/axios/axiosInstance.ts                |  13 +-
 src/lib/utils/cookie.ts                       |   2 +-
 src/store/useUser.ts                          |   6 +-
 15 files changed, 125 insertions(+), 119 deletions(-)

diff --git a/src/app/auth/redirect/kakao/page.tsx b/src/app/auth/redirect/kakao/page.tsx
index 0e94670c..ab717ecf 100644
--- a/src/app/auth/redirect/kakao/page.tsx
+++ b/src/app/auth/redirect/kakao/page.tsx
@@ -35,7 +35,7 @@ export default function KakaoRedirectPage() {
         });
 
         const { id, accessToken, refreshToken } = res.data;
-        updateUser({ id, accessToken: '' }); // TODO id만 저장하기
+        updateUser({ id });
         setCookie('accessToken', accessToken, 'AT');
         setCookie('refreshToken', refreshToken, 'RT');
 
diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts
index 0aba8f7f..13416ac0 100644
--- a/src/app/collection/page.css.ts
+++ b/src/app/collection/page.css.ts
@@ -1,6 +1,10 @@
 import { style, keyframes } from '@vanilla-extract/css';
 import * as fonts from '@/styles/font.css';
 
+export const wrapper = style({
+  marginBottom: 70,
+});
+
 export const title = style([
   fonts.headlineSmall,
   {
@@ -9,7 +13,7 @@ export const title = style([
 ]);
 
 export const categoryFolders = style({
-  margin: '18px 16px',
+  padding: '18px 16px',
   display: 'grid',
   gridTemplateColumns: '1fr 1fr',
   gridTemplateRows: 'repeat(5, 1fr)',
diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx
index 75668cf4..ca36286d 100644
--- a/src/app/collection/page.tsx
+++ b/src/app/collection/page.tsx
@@ -64,7 +64,7 @@ export default function CollectionPage() {
   };
 
   return (
-    <>
+    <div className={styles.wrapper}>
       <div className={styles.title}>{collectionLocale[language].collection}</div>
       <div className={styles.categoryFolders}>
         {data &&
@@ -89,6 +89,6 @@ export default function CollectionPage() {
             </div>
           ))}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/src/app/intro/_components/Footer.tsx b/src/app/intro/_components/Footer.tsx
index c7ce2c89..adb67a17 100644
--- a/src/app/intro/_components/Footer.tsx
+++ b/src/app/intro/_components/Footer.tsx
@@ -39,7 +39,12 @@ function Footer() {
             </div>
           </div>
           <div className={styles.policyWrapper}>
-            <p>{introLocale[language].privacy}</p>
+            <Link
+              className={styles.policyWrapper}
+              href={'https://cypress-tv-724.notion.site/2118cc63884e4365b753cac553f3f7ed?pvs=4'}
+            >
+              {introLocale[language].privacy}
+            </Link>
             <p>에잇(Eight)</p>
             <p>Makers : 에잇(Eight, listywave8@gmail.com)</p>
             <p>Copyright ©Listywave - All rights reserved</p>
diff --git a/src/app/intro/_components/Section3.tsx b/src/app/intro/_components/Section3.tsx
index 6c3565a5..3895a048 100644
--- 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/intro/locale.ts b/src/app/intro/locale.ts
index e963e84b..1bb68925 100644
--- a/src/app/intro/locale.ts
+++ b/src/app/intro/locale.ts
@@ -138,7 +138,7 @@ export const introLocale = {
   en: {
     start: 'Getting started',
     tour: 'Take a tour',
-    privacy: 'Privacy Statement',
+    privacy: 'Privacy',
     exampleTitles: {
       line1: {
         title1: 'My top 10 favorite celebrities',
diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts
index c13a3c9a..c5217054 100644
--- 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
index 25a631fb..a6e4f132 100644
--- 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
index 7717f2ff..b49517c4 100644
--- a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
+++ b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect } from 'react';
+import { ChangeEvent, Dispatch, useEffect, SetStateAction } from 'react';
 
 import { useUser } from '@/store/useUser';
 import { useIsEditing, useCommentStatus } from '@/store/useComment';
@@ -6,6 +6,9 @@ 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
index f72d459f..89762f40 100644
--- 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
index 1bc91aba..2f9a6d3c 100644
--- 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>
diff --git a/src/components/login/LoginModal.tsx b/src/components/login/LoginModal.tsx
index c338d7b9..1eeac0b9 100644
--- a/src/components/login/LoginModal.tsx
+++ b/src/components/login/LoginModal.tsx
@@ -9,14 +9,7 @@ import KakaoLoginIcon from '/public/icons/kakao_login_narrow.svg';
 import { commonLocale } from '@/components/locale';
 import { useLanguage } from '@/store/useLanguage';
 
-// 다른 소셜 로그인 도입을 위해 주석처리 해둠
-// import NaverLoginIcon from '/public/icons/naver_login.svg';
-// import GoogleLoginIcon from '/public/icons/google_login.svg';
-// import KakaoLoginIcon from '/public/icons/kakao_login.svg';
-
 const oauthType = {
-  naver: 'naver',
-  google: 'google',
   kakao: 'kakao',
 };
 
@@ -45,12 +38,6 @@ export default function LoginModal({ id }: LoginModalProps) {
         </div>
       </div>
       <div className={styles.buttonContainer}>
-        {/* <Link href={`${baseUrl}/auth/${oauthType.naver}`}>
-          <NaverLoginIcon />
-        </Link>
-        <Link href={`${baseUrl}/auth/${oauthType.google}`}>
-          <GoogleLoginIcon />
-        </Link> */}
         <Link id={id} href={`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/auth/${oauthType.kakao}`}>
           <KakaoLoginIcon />
         </Link>
diff --git a/src/lib/axios/axiosInstance.ts b/src/lib/axios/axiosInstance.ts
index 721e5bad..53bcfb4a 100644
--- a/src/lib/axios/axiosInstance.ts
+++ b/src/lib/axios/axiosInstance.ts
@@ -7,7 +7,6 @@ import toastMessage from '../constants/toastMessage';
 
 const axiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_SERVER_DOMAIN,
-  // withCredentials: true, // refreshToken을 고려해서 true로 설정
 });
 
 axiosInstance.interceptors.request.use(
@@ -47,14 +46,8 @@ axiosInstance.interceptors.response.use(
         useUser.getState().logoutUser();
         removeCookie('accessToken');
         removeCookie('refreshToken');
-        // toasting({ type: 'error', txt: toastMessage.ko.userStatusLoggedOut });
 
         isRefreshing = true;
-
-        // 토스트 메세지 후 리다이렉트 시키는게 맞는지 확인
-        // setTimeout(() => {
-        //   location.href = '/';
-        // }, 2000);
       }
 
       if (!isRefreshing) {
@@ -77,13 +70,9 @@ axiosInstance.interceptors.response.use(
         } catch (error) {
           // refreshToken 생성 실패 시,
           useUser.getState().logoutUser();
-          removeCookie('accessToken'); // TODO removeCookieAll
+          removeCookie('accessToken');
           removeCookie('refreshToken');
           toasting({ type: 'error', txt: toastMessage.ko.userStatusLoggedOut });
-
-          // setTimeout(() => {
-          //   location.href = '/';
-          // }, 2000);
         } finally {
           isRefreshing = false;
         }
diff --git a/src/lib/utils/cookie.ts b/src/lib/utils/cookie.ts
index 25c0c6a3..d91cc933 100644
--- a/src/lib/utils/cookie.ts
+++ b/src/lib/utils/cookie.ts
@@ -6,7 +6,7 @@ export const setCookie = (name: string, value: string, type: 'AT' | 'RT') => {
   return cookies.set(name, value, {
     path: '/',
     secure: true,
-    maxAge: type === 'AT' ? 60 * 30 : 60 * 60 * 24, // 현재 refreshToken 쿠키로 전달 도입 전까지, AT는 만료 시간 30분, RT는 24시간으로 설정
+    maxAge: type === 'AT' ? 60 * 30 : 60 * 60 * 24 * 14, // AT는 만료 시간 30분, RT는 14일로 설정
   });
 };
 
diff --git a/src/store/useUser.ts b/src/store/useUser.ts
index 3faff542..04a8ac06 100644
--- a/src/store/useUser.ts
+++ b/src/store/useUser.ts
@@ -4,18 +4,16 @@ import { UserOnLoginType } from '@/lib/types/user';
 
 interface InitialUserType {
   id: null;
-  accessToken: '';
 }
 
 interface UserStateType {
-  user: InitialUserType | Pick<UserOnLoginType, 'id' | 'accessToken'>;
-  updateUser: (user: Pick<UserOnLoginType, 'id' | 'accessToken'>) => void;
+  user: InitialUserType | Pick<UserOnLoginType, 'id'>;
+  updateUser: (user: Pick<UserOnLoginType, 'id'>) => void;
   logoutUser: () => void;
 }
 
 const initialValue: InitialUserType = {
   id: null,
-  accessToken: '',
 };
 
 // 사용자 정보(id) 및 상태(로그인, 로그아웃)를 저장하는 store