Merge pull request #186 from TeamPiickle/feat/#185-moodpiickle_design

Feat/#185 moodpiickle design
TeamPiickle · Jan 23, 2023 · 67274c3 · 67274c3
2 parents d64c5bd + 55f0345
commit 67274c3
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 46 deletions.
diff --git a/src/@components/@common/HeadingTitleContainer/style.ts b/src/@components/@common/HeadingTitleContainer/style.ts
@@ -16,16 +16,17 @@ export const St = {
   `,
 
   Title: styled.h2`
-    ${({ theme }) => theme.fonts.h1};
+    ${({ theme }) => theme.newFonts.h1};
+    color: ${({ theme }) => theme.colors.gray900};
   `,
 
   Content: styled.p`
     margin-top: 0.4rem;
 
     white-space: pre-wrap;
 
-    color: ${({ theme }) => theme.colors.gray600};
-    ${({ theme }) => theme.fonts.h2};
+    ${({ theme }) => theme.newFonts.h2};
+    color: ${({ theme }) => theme.colors.gray700};
   `,
 
   Link: styled(Link)`

diff --git a/src/@components/CategoryPage/CategoryContents/index.tsx b/src/@components/CategoryPage/CategoryContents/index.tsx
@@ -18,7 +18,6 @@ export default function CategoryContents() {
     navigate(routePaths.CardCollection, { state: { type: "category", categoryId: id } });
     setSliderIdx(0);
   };
-
   if (categoryLists?.data === undefined) return <Loading backgroundColor="transparent" />;
   else
     return (
@@ -33,12 +32,13 @@ export default function CategoryContents() {
                 rowStart={gridValue[index].rowStart}
                 rowEnd={gridValue[index].rowEnd}
                 onClick={() => moveCategory(item._id)}
-                imgUrl={item.imgurl}
+                gradation={item.gradation}
                 className={`GTM_item_${item.title.slice(0, 4)}`}>
-                <St.CategoryTitle className={`GTM_${item.title.slice(0, 4)}`}>{item.title}</St.CategoryTitle>
+                <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>
             );
           })}

diff --git a/src/@components/CategoryPage/CategoryContents/style.ts b/src/@components/CategoryPage/CategoryContents/style.ts
@@ -23,32 +23,36 @@ export const St = {
     columnEnd: number;
     rowStart: number;
     rowEnd: number;
-    imgUrl: string;
+    gradation: string;
   }>`
     grid-column-start: ${({ columnStart }) => columnStart};
     grid-column-end: ${({ columnEnd }) => columnEnd};
     grid-row-start: ${({ rowStart }) => rowStart};
     grid-row-end: ${({ rowEnd }) => rowEnd};
 
-    background: url(${({ imgUrl }) => imgUrl});
+    background: ${({ gradation }) => gradation};
     background-size: cover;
 
-    border-radius: 1.6rem;
-    border: 0.1rem solid #e0e0e0;
-
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    align-items: left;
+    padding-left: 0.8rem;
   `,
 
   CategoryTitle: styled.h2`
-    ${({ theme }) => theme.fonts.h1};
-    color: ${({ theme }) => theme.colors.bg};
+    ${({ theme }) => theme.newFonts.body2};
+    color: ${({ theme }) => theme.colors.gray900};
   `,
 
   CategoryDescription: styled.p`
-    ${({ theme }) => theme.fonts.h2};
-    color: ${({ theme }) => theme.colors.gray600};
+    ${({ theme }) => theme.newFonts.caption1};
+    color: ${({ theme }) => theme.colors.gray800};
+  `,
+
+  CategoryImoji: styled.p`
+    font-size: 3rem;
+
+    margin-bottom: 0.7rem;
   `,
 };
diff --git a/src/@components/CategoryPage/index.tsx b/src/@components/CategoryPage/index.tsx
@@ -1,6 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { useSetRecoilState } from "recoil";
 
+import { IcRightArrow } from "../../asset/icon/index";
 import { sliderIdxState } from "../../core/atom/slider";
 import { categoryTitles } from "../../core/category/categoryList";
 import { routePaths } from "../../core/routes/path";
