Skip to content

Commit

Permalink
Merge pull request #19 from pythonkr/pyconkr/fix/remove-tutorial-sprint
Browse files Browse the repository at this point in the history 
행사 날짜 수정, 프로그램 진행 안함 공지 추가 및 스타일 버그 수정
  • Loading branch information
@MU-Software
MU-Software authored Aug 4, 2024
2 parents d2dc30b + 36ea431 commit 6c26ce8
Show file tree
Hide file tree
Showing 15 changed files with 433 additions and 483 deletions.
10 changes: 9 additions & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,15 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/logo.png" />
<!-- TODO 올해 아이콘으로 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width,
height=device-height,
target-densitydpi=device-dpi,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=0,
user-scalable=no,
shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
Expand Down
143 changes: 43 additions & 100 deletions src/components/Nav/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,65 @@
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router";
import { RootState } from "store";
import { setLanguage } from "store/Core";
import styled from "styled-components";
import useTranslation from "utils/hooks/useTranslation";
import MenuRoutes from "./menus";
import { Slogan as SloganSvg } from "assets/icons";
import Hamburger from "hamburger-react";
import useIsMobile from "utils/hooks/useIsMobile";
import Hamburger from "hamburger-react"
import React, { useState } from "react"
import { useDispatch } from "react-redux"
import { useNavigate } from "react-router"
import styled from "styled-components"

import { Slogan as SloganSvg } from "assets/icons"
import useIsMobile from "utils/hooks/useIsMobile"
import useTranslation from "utils/hooks/useTranslation"
import MenuRoutes, { MenuElementType } from "./menus"

const Nav = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const isMobile = useIsMobile();
const language = useSelector<RootState, RootState["core"]["language"]>(
(state) => state.core.language
);
const [openMenu, setOpenMenu] = useState(false);
const t = useTranslation();

// 로그인 여부 확인
// localStorage에 id가 있으면 로그인 상태로 간주
// 로그인 상태면 로그인 버튼 대신 로그아웃 버튼이 나타남
// 로그아웃 버튼 클릭 시 localStorage에서 id 삭제 후 메인 페이지로 이동
const isLogin = localStorage.getItem("id");
const navigate = useNavigate()
const dispatch = useDispatch()
const isMobile = useIsMobile()
const [openMenu, setOpenMenu] = useState(false)
const t = useTranslation()

const menuOnClickHandler = (menu: MenuElementType) => () => {
if (menu.path) {
navigate(menu.path)
setOpenMenu(false)
} else if (menu.onClick) {
menu.onClick?.({ setOpenMenu, dispatch })
}
}

return (
<Container className="nav-bar">
<div className="nav-logo" onClick={() => navigate("/")}>
<SloganSvg />
</div>
{isMobile && <Hamburger toggled={openMenu} toggle={setOpenMenu} hideOutline={true} />}
<div className={`menus ${isMobile && !openMenu ? "hidden" : "visible"}`}>
{isMobile && <Hamburger toggled={openMenu} toggle={setOpenMenu} hideOutline />}
<div className={`menus ${isMobile && openMenu ? "visible" : "hidden"}`}>
{Object.entries(MenuRoutes).map(([path, menu]) => (
<Menu className="menu-item" key={path}>
<span>{t(menu.name)}</span>
<SubMenus className="sub-menu">
{menu.sub.map((subMenu) => (
<SubMenu
className="sub-menu-item"
key={subMenu.path}
onClick={() => {
setOpenMenu(false);
navigate(`/${path}/${subMenu.path}`);
}}
>
{t(subMenu.name)}
</SubMenu>
))}
</SubMenus>
<span onClick={menuOnClickHandler(menu)}>{t(menu.name)}</span>
{
menu.sub && <SubMenus className="sub-menu">
{menu.sub.map((subMenu) => (
<SubMenu className="sub-menu-item" key={subMenu.name} onClick={menuOnClickHandler(subMenu)}>
{t(subMenu.name)}
</SubMenu>
))}
</SubMenus>
}
</Menu>
))}
{/*TODO: 필요시 활성화*/}
{/*<Menu className="menu-item border-bottom">*/}
{/* {isLogin ? (*/}
{/* <SubMenu*/}
{/* className="sub-menu-item"*/}
{/* onClick={() => {*/}
{/* setOpenMenu(false);*/}
{/* localStorage.removeItem("id");*/}
{/* navigate("/");*/}
{/* }}*/}
{/* >*/}
{/* {t("로그아웃")}*/}
{/* </SubMenu>*/}
{/* ) : (*/}
{/* <SubMenu*/}
{/* className="sub-menu-item"*/}
{/* onClick={() => {*/}
{/* setOpenMenu(false);*/}
{/* navigate("/login");*/}
{/* }}*/}
{/* >*/}
{/* {t("로그인")}*/}
{/* </SubMenu>*/}
{/* )}*/}
{/*</Menu>*/}
<Menu className="menu-item">
<span>{t("언어")}</span>
<SubMenus className="sub-menu">
<SubMenu
className="sub-menu-item"
onClick={() => {
setOpenMenu(false);
dispatch(setLanguage("KOR"));
}}
>
한국어
</SubMenu>
<SubMenu
className="sub-menu-item"
onClick={() => {
setOpenMenu(false);
dispatch(setLanguage("ENG"));
}}
>
English
</SubMenu>
</SubMenus>
</Menu>
</div>
</Container>
);
};
)
}

