merge main

.eslintrc.json

@@ -23,6 +23,15 @@
   },
   "ignorePatterns": ["build", "dist", "public"], // lint 무시 파일 정하기
 
+  "overrides": [
+    {
+      "files": ["vite.config.ts", "*.config.ts", "*.config.js"],
+      "env": {
+        "node": true
+      }
+    }
+  ],
+
   "rules": {
     "react/self-closing-comp": [
       "error",
@@ -44,29 +53,25 @@
     "no-undef": "error", // 정의 안 한 변수 사용 x
     "indent": "off", // 프리티어 충돌로 인한 OFF
     "no-trailing-spaces": "error", // 쓸데없는 공백 없애기
-    "import/newline-after-import": ["error", { "count": 1 }], // import 구문들 뒤에 한 칸 띄우고 코드 작성
+    "import/newline-after-import": "off", // import 구문들 뒤에 한 칸 띄우고 코드 작성
     "react-hooks/rules-of-hooks": "error", // 리액트 훅의 순서를 지키게끔 한다. (React는 Hook이 호출되는 순서에 의존하기 때문에)
     "arrow-parens": ["error", "always"], // arrow-function 인자가 2개 이상이면 괄호 필수
     "no-multi-spaces": "error", // 스페이스 여러개 금지
+    "no-useless-catch": "off", // 쓸데없는 catch 예외 처리 금지
     "import/no-unresolved": "off", // 타입스크립트에서 경로를 제대로 잡지 못할 때 사용 or  eslint-import-resolver-typescript 설치
 
     "import/order": [
-      "error",
+      "warn",
       {
         "groups": [["builtin", "external"], "internal", ["parent", "sibling"], "index"], //import 순서를 고정. builtin- 외부- 내부
         "pathGroups": [
-          // react 컴포넌트가 builtin 뒤에 (external import 앞에 나오도록 설정)
-          // { "pattern": "react", "group": "builtin", "position": "after" },
-          // { "pattern": "react-dom", "group": "builtin", "position": "after" },
           { "pattern": "./**", "group": "index" }, // './'로 시작하는 상대 경로 파일은 internal 그룹에 속하도록 설정
-          { "pattern": "../**", "group": "parent", "position": "befo∂re" } // '../'로 시작하는 상위 경로 파일은 parent 그룹에 속하도록 설정
+          { "pattern": "../**", "group": "parent", "position": "before" } // '../'로 시작하는 상위 경로 파일은 parent 그룹에 속하도록 설정
         ],
-        // "pathGroupsExcludedImportTypes": ["react", "react-dom"], // pathGroups가 올바르게 적용하기 위해.. (확실치 않음)
         "alphabetize": {
           "order": "asc", // 알파벳 순서 정렬 방식
           "caseInsensitive": true // 알파벳 대소문자 구분
-        },
-        "newlines-between": "always" // group들 사이마다 개행 적용 (group 내부에서 개행 적용 불가)
+        }
       }
     ]
   }

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -29,20 +29,19 @@
     "@tiptap/pm": "^2.2.3",
     "@tiptap/react": "^2.2.3",
     "@tiptap/starter-kit": "^2.2.3",
-    "@types/react-slick": "^0.23.13",
     "axios": "^1.6.5",
     "emotion-reset": "^3.0.1",
     "history": "^5.3.0",
     "lottie-web": "^5.12.2",
     "quill-divider": "^0.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-ga4": "^2.1.0",
     "react-helmet-async": "^2.0.5",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.26.1",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "^1.8.1"
+    "react-slick": "0.29.0",
+    "slick-carousel": "1.8.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
@@ -51,8 +50,8 @@
     "@emotion/babel-plugin": "^11.11.0",
     "@prerenderer/renderer-puppeteer": "^1.2.4",
     "@prerenderer/rollup-plugin": "^0.3.12",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "18.2.43",
+    "@types/react-dom": "18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
     "@vitejs/plugin-legacy": "1.8.1",
@@ -68,21 +67,30 @@
     "msw": "^2.2.10",
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "3.1.1",
-    "puppeteer": "13",
+    "puppeteer": "^24.34.0",
     "react-snap": "^1.23.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "source-map-explorer": "^2.5.3",
     "stylelint": "^16.1.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",
     "terser": "^5.37.0",
