Til (2023.02.09)

스팀게임 음성채팅 프로그램 개발중

 

메뉴가 옆에서 나오는 방식을 사용하려고 하는데

페이지를 밀면서 나오려고 한다.

fixed를 사용해서 하려고 하는데 페이지위에 떠있는 거라서 열면 페이지 위에있고 페이지가 밀리지 않는 문제가 있었다.

그래서 recoil로 전역에 메뉴 상태를 전달한후 메뉴가 열리면 styled-components에 상태를 Props로 줘 margin-left가 조정되는 방식을 사용했다.

 

열리는 페이지는 총 네개인데 각각 열리게 하기위해 처음엔 if문으로 5개의 조건을 걸었었는데 코드가 너무 길어져서 인자로 string을 recoil에 주는 방식으로 리팩토링 했다.

function Layout() {
  //레이아웃 종류
  const [layoutMenu, setLayoutMenu] = useRecoilState<String>(LayoutButton);

  const LayoutButtonOnClick = (i: string) => {
    if (layoutMenu === i) {
      setLayoutMenu("close");
    } else {
      setLayoutMenu(i);
    }
  };

  return (
    <>
      <SideBarDiv>
        {/* 프로필 */}
        <Profilebutton onClick={() => LayoutButtonOnClick("profile")}>
          Profile
        </Profilebutton>
        {/* 홈 */}
        <Homebutton>Home</Homebutton>
        {/* 게임검색 */}
        <GameSearchbutton onClick={() => LayoutButtonOnClick("gamesearch")}>
          gamesearch
        </GameSearchbutton>
        {/* 친구 */}
        <Friendbutton onClick={() => LayoutButtonOnClick("friend")}>
          friend
        </Friendbutton>
        {/* 친구검색 */}
        <FriendSearchbutton onClick={() => LayoutButtonOnClick("friendsearch")}>
          friendsearch
        </FriendSearchbutton>
        {/* 음성채팅 */}
        <VoiceTalkbutton onClick={() => LayoutButtonOnClick("voicetalk")}>
          voicetalk
        </VoiceTalkbutton>
      </SideBarDiv>
      {/* 메뉴 컴포넌트 */}
      <MenuOpenDiv layoutMenu={layoutMenu}>
        <Profile />
        <GameSearch />
        <Friend />
        <FriendSearch />
        <VoiceTalk />
      </MenuOpenDiv>
    </>
  );
}