main스크롤바 위치 기억, 컨벤션 수정, key값 수정 및 삭제 (#issue 206)

src/components/common/layout/Layout.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import * as S from './Layout.styled';
 import Header from '../header/Header';
+import { ScrollRestoration } from 'react-router-dom';
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 function Layout({ children }: LayoutProps) {
   return (
     <>
+      <ScrollRestoration />
       <Header />
       <S.LayoutContainer>{children}</S.LayoutContainer>
     </>

src/components/common/skillTagBox/SkillTagBox.tsx

@@ -30,7 +30,7 @@ export default function SkillTagBox({
             {skillTagsData?.map((skillTagData) => (
               <SkillTag
                 skillTagData={skillTagData}
-                key={skillTagData.id}
+                key={`skillTagBox-${skillTagData.id}`}
                 $select={
                   (isMain &&
                     searchFiltersSkillTag?.includes(skillTagData.id)) ||

src/components/home/projectCardLists/ProjectCardLists.tsx

@@ -33,7 +33,10 @@ export default function ProjectCardLists() {
       <S.Wrapper $flex={isFlex}>
         {projectListsData && Boolean(projectListsData.projects.length) ? (
           projectListsData.projects.map((list) => (
-            <Link to={`${ROUTES.projectDetail}/${list.id}`} key={list.id}>
+            <Link
+              to={`${ROUTES.projectDetail}/${list.id}`}
+              key={`projectCardLists-${list.id}`}
+            >
               <CardList list={list} data-cardId={list.id} />
             </Link>
           ))

src/components/home/projectCardLists/cardList/CardList.tsx

@@ -24,7 +24,10 @@ export default function CardList({ list }: CardListProps) {
         <S.TagsWrapper>
           {Boolean(list.positionTags.length) &&
             listPositionTag.map((tag) => (
-              <PositionButton position={tag.name} key={tag.id} />
+              <PositionButton
+                position={tag.name}
+                key={`cardListPosition-${tag.id}`}
+              />
             ))}
           {list.positionTags.length > listPositionTag.length && (
             <S.EllipsisIconButton>+{othersPosition}</S.EllipsisIconButton>
@@ -34,7 +37,7 @@ export default function CardList({ list }: CardListProps) {
       <S.TagsWrapper>
         {Boolean(list.skillTags.length) &&
           listSkillTag.map((tag) => (
-            <S.SkillTagImgWrapper key={tag.id}>
+            <S.SkillTagImgWrapper key={`cardListSkill-${tag.id}`}>
               <S.SkillTagImg src={tag.img} alt={tag.name} />
             </S.SkillTagImgWrapper>
           ))}

src/components/home/projectCardLists/pagination/Pagination.tsx

@@ -64,7 +64,7 @@ export default function Pagination() {
 
         {pagination.map((pageIndex) => (
           <S.Pagination
-            key={pageIndex}
+            key={`pagination-${pageIndex}`}
             data-id={pageIndex}
             $select={currentPage === pageIndex ? true : false}
           >

src/components/home/projectStats/ProjectStats.tsx

@@ -9,7 +9,11 @@ export default function ProjectStats() {
     <S.Container>
       <S.Wrapper>
         {projectStatData.map((data) => (
-          <ProjectStat title={data.label} count={data.count} key={data.count} />
+          <ProjectStat
+            title={data.label}
+            count={data.count}
+            key={`projectStat-${data.label}`}
+          />
         ))}
       </S.Wrapper>
     </S.Container>

src/components/home/searchFiltering/filteringContents/filtering/Filtering.tsx

@@ -78,7 +78,7 @@ export default function Filtering({ selects, defaultValue }: FilteringProps) {
               {addAll.map((select) => (
                 <S.SelectButton
                   className='option'
-                  key={select.id}
+                  key={`${defaultValue}-${select.id}`}
                   onClick={() => handleValueClick(select.name, select.id)}
                 >
                   {select.name}

src/components/manageProjects/CardList.tsx

@@ -21,7 +21,7 @@ function CardList({ projects }: CardListProps) {
 
       {projects?.map((data) => (
         <Link key={data.id} to={`${ROUTES.manageProjectsRoot}/${data.id}`}>
-          <Card key={data.id} project={data} />
+          <Card project={data} />
         </Link>
       ))}
     </S.CardListWrapper>

src/components/mypage/appliedProject/MyApplyProject.tsx

@@ -23,7 +23,7 @@ const MyApplyProject = () => {
         <S.Container>
           {myAppliedStatusListData?.map((status) => (
             <Link key={status.id} to={`${ROUTES.projectDetail}/${status.id}`}>
-              <MyStatus key={status.id} status={status} />
+              <MyStatus status={status} />
             </Link>
           ))}
         </S.Container>

src/components/mypage/myProfile/myProfile.tsx

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import * as S from './myProfile.styled';
+import * as S from './MyProfile.styled';
 import { ERROR_MESSAGES } from '../../../constants/authConstants';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -21,7 +21,7 @@ import {
 import { ROUTES } from '../../../constants/routes';
 import { Link } from 'react-router-dom';
 import BeginnerIcon from '../../../assets/beginner.svg';
-import OptionBox from './optionBox';
+import OptionBox from './OptionBox';
 import TextareaAutosize from 'react-textarea-autosize';
 import Modal from '../../common/modal/Modal';
 import { useModal } from '../../../hooks/useModal';

src/components/mypage/myProfile/optionBox.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import * as S from './optionBox.styled';
+import * as S from './OptionBox.styled';
 
 interface OptionBoxProps {
   id: number;

src/components/userPage/userProfile/UserProfile.tsx

@@ -1,5 +1,5 @@
 import Title from '../../common/title/Title';
-import * as S from '../../mypage/myProfile/myProfile.styled';
+import * as S from '../../mypage/myProfile/MyProfile.styled';
 import BeginnerIcon from '../../../assets/beginner.svg';
 import { useUserProfileInfo } from '../../../hooks/useUserInfo';
 import { useParams } from 'react-router-dom';

src/hooks/useProjectStatistic.ts

@@ -12,7 +12,6 @@ export const useProjectStatistic = () => {
     ProjectStatDataReset[]
   >([]);
 
-  // 실시간성 데이터가 필요할까?
   const { data } = useQuery({
     queryKey: ['projectStat'],
     queryFn: async () => await getProjectStatistic(),

src/pages/projectDetail/ProjectDetail.tsx

@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from 'react-router-dom';
+import { ScrollRestoration, useNavigate, useParams } from 'react-router-dom';
 import ProjectInformation from '../../components/projectFormComponents/projectInformationText/ProjectInformation';
 import useGetProjectData from '../../hooks/useJoinProject';
 import * as S from './ProjectDetail.styled';
@@ -35,6 +35,7 @@ const ProjectDetail = () => {
 
   return (
     <S.Container>
+      <ScrollRestoration />
       <S.Header>
         <S.Title>{data.title}</S.Title>
         <S.ProfileContainer>