Merge branch 'develop' of https://github.com/Donggrina/Frontend into …

…feature/start-family
Donggrina · Jun 3, 2024 · ee7902e · ee7902e
2 parents fb89bec + af95c4e
commit ee7902e
Show file tree

Hide file tree

Showing 12 changed files with 49 additions and 15 deletions.
diff --git a/components/common/Input/index.tsx b/components/common/Input/index.tsx
@@ -3,17 +3,17 @@ import { useFormContext } from 'react-hook-form';
 import styles from '@/components/common/Input/Input.module.scss';
 
 interface FormInput extends InputHTMLAttributes<HTMLInputElement> {
-  label: string;
   name: string;
 }
-const FormInput = ({ name, label, type = 'text' }: FormInput) => {
+
+const FormInput = ({ name, type = 'text' }: FormInput) => {
   const {
     register,
     formState: { errors },
   } = useFormContext();
+
   return (
     <div className={styles.container}>
-      <label htmlFor={name}>{label}</label>
       <input
         className={styles.input}
         id={name}

diff --git a/components/common/Label/index.tsx b/components/common/Label/index.tsx
@@ -0,0 +1,11 @@
+import React, { InputHTMLAttributes } from 'react';
+
+interface FormLabel extends InputHTMLAttributes<HTMLInputElement> {
+  htmlFor: string;
+}
+
+const FormLabel = ({ htmlFor, children }: FormLabel) => {
+  return <label htmlFor={htmlFor}>{children}</label>;
+};
+
+export default FormLabel;
diff --git a/components/common/Button/Button.module.scss → ...n/common-button/common-button.module.scss b/components/common/Button/Button.module.scss → ...n/common-button/common-button.module.scss
@@ -3,13 +3,14 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%;
   height: 100%;
   border-radius: 32px;
   font-weight: 700;
   font-size: 16px;
   background-color: $background;
-  border: $border;
   color: $color;
+  border: $border;
 }
 
 @mixin primaryButton {

diff --git a/components/login/google-button/google-button.module.scss b/components/login/google-button/google-button.module.scss
@@ -1,4 +1,4 @@
-@import '/components/common/button/button.module.scss';
+@import '/components/common/common-button/common-button.module.scss';
 
 .googleButton {
   @include roundButton(var(--white), 1px solid var(--google-border), var(--google-color));

diff --git a/components/login/google-button/google-button.tsx b/components/login/google-button/google-button.tsx
@@ -1,9 +1,10 @@
 import GoogleSVG from '@/public/images/login/google_logo.svg';
 import styles from './google-button.module.scss';
 import Link from 'next/link';
+import { config } from '@/config';
 
 export default function GoogleButton() {
-  const googleUrl = `백엔드에서 받기`;
+  const googleUrl = config.googleAuth;
 
   return (
     <Link className={styles.googleButton} href={googleUrl}>

diff --git a/components/login/kakao-button/kakao-button.module.scss b/components/login/kakao-button/kakao-button.module.scss
@@ -1,4 +1,4 @@
-@import '/components/common/button/button.module.scss';
+@import '/components/common/common-button/common-button.module.scss';
 
 .kakaoButton {
   @include roundButton(var(--kakao-background), var(--kakao-color));

diff --git a/components/login/kakao-button/kakao-button.tsx b/components/login/kakao-button/kakao-button.tsx
@@ -1,9 +1,10 @@
 import Link from 'next/link';
 import styles from './kakao-button.module.scss';
 import KakaoSVG from '@/public/images/login/kakao_logo.svg';
+import { config } from '@/config';
 
 export default function KakaoButton() {
-  const kakaoURL = `백엔드에서 받기`;
+  const kakaoURL = config.kakaoAuth;
 
   return (
     <Link className={styles.kakaoButton} href={kakaoURL}>

diff --git a/components/start-family/link-list/link-list.module.scss b/components/start-family/link-list/link-list.module.scss
@@ -1,4 +1,4 @@
-@import '/components/common/Button/Button.module.scss';
+@import '/components/common/common-button/common-button.module.scss';
 
 .linkList {
   display: flex;

diff --git a/config/index.ts b/config/index.ts
@@ -0,0 +1,4 @@
+export const config = {
+  kakaoAuth: `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorization/kakao`,
+  googleAuth: `백엔드에서 받기`,
+};
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,7 +1,7 @@
 import type { AppProps } from 'next/app';
 import '@/styles/globals.css';
 import { Header } from '@/components/common/Header';
-import { isHeader } from '@/utils/isHeader';
+import { isHeader } from '@/utils/IsHeader';
 import { useRouter } from 'next/router';
 
 export default function App({ Component, pageProps }: AppProps) {

diff --git a/pages/input-test/index.module.scss b/pages/input-test/index.module.scss
@@ -0,0 +1,3 @@
+.form {
+  padding-top: 72px;
+}
diff --git a/pages/input-test/index.tsx b/pages/input-test/index.tsx
@@ -1,19 +1,32 @@
 import React from 'react';
-import { useForm, FormProvider } from 'react-hook-form';
+import { useForm, FormProvider, SubmitHandler } from 'react-hook-form';
 import FormInput from '@/components/common/Input';
+import FormLabel from '@/components/common/Label';
+import styles from './index.module.scss';
+
+interface FormData {
+  name: string;
+  nickname: string;
+}
 
 function App() {
-  const methods = useForm();
+  const methods = useForm<FormData>();
 
-  const onSubmit = (data) => {
+  const onSubmit: SubmitHandler<FormData> = (data) => {
     console.log(data);
   };
 
   return (
     <FormProvider {...methods}>
       <form onSubmit={methods.handleSubmit(onSubmit)}>
-        <FormInput name="name" label="가족의 이름을 알려주세요!" />
-        <FormInput name="nickname" label="가족 내 본인의 이름을 입력해주세요." />
+        <div className={styles.form}>
+          <FormLabel htmlFor="name">가족의 이름을 알려주세요!</FormLabel>
+          <FormInput name="name" />
+        </div>
+        <div>
+          <FormLabel htmlFor="nickname">가족 내 본인의 이름을 입력해주세요.</FormLabel>
+          <FormInput name="nickname" />
+        </div>
       </form>
     </FormProvider>
   );