Merge pull request #197 from boostcampwm-2021/feature/196

[랭킹] 1vs1 지우기, css 작업, 검색 기능 개선

Author: jeongbbn

front-end/src/pages/RankingPage/index.tsx

@@ -78,9 +78,10 @@ function RankingPage() {
 
   const categoryChange = ['공격 횟수', '승리 횟수'];
   const [categoryButtonState, setCategoryButtonState] = useState(1);
-  const [modeButtonState, setModeButtonState] = useState(1);
+  const [modeButtonState, setModeButtonState] = useState(0);
   const [players, setPlayers] = useState([]);
   const inputRef = useRef<HTMLInputElement>(null);
+  const searchRef = useRef<any>(null);
 
   const categoryButton: MouseEventHandler<HTMLButtonElement> = (
     e: MouseEvent<HTMLButtonElement>
@@ -89,11 +90,6 @@ function RankingPage() {
     setCategoryButtonState(value);
   };
 
-  const modeButton: MouseEventHandler<HTMLButtonElement> = (e: MouseEvent<HTMLButtonElement>) => {
-    const value = (e.target as Element).id === 'normal' ? 0 : 1;
-    setModeButtonState(value);
-  };
-
   const searchButton: MouseEventHandler<HTMLButtonElement> = async (
     e: MouseEvent<HTMLButtonElement>
   ) => {
@@ -103,6 +99,13 @@ function RankingPage() {
     setPlayers(res.data);
   };
 
+  const handleKeyPress = (e: any) => {
+    if (e.key === 'Enter') {
+      const searchButton: any = searchRef.current;
+      searchButton.click();
+    }
+  };
+
   useEffect(() => {
     (async function effect() {
       syncKeyWithServer(rankApiTemplate, categoryButtonState, modeButtonState);
@@ -112,22 +115,22 @@ function RankingPage() {
   }, [categoryButtonState, modeButtonState]);
 
   useEffect(() => {
-    if(!isReady) return;
+    if (!isReady) return;
 
     const popstateEvent = (e: any) => {
       const url = e.target.location.pathname;
 
-      if(url.includes('/game/')) {
+      if (url.includes('/game/')) {
         const gameID = url.split('/game/')[1];
         socketClient.current.emit('check valid room', { roomID: gameID, id: socketClient.id });
       }
-    }
+    };
 
     window.addEventListener('popstate', popstateEvent);
 
     return () => {
       window.removeEventListener('popstate', popstateEvent);
-    }
+    };
   }, [isReady]);
 
   return (
@@ -156,17 +159,9 @@ function RankingPage() {
             </div>
             <div className="rank__input__box__row">
               모드 :
-              <button
-                id="1 vs 1"
-                className={`rank__input__box__button ${modeButtonState && 'selected'}`}
-                onClick={modeButton}
-              >
-                1 vs 1
-              </button>
               <button
                 id="normal"
                 className={`rank__input__box__button ${!modeButtonState && 'selected'}`}
-                onClick={modeButton}
               >
                 일반전
               </button>
@@ -176,9 +171,11 @@ function RankingPage() {
                 className="rank__input__box__nickname"
                 placeholder="플레이어 닉네임을 입력해주세요."
                 ref={inputRef}
+                onKeyPress={handleKeyPress}
               ></input>
               <button
                 className="rank__input__box__button rank__nickname__search"
+                ref={searchRef}
                 onClick={searchButton}
               >
                 검색

front-end/src/pages/RankingPage/style.scss

@@ -17,15 +17,16 @@
     display: flex;
     width: 100%;
     height: 30vh;
-    margin-left: 100px;
+    padding-right: 140px;
     justify-content: center;
     align-items: center;
   }
   .rank__player__box {
     display: flex;
     background: #364171;
     height: 140px;
-    width: 402px;
+    width: 100%;
+    margin: 200px 60px 200px 200px;
     box-shadow: 0px 7px #272d4e;
     .rank__player__image {
       display: flex;
@@ -49,9 +50,9 @@
   .rank__input__box {
     display: flex;
     flex-direction: column;
-    margin-left: 70px;
-    width: 500px;
-    height: 116px;
+    width: 100%;
+    height: 140px;
+    margin-left: 50px;
   }
   .rank__input__box__row {
     display: flex;
@@ -90,16 +91,17 @@
 
   .rank__body__down {
     display: flex;
-    margin-left: 230px;
     width: 100%;
-    height: 18vh;
+    min-height: 200px;
   }
 
   .rank__display {
     display: flex;
     flex-direction: column;
-    width: 750px;
-    height: 100%;
+    width: 100%;
+    height: 17vh;
+    padding-left: 230px;
+    padding-right: 230px;
   }
   .rank__display__scroll__root {
     overflow: auto;