Merge pull request #72 from MOVIEJOJO7/feature/#71

Feat : 로그인, 회원가입 페이지 디자인
MOVIEJOJO7 · Nov 15, 2023 · 32150b6 · 32150b6
2 parents 56d5270 + 46df2ea
commit 32150b6
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 36 deletions.
diff --git a/Components/Join/DropZone/DropZone.tsx b/Components/Join/DropZone/DropZone.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image';
 import { useCallback } from 'react';
 import { DropEvent, FileRejection, useDropzone } from 'react-dropzone';
 import Swal from 'sweetalert2';
+import icon_foot from '@/public/icon_foot.svg';
 
 type onDropProps = <T extends File>(
 	acceptedFiles: T[],
@@ -56,24 +57,33 @@ const DropZone = ({ setFn, baseImageUrl }: DropZoneProps) => {
 	}
 
 	return (
-		<div
-			{...getRootProps({
-				className:
-					'border-4 w-[200px] h-[200px] rounded-full overflow-hidden flex flex-col items-center justify-content',
-			})}
-		>
-			<input {...getInputProps()} />
-			{baseImageUrl ? (
-				<Image
-					src={baseImageUrl}
-					alt="유저이미지"
-					width={100}
-					height={100}
-					className="w-full h-full"
-				/>
-			) : (
-				<div className="w-full h-full flex flex-col justify-center items-center bg-camera-icon bg-50% bg-no-repeat bg-center"></div>
-			)}
+		<div className="relative w-fit h-fit">
+			<div
+				{...getRootProps({
+					className:
+						'relative border-4 w-[200px] h-[200px] rounded-full overflow-hidden flex flex-col items-center justify-content',
+				})}
+			>
+				<input {...getInputProps()} />
+				{baseImageUrl ? (
+					<Image
+						src={baseImageUrl}
+						alt="유저이미지"
+						width={100}
+						height={100}
+						className="w-full h-full"
+					/>
+				) : (
+					<div className="w-full h-full flex flex-col justify-center items-center bg-white "></div>
+				)}
+			</div>
+			<Image
+				src={icon_foot}
+				width={100}
+				alt="곰"
+				height={100}
+				className="w-8 absolute bottom-7 right-3"
+			/>
 		</div>
 	);
 };

