From c0e5e37488bb770574267f490c234d2b67eae83f Mon Sep 17 00:00:00 2001 From: SNUPI Date: Wed, 22 Mar 2023 18:13:33 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EB=B0=B0=EB=84=88=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=A1=B0=EC=A0=95=20=EB=B0=8F=20?= =?UTF-8?q?=ED=94=84=EB=A6=AC=EB=A1=9C=EB=94=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +++- src/@components/CategoryPage/index.tsx | 10 +++++++++ src/@components/CategoryPage/style.ts | 23 +++++++++++--------- yarn.lock | 29 +++++++++++++++++++++++++- 4 files changed, 54 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index efbc4231..afcc10cc 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react": "^18.1.0", "react-dom": "^18.1.0", "react-gtm-module": "^2.0.11", + "react-helmet": "^6.1.0", "react-mobile-datepicker": "^4.0.2", "react-range": "^1.8.13", "react-router-dom": "^6.2.1", @@ -53,8 +54,9 @@ "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", - "@types/react-slick": "^0.23.10", "@types/react-gtm-module": "^2.0.1", + "@types/react-helmet": "^6.1.6", + "@types/react-slick": "^0.23.10", "@types/styled-components": "^5.1.25", "@typescript-eslint/eslint-plugin": "^5.16.0", "@typescript-eslint/parser": "^5.16.0", diff --git a/src/@components/CategoryPage/index.tsx b/src/@components/CategoryPage/index.tsx index adaa87e0..7df7eef1 100644 --- a/src/@components/CategoryPage/index.tsx +++ b/src/@components/CategoryPage/index.tsx @@ -1,7 +1,10 @@ +import { Helmet } from "react-helmet"; import { useNavigate } from "react-router-dom"; import { useSetRecoilState } from "recoil"; import { IcSmallRightArrow } from "../../asset/icon/index"; +import { ImgCategoryBanner } from "../../asset/image"; +import { OriginImgCategoryBanner } from "../../asset/image/origin"; import { sliderIdxState } from "../../core/atom/slider"; import { routePaths } from "../../core/routes/path"; import { categoryTitles } from "../../util/category/categoryList"; @@ -25,8 +28,15 @@ export default function CategoryPage() { return ( + + +
+ + + + 베스트 카드들만 모아서 보기 북마크를 가장 많이 달성한 핫한 대화 주제 30선 diff --git a/src/@components/CategoryPage/style.ts b/src/@components/CategoryPage/style.ts index 76c7c669..1cabef7b 100644 --- a/src/@components/CategoryPage/style.ts +++ b/src/@components/CategoryPage/style.ts @@ -1,8 +1,5 @@ import styled from "styled-components"; -import { ImgCategoryBanner } from "../../asset/image"; -import { OriginImgCategoryBanner } from "../../asset/image/origin"; - export const St = { Root: styled.main` display: flex; @@ -15,16 +12,22 @@ export const St = { height: 17.9rem; padding: 2rem 0 0 1.6rem; - background-image: url(${ImgCategoryBanner}); - background-image: image-set( - ${ImgCategoryBanner} type("image/webp"), - ${OriginImgCategoryBanner} type("image/png"), - ) - background-size: cover; - position: relative; `, + BgImg: styled.img` + position: absolute; + left: 0; + top: 0; + + width: 100%; + height: 17.9rem; + + object-fit: cover; + + z-index: -10; + `, + BannerTitle: styled.h2` ${({ theme }) => theme.newFonts.graphic1}; color: ${({ theme }) => theme.colors.darkblue}; diff --git a/yarn.lock b/yarn.lock index 53a05057..fdad45b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2036,6 +2036,13 @@ resolved "https://registry.yarnpkg.com/@types/react-gtm-module/-/react-gtm-module-2.0.1.tgz#b2c6cd14ec251d6ae7fa576edf1d43825908a378" integrity sha512-T/DN9gAbCYk5wJ1nxf4pSwmXz4d1iVjM++OoG+mwMfz9STMAotGjSb65gJHOS5bPvl6vLSsJnuC+y/43OQrltg== +"@types/react-helmet@^6.1.6": + version "6.1.6" + resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.6.tgz#7d1afd8cbf099616894e8240e9ef70e3c6d7506d" + integrity sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A== + dependencies: + "@types/react" "*" + "@types/react-slick@^0.23.10": version "0.23.10" resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.10.tgz#56126e6e4e95cdce7771535b2811c2c1931a7caa" @@ -7920,7 +7927,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.8.1: +prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -8065,11 +8072,26 @@ react-error-overlay@^6.0.11: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== +react-fast-compare@^3.1.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.1.tgz#53933d9e14f364281d6cba24bfed7a4afb808b5f" + integrity sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg== + react-gtm-module@^2.0.11: version "2.0.11" resolved "https://registry.yarnpkg.com/react-gtm-module/-/react-gtm-module-2.0.11.tgz#14484dac8257acd93614e347c32da9c5ac524206" integrity sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw== +react-helmet@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726" + integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw== + dependencies: + object-assign "^4.1.1" + prop-types "^15.7.2" + react-fast-compare "^3.1.1" + react-side-effect "^2.1.0" + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -8170,6 +8192,11 @@ react-scripts@5.0.1: optionalDependencies: fsevents "^2.3.2" +react-side-effect@^2.1.0: + version "2.1.2" + resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a" + integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw== + react-slick@^0.29.0: version "0.29.0" resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.29.0.tgz#0bed5ea42bf75a23d40c0259b828ed27627b51bb" From 57504cd4a1263f9b81bf20a9263b11ed4dddb6a6 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Wed, 22 Mar 2023 18:15:50 +0900 Subject: [PATCH 2/3] =?UTF-8?q?style:=20St=20=EA=B0=9D=EC=B2=B4=20?= =?UTF-8?q?=EC=9E=AC=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/CategoryPage/index.tsx | 2 +- src/@components/CategoryPage/style.ts | 121 +++++++++++++------------ 2 files changed, 66 insertions(+), 57 deletions(-) diff --git a/src/@components/CategoryPage/index.tsx b/src/@components/CategoryPage/index.tsx index 7df7eef1..e49c1e7c 100644 --- a/src/@components/CategoryPage/index.tsx +++ b/src/@components/CategoryPage/index.tsx @@ -13,7 +13,7 @@ import Header from "../@common/Header"; import HeadingTitleContainer from "../@common/HeadingTitleContainer"; import useScroll from "../@common/hooks/useScroll"; import CategoryContents from "./CategoryContents"; -import { St } from "./style"; +import St from "./style"; export default function CategoryPage() { useScroll(); diff --git a/src/@components/CategoryPage/style.ts b/src/@components/CategoryPage/style.ts index 1cabef7b..685a41a3 100644 --- a/src/@components/CategoryPage/style.ts +++ b/src/@components/CategoryPage/style.ts @@ -1,59 +1,68 @@ import styled from "styled-components"; -export const St = { - Root: styled.main` - display: flex; - flex-direction: column; - margin-bottom: 4rem; - margin-top: -2.4rem; - `, - - CategoryBanner: styled.section` - height: 17.9rem; - padding: 2rem 0 0 1.6rem; - - position: relative; - `, - - BgImg: styled.img` - position: absolute; - left: 0; - top: 0; - - width: 100%; - height: 17.9rem; - - object-fit: cover; - - z-index: -10; - `, - - BannerTitle: styled.h2` - ${({ theme }) => theme.newFonts.graphic1}; - color: ${({ theme }) => theme.colors.darkblue}; - `, - - BannerSubTitle: styled.p` - ${({ theme }) => theme.newFonts.h2}; - color: ${({ theme }) => theme.colors.gray800}; - `, - - GoBestPiickleBtn: styled.button` - position: absolute; - - height: 1.5rem; - right: 1.6rem; - bottom: 1.2rem; - - color: ${({ theme }) => theme.colors.gray900}; - ${({ theme }) => theme.newFonts.btn2}; - - display: flex; - justify-content: center; - align-items: center; - `, - - BtnTitle: styled.p` - margin-right: 0.8rem; - `, +const Root = styled.main` + display: flex; + flex-direction: column; + margin-bottom: 4rem; + margin-top: -2.4rem; +`; + +const CategoryBanner = styled.section` + height: 17.9rem; + padding: 2rem 0 0 1.6rem; + + position: relative; +`; + +const BgImg = styled.img` + position: absolute; + left: 0; + top: 0; + + width: 100%; + height: 17.9rem; + + object-fit: cover; + + z-index: -10; +`; + +const BannerTitle = styled.h2` + ${({ theme }) => theme.newFonts.graphic1}; + color: ${({ theme }) => theme.colors.darkblue}; +`; + +const BannerSubTitle = styled.p` + ${({ theme }) => theme.newFonts.h2}; + color: ${({ theme }) => theme.colors.gray800}; +`; + +const GoBestPiickleBtn = styled.button` + position: absolute; + + height: 1.5rem; + right: 1.6rem; + bottom: 1.2rem; + + color: ${({ theme }) => theme.colors.gray900}; + ${({ theme }) => theme.newFonts.btn2}; + + display: flex; + justify-content: center; + align-items: center; +`; + +const BtnTitle = styled.p` + margin-right: 0.8rem; +`; + +const St = { + Root, + CategoryBanner, + BgImg, + BannerTitle, + BannerSubTitle, + GoBestPiickleBtn, + BtnTitle, }; +export default St; From 85656882f5cc3b58c421eebbcf66beda3ff52516 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Wed, 22 Mar 2023 18:19:12 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=8C=80=ED=91=9C=20=EB=B0=B0=EB=84=88=20?= =?UTF-8?q?=ED=94=84=EB=A6=AC=EB=A1=9C=EB=94=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/CategoryPage/index.tsx | 36 ++++++++++++----------- src/@components/MainPage/Banner/index.tsx | 36 +++++++++++++---------- 2 files changed, 40 insertions(+), 32 deletions(-) diff --git a/src/@components/CategoryPage/index.tsx b/src/@components/CategoryPage/index.tsx index e49c1e7c..0a208195 100644 --- a/src/@components/CategoryPage/index.tsx +++ b/src/@components/CategoryPage/index.tsx @@ -27,25 +27,27 @@ export default function CategoryPage() { }; return ( - + <> -
- - - - - - 베스트 카드들만 모아서 보기 - 북마크를 가장 많이 달성한 핫한 대화 주제 30선 - - 카드보기 - - - - - - + +
+ + + + + + 베스트 카드들만 모아서 보기 + 북마크를 가장 많이 달성한 핫한 대화 주제 30선 + + 카드보기 + + + + + + + ); } diff --git a/src/@components/MainPage/Banner/index.tsx b/src/@components/MainPage/Banner/index.tsx index 3a74068a..e70de0f1 100644 --- a/src/@components/MainPage/Banner/index.tsx +++ b/src/@components/MainPage/Banner/index.tsx @@ -2,6 +2,7 @@ import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import { useState } from "react"; +import { Helmet } from "react-helmet"; import Slider from "react-slick"; import { bannerImage } from "../../../util/main/banner"; @@ -22,21 +23,26 @@ export default function Banner() { }; return ( - - - {bannerImage.map((img, index) => ( - - - - - ))} - + <> + + + + + + {bannerImage.map((img, index) => ( + + + + + ))} + - - - {currentSlide + 1} / {bannerImage.length} - - - + + + {currentSlide + 1} / {bannerImage.length} + + + + ); }