[ refactor ] feat/#300 코드리뷰 반영

TeamPiickle · Jul 9, 2023 · 45fe4c3 · 45fe4c3
1 parent 937f53b
commit 45fe4c3
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 36 deletions.
diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/index.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import * as St from "./styled";
+
+export default function LastBestPiickleCard() {
+  return (
+    <St.LastCard>
+      <St.LastCardContent>
+        나머지 주제들도
+        <br />
+        보고 싶다면?
+      </St.LastCardContent>
+      <St.LastCardWrapper>나머지 보기</St.LastCardWrapper>
+    </St.LastCard>
+  );
+}
diff --git a/src/@components/@common/BestPiickleCard/LastBestPiickleCard/styled.ts b/src/@components/@common/BestPiickleCard/LastBestPiickleCard/styled.ts
@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+export const LastCard = styled.div`
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  width: 18rem;
+  height: 10.6rem;
+
+  border-radius: 0.4rem;
+
+  padding: 0.8rem 1.2rem;
+  padding-top: 2.1rem;
+  background: ${({ theme }) => theme.newColors.white};
+`;
+
+export const LastCardWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  margin-top: 1.2rem;
+  align-self: flex-end;
+
+  width: 6.9rem;
+  height: 2.5rem;
+
+  border-radius: 2.9rem;
+  background: ${({ theme }) => theme.newColors.green};
+
+  color: ${({ theme }) => theme.newColors.white};
+  ${({ theme }) => theme.newFonts.btn2}
+`;
+
+export const LastCardContent = styled.p`
+  margin-top: 0.4rem;
+
+  text-align: left;
+
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+  ${({ theme }) => theme.newFonts.btn1}
+  color: ${({ theme }) => theme.newColors.gray900};
+`;
diff --git a/src/@components/@common/BestPiickleCard/index.tsx b/src/@components/@common/BestPiickleCard/index.tsx
@@ -1,6 +1,7 @@
 import { LocationType } from "../../../types/cardCollection";
 import { GTM_CLASS_NAME } from "../../../util/const/gtm";
 import useNavigateCardCollection, { NavigateRecentCollectionType } from "../hooks/useNavigateCardCollection";
+import LastBestPiickleCard from "./LastBestPiickleCard";
 import * as St from "./style";
 
 interface BestPiickleCardProps {
@@ -22,13 +23,13 @@ export default function BestPiickleCard(props: BestPiickleCardProps) {
 
   const navigateCardCollection = useNavigateCardCollection(locationType) as NavigateRecentCollectionType;
 
-  const onClickCard = () => {
+  const handleClickCard = () => {
     if (!canNavigate) return;
     navigateCardCollection(idx);
   };
 
   return (
-    <St.Container type="button" className={GTM_CLASS_NAME[GTM_IDX_KEY]} onClick={onClickCard}>
+    <St.Container type="button" className={GTM_CLASS_NAME[GTM_IDX_KEY]} onClick={handleClickCard}>
       {isLast ? (
         <St.BestPiickleCard className={GTM_CLASS_NAME[GTM_IDX_KEY]}>
           <St.TagsWrapper className={GTM_CLASS_NAME[GTM_IDX_KEY]}>
@@ -40,14 +41,7 @@ export default function BestPiickleCard(props: BestPiickleCardProps) {
           <St.PickButtonWrapper className={GTM_CLASS_NAME[GTM_IDX_KEY]}>카드 보기</St.PickButtonWrapper>
         </St.BestPiickleCard>
       ) : (
-        <St.LastCard>
-          <St.Content>
-            나머지 주제들도
-            <br />
-            보고 싶다면?
-          </St.Content>
-          <St.LastCardWrapper>나머지 보기</St.LastCardWrapper>
-        </St.LastCard>
+        <LastBestPiickleCard />
       )}
     </St.Container>
   );

diff --git a/src/@components/@common/BestPiickleCard/style.ts b/src/@components/@common/BestPiickleCard/style.ts
@@ -47,29 +47,3 @@ export const PickButtonWrapper = styled.div`
 
   text-align: right;
 `;
-
-export const LastCard = styled(BestPiickleCard)`
-  display: flex;
-  flex-direction: column;
-
-  padding-top: 2.1rem;
-  background: ${({ theme }) => theme.newColors.white};
-`;
-
-export const LastCardWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  margin-top: 1.2rem;
-  align-self: flex-end;
-
-  width: 6.9rem;
-  height: 2.5rem;
-
-  border-radius: 2.9rem;
-  background: ${({ theme }) => theme.newColors.green};
-
-  color: ${({ theme }) => theme.newColors.white};
-  ${({ theme }) => theme.newFonts.btn2}
-`;