Merge pull request #188 from TeamPiickle/feat/#187-upgrade_main

Feat/#187 upgrade main
TeamPiickle · Jan 29, 2023 · 50b9f35 · 50b9f35
2 parents 67274c3 + bbe3fd7
commit 50b9f35
Show file tree

Hide file tree

Showing 18 changed files with 295 additions and 285 deletions.
diff --git a/src/@components/@common/Footer/style.ts b/src/@components/@common/Footer/style.ts
@@ -4,54 +4,51 @@ export const St = {
   Footer: styled.section`
     display: flex;
     position: relative;
-    padding-bottom: 30rem;
+    padding-bottom: 26rem;
     height: 22rem;
 
-    background-color: ${({ theme }) => theme.colors.gray100};
+    background-color: ${({ theme }) => theme.newColors.gray100};
   `,
 
   BasicInfo: styled.ul`
     position: absolute;
     display: flex;
     flex-direction: column;
-    gap: 2.2rem;
+    gap: 2.1rem;
 
-    width: 8rem;
-    height: 8.3rem;
     left: 1.6rem;
     top: 3.2rem;
   `,
 
   BasicInfoTitle: styled.li`
     height: 1.7rem;
-    ${({ theme }) => theme.fonts.footer1};
-    color: ${({ theme }) => theme.colors.bg};
+    ${({ theme }) => theme.newFonts.body4};
+    color: ${({ theme }) => theme.colors.gray900};
   `,
 
   ServiceInfo: styled.ul`
     position: absolute;
     display: flex;
     flex-direction: column;
 
-    width: 9.8rem;
-    height: 14.8rem;
-    right: 7.7rem;
+    width: 14rem;
+    right: 3.6rem;
     top: 3.2rem;
   `,
 
   ServiceInfoTitle: styled.li`
     height: 1.7rem;
     margin-bottom: 0.3rem;
 
-    ${({ theme }) => theme.fonts.footer1};
-    color: ${({ theme }) => theme.colors.bg};
+    ${({ theme }) => theme.newFonts.footer1};
+    color: ${({ theme }) => theme.colors.gray900};
   `,
 
   ServiceInfoDetail: styled.li`
     height: 1.7rem;
     margin-bottom: 2rem;
 
-    ${({ theme }) => theme.fonts.footer2};
-    color: ${({ theme }) => theme.colors.gray600};
+    ${({ theme }) => theme.newFonts.footer2};
+    color: ${({ theme }) => theme.newColors.gray700};
   `,
 };
diff --git a/src/@components/@common/HeadingTitleContainer/style.ts b/src/@components/@common/HeadingTitleContainer/style.ts
@@ -12,7 +12,7 @@ export const St = {
 
   Wrapper: styled.div<{ ismore: boolean }>`
     margin-left: 1.6rem;
-    width: ${({ ismore }) => (ismore ? "28rem" : "100%")};
+    width: ${({ ismore }) => (ismore ? "29rem" : "100%")};
   `,
 
   Title: styled.h2`
@@ -26,12 +26,12 @@ export const St = {
     white-space: pre-wrap;
 
     ${({ theme }) => theme.newFonts.h2};
-    color: ${({ theme }) => theme.colors.gray700};
+    color: ${({ theme }) => theme.newColors.gray700};
   `,
 
   Link: styled(Link)`
     margin-right: 1.6rem;
 
-    ${({ theme }) => theme.fonts.btn1};
+    ${({ theme }) => theme.newFonts.body4};
   `,
 };
