From 1fb113a529c4afe6f314d019c5acf08d5ec81c3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=95=9C=EA=B7=9C=EC=A7=84?= <55226431+9yujin@users.noreply.github.com> Date: Sat, 3 Feb 2024 23:24:15 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat=20:=20=EB=9E=9C=EB=94=A9=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=EB=89=B4=EC=96=BC=20(#315)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat : 랜딩페이지 리뉴얼 title * feat : 헤더 색상 컨텍스트 관리 * feat: 랜딩페이지 리뉴얼 --------- Co-authored-by: 9yujin <9yujin@toss.im> --- apps/ticket/package.json | 1 + .../assets/landing-renewal/feature-mobile.svg | 335 +++++++++++++++++ .../src/assets/landing-renewal/feature-pc.svg | 337 ++++++++++++++++++ .../landing-renewal/intro-title-mobile.svg | 5 + .../assets/landing-renewal/intro-title-pc.svg | 12 + .../src/assets/landing-renewal/spec-1.svg | 57 +++ .../src/assets/landing-renewal/spec-2.svg | 57 +++ .../src/assets/landing-renewal/spec-3.svg | 77 ++++ .../src/assets/landing-renewal/spec-4.svg | 71 ++++ .../src/assets/landing-renewal/special-1.svg | 57 +++ .../src/assets/landing-renewal/special-2.svg | 57 +++ .../src/assets/landing-renewal/special-3.svg | 77 ++++ .../src/assets/landing-renewal/special-4.svg | 71 ++++ .../src/assets/landing-renewal/star-mint.svg | 3 + .../src/assets/landing-renewal/star-white.svg | 3 + .../landing-renewal/title-illust-mobile.svg | 300 ++++++++++++++++ .../landing-renewal/title-illust-pc.svg | 317 ++++++++++++++++ .../src/assets/landing-renewal/title-logo.svg | 7 + .../home/Landing/ImpressionStartSetHeader.tsx | 18 + .../Landing/{Outro.tsx => OutroSection.tsx} | 3 +- .../home/Landing/{Title.tsx => TitleOld.tsx} | 0 .../home/Landing/backgroundBlackStyle.ts | 4 + .../home/Landing/feature/Feature.Mobile.tsx | 9 + .../home/Landing/feature/Feature.PC.tsx | 14 + .../components/home/Landing/feature/index.tsx | 4 + .../src/components/home/Landing/index.tsx | 69 +++- .../home/Landing/intro/Intro.Mobile.tsx | 36 ++ .../home/Landing/intro/Intro.PC.tsx | 26 ++ .../components/home/Landing/intro/index.tsx | 4 + .../components/home/Landing/outro/index.tsx | 57 +++ .../home/Landing/special/Special.Mobile.tsx | 116 ++++++ .../home/Landing/special/Special.PC.tsx | 137 +++++++ .../components/home/Landing/special/index.tsx | 4 + .../home/Landing/title/Title.Mobile.tsx | 23 ++ .../home/Landing/title/Title.PC.tsx | 107 ++++++ .../components/home/Landing/title/index.tsx | 4 + .../components/shared/Layout/HeaderLayout.tsx | 37 +- .../shared/Layout/HeaderProfileElement.tsx | 24 +- .../components/shared/Layout/MobileHeader.tsx | 23 +- .../src/components/shared/Layout/index.tsx | 5 +- apps/ticket/src/components/shared/Media.tsx | 95 +++++ .../src/components/shared/Shortcuts.tsx | 4 +- shared/ui/src/components/Header/index.tsx | 29 +- .../Header/useHeaderColorContext.tsx | 40 +++ shared/ui/src/components/Text/index.tsx | 4 +- shared/ui/src/layout/Padding.tsx | 2 +- shared/ui/src/theme/index.ts | 2 + shared/ui/src/theme/palette.ts | 2 +- shared/ui/src/theme/typo.ts | 24 ++ yarn.lock | 93 +++++ 50 files changed, 2815 insertions(+), 48 deletions(-) create mode 100644 apps/ticket/src/assets/landing-renewal/feature-mobile.svg create mode 100644 apps/ticket/src/assets/landing-renewal/feature-pc.svg create mode 100644 apps/ticket/src/assets/landing-renewal/intro-title-mobile.svg create mode 100644 apps/ticket/src/assets/landing-renewal/intro-title-pc.svg create mode 100644 apps/ticket/src/assets/landing-renewal/spec-1.svg create mode 100644 apps/ticket/src/assets/landing-renewal/spec-2.svg create mode 100644 apps/ticket/src/assets/landing-renewal/spec-3.svg create mode 100644 apps/ticket/src/assets/landing-renewal/spec-4.svg create mode 100644 apps/ticket/src/assets/landing-renewal/special-1.svg create mode 100644 apps/ticket/src/assets/landing-renewal/special-2.svg create mode 100644 apps/ticket/src/assets/landing-renewal/special-3.svg create mode 100644 apps/ticket/src/assets/landing-renewal/special-4.svg create mode 100644 apps/ticket/src/assets/landing-renewal/star-mint.svg create mode 100644 apps/ticket/src/assets/landing-renewal/star-white.svg create mode 100644 apps/ticket/src/assets/landing-renewal/title-illust-mobile.svg create mode 100644 apps/ticket/src/assets/landing-renewal/title-illust-pc.svg create mode 100644 apps/ticket/src/assets/landing-renewal/title-logo.svg create mode 100644 apps/ticket/src/components/home/Landing/ImpressionStartSetHeader.tsx rename apps/ticket/src/components/home/Landing/{Outro.tsx => OutroSection.tsx} (98%) rename apps/ticket/src/components/home/Landing/{Title.tsx => TitleOld.tsx} (100%) create mode 100644 apps/ticket/src/components/home/Landing/backgroundBlackStyle.ts create mode 100644 apps/ticket/src/components/home/Landing/feature/Feature.Mobile.tsx create mode 100644 apps/ticket/src/components/home/Landing/feature/Feature.PC.tsx create mode 100644 apps/ticket/src/components/home/Landing/feature/index.tsx create mode 100644 apps/ticket/src/components/home/Landing/intro/Intro.Mobile.tsx create mode 100644 apps/ticket/src/components/home/Landing/intro/Intro.PC.tsx create mode 100644 apps/ticket/src/components/home/Landing/intro/index.tsx create mode 100644 apps/ticket/src/components/home/Landing/outro/index.tsx create mode 100644 apps/ticket/src/components/home/Landing/special/Special.Mobile.tsx create mode 100644 apps/ticket/src/components/home/Landing/special/Special.PC.tsx create mode 100644 apps/ticket/src/components/home/Landing/special/index.tsx create mode 100644 apps/ticket/src/components/home/Landing/title/Title.Mobile.tsx create mode 100644 apps/ticket/src/components/home/Landing/title/Title.PC.tsx create mode 100644 apps/ticket/src/components/home/Landing/title/index.tsx create mode 100644 apps/ticket/src/components/shared/Media.tsx create mode 100644 shared/ui/src/components/Header/useHeaderColorContext.tsx diff --git a/apps/ticket/package.json b/apps/ticket/package.json index 7a1d988c..7ae3a300 100644 --- a/apps/ticket/package.json +++ b/apps/ticket/package.json @@ -15,6 +15,7 @@ "@emotion/styled": "^11.10.5", "@next/font": "13.0.7", "@toast-ui/react-editor": "^3.2.2", + "@toss/impression-area": "^1.3.1", "@tosspayments/payment-widget-sdk": "^0.5.2", "@types/node": "18.11.16", "@types/react": "18.0.26", diff --git a/apps/ticket/src/assets/landing-renewal/feature-mobile.svg b/apps/ticket/src/assets/landing-renewal/feature-mobile.svg new file mode 100644 index 00000000..bf969312 --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/feature-mobile.svg @@ -0,0 +1,335 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/feature-pc.svg b/apps/ticket/src/assets/landing-renewal/feature-pc.svg new file mode 100644 index 00000000..0c9ba3d0 --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/feature-pc.svg @@ -0,0 +1,337 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/intro-title-mobile.svg b/apps/ticket/src/assets/landing-renewal/intro-title-mobile.svg new file mode 100644 index 00000000..a8a9c84a --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/intro-title-mobile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/intro-title-pc.svg b/apps/ticket/src/assets/landing-renewal/intro-title-pc.svg new file mode 100644 index 00000000..4d85609e --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/intro-title-pc.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/spec-1.svg b/apps/ticket/src/assets/landing-renewal/spec-1.svg new file mode 100644 index 00000000..7612d3ac --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/spec-1.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/spec-2.svg b/apps/ticket/src/assets/landing-renewal/spec-2.svg new file mode 100644 index 00000000..27691d43 --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/spec-2.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/spec-3.svg b/apps/ticket/src/assets/landing-renewal/spec-3.svg new file mode 100644 index 00000000..c5d509a1 --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/spec-3.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/spec-4.svg b/apps/ticket/src/assets/landing-renewal/spec-4.svg new file mode 100644 index 00000000..1103ac5c --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/spec-4.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/special-1.svg b/apps/ticket/src/assets/landing-renewal/special-1.svg new file mode 100644 index 00000000..9eca33c1 --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/special-1.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/special-2.svg b/apps/ticket/src/assets/landing-renewal/special-2.svg new file mode 100644 index 00000000..3c030100 --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/special-2.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/special-3.svg b/apps/ticket/src/assets/landing-renewal/special-3.svg new file mode 100644 index 00000000..49fdd01b --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/special-3.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/special-4.svg b/apps/ticket/src/assets/landing-renewal/special-4.svg new file mode 100644 index 00000000..ef056b23 --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/special-4.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/star-mint.svg b/apps/ticket/src/assets/landing-renewal/star-mint.svg new file mode 100644 index 00000000..a454c226 --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/star-mint.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/ticket/src/assets/landing-renewal/star-white.svg b/apps/ticket/src/assets/landing-renewal/star-white.svg new file mode 100644 index 00000000..ac5eeff4 --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/star-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/ticket/src/assets/landing-renewal/title-illust-mobile.svg b/apps/ticket/src/assets/landing-renewal/title-illust-mobile.svg new file mode 100644 index 00000000..17800c48 --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/title-illust-mobile.svg @@ -0,0 +1,300 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/title-illust-pc.svg b/apps/ticket/src/assets/landing-renewal/title-illust-pc.svg new file mode 100644 index 00000000..d71ecff8 --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/title-illust-pc.svg @@ -0,0 +1,317 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ticket/src/assets/landing-renewal/title-logo.svg b/apps/ticket/src/assets/landing-renewal/title-logo.svg new file mode 100644 index 00000000..f0f0cfaa --- /dev/null +++ b/apps/ticket/src/assets/landing-renewal/title-logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/ticket/src/components/home/Landing/ImpressionStartSetHeader.tsx b/apps/ticket/src/components/home/Landing/ImpressionStartSetHeader.tsx new file mode 100644 index 00000000..7ef7acf8 --- /dev/null +++ b/apps/ticket/src/components/home/Landing/ImpressionStartSetHeader.tsx @@ -0,0 +1,18 @@ +import { useHeaderColorContext } from '@dudoong/ui'; +import { ImpressionArea } from '@toss/impression-area'; +import { ReactNode } from 'react'; + +export const ImpressionStartSetHeader = ({ + children, + color, +}: { + children: ReactNode; + color: 'black' | 'white'; +}) => { + const { setHeaderColor } = useHeaderColorContext(); + return ( + setHeaderColor(color)}> + {children} + + ); +}; diff --git a/apps/ticket/src/components/home/Landing/Outro.tsx b/apps/ticket/src/components/home/Landing/OutroSection.tsx similarity index 98% rename from apps/ticket/src/components/home/Landing/Outro.tsx rename to apps/ticket/src/components/home/Landing/OutroSection.tsx index 73d7c55f..8f253361 100644 --- a/apps/ticket/src/components/home/Landing/Outro.tsx +++ b/apps/ticket/src/components/home/Landing/OutroSection.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import Outro from '@assets/landing/outro.svg'; -import { Button, media } from '@dudoong/ui'; +import { media } from '@dudoong/ui'; + const OutroSection = () => { return ( diff --git a/apps/ticket/src/components/home/Landing/Title.tsx b/apps/ticket/src/components/home/Landing/TitleOld.tsx similarity index 100% rename from apps/ticket/src/components/home/Landing/Title.tsx rename to apps/ticket/src/components/home/Landing/TitleOld.tsx diff --git a/apps/ticket/src/components/home/Landing/backgroundBlackStyle.ts b/apps/ticket/src/components/home/Landing/backgroundBlackStyle.ts new file mode 100644 index 00000000..1be8110c --- /dev/null +++ b/apps/ticket/src/components/home/Landing/backgroundBlackStyle.ts @@ -0,0 +1,4 @@ +import { palette } from '@dudoong/ui'; +import { css } from '@emotion/react'; + +export const backgroundBlackStyle = css({ backgroundColor: palette.black }); diff --git a/apps/ticket/src/components/home/Landing/feature/Feature.Mobile.tsx b/apps/ticket/src/components/home/Landing/feature/Feature.Mobile.tsx new file mode 100644 index 00000000..1acbb29a --- /dev/null +++ b/apps/ticket/src/components/home/Landing/feature/Feature.Mobile.tsx @@ -0,0 +1,9 @@ +import FeatureMobileImage from '@assets/landing-renewal/feature-mobile.svg'; + +export const FeatureMobile = () => { + return ( + <> + + + ); +}; diff --git a/apps/ticket/src/components/home/Landing/feature/Feature.PC.tsx b/apps/ticket/src/components/home/Landing/feature/Feature.PC.tsx new file mode 100644 index 00000000..408ccba6 --- /dev/null +++ b/apps/ticket/src/components/home/Landing/feature/Feature.PC.tsx @@ -0,0 +1,14 @@ +import FeaturePCImage from '@assets/landing-renewal/feature-pc.svg'; +import { FlexBox, Spacing } from '@dudoong/ui'; +import { ImpressionStartSetHeader } from '../ImpressionStartSetHeader'; + +export const FeaturePC = () => { + return ( + + + + + + + ); +}; diff --git a/apps/ticket/src/components/home/Landing/feature/index.tsx b/apps/ticket/src/components/home/Landing/feature/index.tsx new file mode 100644 index 00000000..9b7b5883 --- /dev/null +++ b/apps/ticket/src/components/home/Landing/feature/index.tsx @@ -0,0 +1,4 @@ +import { FeatureMobile } from './Feature.Mobile'; +import { FeaturePC } from './Feature.PC'; + +export const Feature = { PC: FeaturePC, Mobile: FeatureMobile }; diff --git a/apps/ticket/src/components/home/Landing/index.tsx b/apps/ticket/src/components/home/Landing/index.tsx index 436afb01..d09bf1a2 100644 --- a/apps/ticket/src/components/home/Landing/index.tsx +++ b/apps/ticket/src/components/home/Landing/index.tsx @@ -1,19 +1,22 @@ -import { Footer } from '@dudoong/ui'; +import { Footer, useHeaderColorContext } from '@dudoong/ui'; import DDHead from '@components/shared/Layout/NextHead'; -import Title from './Title'; -//import IntroSection from './IntroSection'; -//import FeatureSection from './FeatureSection'; -//import TicketSection from './TicketSection'; -//import OutroSection from './Outro'; import { css } from '@emotion/react'; -import dynamic from 'next/dynamic'; - -const IntroSection = dynamic(() => import('./IntroSection')); -const FeatureSection = dynamic(() => import('./FeatureSection')); -const TicketSection = dynamic(() => import('./TicketSection')); -const OutroSection = dynamic(() => import('./Outro')); +import Media from '@components/shared/Media'; +import { Title } from './title'; +import { ImpressionArea } from '@toss/impression-area'; +import { useEffect } from 'react'; +import { Intro } from './intro'; +import { Feature } from './feature'; +import { Special } from './special'; +import { Outro } from './outro'; const Landing = () => { + const { setHeaderColor } = useHeaderColorContext(); + + useEffect(() => { + setHeaderColor('black'); + }, []); + return ( <> { overflow-x: hidden; `} > - - <IntroSection /> - <FeatureSection /> - <TicketSection /> - <OutroSection /> + <Media.Mobile> + <ImpressionArea + onImpressionStart={() => setHeaderColor('black')} + onImpressionEnd={() => setHeaderColor('white')} + > + <Title.Mobile /> + <Intro.Mobile /> + </ImpressionArea> + <ImpressionArea onImpressionEnd={() => setHeaderColor('black')}> + <Feature.Mobile /> + </ImpressionArea> + <ImpressionArea onImpressionEnd={() => setHeaderColor('white')}> + <Special.Mobile /> + </ImpressionArea> + <ImpressionArea> + <Outro /> + </ImpressionArea> + </Media.Mobile> + + <Media.PC> + <ImpressionArea + onImpressionStart={() => setHeaderColor('black')} + onImpressionEnd={() => setHeaderColor('white')} + > + <Title.PC /> + </ImpressionArea> + <ImpressionArea onImpressionEnd={() => setHeaderColor('black')}> + <Intro.PC /> + <Feature.PC /> + </ImpressionArea> + <ImpressionArea onImpressionEnd={() => setHeaderColor('white')}> + <Special.PC /> + </ImpressionArea> + <ImpressionArea> + <Outro /> + </ImpressionArea> + </Media.PC> </main> <section> <Footer /> diff --git a/apps/ticket/src/components/home/Landing/intro/Intro.Mobile.tsx b/apps/ticket/src/components/home/Landing/intro/Intro.Mobile.tsx new file mode 100644 index 00000000..ab6b3fe9 --- /dev/null +++ b/apps/ticket/src/components/home/Landing/intro/Intro.Mobile.tsx @@ -0,0 +1,36 @@ +import IntroTitleMobile from '@assets/landing-renewal/intro-title-mobile.svg'; +import { FlexBox, Padding, Spacing, Text } from '@dudoong/ui'; +import { css } from '@emotion/react'; +import { backgroundBlackStyle } from '../backgroundBlackStyle'; + +export const IntroMobile = () => { + return ( + <Padding size={[0, 0, 0, 36]} css={backgroundBlackStyle}> + <FlexBox direction="column" align={'flex-start'}> + <Spacing size={120} /> + <IntroTitleMobile /> + <Spacing size={30} /> + <Text typo={'P_Text_18_M'} color="white"> + 두둥은 <span css={boldTextStyle}>모든 밴드</span>를 위한 + <br /> + 공연 플랫폼 이에요. + </Text> + <Spacing size={8} /> + <Text typo={'P_Text_18_M'} color="white"> + 공연의 호스트와 관객 + <br /> + 모두에게 + <span css={boldTextStyle}> + 더욱 편리하고 새로운 + <br /> + 공연 라이프 + </span> + 를 펼쳐줄거예요! + </Text> + <Spacing size={143} /> + </FlexBox> + </Padding> + ); +}; + +const boldTextStyle = css({ fontWeight: 'bold' }); diff --git a/apps/ticket/src/components/home/Landing/intro/Intro.PC.tsx b/apps/ticket/src/components/home/Landing/intro/Intro.PC.tsx new file mode 100644 index 00000000..26b9c4da --- /dev/null +++ b/apps/ticket/src/components/home/Landing/intro/Intro.PC.tsx @@ -0,0 +1,26 @@ +import IntroTitlePC from '@assets/landing-renewal/intro-title-pc.svg'; +import { FlexBox, Spacing, Text } from '@dudoong/ui'; +import { css } from '@emotion/react'; + +export const IntroPC = () => { + return ( + <FlexBox justify={'center'} direction="column"> + <Spacing size={200} /> + <IntroTitlePC /> + <Spacing size={56} /> + <Text typo={'P_Text_22_M'}> + 두둥은 <span css={boldTextStyle}>모든 밴드를 위한 공연 플랫폼</span> + 이에요. + </Text> + <Spacing size={8} /> + <Text typo={'P_Text_22_M'}> + 공연의 호스트와 관객 모두에게{' '} + <span css={boldTextStyle}>더욱 편리하고 새로운 공연 라이프</span>를 + 펼쳐줄거예요! + </Text> + <Spacing size={96} /> + </FlexBox> + ); +}; + +const boldTextStyle = css({ fontWeight: 'bold' }); diff --git a/apps/ticket/src/components/home/Landing/intro/index.tsx b/apps/ticket/src/components/home/Landing/intro/index.tsx new file mode 100644 index 00000000..1e33b24c --- /dev/null +++ b/apps/ticket/src/components/home/Landing/intro/index.tsx @@ -0,0 +1,4 @@ +import { IntroMobile } from './Intro.Mobile'; +import { IntroPC } from './Intro.PC'; + +export const Intro = { PC: IntroPC, Mobile: IntroMobile }; diff --git a/apps/ticket/src/components/home/Landing/outro/index.tsx b/apps/ticket/src/components/home/Landing/outro/index.tsx new file mode 100644 index 00000000..0e7b9711 --- /dev/null +++ b/apps/ticket/src/components/home/Landing/outro/index.tsx @@ -0,0 +1,57 @@ +import { FlexBox, palette, Spacing, Text } from '@dudoong/ui'; +import Media from '@components/shared/Media'; +import { css } from '@emotion/react'; +import { darken } from 'polished'; + +export const Outro = () => ( + <FlexBox direction={'column'} css={css({ zIndex: -1 })}> + <Media.Spacing mobile={176} pc={220} /> + <Media.Txt mobile={'G_Header_36_B'} pc={'G_Header_45_B'}> + 이 모든 서비스를 + </Media.Txt> + <Media.Txt mobile={'G_Header_36_B'} pc={'G_Header_45_B'}> + 무료로 사용해보세요 + </Media.Txt> + <Spacing size={12} /> + <Text typo={'P_Text_18_M'} css={css({ fontSize: 20 })}> + 제휴를 통해 카드 결제도 가능해요 + </Text> + <Spacing size={32} /> + <div css={css({ position: 'relative' })}> + <button + css={buttonStyle} + onClick={() => (window.location.href = 'https://dudoong.com/home')} + > + <Text typo={'P_Header_24_B'}>두둥 시작하기</Text> + </button> + <div + css={css` + position: absolute; + width: 240px; + height: 68px; + top: 6px; + right: -6px; + border-radius: 12px; + background-color: ${palette.black}; + `} + /> + </div> + <Media.Spacing mobile={210} pc={230} /> + </FlexBox> +); + +const buttonStyle = css` + position: relative; + width: 242px; + height: 70px; + border-radius: 12px; + border: 2px solid ${palette.black}; + background-color: ${palette.point_mint}; + z-index: 2; + + &:active { + transform: translate3d(6px, 3px, 0); + transition: 0.1s ease-out; + background-color: ${darken(0.03, palette.point_mint)}; + } +`; diff --git a/apps/ticket/src/components/home/Landing/special/Special.Mobile.tsx b/apps/ticket/src/components/home/Landing/special/Special.Mobile.tsx new file mode 100644 index 00000000..6362665c --- /dev/null +++ b/apps/ticket/src/components/home/Landing/special/Special.Mobile.tsx @@ -0,0 +1,116 @@ +import { FlexBox, palette, Spacing, Text } from '@dudoong/ui'; +import SpecialFirst from '@assets/landing-renewal/special-1.svg'; +import SpecialSecond from '@assets/landing-renewal/special-2.svg'; +import SpecialThird from '@assets/landing-renewal/special-3.svg'; +import SpecialFourth from '@assets/landing-renewal/special-4.svg'; +import { css } from '@emotion/react'; +import { backgroundBlackStyle } from '../backgroundBlackStyle'; +import { ReactNode } from 'react'; +import { ImpressionStartSetHeader } from '../ImpressionStartSetHeader'; + +export const SpecialMobile = () => { + return ( + <FlexBox direction={'column'} css={backgroundBlackStyle} justify="center"> + <Spacing size={80} /> + + <div css={css({ width: '100%' })}> + <ContentSection + number={1} + subTitle={'ONLY DUDOONG'} + title={'수수료 ZERO 두둥티켓'} + image={<SpecialFirst />} + description={ + '두둥티켓은 수수료 없이 온라인으로 입금받고\n주문을 승인할 수 있는 두둥만의 서비스에요!' + } + /> + <Spacing size={80} /> + <ContentSection + number={2} + subTitle={'CHEER UP'} + title={'응원톡 남기기'} + image={<SpecialSecond />} + description={ + '두둥의 응원톡 기능을 통해 좋아하는\n밴드에게 응원의 메세지를 보내보세요!' + } + /> + <Spacing size={80} /> + <ContentSection + number={3} + subTitle={'QUICK ENTRANCE'} + title={'QR티켓 입장'} + image={<SpecialThird />} + description={ + '두둥을 통해 예매한 관객은\nQR 티켓을 통해 간단하게 입장이 가능해요!' + } + /> + <Spacing size={80} /> + <ContentSection + number={4} + subTitle={'VARIOUS OPTIONS'} + title={'다양한 티켓옵션'} + image={<SpecialFourth />} + description={ + '두둥의 티켓은 원하는 옵션을 붙일 수 있어\n다양한 맞춤형 티켓 제작이 용이해요!' + } + /> + </div> + <ImpressionStartSetHeader color="black"> + <Spacing size={120} /> + </ImpressionStartSetHeader> + </FlexBox> + ); +}; + +export const ContentSection = ({ + number, + subTitle, + title, + description, + image, +}: { + number: number; + subTitle: string; + title: string; + description: string; + image: ReactNode; +}) => { + return ( + <FlexBox direction={'column'}> + <FlexBox + css={css({ + width: 40, + height: 40, + borderRadius: 25, + backgroundColor: palette.point_mint, + color: palette.white, + })} + > + <Text typo="G_Header_28_B">{number}</Text> + </FlexBox> + <Spacing size={10} /> + <FlexBox gap={15}> + <Text + typo="G_Side_14_B" + css={css({ fontSize: 22 })} + color={'point_mint'} + > + {subTitle} + </Text> + </FlexBox> + <Spacing size={13} /> + <Text typo="G_Header_28_B" color={'white'}> + {title} + </Text> + <Spacing size={13} /> + <div css={css({ width: 'calc(100% - 140px)' })}>{image}</div> + <Spacing size={26} /> + <Text + typo="P_Text_16_M" + css={css({ lineHeight: 1.3, textAlign: 'center' })} + color={'white'} + > + {description} + </Text> + </FlexBox> + ); +}; diff --git a/apps/ticket/src/components/home/Landing/special/Special.PC.tsx b/apps/ticket/src/components/home/Landing/special/Special.PC.tsx new file mode 100644 index 00000000..fa38ea2d --- /dev/null +++ b/apps/ticket/src/components/home/Landing/special/Special.PC.tsx @@ -0,0 +1,137 @@ +import { FlexBox, palette, Spacing, Text } from '@dudoong/ui'; +import StarMint from '@assets/landing-renewal/star-mint.svg'; +import StarWhite from '@assets/landing-renewal/star-white.svg'; +import SpecialFirst from '@assets/landing-renewal/special-1.svg'; +import SpecialSecond from '@assets/landing-renewal/special-2.svg'; +import SpecialThird from '@assets/landing-renewal/special-3.svg'; +import SpecialFourth from '@assets/landing-renewal/special-4.svg'; +import { css } from '@emotion/react'; +import { backgroundBlackStyle } from '../backgroundBlackStyle'; +import { ImpressionStartSetHeader } from '../ImpressionStartSetHeader'; + +export const SpecialPC = () => { + return ( + <FlexBox direction={'column'} css={backgroundBlackStyle} justify="center"> + <Spacing size={160} /> + <FlexBox justify={'center'}> + <StarMint /> + <StarWhite /> + <Text + typo="G_Header_28_B" + css={css({ fontSize: 96, margin: '0 13.5px' })} + color="point_mint" + > + 두둥 SPECIAL + </Text> + <StarWhite /> + <StarMint /> + </FlexBox> + <Spacing size={160} /> + <div css={css({ width: 936 })}> + <FlexBox justify={'space-between'}> + <ContentSection + number={1} + subTitle={'ONLY DUDOONG'} + title={'수수료 ZERO 두둥티켓'} + description={ + '두둥티켓은 수수료 없이 온라인으로 입금받고\n주문을 승인할 수 있는 두둥만의 서비스에요!' + } + /> + <div css={css({ width: 459 })}> + <SpecialFirst /> + </div> + </FlexBox> + <Spacing size={100} /> + <FlexBox justify={'flex-start'} gap={80}> + <div css={css({ width: 459 })}> + <SpecialSecond /> + </div> + <ContentSection + number={2} + subTitle={'CHEER UP'} + title={'응원톡 남기기'} + description={ + '두둥의 응원톡 기능을 통해 좋아하는\n밴드에게 응원의 메세지를 보내보세요!' + } + /> + </FlexBox> + <Spacing size={100} /> + <FlexBox justify={'space-between'}> + <ContentSection + number={3} + subTitle={'QUICK ENTRANCE'} + title={'QR티켓 입장'} + description={ + '두둥을 통해 예매한 관객은\nQR 티켓을 통해 간단하게 입장이 가능해요!' + } + /> + <div css={css({ width: 459 })}> + <SpecialThird /> + </div> + </FlexBox> + <Spacing size={100} /> + <FlexBox justify={'flex-start'} gap={80}> + <div css={css({ width: 459 })}> + <SpecialFourth /> + </div> + <ContentSection + number={4} + subTitle={'VARIOUS OPTIONS'} + title={'다양한 티켓옵션'} + description={ + '두둥의 티켓은 원하는 옵션을 붙일 수 있어\n다양한 맞춤형 티켓 제작이 용이해요!' + } + /> + </FlexBox> + </div> + <ImpressionStartSetHeader color="black"> + <Spacing size={190} /> + </ImpressionStartSetHeader> + </FlexBox> + ); +}; + +export const ContentSection = ({ + number, + subTitle, + title, + description, +}: { + number: number; + subTitle: string; + title: string; + description: string; +}) => { + return ( + <FlexBox direction={'column'} align="flex-start"> + <FlexBox gap={15}> + <FlexBox + css={css({ + width: 30, + height: 30, + borderRadius: 15, + backgroundColor: palette.point_mint, + color: palette.white, + })} + > + <Text typo="G_Header_20_B">{number}</Text> + </FlexBox> + <Text + typo="G_Header_24_B" + css={css({ fontSize: 22 })} + color={'point_mint'} + > + {subTitle} + </Text> + </FlexBox> + <Spacing size={18} /> + <Text typo="G_Header_24_B" css={css({ fontSize: 40 })} color={'white'}> + {title} + </Text> + <Spacing size={20} /> + <Text typo="P_Text_22_M" css={css({ lineHeight: 1.3 })} color={'white'}> + {description} + </Text> + </FlexBox> + ); +}; diff --git a/apps/ticket/src/components/home/Landing/special/index.tsx b/apps/ticket/src/components/home/Landing/special/index.tsx new file mode 100644 index 00000000..1774049e --- /dev/null +++ b/apps/ticket/src/components/home/Landing/special/index.tsx @@ -0,0 +1,4 @@ +import { SpecialMobile } from './Special.Mobile'; +import { SpecialPC } from './Special.PC'; + +export const Special = { PC: SpecialPC, Mobile: SpecialMobile }; diff --git a/apps/ticket/src/components/home/Landing/title/Title.Mobile.tsx b/apps/ticket/src/components/home/Landing/title/Title.Mobile.tsx new file mode 100644 index 00000000..852def73 --- /dev/null +++ b/apps/ticket/src/components/home/Landing/title/Title.Mobile.tsx @@ -0,0 +1,23 @@ +import { Spacing, Text } from '@dudoong/ui'; +import { css } from '@emotion/react'; +import Logo from '@assets/landing-renewal/title-logo.svg'; +import TitleIllustMobile from '@assets/landing-renewal/title-illust-mobile.svg'; +import { backgroundBlackStyle } from '../backgroundBlackStyle'; + +export const TitleMobile = () => { + return ( + <div css={backgroundBlackStyle}> + <Spacing size={12} /> + <Logo css={css({ marginLeft: 24, width: 231 })} /> + <Spacing size={22} /> + <div css={css({ marginLeft: 24 })}> + <Text typo={'G_Text_22_M'} color={'white'}> + BAND CONCERT + <br /> + PLATFORM + </Text> + </div> + <TitleIllustMobile /> + </div> + ); +}; diff --git a/apps/ticket/src/components/home/Landing/title/Title.PC.tsx b/apps/ticket/src/components/home/Landing/title/Title.PC.tsx new file mode 100644 index 00000000..fd0edbee --- /dev/null +++ b/apps/ticket/src/components/home/Landing/title/Title.PC.tsx @@ -0,0 +1,107 @@ +import { palette, Spacing, Text } from '@dudoong/ui'; +import { css } from '@emotion/react'; +import Logo from '@assets/landing-renewal/title-logo.svg'; +import TitleIllustPc from '@assets/landing-renewal/title-illust-pc.svg'; +import styled from '@emotion/styled'; +import Star2 from '@assets/landing/star2.svg'; + +export const TitlePc = () => { + return ( + <div + css={css({ + position: 'relative', + backgroundColor: palette.black, + height: 938, + })} + > + <Spacing size={164} /> + <Logo css={css({ width: 400, marginLeft: 124 })} /> + <Spacing size={25} /> + <Text typo={'G_Text_22_M'} color={'white'} css={css({ marginLeft: 124 })}> + BAND CONCERT PLATFORM + </Text> + <TitleIllustPc css={css({ position: 'absolute', right: 0, top: -50 })} /> + <Spacing size={280} /> + <Line /> + </div> + ); +}; + +const Line = ({ ...props }) => { + return ( + <Wrapper {...props}> + <LineContainer> + <div> + <span>DUDOONG YOUR CONCERT LIFE</span> + <Star2 /> + </div> + <div> + <span>DUDOONG YOUR CONCERT LIFE</span> + <Star2 /> + </div> + <div> + <span>DUDOONG YOUR CONCERT LIFE</span> + <Star2 /> + </div> + <div> + <span>DUDOONG YOUR CONCERT LIFE</span> + <Star2 /> + </div> + <div> + <span>DUDOONG YOUR CONCERT LIFE</span> + <Star2 /> + </div> + </LineContainer> + </Wrapper> + ); +}; + +const Wrapper = styled.div` + width: 100%; + position: relative; + display: flex; + gap: 10px; + align-items: center; + background-color: ${({ theme }) => theme.palette.black}; + height: 66px; + font-family: 'Jost', sans-serif; + font-style: italic; + font-size: 33px; + font-weight: 400; + color: ${({ theme }) => theme.palette.white}; + letter-spacing: 0.1em; + margin-top: 50px; +`; +const LineContainer = styled.div` + width: 3500px; + position: absolute; + left: -630px; + display: flex; + align-items: center; + + span { + padding-top: 4px; + } + svg { + width: 46px; + margin-left: 12px; + } + + @keyframes textLoop { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 100% { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + } + + & > div { + animation: textLoop 10s linear infinite; + display: flex; + align-items: center; + padding-right: 10px; + } +`; diff --git a/apps/ticket/src/components/home/Landing/title/index.tsx b/apps/ticket/src/components/home/Landing/title/index.tsx new file mode 100644 index 00000000..198f7a42 --- /dev/null +++ b/apps/ticket/src/components/home/Landing/title/index.tsx @@ -0,0 +1,4 @@ +import { TitleMobile } from './Title.Mobile'; +import { TitlePc } from './Title.PC'; + +export const Title = { Mobile: TitleMobile, PC: TitlePc }; diff --git a/apps/ticket/src/components/shared/Layout/HeaderLayout.tsx b/apps/ticket/src/components/shared/Layout/HeaderLayout.tsx index 82de65e0..2bfe41a6 100644 --- a/apps/ticket/src/components/shared/Layout/HeaderLayout.tsx +++ b/apps/ticket/src/components/shared/Layout/HeaderLayout.tsx @@ -1,12 +1,14 @@ /** @jsxImportSource @emotion/react */ import styled from '@emotion/styled'; -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, useState } from 'react'; import { Divider, Header, PopupOptions, ProfileImage, -} from '@dudoong/ui/src/components'; + ThemeType, + useHeaderColorContext, +} from '@dudoong/ui'; import { media } from '@dudoong/ui/src/theme'; import { useRouter } from 'next/router'; import { useRecoilValue, useResetRecoilState } from 'recoil'; @@ -35,6 +37,8 @@ const navigatorMap = { export const HeaderLayout = ({ children }: PropsWithChildren) => { const { push, asPath } = useRouter(); const { userProfile, isAuthenticated } = useRecoilValue(authState); + const { theme } = useHeaderColorContext(); + const { Toast } = useToastify(); const resetAuthState = useResetRecoilState(authState); const { setToast } = useToastify(); @@ -78,7 +82,7 @@ export const HeaderLayout = ({ children }: PropsWithChildren) => { } /> {(asPath === '/' || asPath === '/home') && ( - <Navigator> + <Navigator colortheme={theme}> <> {navigatorMap[asPath].map((link) => ( <Link href={link.url} key={link.title}> @@ -108,15 +112,26 @@ export const HeaderLayout = ({ children }: PropsWithChildren) => { /> <Divider line padding={24} height={12} /> - <Shortcuts url="/mypage" text="마이페이지" padding={[12, 24]} /> + <Shortcuts + url="/mypage" + text="마이페이지" + padding={[12, 24]} + textColor={theme === 'black' ? 'gray_200' : 'gray_500'} + /> <Shortcuts onClick={logoutMutate} text="로그아웃" padding={[12, 24]} + textColor={theme === 'black' ? 'gray_200' : 'gray_500'} /> </> ) : ( - <Shortcuts onClick={handleLogin} text="로그인" padding={[12, 24]} /> + <Shortcuts + onClick={handleLogin} + text="로그인" + padding={[12, 24]} + textColor={theme === 'black' ? 'gray_200' : 'gray_500'} + /> )} <Divider line padding={24} height={12} /> {(asPath === '/' || asPath === '/home') && @@ -126,6 +141,7 @@ export const HeaderLayout = ({ children }: PropsWithChildren) => { key={link.title} text={link.title} padding={[12, 24]} + textColor={theme === 'black' ? 'gray_200' : 'gray_500'} /> ))} </MobileHeader> @@ -143,6 +159,10 @@ export const HeaderLayout = ({ children }: PropsWithChildren) => { const Wrapper = styled.div` position: relative; background-color: ${({ theme }) => theme.palette.white}; + + ${media.pc} { + min-width: 1200px; + } `; const PcHeader = styled.div` @@ -168,13 +188,15 @@ const Content = styled.div` } `; -const Navigator = styled.div` +const Navigator = styled.div<{ colortheme: ThemeType }>` ${media.mobile} { display: none; } position: absolute; top: 12px; ${({ theme }) => theme.typo.G_Side_15_M} + color : ${({ theme, colortheme }) => + colortheme === 'black' ? theme.palette.white : undefined}; display: flex; gap: 36px; right: 180px; @@ -184,7 +206,8 @@ const Navigator = styled.div` border-radius: 12px; &:hover { - background-color: ${({ theme }) => theme.palette.gray_100}; + background-color: ${({ theme, colortheme }) => + colortheme === 'white' && theme.palette.gray_100}; } } `; diff --git a/apps/ticket/src/components/shared/Layout/HeaderProfileElement.tsx b/apps/ticket/src/components/shared/Layout/HeaderProfileElement.tsx index abb4f739..da36e738 100644 --- a/apps/ticket/src/components/shared/Layout/HeaderProfileElement.tsx +++ b/apps/ticket/src/components/shared/Layout/HeaderProfileElement.tsx @@ -1,4 +1,10 @@ -import { Popup, PopupOptions, Profile } from '@dudoong/ui'; +import { + Popup, + PopupOptions, + Profile, + ThemeType, + useHeaderColorContext, +} from '@dudoong/ui'; import { palette } from '@dudoong/ui/src/theme/palette'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; @@ -11,6 +17,8 @@ interface HeaderProfileElement { } const HeaderProfileElement = (props: HeaderProfileElement) => { const { name, profileOption, image, handleLogin } = props; + const { theme } = useHeaderColorContext(); + return ( <> {name ? ( @@ -34,18 +42,24 @@ const HeaderProfileElement = (props: HeaderProfileElement) => { } /> ) : ( - <LoginButton onClick={handleLogin}>로그인</LoginButton> + <LoginButton onClick={handleLogin} colortheme={theme}> + 로그인 + </LoginButton> )} </> ); }; -const LoginButton = styled.button` +const LoginButton = styled.button<{ colortheme?: ThemeType }>` height: 40px; width: 80px; border-radius: 12px; - border: 1px solid ${({ theme }) => theme.palette.black}; + border: 1px solid + ${({ theme, colortheme }) => + colortheme === 'black' ? theme.palette.white : theme.palette.black}; ${({ theme }) => theme.typo.Text_16} - line-height:100%; + color: ${({ theme, colortheme }) => + colortheme === 'black' ? theme.palette.white : theme.palette.black}; + line-height: 100%; `; export default HeaderProfileElement; diff --git a/apps/ticket/src/components/shared/Layout/MobileHeader.tsx b/apps/ticket/src/components/shared/Layout/MobileHeader.tsx index 77006c5a..6dedaf0c 100644 --- a/apps/ticket/src/components/shared/Layout/MobileHeader.tsx +++ b/apps/ticket/src/components/shared/Layout/MobileHeader.tsx @@ -1,4 +1,4 @@ -import { media } from '@dudoong/ui'; +import { media, palette, ThemeType, useHeaderColorContext } from '@dudoong/ui'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { authState } from '@store/auth'; @@ -8,6 +8,7 @@ import { useRecoilValue } from 'recoil'; const MobileHeader = ({ children }: PropsWithChildren) => { const buttonRef = useRef<HTMLDivElement>(null); + const { theme } = useHeaderColorContext(); const { isAuthenticated } = useRecoilValue(authState); const [toggle, setToggle] = useState<boolean>(false); const onToggle = () => { @@ -15,9 +16,15 @@ const MobileHeader = ({ children }: PropsWithChildren) => { }; return ( - <Wrapper> + <Wrapper colortheme={theme}> <div ref={buttonRef}> - <Hamburger size={24} toggled={toggle} toggle={onToggle} rounded /> + <Hamburger + size={24} + toggled={toggle} + toggle={onToggle} + color={theme === 'black' ? palette.white : undefined} + rounded + /> </div> <HamburgerMenu toggle={toggle} @@ -31,12 +38,13 @@ const MobileHeader = ({ children }: PropsWithChildren) => { }; export default MobileHeader; -const Wrapper = styled.div` +const Wrapper = styled.div<{ colortheme: ThemeType }>` position: sticky; top: 0; width: 100%; z-index: 2; - background-color: ${({ theme }) => theme.palette.white}; + background-color: ${({ theme, colortheme }) => + colortheme === 'black' ? theme.palette.black : theme.palette.white}; & > div:first-of-type { width: 100%; padding: 12px; @@ -49,7 +57,10 @@ const Wrapper = styled.div` } `; -const HamburgerMenu = styled.div<{ toggle: boolean; height: number }>` +const HamburgerMenu = styled.div<{ + toggle: boolean; + height: number; +}>` height: ${({ toggle, height }) => (toggle ? height : 0)}px; transition: all 0.1s ease-in-out; overflow: hidden; diff --git a/apps/ticket/src/components/shared/Layout/index.tsx b/apps/ticket/src/components/shared/Layout/index.tsx index 3e5ad000..a89e6710 100644 --- a/apps/ticket/src/components/shared/Layout/index.tsx +++ b/apps/ticket/src/components/shared/Layout/index.tsx @@ -1,3 +1,4 @@ +import { HeaderColorProvider } from '@dudoong/ui'; import { useRouter } from 'next/router'; import { ReactNode } from 'react'; import { HeaderLayout } from './HeaderLayout'; @@ -12,9 +13,9 @@ const Layout = ({ children }: HeaderLayoutProps) => { return <>{children}</>; } else { return ( - <> + <HeaderColorProvider> <HeaderLayout>{children}</HeaderLayout> - </> + </HeaderColorProvider> ); } }; diff --git a/apps/ticket/src/components/shared/Media.tsx b/apps/ticket/src/components/shared/Media.tsx new file mode 100644 index 00000000..6e4ad36f --- /dev/null +++ b/apps/ticket/src/components/shared/Media.tsx @@ -0,0 +1,95 @@ +import { ReactNode } from 'react'; +import { Spacing as BaseSpacing, media } from '@dudoong/ui'; +import { Padding as BasePadding, PaddingProps, PaddingSize } from '@dudoong/ui'; +import { Text as BaseTxt, TextProps, typo } from '@dudoong/ui'; +import { css } from '@emotion/react'; + +const Mobile = ({ children }: { children: ReactNode }) => { + return ( + <div + css={css` + ${media.pc} { + display: none; + } + `} + > + {children} + </div> + ); +}; + +const PC = ({ children }: { children: ReactNode }) => { + return ( + <div + css={css` + ${media.mobile} { + display: none; + } + `} + > + {children} + </div> + ); +}; + +const Spacing = ({ mobile, pc }: { mobile: number; pc: number }) => { + return ( + <> + <PC> + <BaseSpacing size={pc} /> + </PC> + <Mobile> + <BaseSpacing size={mobile} /> + </Mobile> + </> + ); +}; + +const Padding = ({ + mobile, + pc, + children, + ...rest +}: PaddingProps & { mobile: PaddingSize; pc: PaddingSize }) => { + return ( + <> + <PC> + <BasePadding size={pc} {...rest}> + {children} + </BasePadding> + </PC> + <Mobile> + <BasePadding size={mobile} {...rest}> + {children} + </BasePadding> + </Mobile> + </> + ); +}; + +const Txt = ({ + mobile, + pc, + children, + ...rest +}: Omit<TextProps, 'typo'> & { + mobile: keyof typeof typo; + pc: keyof typeof typo; +}) => { + return ( + <> + <PC> + <BaseTxt typo={pc} {...rest}> + {children} + </BaseTxt> + </PC> + <Mobile> + <BaseTxt typo={mobile} {...rest}> + {children} + </BaseTxt> + </Mobile> + </> + ); +}; + +export default { Mobile, PC, Spacing, Padding, Txt }; diff --git a/apps/ticket/src/components/shared/Shortcuts.tsx b/apps/ticket/src/components/shared/Shortcuts.tsx index 3850080b..6290570a 100644 --- a/apps/ticket/src/components/shared/Shortcuts.tsx +++ b/apps/ticket/src/components/shared/Shortcuts.tsx @@ -1,4 +1,4 @@ -import { KeyOfPalette, ListRow, PaddingSize } from '@dudoong/ui'; +import { KeyOfPalette, ListRow, PaddingSize, ThemeType } from '@dudoong/ui'; import Chevron from '@assets/chevron.svg'; import { useRouter } from 'next/router'; import styled from '@emotion/styled'; @@ -19,6 +19,7 @@ const Shortcuts = ({ padding, }: ShortcutsProps) => { const router = useRouter(); + return ( <StyledListRow padding={padding} @@ -34,7 +35,6 @@ export default Shortcuts; const StyledListRow = styled(ListRow)` cursor: pointer; - transform: scale(1); transition: all 0.1s ease-out; diff --git a/shared/ui/src/components/Header/index.tsx b/shared/ui/src/components/Header/index.tsx index bfc58c54..6fc8aa90 100644 --- a/shared/ui/src/components/Header/index.tsx +++ b/shared/ui/src/components/Header/index.tsx @@ -5,6 +5,9 @@ import { HTMLAttributes, ReactNode } from 'react'; import { FlexBox, Padding } from '../../layout'; import { Text } from '../Text'; import Logo from '../../assets/logo/Logo'; +import { ThemeType, useHeaderColorContext } from './useHeaderColorContext'; +import { palette } from '../../theme'; +export * from './useHeaderColorContext'; export interface HeaderProps extends HTMLAttributes<HTMLDivElement> { rightElement: ReactNode; @@ -12,8 +15,10 @@ export interface HeaderProps extends HTMLAttributes<HTMLDivElement> { } export const Header = ({ rightElement, title }: HeaderProps) => { + const { theme } = useHeaderColorContext(); + return ( - <Wrapper align={'center'}> + <Wrapper align={'center'} colortheme={theme}> <Padding size={[0, 38]} fill> <FlexBox justify={'space-between'} align={'center'}> <button @@ -21,7 +26,7 @@ export const Header = ({ rightElement, title }: HeaderProps) => { (window.location.href = `${window.location.origin}/home`) } > - <Logo /> + <Logo fill={theme === 'black' ? palette.white : '#040001'} /> </button> {rightElement} </FlexBox> @@ -43,9 +48,25 @@ export const Header = ({ rightElement, title }: HeaderProps) => { ); }; -const Wrapper = styled(FlexBox)` +const Wrapper = styled(FlexBox)<{ colortheme?: ThemeType }>` height: 64px; width: 100%; - border-bottom: 1px solid ${({ theme }) => theme.palette.gray_200}; + border-bottom: 1px solid + ${({ theme, colortheme }) => + colortheme === 'black' ? 'transparent' : theme.palette.gray_200}; box-sizing: border-box; + background-color: ${({ colortheme, theme }) => + colortheme === 'black' ? theme.palette.black : theme.palette.white}; + + transition: color 0.2s; + -webkit-transition: background-color 0.2s linear; + -ms-transition: background-color 0.2s linear; + transition: background-color 0.2s linear; + + & * { + transition: color 0.2s; + -webkit-transition: background-color 0.2s linear; + -ms-transition: background-color 0.2s linear; + transition: background-color 0.2s linear; + } `; diff --git a/shared/ui/src/components/Header/useHeaderColorContext.tsx b/shared/ui/src/components/Header/useHeaderColorContext.tsx new file mode 100644 index 00000000..975f0c13 --- /dev/null +++ b/shared/ui/src/components/Header/useHeaderColorContext.tsx @@ -0,0 +1,40 @@ +import React, { + createContext, + useContext, + useState, + ReactNode, + useCallback, +} from 'react'; + +export type ThemeType = 'black' | 'white'; +export interface HeaderColorContextType { + theme: ThemeType; + setHeaderColor: (value: ThemeType) => void; +} + +export const headerColorContext = createContext<HeaderColorContextType>({ + theme: 'white', + setHeaderColor: () => {}, +}); + +export const useHeaderColorContext = (): HeaderColorContextType => { + const context = useContext(headerColorContext); + if (!context) { + throw new Error( + 'useHeaderColorContext 훅은 HeaderColorProvider 안에서 사용 되어야 해요.', + ); + } + return context; +}; + +export const HeaderColorProvider = ({ children }: { children: ReactNode }) => { + const [theme, setTheme] = useState<ThemeType>('white'); + + const setHeaderColor = useCallback((value: ThemeType) => setTheme(value), []); + + return ( + <headerColorContext.Provider value={{ theme, setHeaderColor }}> + {children} + </headerColorContext.Provider> + ); +}; diff --git a/shared/ui/src/components/Text/index.tsx b/shared/ui/src/components/Text/index.tsx index 85adf418..323011bf 100644 --- a/shared/ui/src/components/Text/index.tsx +++ b/shared/ui/src/components/Text/index.tsx @@ -1,9 +1,9 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { HTMLAttributes } from 'react'; +import { ComponentProps, HTMLAttributes } from 'react'; import { KeyOfPalette, KeyOfTypo } from '../../theme'; -export interface TextProps extends HTMLAttributes<HTMLSpanElement> { +export interface TextProps extends ComponentProps<'span'> { as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'; typo: KeyOfTypo; color?: KeyOfPalette; diff --git a/shared/ui/src/layout/Padding.tsx b/shared/ui/src/layout/Padding.tsx index 466f67d6..8bd17909 100644 --- a/shared/ui/src/layout/Padding.tsx +++ b/shared/ui/src/layout/Padding.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import { HTMLAttributes, ReactNode } from 'react'; -interface PaddingProps extends HTMLAttributes<HTMLDivElement> { +export interface PaddingProps extends HTMLAttributes<HTMLDivElement> { children: ReactNode; size?: PaddingSize; fill?: boolean; diff --git a/shared/ui/src/theme/index.ts b/shared/ui/src/theme/index.ts index 56f1ad42..897d6739 100644 --- a/shared/ui/src/theme/index.ts +++ b/shared/ui/src/theme/index.ts @@ -1,2 +1,4 @@ export * from './global'; export * from './theme'; +export * from './typo'; +export * from './palette'; diff --git a/shared/ui/src/theme/palette.ts b/shared/ui/src/theme/palette.ts index aadf2de3..f94047e5 100644 --- a/shared/ui/src/theme/palette.ts +++ b/shared/ui/src/theme/palette.ts @@ -4,7 +4,7 @@ export const palette = { main_300: '#BEA2FA', main_400: '#9568F6', main_500: '#6B36DC', - point_mint: '#25F3CF', + point_mint: '#13E8C2', sub_mint: '#11CFAE', red_100: '#FFE5E8', red_200: '#FF5461', diff --git a/shared/ui/src/theme/typo.ts b/shared/ui/src/theme/typo.ts index 50348d84..7a86535c 100644 --- a/shared/ui/src/theme/typo.ts +++ b/shared/ui/src/theme/typo.ts @@ -83,6 +83,18 @@ export const typo = { `, // ------------------------------- new font ------------------------------- // Header + G_Header_36_B: css` + font-family: 'Gmarket Sans'; + font-weight: 700; + font-size: ${calcRem(36)}; + line-height: 120%; + `, + G_Header_45_B: css` + font-family: 'Gmarket Sans'; + font-weight: 700; + font-size: ${calcRem(45)}; + line-height: 120%; + `, G_Header_28_B: css` font-family: 'Gmarket Sans'; font-weight: 700; @@ -138,12 +150,24 @@ export const typo = { line-height: 120%; `, // Text + G_Text_22_M: css` + font-family: 'Gmarket Sans'; + font-weight: 500; + font-size: ${calcRem(22)}; + line-height: 150%; + `, G_Text_18_M: css` font-family: 'Gmarket Sans'; font-weight: 500; font-size: ${calcRem(18)}; line-height: 150%; `, + P_Text_22_M: css` + font-family: 'Pretendard'; + font-weight: 500; + font-size: ${calcRem(22)}; + line-height: 150%; + `, P_Text_18_SB: css` font-family: 'Pretendard'; font-weight: 600; diff --git a/yarn.lock b/yarn.lock index 7508bfde..e0047e84 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1714,6 +1714,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.19.0, @babel/runtime@npm:^7.21.0": + version: 7.23.9 + resolution: "@babel/runtime@npm:7.23.9" + dependencies: + regenerator-runtime: ^0.14.0 + checksum: 6bbebe8d27c0c2dd275d1ac197fc1a6c00e18dab68cc7aaff0adc3195b45862bae9c4cc58975629004b0213955b2ed91e99eccb3d9b39cabea246c657323d667 + languageName: node + linkType: hard + "@babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.9.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" @@ -5203,6 +5212,55 @@ __metadata: languageName: node linkType: hard +"@toss/impression-area@npm:^1.3.1": + version: 1.3.1 + resolution: "@toss/impression-area@npm:1.3.1" + dependencies: + "@toss/react": ^1.6.1 + "@toss/utils": ^1.4.6 + "@types/react": ^18.0.21 + lodash.debounce: ^4.0.8 + peerDependencies: + react: "*" + checksum: bc29c2b4e92586eb0e39518b5c5419514d1bbfc734b305c2d9f4fcc925829f3982a81b4a950d428485144cdde318fd702b076e0099c9c34294e4294a3b55fa77 + languageName: node + linkType: hard + +"@toss/react@npm:^1.6.1": + version: 1.6.1 + resolution: "@toss/react@npm:1.6.1" + dependencies: + "@babel/runtime": ^7.14.8 + "@toss/storage": ^1.3.1 + "@toss/utils": ^1.4.6 + classnames: ^2.3.1 + lodash.debounce: ^4.0.8 + lodash.throttle: ^4.1.1 + peerDependencies: + react: ^16.0.0 || ^17.0.0 || ^18 + checksum: 870cd5f43d917f7b15da6a3ad56ffac06895d203236f4c6050e90c8086cfd4aa1bc4375d506d0768f79f03767103e066d7777a277f9c7826447384c60f004fcc + languageName: node + linkType: hard + +"@toss/storage@npm:^1.3.1": + version: 1.3.1 + resolution: "@toss/storage@npm:1.3.1" + dependencies: + "@babel/runtime": ^7.19.0 + checksum: 267be4e1de2a6ebd9f8a745b1b2d9df184fcee9f9aeaa40f368d0dbaac34421fc0e44378e28bec772e5cb1d651cbfb22c20a6376a0e7f0474ded0b3f78b92dd3 + languageName: node + linkType: hard + +"@toss/utils@npm:^1.4.6": + version: 1.4.6 + resolution: "@toss/utils@npm:1.4.6" + dependencies: + "@babel/runtime": ^7.14.8 + date-fns: ^2.25.0 + checksum: 69ec8b76bc6cee1d96956cbef62d2b448008d733031aa6469ccdcf1c0e743c20cd930cf947a821e7d553c73f7149ee07c5796ab67a233a0a1e13312ef7a73126 + languageName: node + linkType: hard + "@tosspayments/payment-widget-sdk@npm:^0.5.2": version: 0.5.2 resolution: "@tosspayments/payment-widget-sdk@npm:0.5.2" @@ -5723,6 +5781,17 @@ __metadata: languageName: node linkType: hard +"@types/react@npm:^18.0.21": + version: 18.2.48 + resolution: "@types/react@npm:18.2.48" + dependencies: + "@types/prop-types": "*" + "@types/scheduler": "*" + csstype: ^3.0.2 + checksum: c9ca43ed2995389b7e09492c24e6f911a8439bb8276dd17cc66a2fbebbf0b42daf7b2ad177043256533607c2ca644d7d928fdfce37a67af1f8646d2bac988900 + languageName: node + linkType: hard + "@types/resolve@npm:1.17.1": version: 1.17.1 resolution: "@types/resolve@npm:1.17.1" @@ -8951,6 +9020,15 @@ __metadata: languageName: node linkType: hard +"date-fns@npm:^2.25.0": + version: 2.30.0 + resolution: "date-fns@npm:2.30.0" + dependencies: + "@babel/runtime": ^7.21.0 + checksum: f7be01523282e9bb06c0cd2693d34f245247a29098527d4420628966a2d9aad154bd0e90a6b1cf66d37adcb769cd108cf8a7bd49d76db0fb119af5cdd13644f4 + languageName: node + linkType: hard + "dayjs@npm:^1.11.1": version: 1.11.7 resolution: "dayjs@npm:1.11.7" @@ -14025,6 +14103,13 @@ __metadata: languageName: node linkType: hard +"lodash.throttle@npm:^4.1.1": + version: 4.1.1 + resolution: "lodash.throttle@npm:4.1.1" + checksum: 129c0a28cee48b348aef146f638ef8a8b197944d4e9ec26c1890c19d9bf5a5690fe11b655c77a4551268819b32d27f4206343e30c78961f60b561b8608c8c805 + languageName: node + linkType: hard + "lodash.toarray@npm:^3.0.0": version: 3.0.2 resolution: "lodash.toarray@npm:3.0.2" @@ -18583,6 +18668,13 @@ __metadata: languageName: node linkType: hard +"regenerator-runtime@npm:^0.14.0": + version: 0.14.1 + resolution: "regenerator-runtime@npm:0.14.1" + checksum: 9f57c93277b5585d3c83b0cf76be47b473ae8c6d9142a46ce8b0291a04bb2cf902059f0f8445dcabb3fb7378e5fe4bb4ea1e008876343d42e46d3b484534ce38 + languageName: node + linkType: hard + "regenerator-transform@npm:^0.15.1": version: 0.15.1 resolution: "regenerator-transform@npm:0.15.1" @@ -20789,6 +20881,7 @@ __metadata: "@next/font": 13.0.7 "@svgr/webpack": ^6.5.1 "@toast-ui/react-editor": ^3.2.2 + "@toss/impression-area": ^1.3.1 "@tosspayments/payment-widget-sdk": ^0.5.2 "@types/gtag.js": ^0.0.12 "@types/node": 18.11.16 From 25cd7930cb4ed767d079dc49d688ace82f867abf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=95=9C=EA=B7=9C=EC=A7=84?= <55226431+9yujin@users.noreply.github.com> Date: Sat, 3 Feb 2024 23:34:59 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EB=8F=84=EC=BB=A4=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95=20(#316)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat : 랜딩페이지 리뉴얼 title * feat : 헤더 색상 컨텍스트 관리 * feat: 랜딩페이지 리뉴얼 * feat: 도커파일 수정 --------- Co-authored-by: 9yujin <9yujin@toss.im> --- Dockerfile.ticket | 40 ++++++++++++++++------------------------ 1 file changed, 16 insertions(+), 24 deletions(-) diff --git a/Dockerfile.ticket b/Dockerfile.ticket index f8208a24..2e600f38 100644 --- a/Dockerfile.ticket +++ b/Dockerfile.ticket @@ -1,38 +1,30 @@ FROM node:16-alpine AS builder -# set working directory + +# 작업 디렉토리 설정 WORKDIR /app -# install app dependencies -#copies package.json and package-lock.json to Docker environment -# COPY package-lock.json ./ + +# package.json 및 yarn.lock 파일 복사 COPY package.json ./ COPY yarn.lock ./ -# Installs all node packages -# RUN npm ci -RUN npm install yarn --global --force -RUN yarn install --immutable --immutable-cache --check-cache +# Yarn을 최신 버전으로 업그레이드 +RUN npm install yarn@3.3.0 --global --force + +# 의존성 설치 +RUN yarn install --immutable --immutable-cache --check-cache -# Copies everything over to Docker environment +# 애플리케이션 소스 복사 COPY . ./ + +# 필요없는 디렉토리 제거 RUN rm -rf apps/admin -RUN yarn install -# RUN npm run build +# 앱 빌드 RUN yarn ticket:build + +# 캐시 제거 RUN rm -rf apps/ticket/.next/cache -#Stage 2 -####################################### -#pull the official nginx:1.19.0 base image -# FROM nginx:1.19.0 -#copies React to the container directory -# Set working directory to nginx resources directory -# WORKDIR /usr/share/nginx/html -# COPY ./nginx/ticket.conf /etc/nginx/conf.d/default.conf -# Remove default nginx static resources -# RUN rm -rf ./usr/share/nginx/html/* -# Copies static resources from builder stage -# COPY --from=builder /app/build /usr/share/nginx/html/ -# Containers run nginx with global directives and daemon off EXPOSE 3000 + CMD ["yarn", "ticket:start"] From aa75d5a61669594203ae795a0bc3264702f6b405 Mon Sep 17 00:00:00 2001 From: 9yujin <9yujin@toss.im> Date: Sat, 3 Feb 2024 23:39:25 +0900 Subject: [PATCH 3/5] feat : yarn set version berry --- Dockerfile.ticket | 43 ++++++++++++++++++++++++++----------------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/Dockerfile.ticket b/Dockerfile.ticket index 2e600f38..e44c29f0 100644 --- a/Dockerfile.ticket +++ b/Dockerfile.ticket @@ -1,30 +1,39 @@ FROM node:16-alpine AS builder - -# 작업 디렉토리 설정 +# set working directory WORKDIR /app - -# package.json 및 yarn.lock 파일 복사 +# install app dependencies +#copies package.json and package-lock.json to Docker environment +# COPY package-lock.json ./ COPY package.json ./ COPY yarn.lock ./ - -# Yarn을 최신 버전으로 업그레이드 -RUN npm install yarn@3.3.0 --global --force - -# 의존성 설치 +# Installs all node packages +# RUN npm ci +RUN npm install yarn --global --force +RUN yarn set version berry RUN yarn install --immutable --immutable-cache --check-cache -# 애플리케이션 소스 복사 -COPY . ./ -# 필요없는 디렉토리 제거 +# Copies everything over to Docker environment +COPY . ./ RUN rm -rf apps/admin -# 앱 빌드 +RUN yarn install +# RUN npm run build RUN yarn ticket:build - -# 캐시 제거 RUN rm -rf apps/ticket/.next/cache +#Stage 2 +####################################### +#pull the official nginx:1.19.0 base image +# FROM nginx:1.19.0 +#copies React to the container directory +# Set working directory to nginx resources directory +# WORKDIR /usr/share/nginx/html +# COPY ./nginx/ticket.conf /etc/nginx/conf.d/default.conf +# Remove default nginx static resources +# RUN rm -rf ./usr/share/nginx/html/* +# Copies static resources from builder stage +# COPY --from=builder /app/build /usr/share/nginx/html/ +# Containers run nginx with global directives and daemon off EXPOSE 3000 - -CMD ["yarn", "ticket:start"] +CMD ["yarn", "ticket:start"] \ No newline at end of file From 199337aee6319f92ff8d3e953e238520ab24964e Mon Sep 17 00:00:00 2001 From: 9yujin <9yujin@toss.im> Date: Sat, 3 Feb 2024 23:57:41 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20yarn=203.3.0=20=EB=8F=84=EC=BB=A4?= =?UTF-8?q?=EC=97=90=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Dockerfile.ticket | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile.ticket b/Dockerfile.ticket index e44c29f0..447b1e90 100644 --- a/Dockerfile.ticket +++ b/Dockerfile.ticket @@ -8,7 +8,7 @@ COPY package.json ./ COPY yarn.lock ./ # Installs all node packages # RUN npm ci -RUN npm install yarn --global --force +RUN npm install yarn@3.3.0 --global --force RUN yarn set version berry RUN yarn install --immutable --immutable-cache --check-cache From 40e6f9a0331de498830f6b58abc3643e31b6899c Mon Sep 17 00:00:00 2001 From: 9yujin <9yujin@toss.im> Date: Sun, 4 Feb 2024 00:00:36 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20yarn=203.3.0=20=EB=8F=84=EC=BB=A4?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Dockerfile.ticket | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/Dockerfile.ticket b/Dockerfile.ticket index 447b1e90..922403d6 100644 --- a/Dockerfile.ticket +++ b/Dockerfile.ticket @@ -8,9 +8,7 @@ COPY package.json ./ COPY yarn.lock ./ # Installs all node packages # RUN npm ci -RUN npm install yarn@3.3.0 --global --force -RUN yarn set version berry -RUN yarn install --immutable --immutable-cache --check-cache +RUN yarn set version 3.3.0 # Copies everything over to Docker environment