-    "typescript": "^5.2.2",
+    "typescript": "5.2.2",
     "vite": "^5.0.8",
     "vite-plugin-svgr": "^4.2.0"
   },
   "msw": {
     "workerDirectory": [
       "public"
     ]
+  },
+  "engines": {
+    "node": "24.x"
+  },
+  "resolutions": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@types/react": "18.2.47",
+    "@types/react-dom": "18.2.18"
   }
 }

src/components/commons/Footer.tsx

@@ -23,16 +23,16 @@ const Footer = () => {
       </FooterLogoLayout>
       <FooterLayout>
         <IconContainer>
-          <a href={FOOTER_LINK.MAIL} target="_blank">
+          <a href={FOOTER_LINK.MAIL} target="_blank" rel="noopener noreferrer">
             <FooterMailIc />
           </a>
-          <a href={FOOTER_LINK.INSTAGRAM} target="_blank">
+          <a href={FOOTER_LINK.INSTAGRAM} target="_blank" rel="noopener noreferrer">
             <FooterInstaIc />
           </a>
-          <a href={FOOTER_LINK.NOTION} target="_blank">
+          <a href={FOOTER_LINK.NOTION} target="_blank" rel="noopener noreferrer">
             <FooterNotionIc />
           </a>
-          <a href={FOOTER_LINK.WALLA} target="_blank">
+          <a href={FOOTER_LINK.WALLA} target="_blank" rel="noopener noreferrer">
             <FooterWallaIc />
           </a>
         </IconContainer>

src/components/commons/modal/constants.ts

@@ -6,5 +6,5 @@ export const MODAL_SIZES = {
 };
 
 export const MOBILE_MODAL_SIZES = {
-  DEFAULT: '33.5rem'
-}
+  DEFAULT: '33.5rem',
+};

src/constants/defaultImgUrl.ts

@@ -1 +1 @@
-export const DEFAULT_IMG_URL = 'https://mile-new-s3.s3.ap-northeast-2.amazonaws.com/mile.png';
+export const DEFAULT_IMG_URL = 'https://2026mile.s3.ap-northeast-2.amazonaws.com/mile.png';

src/pages/admin/components/EditGroupInfo.tsx

