refactor:TopBar

src/components/TopBar/components/ChangePasswordModalChildren.js

@@ -0,0 +1,28 @@
+import Input from '../../Input/Input';
+import { forwardRef } from 'react';
+
+const ChangePasswordModalChildren = forwardRef(
+  (
+    { nextPasswordRef, changePasswordFocus, checkedNextPasswordRef, checkedChangePasswordFocus },
+    ref
+  ) => {
+    return (
+      <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <Input
+          type={'password'}
+          ref={nextPasswordRef}
+          isFocused={changePasswordFocus}
+          initialPlaceholder={'변경할 비밀번호'}
+        />
+        <Input
+          type={'password'}
+          ref={checkedNextPasswordRef}
+          isFocused={checkedChangePasswordFocus}
+          initialPlaceholder={'비밀번호 재입력'}
+        />
+      </div>
+    );
+  }
+);
+
+export default ChangePasswordModalChildren;

src/components/TopBar/components/TopBarLeft.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+import logo from '../../../assets/logo.svg';
+import typo from '../../../assets/typo.svg';
+const TopBarLeft = () => {
+  const navigate = useNavigate();
+  return (
+    <Container onClick={() => navigate('/')}>
+      <ImageWrapper>
+        <LogoImage src={logo} />
+      </ImageWrapper>
+      <ImageWrapper>
+        <TypoImage src={typo} />
+      </ImageWrapper>
+    </Container>
+  );
+};
+export default TopBarLeft;
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  cursor: pointer;
+`;
+const ImageWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const LogoImage = styled.img`
+  width: 32px;
+  height: 32px;
+`;
+const TypoImage = styled.img`
+  width: 55px;
+  height: 32px;
+`;

src/components/TopBar/components/TopBarRight.js

@@ -0,0 +1,113 @@
+import styled, { css } from 'styled-components';
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useLoginState from '../../../hooks/useLoginState';
+import UserMenuConainer from './UserMenuContainer';
+
+const TopBarItems = [
+  {
+    name: '문제 목록',
+    route: '/problem',
+  },
+  {
+    name: '구성원',
+    route: '/member',
+  },
+  {
+    name: '상점',
+    route: '/shop',
+  },
+];
+
+const TopBarRight = () => {
+  const [selectedItem, _setSelectedItem] = useState(window.location.pathname);
+  const [shopUpdated, setShopUpdated] = useState(true);
+  const { isLoggedIn } = useLoginState();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const shopChecked = localStorage.getItem('shopChecked');
+    if (shopChecked === null) {
+      // shopChecked 항목이 없으면 false로 초기화
+      localStorage.setItem('shopChecked', 'false');
+      setShopUpdated(true);
+    }
+    setShopUpdated(shopChecked === 'false');
+  }, []);
+
+  function goRoute(route) {
+    if (route === selectedItem) return;
+    window.scrollTo(0, 0);
+    if (route === '/shop') {
+      localStorage.setItem('shopChecked', 'true');
+      setShopUpdated(false);
+    }
+    navigate(route);
+  }
+
+  return (
+    <Container>
+      {TopBarItems.map((item, index) => (
+        <TopBarItem
+          key={index}
+          selected={selectedItem === item.route}
+          onClick={() => goRoute(item.route)}
+        >
+          {item.name}
+          {item.route === '/shop' && shopUpdated && (
+            <span style={{ color: 'red', marginLeft: '5px' }}>•</span>
+          )}
+        </TopBarItem>
+      ))}
+      {isLoggedIn ? (
+        <UserMenuConainer />
+      ) : (
+        <TopBarButton active={!isLoggedIn} onClick={() => navigate('/login')}>
+          로그인
+        </TopBarButton>
+      )}
+    </Container>
+  );
+};
+export default TopBarRight;
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 40px;
+`;
+
+const TopBarItem = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  color: ${props => props.theme.subText};
+  cursor: pointer;
+  user-select: none;
+  &:hover {
+    color: ${props => props.theme.titleText};
+  }
+  ${props =>
+    props.selected &&
+    css`
+      color: ${props => props.theme.primary};
+      &:hover {
+        color: ${props => props.theme.primary};
+      }
+    `}
+`;
+
+const TopBarButton = styled.div`
+  padding: 12px;
+  border-radius: 12px;
+  background-color: ${props => props.theme.primary};
+
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.9);
+  }
+`;

src/components/TopBar/components/UserMenuChildren.js

@@ -0,0 +1,36 @@
+import Button from '../../Buttons';
+const UserMenuChildren = ({
+  showChangePasswordModal,
+  showProfileChangeModal,
+  hideUserMenu,
+  showLogoutModal,
+}) => {
+  return (
+    <>
+      <Button
+        onClick={() => {
+          showChangePasswordModal();
+        }}
+      >
+        비밀번호 변경
+      </Button>
+      <Button
+        onClick={() => {
+          showProfileChangeModal();
+        }}
+      >
+        프로필 사진 변경
+      </Button>
+      <Button
+        color={'red'}
+        onClick={() => {
+          hideUserMenu();
+          showLogoutModal();
+        }}
+      >
+        로그아웃
+      </Button>
+    </>
+  );
+};
+export default UserMenuChildren;

src/components/TopBar/components/UserMenuContainer.js

@@ -0,0 +1,104 @@
+import { useState, useRef } from 'react';
+import useUserState from '../../../hooks/useUserState';
+import useLoginState from '../../../hooks/useLoginState';
+
+import { Message } from '../../Message';
+import useModal from '../../../hooks/useModal';
+import useContainer from '../../../hooks/useContainer';
+
+import { checkPasswordValidate, renderUserImage, uploadImage } from '../util/util';
+
+import ChangePasswordModalChildren from '../components/ChangePasswordModalChildren';
+import ProfileChangeModalChildren from '../components/ProfileChangeModalChildren';
+import UserMenuChildren from '../components/UserMenuChildren';
+
+const UserMenuConainer = () => {
+  const [messageText, setMessageText] = useState('');
+  const [selectedFile, setselectedFile] = useState(null);
+  const [changePasswordFocus, setChangePasswordFocus] = useState(false);
+  const [checkedChangePasswordFocus, setCheckedChangePasswordFocus] = useState(false);
+
+  const nextPasswordRef = useRef();
+  const checkedNextPasswordRef = useRef();
+
+  const userMenu = useContainer();
+  const { user, setUserInfo } = useUserState();
+  const { initLoginStatus } = useLoginState();
+
+  const logoutModal = useModal({
+    description: '정말 로그아웃하시겠어요?',
+    cancelText: '취소',
+    okText: '확인',
+    closable: true,
+    onOk: () => {
+      initLoginStatus();
+    },
+  });
+
+  const profileChangeModal = useModal({
+    description: '변경할 이미지를 올려주세요',
+    cancelText: '취소',
+    okText: '확인',
+    closable: true,
+    onOk: () =>
+      uploadImage(selectedFile, setUserInfo, setselectedFile, setMessageText, toastMessage),
+  });
+
+  const changePasswordModal = useModal({
+    cancelText: '취소',
+    closable: true,
+    onOk: () =>
+      checkPasswordValidate(
+        nextPasswordRef,
+        checkedNextPasswordRef,
+        setChangePasswordFocus,
+        setCheckedChangePasswordFocus,
+        setMessageText,
+        changePasswordModal,
+        toastMessage
+      ),
+  });
+  const toastMessage = Message();
+  return (
+    <>
+      {toastMessage.render({
+        children: (
+          <div style={{ fontSize: 15, fontWeight: 400 }}> ✅&nbsp;&nbsp;&nbsp;{messageText}</div>
+        ),
+      })}
+      {profileChangeModal.render({
+        children: (
+          <ProfileChangeModalChildren
+            selectedFile={selectedFile}
+            setselectedFile={setselectedFile}
+          />
+        ),
+      })}
+      {changePasswordModal.render({
+        children: (
+          <ChangePasswordModalChildren
+            nextPasswordRef={nextPasswordRef}
+            changePasswordFocus={changePasswordFocus}
+            checkedNextPasswordRef={checkedNextPasswordRef}
+            checkedChangePasswordFocus={checkedChangePasswordFocus}
+          />
+        ),
+      })}
+      {logoutModal.render()}
+      <div style={{ position: 'absolute', right: 0, margin: 10, marginTop: 64 }}>
+        {userMenu.render({
+          children: (
+            <UserMenuChildren
+              showChangePasswordModal={changePasswordModal.show}
+              showProfileChangeModal={profileChangeModal.show}
+              hideUserMenu={userMenu.hide}
+              showLogoutModal={logoutModal.show}
+            />
+          ),
+        })}
+      </div>
+      {renderUserImage(user, userMenu)}
+    </>
+  );
+};
+export default UserMenuConainer;