From 8f4dc60be176690ee3eec13e54bcb9f195b6f0d6 Mon Sep 17 00:00:00 2001 From: crew852 <65230973+crew852@users.noreply.github.com> Date: Sat, 28 Sep 2024 23:15:21 +0900 Subject: [PATCH] [ORT-5] feat: add login modal (#5) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add login modal, pnpm command - 카카오 로그인 버튼의 링크는 연동되어 있지 않습니다. - 미디어 쿼리 관련 일부 항목 수정 및 pnpm type check 명령어 추가 내용이 포함되어 있습니다. * fix: pass breakpoints directly --------- Co-authored-by: aube-dev --- .github/workflows/lint.yml | 3 + app/components/LoginModal/LoginModal.css.ts | 126 ++++++++++++++++++ .../LoginModal/LoginModal.stories.tsx | 13 ++ app/components/LoginModal/LoginModal.tsx | 61 +++++++++ app/components/LoginModal/index.ts | 3 + app/components/common/Button/Button.css.ts | 6 +- .../common/FormInput/FormInput.css.ts | 6 +- .../common/FormItem/FormItem.css.ts | 2 +- app/styles/text.css.ts | 2 +- app/utils/style.ts | 2 +- 10 files changed, 215 insertions(+), 9 deletions(-) create mode 100644 app/components/LoginModal/LoginModal.css.ts create mode 100644 app/components/LoginModal/LoginModal.stories.tsx create mode 100644 app/components/LoginModal/LoginModal.tsx create mode 100644 app/components/LoginModal/index.ts diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 74ce8b8..9def579 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -25,5 +25,8 @@ jobs: - name: 📦 Install dependencies run: pnpm install + - name: 📦 Check Type + run: pnpm exec tsc --noEmit + - name: 📦 Run ESLint run: pnpm exec eslint . --max-warnings=0 diff --git a/app/components/LoginModal/LoginModal.css.ts b/app/components/LoginModal/LoginModal.css.ts new file mode 100644 index 0000000..e705029 --- /dev/null +++ b/app/components/LoginModal/LoginModal.css.ts @@ -0,0 +1,126 @@ +import { style } from '@vanilla-extract/css'; +import { Breakpoint } from '@/constants/style'; +import { textStyle } from '@/styles/text.css'; +import { themeVars } from '@/styles/theme.css'; +import { getMediaQuery } from '@/utils/style'; + +export const background = style({ + width: '100%', + height: '100%', + display: 'flex', + position: 'fixed', + top: '0px', + left: '0px', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'rgba(0, 0, 0, 0.5)', +}); + +export const modal = style({ + width: '384px', + height: '492px', + padding: '52px 24px 32px 24px', + margin: '24px', + backgroundColor: themeVars.color.grayscale.white.hex, + display: 'flex', + flexDirection: 'column', + borderTopLeftRadius: '9999px', + borderTopRightRadius: '9999px', + borderBottomLeftRadius: '200px', + borderBottomRightRadius: '200px', + overflow: 'clip', + '@media': { + [getMediaQuery(Breakpoint.MOBILE1, Breakpoint.MOBILE2)]: { + maxWidth: '384px', + width: '100%', + height: 'auto', + aspectRatio: '384 / 429', + padding: + 'min(calc((28 / 132) * (100% - 252px) + 24px), 52px) 24px 24px 24px', + }, + }, +}); + +export const modalContent = style({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + alignItems: 'center', + height: '100%', +}); + +export const logo = style({ + maxWidth: '480px', + height: '200px', + aspectRatio: '480 / 200', + '@media': { + [getMediaQuery(Breakpoint.MOBILE1, Breakpoint.MOBILE2)]: { + width: `calc(100% + 60px + 48px)`, + height: 'auto', + maxWidth: 'calc(444px + 96px + 48px)', + }, + [getMediaQuery([280, 340])]: { + width: `calc(100% + 20px + 48px)`, + }, + }, +}); + +export const loginButton = style({ + width: '100%', + height: '52px', + borderRadius: '8px', + border: 'none', + backgroundColor: '#FEE500', + paddingTop: '0px', + paddingBottom: '0px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + position: 'relative', + '@media': { + [getMediaQuery(Breakpoint.MOBILE1, Breakpoint.MOBILE2)]: { + height: '44px', + }, + [getMediaQuery([280, 340])]: { + height: '40px', + }, + }, +}); + +export const text = style([ + textStyle.headline2B, + { + color: themeVars.color.grayscale.black.hex, + width: '100%', + textAlign: 'center', + '@media': { + [getMediaQuery(Breakpoint.MOBILE1, Breakpoint.MOBILE2)]: { + maxHeight: '50px', + overflow: 'hidden', + }, + [getMediaQuery([280, 340])]: { + fontSize: '16px', + lineHeight: '20px', + }, + }, + }, +]); + +export const kakaoText = style([ + textStyle.subtitle2B, + { + color: '#191919', + '@media': { + [getMediaQuery([280, 340])]: { + paddingLeft: '12px', + }, + }, + }, +]); + +export const kakaoIcon = style({ + position: 'absolute', + left: '16px', + width: '28px', + height: '28px', +}); diff --git a/app/components/LoginModal/LoginModal.stories.tsx b/app/components/LoginModal/LoginModal.stories.tsx new file mode 100644 index 0000000..e009289 --- /dev/null +++ b/app/components/LoginModal/LoginModal.stories.tsx @@ -0,0 +1,13 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import LoginModal from './LoginModal'; + +const meta: Meta = { + component: LoginModal, +}; + +export default meta; + +type Story = StoryObj; + +export const Main: Story = {}; diff --git a/app/components/LoginModal/LoginModal.tsx b/app/components/LoginModal/LoginModal.tsx new file mode 100644 index 0000000..7b92d5d --- /dev/null +++ b/app/components/LoginModal/LoginModal.tsx @@ -0,0 +1,61 @@ +import * as styles from './LoginModal.css'; + +const LoginModal = () => ( +
+
+
+ + + + + + + + + + + +

+ 로그인하고 더 편리한 +
+ 동아리 활동을 즐겨 보세요. +

+ +
+
+
+); + +export default LoginModal; diff --git a/app/components/LoginModal/index.ts b/app/components/LoginModal/index.ts new file mode 100644 index 0000000..e42f615 --- /dev/null +++ b/app/components/LoginModal/index.ts @@ -0,0 +1,3 @@ +import LoginModal from './LoginModal'; + +export default LoginModal; diff --git a/app/components/common/Button/Button.css.ts b/app/components/common/Button/Button.css.ts index 5e836e5..8bdec10 100644 --- a/app/components/common/Button/Button.css.ts +++ b/app/components/common/Button/Button.css.ts @@ -53,7 +53,7 @@ export const buttonStyleBySize = styleVariants({ padding: '6px 12px', borderRadius: '12px', '@media': { - [getMediaQuery([Breakpoint.MOBILE1, Breakpoint.MOBILE2])]: { + [getMediaQuery(Breakpoint.MOBILE1, Breakpoint.MOBILE2)]: { padding: '6px 12px', borderRadius: '10px', }, @@ -63,7 +63,7 @@ export const buttonStyleBySize = styleVariants({ padding: '12px 28px', borderRadius: '12px', '@media': { - [getMediaQuery([Breakpoint.MOBILE1, Breakpoint.MOBILE2])]: { + [getMediaQuery(Breakpoint.MOBILE1, Breakpoint.MOBILE2)]: { padding: '10px 24px', borderRadius: '10px', }, @@ -73,7 +73,7 @@ export const buttonStyleBySize = styleVariants({ padding: '12px 32px', borderRadius: '12px', '@media': { - [getMediaQuery([Breakpoint.MOBILE1, Breakpoint.MOBILE2])]: { + [getMediaQuery(Breakpoint.MOBILE1, Breakpoint.MOBILE2)]: { padding: '12px 32px', borderRadius: '12px', }, diff --git a/app/components/common/FormInput/FormInput.css.ts b/app/components/common/FormInput/FormInput.css.ts index 3fd0591..27bc6a3 100644 --- a/app/components/common/FormInput/FormInput.css.ts +++ b/app/components/common/FormInput/FormInput.css.ts @@ -17,7 +17,7 @@ export const textInputContainer = style({ borderWidth: '1px', height: '33px', '@media': { - [getMediaQuery([Breakpoint.MOBILE2, Breakpoint.MOBILE1])]: { + [getMediaQuery(Breakpoint.MOBILE2, Breakpoint.MOBILE1)]: { gap: '6px', height: '31px', }, @@ -32,7 +32,7 @@ export const textInputIcon = style({ width: '16px', height: '16px', '@media': { - [getMediaQuery([Breakpoint.MOBILE2, Breakpoint.MOBILE1])]: { + [getMediaQuery(Breakpoint.MOBILE2, Breakpoint.MOBILE1)]: { width: '12px', height: '12px', }, @@ -67,7 +67,7 @@ export const imageInputContainer = style({ cursor: 'pointer', overflow: 'hidden', '@media': { - [getMediaQuery([Breakpoint.MOBILE2, Breakpoint.MOBILE1])]: { + [getMediaQuery(Breakpoint.MOBILE2, Breakpoint.MOBILE1)]: { width: '80px', height: '80px', borderRadius: '40px', diff --git a/app/components/common/FormItem/FormItem.css.ts b/app/components/common/FormItem/FormItem.css.ts index 43dfc13..e7dede8 100644 --- a/app/components/common/FormItem/FormItem.css.ts +++ b/app/components/common/FormItem/FormItem.css.ts @@ -36,7 +36,7 @@ export const caption = style([ display: 'block', minHeight: `${textStyleInfo.body2R.pc.lineHeight}px`, '@media': { - [getMediaQuery([Breakpoint.MOBILE2, Breakpoint.MOBILE1])]: { + [getMediaQuery(Breakpoint.MOBILE2, Breakpoint.MOBILE1)]: { minHeight: `${textStyleInfo.body2R.mobile.lineHeight}px`, }, }, diff --git a/app/styles/text.css.ts b/app/styles/text.css.ts index d522a84..e2e81bd 100644 --- a/app/styles/text.css.ts +++ b/app/styles/text.css.ts @@ -16,7 +16,7 @@ const getTextStyleFromInfo = < lineHeight: `${info.pc.lineHeight / 10}rem`, fontWeight: info.pc.fontWeight, '@media': { - [getMediaQuery([Breakpoint.MOBILE1, Breakpoint.MOBILE2])]: { + [getMediaQuery(Breakpoint.MOBILE1, Breakpoint.MOBILE2)]: { fontSize: `${info.mobile.fontSize / 10}rem`, lineHeight: `${info.mobile.lineHeight / 10}rem`, fontWeight: info.mobile.fontWeight, diff --git a/app/utils/style.ts b/app/utils/style.ts index 874c2be..07f4e10 100644 --- a/app/utils/style.ts +++ b/app/utils/style.ts @@ -23,7 +23,7 @@ * ``` */ export const getMediaQuery = ( - breakpoints: readonly (readonly [number, number])[], + ...breakpoints: readonly (readonly [number, number])[] ) => { const { minimum, maximum } = breakpoints.reduce( (prev, cur) => ({