refactor:TopBar

src/components/TopBar/components/ChangePasswordModalChildren.js

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

src/components/TopBar/components/TopBarLeft.js

@@ -0,0 +1,15 @@
+import { useNavigate } from 'react-router-dom';
+import logo from '../../../assets/logo.svg';
+import typo from '../../../assets/typo.svg';
+import { HStack } from '../../../styles/Stack.styles';
+
+const TopBarLeft = () => {
+  const navigate = useNavigate();
+  return (
+    <HStack style={{ gap: 10, cursor: 'pointer' }} onClick={() => navigate('/')}>
+      <img src={logo} alt="logo" width="32" height="32" />
+      <img src={typo} alt="typo" width="55" height="32" />
+    </HStack>
+  );
+};
+export default TopBarLeft;

src/components/TopBar/components/TopBarRight.js

@@ -0,0 +1,44 @@
+import S from '../style';
+import { HStack } from '../../../styles/Stack.styles';
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useLoginState from '../../../hooks/useLoginState';
+import UserMenuConainer from './UserMenuContainer';
+import { TopBarItems } from '../constants';
+import { goRoute } from '../utils';
+
+const TopBarRight = () => {
+  const [selectedItem, _] = useState(window.location.pathname);
+  const { isLoggedIn } = useLoginState();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const shopChecked = localStorage.getItem('shopChecked');
+    if (shopChecked === null) {
+      // shopChecked 항목이 없으면 false로 초기화
+      localStorage.setItem('shopChecked', 'false');
+    }
+  }, []);
+
+  return (
+    <HStack style={{ gap: 40 }}>
+      {TopBarItems.map((item, index) => (
+        <S.TopBarItem
+          key={index}
+          selected={selectedItem === item.route}
+          onClick={() => goRoute(item.route, selectedItem, navigate)}
+        >
+          {item.name}
+        </S.TopBarItem>
+      ))}
+      {isLoggedIn ? (
+        <UserMenuConainer />
+      ) : (
+        <S.TopBarButton active={!isLoggedIn} onClick={() => navigate('/login')}>
+          로그인
+        </S.TopBarButton>
+      )}
+    </HStack>
+  );
+};
+export default TopBarRight;

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,110 @@
+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, uploadImage } from '../utils';
+import { renderUserImage } from '../utils/renderUserImage';
+
+import ChangePasswordModalChildren from '../components/ChangePasswordModalChildren';
+import ProfileChangeModalChildren from '../components/ProfileChangeModalChildren';
+import UserMenuChildren from '../components/UserMenuChildren';
+
+import { HStack } from '../../../styles/Stack.styles';
+
+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: (
+          <HStack style={{ gap: 10 }}>
+            <div style={{ fontSize: 16, fontWeight: 400 }}>✅</div>
+            <div style={{ fontSize: 16, fontWeight: 400 }}>{messageText}</div>
+          </HStack>
+        ),
+      })}
+      {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;

src/components/TopBar/constants/index.js

@@ -0,0 +1,17 @@
+import { PATH_NAME } from '../../../constants/index';
+
+export const MIN_PASSWORD_LENGTH = 4;
+export const TopBarItems = [
+  {
+    name: '문제 목록',
+    route: PATH_NAME.PROBLEM_LIST,
+  },
+  {
+    name: '구성원',
+    route: PATH_NAME.MEMBER,
+  },
+  {
+    name: '상점',
+    route: PATH_NAME.SHOP,
+  },
+];