템플릿 카드의 클릭 가능 영역 변경 및 유저 이름 클릭 시 유저 페이지로 이동 (#870)

* refactor(TemplateCard): 유저 정보 클릭 가능하도록 변경, 템플릿 카드 클릭 범위 감소 * refactor(TemplatePage): 상세조회 페이지 유저 버튼 스타일 변경 * refactor(AuthorInfo): AuthorInfo를 공통 컴포넌트로 분리
woowacourse-teams · Oct 24, 2024 · e602bce · e602bce
1 parent 26744a7
commit e602bce
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 81 deletions.
diff --git a/frontend/src/components/AuthorInfo/AuthorInfo.style.ts b/frontend/src/components/AuthorInfo/AuthorInfo.style.ts
@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+
+import { theme } from '@/style/theme';
+
+export const AuthorInfoContainer = styled.div`
+  cursor: pointer;
+
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+
+  box-sizing: border-box;
+  min-width: 0;
+  height: 100%;
+  padding: 3px 5px;
+
+  border-radius: 4px;
+
+  &:hover {
+    background-color: ${theme.color.light.primary_50};
+  }
+`;
+
+export const EllipsisTextWrapper = styled.span`
+  overflow: hidden;
+  display: block;
+
+  min-width: 0;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
diff --git a/frontend/src/components/AuthorInfo/AuthorInfo.tsx b/frontend/src/components/AuthorInfo/AuthorInfo.tsx
@@ -0,0 +1,20 @@
+import { PersonIcon } from '@/assets/images';
+import { Text } from '@/components';
+import { theme } from '@/style/theme';
+
+import * as S from './AuthorInfo.style';
+
+interface Props {
+  memberName: string;
+}
+
+const AuthorInfo = ({ memberName }: Props) => (
+  <S.AuthorInfoContainer>
+    <PersonIcon width={17} height={17} color={theme.color.light.primary_500} />
+    <S.EllipsisTextWrapper>
+      <Text.Small color={theme.color.light.primary_500}>{memberName}</Text.Small>
+    </S.EllipsisTextWrapper>
+  </S.AuthorInfoContainer>
+);
+
+export default AuthorInfo;
diff --git a/frontend/src/components/TemplateCard/TemplateCard.style.ts b/frontend/src/components/TemplateCard/TemplateCard.style.ts
@@ -3,8 +3,6 @@ import styled from '@emotion/styled';
 import { theme } from '@/style/theme';
 
 export const TemplateCardContainer = styled.div`
-  cursor: pointer;
-
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -87,13 +85,3 @@ export const NoWrapTextWrapper = styled.div`
 export const BlankDescription = styled.div`
   height: 1rem;
 `;
-
-export const AuthorInfoContainer = styled.div`
-  cursor: pointer;
-
-  display: flex;
-  gap: 0.25rem;
-  align-items: center;
-
-  min-width: 0;
-`;
diff --git a/frontend/src/components/TemplateCard/TemplateCard.tsx b/frontend/src/components/TemplateCard/TemplateCard.tsx
@@ -1,6 +1,6 @@
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
-import { ClockIcon, PersonIcon, PrivateIcon } from '@/assets/images';
+import { ClockIcon, PrivateIcon } from '@/assets/images';
 import { Button, Flex, LikeCounter, TagButton, Text, SourceCodeViewer } from '@/components';
 import { useToggle } from '@/hooks';
 import { END_POINTS } from '@/routes';
@@ -10,14 +10,14 @@ import { theme } from '@/style/theme';
 import type { Tag, TemplateListItem } from '@/types';
 import { formatRelativeTime } from '@/utils/formatRelativeTime';
 
+import AuthorInfo from '../AuthorInfo/AuthorInfo';
 import * as S from './TemplateCard.style';
 
 interface Props {
   template: TemplateListItem;
 }
 
 const TemplateCard = ({ template }: Props) => {
-  const navigate = useNavigate();
   const { title, description, thumbnail, tags, modifiedAt, member, visibility } = template;
   const [showAllTagList, toggleShowAllTagList] = useToggle();
   const isPrivate = visibility === VISIBILITY_PRIVATE;
@@ -29,10 +29,6 @@ const TemplateCard = ({ template }: Props) => {
     e.stopPropagation();
   };
 
-  const handleAuthorClick = () => {
-    navigate(END_POINTS.memberTemplates(member.id));
-  };
-
   const handleAllTagList = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLDivElement, MouseEvent>,
   ) => {
@@ -47,12 +43,9 @@ const TemplateCard = ({ template }: Props) => {
           <Flex gap='0.75rem' flex='1' style={{ minWidth: '0' }}>
             {isPrivate && <PrivateIcon width={ICON_SIZE.X_SMALL} color={theme.color.light.secondary_600} />}
 
-            <S.AuthorInfoContainer onClick={handleAuthorClick} style={{ cursor: 'pointer' }}>
-              <PersonIcon color={theme.color.light.primary_500} />
-              <S.EllipsisTextWrapper style={{ width: '100%' }}>
-                <Text.Small color={theme.color.light.primary_500}>{member.name}</Text.Small>
-              </S.EllipsisTextWrapper>
-            </S.AuthorInfoContainer>
+            <Link to={END_POINTS.memberTemplates(member.id)}>
+              <AuthorInfo memberName={member.name} />
+            </Link>
 
             <Flex align='center' gap='0.25rem'>
               <ClockIcon width={ICON_SIZE.X_SMALL} color={theme.color.light.secondary_600} />
@@ -66,22 +59,26 @@ const TemplateCard = ({ template }: Props) => {
           </Flex>
         </Flex>
 
-        <S.EllipsisTextWrapper>
-          <Text.XLarge color={theme.color.light.secondary_900} weight='bold'>
-            {title}
-          </Text.XLarge>
-        </S.EllipsisTextWrapper>
-
-        <S.EllipsisTextWrapper>
-          {description ? (
-            <Text.Medium color={theme.color.light.secondary_600}>{description}</Text.Medium>
-          ) : (
-            <S.BlankDescription />
-          )}
-        </S.EllipsisTextWrapper>
+        <Link to={END_POINTS.template(template.id)}>
+          <S.EllipsisTextWrapper>
+            <Text.XLarge color={theme.color.light.secondary_900} weight='bold'>
+              {title}
+            </Text.XLarge>
+          </S.EllipsisTextWrapper>
+
+          <S.EllipsisTextWrapper>
+            {description ? (
+              <Text.Medium color={theme.color.light.secondary_600}>{description}</Text.Medium>
+            ) : (
+              <S.BlankDescription />
+            )}
+          </S.EllipsisTextWrapper>
+        </Link>
       </Flex>
 
-      <SourceCodeViewer mode='thumbnailView' filename={thumbnail.filename} content={thumbnail.content} />
+      <Link to={END_POINTS.template(template.id)}>
+        <SourceCodeViewer mode='thumbnailView' filename={thumbnail.filename} content={thumbnail.content} />
+      </Link>
 
       <Flex justify='space-between' onClick={blockMovingToDetailPage}>
         <S.TagListContainer>

diff --git a/frontend/src/pages/MyTemplatesPage/components/TemplateGrid/TemplateGrid.tsx b/frontend/src/pages/MyTemplatesPage/components/TemplateGrid/TemplateGrid.tsx
@@ -1,8 +1,6 @@
 import { useEffect } from 'react';
-import { Link } from 'react-router-dom';
 
 import { TemplateCard } from '@/components';
-import { END_POINTS } from '@/routes/endPoints';
 import { TemplateListItem } from '@/types';
 
 import * as S from './TemplateGrid.style';
@@ -44,9 +42,7 @@ const TemplateGrid = ({ templateList, isEditMode, selectedList, setSelectedList,
             </S.NonInteractiveWrapper>
           </S.TemplateCardWrapper>
         ) : (
-          <Link to={END_POINTS.template(template.id)} key={template.id}>
-            <TemplateCard template={template} />
-          </Link>
+          <TemplateCard key={template.id} template={template} />
         ),
       )}
     </S.TemplateContainer>

diff --git a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
@@ -1,7 +1,6 @@
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { Link } from 'react-router-dom';
 
 import { SORTING_OPTIONS } from '@/api';
 import { ArrowUpIcon, SearchIcon } from '@/assets/images';
@@ -180,9 +179,7 @@ const TemplateList = ({
           {!isLoading && (
             <S.TemplateExplorePageContainer cols={getGridCols(windowWidth)}>
               {templateList.map((template) => (
-                <Link to={`/templates/${template.id}`} key={template.id}>
-                  <TemplateCard template={template} />
-                </Link>
+                <TemplateCard key={template.id} template={template} />
               ))}
             </S.TemplateExplorePageContainer>
           )}

diff --git a/frontend/src/pages/TemplatePage/TemplatePage.style.ts b/frontend/src/pages/TemplatePage/TemplatePage.style.ts
@@ -49,13 +49,3 @@ export const DeleteButton = styled(Button)`
 export const PrivateWrapper = styled.div`
   flex-shrink: 0;
 `;
-
-export const AuthorInfoContainer = styled.div`
-  cursor: pointer;
-
-  display: flex;
-  gap: 0.25rem;
-  align-items: center;
-
-  min-width: 0;
-`;
diff --git a/frontend/src/pages/TemplatePage/TemplatePage.tsx b/frontend/src/pages/TemplatePage/TemplatePage.tsx
@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 
-import { ClockIcon, PersonIcon, PrivateIcon } from '@/assets/images';
+import { ClockIcon, PrivateIcon } from '@/assets/images';
 import {
   Button,
   Flex,
@@ -15,6 +15,7 @@ import {
   NonmemberAlerter,
   LoadingFallback,
 } from '@/components';
+import AuthorInfo from '@/components/AuthorInfo/AuthorInfo';
 import { useToggle } from '@/hooks';
 import { useAuth } from '@/hooks/authentication';
 import { TemplateEditPage } from '@/pages';
@@ -29,7 +30,6 @@ import { useTemplate, useLike } from './hooks';
 import * as S from './TemplatePage.style';
 
 const TemplatePage = () => {
-  const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
 
   useTrackPageViewed({ eventName: '[Viewed] 템플릿 조회 페이지', eventProps: { templateId: id } });
@@ -73,12 +73,6 @@ const TemplatePage = () => {
     trackLikeButton({ isLiked, likesCount, templateId: id as string });
   };
 
-  const handleAuthorClick = () => {
-    if (template?.member?.id) {
-      navigate(END_POINTS.memberTemplates(template.member.id));
-    }
-  };
-
   if (!template) {
     return <LoadingFallback />;
   }
@@ -138,20 +132,10 @@ const TemplatePage = () => {
                 </Flex>
 
                 <Flex gap='0.5rem' align='center' justify='space-between'>
-                  <S.AuthorInfoContainer onClick={handleAuthorClick} style={{ cursor: 'pointer' }}>
-                    <PersonIcon width={ICON_SIZE.X_SMALL} color={theme.color.light.primary_500} />
-
-                    <div
-                      style={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        flex: 1,
-                      }}
-                    >
-                      <Text.Small color={theme.color.light.primary_500}>{template.member.name}</Text.Small>
-                    </div>
-                  </S.AuthorInfoContainer>
+                  <Link to={END_POINTS.memberTemplates(template.member.id)}>
+                    <AuthorInfo memberName={template.member.name} />
+                  </Link>
+
                   <Flex align='center' gap='0.125rem'>
                     <ClockIcon width={ICON_SIZE.SMALL} color={theme.color.light.secondary_600} />
                     <Text.Small color={theme.color.light.secondary_600}>