ListyWave Ver2.0.2 : IOS PWA 설치 유도 팝업 / 마이페이지 클릭 안됨 이슈 핫픽스 / 탐색페이지 이슈 해결

src/app/account/_components/LanguageDropdown.tsx

@@ -1,22 +1,42 @@
-import { useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+
 import * as styles from './LanguageDropdown.css';
-import useBooleanOutput from '@/hooks/useBooleanOutput';
-import useOnClickOutside from '@/hooks/useOnClickOutside';
+
 import { useLanguage } from '@/store/useLanguage';
 import { accountLocale } from '@/app/account/locale';
+import useBooleanOutput from '@/hooks/useBooleanOutput';
 
 export default function LanguageDropdown() {
-  const { isOn, toggle, handleSetOff } = useBooleanOutput();
-  const { ref } = useOnClickOutside(handleSetOff);
+  const dropDownRef = useRef<HTMLDivElement>(null);
+  const { isOn, handleSetOff, toggle } = useBooleanOutput();
   const { language, setLanguage } = useLanguage();
 
   const handleSelectLanguage = (language: 'ko' | 'en') => {
     setLanguage(language);
     handleSetOff();
   };
 
+  const handleClickOutside = useCallback(
+    (e: Event) => {
+      if (dropDownRef.current !== null && !dropDownRef.current.contains(e.target as Node)) {
+        handleSetOff();
+      }
+    },
+    [handleSetOff]
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchend', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.addEventListener('touchend', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
   return (
-    <div ref={ref} className={styles.container}>
+    <div className={styles.container} ref={dropDownRef}>
       <div className={styles.triggerDiv} onClick={toggle}>
         {language === 'ko' ? accountLocale[language].korean : accountLocale[language].english}
       </div>

src/app/intro/_components/Footer.tsx

@@ -40,7 +40,8 @@ function Footer() {
           </div>
           <div className={styles.policyWrapper}>
             <p>{introLocale[language].privacy}</p>
-            <p>[email protected]</p>
+            <p>에잇(Eight)</p>
+            <p>Makers : 에잇(Eight, [email protected])</p>
             <p>Copyright ©Listywave - All rights reserved</p>
           </div>
         </div>

src/app/intro/_components/MotionWrapper.tsx

@@ -32,7 +32,7 @@ function MotionWrapper({ children, delay, variantsType = 'vertical' }: MotionWra
 
   const ref = useIntersectionObserver(() => {
     controls.start('visible');
-  }, 0.5);
+  }, 0.4);
 
   return (
     <motion.div

src/app/intro/_components/Section3.css.ts

@@ -5,17 +5,20 @@ import * as fonts from '@/styles/font.css';
 export const background = style({
   width: '100%',
   height: '752px',
-  padding: '71px 30px 77px',
+  padding: '71px 0 77px',
 
   backgroundColor: vars.color.white,
 });
 
 export const wrapper = style({
+  position: 'relative',
   display: 'flex',
   flexDirection: 'column',
 });
 
 export const recordWrapper = style({
+  position: 'relative',
+  padding: '0 30px',
   display: 'flex',
   alignItems: 'center',
   gap: '7px',
@@ -43,6 +46,8 @@ export const recText = style([fonts.labelLarge, {}]);
 export const contentsWrapper = style({
   margin: '55.5px 0 46px',
 
+  position: 'relative',
+
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
@@ -75,15 +80,25 @@ export const subTitleWrapper = style([
 ]);
 
 export const imageWrapper = style({
+  width: '100%',
+  height: '400px',
   position: 'relative',
 });
 
+export const video = style({
+  width: '100%',
+  height: 'auto',
+
+  border: 'none',
+});
+
+// blurbox이 검은색으로 바뀌는 이상 현상이 있어서 잠시 주석화
 export const blurBox = style({
   width: '100%',
   height: '174px',
 
   position: 'absolute',
-  bottom: -40,
+  bottom: -20,
 
   background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.00) -8.85%, #FFF 53.58%)',
 });

src/app/intro/_components/Section3.tsx

@@ -26,12 +26,7 @@ function Section3() {
               <span>{introLocale[language].section.message6}</span>
             </div>
             <div className={styles.imageWrapper}>
-              <Image
-                src={'/images/list_section3.png'}
-                alt={introLocale[language].section.createListImage}
-                width={300}
-                height={314}
-              />
+              <video src={'/videos/video_section3.mp4'} autoPlay loop muted className={styles.video} />
               <div className={styles.blurBox}></div>
             </div>
           </div>

src/app/intro/_components/Section7.tsx

@@ -36,7 +36,7 @@ function Section7() {
                 <div className={styles.linkWrapper}>listywave.com/user/1</div>
               </MotionWrapper>
               <Image
-                src={'/images/section7_phone.png'}
+                src={'/images/section7_phone2.png'}
                 alt={introLocale[language].section.cellphoneImage}
                 width={255}
                 height={518}

src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts

@@ -65,6 +65,7 @@ export const commentContent = style({
   fontWeight: 500,
   lineHeight: 'normal',
   letterSpacing: '-0.36px',
+  wordBreak: 'break-word',
 });
 
 export const deletedComment = style({

src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx

@@ -11,7 +11,7 @@ import timeDiff from '@/lib/utils/time-diff';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import { CommentType } from '@/lib/types/commentType';
 import { UserType } from '@/lib/types/userProfileType';
-import { useCommentId } from '@/store/useComment';
+import { useCommentId, useCommentStatus } from '@/store/useComment';
 import { commentLocale } from '@/app/list/[listId]/locale';
 
 import * as styles from './Comment.css';
@@ -25,9 +25,10 @@ import { useLanguage } from '@/store/useLanguage';
  */
 interface CommentProps {
   comment?: CommentType;
-  onUpdate: (userName?: string) => void;
+  setActiveNickname: (userName?: string) => void;
   activeNickname?: string | null;
   handleSetCommentId: (id: number | undefined) => void;
+  handleSetComment: (comment: string) => void;
   listId?: number;
   commentId?: number;
   currentUserInfo?: UserType;
@@ -36,17 +37,18 @@ interface CommentProps {
 
 function Comment({
   comment,
-  onUpdate,
+  setActiveNickname: onUpdate,
   handleSetCommentId,
+  handleSetComment,
   listId,
   commentId,
   currentUserInfo,
-
   handleEdit,
 }: CommentProps) {
   const { language } = useLanguage();
   const queryClient = useQueryClient();
   const { setCommentId } = useCommentId();
+  const { setStatusCreateReply, setStatusEdit } = useCommentStatus();
 
   //현재 작성중인 답글의 원댓글 정보를 업데이트 하는 로직
   const handleActiveNicknameAndIdUpdate = () => {
@@ -55,11 +57,15 @@ function Comment({
     if (!currentUserName && !currentCommentId) {
       return null;
     }
+    handleSetComment('');
+    setStatusCreateReply();
     onUpdate(currentUserName);
     handleSetCommentId(currentCommentId);
   };
 
+  //수정하기 버튼을 누르면 실행되는 함수
   const handleEditButtonClick = (comment: string) => {
+    setStatusEdit();
     handleEdit(comment);
     setCommentId(commentId as number);
   };