From 3bffc46ce9d89a2e7f102707111b2cfa48909f47 Mon Sep 17 00:00:00 2001 From: DingX2 Date: Wed, 21 Feb 2024 00:05:08 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Hotfix:=20zustand=20=EC=B5=9C=EC=8B=A0?= =?UTF-8?q?=ED=99=94=20=EB=8B=89=EB=84=A4=EC=9E=84=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- BlueMosaic/src/hooks/useUserQuery.ts | 8 ++++---- BlueMosaic/src/pages/Signup.tsx | 16 ++-------------- 2 files changed, 6 insertions(+), 18 deletions(-) diff --git a/BlueMosaic/src/hooks/useUserQuery.ts b/BlueMosaic/src/hooks/useUserQuery.ts index 6a8b48b..6be2b10 100644 --- a/BlueMosaic/src/hooks/useUserQuery.ts +++ b/BlueMosaic/src/hooks/useUserQuery.ts @@ -14,13 +14,13 @@ export const UserApis = { }), // 유저 정보 수정 - changeNickName: async () => { + changeNickName: async (nickname: string) => { 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": nickname } ); console.log(res); return res.data; diff --git a/BlueMosaic/src/pages/Signup.tsx b/BlueMosaic/src/pages/Signup.tsx index 22b72d5..e40dbd0 100644 --- a/BlueMosaic/src/pages/Signup.tsx +++ b/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(""); const onChange = (e: React.ChangeEvent) => { 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); } } @@ -40,8 +35,8 @@ export const Signup = () => { const handleGoogleLogin = (event) => { event.preventDefault(); - UserApis.changeNickName(); - // window.location.href = '/home'; + UserApis.changeNickName(userInfo.username); + window.location.href = '/home'; }; return( @@ -52,13 +47,6 @@ export const Signup = () => { google - {/* email */} - {/* - - - - */} - + + + + + + ) +} + +const ToastWrappaer = styled.section` +display: flex; +width: 22.4375rem; +justify-content: center; +align-items: center; +` +const Left = styled.section` +display: flex; +width: 5.5625rem; +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); +` + +const ButtonWrapper = styled.div` + display: flex; + gap: 1rem; +` + +const MainContent = styled.section` + display: flex; + padding: 1rem; + flex-direction: column; + align-items: flex-end; + gap: 2.125rem; + 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; +} + +button: active { + display: flex; + width: 6rem; + height: 2.25rem; + padding: 0.5625rem 1.25rem; + justify-content: center; + align-items: center; + gap: 0.5rem; + border-radius: 0.25rem; + background: #1A73E8; +} + +button { + display: flex; + width: 6rem; + height: 2.25rem; + padding: 0.5625rem 1.25rem; + justify-content: center; + align-items: center; + gap: 0.5rem; + border-radius: 0.25rem; +} +` diff --git a/BlueMosaic/src/hooks/useMediaQuery.ts b/BlueMosaic/src/hooks/useMediaQuery.ts index 69373ac..178f601 100644 --- a/BlueMosaic/src/hooks/useMediaQuery.ts +++ b/BlueMosaic/src/hooks/useMediaQuery.ts @@ -1,32 +1,31 @@ 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) { @@ -34,11 +33,15 @@ export const MediaApis = { 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,9 +51,14 @@ 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) { @@ -58,4 +66,4 @@ export const MediaApis = { throw error; } }, -}; \ No newline at end of file +}; diff --git a/BlueMosaic/src/hooks/useUserQuery.ts b/BlueMosaic/src/hooks/useUserQuery.ts index 6be2b10..4ae555a 100644 --- a/BlueMosaic/src/hooks/useUserQuery.ts +++ b/BlueMosaic/src/hooks/useUserQuery.ts @@ -14,13 +14,13 @@ export const UserApis = { }), // 유저 정보 수정 - changeNickName: async (nickname: string) => { + changeNickName: async () => { try { console.log(data); const res = await UserApis.instance.put("", { "id": UserInfoStore.getState().userId, "nickname": UserInfoStore.getState().username, - "name": nickname + "name": "string" } ); console.log(res); return res.data; diff --git a/BlueMosaic/src/pages/Signup.tsx b/BlueMosaic/src/pages/Signup.tsx index e40dbd0..901acfd 100644 --- a/BlueMosaic/src/pages/Signup.tsx +++ b/BlueMosaic/src/pages/Signup.tsx @@ -35,7 +35,7 @@ export const Signup = () => { const handleGoogleLogin = (event) => { event.preventDefault(); - UserApis.changeNickName(userInfo.username); + UserApis.changeNickName(); window.location.href = '/home'; }; diff --git a/BlueMosaic/src/pages/Trash.tsx b/BlueMosaic/src/pages/Trash.tsx index 1c7255d..ba3aa8c 100644 --- a/BlueMosaic/src/pages/Trash.tsx +++ b/BlueMosaic/src/pages/Trash.tsx @@ -1,11 +1,13 @@ +import { useState, ChangeEvent, FormEvent } from 'react'; import styled from "@emotion/styled" import { Wrapper, Container} from "../styles/Layout" import HomeSVG from "../assets/HomeSVG.svg" import WaterWave from 'react-water-wave'; import PolaroidSVG from "../assets/Polaroid.svg" -import { useState } from "react" import imageUrl from "../assets/UploadBackground.jpg" import { Frame } from "../components/FrameSVG"; +import { Toast } from "../components/Toast"; +import { MediaApis } from "../hooks/useMediaQuery"; export const Trash = () => { const [showFrame, setShowFrame] = useState(false); @@ -19,7 +21,8 @@ export const Trash = () => { {({ pause, play }) => ( - + + PolaroidSVG { showFrame && } @@ -31,6 +34,58 @@ export const Trash = () => { ) } + +function FileUpload() { + const [selectedFile, setSelectedFile] = useState(null); + + // 파일 선택 핸들러 + const handleFileChange = (event: ChangeEvent) => { + if (event.target.files && event.target.files.length > 0) { + setSelectedFile(event.target.files[0]); + } + }; + + // 파일 업로드 핸들러 + const handleUpload = async (event: FormEvent) => { + event.preventDefault(); + if (!selectedFile) { + alert('파일을 선택해주세요.'); + return; + } + + const formData = new FormData(); + formData.append('file', selectedFile); + + console.log("File Size:", selectedFile.size); + console.log("File Name:", selectedFile.name); + + console.log("formData:", formData); + + + try { + const response = await MediaApis.upload(formData); + console.log("Upload Response:", response); + } catch (error) { + console.error('Error uploading file:', error); + } + }; + + return ( +
+ + +
+ ); +} + +export default FileUpload; + + const PolaroidWrapper = styled.div` width: 100%; height: 100%; From fecad166aef41e2e6834ccbec4f6b449a146af4f Mon Sep 17 00:00:00 2001 From: DingX2 Date: Wed, 21 Feb 2024 01:38:16 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Feat:=20Toast=20=EB=94=94=EC=9E=90=EC=9D=B8?= =?UTF-8?q?=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- BlueMosaic/src/components/Toast.tsx | 73 ++++++++++----------- BlueMosaic/src/components/common/Button.tsx | 48 ++++++++++++++ 2 files changed, 82 insertions(+), 39 deletions(-) create mode 100644 BlueMosaic/src/components/common/Button.tsx diff --git a/BlueMosaic/src/components/Toast.tsx b/BlueMosaic/src/components/Toast.tsx index 26b3705..989641a 100644 --- a/BlueMosaic/src/components/Toast.tsx +++ b/BlueMosaic/src/components/Toast.tsx @@ -1,5 +1,6 @@ import styled from "@emotion/styled" import GoogleOneSVG from "../assets/GoogleOne.svg" +import { Button } from "./common/Button" export const Toast = ({found, points}) => { return( @@ -8,13 +9,15 @@ export const Toast = ({found, points}) => { GoogleOneSVG - I found {found}! -

My score is {points}

- - - - - + + I found {found}! +

My score is {points}

+ + + + + + @@ -24,32 +27,47 @@ export const Toast = ({found, points}) => { const ToastWrappaer = styled.section` display: flex; width: 22.4375rem; -justify-content: center; 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); ` const Left = styled.section` display: flex; -width: 5.5625rem; 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); -` -const ButtonWrapper = styled.div` - display: flex; - gap: 1rem; +img { + width: 2rem; + height: 2rem; + flex-shrink: 0; +} ` const MainContent = styled.section` display: flex; - padding: 1rem; + width: 16.875rem; flex-direction: column; - align-items: flex-end; + 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; @@ -72,27 +90,4 @@ p { margin: 0; padding: 0; } - -button: active { - display: flex; - width: 6rem; - height: 2.25rem; - padding: 0.5625rem 1.25rem; - justify-content: center; - align-items: center; - gap: 0.5rem; - border-radius: 0.25rem; - background: #1A73E8; -} - -button { - display: flex; - width: 6rem; - height: 2.25rem; - padding: 0.5625rem 1.25rem; - justify-content: center; - align-items: center; - gap: 0.5rem; - border-radius: 0.25rem; -} -` +` \ No newline at end of file diff --git a/BlueMosaic/src/components/common/Button.tsx b/BlueMosaic/src/components/common/Button.tsx new file mode 100644 index 0000000..aad8907 --- /dev/null +++ b/BlueMosaic/src/components/common/Button.tsx @@ -0,0 +1,48 @@ +import styled from "@emotion/styled" + +export const Button = { + Wrapper: ({ children }) => { + return({children}) + }, + + setButton: ({ text, buttonType } : { text: string, buttonType: string })=> { + switch (buttonType) { + case "primary": + return {text}; + case "secondary": + return {text}; + 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; +`; \ No newline at end of file From cf92df0c60f31b32c1fcef88cad52298ee8785b7 Mon Sep 17 00:00:00 2001 From: DingX2 Date: Wed, 21 Feb 2024 01:41:11 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Feat:=20=EB=88=84=EB=A5=B4=EB=A9=B4=20?= =?UTF-8?q?=EB=9C=A8=EA=B2=8C=20=EC=84=A4=EC=A0=95=20=EB=AA=A8=EC=85=98?= =?UTF-8?q?=ED=95=84=EC=9A=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- BlueMosaic/src/pages/Trash.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/BlueMosaic/src/pages/Trash.tsx b/BlueMosaic/src/pages/Trash.tsx index ba3aa8c..789f2fa 100644 --- a/BlueMosaic/src/pages/Trash.tsx +++ b/BlueMosaic/src/pages/Trash.tsx @@ -21,11 +21,11 @@ export const Trash = () => { {({ pause, play }) => ( - - PolaroidSVG - { showFrame && } + { showFrame || PolaroidSVG } + { showFrame && } + { showFrame && } @@ -90,6 +90,7 @@ const PolaroidWrapper = styled.div` width: 100%; height: 100%; display: flex; + flex-direction: column; justify-content: center; align-items: center; From 1550494eff91460312ac7b66155d285230c88455 Mon Sep 17 00:00:00 2001 From: DingX2 Date: Wed, 21 Feb 2024 02:44:30 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- BlueMosaic/src/components/FrameSVG.tsx | 5 +++-- BlueMosaic/src/components/Toast.tsx | 14 +++++++++++--- BlueMosaic/src/components/common/Button.tsx | 6 +++--- BlueMosaic/src/pages/Trash.tsx | 16 +++++++++++++--- 4 files changed, 30 insertions(+), 11 deletions(-) diff --git a/BlueMosaic/src/components/FrameSVG.tsx b/BlueMosaic/src/components/FrameSVG.tsx index 7a6288a..e171e12 100644 --- a/BlueMosaic/src/components/FrameSVG.tsx +++ b/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; diff --git a/BlueMosaic/src/components/Toast.tsx b/BlueMosaic/src/components/Toast.tsx index 989641a..51fa0e8 100644 --- a/BlueMosaic/src/components/Toast.tsx +++ b/BlueMosaic/src/components/Toast.tsx @@ -2,7 +2,8 @@ import styled from "@emotion/styled" import GoogleOneSVG from "../assets/GoogleOne.svg" import { Button } from "./common/Button" -export const Toast = ({found, points}) => { +export const Toast = ({ found, points, handleClickUpload, handleGoto }) => { + return( @@ -15,8 +16,8 @@ export const Toast = ({found, points}) => { - - + + @@ -25,6 +26,11 @@ export const Toast = ({found, points}) => { } const ToastWrappaer = styled.section` +position: absolute; +bottom: 2rem; +right: 2rem; +z-index: 1000; + display: flex; width: 22.4375rem; align-items: center; @@ -32,6 +38,8 @@ 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; diff --git a/BlueMosaic/src/components/common/Button.tsx b/BlueMosaic/src/components/common/Button.tsx index aad8907..72a3421 100644 --- a/BlueMosaic/src/components/common/Button.tsx +++ b/BlueMosaic/src/components/common/Button.tsx @@ -5,12 +5,12 @@ export const Button = { return({children}) }, - setButton: ({ text, buttonType } : { text: string, buttonType: string })=> { + setButton: ({ text, buttonType, onClick } : { text: string, buttonType: string, onClick: () => void })=> { switch (buttonType) { case "primary": - return {text}; + return {text}; case "secondary": - return {text}; + return {text}; default: return null; // or handle other cases as needed } diff --git a/BlueMosaic/src/pages/Trash.tsx b/BlueMosaic/src/pages/Trash.tsx index 789f2fa..5467b68 100644 --- a/BlueMosaic/src/pages/Trash.tsx +++ b/BlueMosaic/src/pages/Trash.tsx @@ -8,9 +8,19 @@ import imageUrl from "../assets/UploadBackground.jpg" import { Frame } from "../components/FrameSVG"; import { Toast } from "../components/Toast"; import { MediaApis } from "../hooks/useMediaQuery"; +import { Navigate, useNavigate } from 'react-router-dom'; export const Trash = () => { const [showFrame, setShowFrame] = useState(false); + const navigate = useNavigate(); + + const handleClickUpload = () => { + setShowFrame(false); + } + + const handleGoto = () => { + navigate("/collection") + } const handleClick = () => { setShowFrame(true); @@ -25,7 +35,7 @@ export const Trash = () => { { showFrame || PolaroidSVG } { showFrame && } - { showFrame && } + { showFrame && } @@ -87,8 +97,8 @@ export default FileUpload; const PolaroidWrapper = styled.div` - width: 100%; - height: 100%; + width: 90%; + height: 90%; display: flex; flex-direction: column; justify-content: center;