Merge pull request #96 from codeit-sprint-part3-6team/#85_공통-Header-로그인-회원가입-랜딩-제외

#85 공통 header 로그인 회원가입 랜딩 제외

Author: hwiiron

package-lock.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@mui/joy": "^5.0.0-beta.51",
     "@mui/material": "^6.2.0",
     "@mui/system": "^6.2.0",
     "@mui/x-date-pickers": "^7.23.1",

package.json

@@ -0,0 +1,66 @@
+.button {
+  display: flex;
+  align-items: center;
+
+  height: 40px;
+
+  border: 1px solid var(--gray-medium);
+  border-radius: 8px;
+  background-color: none;
+  padding: 0 16px;
+
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--gray);
+
+  cursor: pointer;
+}
+
+.button + .button {
+  margin-left: 16px;
+}
+
+.button.management::before,
+.button.invite::before {
+  content: '';
+
+  width: 20px;
+  height: 20px;
+
+  display: inline-block;
+  margin-right: 8px;
+
+  background-image: url('/ic/ic_setting.svg') no-repeat;
+  background-size: 100%;
+}
+
+.button.invite::before {
+  background-image: url('/ic/ic_plus.svg') no-repeat;
+  background-size: 100%;
+}
+
+@media screen and (max-width: 1199px) {
+  .button + .button {
+    margin-left: 12px;
+  }
+}
+
+@media screen and (max-width: 743px) {
+  .button {
+    height: 30px;
+
+    border-radius: 6px;
+    padding: 0 10px;
+
+    font-size: 14px;
+  }
+
+  .button + .button {
+    margin-left: 6px;
+  }
+
+  .button.management::before,
+  .button.invite::before {
+    display: none;
+  }
+}

public/favicon.ico

@@ -0,0 +1,21 @@
+import styles from './NavButton.module.css';
+
+type NavButtonProps = {
+  btnType: 'management' | 'invite';
+  buttonName: string;
+  onClick?: () => void;
+};
+
+function NavButton({ btnType, buttonName, onClick }: NavButtonProps) {
+  return (
+    <button
+      className={`${styles.button} ${styles[btnType]}`}
+      type="button"
+      onClick={onClick}
+    >
+      {buttonName}
+    </button>
+  );
+}
+
+export default NavButton;