Merge pull request #6 from team-GDGline/feat/camera

merge: Token 전까지

package.json

@@ -14,12 +14,14 @@
     "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
+    "axios": "^1.7.7",
     "framer-motion": "11.0.3",
     "lucide-react": "^0.456.0",
     "pnpm": "^9.13.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "^6.21.1",
+    "react-spinners": "^0.14.1",
     "vite-plugin-svgr": "^4.3.0"
   },
   "devDependencies": {

src/.env

@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://34.64.38.113:8080

src/api/constant.ts

@@ -0,0 +1,3 @@
+export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+export const ACCESS_TOKEN = "accessToken";
+export const REFRESH_TOKEN = "refreshToken";

src/components/CheckDuplicateEmail.tsx

@@ -0,0 +1,83 @@
+import {ReactNode, useState } from "react";
+import { Input, Text, Button, useToast } from "@chakra-ui/react";
+import styled from "@emotion/styled";
+import axios from "axios";
+import { API_BASE_URL } from "../api/constant";
+interface CheckDEProps {
+    value: string;
+    text: string;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder: string;
+}
+
+const CheckDuplicateEmail: React.FC<CheckDEProps> = ({ value, text, handleChange, placeholder }) => {
+    const toast = useToast();
+
+    const checkEmail = async () => {
+        try {
+            const response = await axios.get(`${API_BASE_URL}/api/v1/user/email/${value}`);
+            if (response.data) {
+                toast({
+                    title: "가입 가능한 이메일입니다.",
+                    status: "success",
+                    duration: 3000,
+                    isClosable: true,
+                });
+            } else {
+                toast({
+                    title: "이미 가입된 이메일입니다.",
+                    status: "error",
+                    duration: 3000,
+                    isClosable: true,
+                });
+            }
+        } catch (error) {
+            toast({
+                title: "오류가 발생했습니다.",
+                status: "error",
+                duration: 3000,
+                isClosable: true,
+            });
+        }
+    };
+
+    return (
+        <>
+            <Text mb='8px' color="white" fontWeight="100" alignSelf="start" ml="48px">{text}</Text>
+            <Wrapper>
+                <Input
+                    variant="filled"
+                    value={value}
+                    onChange={handleChange}
+                    placeholder={placeholder}
+                    _placeholder={{ opacity: 1, color: 'gray.500' }}
+                    size='sm'
+                    height="60px"
+                    borderRadius="10px"
+                    backgroundColor="white"
+                    mb="24px"
+                />
+                <Button
+                    w="60px"
+                    h="56px"
+                    backgroundColor="#11597F"
+                    color="white"
+                    borderRadius="10px"
+                    fontWeight="200"
+                    onClick={checkEmail}
+                >
+                    중복 확인
+                </Button>
+            </Wrapper>
+        </>
+    );
+};
+
+export default CheckDuplicateEmail;
+
+const Wrapper = styled.div`
+    display: flex;
+    width: calc(100% - 96px);
+    gap: 8px;
+    align-items: baseline;
+`;

src/components/LoadingSpinner.tsx

@@ -0,0 +1,42 @@
+import fishIcon from "../assets/fishIcon.svg";
+import {SyncLoader} from "react-spinners";
+import {useEffect, useState} from "react";
+import styled from "@emotion/styled";
+import { Text } from "@chakra-ui/react";
+export default function LoadingSpinner({timeout = 200}) {
+  const [showSpinner, setShowSpinner] = useState(false);
+
+  /**
+   * [timeout]ms 후에 spinner를 보여준다.
+   */
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowSpinner(true);
+    }, timeout);
+
+    return () => clearTimeout(timer); // 메모리 누수 방지
+  }, []);
+
+
+  return (
+  <Wrapper>
+      {showSpinner && (
+        <>
+          <img className="w-[60px] h-[60px]" src={fishIcon}/>
+          <div className="h-[12px]"/>
+          <SyncLoader color="#59CAFC" size={10}/>
+          <Text mt="10px" fontSize='1xl' color="white">물고기 박사님이 확인 중이에요~</Text>
+        </>
+      )}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+`;

src/components/PasswordInput.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { 
+    Input, Text
+ } from "@chakra-ui/react";
+
+
+interface PasswordInputProps {
+    value: string;
+    text: string;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder: string;
+}
+
+const PasswordInput: React.FC<PasswordInputProps> = ({ value, text, handleChange, placeholder }) => {
+  return (
+    <>
+      <Text mb='8px' color="white" fontWeight="100" alignSelf="start" ml="48px">{text}</Text>
+      <Input
+      variant="filled"
+      type="password"
+        value={value}
+        onChange={handleChange}
+        placeholder={placeholder}
+        size='sm'
+        width="calc(100% - 96px)"
+        height="60px"
+        borderRadius="10px"
+        backgroundColor="white"
+        mb="24px"
+      />
+    </>
+  );
+};
+
+export default PasswordInput;

src/components/WhiteInput.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { 
+    Input, Text
+ } from "@chakra-ui/react";
+
+
+interface WhiteInputProps {
+    value: string;
+    text: string;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder: string;
+}
+
+const WhiteInput: React.FC<WhiteInputProps> = ({ value, text, handleChange, placeholder }) => {
+  return (
+    <>
+      <Text mb='8px' color="white" fontWeight="100" alignSelf="start"  ml="48px">{text}</Text>
+      <Input
+      variant="filled"
+        value={value}
+        onChange={handleChange}
+        placeholder={placeholder}
+        _placeholder={{ opacity: 1, color: 'gray.500' }}
+        size='sm'
+        width="calc(100% - 96px)"
+        height="60px"
+        borderRadius="10px"
+        backgroundColor="white"
+        mb="24px"
+      />
+    </>
+  );
+};
+
+export default WhiteInput;