[2-4] 좌측 네비게이션 컨테이너 -신규

src/components/Navigation/NavigationBar.tsx

@@ -0,0 +1,163 @@
+import { useNavigate } from "react-router-dom";
+import home from "../../assets/images/home.png";
+import postgeneration from "../../assets/images/postgeration.png";
+import postsearch from "../../assets/images/postsearch.png";
+import alarm from "../../assets/images/alarm.png";
+import darkmode from "../../assets/images/darkmode.png";
+import mypage from "../../assets/images/mypage.png";
+import expantion from "../../assets/images/expansion.png";
+import reduction from "../../assets/images/reduction.png";
+import styled from "styled-components";
+import { useEffect, useState } from "react";
+import Alarm from "../../features/Navigations/Alarm";
+import Notification from "../../features/Navigations/Notification";
+import Postsearch from "../../features/Navigations/Postsearch";
+
+const Navcontainer = styled.div`
+  border-right: 1.5px solid black;
+  align-items: center;
+  float: left;
+  background-color: #fff;
+  width: 200px;
+  height: 100%;
+  //이거 어찌 해결해야 하나.. 트랜지션..
+  overflow: hidden;
+  transition: 1s;
+
+  &.closeNav {
+    width: 105px;
+    transition: 0.5s;
+    img {
+      margin: 0;
+    }
+  }
+`;
+
+const Button = styled.button`
+  display: flex;
+  border: 0;
+  background-color: #fff;
+  margin: 50px 30px;
+  font-size: 15px;
+  cursor: pointer;
+  top: 0;
+
+  &:hover {
+    color: #4098ff;
+  }
+
+  img {
+    width: 25px;
+    height: 25px;
+    margin-right: 16px;
+  }
+  span {
+    margin-top: 5px;
+    display: block;
+    overflow: hidden;
+  }
+
+  &.btncloseNav {
+    margin: 50px 35px;
+
+    span {
+      display: none;
+    }
+  }
+`;
+
+const NavigationBar = () => {
+  const navigate = useNavigate();
+  //네이게이션바 열고 닫기
+  const [showNav, setShowNav] = useState(false);
+  //알람과 포스트검색 패널 열고 닫기
+  const [notiOpen, setNotiOpen] = useState(false);
+  const [postOpen, setPostOpen] = useState(false);
+  //seen값
+  const [isSeen, setisSeen] = useState(false);
+
+  ////////////////////////////////////////////
+  const token =
+    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjY2ZmE0ZWQ0ZDQ3NWE4N2RlMGFlMWE1NSIsImVtYWlsIjoidGVzdDA0QGFhYS5jb20ifSwiaWF0IjoxNzI3NjgwMzEzfQ.7rI5mmvcEa1wvVG2Qb2xhIz2ohiaC2XYwtakrMPHgLQ";
+  // 라벨 누르면 seen값  true로 바꾸는 fetch
+  useEffect(() => {
+    fetch("https://kdt.frontend.5th.programmers.co.kr:5004/notifications/seen", {
+      method: "PUT",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => setisSeen(data))
+      .catch((error) => console.error("Error:", error));
+  }, []);
+
+  const notiHandler = () => {
+    if (notiOpen) {
+      setNotiOpen(false);
+    } else {
+      setNotiOpen(true);
+      setPostOpen(false);
+    }
+  };
+
+  const postHandler = () => {
+    if (postOpen) {
+      setPostOpen(false);
+    } else {
+      setPostOpen(true);
+      setNotiOpen(false);
+    }
+  };
+
+  return (
+    <>
+      {/* 알람, 포스트검색 패널 오픈 했을때 위치조정값 */}
+      {notiOpen && <Notification isClosed={!showNav} />}
+      {postOpen && <Postsearch postClosed={!showNav} />}
+
+      <Navcontainer className={showNav ? "" : "closeNav"}>
+        <Button onClick={() => navigate("/")} className={showNav ? "" : "btncloseNav"}>
+          <img src={home} alt="home" />
+          <span>홈페이지</span>
+        </Button>
+
+        <Button onClick={() => navigate("/post/create")} className={showNav ? "" : "btncloseNav"}>
+          <img src={postgeneration} alt="postgeneration" />
+          <span>포스트 생성</span>
+        </Button>
+
+        <Button onClick={postHandler} className={showNav ? "" : "btncloseNav"}>
+          <img src={postsearch} alt="postsearch" />
+          <span>포스트 검색</span>
+        </Button>
+
+        <Button onClick={notiHandler} className={showNav ? "" : "btncloseNav"}>
+          <Alarm isClosed={!showNav} isSeen={isSeen}>
+            <img src={alarm} alt="alarm" />
+          </Alarm>
+          <span>알림</span>
+        </Button>
+
+        <Button className={showNav ? "" : "btncloseNav"}>
+          <img src={darkmode} alt="darkmode" />
+          <span>다크 모드</span>
+        </Button>
+
+        {/* 유저아이디로 다시 지정해야함 */}
+        <Button onClick={() => navigate("/profile/1")} className={showNav ? "" : "btncloseNav"}>
+          <img src={mypage} alt="mypage" />
+          <span>마이페이지</span>
+        </Button>
+
+        <Button onClick={() => setShowNav(!showNav)} className={showNav ? "" : "btncloseNav"}>
+          <img src={showNav ? reduction : expantion} alt="reduction" />
+          <span>축소</span>
+        </Button>
+      </Navcontainer>
+    </>
+  );
+};
+
+export default NavigationBar;

src/features/Navigations/Alarm.tsx

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+
+const BadgeContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+const Super = styled.sup<{ isClosed: boolean; isSeen: boolean }>`
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-block;
+  align-items: center;
+  height: 15px;
+  padding: 0 8px;
+  border-radius: 20px;
+  color: white;
+  background-color: red;
+  //네비게이션 열려있거나 닫혀있을때 알람 위치 조정
+  transform: ${(props) => (props.isClosed ? "translate(30%, -30%)" : "translate(-75%, -30%)")};
+
+  //알람이 없으면 감추기 (나중에 사용)
+  visibility: ${(props) => (props.isSeen ? "hidden" : "visible")};
+`;
+
+interface AlarmProps {
+  children: React.ReactNode;
+  isClosed: boolean;
+  isSeen: boolean;
+}
+
+const Alarm: React.FC<AlarmProps> = ({ children, isClosed, isSeen, ...props }) => {
+  // //토큰값 POST /login 한곳에서 받아와야함
+  // const token =
+  //   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjY2ZmE0ZWQ0ZDQ3NWE4N2RlMGFlMWE1NSIsImVtYWlsIjoidGVzdDA0QGFhYS5jb20ifSwiaWF0IjoxNzI3NjgwMzEzfQ.7rI5mmvcEa1wvVG2Qb2xhIz2ohiaC2XYwtakrMPHgLQ";
+
+  // //특정 포스트에있는 좋아요, 댓글, 포스트제목, 사용자이름을 불러와야함
+  // //User에서 포스트 아이디값 불러와야함
+  // useEffect(() => {
+  //   fetch("https://kdt.frontend.5th.programmers.co.kr:5004/notifications", {
+  //     method: "GET",
+  //     headers: {
+  //       Authorization: `Bearer ${token}`,
+  //       "Content-Type": "application/json",
+  //     },
+  //   })
+  //     .then((response) => response.json())
+  //     .then((data) => setIsSeen(data))
+  //     .catch((error) => console.error("Error:", error));
+  // }, []);
+
+  return (
+    <BadgeContainer {...props}>
+      {children}
+      <Super isSeen={isSeen} isClosed={isClosed}></Super>
+    </BadgeContainer>
+  );
+};
+
+export default Alarm;