diff --git a/src/@components/CategoryPage/CategoryContents/index.tsx b/src/@components/CategoryPage/CategoryContents/index.tsx
@@ -23,25 +23,26 @@ export default function CategoryContents() {
     return (
       <St.FlexContainer>
         <St.CategoryItemContainer>
-          {categoryLists.data.slice(0, 8).map((item, index) => {
-            return (
-              <St.CategoryItem
-                key={index}
-                columnStart={gridValue[index].columnStart}
-                columnEnd={gridValue[index].columnEnd}
-                rowStart={gridValue[index].rowStart}
-                rowEnd={gridValue[index].rowEnd}
-                onClick={() => moveCategory(item._id)}
-                gradation={item.gradation}
-                className={`GTM_item_${item.title.slice(0, 4)}`}>
-                <St.CategoryImoji>{`${String.fromCodePoint(parseInt(item.unicode, 16))}`}</St.CategoryImoji>
-                <St.CategoryDescription className={`GTM_${item.content.slice(0, 4)}`}>
-                  {item.content}
-                </St.CategoryDescription>
-                <St.CategoryTitle className={`GTM_${item.title.slice(0, 4)}`}>{item.title}</St.CategoryTitle>
-              </St.CategoryItem>
-            );
-          })}
+          {categoryLists &&
+            categoryLists.data.slice(0, 8).map((item, index) => {
+              return (
+                <St.CategoryItem
+                  key={index}
+                  columnStart={gridValue[index].columnStart}
+                  columnEnd={gridValue[index].columnEnd}
+                  rowStart={gridValue[index].rowStart}
+                  rowEnd={gridValue[index].rowEnd}
+                  onClick={() => moveCategory(item._id)}
+                  gradation={item.gradation}
+                  className={`GTM_item_${item.title.slice(0, 4)}`}>
+                  <St.CategoryImoji>{String.fromCodePoint(parseInt(item.unicode, 16))}</St.CategoryImoji>
+                  <St.CategoryDescription className={`GTM_${item.content.slice(0, 4)}`}>
+                    {item.content}
+                  </St.CategoryDescription>
+                  <St.CategoryTitle className={`GTM_${item.title.slice(0, 4)}`}>{item.title}</St.CategoryTitle>
+                </St.CategoryItem>
+              );
+            })}
         </St.CategoryItemContainer>
       </St.FlexContainer>
     );

diff --git a/src/@components/MainPage/Banner/style.ts b/src/@components/MainPage/Banner/style.ts
@@ -5,7 +5,7 @@ export const St = {
     touch-action: pan-x;
 
     position: relative;
-    height: 21.7rem;
+    height: 21.6rem;
     margin-top: -2.4rem;
 
     & .slick-track {
@@ -15,7 +15,7 @@ export const St = {
 
   ImageWrapper: styled.img`
     width: 36rem;
-    height: 21.7rem;
+    height: 21.6rem;
   `,
 
   ContentsPages: styled.div`
@@ -25,17 +25,17 @@ export const St = {
 
     display: flex;
     justify-content: center;
+    align-items: center;
     gap: 0.8rem;
 
-    width: 3.9rem;
-    height: 1.8rem;
+    width: 4.8rem;
+    height: 2.4rem;
 
     background: rgba(0, 0, 0, 0.5);
   `,
 
   CurrentPage: styled.span`
-    ${({ theme }) => theme.fonts.caption4};
-    line-height: 1.8rem;
+    ${({ theme }) => theme.newFonts.caption1};
     color: ${({ theme }) => theme.colors.white};
   `,
 };
diff --git a/src/@components/MainPage/BestPiickle/BestPiickleCard/index.tsx b/src/@components/MainPage/BestPiickle/BestPiickleCard/index.tsx
@@ -3,7 +3,7 @@ import { useSetRecoilState } from "recoil";
 
 import { sliderIdxState } from "../../../../core/atom/slider";
 import { routePaths } from "../../../../core/routes/path";
-import { St } from "./style";
+import St from "./style";
 
 interface BestPiickleCardProps {
   bestPiickle: {
@@ -25,19 +25,17 @@ export default function BestPiickleCard(props: BestPiickleCardProps) {
     <St.BestPiickleCard className={`GTM_${content.slice(0, 4)}`}>
       <St.TagsWrapper>
         {tags.map((tag: string, i: number) => {
-          return <St.Tag key={i}>{tag}</St.Tag>;
+          return <St.Tag key={i}>{tag.slice(1)}</St.Tag>;
         })}
       </St.TagsWrapper>
       <St.Content>{content}</St.Content>
-      <St.PickButtonWrapper>
-        <St.PickButton
-          type="button"
-          onClick={() => {
-            navigation(routePaths.CardCollection, { state: { type: "best" } });
-            setSliderIdx(idx);
-          }}>
-          카드 보기
-        </St.PickButton>
+      <St.PickButtonWrapper
+        type="button"
+        onClick={() => {
+          navigation(routePaths.CardCollection, { state: { type: "best" } });
+          setSliderIdx(idx);
+        }}>
+        카드 보기
       </St.PickButtonWrapper>
     </St.BestPiickleCard>
   );

diff --git a/src/@components/MainPage/BestPiickle/BestPiickleCard/style.ts b/src/@components/MainPage/BestPiickle/BestPiickleCard/style.ts
@@ -1,62 +1,67 @@
 import styled from "styled-components";
 
-export const St = {
-  BestPiickleCard: styled.article`
-    width: 20.2rem;
-    height: 14.5rem;
-
-    margin-right: 0.8rem;
-    padding: 2rem 1.6rem 1.4rem;
-
-    box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25), 0rem 0rem 0.2rem rgba(0, 0, 0, 0.25);
-    border-radius: 1.6rem;
-    color: ${({ theme }) => theme.colors.white};
-
-    position: relative;
-  `,
-
-  TagsWrapper: styled.ul`
-    display: flex;
-    gap: 0.8rem;
-  `,
-
-  Tag: styled.li`
-    ${({ theme }) => theme.fonts.caption1};
-    color: ${({ theme }) => theme.colors.gray600};
-  `,
-
-  Content: styled.p`
-    ${({ theme }) => theme.fonts.body1};
-    color: ${({ theme }) => theme.colors.black};
-
-    width: 17rem;
-    height: 4.4rem;
-    margin-top: 0.6rem;
-    // 말줄임표 설정
-    white-space: normal;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  `,
-
-  PickButtonWrapper: styled.div`
-    width: 8.1rem;
-    height: 2.5rem;
-
-    background-color: ${({ theme }) => theme.colors.green};
-    border-radius: 4.2rem;
-
-    position: absolute;
-    right: 1.6rem;
-    bottom: 1.4rem;
-  `,
-
-  PickButton: styled.button`
-    ${({ theme }) => theme.fonts.btn2}
-    color: ${({ theme }) => theme.colors.white};
-
-    width: 8.1rem;
-    height: 2.5rem;
-  `,
+const BestPiickleCard = styled.article`
+  position: relative;
+
+  width: 20rem;
+  height: 13.6rem;
+
+  margin-right: 0.8rem;
+  padding: 1.2rem;
+
+  border: 0.1rem solid ${({ theme }) => theme.newColors.gray300};
+`;
+
+const TagsWrapper = styled.ul`
+  display: flex;
+  gap: 0.8rem;
+`;
+
+const Tag = styled.li`
+  ${({ theme }) => theme.newFonts.caption1};
+  color: ${({ theme }) => theme.newColors.gray800};
+`;
+
+const Content = styled.p`
+  width: 17rem;
+  height: 4.4rem;
+
+  margin-top: 0.4rem;
+
+  // 말줄임표 설정
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+  ${({ theme }) => theme.newFonts.body3};
+  color: ${({ theme }) => theme.newColors.gray900};
+`;
+
+const PickButtonWrapper = styled.button`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  height: 3.2rem;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  ${({ theme }) => theme.newFonts.btn2};
+  color: ${({ theme }) => theme.colors.white};
+  background-color: ${({ theme }) => theme.newColors.gray900};
+  backdrop-filter: blur(0.6rem);
+`;
+
+const St = {
+  BestPiickleCard,
+  TagsWrapper,
+  Tag,
+  Content,
+  PickButtonWrapper,
 };
+export default St;
diff --git a/src/@components/MainPage/BestPiickle/index.tsx b/src/@components/MainPage/BestPiickle/index.tsx
@@ -8,7 +8,7 @@ import { headingTitles } from "../../../core/main/headingTitles";
 import HeadingTitleContainer from "../../@common/HeadingTitleContainer";
 import Loading from "../../@common/Loading";
 import BestPiickleCard from "./BestPiickleCard";
-import { St } from "./style";
+import St from "./style";
 
 const sliderSettings = {
   arrows: false,

diff --git a/src/@components/MainPage/BestPiickle/style.ts b/src/@components/MainPage/BestPiickle/style.ts
@@ -1,27 +1,29 @@
 import styled from "styled-components";
 
-export const St = {
-  Root: styled.section`
-    margin-top: 1.2rem;
-  `,
+const Root = styled.section`
+  margin-top: 1.2rem;
+`;
 
-  SliderWrapper: styled.article`
-    touch-action: pan-x;
+const SliderWrapper = styled.article`
+  touch-action: pan-x;
 
-    width: 100%;
+  & .slick-list {
+    height: 13.6rem;
+    margin-left: -17rem; // MEMO :: 눈대중 임의의 값
+    padding: 1.6rem;
+  }
 
-    & .slick-list {
-      height: 15.3rem;
-      margin-left: -13.5rem;
-      padding: 0.4rem 1.6rem;
-    }
+  & .slick-initialized {
+    overflow: hidden;
+  }
 
-    & .slick-initialized {
-      overflow: hidden;
-    }
+  & .slick-track {
+    scroll-snap-type: x mandatory;
+  }
+`;
 
-    & .slick-track {
-      scroll-snap-type: x mandatory;
-    }
-  `,
+const St = {
+  Root,
+  SliderWrapper,
 };
+export default St;