From 894cfdd9de80a76f3d45234fe0bc806a40b01a4f Mon Sep 17 00:00:00 2001 From: jin-Pro Date: Mon, 8 Aug 2022 23:58:47 +0900 Subject: [PATCH 01/10] enhance: LoginCheck HOC Component --- client/.eslintrc.json | 1 + client/src/Component/Hoc/LoginUserRouter.tsx | 10 ++++++++++ .../Component/Page/CowDogPage/CowDogPage.tsx | 1 - client/src/Component/Page/Page/Page.tsx | 19 +++++++++++++++++-- .../Page/TeamSettingPage/TeamSettingPage.tsx | 10 ++++------ client/src/util/type.ts | 2 +- 6 files changed, 33 insertions(+), 10 deletions(-) create mode 100644 client/src/Component/Hoc/LoginUserRouter.tsx diff --git a/client/.eslintrc.json b/client/.eslintrc.json index d9c08bc..ef6fb81 100644 --- a/client/.eslintrc.json +++ b/client/.eslintrc.json @@ -22,6 +22,7 @@ }, "plugins": ["react", "@typescript-eslint"], "rules": { + "react/jsx-no-useless-fragment" : 0, "no-shadow" : 0, "no-return-assign" : 0, "consistent-return" : 0, diff --git a/client/src/Component/Hoc/LoginUserRouter.tsx b/client/src/Component/Hoc/LoginUserRouter.tsx new file mode 100644 index 0000000..953a611 --- /dev/null +++ b/client/src/Component/Hoc/LoginUserRouter.tsx @@ -0,0 +1,10 @@ +import { checkLogin, passToLoginPage } from "@Util/."; +import { ChildrenType } from "@Util/type"; + +export const LoginUserRouter = ({ children }: ChildrenType) => { + if (!checkLogin()) { + passToLoginPage(); + return null; + } + return <>{children}; +}; diff --git a/client/src/Component/Page/CowDogPage/CowDogPage.tsx b/client/src/Component/Page/CowDogPage/CowDogPage.tsx index ab5148b..04e2b41 100644 --- a/client/src/Component/Page/CowDogPage/CowDogPage.tsx +++ b/client/src/Component/Page/CowDogPage/CowDogPage.tsx @@ -13,7 +13,6 @@ const ListContainer = css` `; export const CowDogPage: React.FC = () => { - // if (!checkLogin()) passToLoginPage(); const searchParams = new URLSearchParams(useLocation().search); const person = Number(searchParams.get("person")); diff --git a/client/src/Component/Page/Page/Page.tsx b/client/src/Component/Page/Page/Page.tsx index 098009f..402bfa2 100644 --- a/client/src/Component/Page/Page/Page.tsx +++ b/client/src/Component/Page/Page/Page.tsx @@ -1,6 +1,7 @@ import React from "react"; import { Route, Routes } from "react-router"; import { Header } from "@Core/."; +import { LoginUserRouter } from "@Hoc/LoginUserRouter"; import { ChatListPage, CowDogPage, LogInPage, MyPage, RegisterPage, RequestPage, TeamSettingPage } from ".."; export const Page: React.FC = () => { @@ -10,8 +11,22 @@ export const Page: React.FC = () => { } /> } /> - } /> - {/* } /> */} + + + + } + /> + + + + } + /> {/* } /> */} {/* } /> */} {/* } /> */} diff --git a/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx b/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx index 3ecb24f..f152d5a 100644 --- a/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx +++ b/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx @@ -2,15 +2,13 @@ import React from "react"; import { useRecoilValue } from "recoil"; import { TeamSettingTemplate } from "@Template/TeamSettingTemplate"; -import TeamCreatePage from "../TeamCreatepage/TeamCreatePage"; import { userState } from "@Recoil/UserData"; -import { checkLogin, passToLoginPage } from "../../../Util"; +import { checkLogin, passToLoginPage } from "@Util/."; +import TeamCreatePage from "../TeamCreatepage/TeamCreatePage"; export const TeamSettingPage: React.FC = () => { const { gid } = useRecoilValue(userState); - if (!checkLogin()) { - passToLoginPage(); - } - return <>{gid && gid !== 0 ? : }; + if (gid && gid !== 0) return ; + return ; }; diff --git a/client/src/util/type.ts b/client/src/util/type.ts index 6511f60..da3eca0 100644 --- a/client/src/util/type.ts +++ b/client/src/util/type.ts @@ -11,7 +11,7 @@ export type ImageDivType = { }; export type ChildrenType = { - children?: JSX.Element | JSX.Element[]; + children?: React.ReactNode; }; export type InputLabelType = { From 63e82baeef54da40b333a4b4ec2bd298da6c95db Mon Sep 17 00:00:00 2001 From: jin-Pro Date: Tue, 9 Aug 2022 00:45:15 +0900 Subject: [PATCH 02/10] enhance: Location Search String Hook --- client/src/Hook/useGetParams.tsx | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 client/src/Hook/useGetParams.tsx diff --git a/client/src/Hook/useGetParams.tsx b/client/src/Hook/useGetParams.tsx new file mode 100644 index 0000000..3381671 --- /dev/null +++ b/client/src/Hook/useGetParams.tsx @@ -0,0 +1,7 @@ +import { useLocation } from "react-router-dom"; + +export const useGetParams = (search: string) => { + const { pathname } = useLocation(); + const checkPathName = pathname.includes(search); + return checkPathName; +}; From 2b2d1cff9ceef8ab8ef900af3967f5468d0b500f Mon Sep 17 00:00:00 2001 From: jin-Pro Date: Tue, 9 Aug 2022 00:54:21 +0900 Subject: [PATCH 03/10] refactor: InfoImage Handling Component In Team Setting Page --- client/.eslintrc.json | 1 + .../src/Component/Atom/LocationDropDown.tsx | 24 +++-- client/src/Component/Atom/ProfileImage.tsx | 4 +- .../Core/InfoImage/InfoImage.hook.tsx | 65 ++++++++++++++ .../Component/Core/InfoImage/InfoImage.tsx | 36 ++++++++ client/src/Component/Core/index.tsx | 1 + .../src/Component/Hoc/InfoImageContainer.tsx | 89 ------------------- client/src/Component/Hoc/LoginUserRouter.tsx | 9 +- client/src/Component/Hoc/index.tsx | 1 - .../src/Component/Organism/Info/TeamInfo.tsx | 8 +- .../Organism/Info/TeamInfoContianer.tsx | 2 +- .../Page/TeamCreatepage/TeamCreatePage.tsx | 3 - .../Page/TeamSettingPage/TeamSettingPage.tsx | 2 - .../Component/Template/MyPageMain/MyInfo.tsx | 4 +- 14 files changed, 134 insertions(+), 115 deletions(-) create mode 100644 client/src/Component/Core/InfoImage/InfoImage.hook.tsx create mode 100644 client/src/Component/Core/InfoImage/InfoImage.tsx delete mode 100644 client/src/Component/Hoc/InfoImageContainer.tsx diff --git a/client/.eslintrc.json b/client/.eslintrc.json index ef6fb81..655620b 100644 --- a/client/.eslintrc.json +++ b/client/.eslintrc.json @@ -22,6 +22,7 @@ }, "plugins": ["react", "@typescript-eslint"], "rules": { + "react/jsx-props-no-spreading" : 0, "react/jsx-no-useless-fragment" : 0, "no-shadow" : 0, "no-return-assign" : 0, diff --git a/client/src/Component/Atom/LocationDropDown.tsx b/client/src/Component/Atom/LocationDropDown.tsx index b1d5d0a..7005626 100644 --- a/client/src/Component/Atom/LocationDropDown.tsx +++ b/client/src/Component/Atom/LocationDropDown.tsx @@ -19,14 +19,22 @@ export default function LocationDropDown({ setLocSelected, id }: { setLocSelecte - - - - - - - - + {locationList.map(({ id, value }) => ( + + ))} ); } + +const locationList = [ + { id: "서울", value: "서울" }, + { id: "경기", value: "경기" }, + { id: "인천", value: "인천" }, + { id: "대구", value: "대구" }, + { id: "대전", value: "대전" }, + { id: "광주", value: "광주" }, + { id: "부산", value: "부산" }, + { id: "울산", value: "울산" }, +]; diff --git a/client/src/Component/Atom/ProfileImage.tsx b/client/src/Component/Atom/ProfileImage.tsx index 2feb10a..46a42d3 100644 --- a/client/src/Component/Atom/ProfileImage.tsx +++ b/client/src/Component/Atom/ProfileImage.tsx @@ -1,12 +1,14 @@ +import React from "react"; import { css } from "@emotion/react"; import { ProfileImageType } from "@Util/type"; import { URL } from "@Util/URL"; + const defaultImage = "/Asset/meetingImage.png"; export const ProfileImage: React.FC = ({ type, onClick, ref, children, image }) => { const src = String(image).includes("/uploads") ? URL + String(image ?? defaultImage) : image ?? defaultImage; return (
- ProfileImage + {children}
); diff --git a/client/src/Component/Core/InfoImage/InfoImage.hook.tsx b/client/src/Component/Core/InfoImage/InfoImage.hook.tsx new file mode 100644 index 0000000..d9947d7 --- /dev/null +++ b/client/src/Component/Core/InfoImage/InfoImage.hook.tsx @@ -0,0 +1,65 @@ +import { teamState } from "@Recoil/TeamData"; +import { userState } from "@Recoil/UserData"; +import { postImage } from "@Util/data"; +import { useEffect, useRef, useState } from "react"; +import { useRecoilValue, useSetRecoilState } from "recoil"; + +export const useHandleImageEdit = (checkPathName: boolean) => { + const { id, gid } = useRecoilValue(userState); + const setUserInfo = useSetRecoilState(userState); + const setTeamInfo = useSetRecoilState(teamState); + + const handleImageEdit = (imageFile: Blob) => async () => { + let targetId; + let handler; + + if (checkPathName) { + targetId = id; + handler = setUserInfo; + } else { + targetId = String(gid); + handler = setTeamInfo; + } + + const url = await postImage(imageFile, targetId); + + handler((prev: any) => ({ + ...prev, + image: url, + })); + }; + + return handleImageEdit; +}; + +const initBlob = new Blob(); +const reader = new FileReader(); +const defaultImage = "/Asset/meetingImage.png"; + +export const useHandleImage = (checkPathName: boolean) => { + const [imageFile, setImageFile] = useState(initBlob); + const { image: userImage } = useRecoilValue(userState); + const { image: teamImage } = useRecoilValue(teamState); + const [profileImage, setProfileImage] = useState((checkPathName ? userImage : teamImage) ?? defaultImage); + + const changeImage = (e: React.ChangeEvent) => { + if (!e.target.files) return; + setImageFile(e.target.files[0]); + }; + + useEffect(() => { + if (imageFile === initBlob) return; + reader.onloadend = () => { + setProfileImage(reader.result); + }; + reader.readAsDataURL(imageFile); + }, [imageFile]); + + return { imageFile, profileImage, changeImage }; +}; + +export const useHandleImageClick = () => { + const imageRef = useRef(null); + const handleClickImage = () => (imageRef.current as HTMLInputElement).click(); + return { imageRef, handleClickImage }; +}; diff --git a/client/src/Component/Core/InfoImage/InfoImage.tsx b/client/src/Component/Core/InfoImage/InfoImage.tsx new file mode 100644 index 0000000..042086f --- /dev/null +++ b/client/src/Component/Core/InfoImage/InfoImage.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { css } from "@emotion/react"; +import { ProfileImage } from "@Atom/ProfileImage"; +import { Button } from "@Atom/Button"; +import { useGetParams } from "@Hook/useGetParams"; +import { useHandleImage, useHandleImageClick, useHandleImageEdit } from "./InfoImage.hook"; + +const TeamInfoImageContainerStyle = css` + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +`; + +const imageInputStyle = css` + display: none; +`; + +export const InfoImage: React.FC = () => { + const checkPathName = useGetParams("myInfo"); + const { imageRef, handleClickImage } = useHandleImageClick(); + const { imageFile, profileImage, changeImage } = useHandleImage(checkPathName); + const handleImageEdit = () => useHandleImageEdit(checkPathName)(imageFile); + + return ( +
+ + + + +
+ ); +}; diff --git a/client/src/Component/Core/index.tsx b/client/src/Component/Core/index.tsx index cfc8de9..0e632d1 100644 --- a/client/src/Component/Core/index.tsx +++ b/client/src/Component/Core/index.tsx @@ -8,3 +8,4 @@ export * from "./Modal"; export * from "./MyPageSideBar"; export * from "./NavBar/Navbar"; export * from "./Header/Header"; +export * from "./InfoImage/InfoImage"; diff --git a/client/src/Component/Hoc/InfoImageContainer.tsx b/client/src/Component/Hoc/InfoImageContainer.tsx deleted file mode 100644 index 2c600ab..0000000 --- a/client/src/Component/Hoc/InfoImageContainer.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React, { ChangeEvent, ChangeEventHandler, useEffect, useRef, useState } from "react"; -import { css } from "@emotion/react"; -import { useRecoilValue, useSetRecoilState } from "recoil"; -import { ProfileImage } from "@Atom/ProfileImage"; -import { Button } from "@Atom/Button"; -import { postImage } from "@Util/data"; -import { userState } from "@Recoil/UserData"; -import { teamState } from "@Recoil/TeamData"; - -const defaultImage = "/Asset/meetingImage.png"; -const TeamInfoImageContainerStyle = css` - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; -`; - -const imageInputStyle = css` - display: none; -`; -export const InfoImageContainer: React.FC = () => { - const { id, gid } = useRecoilValue(userState); - const setUserInfo = useSetRecoilState(userState); - const setTeamInfo = useSetRecoilState(teamState); - - let image: string | null; - - const initBlob = new Blob(); - const imageInputTag = useRef(null); - const [profileImage, setProfileImage] = useState(null); - const [imageFile, setImageFile] = useState(initBlob); - const { image: userImage } = useRecoilValue(userState); - const { image: teamImage } = useRecoilValue(teamState); - - useEffect(() => { - image = window.location.href.includes("myinfo") ? userImage : teamImage; - setProfileImage(image ?? defaultImage); - }, [userImage, teamImage]); - - const clickImageTag = () => { - (imageInputTag.current as HTMLInputElement).click(); - }; - - const changeImage: ChangeEventHandler = (event: ChangeEvent) => { - if (!event.target.files) return; - setImageFile(event.target.files[0]); - }; - - const handleImageEdit = async () => { - let targetId; - let handler; - - if (window.location.href.includes("myinfo")) { - targetId = id; - handler = setUserInfo; - } else { - targetId = String(gid); - handler = setTeamInfo; - } - - const url = await postImage(imageFile, targetId); - - handler((prev: any) => ({ - ...prev, - image: url, - })); - }; - - useEffect(() => { - if (imageFile === initBlob) return; - const reader = new FileReader(); - reader.onloadend = () => { - setProfileImage(reader.result); - }; - reader.readAsDataURL(imageFile); - }, [imageFile]); - - return ( -
- - - - -
- ); -}; diff --git a/client/src/Component/Hoc/LoginUserRouter.tsx b/client/src/Component/Hoc/LoginUserRouter.tsx index 953a611..7c289cc 100644 --- a/client/src/Component/Hoc/LoginUserRouter.tsx +++ b/client/src/Component/Hoc/LoginUserRouter.tsx @@ -1,10 +1,11 @@ +import React from "react"; import { checkLogin, passToLoginPage } from "@Util/."; import { ChildrenType } from "@Util/type"; export const LoginUserRouter = ({ children }: ChildrenType) => { - if (!checkLogin()) { - passToLoginPage(); - return null; - } + // if (!checkLogin()) { + // passToLoginPage(); + // return null; + // } return <>{children}; }; diff --git a/client/src/Component/Hoc/index.tsx b/client/src/Component/Hoc/index.tsx index 3acd098..42d6de4 100644 --- a/client/src/Component/Hoc/index.tsx +++ b/client/src/Component/Hoc/index.tsx @@ -1,5 +1,4 @@ export * from "./InfoContainer"; -export * from "./InfoImageContainer"; export * from "./ProfileImageContainer"; export * from "./TeamButtonContainer"; export * from "./UserContainer"; diff --git a/client/src/Component/Organism/Info/TeamInfo.tsx b/client/src/Component/Organism/Info/TeamInfo.tsx index b53eead..e84d893 100644 --- a/client/src/Component/Organism/Info/TeamInfo.tsx +++ b/client/src/Component/Organism/Info/TeamInfo.tsx @@ -1,7 +1,7 @@ import React, { RefObject } from "react"; import { css } from "@emotion/react"; +import { InfoImage } from "@Core/."; import { TeamInfoContainer } from "./TeamInfoContianer"; -import { InfoImageContainer } from "@Hoc/."; const TeamInfoContainerStyle = css` display: flex; @@ -14,11 +14,11 @@ const TeamInfoContainerStyle = css` `; type props = { teamNameRef: RefObject; teamInfoRef: RefObject; setLocSelected: (value: string) => void }; -export const TeamInfo = ({ teamNameRef, teamInfoRef, setLocSelected }: props) => { +export const TeamInfo = (props: props) => { return (
- - + +
); }; diff --git a/client/src/Component/Organism/Info/TeamInfoContianer.tsx b/client/src/Component/Organism/Info/TeamInfoContianer.tsx index 6969a40..d5fefd4 100644 --- a/client/src/Component/Organism/Info/TeamInfoContianer.tsx +++ b/client/src/Component/Organism/Info/TeamInfoContianer.tsx @@ -12,9 +12,9 @@ const LabelStyle = css` `; type props = { teamNameRef: RefObject; teamInfoRef: RefObject; setLocSelected: (value: string) => void }; + export const TeamInfoContainer = ({ teamNameRef, teamInfoRef, setLocSelected }: props) => { const { id, info } = useRecoilValue(teamState); - return ( diff --git a/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx b/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx index 1ee9829..5535295 100644 --- a/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx +++ b/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx @@ -3,7 +3,6 @@ import { css } from "@emotion/react"; import { useSetRecoilState } from "recoil"; import { createTeam, getFetch } from "@Util/data"; import { errorState } from "@Recoil/Atom"; -import { checkLogin, passToLoginPage } from "@Util/."; import { TeamInfo } from "@Organism/."; import { TeamCreateButtonContainer } from "@Molecules/."; import { TEAM_INFO_URL } from "@Util/URL"; @@ -20,8 +19,6 @@ const TeamCreatePageStyle = css` `; export const TeamCreatePage: React.FC = () => { - if (!checkLogin()) passToLoginPage(); - const teamNameRef = useRef(null); const teamInfoRef = useRef(null); const [locSelected, setLocSelected] = useState(""); diff --git a/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx b/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx index f152d5a..4663051 100644 --- a/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx +++ b/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx @@ -3,12 +3,10 @@ import React from "react"; import { useRecoilValue } from "recoil"; import { TeamSettingTemplate } from "@Template/TeamSettingTemplate"; import { userState } from "@Recoil/UserData"; -import { checkLogin, passToLoginPage } from "@Util/."; import TeamCreatePage from "../TeamCreatepage/TeamCreatePage"; export const TeamSettingPage: React.FC = () => { const { gid } = useRecoilValue(userState); - if (gid && gid !== 0) return ; return ; }; diff --git a/client/src/Component/Template/MyPageMain/MyInfo.tsx b/client/src/Component/Template/MyPageMain/MyInfo.tsx index f809379..6e838b0 100644 --- a/client/src/Component/Template/MyPageMain/MyInfo.tsx +++ b/client/src/Component/Template/MyPageMain/MyInfo.tsx @@ -1,5 +1,5 @@ import { css } from "@emotion/react"; -import { InfoImageContainer } from "@Hoc/."; +import { InfoImage } from "@Core/."; import { MyInfoContainer } from "@Organism/."; const MyInfoStyle = css` @@ -13,7 +13,7 @@ export const MyInfo = () => { return (
- +
); }; From 06c6ae7483cbb5c4e05e38226309b9edffb774b8 Mon Sep 17 00:00:00 2001 From: jin-Pro Date: Tue, 9 Aug 2022 00:55:15 +0900 Subject: [PATCH 04/10] =?UTF-8?q?refactor:=20HandleImageEdit=20ES6=20?= =?UTF-8?q?=EB=8B=A8=EC=B6=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Component/Core/InfoImage/InfoImage.hook.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/client/src/Component/Core/InfoImage/InfoImage.hook.tsx b/client/src/Component/Core/InfoImage/InfoImage.hook.tsx index d9947d7..a97698c 100644 --- a/client/src/Component/Core/InfoImage/InfoImage.hook.tsx +++ b/client/src/Component/Core/InfoImage/InfoImage.hook.tsx @@ -10,17 +10,8 @@ export const useHandleImageEdit = (checkPathName: boolean) => { const setTeamInfo = useSetRecoilState(teamState); const handleImageEdit = (imageFile: Blob) => async () => { - let targetId; - let handler; - - if (checkPathName) { - targetId = id; - handler = setUserInfo; - } else { - targetId = String(gid); - handler = setTeamInfo; - } - + const targetId = checkPathName ? id : String(gid); + const handler = checkPathName ? setUserInfo : setTeamInfo; const url = await postImage(imageFile, targetId); handler((prev: any) => ({ From facefcd319f93bf899a4ec30c5348f38a8ea5b9e Mon Sep 17 00:00:00 2001 From: jin-Pro Date: Tue, 9 Aug 2022 02:07:46 +0900 Subject: [PATCH 05/10] refactor: TeamCreatepage --- .../src/Component/Atom/LocationDropDown.tsx | 4 +- .../Component/Core/InfoImage/InfoImage.tsx | 24 ++++---- .../src/Component/Organism/Info/TeamInfo.tsx | 2 +- .../Organism/Info/TeamInfoContianer.tsx | 6 +- .../TeamCreatepage/TeamCreatePage.hook.tsx | 56 +++++++++++++++++++ .../Page/TeamCreatepage/TeamCreatePage.tsx | 40 ++++--------- 6 files changed, 86 insertions(+), 46 deletions(-) create mode 100644 client/src/Component/Page/TeamCreatepage/TeamCreatePage.hook.tsx diff --git a/client/src/Component/Atom/LocationDropDown.tsx b/client/src/Component/Atom/LocationDropDown.tsx index 7005626..ca4eb66 100644 --- a/client/src/Component/Atom/LocationDropDown.tsx +++ b/client/src/Component/Atom/LocationDropDown.tsx @@ -13,9 +13,9 @@ const InfoStyle = css` margin-left: 7px; `; -export default function LocationDropDown({ setLocSelected, id }: { setLocSelected: (value: string) => void; id: string }) { +export default function LocationDropDown({ locSelected, handleLocationSelected, id }: { locSelected: string; handleLocationSelected: (e: React.ChangeEvent) => void; id: string }) { return ( - diff --git a/client/src/Component/Core/InfoImage/InfoImage.tsx b/client/src/Component/Core/InfoImage/InfoImage.tsx index 042086f..2c10df2 100644 --- a/client/src/Component/Core/InfoImage/InfoImage.tsx +++ b/client/src/Component/Core/InfoImage/InfoImage.tsx @@ -5,18 +5,6 @@ import { Button } from "@Atom/Button"; import { useGetParams } from "@Hook/useGetParams"; import { useHandleImage, useHandleImageClick, useHandleImageEdit } from "./InfoImage.hook"; -const TeamInfoImageContainerStyle = css` - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; -`; - -const imageInputStyle = css` - display: none; -`; - export const InfoImage: React.FC = () => { const checkPathName = useGetParams("myInfo"); const { imageRef, handleClickImage } = useHandleImageClick(); @@ -34,3 +22,15 @@ export const InfoImage: React.FC = () => { ); }; + +const TeamInfoImageContainerStyle = css` + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +`; + +const imageInputStyle = css` + display: none; +`; diff --git a/client/src/Component/Organism/Info/TeamInfo.tsx b/client/src/Component/Organism/Info/TeamInfo.tsx index e84d893..cbb30ee 100644 --- a/client/src/Component/Organism/Info/TeamInfo.tsx +++ b/client/src/Component/Organism/Info/TeamInfo.tsx @@ -13,7 +13,7 @@ const TeamInfoContainerStyle = css` align-items: center; `; -type props = { teamNameRef: RefObject; teamInfoRef: RefObject; setLocSelected: (value: string) => void }; +type props = { locSelected: string; teamNameRef: RefObject; teamInfoRef: RefObject; handleLocationSelected: (e: React.ChangeEvent) => void }; export const TeamInfo = (props: props) => { return (
diff --git a/client/src/Component/Organism/Info/TeamInfoContianer.tsx b/client/src/Component/Organism/Info/TeamInfoContianer.tsx index d5fefd4..26cb225 100644 --- a/client/src/Component/Organism/Info/TeamInfoContianer.tsx +++ b/client/src/Component/Organism/Info/TeamInfoContianer.tsx @@ -11,9 +11,9 @@ const LabelStyle = css` width: 90%; `; -type props = { teamNameRef: RefObject; teamInfoRef: RefObject; setLocSelected: (value: string) => void }; +type props = { locSelected: string; teamNameRef: RefObject; teamInfoRef: RefObject; handleLocationSelected: (e: React.ChangeEvent) => void }; -export const TeamInfoContainer = ({ teamNameRef, teamInfoRef, setLocSelected }: props) => { +export const TeamInfoContainer = ({ teamNameRef, teamInfoRef, locSelected, handleLocationSelected }: props) => { const { id, info } = useRecoilValue(teamState); return ( @@ -21,7 +21,7 @@ export const TeamInfoContainer = ({ teamNameRef, teamInfoRef, setLocSelected }:

지역

- +
); diff --git a/client/src/Component/Page/TeamCreatepage/TeamCreatePage.hook.tsx b/client/src/Component/Page/TeamCreatepage/TeamCreatePage.hook.tsx new file mode 100644 index 0000000..5c7eb6c --- /dev/null +++ b/client/src/Component/Page/TeamCreatepage/TeamCreatePage.hook.tsx @@ -0,0 +1,56 @@ +import { createTeam, getFetch } from "@Util/data"; +import { ErrorType, TeamInfoType } from "@Util/type"; +import { TEAM_INFO_URL } from "@Util/URL"; +import { useState } from "react"; + +type useLocationSelectHookType = () => [string, (e: React.ChangeEvent) => void]; +export const useLocationSelectHook: useLocationSelectHookType = () => { + const [locSelected, setLocSelected] = useState(""); + const handleLocationSelected = (e: React.ChangeEvent) => setLocSelected(e.target.value); + return [locSelected, handleLocationSelected]; +}; + +type returnType = { teamName: string; teamInfo: string; location: string }; +type validationFuncType = ({ teamNameRef, teamInfoRef, locSelected }: { teamNameRef: React.RefObject; teamInfoRef: React.RefObject; locSelected: string }) => { bool: boolean; value: string | returnType }; + +export const validationRefData: validationFuncType = ({ teamNameRef, teamInfoRef, locSelected }) => { + if (!teamNameRef.current || !teamInfoRef.current) + return { + bool: false, + value: "시스템 에러", + }; + + const teamName = teamNameRef.current.value; + const teamInfo = teamInfoRef.current.value; + const location = locSelected; + + if (teamName === "") { + return { + bool: false, + value: "팀 이름을 입력해주세요", + }; + } + if (location === "") { + return { + bool: false, + value: "지역을 선택해 주세요", + }; + } + return { + bool: true, + value: { teamName, teamInfo, location }, + }; +}; + +type argsType = returnType & { catchError: (valOrUpdater: ErrorType | ((currVal: ErrorType) => ErrorType)) => void }; +type postCreateTeamFuncType = ({ teamName, teamInfo, location, catchError }: argsType) => Promise<{ gid: number; teamData: TeamInfoType } | undefined>; + +export const postCreateTeam: postCreateTeamFuncType = async ({ teamName, teamInfo, location, catchError }) => { + try { + const [gid, teamData] = await Promise.all([createTeam({ teamName, teamInfo, location }), getFetch({ url: TEAM_INFO_URL, query: "" })]); + if (gid === "error") throw new Error("팀 생성에 실패했습니다"); + return { gid, teamData }; + } catch (e) { + catchError({ errorStr: e as string, timeOut: 1000 }); + } +}; diff --git a/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx b/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx index 5535295..9e8139d 100644 --- a/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx +++ b/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx @@ -1,13 +1,12 @@ -import React, { MouseEventHandler, useRef, useState } from "react"; +import React, { MouseEventHandler, useRef } from "react"; import { css } from "@emotion/react"; import { useSetRecoilState } from "recoil"; -import { createTeam, getFetch } from "@Util/data"; import { errorState } from "@Recoil/Atom"; import { TeamInfo } from "@Organism/."; import { TeamCreateButtonContainer } from "@Molecules/."; -import { TEAM_INFO_URL } from "@Util/URL"; import { userState } from "@Recoil/UserData"; import { teamState } from "@Recoil/TeamData"; +import { postCreateTeam, useLocationSelectHook, validationRefData } from "./TeamCreatePage.hook"; const TeamCreatePageStyle = css` position: relative; @@ -19,46 +18,31 @@ const TeamCreatePageStyle = css` `; export const TeamCreatePage: React.FC = () => { + const [locSelected, handleLocationSelected] = useLocationSelectHook(); const teamNameRef = useRef(null); const teamInfoRef = useRef(null); - const [locSelected, setLocSelected] = useState(""); const setUserInfo = useSetRecoilState(userState); - const setErrorValue = useSetRecoilState(errorState); const setTeamInfo = useSetRecoilState(teamState); + const setErrorValue = useSetRecoilState(errorState); const clickCreateButton: MouseEventHandler = async () => { - if (!teamNameRef.current || !teamInfoRef.current) return; - - const teamName = teamNameRef.current.value; - const teamInfo = teamInfoRef.current.value; - const location = locSelected; - - if (teamName === "") { - setErrorValue({ errorStr: "팀 이름을 입력해 주세요", timeOut: 1000 }); + const { bool, value } = validationRefData({ teamNameRef, teamInfoRef, locSelected }); + if (!bool) { + setErrorValue({ errorStr: value as string, timeOut: 1000 }); return; } - if (location === "") { - setErrorValue({ errorStr: "지역을 선택해 주세요", timeOut: 1000 }); - return; - } - - const gid = await createTeam({ teamName, teamInfo, location }); - if (gid === "error") { - setErrorValue({ errorStr: "팀 생성에 실패했습니다", timeOut: 1000 }); - return; - } - const teamData = await getFetch({ url: TEAM_INFO_URL, query: "" }); + const res = await postCreateTeam({ ...(value as Exclude), catchError: setErrorValue }); + if (!res) return; + const { gid, teamData } = res; setTeamInfo(teamData); - setUserInfo((prev) => { - return { ...prev, gid }; - }); + setUserInfo((prev) => ({ ...prev, gid })); }; return (
- +
); From a740cbe412447e9eca14a3b4fa45e803936980ad Mon Sep 17 00:00:00 2001 From: jin-Pro Date: Tue, 9 Aug 2022 14:27:17 +0900 Subject: [PATCH 06/10] =?UTF-8?q?refactor:=20TeamCreatePage=20=3D>=20Templ?= =?UTF-8?q?ate=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/App.tsx | 1 + .../Page/TeamSettingPage/TeamSettingPage.tsx | 5 ++--- client/src/Component/Page/index.tsx | 1 - .../TeamSetting/TeamCreateTemplate.hook.tsx} | 0 .../TeamSetting/TeamCreateTemplate.tsx} | 17 +++++++---------- .../{ => TeamSetting}/TeamSettingTemplate.tsx | 4 ++-- client/src/Component/Template/index.tsx | 2 ++ 7 files changed, 14 insertions(+), 16 deletions(-) rename client/src/Component/{Page/TeamCreatepage/TeamCreatePage.hook.tsx => Template/TeamSetting/TeamCreateTemplate.hook.tsx} (100%) rename client/src/Component/{Page/TeamCreatepage/TeamCreatePage.tsx => Template/TeamSetting/TeamCreateTemplate.tsx} (80%) rename client/src/Component/Template/{ => TeamSetting}/TeamSettingTemplate.tsx (94%) create mode 100644 client/src/Component/Template/index.tsx diff --git a/client/src/App.tsx b/client/src/App.tsx index 9f20baa..a4316b5 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -13,6 +13,7 @@ export const App: React.FC = () => { <> } /> + } /> } /> {/* } /> */} {/* } /> */} diff --git a/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx b/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx index 4663051..dd9e8a0 100644 --- a/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx +++ b/client/src/Component/Page/TeamSettingPage/TeamSettingPage.tsx @@ -1,12 +1,11 @@ /* eslint-disable no-console */ import React from "react"; import { useRecoilValue } from "recoil"; -import { TeamSettingTemplate } from "@Template/TeamSettingTemplate"; import { userState } from "@Recoil/UserData"; -import TeamCreatePage from "../TeamCreatepage/TeamCreatePage"; +import { TeamCreateTemplate, TeamSettingTemplate } from "@Template/."; export const TeamSettingPage: React.FC = () => { const { gid } = useRecoilValue(userState); if (gid && gid !== 0) return ; - return ; + return ; }; diff --git a/client/src/Component/Page/index.tsx b/client/src/Component/Page/index.tsx index c863fa9..14bcb1b 100644 --- a/client/src/Component/Page/index.tsx +++ b/client/src/Component/Page/index.tsx @@ -7,5 +7,4 @@ export * from "./MyPage/MyPage"; export * from "./Page/Page"; export * from "./RegisterPage/RegisterPage"; export * from "./RequestPage/RequestPage"; -export * from "./TeamCreatepage/TeamCreatePage"; export * from "./TeamSettingPage/TeamSettingPage"; diff --git a/client/src/Component/Page/TeamCreatepage/TeamCreatePage.hook.tsx b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx similarity index 100% rename from client/src/Component/Page/TeamCreatepage/TeamCreatePage.hook.tsx rename to client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx diff --git a/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.tsx similarity index 80% rename from client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx rename to client/src/Component/Template/TeamSetting/TeamCreateTemplate.tsx index 9e8139d..3a6a752 100644 --- a/client/src/Component/Page/TeamCreatepage/TeamCreatePage.tsx +++ b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.tsx @@ -6,7 +6,7 @@ import { TeamInfo } from "@Organism/."; import { TeamCreateButtonContainer } from "@Molecules/."; import { userState } from "@Recoil/UserData"; import { teamState } from "@Recoil/TeamData"; -import { postCreateTeam, useLocationSelectHook, validationRefData } from "./TeamCreatePage.hook"; +import { postCreateTeam, useLocationSelectHook, validationRefData } from "./TeamCreateTemplate.hook"; const TeamCreatePageStyle = css` position: relative; @@ -17,7 +17,7 @@ const TeamCreatePageStyle = css` flex-direction: column; `; -export const TeamCreatePage: React.FC = () => { +export const TeamCreateTemplate: React.FC = () => { const [locSelected, handleLocationSelected] = useLocationSelectHook(); const teamNameRef = useRef(null); const teamInfoRef = useRef(null); @@ -32,12 +32,11 @@ export const TeamCreatePage: React.FC = () => { setErrorValue({ errorStr: value as string, timeOut: 1000 }); return; } - - const res = await postCreateTeam({ ...(value as Exclude), catchError: setErrorValue }); - if (!res) return; - const { gid, teamData } = res; - setTeamInfo(teamData); - setUserInfo((prev) => ({ ...prev, gid })); + postCreateTeam({ ...(value as Exclude), catchError: setErrorValue }).then((res) => { + const { gid, teamData } = res as Exclude; + setTeamInfo(teamData); + setUserInfo((prev) => ({ ...prev, gid })); + }); }; return ( @@ -47,5 +46,3 @@ export const TeamCreatePage: React.FC = () => {
); }; - -export default TeamCreatePage; diff --git a/client/src/Component/Template/TeamSettingTemplate.tsx b/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx similarity index 94% rename from client/src/Component/Template/TeamSettingTemplate.tsx rename to client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx index 21c5f24..5d1168f 100644 --- a/client/src/Component/Template/TeamSettingTemplate.tsx +++ b/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx @@ -7,7 +7,7 @@ import { TeamSettingButtonContainer } from "@Molecules/."; import { TeamInfo } from "@Organism/."; import { teamState } from "@Recoil/TeamData"; import { userState } from "@Recoil/UserData"; -import { ProfileList } from "./Profile/ProfileList"; +import { ProfileList } from "../Profile/ProfileList"; const TeamSettingTemPlateStyle = css` display: flex; @@ -64,7 +64,7 @@ export const TeamSettingTemplate: React.FC = () => { return (
- + {/* */} {}} datas={teamInfoState?.member} person={1} profileRef={profileRef} />
diff --git a/client/src/Component/Template/index.tsx b/client/src/Component/Template/index.tsx new file mode 100644 index 0000000..f915871 --- /dev/null +++ b/client/src/Component/Template/index.tsx @@ -0,0 +1,2 @@ +export * from "./TeamSetting/TeamCreateTemplate"; +export * from "./TeamSetting/TeamSettingTemplate"; From e87a470e5dcdb27dad5ce11d9377565dfc2f4d51 Mon Sep 17 00:00:00 2001 From: jin-Pro Date: Tue, 9 Aug 2022 15:27:12 +0900 Subject: [PATCH 07/10] =?UTF-8?q?refactor:=20try-catch=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TeamSetting/TeamCreateTemplate.hook.tsx | 48 +++++-------------- .../TeamSetting/TeamCreateTemplate.tsx | 13 +++-- .../TeamSetting/TeamSettingTemplate.tsx | 44 +++++++++++++++-- 3 files changed, 60 insertions(+), 45 deletions(-) diff --git a/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx index 5c7eb6c..0dff760 100644 --- a/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx +++ b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx @@ -3,54 +3,32 @@ import { ErrorType, TeamInfoType } from "@Util/type"; import { TEAM_INFO_URL } from "@Util/URL"; import { useState } from "react"; -type useLocationSelectHookType = () => [string, (e: React.ChangeEvent) => void]; +type useLocationSelectHookType = () => [string, (e: React.ChangeEvent) => void, () => void]; export const useLocationSelectHook: useLocationSelectHookType = () => { const [locSelected, setLocSelected] = useState(""); const handleLocationSelected = (e: React.ChangeEvent) => setLocSelected(e.target.value); - return [locSelected, handleLocationSelected]; + const handleLocationInit = () => setLocSelected(""); + return [locSelected, handleLocationSelected, handleLocationInit]; }; type returnType = { teamName: string; teamInfo: string; location: string }; -type validationFuncType = ({ teamNameRef, teamInfoRef, locSelected }: { teamNameRef: React.RefObject; teamInfoRef: React.RefObject; locSelected: string }) => { bool: boolean; value: string | returnType }; - +type validationFuncType = ({ teamNameRef, teamInfoRef, locSelected }: { teamNameRef: React.RefObject; teamInfoRef: React.RefObject; locSelected: string }) => returnType | undefined; export const validationRefData: validationFuncType = ({ teamNameRef, teamInfoRef, locSelected }) => { - if (!teamNameRef.current || !teamInfoRef.current) - return { - bool: false, - value: "시스템 에러", - }; + if (!teamNameRef.current || !teamInfoRef.current) throw new Error("시스템 에러"); const teamName = teamNameRef.current.value; const teamInfo = teamInfoRef.current.value; const location = locSelected; - if (teamName === "") { - return { - bool: false, - value: "팀 이름을 입력해주세요", - }; - } - if (location === "") { - return { - bool: false, - value: "지역을 선택해 주세요", - }; - } - return { - bool: true, - value: { teamName, teamInfo, location }, - }; + if (teamName === "") throw new Error("팀 이름을 입력해주세요"); + if (location === "") throw new Error("지역을 선택해 주세요"); + return { teamName, teamInfo, location }; }; -type argsType = returnType & { catchError: (valOrUpdater: ErrorType | ((currVal: ErrorType) => ErrorType)) => void }; -type postCreateTeamFuncType = ({ teamName, teamInfo, location, catchError }: argsType) => Promise<{ gid: number; teamData: TeamInfoType } | undefined>; +type postCreateTeamFuncType = ({ teamName, teamInfo, location }: returnType) => Promise<{ gid: number; teamData: TeamInfoType } | undefined>; -export const postCreateTeam: postCreateTeamFuncType = async ({ teamName, teamInfo, location, catchError }) => { - try { - const [gid, teamData] = await Promise.all([createTeam({ teamName, teamInfo, location }), getFetch({ url: TEAM_INFO_URL, query: "" })]); - if (gid === "error") throw new Error("팀 생성에 실패했습니다"); - return { gid, teamData }; - } catch (e) { - catchError({ errorStr: e as string, timeOut: 1000 }); - } +export const postCreateTeam: postCreateTeamFuncType = async ({ teamName, teamInfo, location }) => { + const [gid, teamData] = await Promise.all([createTeam({ teamName, teamInfo, location }), getFetch({ url: TEAM_INFO_URL, query: "" })]); + if (gid === "error") throw new Error("팀 생성에 실패했습니다"); + return { gid, teamData }; }; diff --git a/client/src/Component/Template/TeamSetting/TeamCreateTemplate.tsx b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.tsx index 3a6a752..a369208 100644 --- a/client/src/Component/Template/TeamSetting/TeamCreateTemplate.tsx +++ b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.tsx @@ -27,16 +27,15 @@ export const TeamCreateTemplate: React.FC = () => { const setErrorValue = useSetRecoilState(errorState); const clickCreateButton: MouseEventHandler = async () => { - const { bool, value } = validationRefData({ teamNameRef, teamInfoRef, locSelected }); - if (!bool) { - setErrorValue({ errorStr: value as string, timeOut: 1000 }); - return; - } - postCreateTeam({ ...(value as Exclude), catchError: setErrorValue }).then((res) => { + try { + const value = validationRefData({ teamNameRef, teamInfoRef, locSelected }); + const res = await postCreateTeam(value as Exclude); const { gid, teamData } = res as Exclude; setTeamInfo(teamData); setUserInfo((prev) => ({ ...prev, gid })); - }); + } catch (e) { + setErrorValue({ errorStr: e as string, timeOut: 1000 }); + } }; return ( diff --git a/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx b/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx index 5d1168f..29e360a 100644 --- a/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx +++ b/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx @@ -8,6 +8,7 @@ import { TeamInfo } from "@Organism/."; import { teamState } from "@Recoil/TeamData"; import { userState } from "@Recoil/UserData"; import { ProfileList } from "../Profile/ProfileList"; +import { useLocationSelectHook } from "./TeamCreateTemplate.hook"; const TeamSettingTemPlateStyle = css` display: flex; @@ -19,9 +20,10 @@ const TeamSettingTemPlateStyle = css` `; export const TeamSettingTemplate: React.FC = () => { + const [locSelected, handleLocationSelected, handleLocationInit] = useLocationSelectHook(); + const [teamInfoState, setTeamInfoState] = useRecoilState(teamState); const userInfoState = useRecoilValue(userState); - const [locSelected, setLocSelected] = useState(""); const teamNameRef = useRef(null); const teamInfoRef = useRef(null); const profileRef = useRef([]); @@ -30,7 +32,7 @@ export const TeamSettingTemplate: React.FC = () => { if (!teamNameRef.current || !teamInfoRef.current || !locSelected) return; teamNameRef.current.value = ""; teamInfoRef.current.value = ""; - setLocSelected(""); + handleLocationInit(); }; const clickExitButton: MouseEventHandler = async () => { const result = await exitTeam(); @@ -64,9 +66,45 @@ export const TeamSettingTemplate: React.FC = () => { return (
- {/* */} + {}} datas={teamInfoState?.member} person={1} profileRef={profileRef} />
); }; + +/** + * + * + const postAPI = async () => { + const res = await axios.post(); + if(res === "") throw new Error; + return res; + } + + + const handleClickButton = async () => { + try{ + const res = await postAPI(); + setter(res); + }catch(e){ + handleError(e); + } + } + + + const postAPI = async (handleError) => { + try{ + const res = await axios.post(); + if(res === "") throw new Error; + return res; + }catch(e){ + handleError(e); + return []; + } + + const handleClickButton = () => postAPI(handleError).then(setter); + * + * + * + */ From d57475f0e915f2f1312ebafee12c703894ee21ff Mon Sep 17 00:00:00 2001 From: jin-Pro Date: Tue, 9 Aug 2022 15:59:53 +0900 Subject: [PATCH 08/10] refactor: TeamSettingTemplate --- .../TeamSetting/TeamCreateTemplate.hook.tsx | 20 ++++- .../TeamSetting/TeamSettingTemplate.tsx | 81 +++++-------------- client/src/util/data.ts | 36 +++------ 3 files changed, 47 insertions(+), 90 deletions(-) diff --git a/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx index 0dff760..61c6f9f 100644 --- a/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx +++ b/client/src/Component/Template/TeamSetting/TeamCreateTemplate.hook.tsx @@ -1,5 +1,5 @@ import { createTeam, getFetch } from "@Util/data"; -import { ErrorType, TeamInfoType } from "@Util/type"; +import { PersonInfoType, TeamInfoType } from "@Util/type"; import { TEAM_INFO_URL } from "@Util/URL"; import { useState } from "react"; @@ -12,7 +12,8 @@ export const useLocationSelectHook: useLocationSelectHookType = () => { }; type returnType = { teamName: string; teamInfo: string; location: string }; -type validationFuncType = ({ teamNameRef, teamInfoRef, locSelected }: { teamNameRef: React.RefObject; teamInfoRef: React.RefObject; locSelected: string }) => returnType | undefined; +type validationArgsType = { teamNameRef: React.RefObject; teamInfoRef: React.RefObject; locSelected: string }; +type validationFuncType = ({ teamNameRef, teamInfoRef, locSelected }: validationArgsType) => returnType | undefined; export const validationRefData: validationFuncType = ({ teamNameRef, teamInfoRef, locSelected }) => { if (!teamNameRef.current || !teamInfoRef.current) throw new Error("시스템 에러"); @@ -26,9 +27,22 @@ export const validationRefData: validationFuncType = ({ teamNameRef, teamInfoRef }; type postCreateTeamFuncType = ({ teamName, teamInfo, location }: returnType) => Promise<{ gid: number; teamData: TeamInfoType } | undefined>; - export const postCreateTeam: postCreateTeamFuncType = async ({ teamName, teamInfo, location }) => { const [gid, teamData] = await Promise.all([createTeam({ teamName, teamInfo, location }), getFetch({ url: TEAM_INFO_URL, query: "" })]); if (gid === "error") throw new Error("팀 생성에 실패했습니다"); return { gid, teamData }; }; + +type teamUpdateDataValidationArgsType = validationArgsType & { + teamInfoState: TeamInfoType; + userInfoState: PersonInfoType; +}; +export const teamUpdateDataValidation = ({ teamNameRef, teamInfoRef, locSelected, teamInfoState, userInfoState }: teamUpdateDataValidationArgsType) => { + if (!teamNameRef.current && !teamInfoRef.current && !locSelected && !teamInfoState.id) throw new Error("시스템 에러"); + if (teamInfoState.leader !== userInfoState.id) throw new Error("팀 리더가 아닙니다"); + return { + teamName: teamNameRef?.current?.value || teamInfoState.id, + teamInfo: teamInfoRef?.current?.value || teamInfoState.info, + location: locSelected ?? teamInfoState.location, + }; +}; diff --git a/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx b/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx index 29e360a..05192a8 100644 --- a/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx +++ b/client/src/Component/Template/TeamSetting/TeamSettingTemplate.tsx @@ -7,8 +7,9 @@ import { TeamSettingButtonContainer } from "@Molecules/."; import { TeamInfo } from "@Organism/."; import { teamState } from "@Recoil/TeamData"; import { userState } from "@Recoil/UserData"; +import { useMovePage } from "@Hook/useMovePage"; import { ProfileList } from "../Profile/ProfileList"; -import { useLocationSelectHook } from "./TeamCreateTemplate.hook"; +import { teamUpdateDataValidation, useLocationSelectHook } from "./TeamCreateTemplate.hook"; const TeamSettingTemPlateStyle = css` display: flex; @@ -21,6 +22,7 @@ const TeamSettingTemPlateStyle = css` export const TeamSettingTemplate: React.FC = () => { const [locSelected, handleLocationSelected, handleLocationInit] = useLocationSelectHook(); + const [goMain] = useMovePage("/main"); const [teamInfoState, setTeamInfoState] = useRecoilState(teamState); const userInfoState = useRecoilValue(userState); @@ -28,40 +30,31 @@ export const TeamSettingTemplate: React.FC = () => { const teamInfoRef = useRef(null); const profileRef = useRef([]); const setErrorValue = useSetRecoilState(errorState); + const resetInput = () => { if (!teamNameRef.current || !teamInfoRef.current || !locSelected) return; teamNameRef.current.value = ""; teamInfoRef.current.value = ""; handleLocationInit(); }; - const clickExitButton: MouseEventHandler = async () => { - const result = await exitTeam(); - if (result === "error") { - setErrorValue({ errorStr: "팀 탈출에 실패했습니다.", timeOut: 1000 }); - } - window.location.replace("/main"); - }; - const clickUpdateButton: MouseEventHandler = async () => { - if (!teamNameRef.current && !teamInfoRef.current && !locSelected && !teamInfoState.id) return; - if (teamInfoState.leader !== userInfoState.id) { - setErrorValue({ errorStr: "팀 리더가 아닙니다", timeOut: 1000 }); - return; - } + const clickExitButton: MouseEventHandler = () => + exitTeam() + .then((res) => goMain()) + .catch((e) => setErrorValue({ errorStr: e as string, timeOut: 1000 })); - const result = await changeTeamInfo({ - teamName: teamNameRef?.current?.value || teamInfoState.id, - teamInfo: teamInfoRef?.current?.value || teamInfoState.info, - location: locSelected ?? teamInfoState.location, - }); - if (result === "error") { - setErrorValue({ errorStr: "팀 정보 수정에 실패했습니다.", timeOut: 1000 }); - return; + const clickUpdateButton: MouseEventHandler = () => { + try { + const value = teamUpdateDataValidation({ teamNameRef, teamInfoRef, locSelected, teamInfoState, userInfoState }); + changeTeamInfo(value) + .then((res) => { + setTeamInfoState((prev) => ({ ...prev, ...res })); + resetInput(); + }) + .catch((e) => setErrorValue({ errorStr: "팀 정보 수정에 실패했습니다.", timeOut: 1000 })); + } catch (e) { + setErrorValue({ errorStr: e as string, timeOut: 1000 }); } - setTeamInfoState((prev) => { - return { ...prev, ...result }; - }); - resetInput(); }; return ( @@ -72,39 +65,3 @@ export const TeamSettingTemplate: React.FC = () => { ); }; - -/** - * - * - const postAPI = async () => { - const res = await axios.post(); - if(res === "") throw new Error; - return res; - } - - - const handleClickButton = async () => { - try{ - const res = await postAPI(); - setter(res); - }catch(e){ - handleError(e); - } - } - - - const postAPI = async (handleError) => { - try{ - const res = await axios.post(); - if(res === "") throw new Error; - return res; - }catch(e){ - handleError(e); - return []; - } - - const handleClickButton = () => postAPI(handleError).then(setter); - * - * - * - */ diff --git a/client/src/util/data.ts b/client/src/util/data.ts index 8ad48ab..5cb75b2 100644 --- a/client/src/util/data.ts +++ b/client/src/util/data.ts @@ -1,34 +1,20 @@ -/* eslint-disable no-console */ -/* eslint-disable no-debugger */ import axios from "axios"; import { TEAM_EXIT_API_URL, ACCEPT_API_URL, CHAT_MESSAGES_API_URL, DENY_API_URL, LOGIN_API_URL, LOGOUT_API_URL, POST_CHAT_API_URL, POST_IMAGE_API_URL, PROFILE_API_URL, REGISTER_API_URL, REQUEST_API_URL, TEAM_CREATE_API_URL, TEAM_INVITE_API_URL, TEAM_UPDATE_API_URL, USER_INFO_API_URL, POST_CHAT_READ_API_URL, CHECK_ID_VALIDATION_URL } from "./URL"; import { ChangeTeamInfoType, loginInfo, PostTeamType, registerInfo } from "./type"; import { fromImageToForm } from "."; -export const changeTeamInfo = async ({ teamName, teamInfo, location }: ChangeTeamInfoType) => { - try { - const { data } = await axios.post( - TEAM_UPDATE_API_URL, - { - name: teamName, - description: teamInfo, - location, - }, - { withCredentials: true } - ); - return data; - } catch (error) { - return "error"; - } -}; +export const changeTeamInfo = ({ teamName, teamInfo, location }: ChangeTeamInfoType) => + axios.post( + TEAM_UPDATE_API_URL, + { + name: teamName, + description: teamInfo, + location, + }, + { withCredentials: true } + ); -export const exitTeam = async () => { - try { - return await axios.post(TEAM_EXIT_API_URL, {}, { withCredentials: true }); - } catch (error) { - return "error"; - } -}; +export const exitTeam = () => axios.post(TEAM_EXIT_API_URL, {}, { withCredentials: true }); export const createTeam = async ({ teamName, teamInfo, location }: PostTeamType) => { try { From cce1d97dd3a0f7a845fd171b3e42928d7b982195 Mon Sep 17 00:00:00 2001 From: jin-Pro Date: Tue, 9 Aug 2022 16:03:01 +0900 Subject: [PATCH 09/10] refactor: TeamSettingButtonContainer useToggleHook use --- .../Team/TeamSettingButtonContainer.tsx | 18 +++++++----------- .../Component/Template/Modal/InviteModal.tsx | 4 ++-- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/client/src/Component/Molecules/Team/TeamSettingButtonContainer.tsx b/client/src/Component/Molecules/Team/TeamSettingButtonContainer.tsx index d3306e5..3f1a3b9 100644 --- a/client/src/Component/Molecules/Team/TeamSettingButtonContainer.tsx +++ b/client/src/Component/Molecules/Team/TeamSettingButtonContainer.tsx @@ -1,27 +1,23 @@ -import { useRef, useState } from "react"; +import { useRef } from "react"; import { Button } from "@Atom/."; import useDropDownCloseEvent from "@Hook/useDropDownCloseEvent"; import { TeamButtonContainer } from "@Hoc/."; -import InviteModal from "../../Template/Modal/InviteModal"; +import InviteModal from "@Template/Modal/InviteModal"; +import { useToggleHook } from "@Hook/useToggleHook"; type props = { clickUpdateButton: React.MouseEventHandler; clickExitButton: React.MouseEventHandler }; export const TeamSettingButtonContainer = ({ clickUpdateButton, clickExitButton }: props) => { - const [inviteModalState, setInviteModalState] = useState(false); + const [inviteModalState, handleToggleInvite, handleFalseInvite] = useToggleHook(); const modalRef = useRef(null); - useDropDownCloseEvent(modalRef, () => setInviteModalState(false)); + useDropDownCloseEvent(modalRef, handleFalseInvite); return (
- - {inviteModalState && } + {inviteModalState && }