export default Nav;
export default Nav

const Container = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
background-color: #141414;
`;
`

const SubMenus = styled.div`
display: none;
Expand All @@ -125,7 +70,7 @@ const SubMenus = styled.div`
font-size: initial;
font-weight: initial;
`;
`

const SubMenu = styled.div`
cursor: pointer;
Expand All @@ -141,19 +86,17 @@ const SubMenu = styled.div`
&:hover {
color: #b0a8fe;
}
`;
`

const Menu = styled.div`
position: relative;
cursor: pointer;
user-select: none;
padding: 1vh 1vw;
&:hover {
color: #b0a8fe;
& > ${SubMenus} {
display: initial;
}
}
`;
`
118 changes: 74 additions & 44 deletions src/components/Nav/menus.ts
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,85 @@
const Menus = {
import { useDispatch } from "react-redux"

import { openGlobalDialog, setLanguage } from "store/Core"
import { DIALOG_CONST_PROGRAM_NOT_HELD_ON_2024 } from "store/Core/dialog"

export type MenuElementOnClickArgType = {
setOpenMenu: React.Dispatch<React.SetStateAction<boolean>>
dispatch: ReturnType<typeof useDispatch>
}

export type MenuElementType = {
name: string
style?: React.CSSProperties
path?: string
onClick?: (_: MenuElementOnClickArgType) => void
}

export type MenuType = { [key: string]: MenuElementType & { sub?: MenuElementType[] } }

const Menus: MenuType = {
about: {
name: "파이콘 한국",
sub: [
{
name: "파이콘 한국 2024",
path: "pyconkr2024",
path: "/about/pyconkr2024",
},
{
name: "파이콘 한국 행동 강령",
path: "coc",
onClick: ({ setOpenMenu }) => {
setOpenMenu(false)
window.open("https://2023.pycon.kr/coc/purpose", "_blank")
}
},
// {
// name: "파이콘 한국 준비위원회",
// path: "organizing-team",
// path: "/about/organizing-team",
// },
// {
// name: "지난 파이콘 한국",
// path: "previous-pyconkr",
// },
],
},
program: {
name: "프로그램",
sub: [
// {
// name: "키노트",
// path: "keynote",
// },
// {
// name: "발표",
// path: "session",
// path: "/about/previous-pyconkr",
// },
{
name: "스프린트",
path: "sprint",
},
{
name: "튜토리얼",
path: "tutorial",
},
],
},
// ticket: {
// name: "티켓",
// keynote: {
// name: "키노트",
// sub: [
// {
// name: "티켓 구매하기",
// path: "buy",
// name: "키노트",
// path: "/keynote/keynote",
// },
// {
// name: "구매 내역",
// path: "payment-list",
// name: "발표",
// path: "/keynote/session",
// },
// ],
// },
program: {
name: "프로그램",
onClick: ({ setOpenMenu, dispatch }) => {
setOpenMenu(false)
dispatch(openGlobalDialog(DIALOG_CONST_PROGRAM_NOT_HELD_ON_2024))
}
},
contribution: {
name: "기여하기",
sub: [
{
name: "발표 제안하기",
path: "cfp",
path: "/contribution/cfp",
},
// {
// name: "발표안 작성 가이드",
// path: "cfp/guide",
// path: "/contribution/cfp/guide",
// },
// {
// name: "키노트 연사 추천하기",
// path: "recommending-keynote",
// path: "/contribution/recommending-keynote",
// },
// {
// name: "영상 자막",
// path: "video-subtitle",
// path: "/contribution/video-subtitle",
// },
],
},
Expand All @@ -80,30 +88,52 @@ const Menus = {
sub: [
{
name: "후원사 안내",
path: "sponsor/prospectus",
onClick: ({ setOpenMenu }) => {
setOpenMenu(false)
window.open("https://info.pycon.kr/sponsor-2024", "_blank")
},
},
// {
// name: "개인 후원자",
// path: "patron",
// path: "/sponsoring/patron",
// },
// {
// name: "후원사 혜택 안내",
// path: "sponsor/benefit",
// path: "/sponsoring/sponsor/benefit",
// },
// {
// name: "후원사로 참여하기",
// path: "sponsor/join",
// path: "/sponsoring/sponsor/join",
// },
// {
// name: "후원사 FAQ",
// path: "sponsor/faq",
// path: "/sponsoring/sponsor/faq",
// },
// {
// name: "후원사 약관",
// path: "sponsor/terms",
// path: "/sponsoring/sponsor/terms",
// },
],
},
} as const;
language: {
name: "언어",
sub: [
{
name: "한국어",
onClick: ({ setOpenMenu, dispatch }) => {
setOpenMenu(false)
dispatch(setLanguage("KOR"))
}
},
{
name: "English",
onClick: ({ setOpenMenu, dispatch }) => {
setOpenMenu(false)
dispatch(setLanguage("ENG"))
}
},
]
}
} as const

export default Menus;
export default Menus
Loading

0 comments on commit 6c26ce8

Please sign in to comment.