Skip to content

Commit

Permalink
Merge pull request #112 from LikeLionHGU/#109/HeaderDetail-yeji
Browse files Browse the repository at this point in the history
fix: 헤더 수정
  • Loading branch information
skwldwld authored Aug 6, 2024
2 parents 29b2c93 + fd9f612 commit 521b51b
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 10 deletions.
19 changes: 15 additions & 4 deletions src/components/Common/HeaderLightVer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { selectedPriceState } from "../../atom";

function HeaderLightVer() {
const [isLoginModalOpen, setLoginModalOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(window.location.pathname); // Track current page

const [selectedRegion, setSelectedRegion] =
useRecoilState(selectedRegionState);
Expand All @@ -29,6 +30,7 @@ function HeaderLightVer() {
const token = localStorage.getItem("jwtToken");

const handleMenuClick = (url) => {
setCurrentPage(url);
navigate(url);
};

Expand All @@ -38,11 +40,13 @@ function HeaderLightVer() {
alert("로그인이 필요합니다.");
navigate("/");
} else {
setCurrentPage(url);
navigate(url);
}
};

const handlePickleLogoClick = () => {
setCurrentPage("/");
navigate("/");
setSelectedRegion([]);
setSelectedSportType([]);
Expand All @@ -60,11 +64,13 @@ function HeaderLightVer() {
}, [isLoginModalOpen]);

const handleSignInClick = () => {
setCurrentPage("/sign");
navigate("/sign");
};

const handleSignOutBtnClick = () => {
localStorage.clear();
setCurrentPage("/");
navigate("/");
};

Expand All @@ -80,6 +86,7 @@ function HeaderLightVer() {
setSelectedDate([]);
setSelectedPrice({ min: 0, max: 100000 });
}}
isSelected={currentPage === "/"}
>
</Menu>
Expand All @@ -92,10 +99,16 @@ function HeaderLightVer() {
setSelectedDate([]);
setSelectedPrice({ min: 0, max: 100000 });
}}
isSelected={currentPage === "/listall"}
>
강좌목록
</Menu>
<Menu onClick={() => handleUserPageClick("/user")}>마이페이지</Menu>
<Menu
onClick={() => handleUserPageClick("/user")}
isSelected={currentPage === "/user"}
>
마이페이지
</Menu>
<Logo>
<img
onClick={handlePickleLogoClick}
Expand Down Expand Up @@ -148,7 +161,6 @@ const Menu = styled.div`
cursor: pointer;
margin-left: 45px;
position: relative;
/* border: 1px solid red; */
text-align: center;
min-width: 50px;
Expand All @@ -161,7 +173,7 @@ const Menu = styled.div`
position: absolute;
width: 100%;
min-width: 50px;
transform: scaleX(0);
transform: scaleX(${(props) => (props.isSelected ? 1 : 0)});
height: 6px;
bottom: 0px;
left: 0;
Expand Down Expand Up @@ -210,6 +222,5 @@ const SignOut = styled.div`
color: #1997fc;
font-size: 14px;
cursor: pointer;
/* border: 1px solid red; */
margin-left: 70px;
`;
25 changes: 19 additions & 6 deletions src/components/MainPage/HeaderMain.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import { selectedPriceState } from "../../atom";

function HeaderMain() {
const [isLoginModalOpen, setLoginModalOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(window.location.pathname); // Track current page

const [selectedRegion, setSelectedRegion] =
useRecoilState(selectedRegionState);
const [selectedSportType, setSelectedSportType] = useRecoilState(
Expand All @@ -27,27 +29,30 @@ function HeaderMain() {
const navigate = useNavigate();
const token = localStorage.getItem("jwtToken");

const handleMenuClick = (url) => {
setCurrentPage(url); // Update current page state
navigate(url);
};

const toggleLoginModal = () => {
setLoginModalOpen((prevState) => !prevState);
};

const handleSignInClick = () => {
setCurrentPage("/sign");
navigate("/sign");
};

const handleSignOutBtnClick = () => {
localStorage.clear();
window.location.reload();
setCurrentPage("/");
};

useEffect(() => {
document.body.style.overflow = isLoginModalOpen ? "hidden" : "auto";
}, [isLoginModalOpen]);

const handleMenuClick = (url) => {
navigate(url);
};

const handleUserPageClick = (url) => {
const jwtToken = localStorage.getItem("jwtToken");
if (!jwtToken) {
Expand All @@ -59,6 +64,7 @@ function HeaderMain() {
};

const handlePickleLogoClick = () => {
setCurrentPage("/");
navigate("/");
setSelectedRegion([]);
setSelectedSportType([]);
Expand All @@ -79,6 +85,7 @@ function HeaderMain() {
setSelectedDate([]);
setSelectedPrice({ min: 0, max: 100000 });
}}
isSelected={currentPage === "/"}
>
</Menu>
Expand All @@ -91,10 +98,16 @@ function HeaderMain() {
setSelectedDate([]);
setSelectedPrice({ min: 0, max: 100000 });
}}
isSelected={currentPage === "/listall"}
>
강좌목록
</Menu>
<Menu onClick={() => handleUserPageClick("/user")}>마이페이지</Menu>
<Menu
onClick={() => handleUserPageClick("/user")}
isSelected={currentPage === "/user"}
>
마이페이지
</Menu>
<Logo>
<img
onClick={handlePickleLogoClick}
Expand Down Expand Up @@ -160,7 +173,7 @@ const Menu = styled.div`
position: absolute;
width: 100%;
min-width: 50px;
transform: scaleX(0);
transform: scaleX(${(props) => (props.isSelected ? 1 : 0)});
height: 6px;
bottom: 0px;
left: 0;
Expand Down

0 comments on commit 521b51b

Please sign in to comment.