Merge pull request #293 from boostcampwm-2021/refactor/teamsetting

Refactor/teamsetting

client/.eslintrc.json

@@ -22,6 +22,8 @@
   },
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
+    "react/jsx-props-no-spreading" : 0,
+    "react/jsx-no-useless-fragment" : 0,
     "no-shadow" : 0,
     "no-return-assign" : 0,
     "consistent-return" : 0,

client/src/App.tsx

@@ -13,6 +13,7 @@ export const App: React.FC = () => {
     <>
       <Routes>
         <Route path="/" element={<MainPage />} />
+        <Route path="/main" element={<MainPage />} />
         <Route path="/sub/*" element={<Page />} />
         {/* <Route path="/ChatRoom" element={<ChatRoom />} /> */}
         {/* <Route path="*" element={<Navigate to="/" replace />} /> */}

client/src/Component/Atom/LocationDropDown.tsx

@@ -13,20 +13,28 @@ 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<HTMLSelectElement>) => void; id: string }) {
   return (
-    <select css={InfoStyle} onChange={(e) => setLocSelected(e.target.value)}>
+    <select css={InfoStyle} onChange={handleLocationSelected} value={locSelected}>
       <option selected value={id} disabled>
         거주지를 선택해주세요.
       </option>
-      <option value="서울">서울</option>
-      <option value="경기">경기</option>
-      <option value="인천">인천</option>
-      <option value="대구">대구</option>
-      <option value="대전">대전</option>
-      <option value="광주">광주</option>
-      <option value="부산">부산</option>
-      <option value="울산">울산</option>
+      {locationList.map(({ id, value }) => (
+        <option key={id} value={value}>
+          {value}
+        </option>
+      ))}
     </select>
   );
 }
+
+const locationList = [
+  { id: "서울", value: "서울" },
+  { id: "경기", value: "경기" },
+  { id: "인천", value: "인천" },
+  { id: "대구", value: "대구" },
+  { id: "대전", value: "대전" },
+  { id: "광주", value: "광주" },
+  { id: "부산", value: "부산" },
+  { id: "울산", value: "울산" },
+];

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<ProfileImageType> = ({ type, onClick, ref, children, image }) => {
   const src = String(image).includes("/uploads") ? URL + String(image ?? defaultImage) : image ?? defaultImage;
   return (
     <div ref={ref}>
-      <img alt="ProfileImage" css={profileImageStyle({ type })} src={String(src)} onClick={onClick} />
+      <img alt="ProfileImage" aria-hidden="true" css={profileImageStyle({ type })} src={String(src)} onClick={onClick} />
       {children}
     </div>
   );

client/src/Component/Core/InfoImage/InfoImage.hook.tsx

@@ -0,0 +1,56 @@
+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 () => {
+    const targetId = checkPathName ? id : String(gid);
+    const handler = checkPathName ? setUserInfo : 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<Blob>(initBlob);
+  const { image: userImage } = useRecoilValue(userState);
+  const { image: teamImage } = useRecoilValue(teamState);
+  const [profileImage, setProfileImage] = useState<string | ArrayBuffer | null>((checkPathName ? userImage : teamImage) ?? defaultImage);
+
+  const changeImage = (e: React.ChangeEvent<HTMLInputElement>) => {
+    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<HTMLInputElement | null>(null);
+  const handleClickImage = () => (imageRef.current as HTMLInputElement).click();
+  return { imageRef, handleClickImage };
+};

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";
+
+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 (
+    <div css={TeamInfoImageContainerStyle}>
+      <ProfileImage type="Big" image={profileImage} onClick={handleClickImage}>
+        <Button size="Small" onClick={handleImageEdit}>
+          Edit
+        </Button>
+      </ProfileImage>
+      <input ref={imageRef} onChange={changeImage} css={imageInputStyle} type="file" accept="image/*" />
+    </div>
+  );
+};
+
+const TeamInfoImageContainerStyle = css`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const imageInputStyle = css`
+  display: none;
+`;

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";

client/src/Component/Hoc/LoginUserRouter.tsx

@@ -0,0 +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;
+  // }
+  return <>{children}</>;
+};

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";

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<HTMLInputElement>(null);
-  useDropDownCloseEvent(modalRef, () => setInviteModalState(false));
+  useDropDownCloseEvent(modalRef, handleFalseInvite);
 
   return (
     <TeamButtonContainer>
       <div ref={modalRef}>
-        <Button
-          size="Medium"
-          onClick={() => {
-            setInviteModalState((prev) => !prev);
-          }}
-        >
+        <Button size="Medium" onClick={handleToggleInvite}>
           초대하기
         </Button>
-        {inviteModalState && <InviteModal setInviteModalState={setInviteModalState} />}
+        {inviteModalState && <InviteModal handleFalseInvite={handleFalseInvite} />}
       </div>
       <Button size="Medium" onClick={clickUpdateButton}>
         수정하기

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;
@@ -13,12 +13,12 @@ const TeamInfoContainerStyle = css`
   align-items: center;
 `;
 
-type props = { teamNameRef: RefObject<HTMLInputElement>; teamInfoRef: RefObject<HTMLInputElement>; setLocSelected: (value: string) => void };
-export const TeamInfo = ({ teamNameRef, teamInfoRef, setLocSelected }: props) => {
+type props = { locSelected: string; teamNameRef: RefObject<HTMLInputElement>; teamInfoRef: RefObject<HTMLInputElement>; handleLocationSelected: (e: React.ChangeEvent<HTMLSelectElement>) => void };
+export const TeamInfo = (props: props) => {
   return (
     <div css={TeamInfoContainerStyle}>
-      <InfoImageContainer />
-      <TeamInfoContainer setLocSelected={setLocSelected} teamNameRef={teamNameRef} teamInfoRef={teamInfoRef} />
+      <InfoImage />
+      <TeamInfoContainer {...props} />
     </div>
   );
 };

client/src/Component/Organism/Info/TeamInfoContianer.tsx

@@ -11,17 +11,17 @@ const LabelStyle = css`
   width: 90%;
 `;
 
-type props = { teamNameRef: RefObject<HTMLInputElement>; teamInfoRef: RefObject<HTMLInputElement>; setLocSelected: (value: string) => void };
-export const TeamInfoContainer = ({ teamNameRef, teamInfoRef, setLocSelected }: props) => {
-  const { id, info } = useRecoilValue(teamState);
+type props = { locSelected: string; teamNameRef: RefObject<HTMLInputElement>; teamInfoRef: RefObject<HTMLInputElement>; handleLocationSelected: (e: React.ChangeEvent<HTMLSelectElement>) => void };
 
+export const TeamInfoContainer = ({ teamNameRef, teamInfoRef, locSelected, handleLocationSelected }: props) => {
+  const { id, info } = useRecoilValue(teamState);
   return (
     <InfoContainer>
       <InputLabel label="팀명" placeholder={id} refProps={teamNameRef} />
       <InputLabel label="소개" placeholder={info} refProps={teamInfoRef} />
       <div id="location">
         <p css={LabelStyle}>지역</p>
-        <LocationDropDown setLocSelected={setLocSelected} id={id} />
+        <LocationDropDown locSelected={locSelected} handleLocationSelected={handleLocationSelected} id={id} />
       </div>
     </InfoContainer>
   );

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"));