Fix: 불필요한 Link 태그 제거

8-Sprinters · Dec 17, 2024 · c1a32e0 · c1a32e0
1 parent e1d1f5d
commit c1a32e0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/app/(home)/_components/FeedLists.css.ts b/src/app/(home)/_components/FeedLists.css.ts
@@ -3,6 +3,10 @@ import { vars } from '@/styles/__theme.css';
 
 export const listBackground = createVar();
 
+export const listItemWrapper = style({
+  cursor: 'pointer',
+});
+
 export const wrapperOuter = style({
   padding: '0 16px 84px 16px',
   marginTop: '12px',
@@ -112,6 +116,7 @@ export const profileImageWrapper = style({
   height: '30px',
 
   position: 'relative',
+  cursor: 'pointer',
 });
 
 export const ownerProfileImage = style({

diff --git a/src/app/(home)/_components/FeedLists.tsx b/src/app/(home)/_components/FeedLists.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useRouter } from 'next/navigation';
 
 import SimpleList from '@/components/SimpleList/SimpleList';
 import getRecentLists from '@/app/_api/home/getRecentLists';
@@ -20,6 +21,7 @@ import NoDataButton from '@/components/NoData/NoDataButton';
 import { commonLocale } from '@/components/locale';
 import { useLanguage } from '@/store/useLanguage';
 import { useTab } from '@/store/useTab';
+import useMoveToPage from '@/hooks/useMoveToPage';
 
 interface FeedListsType {
   category?: string;
@@ -29,6 +31,7 @@ interface FeedListsType {
 function FeedLists({ category, tab = 'recent' }: FeedListsType) {
   const current_QueryKey = tab === 'recent' ? [QUERY_KEYS.getRecentLists, category] : [QUERY_KEYS.getFollowingLists];
   const { setCurrentTab } = useTab();
+  const { onClickMoveToPage } = useMoveToPage();
 
   //리스트 무한스크롤 리액트 쿼리 함수
   const {
@@ -82,11 +85,9 @@ function FeedLists({ category, tab = 'recent' }: FeedListsType) {
           {feedLists && feedLists?.length !== 0 ? (
             feedLists?.map((item, index) => {
               return (
-                <Link href={`/list/${item.id}`} key={item.id}>
-                  <li>
-                    <FeedListItem item={item} index={index} />
-                  </li>
-                </Link>
+                <li key={item.id} onClick={onClickMoveToPage(`/list/${item.id}`)} className={styles.listItemWrapper}>
+                  <FeedListItem item={item} index={index} />
+                </li>
               );
             })
           ) : (
@@ -116,6 +117,7 @@ interface FeedListItemType {
 
 function FeedListItem({ item, index }: FeedListItemType) {
   const { language } = useLanguage();
+  const { onClickMoveToPage } = useMoveToPage();
 
   const COLOR_INDEX = (num: number) => num % 5;
 
@@ -125,8 +127,8 @@ function FeedListItem({ item, index }: FeedListItemType) {
       style={assignInlineVars({ [styles.listBackground]: exploreBackgroundColors[COLOR_INDEX(index)] })}
     >
       <div className={styles.listTopWrapper}>
-        <div className={styles.ownerInformationWrapper}>
-          <Link href={`/user/${item.ownerId}/mylist`} className={styles.profileImageWrapper}>
+        <div className={styles.ownerInformationWrapper} onClick={onClickMoveToPage(`/user/${item.ownerId}/mylist`)}>
+          <div className={styles.profileImageWrapper}>
             {item?.ownerProfileImage ? (
               <Image
                 src={item.ownerProfileImage}
@@ -150,7 +152,7 @@ function FeedListItem({ item, index }: FeedListItemType) {
                 sizes="100vw 100vh"
               />
             )}
-          </Link>
+          </div>
           <div className={styles.ownerNicknameText}>{item.ownerNickname}</div>
         </div>
         <div className={styles.version}>{`업데이트 ${item.updateCount}회째`}</div>

diff --git a/src/app/(home)/_components/RecommendedUsers.tsx b/src/app/(home)/_components/RecommendedUsers.tsx
@@ -15,11 +15,8 @@ import * as styles from './RecommendedUsers.css';
 import { UserListsSkeleton } from './Skeleton';
 import { commonLocale } from '@/components/locale';
 import { useLanguage } from '@/store/useLanguage';
-import useBooleanOutput from '@/hooks/useBooleanOutput';
 
 function UsersRecommendation() {
-  const { language } = useLanguage();
-  const { isOn, handleSetOn, handleSetOff } = useBooleanOutput();
   //zustand로 관리하는 user정보 불러오기
   const { user: userMe } = useUser();
   const myId = userMe.id;