[Feat/requestlist] Pair-Programming

client/src/App.tsx

@@ -1,13 +1,40 @@
-import React from "react";
+/* eslint-disable spaced-comment */
+/* eslint-disable no-console */
+import React, { useEffect } from "react";
 import { Global } from "@emotion/react";
 import { Redirect, Route, Switch } from "react-router";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 import reset from "./util/reset";
 import MainPage from "./Page/MainPage";
 import Page from "./Page/Page";
 import Footer from "./Molecules/Footer";
 import ChatRoom from "./Page/ChatRoom";
+import { fetchGet } from "./Recoil/Selector";
+// import { joinChatRoomState, requestState, userState } from "./Recoil/Atom";
+import { userState } from "./Recoil/Atom";
 
 function App() {
+  const url = `${process.env.REACT_APP_GET_USER_INFO_API_URL}`;
+
+  const userInfo = useRecoilValue(fetchGet({ url, query: "" }));
+  // const requestInfo = useRecoilValue(fetchGet({ url: "api/core/request", query: `?uid=${userInfo.uid}` }));
+  // const joinChatInfo = useRecoilValue(fetchGet({ url: "/api/core/joinChatInfo", query: `?uid=${userInfo.uid}` }));
+
+  const setUserInfo = useSetRecoilState(userState);
+  // const setRequestInfo = useSetRecoilState(requestState);
+  // const setJoinChatInfo = useSetRecoilState(joinChatRoomState);
+
+  const getInitData = async () => {
+    setUserInfo(userInfo);
+    // setRequestInfo(requestInfo);
+    // setJoinChatInfo(joinChatInfo);
+  };
+
+  useEffect(() => {
+    if (userInfo.uid === "") return;
+    getInitData();
+  }, [userInfo]);
+
   return (
     <>
       <Global styles={reset} />

client/src/Atom/Button.tsx

@@ -74,10 +74,6 @@ export const Button = styled.div`
   cursor: pointer;
   background-color: #fff;
 
-  & + & {
-    border-top: none;
-  }
-
   &:hover {
     background-color: #ffcfcf;
     color: #ffffff;

client/src/Molecules/DropDown.tsx

@@ -60,8 +60,9 @@ const ChatDropDownStyle = css`
 `;
 const MeetingDropDownStyle = css`
   position: absolute;
-  margin-left: 150px;
-  margin-bottom: 150px;
+  margin-left: 250px;
+  margin-top: 80px;
+  ${BasicDropDownStyle}
 `;
 
 const DropDownStyle = (props: { type: string; className: string }) => css`
@@ -83,15 +84,13 @@ const DropDownContainer = styled.div`
 `;
 
 export default function DropDown(props: DropDownType) {
-  const { type, className } = props;
+  const { type, className, onClick } = props;
 
   const list = MENU_LIST[type];
 
   return (
     <DropDownContainer type={type} className={className}>
-      {list.map((menu) => (
-        <LinkButton url={menu.link} type="LargeDropDown" content={menu.name} />
-      ))}
+      {list.map((menu) => (menu.name === "미팅 하러가기" ? <LinkButton url={menu.link} type="LargeDropDown" content={menu.name} onClick={onClick} /> : <LinkButton url={menu.link} type="LargeDropDown" content={menu.name} />))}
     </DropDownContainer>
   );
 }

client/src/Molecules/MainBodyLeftButtonContainer.tsx

@@ -20,6 +20,7 @@ function MainBodyLeftButtonContainer() {
     { link: "/sub/CowDogPage?person=1", name: "1:1 소개팅" },
     { link: "/sub/CowDogPage?person=2", name: "2:2 미팅" },
     { link: "/sub/CowDogPage?person=3", name: "3:3 미팅" },
+    { link: "/sub/CowDogPage?person=4", name: "4:4 미팅" },
     { link: "/sub/teamSetting", name: "팀 설정" },
   ];
 

client/src/Molecules/MainHeaderCenter.tsx

@@ -6,8 +6,8 @@ import MainHeaderLogo from "../Atom/MainHeaderLogo";
 const mainHeaderCenterStyle = css`
   position: relative;
   width: 210px;
-  justify-content: center;
-  top: 50%;
+  margin: 0 auto;
+  top: 30%;
 `;
 
 function MainHeaderCenter() {

client/src/Molecules/MainHeaderRightSide.tsx

@@ -2,11 +2,24 @@
 
 import { css } from "@emotion/react";
 import React, { useRef, useState } from "react";
+import { useRecoilValue } from "recoil";
 import UserIcon from "../Atom/UserIcon";
 import useDropDownEvent from "../Hook/useDropDownEvent";
+import { userState } from "../Recoil/Atom";
 import DropDown from "./DropDown";
+import LinkButton from "./LinkButton";
 
+const MainHeaderRightContainer = css`
+  margin-top: 50px;
+  margin-right: 80px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`;
 function MainHeaderRightSide() {
+  const userInfo = useRecoilValue(userState);
+  const { id } = userInfo;
+
   const [userOpen, setUser] = useState(false);
   const ToggleUserModal = () => {
     setUser((isOpen) => !isOpen);
@@ -16,16 +29,18 @@ function MainHeaderRightSide() {
 
   useDropDownEvent(userRef, () => setUser(false));
   return (
-    <div
-      css={css`
-        margin-top: 50px;
-        margin-right: 80px;
-      `}
-      ref={userRef}
-    >
-      <UserIcon onClick={() => ToggleUserModal()} />
-      <DropDown type="User" className={userOpen ? "show" : "hide"} />
-    </div>
+    <>
+      <div css={MainHeaderRightContainer}>
+        {id === "" ? (
+          <LinkButton url="/sub/login" type="Small" content="로그인" />
+        ) : (
+          <div ref={userRef}>
+            <UserIcon onClick={() => ToggleUserModal()} />
+            <DropDown type="User" className={userOpen ? "show" : "hide"} />
+          </div>
+        )}
+      </div>
+    </>
   );
 }
 

client/src/Organism/Header.tsx

@@ -2,11 +2,14 @@
 import { css } from "@emotion/react";
 import { useRef, useState } from "react";
 import { Link } from "react-router-dom";
+import { useRecoilValue } from "recoil";
 import MainHeaderLogo from "../Atom/MainHeaderLogo";
 import Menu from "../Atom/Menu";
 import UserIcon from "../Atom/UserIcon";
 import useDropDownEvent from "../Hook/useDropDownEvent";
 import DropDown from "../Molecules/DropDown";
+import LinkButton from "../Molecules/LinkButton";
+import { userState } from "../Recoil/Atom";
 
 const HeaderStyle = css`
   display: flex;
@@ -26,15 +29,26 @@ const HeaderStyle = css`
 export default function Header() {
   const [menuOpen, setMenuOpen] = useState(false);
   const [userOpen, setUserOpen] = useState(false);
+  const [meetingOpen, setMeetingOpen] = useState(false);
+
+  const userInfo = useRecoilValue(userState);
+  const { id } = userInfo;
 
   const menuRef = useRef<HTMLDivElement>(null);
   const userRef = useRef<HTMLDivElement>(null);
 
-  useDropDownEvent(menuRef, () => setMenuOpen(false));
+  useDropDownEvent(menuRef, () => {
+    setMenuOpen(false);
+    setMeetingOpen(false);
+  });
   useDropDownEvent(userRef, () => setUserOpen(false));
 
   const ToggleMenuModal = () => {
     setMenuOpen((isOpen) => !isOpen);
+    setMeetingOpen(false);
+  };
+  const ToggleMeetingModal = () => {
+    setMeetingOpen((isOpen) => !isOpen);
   };
   const ToggleUserModal = () => {
     setUserOpen((isOpen) => !isOpen);
@@ -44,15 +58,20 @@ export default function Header() {
     <div css={HeaderStyle} id="header">
       <div ref={menuRef}>
         <Menu onClick={() => ToggleMenuModal()} />
-        <DropDown type="Menu" className={menuOpen ? "show" : "hide"} />
+        <DropDown type="Menu" className={menuOpen ? "show" : "hide"} onClick={() => ToggleMeetingModal()} />
+        <DropDown type="Meeting" className={meetingOpen ? "show" : "hide"} />
       </div>
       <Link to="/main">
         <MainHeaderLogo />
       </Link>
-      <div ref={userRef}>
-        <UserIcon onClick={() => ToggleUserModal()} />
-        <DropDown type="User" className={userOpen ? "show" : "hide"} />
-      </div>
+      {id === "" ? (
+        <LinkButton url="/sub/login" type="Small" content="로그인" />
+      ) : (
+        <div ref={userRef}>
+          <UserIcon onClick={() => ToggleUserModal()} />
+          <DropDown type="User" className={userOpen ? "show" : "hide"} />
+        </div>
+      )}
     </div>
   );
 }

client/src/Organism/MainHeader.tsx

@@ -4,9 +4,9 @@ import { css } from "@emotion/react";
 import MainHeaderCenter from "../Molecules/MainHeaderCenter";
 import MainHeaderRightSide from "../Molecules/MainHeaderRightSide";
 
+// display: flex;
+// justify-content: space-between;
 const mainHeaderStyle = css`
-  display: flex;
-  justify-content: space-between;
   width: 100vw;
   height: 30vh;
   .hide {
@@ -19,9 +19,8 @@ const mainHeaderStyle = css`
 function MainHeader() {
   return (
     <div css={mainHeaderStyle}>
-      <div />
-      <MainHeaderCenter />
       <MainHeaderRightSide />
+      <MainHeaderCenter />
     </div>
   );
 }

client/src/Organism/MyInfoContainer.tsx

@@ -1,8 +1,11 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
+import { useRef } from "react";
+import { useRecoilState } from "recoil";
 import { Button } from "../Atom/Button";
 import { Input } from "../Atom/Input";
-// import TeamInfoImageContainer from "./TeamInfoImageContainer";
+import { userState } from "../Recoil/Atom";
+import { changeMyInfo } from "../util";
 
 const MyInfoContainerStyle = css`
   width: 350px;
@@ -27,27 +30,53 @@ const MyInfoContainerStyle = css`
   }
 `;
 export default function MyInfoContainer() {
+  const [myInfo, setMyInfo] = useRecoilState(userState);
+
+  const { id, location, age, info } = myInfo;
+  const idInputRef = useRef<HTMLInputElement>(null);
+  const ageInputRef = useRef<HTMLInputElement>(null);
+  const locationInputRef = useRef<HTMLInputElement>(null);
+  const infoInputRef = useRef<HTMLInputElement>(null);
+
+  // 복붙
+
+  const handleChangeMyInfo = async () => {
+    if (!idInputRef.current || !ageInputRef.current || !locationInputRef.current || !infoInputRef.current) return;
+
+    const data = await changeMyInfo({ id: idInputRef.current.value, location: locationInputRef.current.value, age: Number(ageInputRef.current.value), info: infoInputRef.current.value });
+
+    if (data) {
+      setMyInfo({
+        ...myInfo,
+        id: idInputRef.current.value,
+        location: locationInputRef.current.value,
+        age: Number(ageInputRef.current.value),
+        info: infoInputRef.current.value,
+      });
+    } else {
+      console.log("myInfo 수정 실패");
+    }
+  };
   return (
     <>
       <div css={MyInfoContainerStyle}>
         <div className="myinfo-header">
           <span>내 프로필</span>
-          <Button type="medium">edit</Button>
+          <Button type="medium" onClick={handleChangeMyInfo}>
+            edit
+          </Button>
         </div>
         <div className="myinfo">
           <span>이름</span>
-          <Input placeholder="ID" autoComplete="off" />
+          <Input placeholder={id} autoComplete="off" ref={idInputRef} />
           <span>나이</span>
-          <Input placeholder="age" autoComplete="off" />
+          <Input placeholder={String(age)} autoComplete="off" ref={ageInputRef} />
           <span>주소</span>
-          <Input placeholder="address" autoComplete="off" />
-          <span>이메일</span>
-          <Input placeholder="e-mail" autoComplete="off" />
+          <Input placeholder={location} autoComplete="off" ref={locationInputRef} />
           <span>소개</span>
-          <Input placeholder="소개" autoComplete="off" />
+          <Input placeholder={info} autoComplete="off" ref={infoInputRef} />
         </div>
       </div>
-      {/* <TeamInfoImageContainer image={teamImage} /> */}
     </>
   );
 }