Merge pull request #65 from MOVIEJOJO7/feature/#63

Fix : JoinPage DropZone 위치, 모양 변경 + 추가 (Login Page 일부 수정)
MOVIEJOJO7 · Nov 15, 2023 · b24ca71 · b24ca71
2 parents 0678ecb + f40a00c
commit b24ca71
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 30 deletions.
diff --git a/Components/Join/DropZone/DropZone.tsx b/Components/Join/DropZone/DropZone.tsx
@@ -1,5 +1,6 @@
 'use clinet';
 
+import Image from 'next/image';
 import { useCallback } from 'react';
 import { DropEvent, FileRejection, useDropzone } from 'react-dropzone';
 import Swal from 'sweetalert2';
@@ -12,9 +13,10 @@ type onDropProps = <T extends File>(
 
 type DropZoneProps = {
 	setFn: React.Dispatch<React.SetStateAction<string | undefined>>;
+	baseImageUrl?: string;
 };
 
-const DropZone = ({ setFn }: DropZoneProps) => {
+const DropZone = ({ setFn, baseImageUrl }: DropZoneProps) => {
 	const onDrop: onDropProps = useCallback(
 		(acceptedFiles, fileRejections) => {
 			if (acceptedFiles.length > 0) {
@@ -43,7 +45,7 @@ const DropZone = ({ setFn }: DropZoneProps) => {
 	);
 
 	const { getRootProps, getInputProps, isDragAccept } = useDropzone({
-		accept: { 'image/*': ['.png', '.jpg', '.jpeg'] },
+		accept: { 'image/*': ['.png', '.jpg', '.jpeg', '.svg'] },
 		maxFiles: 1,
 		maxSize: 1024 * 1024,
 		onDrop,
@@ -56,11 +58,22 @@ const DropZone = ({ setFn }: DropZoneProps) => {
 	return (
 		<div
 			{...getRootProps({
-				className: 'bg-red-700',
+				className:
+					'border-4 w-[200px] h-[200px] rounded-full overflow-hidden flex flex-col items-center justify-content',
 			})}
 		>
 			<input {...getInputProps()} />
-			<p>여기에 파일 드래그 드랍 해주세요</p>
+			{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>
 	);
 };

diff --git a/Components/Join/JoinForm.tsx b/Components/Join/JoinForm.tsx
@@ -2,12 +2,11 @@
 
 import React, { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
-import { Button, Typography } from '@material-tailwind/react';
+import { Button } from '@material-tailwind/react';
 import { fetchJoin } from '@/app/join/join.utils';
 import { useRouter } from 'next/navigation';
 import Swal from 'sweetalert2';
 import { Input } from '@material-tailwind/react';
-import Image from 'next/image';
 import DropZone from './DropZone/DropZone';
 import axios from 'axios';
 import { useMutation } from '@tanstack/react-query';
@@ -81,8 +80,6 @@ const JoinForm = () => {
 		password,
 		name,
 	}) => {
-		loadingControl(true);
-
 		if (!baseImageUrl) {
 			Swal.fire({
 				text: '이미지를 넣어주세요.',
@@ -92,6 +89,7 @@ const JoinForm = () => {
 			});
 			return;
 		}
+		loadingControl(true);
 
 		mutation.mutate({
 			file: baseImageUrl!,
@@ -108,17 +106,7 @@ const JoinForm = () => {
 			<div className="flex flex-col w-full h-full items-center justify-center ">
 				{/* 이미지 */}
 				<div className="mb-10">
-					{baseImageUrl ? (
-						<Image
-							src={baseImageUrl}
-							alt="Picture of the author"
-							width={100}
-							height={100}
-							className="h-[200px] w-[200px] rounded-full bg-blue-500 "
-						/>
-					) : (
-						<div className="h-[200px] w-[200px] rounded-full bg-blue-500" />
-					)}
+					<DropZone setFn={setBaseImageUrl} baseImageUrl={baseImageUrl} />
 				</div>
 				<form
 					onSubmit={handleSubmit(onSubmit)}
@@ -194,18 +182,16 @@ const JoinForm = () => {
 								)}
 							</div>
 						</div>
-						{/* 이미지 url */}
-						<div className="flex h-[90] w-full  flex-col  mt-5">
-							<Typography color="brown" className=" text-sm text-gray-700">
-								이미지를 넣어주세요.
-							</Typography>
-						</div>
 					</div>
-					<DropZone setFn={setBaseImageUrl} />
-					<Button type="submit" className="w-full bg-main mt-10">
+					<Button type="submit" className="w-full bg-main mt-10 text-subtext">
 						회원가입
 					</Button>
-					<div>{baseImageUrl}</div>
+					<Button
+						className="bg-pink-200 w-full mt-3"
+						onClick={() => router.push('/login')}
+					>
+						로그인
+					</Button>
 				</form>
 			</div>
 		</div>

diff --git a/Components/Login/LoginForm.tsx b/Components/Login/LoginForm.tsx
@@ -39,7 +39,7 @@ const LoginForm = () => {
 			router.replace('/users');
 		} else {
 			Swal.fire({
-				text: '등록된 유저가 없습니다.',
+				text: '로그인 정보를 확인해주세요 ‼',
 				showCancelButton: false,
 				confirmButtonText: '확인',
 				confirmButtonColor: '#3085d6',
@@ -72,6 +72,7 @@ const LoginForm = () => {
 				{/* 5자 이상 */}
 				<Input
 					placeholder="password"
+					type="password"
 					className="!border !border-gray-300 bg-white text-gray-900 shadow-lg shadow-gray-900/5 ring-4 ring-transparent placeholder:text-gray-500"
 					labelProps={{
 						className: 'hidden',
@@ -83,7 +84,7 @@ const LoginForm = () => {
 				<Button type="submit" className=" bg-pink-200 w-full mt-10">
 					로그인
 				</Button>
-				<Link href="/join">
+				<Link href="/join" passHref>
 					<div className="text-gray-700  text-[10px] mt-4 mb-14">회원가입</div>
 				</Link>
 			</form>

diff --git a/public/icon_camera.svg b/public/icon_camera.svg
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -16,6 +16,9 @@ const config: Config = withMT({
 			md: '768px',
 			lg: '1024px',
 		},
+		backgroundSize: {
+			'50%': '50%',
+		},
 		extend: {
 			colors: {
 				primary: '#FFB8DA',
@@ -26,6 +29,7 @@ const config: Config = withMT({
 			},
 			backgroundImage: {
 				'trash-can': "url('../public/icon_trash.svg')",
+				'camera-icon': "url('../public/icon_camera.svg')",
 				'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
 				'gradient-conic':
 					'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',