Merge pull request #172 from boostcampwm-2021/dev

NogariHouse Release v1.0.4

Author: iHoHyeon

client/src/assets/styles/global-styles.ts

@@ -36,6 +36,11 @@ const GlobalStyle = createGlobalStyle`
     overflow: hidden;
   }
 
+  a {
+    text-decoration: none;
+    color: black;
+  }
+
   #root {
     position: relative;
     height: 100vh;

client/src/components/common/default-button/index.tsx

@@ -2,26 +2,24 @@ import React from 'react';
 
 import { CustomDefaultButton, DefaultButtonProps } from './style';
 
-function DefaultButton({
+const DefaultButton = React.memo(({
   buttonType,
   children,
   size,
   isDisabled,
   onClick,
   font,
-}: DefaultButtonProps) {
-  return (
-    <CustomDefaultButton
-      type="button"
-      buttonType={buttonType}
-      size={size}
-      disabled={isDisabled}
-      onClick={onClick}
-      font={font}
-    >
-      {children}
-    </CustomDefaultButton>
-  );
-}
+}: DefaultButtonProps) => (
+  <CustomDefaultButton
+    type="button"
+    buttonType={buttonType}
+    size={size}
+    disabled={isDisabled}
+    onClick={onClick}
+    font={font}
+  >
+    {children}
+  </CustomDefaultButton>
+));
 
 export default DefaultButton;

client/src/components/event/card-list/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import EventCard from '@components/event/card';
@@ -34,6 +34,6 @@ export const makeEventToCard = (event: EventCardProps) => (
   />
 );
 
-export default function EventCardList({ eventList, setEventModal }: { eventList: EventCardProps[], setEventModal: ((e: MouseEvent) => void) }) {
-  return <EventDiv onClick={setEventModal}>{eventList.map(makeEventToCard)}</EventDiv>;
+export default function EventCardList({ eventList }: { eventList: EventCardProps[] }) {
+  return <EventDiv>{eventList.map(makeEventToCard)}</EventDiv>;
 }

client/src/components/event/index.tsx

@@ -6,7 +6,6 @@ import LoadingSpinner from '@styles/loading-spinner';
 import EventCardList from '@components/event/card-list';
 import useFetchItems from '@hooks/useFetchItems';
 import useItemFecthObserver from '@hooks/useItemFetchObserver';
-import useSetEventModal from '@hooks/useSetEventModal';
 import ObserverBlock from './style';
 
 interface EventUser {
@@ -28,7 +27,6 @@ function EventView() {
   const [loading, setLoading] = useState(true);
   const nowFetching = useRecoilValue(nowFetchingState);
   const [targetRef] = useItemFecthObserver(loading);
-  const setEventModal = useSetEventModal();
 
   useEffect(() => {
     if (nowItemList && nowItemType === 'event') {
@@ -42,7 +40,7 @@ function EventView() {
 
   return (
     <>
-      <EventCardList setEventModal={setEventModal} eventList={nowItemList} />
+      <EventCardList eventList={nowItemList} />
       <ObserverBlock ref={targetRef}>
         {nowFetching && <LoadingSpinner />}
       </ObserverBlock>

client/src/components/event/register-modal/style.ts

@@ -4,16 +4,16 @@ import { ModalBox } from '@styles/modal';
 
 export const CustomEventRegisterModal = styled(ModalBox)`
   top: 15vh;
-  flex-grow: 3;
   display: flex;
   flex-direction: column;
   align-items: center;
-  min-width: 500px;
+  min-width: min(80vw,600px);
   min-height: 500px;
   padding: 0px;
   background-color:white;
   border-radius: 30px;
   background-color: #F1F0E4;
+  margin-left: calc(50% - min(40vw, 300px));
 `;
 
 export const ModalHeader = styled.div`

client/src/components/main/left-sidebar/index.tsx

@@ -20,7 +20,7 @@ interface IActiveFollowingUser {
   isActive: boolean,
 }
 
-function LeftSideBar() {
+const LeftSideBar = React.memo(() => {
   const user = useRecoilValue(userState);
   const followingList = useRecoilValue(followingListState);
   const setToastList = useSetRecoilState(toastListSelector);
@@ -100,6 +100,6 @@ function LeftSideBar() {
         ))}
     </ActiveFollowingListWrapper>
   );
-}
+});
 
 export default LeftSideBar;

client/src/components/main/right-sidebar/index.tsx

