Merge pull request #235 from boostcampwm-2022/refactor/frontend-refac…

…toring

chat-server/src/socket.service.ts

@@ -30,8 +30,8 @@ export class SocketService {
   async getRecentMessage(recruitId: number) {
     const response = await this.chatModel
       .find({ recruitId })
-      .sort({ createdAt: -1 });
-    // .limit(10);
+      .sort({ createdAt: -1 })
+      .limit(10);
     return response.reverse();
   }
 

client/src/assets/icons/index.ts

@@ -6,8 +6,6 @@ import MORE_BUTTON_ICON from "./more_button.svg";
 import ZOOM_IN_ICON from "./zoom_in_icon.svg";
 import ZOOM_OUT_ICON from "./zoom_out_icon.svg";
 import SEARCH_ICON from "./search_icon.svg";
-import LOCK_ICON from "./lock_icon.svg";
-import UNLOCK_ICON from "./unlock_icon.svg";
 import UNDO_ICON from "./undo_icon.svg";
 import RULER_ICON from "./ruler_icon.svg";
 import LOCATION_ICON from "./location_icon.svg";
@@ -19,6 +17,8 @@ import START_ICON from "./start_icon.svg";
 import ARRIVE_ICON from "./arrive_icon.svg";
 import MY_POSITION_ICON from "./my_position_icon.svg";
 import SEND_ICON from "./send_icon.svg";
+import STRAIGHT_ICON from "./straight_icon.svg";
+import CURVE_ICON from "./curve_icon.svg";
 
 export {
     USER_CIRCLE_ICON,
@@ -28,8 +28,6 @@ export {
     MORE_BUTTON_ICON,
     ZOOM_IN_ICON,
     ZOOM_OUT_ICON,
-    LOCK_ICON,
-    UNLOCK_ICON,
     UNDO_ICON,
     RULER_ICON,
     LOCATION_ICON,
@@ -42,4 +40,6 @@ export {
     ARRIVE_ICON,
     MY_POSITION_ICON,
     SEND_ICON,
+    STRAIGHT_ICON,
+    CURVE_ICON,
 };

client/src/components/Chat/Chat.tsx

@@ -32,6 +32,9 @@ const Chat = () => {
         socket.on(SOCKET_EVENT.SERVER_SENT_RECENT, setChatList);
         socket.on(SOCKET_EVENT.SERVER_SENT, (data) => setChatList((prev) => [...prev, data]));
         socketRef.current = socket;
+        () => {
+            socket.disconnect();
+        };
     }, [userId]);
 
     const sendMessage = useCallback(

client/src/components/Chat/ChatItem/ChatItem.tsx

@@ -54,11 +54,7 @@ const ChatItem = ({ data }: ChatItemProps) => {
                 {userId !== data.sender && <span>{data.sender}</span>}
                 <span>{data.content}</span>
             </ContentWrapper>
-            <span>
-                {timeDifference(
-                    new Date(new Date(data.createdAt).getTime() + new Date().getTimezoneOffset() * 60000).toISOString(),
-                )}
-            </span>
+            <span>{timeDifference(new Date(new Date(data.createdAt).getTime()).toString())}</span>
         </ChatItemContainer>
     );
 };

client/src/components/CreateRecruitForm/CreateRecruitForm.tsx

@@ -17,6 +17,7 @@ import { FC, useState } from "react";
 import styled from "styled-components";
 import { COLOR } from "styles/color";
 import { flexRow } from "styles/flex";
+import useAuth from "#hooks/useAuth";
 
 const Buttons = styled.div`
     ${flexRow({ justifyContent: JUSTIFY_CONTENT.SPACE_AROUND })}
@@ -30,6 +31,7 @@ interface CreateRecruitModalProps {
 }
 
 const CreateRecruitModal = ({ courseId, toggleVisible, children }: CreateRecruitModalProps) => {
+    useAuth();
     const [title, onChangeTitle, titleError] = useInput(recruitTitleValidator);
     const { pace, onChangeMinute, onChangeSecond } = usePaceInput();
     const { startTime, onChangeStartTime } = useStartTimeInput();

client/src/components/Layout/Layout.styles.ts

@@ -5,7 +5,7 @@ import { flexColumn, flexRowCenter } from "styles/flex";
 export const Container = styled.div`
     background-image: linear-gradient(90deg, #a1c4fd 10%, #c2e9fb 90%);
     > div:first-child {
-        ${flexColumn}
+        ${flexColumn};
         justify-content: center;
         height: 100%;
         margin-right: 10rem;
@@ -18,6 +18,8 @@ export const Container = styled.div`
             margin-bottom: 1rem;
         }
         @media screen and (min-width: 960px) {
+            width: 500px;
+            min-width: 500px;
             display: flex;
         }
         @media screen and (max-width: 960px) {

client/src/components/LoginForm/LoginForm.tsx

@@ -24,7 +24,7 @@ const LoginForm = () => {
         try {
             const response: any = await post("/auth/login", { userId, password });
             login(response.data);
-            navigate("/");
+            navigate(-1);
         } catch (error: any) {
             alert(error.message);
         }

client/src/components/Map/WriteMap/WriteMap.tsx

@@ -1,4 +1,4 @@
-import LockButton from "#components/MapControl/LockButton/LockButton";
+import DrawButton from "#components/MapControl/DrawButton/DrawButton";
 import MapTypeControl from "#components/MapControl/MapTypeControl/MapTypeControl";
 import MyPositionButton from "#components/MapControl/MyPositionButton/MyPositionButton";
 import PlaceSearch from "#components/MapControl/PlaceSearch/PlaceSearch";
@@ -105,7 +105,7 @@ const WriteMap = ({ path, setPath, setPathLength }: WriteMapProps) => {
             <div ref={container} style={{ width: "100%", height: "100%" }} />
             <ZoomControl onClickZoomIn={zoomIn} onClickZoomOut={zoomOut} />
             <UndoButton onClick={onClickUndo} />
-            <LockButton isLocked={!isMapDraggable} onClick={onClickLock} />
+            <DrawButton isLocked={!isMapDraggable} onClick={onClickLock} />
             <PlaceSearch setCenter={setCenter} getCenter={getCenter} />
             <MapTypeControl onClickRoadMap={onClickRoadMap} onClickSkyView={onClickSkyView} mapType={mapType} />
             <MyPositionButton onClick={onClickMyPositionButton} />

client/src/components/MapControl/DrawButton/DrawButton.stories.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import DrawButton from "./DrawButton";
+
+export default {
+    title: "MapControl/DrawButton",
+    component: DrawButton,
+} as ComponentMeta<typeof DrawButton>;
+
+export const _DrawButton: ComponentStory<typeof DrawButton> = (args) => <DrawButton {...args} />;
+_DrawButton.args = {
+    position: { top: "96px", right: "14px" },
+};

client/src/components/MapControl/LockButton/LockButton.tsx → client/src/components/MapControl/DrawButton/DrawButton.tsx

@@ -1,15 +1,15 @@
-import { LOCK_ICON, UNLOCK_ICON } from "#assets/icons";
+import { STRAIGHT_ICON, CURVE_ICON } from "#assets/icons";
 import { MapControlProps } from "#types/MapControlProps";
 import { MapButton } from "../MapControl.styles";
-interface LockButtonProps extends MapControlProps {
+interface DrawButtonProps extends MapControlProps {
     isLocked: boolean;
     onClick: () => void;
 }
-const LockButton = ({ isLocked, onClick, position = { top: "96px", right: "14px" } }: LockButtonProps) => {
+const DrawButton = ({ isLocked, onClick, position = { top: "96px", right: "14px" } }: DrawButtonProps) => {
     return (
         <MapButton onClick={onClick} position={position}>
-            <img width="14" height="14" alt="LOCK_ICON" src={isLocked ? LOCK_ICON : UNLOCK_ICON} />
+            <img width="14" height="14" alt="LOCK_ICON" src={isLocked ? CURVE_ICON : STRAIGHT_ICON} />
         </MapButton>
     );
 };
-export default LockButton;
+export default DrawButton;

client/src/components/PlusButton/PlusButton.tsx

@@ -1,25 +1,25 @@
 import { PLUS_BUTTON_ICON } from "#assets/icons";
-import { userState } from "#atoms/userState";
 import { useNavigate } from "react-router-dom";
-import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
 const Button = styled.img`
     width: 56px;
     height: 56px;
     position: fixed;
-    right: 12px;
+    right: calc((100vw - 390px) / 2 + 12px);
     bottom: 12px;
     z-index: 2;
+    @media screen and (min-width: 960px) {
+        right: calc((100vw - 990px) / 2 + 12px);
+    }
 `;
 
 interface PlusButtonProps {
     to: string;
 }
+
 const PlusButton = ({ to }: PlusButtonProps) => {
     const navigate = useNavigate();
-    const user = useRecoilValue(userState);
-    if (!user.accessToken) return <></>;
     return <Button src={PLUS_BUTTON_ICON} onClick={() => navigate(to)} />;
 };
 

client/src/components/RecruitDetailModal/RecruitDetailModal.tsx

@@ -1,4 +1,5 @@
 import ConfirmModal from "#components/ConfirmModal/ConfirmModal";
+import useAuth from "#hooks/useAuth";
 import { RecruitDetail } from "#types/RecruitDetail";
 import { Dispatch, SetStateAction, useCallback } from "react";
 import useDeleteJoinMutation from "../../hooks/queries/useDeleteJoinMutation";
@@ -16,6 +17,7 @@ interface RecruitConfirmModalProps {
 }
 
 const RecruitConfirmModal = ({ id, toggleModal, data }: RecruitConfirmModalProps) => {
+    useAuth();
     const { mutate: deleteJoin } = useDeleteJoinMutation(Number(id));
     const { mutate: deleteRecruit } = useDeleteRecruitMutation(Number(id));
     const { mutate: join } = useJoinMutation(Number(id));

client/src/components/commons/ChatButton/ChatButton.tsx

@@ -6,7 +6,7 @@ const ChatButton = () => {
     const { id } = useParams();
     const navigate = useNavigate();
     return (
-        <Button backgroundColor={COLOR.ORANGE} onClick={() => navigate(`/recruit/${id}/chat`)}>
+        <Button backgroundColor={COLOR.CHAT_BUTTON} onClick={() => navigate(`/recruit/${id}/chat`)}>
             채팅
         </Button>
     );

client/src/constants/time.ts

@@ -16,5 +16,5 @@ export const MILLISECONDS_TO_HOURS = (time: number) => {
 };
 
 export const MILLISECONDS_TO_MINUTES = (time: number) => {
-    return Math.floor(time / TIME.HOUR_IN_MILLISECONDS);
+    return Math.floor(time / TIME.MINUTE_IN_MILLISECONDS);
 };

client/src/hooks/useAuth.ts

@@ -3,14 +3,17 @@ import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 
-const useAuth = () => {
+const useAuth = (withAuth = true) => {
     const userInfo = useRecoilValue(userState);
     const navigate = useNavigate();
     useEffect(() => {
-        if (!userInfo.accessToken) {
+        if (withAuth && !userInfo.accessToken) {
             alert("로그인이 필요한 페이지입니다");
             navigate("/login");
         }
+        if (!withAuth && userInfo.accessToken) {
+            navigate(-1);
+        }
     }, []);
     return userInfo;
 };

client/src/hooks/useDrawCurve.ts

@@ -1,17 +1,19 @@
 import { throttle } from "#utils/timerUtils";
 import { Dispatch, MutableRefObject, RefObject, useCallback } from "react";
+
 interface UseDrawCruveProps {
     container: RefObject<HTMLDivElement>;
     map: MutableRefObject<kakao.maps.Map | undefined>;
     setPath: Dispatch<React.SetStateAction<(kakao.maps.LatLng | kakao.maps.LatLng[])[]>>;
 }
+
 const useDrawCurve = ({ container, map, setPath }: UseDrawCruveProps) => {
     const coordsFromContainerPoint = useCallback(
         ({ map, x, y }: { map: kakao.maps.Map; x: number; y: number }) => {
-            const point = new kakao.maps.Point(x, y - 57);
+            const point = new kakao.maps.Point(x - (container.current?.getBoundingClientRect().x || 0), y - 57);
             return map.getProjection().coordsFromContainerPoint(point);
         },
-        [map],
+        [map, container.current],
     );
 
     const touchMoveEventHandler = useCallback(() => {

client/src/pages/Chat/ChatPage.tsx

@@ -1,7 +1,9 @@
 import Chat from "#components/Chat/Chat";
 import Header from "#components/Header/Header";
+import useAuth from "#hooks/useAuth";
 
 const ChatPage = () => {
+    useAuth();
     return (
         <>
             <Header text="채팅" />

client/src/pages/Login/Login.tsx

@@ -1,10 +1,11 @@
-import React from "react";
 import Header from "#components/Header/Header";
 import { LogoWrapper } from "./Login.styles";
 import Navigator from "#components/Navigator/Navigator";
 import LoginForm from "#components/LoginForm/LoginForm";
+import useAuth from "#hooks/useAuth";
 
 const Login = () => {
+    useAuth(false);
     return (
         <>
             <Header text="로그인" />