Merge pull request #439 from sparcs-kaist/dev

Main branch update from Dev branch
sparcs-kaist · Jan 18, 2023 · 9806419 · 9806419
2 parents 194418a + 067b029
commit 9806419
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 85 deletions.
diff --git a/src/App.js b/src/App.js
@@ -10,6 +10,7 @@ import AlertProvider from "components/Skeleton/AlertProvider";
 import Skeleton from "components/Skeleton/Skeleton";
 
 import Login from "components/Login/Login";
+import Logout from "components/Login/Logout";
 import Home from "components/Home";
 import Search from "components/Search/Search";
 import AddRoom from "components/AddRoom/AddRoom";
@@ -32,6 +33,7 @@ const App = () => {
           <Skeleton>
             <Switch>
               <Route exact path="/login" component={Login} />
+              <Route exact path="/logout" component={Logout} />
               <Route exact path="/" component={Home} />
               <Route exact path="/home" component={Home} />
               <Route exact path="/search" component={Search} />

diff --git a/src/components/Chatting/Chatting.jsx b/src/components/Chatting/Chatting.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useLayoutEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { useStateWithCallbackLazy } from "use-state-with-callback";
 import { useRecoilValue } from "recoil";
@@ -41,6 +41,19 @@ const Chatting = (props) => {
     [headerInfToken]
   );
 
+  useLayoutEffect(() => {
+    if (!callingInfScroll.current) return;
+
+    callingInfScroll.current = false;
+    let scrollTop = -34; // 34는 ChatDate의 높이
+    const bodyChildren = messagesBody.current.children;
+    for (const children of bodyChildren) {
+      if (children.getAttribute("chatcheckout")) break;
+      scrollTop += children.clientHeight;
+    }
+    messagesBody.current.scrollTop = scrollTop;
+  }, [chats]);
+
   useEffect(() => {
     if (reactiveState !== 3 && prevReactiveState.current === 3) {
       history.replace(`/myroom/${props.roomId}`);
@@ -50,7 +63,7 @@ const Chatting = (props) => {
   }, [reactiveState]);
 
   // scroll event
-  const isTopOnScroll = (tol = 20) => {
+  const isTopOnScroll = (tol = 0) => {
     if (messagesBody.current) {
       const scrollTop = Math.max(messagesBody.current.scrollTop, 0);
       if (scrollTop <= tol) {
@@ -153,19 +166,7 @@ const Chatting = (props) => {
         }
 
         const checkoutChat = { type: "inf-checkout" };
-        setChats(
-          (prevChats) => [...data.chats, checkoutChat, ...prevChats],
-          () => {
-            let scrollTop = 0;
-            const bodyChildren = messagesBody.current.children;
-            for (let i = 0; i < bodyChildren.length; i++) {
-              if (bodyChildren[i].getAttribute("chatcheckout")) break;
-              scrollTop += bodyChildren[i].clientHeight;
-            }
-            messagesBody.current.scrollTop = scrollTop;
-            callingInfScroll.current = false;
-          }
-        );
+        setChats((prevChats) => [...data.chats, checkoutChat, ...prevChats]);
       });
 
       socket.current.emit("chats-join", props.roomId);

diff --git a/src/components/Chatting/MessagesBody/ChatDate.jsx b/src/components/Chatting/MessagesBody/ChatDate.jsx
@@ -12,7 +12,7 @@ const ChatDate = (props) => {
     <div
       style={{
         position: "relative",
-        margin: "16px 12px 6px",
+        padding: "16px 12px 6px",
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",

diff --git a/src/components/Chatting/MessagesBody/ChatInOut.jsx b/src/components/Chatting/MessagesBody/ChatInOut.jsx
@@ -5,19 +5,21 @@ import theme from "styles/theme";
 const ChatInOut = (props) => {
   const endText = props.type === "in" ? "입장하였습니다" : "퇴장하였습니다";
   return (
-    <div
-      style={{
-        margin: "10px auto 0",
-        padding: "4px 8px 3px",
-        ...theme.font10,
-        color: theme.gray_text,
-        background: theme.gray_background,
-        borderRadius: "10px",
-        textAlign: "center",
-        width: "fit-content",
-      }}
-    >
-      {props.users.join(" 님, ")} 님이 {endText}
+    <div style={{ paddingTop: "10px" }}>
+      <div
+        style={{
+          padding: "4px 8px 3px",
+          ...theme.font10,
+          color: theme.gray_text,
+          background: theme.gray_background,
+          borderRadius: "10px",
+          textAlign: "center",
+          width: "fit-content",
+          margin: "auto",
+        }}
+      >
+        {props.users.join(" 님, ")} 님이 {endText}
+      </div>
     </div>
   );
 };

diff --git a/src/components/Chatting/MessagesBody/MessagesBody.jsx b/src/components/Chatting/MessagesBody/MessagesBody.jsx
@@ -124,7 +124,7 @@ const MessagesBody = (props) => {
   };
 
   return (
-    <div style={{ overflow: "auto", height: "100%" }}>
+    <div style={{ overflow: "auto" }}>
       <div
         className="chatting-body"
         style={{

diff --git a/src/components/Home/InfoSection.tsx b/src/components/Home/InfoSection.tsx
@@ -104,24 +104,24 @@ const InfoSection = () => {
             <div
               style={{ marginTop: "32px", display: "flex", columnGap: "10px" }}
             >
-              <Link to="/search" style={{ textDecoration: "none" }}>
+              <Link to="/addroom" style={{ textDecoration: "none" }}>
                 <Button
                   type="purple"
                   padding="12px 20px 11px"
                   radius={8}
                   font={theme.font16_bold}
                 >
-                  방 검색하기
+                  방 개설하기
                 </Button>
               </Link>
-              <Link to="/addroom" style={{ textDecoration: "none" }}>
+              <Link to="/search" style={{ textDecoration: "none" }}>
                 <Button
                   type="white"
                   padding="12px 20px 11px"
                   radius={8}
                   font={theme.font16_bold}
                 >
-                  방 개설하기
+                  방 검색하기
                 </Button>
               </Link>
             </div>

diff --git a/src/components/Login/Logout.tsx b/src/components/Login/Logout.tsx
@@ -0,0 +1,27 @@
+import React, { useState, useRef, useEffect } from "react";
+import useTaxiAPI from "hooks/useTaxiAPI";
+import { useHistory } from "react-router";
+
+const Logout = () => {
+  const [error, response, isLoading] = useTaxiAPI.get("/auth/logout");
+  const history = useHistory();
+
+  useEffect(() => {
+    if (error) {
+      /**
+       * @todo @fixme
+       * 로그아웃 에러 처리 어떻게 할지 고민하기
+       */
+    } else if (!isLoading && response) {
+      /**
+       * @todo @fixme
+       * 글로벌 변수 초기화 필요
+       */
+      history.replace("/login");
+    }
+  }, [error, response, isLoading]);
+
+  return null;
+};
+
+export default Logout;
diff --git a/src/components/Mypage/Mypage.jsx b/src/components/Mypage/Mypage.jsx
@@ -27,14 +27,7 @@ const Mypage = () => {
   const history = useHistory();
   const setAlert = useSetRecoilState(alertAtom);
 
-  const handleLogout = async () => {
-    const response = await axios.get("/auth/logout");
-    if (response.status === 200) {
-      history.push("/login");
-    } else {
-      setAlert("로그아웃에 실패했습니다.");
-    }
-  };
+  const handleLogout = () => history.push("/logout");
   const handleUpdate = () => setProfToken(Date.now().toString());
   const handleTranslation = () =>
     i18n.changeLanguage(i18n.language === "ko" ? "en" : "ko");

diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx
@@ -146,7 +146,7 @@ const Skeleton = (props: SkeletonProps) => {
       </Container>
     );
   }
-  if (pathname.startsWith("/login")) {
+  if (pathname.startsWith("/login") || pathname.startsWith("/logout")) {
     return <Container>{props.children}</Container>;
   }
   if (taxiLocation.length === 0 || loginInfoDetail === null) {

diff --git a/src/components/common/roomOptions/Date.tsx b/src/components/common/roomOptions/Date.tsx
@@ -9,7 +9,7 @@ type DateProps = {
 
 const Date = (props: DateProps) => {
   return (
-    <WhiteContainer padding="10px 15px 9px">
+    <WhiteContainer padding="10px 15px">
       <DatePicker
         selectedDate={props.value}
         handler={(x: number, y: number, z: number) => props.handler([x, y, z])}

diff --git a/src/components/common/roomOptions/DatePicker.jsx b/src/components/common/roomOptions/DatePicker.jsx
@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import theme from "styles/theme";
 import DottedLine from "components/common/DottedLine";
 import MiniCircle from "components/common/MiniCircle";
-import isMobile from "tools/isMobile";
 
 import TodayRoundedIcon from "@material-ui/icons/TodayRounded";
 import UnfoldMoreRoundedIcon from "@mui/icons-material/UnfoldMoreRounded";
@@ -51,6 +50,7 @@ const Date = (props) => {
 
   const style = {
     width: "calc((100% - 36px) / 7)",
+    aspectRatio: "1 / 1",
     height: "100%",
   };
   const styleBox = {
@@ -149,19 +149,18 @@ class DatePicker extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      showNext: false,
       isOpen: true,
-      weekHeight: 46,
+      // maxHeight: undefined,
     };
 
     this.pickerRef = React.createRef(null);
     this.clicked = false;
-    this.weekLength = 3;
 
     this.dateHandler = this.dateHandler.bind(this);
-    this.handleClickOutside = this.handleClickOutside.bind(this);
-    this.resizeEvent = this.resizeEvent.bind(this);
+    this.onClickOutside = this.onClickOutside.bind(this);
     this.onClickTop = this.onClickTop.bind(this);
+    this.onOpen = this.onOpen.bind(this);
+    this.onClose = this.onClose.bind(this);
 
     this.week = [
       { color: theme.red_text, text: "일" },
@@ -197,6 +196,7 @@ class DatePicker extends Component {
       display: "flex",
       flexDirection: "column",
       rowGap: "6px",
+      marginBottom: "5px",
     };
     this.styleDay = {
       display: "flex",
@@ -220,22 +220,36 @@ class DatePicker extends Component {
     this.props.handler(year, month, date);
   }
 
-  handleClickOutside(event) {
-    if (this.clicked && !this.pickerRef?.current.contains(event.target))
-      this.setState({ isOpen: false });
+  handleMaxHeight(event, callback) {
+    event.stopPropagation();
+    const monthHeight =
+      document.getElementsByClassName("month")[0]?.clientHeight ?? 0;
+    this.setState({ maxHeight: 24 + 10 + 1 + 32 + monthHeight + 5 }, callback);
   }
 
-  resizeEvent() {
-    const dateWidth =
-      (Math.min(360, this.pickerRef.current.clientWidth - 30) - 36) / 7;
-    this.setState({ weekHeight: dateWidth });
+  onOpen(event) {
+    this.handleMaxHeight(event, () =>
+      this.setState({ isOpen: true }, () => {
+        setTimeout(() => this.setState({ maxHeight: undefined }), 300);
+      })
+    );
   }
 
-  onClickTop() {
-    if (!this.state.isOpen) {
-      this.clicked = false;
-      this.setState({ isOpen: true });
-    }
+  onClose(event) {
+    this.handleMaxHeight(event, () =>
+      setTimeout(() => this.setState({ isOpen: false }), 0)
+    );
+  }
+
+  onClickTop(event) {
+    if (this.state.isOpen) return;
+    this.clicked = false;
+    this.onOpen(event);
+  }
+
+  onClickOutside(event) {
+    if (this.clicked && !this.pickerRef?.current.contains(event.target))
+      this.onClose(event);
   }
 
   render() {
@@ -247,32 +261,28 @@ class DatePicker extends Component {
         className="datepicker"
         ref={this.pickerRef}
         style={{
-          transition: "height 0.3s ease-in-out",
+          transition: "max-height 0.3s ease-in-out",
           margin: "-10px -15px",
           padding: "10px 15px",
-          height:
-            24 +
-            (this.state.isOpen
-              ? 10 + 1 + 32 + (this.state.weekHeight + 6) * this.weekLength
-              : 0),
+          maxHeight: this.state.isOpen ? this.state.maxHeight : 24,
           cursor: !this.state.isOpen ? "pointer" : undefined,
         }}
         onClick={this.onClickTop}
       >
-        <div style={this.styleTop} onClick={this.onClickTop}>
+        <div style={this.styleTop}>
           <div style={this.styleInfo}>
             <TodayRoundedIcon style={this.styleIcon} />
             날짜 : {selectedYear}년 {selectedMonth}월 {selectedDate}일
           </div>
           {this.state.isOpen ? (
             <UnfoldLessRoundedIcon
               style={this.styleArrow}
-              onClick={() => this.setState({ isOpen: false })}
+              onClick={this.onClose}
             />
           ) : (
             <UnfoldMoreRoundedIcon
               style={this.styleArrow}
-              onClick={() => this.setState({ isOpen: true })}
+              onClick={this.onOpen}
             />
           )}
         </div>
@@ -291,16 +301,10 @@ class DatePicker extends Component {
             </div>
           ))}
         </div>
-        <div style={this.styleMonth}>
+        <div className="month" style={this.styleMonth}>
           {dateInfo.map((item, index) => {
             return (
-              <div
-                key={index}
-                style={{
-                  ...this.styleWeek,
-                  height: this.state.weekHeight,
-                }}
-              >
+              <div key={index} style={this.styleWeek}>
                 {item.map((item, index) => (
                   <Date
                     key={index}
@@ -321,14 +325,10 @@ class DatePicker extends Component {
     );
   }
   componentDidMount() {
-    this.weekLength = getCalendarDates().length;
-    this.resizeEvent();
-    window.addEventListener("resize", this.resizeEvent);
-    document.addEventListener("mouseup", this.handleClickOutside);
+    document.addEventListener("mouseup", this.onClickOutside);
   }
   componentWillUnmount() {
-    window.removeEventListener("resize", this.resizeEvent);
-    document.removeEventListener("mouseup", this.handleClickOutside);
+    document.removeEventListener("mouseup", this.onClickOutside);
   }
 }