@@ -27,7 +27,7 @@ const RoomModalLayout = styled.div`
 
 `;
 
-function RightSideBar() {
+const RightSideBar = React.memo(() => {
   const roomView = useRecoilValue(roomViewType);
 
   if (roomView === 'createRoomView') {
@@ -69,6 +69,6 @@ function RightSideBar() {
   }
 
   return (<div>Error</div>);
-}
+});
 
 export default RightSideBar;

client/src/components/room/new-view/index.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable react/jsx-no-bind */
 /* eslint-disable object-shorthand */
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import { useSetRecoilState, useRecoilValue } from 'recoil';
 
 import roomDocumentIdState from '@atoms/room-document-id';
@@ -29,7 +30,7 @@ function RoomModal() {
   const [isAnonymous, setIsAnonymous] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const submitButtonHandler = async () => {
+  const submitButtonHandler = useCallback(async () => {
     try {
       const roomInfo = {
         type: roomType,
@@ -50,7 +51,7 @@ function RoomModal() {
       if (error.name === 'NotAllowedError') setToastList(toastMessage.roomAllowMicDanger());
       else setToastList(toastMessage.roomCreateDanger());
     }
-  };
+  }, [roomType]);
 
   const inputHandler = () => {
     setIsDisabled(!inputRef.current?.value);
@@ -64,38 +65,44 @@ function RoomModal() {
     setRoomType(checkBoxName);
   };
 
-  const randomlyAssignedHandler = async () => {
+  const randomlyAssignedHandler = useCallback(async () => {
     const roomDocumentId = await getRandomRoomDocumentId();
     if (roomDocumentId === 'NO_ROOM') {
       setToastList(toastMessage.roomMatchingDanger());
     } else {
       setRoomDocumentId(roomDocumentId);
       setRoomView('selectModeView');
     }
-  };
+  }, []);
+
+  const CheckBoxs = React.memo(() => (
+    <CheckboxLayout>
+      <RoomTypeCheckBox checkBoxName="public" onClick={roomTypeHandler.bind(null, 'public')} roomType={roomType} />
+      <RoomTypeCheckBox checkBoxName="closed" onClick={roomTypeHandler.bind(null, 'closed')} roomType={roomType} />
+    </CheckboxLayout>
+  ));
+
+  const Buttons = React.memo(() => (
+    <ButtonLayout>
+      <DefaultButton buttonType="secondary" size="medium" onClick={submitButtonHandler} isDisabled={isDisabled}>
+        Let&apos;s Go
+      </DefaultButton>
+      <DefaultButton buttonType="thirdly" size="medium" onClick={randomlyAssignedHandler}>
+        Randomly assigned
+      </DefaultButton>
+    </ButtonLayout>
+  ));
 
   return (
     <>
       <h2> Let&apos;s have fun together! </h2>
-      <CheckboxLayout>
-        {/* eslint-disable-next-line react/jsx-no-bind */}
-        <RoomTypeCheckBox checkBoxName="public" onClick={roomTypeHandler.bind(null, 'public')} roomType={roomType} />
-        {/* eslint-disable-next-line react/jsx-no-bind */}
-        <RoomTypeCheckBox checkBoxName="closed" onClick={roomTypeHandler.bind(null, 'closed')} roomType={roomType} />
-      </CheckboxLayout>
+      <CheckBoxs />
       <AnonymousCheckBox checked={isAnonymous} onChange={checkboxHandler} roomType={roomType} text="Allow anonymous ?" />
       <CustomTitleForm>
         <TitleInputbarLabel>Add a Room Title</TitleInputbarLabel>
         <TitleInputbar ref={inputRef} onChange={inputHandler} data-testid="TitleInputbar" />
       </CustomTitleForm>
-      <ButtonLayout>
-        <DefaultButton buttonType="secondary" size="medium" onClick={submitButtonHandler} isDisabled={isDisabled}>
-          Let&apos;s Go
-        </DefaultButton>
-        <DefaultButton buttonType="thirdly" size="medium" onClick={randomlyAssignedHandler}>
-          Randomly assigned
-        </DefaultButton>
-      </ButtonLayout>
+      <Buttons />
     </>
   );
 }

client/src/components/sign/common/style.ts

@@ -5,11 +5,14 @@ export const SignBody = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
   align-items: center;
   width: 100%;
   height: calc(100vh - 100px);
   ${scrollbarStyle};
+
+  button {
+    margin-top: 30px;
+  }
 `;
 
 export const TitleDiv = styled.div`