diff --git a/Components/Join/JoinForm.tsx b/Components/Join/JoinForm.tsx
@@ -116,7 +116,7 @@ const JoinForm = () => {
 						{/* 이름 */}
 						<div className="flex h-[90] w-full flex-col mt-5">
 							<Input
-								color="brown"
+								color="pink"
 								placeholder="20자 이하의 이름을 입력해주세요."
 								variant="static"
 								label="name"
@@ -127,7 +127,7 @@ const JoinForm = () => {
 								crossOrigin={'anonymous'}
 							/>
 
-							<div className="text-red-500 text-[10px] mt-2  h-[10px]">
+							<div className="text-text text-xs mt-2  h-[10px]">
 								{errors?.name?.type === 'required' && (
 									<div>name를 입력해주세요.</div>
 								)}
@@ -140,7 +140,7 @@ const JoinForm = () => {
 						{/* id */}
 						<div className="flex  w-full  h-[90] flex-col  mt-5">
 							<Input
-								color="brown"
+								color="pink"
 								variant="static"
 								label="id"
 								placeholder=" "
@@ -151,7 +151,7 @@ const JoinForm = () => {
 								crossOrigin={'anonymous'}
 							/>
 
-							<div className="text-red-500 text-[10px] mt-2  h-[10px]">
+							<div className="text-text text-xs mt-2  h-[10px]">
 								{errors?.id?.type === 'pattern' && (
 									<div>영어와 숫자만 작성 가능합니다.</div>
 								)}
@@ -163,7 +163,7 @@ const JoinForm = () => {
 						{/* 비밀번호 */}
 						<div className="flex w-full  h-[90] flex-col  mt-5">
 							<Input
-								color="brown"
+								color="pink"
 								variant="static"
 								label="password"
 								type="password"
@@ -173,7 +173,7 @@ const JoinForm = () => {
 								})}
 								crossOrigin={'anonymous'}
 							/>
-							<div className="text-red-500 text-[10px] mt-2  h-[10px]">
+							<div className="text-text text-xs mt-2  h-[10px]">
 								{errors?.password?.type === 'minLength' && (
 									<div>입력은 최소 5자 이상이어야 합니다.</div>
 								)}
@@ -183,7 +183,10 @@ const JoinForm = () => {
 							</div>
 						</div>
 					</div>
-					<Button type="submit" className="w-full bg-main mt-10 text-subtext">
+					<Button
+						type="submit"
+						className="w-full mt-10 text-subtext bg-text text-white"
+					>
 						회원가입
 					</Button>
 					<Button

diff --git a/Components/Login/LoginForm.tsx b/Components/Login/LoginForm.tsx
@@ -4,14 +4,15 @@ import React from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { fetchLogin } from '../../app/login/login.utils';
 import { setCookie } from '@/Components/Login/Cookie';
-import { Button } from '@material-tailwind/react';
+import { Button, Typography } from '@material-tailwind/react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import Swal from 'sweetalert2';
 import { Input } from '@material-tailwind/react';
 import Image from 'next/image';
 import useAsyncLoading from '@/hooks/Open/useAsyncLoading';
 import { IFormInput } from './Login.types';
+import icon_cat from '@/public/icon_cat.svg';
 
 const LoginForm = () => {
 	const loadingControl = useAsyncLoading();
@@ -49,12 +50,18 @@ const LoginForm = () => {
 	};
 
 	return (
-		<div className="flex flex-col h-full items-center justify-center">
+		<div className="flex flex-col h-full relative items-center justify-center">
 			<form
 				onSubmit={handleSubmit(onSubmit)}
 				className="flex flex-col items-center justify-center w-2/3"
 			>
-				<Image src="/logo.png" alt="Picture of me" width={250} height={250} />
+				<Image
+					src={icon_cat}
+					alt="Picture of me"
+					width={100}
+					height={100}
+					className="w-48 mb-12"
+				/>
 				{/* 영어와 숫자만 */}
 				<Input
 					placeholder="id"
@@ -81,13 +88,16 @@ const LoginForm = () => {
 					{...register('password')}
 					crossOrigin={'anonymous'}
 				/>
-				<Button type="submit" className=" bg-pink-200 w-full mt-10">
+				<Button type="submit" className="bg-text w-full mt-10">
 					로그인
 				</Button>
 				<Link href="/join" passHref>
-					<div className="text-gray-700  text-[10px] mt-4 mb-14">회원가입</div>
+					<div className="text-md text-black mt-3">새로운 집사 되기!</div>
 				</Link>
 			</form>
+			<Typography variant="h3" className="absolute bottom-8">
+				CatTalk
+			</Typography>
 		</div>
 	);
 };

diff --git a/app/join/page.tsx b/app/join/page.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 const Join = () => {
 	return (
-		<div className="w-full h-full bg-white ">
+		<div className="w-full h-full bg-fill ">
 			<JoinForm></JoinForm>
 		</div>
 	);

diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -3,7 +3,7 @@ import LoginForm from '../../Components/Login/LoginForm';
 
 const Login = () => {
 	return (
-		<div className="w-full h-full bg-main ">
+		<div className="w-full h-full bg-bgfill ">
 			<LoginForm></LoginForm>
 		</div>
 	);

diff --git a/public/icon_dot_chat.svg b/public/icon_dot_chat.svg
diff --git a/public/icon_dot_multi_chat.svg b/public/icon_dot_multi_chat.svg
diff --git a/public/icon_foot.svg b/public/icon_foot.svg
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -24,11 +24,11 @@ const config: Config = withMT({
 		},
 		extend: {
 			colors: {
-				primary: '#FFB8DA',
-				text: '#764242',
-				white: '#FFFFFF',
+				primary: '#FB72B4',
 				secondary: '#FFD4E9',
-				subtext: '#7E7E7E',
+				text: '#FF59A9',
+				fill: '#EFEFEF',
+				bgfill: '#7E7E7E',
 			},
 			backgroundImage: {
 				'trash-can': "url('../public/icon_trash.svg')",