[ORT-5] feat: add login modal (#5)

* feat: add login modal, pnpm command - 카카오 로그인 버튼의 링크는 연동되어 있지 않습니다. - 미디어 쿼리 관련 일부 항목 수정 및 pnpm type check 명령어 추가 내용이 포함되어 있습니다. * fix: pass breakpoints directly --------- Co-authored-by: aube-dev <[email protected]>
majority-elite · Sep 28, 2024 · 8f4dc60 · 8f4dc60
1 parent e99a56c
commit 8f4dc60
Show file tree

Hide file tree

Showing 10 changed files with 215 additions and 9 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import LoginModal from './LoginModal';
+
+const meta: Meta<typeof LoginModal> = {
+  component: LoginModal,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoginModal>;
+
+export const Main: Story = {};
diff --git a/app/components/LoginModal/LoginModal.tsx b/app/components/LoginModal/LoginModal.tsx
@@ -0,0 +1,61 @@
+import * as styles from './LoginModal.css';
+
+const LoginModal = () => (
+  <div className={styles.background}>
+    <div className={styles.modal}>
+      <div className={styles.modalContent}>
+        <svg
+          className={styles.logo}
+          // width="480"
+          // height="200"
+          viewBox="0 0 480 200"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g opacity="0.5">
+            <path
+              d="M6.31567 100C6.31567 48.2233 48.289 6.25 100.066 6.25H102.039C153.816 6.25 195.789 48.2233 195.789 100V100C195.789 151.777 153.816 193.75 102.039 193.75H100.066C48.289 193.75 6.31567 151.777 6.31567 100V100Z"
+              fill="#F07F2E"
+            />
+          </g>
+          <g opacity="0.5">
+            <path
+              d="M156.856 105.25C156.856 50.5738 201.18 6.25 255.856 6.25H342.987C343.4 6.25 343.735 6.58696 343.735 6.99956V6.99956C343.735 109.798 260.4 193.75 157.601 193.75V193.75C157.19 193.75 156.856 193.417 156.856 193.005V105.25Z"
+              fill="#F07F2E"
+            />
+          </g>
+          <g opacity="0.5">
+            <path
+              d="M284.21 13.4685C284.21 9.48182 287.442 6.25 291.429 6.25H466.466C470.452 6.25 473.684 9.48182 473.684 13.4685V99.0132C473.684 151.335 431.269 193.75 378.947 193.75V193.75C326.626 193.75 284.21 151.335 284.21 99.0132V13.4685Z"
+              fill="#F07F2E"
+            />
+          </g>
+        </svg>
+        <p className={styles.text}>
+          로그인하고 더 편리한
+          <br />
+          동아리 활동을 즐겨 보세요.
+        </p>
+        <button className={styles.loginButton}>
+          <div className={styles.kakaoIcon}>
+            <svg
+              width="28"
+              height="28"
+              viewBox="0 0 28 28"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M13.9934 5.83334C8.83044 5.83334 4.66675 9.16426 4.66675 13.208C4.66675 15.8328 6.39884 18.1312 8.99699 19.4436L8.11762 22.7279C8.10104 22.7772 8.09849 22.83 8.11025 22.8806C8.12202 22.9312 8.14763 22.9775 8.18424 23.0144C8.2376 23.0614 8.30627 23.0875 8.37743 23.0876C8.43643 23.0829 8.49241 23.0596 8.53732 23.021L12.3213 20.4695C12.8798 20.5466 13.4429 20.5866 14.0067 20.5894C19.1631 20.5894 23.3334 17.2585 23.3334 13.208C23.3334 9.1576 19.1497 5.83334 13.9934 5.83334Z"
+                fill="#191919"
+              />
+            </svg>
+          </div>
+          <p className={styles.kakaoText}>카카오로 계속하기</p>
+        </button>
+      </div>
+    </div>
+  </div>
+);
+
+export default LoginModal;
diff --git a/app/components/LoginModal/index.ts 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -23,7 +23,7 @@
  * ```
  */
 export const getMediaQuery = (
-  breakpoints: readonly (readonly [number, number])[],
+  ...breakpoints: readonly (readonly [number, number])[]
 ) => {
   const { minimum, maximum } = breakpoints.reduce(
     (prev, cur) => ({
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import LoginModal from './LoginModal';

		export default LoginModal;