@@ -46,8 +46,8 @@ const EditGroupInfo = () => {
   const [passDuplicate, setPassDuplicate] = useState(false);
   const [editBtnAcitve, setEditBtnActive] = useState(false);
 
-  let isGroupNameChanged = beforeGroupName !== groupName;
-  let groupNameLengthValid = groupName.length <= 10;
+  const isGroupNameChanged = beforeGroupName !== groupName;
+  const groupNameLengthValid = groupName.length <= 10;
   const handleHover = () => {
     setIsHover((prev) => !prev);
   };

src/pages/admin/components/RenderAdminContent.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 
 import EditGroupInfo from './EditGroupInfo';
 import MemberManage from './MemberManage';
@@ -9,7 +9,6 @@ import TopicAdmin from './TopicAdmin';
 import { MODAL } from '../constants/modal';
 import { useAdminTopic, useDeleteGroup, useFetchMemberInfo } from '../hooks/queries';
 
-import { useNavigate } from 'react-router-dom';
 import { MakeGroupAdminIc } from '../../../assets/svgs';
 import InputModal from '../../../components/commons/inputModal/InputModal';
 import { DefaultModal, DefaultModalBtn } from '../../../components/commons/modal/DefaultModal';

src/pages/groupFeed/carousel/Carousel.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import Slider from 'react-slick';
+import Slider, { Settings } from 'react-slick';
 
 import CarouselContainer from './CarouselContainer';
 import EachArticle from './EachArticle';
@@ -34,7 +34,7 @@ const Carousel = ({
 
   const [activeCategoryId, setActiveCategoryId] = useState<number>(1);
 
-  const settings = {
+  const settings: Settings = {
     dots: false,
     infinite: false,
     speed: 500,

src/pages/loading/Loading.tsx

@@ -2,9 +2,9 @@ import { useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 
 import * as lottie from 'lottie-web/build/player/lottie_light';
-type LettiePlayer = typeof lottie.default;
-const lottiePlayer = lottie as any as LettiePlayer;
 import LoadingLottie from '../../assets/gifs/loading.json';
+type LettiePlayer = typeof lottie.default;
+const lottiePlayer = lottie as unknown as LettiePlayer;
 
 const Loading = () => {
   const spinnerRef = useRef<HTMLDivElement | null>(null);

src/pages/main/components/GroupCarousel.tsx

@@ -1,29 +1,30 @@
 import styled from '@emotion/styled';
-
 import { useNavigate } from 'react-router-dom';
-import Slider from 'react-slick';
-import Responsive from '../../../components/commons/Responsive/Responsive';
+import Slider, { Settings } from 'react-slick';
+
 import '../styles/slick-theme.css';
 import '../styles/slick.css';
-import CarouselContent from './CarouselContent';
 import { groupPropTypes } from '../types/groupContent';
 
 import {
   MainGroupRoutingBtn,
   MainIcnArrowBlack as MainIcnArrowBlackIcon,
 } from '../../../assets/svgs';
+import Responsive from '../../../components/commons/Responsive/Responsive';
 import Spacing from '../../../components/commons/Spacing';
 import { MOBILE_MEDIA_QUERY } from '../../../styles/mediaQuery';
 
+import CarouselContent from './CarouselContent';
+
 export interface carouselItemPropTypes {
   moimId?: string;
   data?: groupPropTypes[];
   groupLength?: number;
 }
 
 const GroupCarousel = ({ data }: carouselItemPropTypes) => {
-  const settings = {
-    arrow: false,
+  const settings: Settings = {
+    arrows: false,
     dots: false,
     infinite: false,
     speed: 500,
@@ -74,7 +75,10 @@ const GroupCarousel = ({ data }: carouselItemPropTypes) => {
                 {moim.moimPosts.map(
                   (post, index) =>
                     index < 3 && (
-                      <PostCard onClick={() => handleRoutingDetail(moim.moimId, post.postId)}>
+                      <PostCard
+                        key={post.postId}
+                        onClick={() => handleRoutingDetail(moim.moimId, post.postId)}
+                      >
                         <PostCardInfoWrapper>
                           <Topic>{post.topicName}</Topic>
                           <Title> {post.postTitle}</Title>
@@ -94,10 +98,10 @@ const GroupCarousel = ({ data }: carouselItemPropTypes) => {
                 {moim.moimPosts.length < 3 && (
                   <GroupRoutingWrapper onClick={() => handleButtonOnClick(moim.moimId)}>
                     <GroupRoutingTitle>
-                      이 모임에 대해서 <br></br>더 궁금하신 가요?
+                      이 모임에 대해서 <br />더 궁금하신 가요?
                     </GroupRoutingTitle>
 
-                    <MainGroupRoutingBtn></MainGroupRoutingBtn>
+                    <MainGroupRoutingBtn />
                   </GroupRoutingWrapper>
                 )}
               </PostContainer>

src/pages/postDetail/PostDetail.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
-import { useParams } from 'react-router-dom';
 import { DefaultModal, DefaultModalBtn } from '../../components/commons/modal/DefaultModal';
 import Responsive from '../../components/commons/Responsive/Responsive';
 import useModal from '../../hooks/useModal';
@@ -32,40 +31,37 @@ const PostDetail = () => {
   const navigate = useNavigate();
   const { postId } = useParams();
   const { groupId } = useParams();
+  const location = useLocation();
 
   // 모달 연결 위한 state
   const [modalType, setModalType] = useState('');
   // modal 열고닫음
   const { isModalOpen, handleShowModal, handleCloseModal } = useModal();
 
-  if (!postId || !groupId) {
-    return <Error />;
-  }
   //글 삭제시 쿼리키 가져오기 위해서
-  const location = useLocation();
   const topicId = location.state?.topicId;
 
+  // 모든 hooks는 early return 전에 호출되어야 함
   const {
     isPublic,
     isLoading: publicStatusLoading,
     isError: publicStatusError,
-  } = useGroupFeedPublicStatus(groupId);
+  } = useGroupFeedPublicStatus(groupId || '');
   const {
     isMember,
     isLoading: feedAuthLoading,
     isError: groupAuthError,
-  } = useGroupFeedAuth(groupId);
-  const { data, isError, isLoading } = useGetPostDetail(postId);
-  const { data: postAuth } = useCheckPostAuth(postId);
-  const { mutate: deletePost } = useDeletePost(postId, topicId, groupId);
+  } = useGroupFeedAuth(groupId || '');
+  const { data, isError, isLoading } = useGetPostDetail(postId || '');
+  const { data: postAuth } = useCheckPostAuth(postId || '');
+  const { mutate: deletePost } = useDeletePost(postId || '', topicId, groupId || '');
 
   const postData = data?.data;
   const accessToken = localStorage.getItem('accessToken');
   const role = postAuth?.data.data.role;
 
   //글 작성 후 뒤로가기 하면 모임페이지로 이동하는 로직
   //메인페이지 -> 글 상세페이지 -> 뒤로가기 -> 글 모임페이지가 되어 UX에 좋은 영향을 끼치지 않는 부분도 있어서 추후 적용
-
   useEffect(() => {
     if (!publicStatusLoading && !feedAuthLoading) {
       if (!isPublic) {
@@ -75,7 +71,11 @@ const PostDetail = () => {
         }
       }
     }
-  }, [isPublic, role]);
+  }, [isPublic, role, publicStatusLoading, feedAuthLoading, navigate]);
+
+  if (!postId || !groupId) {
+    return <Error />;
+  }
   if (isLoading || publicStatusLoading || feedAuthLoading) {
     return <Loading />;
   }

src/pages/postDetail/components/CommentInputBox.tsx

@@ -212,7 +212,6 @@ const MobileCommentForm = styled.textarea<{ isMainComment: boolean }>`
   @media ${MOBILE_MEDIA_QUERY} {
     ${({ theme }) => theme.fonts.mSubtitle1_1};
   }
-
 `;
 
 const CommentPostBtn = styled.button<{ $isComment: string }>`

src/pages/postDetail/hooks/queries.ts

@@ -143,7 +143,7 @@ export const useDeleteCurious = (postId: string) => {
           if (oldData === undefined) {
             return undefined;
           }
-          let optimisticCuriousCount =
+          const optimisticCuriousCount =
             oldData.data.curiousCount === 0
               ? oldData.data.curiousCount
               : oldData.data.curiousCount - 1;

src/pages/postPage/PostPage.tsx

@@ -603,12 +603,8 @@ const PostPage = () => {
   return (
     <PostPageWrapper>
       {/* 헤더 */}
-      <Responsive only="desktop" >
-        {HeaderComponent.desktop}
-      </Responsive>
-      <Responsive only="mobile" >
-        {HeaderComponent.mobile}
-      </Responsive>
+      <Responsive only="desktop">{HeaderComponent.desktop}</Responsive>
+      <Responsive only="mobile">{HeaderComponent.mobile}</Responsive>
       <Spacing marginBottom="6.4" mobileMarginBottom="5.6" />
 
       {/* 글 제출 막는 toast */}

src/pages/postPage/components/ImageUpload.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
 
 import { EDITOR_DEFAULT_IMG } from '../constants/editorDefaultImg';
-
 import useImageUpload from '../../../hooks/useImageUpload';
 import { FileType } from '../../../types/imageUploadType';
 import { EditorThuminputIcnActiveIc, EditorThuminputIcnUnactiveIc } from './../../../assets/svgs';

src/pages/postPage/components/mobile/MobileToolbarFontColor.tsx

@@ -1,6 +1,7 @@
 import * as ToolbarIcons from '../../../../assets/svgs/editorSVG';
 import styled from '@emotion/styled';
 import { MOBILE_MEDIA_QUERY } from '../../../../styles/mediaQuery';
+import React from 'react';
 
 const toolbarColorSvgs = [
   'EditorTextColorBlackIcn',