style : 최소 폰트 크기 및 최대 폰트 크기 수정 및 로그인 시 Form구조 변경

sunub · Jan 18, 2024 · cd7e095 · cd7e095
1 parent 541244e
commit cd7e095
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 13 deletions.
diff --git a/src/components/LoginForm/Form/Form.styled.ts b/src/components/LoginForm/Form/Form.styled.ts
@@ -126,17 +126,14 @@ export const Placeholder = styled.div<{ $isFocus: boolean }>`
     color 200ms ease-in-out; // Specify transitions for each property
 `;
 
-export const HeaderWrapper = styled.div`
-  grid-area: primary-header / fullbleed;
-  grid-template-rows: auto auto;
-`;
-
 export const MainWrapper = styled.div`
   grid-area: main / main-start / footer / main-end;
-  grid-template-rows: auto auto;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 `;
 
 export const FooterWrapper = styled.div`
   grid-area: footer / main-start / system-gesture / main-end;
-  grid-template-rows: auto auto;
 `;
diff --git a/src/components/LoginForm/FormHeader/FormHeader.styled.tsx b/src/components/LoginForm/FormHeader/FormHeader.styled.tsx
@@ -10,6 +10,7 @@ export const Header = styled.header`
   display: flex;
   justify-content: center;
   align-items: center;
+  padding-top: 9cqh;
 `;
 
 export const Title = styled.h1`

diff --git a/src/components/LoginForm/LoginForm.tsx b/src/components/LoginForm/LoginForm.tsx
@@ -3,7 +3,7 @@
 import React from "react";
 import * as Styled from "./LoginForm.styled";
 import FormHeader from "./FormHeader";
-import { createUserInfo } from "@/lib/action";
+import { createUserInfo, authenticate } from "@/lib/action";
 import LoginInput from "./Form/LoginInput";
 import LoginButton from "./Form/LoginButton";
 import Form from "./Form/Form";
@@ -13,10 +13,10 @@ function LoginForm() {
     <Styled.Form
       method="post"
       action={"/login"}
-      onSubmit={(e) => {
+      onSubmit={async (e) => {
         e.preventDefault();
         const formData = new FormData(e.currentTarget);
-        createUserInfo(formData);
+        await authenticate(formData);
       }}
     >
       <FormHeader />

diff --git a/src/components/ResizeFont/ResizeFont.tsx b/src/components/ResizeFont/ResizeFont.tsx
@@ -6,7 +6,7 @@ import Button from "@/components/Button";
 import * as Styled from "./ResizeFont.style";
 
 function ResizeFont() {
-  const [fonstSize, setFontSize] = React.useState(24);
+  const [fonstSize, setFontSize] = React.useState(16);
 
   React.useEffect(() => {
     const root = document.documentElement;

diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -11,8 +11,8 @@ interface SliderProps {
 
 function Slider(props: SliderProps) {
   const { fontSize, setFontSize } = props;
-  const min = 24;
-  const max = 8;
+  const min = 8;
+  const max = 24;
   const [hovering, toggleHovering] = useToggle(false);
   const ref = React.useRef<HTMLDivElement>(null);