@@ -28,7 +29,8 @@ export default function CategoryPage() {
         <St.BannerTitle>Best Piickle 들만 모아서 보기</St.BannerTitle>
         <St.BannerSubTitle>마이피클을 가장 많이 달성한 핫한 대화 주제 30선</St.BannerSubTitle>
         <St.GoBestPiickleBtn type="button" onClick={moveBestPiickle} className="GTM_카드보기">
-          카드 보기
+          <St.BtnTitle>카드보기</St.BtnTitle>
+          <IcRightArrow />
         </St.GoBestPiickleBtn>
       </St.CategoryBanner>
       <HeadingTitleContainer headingTitles={categoryTitles} />

diff --git a/src/@components/CategoryPage/style.ts b/src/@components/CategoryPage/style.ts
@@ -11,40 +11,41 @@ export const St = {
   `,
 
   CategoryBanner: styled.section`
-    height: 13.6rem;
+    height: 17.9rem;
     padding: 2rem 0 0 1.6rem;
 
     background: url(${ImgCategoryBanner});
+    background-size: cover;
 
     position: relative;
   `,
 
   BannerTitle: styled.h2`
-    ${({ theme }) => theme.fonts.body10};
-    color: ${({ theme }) => theme.colors.white};
+    ${({ theme }) => theme.newFonts.graphic1};
+    color: ${({ theme }) => theme.colors.darkblue};
   `,
 
   BannerSubTitle: styled.p`
-    ${({ theme }) => theme.fonts.body4};
-    color: ${({ theme }) => theme.colors.gray600};
+    ${({ theme }) => theme.newFonts.h2};
+    color: ${({ theme }) => theme.colors.gray800};
   `,
 
   GoBestPiickleBtn: styled.button`
     position: absolute;
-    right: 1.2rem;
-    bottom: 1.4rem;
 
-    background-color: ${({ theme }) => theme.colors.black};
-    color: ${({ theme }) => theme.colors.white};
-    ${({ theme }) => theme.fonts.btn1};
+    height: 20px;
+    right: 11.76px;
+    bottom: 12px;
 
-    width: 7.1rem;
-    height: 2.5rem;
-
-    border-radius: 4.2rem;
+    color: ${({ theme }) => theme.colors.gray900};
+    ${({ theme }) => theme.newFonts.btn1};
 
     display: flex;
     justify-content: center;
     align-items: center;
   `,
+
+  BtnTitle: styled.p`
+    margin-right: 0.8rem;
+  `,
 };
diff --git a/src/@components/MainPage/MoodPiickle/index.tsx b/src/@components/MainPage/MoodPiickle/index.tsx
@@ -13,7 +13,7 @@ export type moodPiickle = {
   _id: string;
   title: string;
   content: string;
-  imgurl: string;
+  gradation: string;
 };
 
 export default function MoodPiickle() {
@@ -35,11 +35,11 @@ export default function MoodPiickle() {
             <St.Category
               key={moodPiickle._id}
               onClick={() => moveCategory(moodPiickle._id)}
-              imgUrl={moodPiickle.imgurl}
               columnStart={gridValue[index].columnStart}
               columnEnd={gridValue[index].columnEnd}
               rowStart={gridValue[index].rowStart}
-              rowEnd={gridValue[index].rowEnd}>
+              rowEnd={gridValue[index].rowEnd}
+              gradation={moodPiickle.gradation}>
               <St.CategoryTitle className={`GTM_${moodPiickle.title.slice(0, 4)}`}>
                 {moodPiickle.title}
               </St.CategoryTitle>

diff --git a/src/@components/MainPage/MoodPiickle/style.ts b/src/@components/MainPage/MoodPiickle/style.ts
@@ -25,7 +25,7 @@ export const St = {
     columnEnd: number;
     rowStart: number;
     rowEnd: number;
-    imgUrl: string;
+    gradation: string;
   }>`
     display: flex;
     flex-direction: column;
@@ -35,7 +35,7 @@ export const St = {
     border: 0.1rem solid #e0e0e0;
     border-radius: 1.6rem;
 
-    background: url(${({ imgUrl }) => imgUrl});
+    background: ${({ gradation }) => gradation};
     background-size: cover;
 
     grid-column-start: ${({ columnStart }) => columnStart};

diff --git a/src/asset/image/categoryBanner.png b/src/asset/image/categoryBanner.png
diff --git a/src/core/category/categoryList.ts b/src/core/category/categoryList.ts
@@ -4,54 +4,71 @@ type categoryListProps = {
   id: number;
   title: string;
   content: string;
+  gradation: string;
 };
 
 export const categoryList: categoryListProps[] = [
   {
     id: 0,
-    title: "소개팅",
+    title: "아이스브레이킹",
     content: "커플과의 추억을 공유하세요",
+    gradation:
+      "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(79, 72, 236, 0.102) 100%),linear-gradient(0deg, rgba(79, 72, 236, 0.37), rgba(79, 72, 236, 0.37)),linear-gradient(180deg, #00ff9c 0%, rgba(255, 255, 255, 0) 100%)",
   },
   {
     id: 0,
-    title: "소개팅",
+    title: "커플",
     content: "커플과의 추억을 공유하세요",
+    gradation:
+      "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(0deg, rgba(0, 224, 255, 0.2), rgba(0, 224, 255, 0.2)), linear-gradient(180deg, #FFBF18 0%, #73BE56 67.59%, #19BE7E 100%)",
   },
   {
     id: 0,
-    title: "소개팅",
+    title: "진지한대화",
     content: "커플과의 추억을 공유하세요",
+    gradation:
+      "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(79, 72, 236, 0.102) 100%), linear-gradient(0deg, rgba(79, 72, 236, 0.37), rgba(79, 72, 236, 0.37)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%)",
   },
   {
     id: 0,
-    title: "소개팅",
+    title: "친구",
     content: "커플과의 추억을 공유하세요",
+    gradation:
+      "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(0deg, rgba(0, 224, 255, 0.2), rgba(0, 224, 255, 0.2)), linear-gradient(180deg, #4F48EC 0%, #FFBF18 100%)",
   },
   {
     id: 0,
-    title: "소개팅",
+    title: "IF",
     content: "커플과의 추억을 공유하세요",
+    gradation:
+      "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(0deg, rgba(0, 224, 255, 0.2), rgba(0, 224, 255, 0.2)), linear-gradient(180deg, #C6C6C6 0%, #73BE56 67.59%, #19BE7E 100%)",
   },
   {
     id: 0,
-    title: "소개팅",
+    title: "밸런스게임",
     content: "커플과의 추억을 공유하세요",
+    gradation:
+      "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(79, 72, 236, 0.102) 100%), linear-gradient(0deg, rgba(79, 72, 236, 0.37), rgba(79, 72, 236, 0.37)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%)",
   },
   {
     id: 0,
     title: "소개팅",
     content: "커플과의 추억을 공유하세요",
+    gradation:
+      "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(255, 0, 0, 0.2) 0%, rgba(79, 72, 236, 0.102) 100%, rgba(11, 0, 255, 0.102) 100%), linear-gradient(0deg, rgba(250, 255, 0, 0.37), rgba(250, 255, 0, 0.37)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%)",
   },
   {
     id: 0,
-    title: "소개팅",
+    title: "SOPT",
     content: "커플과의 추억을 공유하세요",
+    gradation:
+      "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 255, 133, 0.102) 100%), linear-gradient(0deg, rgba(157, 97, 255, 0.11), rgba(157, 97, 255, 0.11)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%)",
   },
 ];
 
 export const categoryTitles: HeadingTitle = {
   title: "Mood Piickle",
-  content: "더욱 쉽게 피클을 즐길 수 있는 방법!\n지금 나의 무드에 맞는 카테고리를 골라보세요",
+  content: "지금 나의 무드에 맞는 카테고리를 골라 대화해 보세요",
   isMoreBtn: false,
 };
 

diff --git a/src/style/theme.ts b/src/style/theme.ts
@@ -19,9 +19,10 @@ const colors = {
   gray500: "#808080",
   gray600: "#606060",
   gray700: "#404040",
-  gray800: "#202020",
+  gray800: "#424242",
   gray900: "#0A0A0A",
   caption2_color: "#575757",
+  darkblue: "#100E34",
   sub1: "#F2F25A",
   sub3: "#706E2B",
   sub4: "#F2EFCE",
@@ -87,6 +88,7 @@ const newFonts = {
   btn1: FONT({ weight: 400, size: 1.6, lineHeight: 140, letterSpacing: 4 }),
   btn2: FONT({ weight: 400, size: 1.2, lineHeight: 140, letterSpacing: 4 }),
   caption1: FONT({ weight: 300, size: 1.2, lineHeight: 140, letterSpacing: 3 }),
+  graphic1: FONT({ weight: 600, size: 2.6, lineHeight: 130, letterSpacing: 3 }),
 } as const;
 
 type BackQuoteArgs = string[];

diff --git a/src/types/main.ts b/src/types/main.ts
@@ -2,7 +2,8 @@ export interface CategoryList {
   _id: string;
   title: string;
   content: string;
-  imgurl: string;
+  unicode: string;
+  gradation: string;
 }
 
 export interface BallotList {