Feat/issue-21 (#28)

* Hotfix: zustand 최신화 닉네임 변경  수정

* Feat: File 올리기 API 확인 필요

* Feat: Toast 디자인 완성

* Feat: 누르면 뜨게 설정 모션필요

* Feat: 토스트 위치 설정

BlueMosaic/src/components/FrameSVG.tsx

@@ -12,9 +12,10 @@ export const Frame = ({ imageUrl, text="text" }) => {
 
 const FrameWrapper = styled.div`
 display: flex;
-width: 28.1875rem;
-height: 31.321rem;
+width: 45vh;
+height: 50vh;
 padding: 1.25rem 1.875rem;
+margin-bottom: 10rem;
 flex-direction: column;
 justify-content: center;
 align-items: center;

BlueMosaic/src/components/Toast.tsx

@@ -0,0 +1,101 @@
+import styled from "@emotion/styled"
+import GoogleOneSVG from "../assets/GoogleOne.svg"
+import { Button } from "./common/Button"
+
+export const Toast = ({ found, points, handleClickUpload, handleGoto }) => {
+
+  return(
+    <ToastWrappaer>
+      <Left>
+        <img src={GoogleOneSVG} alt="GoogleOneSVG"/>
+      </Left>
+      <MainContent>
+        <MainText>
+          <em>I found {found}!</em>
+          <p>My score is {points}</p>
+        </MainText>
+
+        <Button.Wrapper>
+          <Button.setButton text="Upload" buttonType="secondary" onClick={handleClickUpload}/>
+          <Button.setButton text="Collection" buttonType="primary" onClick={handleGoto}/>
+        </Button.Wrapper>
+      </MainContent>
+
+    </ToastWrappaer>
+  )
+}
+
+const ToastWrappaer = styled.section`
+position: absolute;
+bottom: 2rem;
+right: 2rem;
+z-index: 1000;
+
+display: flex;
+width: 22.4375rem;
+align-items: center;
+flex-shrink: 0;
+border-radius: 0.5rem;
+border: 1px solid #E8EAED;
+box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.20);
+
+transition: right 0.3s ease; 
+`
+const Left = styled.section`
+display: flex;
+padding: 4.3125rem 1.75rem;
+align-items: flex-start;
+gap: 0.5rem;
+flex-shrink: 0;
+border-right: 1px solid #E8EAED;
+background: var(----white-color, #FFF);
+
+img {
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+}
+`
+
+const MainContent = styled.section`
+  display: flex;
+  width: 16.875rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2.125rem;
+  flex-shrink: 0;
+  align-self: stretch;
+  background: var(----white-color, #FFF);
+  box-sizing: border-box;
+  padding: 1rem;
+`
+const MainText = styled.div`
+display: flex;
+flex-direction: column;
+align-items: flex-start;
+gap: 0.25rem;
+align-self: stretch;
+
+em {
+  color: #3C4043;
+  font-family: Roboto;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.6875rem; /* 192.857% */
+  letter-spacing: 0.00438rem;
+  margin: 0;
+  padding: 0;
+}
+
+p {
+  color: #5F6368;
+  font-family: Roboto;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.1875rem; /* 135.714% */
+  letter-spacing: 0.00438rem;
+  margin: 0;
+  padding: 0;
+}
+`

BlueMosaic/src/components/common/Button.tsx

@@ -0,0 +1,48 @@
+import styled from "@emotion/styled"
+
+export const Button = {
+  Wrapper: ({ children }) => {
+    return(<ButtonWrapper>{children}</ButtonWrapper>)
+  },
+
+  setButton: ({ text, buttonType, onClick } : { text: string, buttonType: string, onClick: () => void })=> {
+    switch (buttonType) {
+      case "primary":
+        return <ButtonType buttonType="primary" onClick={onClick}>{text}</ButtonType>;
+      case "secondary":
+        return <ButtonType buttonType="secondary" onClick={onClick}>{text}</ButtonType>;
+      default:
+        return null; // or handle other cases as needed
+  }
+  }
+}
+
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.25rem;
+  align-self: stretch;
+`
+
+const ButtonType = styled.button<{ buttonType: string }>`
+  display: flex;
+  width: 6rem;
+  height: 2.25rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(----googleblue-color, #4285F4);
+
+  /* Use conditional styling based on the type prop */
+  background-color: ${(props) => (props.buttonType === 'primary' ? '#1A73E8' : '#ffffff')};
+  color: ${(props) => (props.buttonType === 'primary' ? '#ffffff' : '#5F6368')};
+
+  font-family: Roboto;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;

BlueMosaic/src/hooks/useMediaQuery.ts

@@ -1,44 +1,47 @@
 import axios from 'axios';
 
-const data = {
-  "file": "string",
-  userId: 0,
-}
-
 export const MediaApis = {
   instance: axios.create({
     baseURL: 'http://localhost:8080/media',
     withCredentials: true,
   }),
 
-    // 파일 조회
-    get: async () => {
-      try {
-        const res = await MediaApis.instance.get(`/${data.userId}`);
-        console.log(res);
-        return res.data;
-      } catch (error) {
-        console.error('Error fetching rooms:', error);
-        throw error;
-      }
-    },
+  // 파일 조회
+  get: async (userId) => {
+    try {
+      const res = await MediaApis.instance.get(`/${userId}`);
+      console.log(res);
+      return res.data;
+    } catch (error) {
+      console.error('Error fetching rooms:', error);
+      throw error;
+    }
+  },
 
   // 파일 수정
-  change: async () => {
+  change: async (userId, file) => {
     try {
-      const res = await MediaApis.instance.put(`/${data.userId}`, data.file );
+      const res = await MediaApis.instance.put(`/${userId}`, file, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
       console.log(res);
       return res.data;
     } catch (error) {
       console.error('Error fetching rooms:', error);
       throw error;
     }
   },
-  
+
   // 파일 삭제
-  delete: async () => {
+  delete: async (userId) => {
     try {
-      const res = await MediaApis.instance.delete(`/${data.userId}`);
+      const res = await MediaApis.instance.delete(`/${userId}`, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
       console.log(res);
       return res.data;
     } catch (error) {
@@ -48,14 +51,19 @@ export const MediaApis = {
   },
 
   // 파일 업로드
-  upload: async () => {
+  upload: async (formData: FormData) => {
+    console.log(formData);
     try {
-      const res = await MediaApis.instance.post(`/upload`);
+      const res = await MediaApis.instance.post(`/upload`, { file: formData }, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
       console.log(res);
       return res.data;
     } catch (error) {
       console.error('Error fetching rooms:', error);
       throw error;
     }
   },
-};
+};

BlueMosaic/src/hooks/useUserQuery.ts

@@ -18,9 +18,9 @@ export const UserApis = {
       try {
         console.log(data);
         const res = await UserApis.instance.put("", {
-          "id": 1,
-          "nickname": "string22",
-          "name": "string22"
+          "id": UserInfoStore.getState().userId,
+          "nickname": UserInfoStore.getState().username,
+          "name": "string"
         } );
         console.log(res);
         return res.data;

BlueMosaic/src/pages/Signup.tsx

@@ -6,20 +6,15 @@ import GoogleSVG from "../assets/Google.svg"
 import { InputForm } from "../components/common/InputForm";
 import { useStore } from "zustand";
 import { UserInfoStore } from "../stores/UserInfoStore"
-import { useState } from "react";
 import { UserApis } from "../hooks/useUserQuery";
 import { useEffect } from "react"
 
 export const Signup = () => {
   const userInfo = useStore(UserInfoStore);
-  const [passwordConfirm, setPasswordConfirm] = useState<string>("");
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value, name } = e.target;
     switch(name){
-      case "email": userInfo.setEmail(value); break;
-      case "password": userInfo.setPassword(value); break;
-      case "passwordConfirm": setPasswordConfirm(value); break;
       case "username": userInfo.setUsername(value); 
     }
   }
@@ -41,7 +36,7 @@ export const Signup = () => {
   const handleGoogleLogin = (event) => {
     event.preventDefault();
     UserApis.changeNickName();
-    // window.location.href = '/home';
+    window.location.href = '/home';
   };
 
   return(
@@ -52,13 +47,6 @@ export const Signup = () => {
               <DivContainer>
               <img src={GoogleSVG} alt="google"/>
 
-              {/* email */}
-              {/* <InputForm title="Email" type="text" placeholder="Enter your Email" name="email" value={userInfo?.email} onChange={onChange} /> 
-
-              <InputForm title="Password" type="password" placeholder="Enter your Password" name="password" value={userInfo?.password} onChange={onChange} /> 
-
-              <InputForm title="Password Confirm" type="password" placeholder="Enter your Password Again" name="passwordConfirm" value={passwordConfirm} onChange={onChange} />  */}
-
               <InputForm title="Username" type="text" placeholder="Enter your username" name="username" value={userInfo?.username} onChange={onChange} /> 
 
                 <button onClick={handleGoogleLogin}>