diff --git a/src/assets/img/arrow_right.png b/src/assets/img/arrow_right.png new file mode 100644 index 0000000..7bf786a Binary files /dev/null and b/src/assets/img/arrow_right.png differ diff --git a/src/assets/img/arrow_up.png b/src/assets/img/arrow_up.png new file mode 100644 index 0000000..72c2308 Binary files /dev/null and b/src/assets/img/arrow_up.png differ diff --git a/src/assets/img/btn_main_top_right.png b/src/assets/img/btn_main_top_right.png new file mode 100644 index 0000000..d21d608 Binary files /dev/null and b/src/assets/img/btn_main_top_right.png differ diff --git a/src/assets/img/fav_gray.png b/src/assets/img/fav_gray.png new file mode 100644 index 0000000..06e191f Binary files /dev/null and b/src/assets/img/fav_gray.png differ diff --git a/src/assets/img/fav_white.png b/src/assets/img/fav_white.png new file mode 100644 index 0000000..2ac1240 Binary files /dev/null and b/src/assets/img/fav_white.png differ diff --git a/src/assets/img/home.png b/src/assets/img/home.png new file mode 100644 index 0000000..a1bbcb0 Binary files /dev/null and b/src/assets/img/home.png differ diff --git a/src/assets/img/logout.png b/src/assets/img/logout.png new file mode 100644 index 0000000..0432683 Binary files /dev/null and b/src/assets/img/logout.png differ diff --git a/src/assets/img/main_logo.png b/src/assets/img/main_logo.png new file mode 100644 index 0000000..16c8225 Binary files /dev/null and b/src/assets/img/main_logo.png differ diff --git a/src/assets/img/menu.png b/src/assets/img/menu.png new file mode 100644 index 0000000..03a4e13 Binary files /dev/null and b/src/assets/img/menu.png differ diff --git a/src/assets/img/menu2_close.png b/src/assets/img/menu2_close.png new file mode 100644 index 0000000..18fe207 Binary files /dev/null and b/src/assets/img/menu2_close.png differ diff --git a/src/assets/img/menu_close.png b/src/assets/img/menu_close.png new file mode 100644 index 0000000..f3fbbdf Binary files /dev/null and b/src/assets/img/menu_close.png differ diff --git a/src/assets/img/notice.png b/src/assets/img/notice.png new file mode 100644 index 0000000..0dfb387 Binary files /dev/null and b/src/assets/img/notice.png differ diff --git a/src/assets/img/search.png b/src/assets/img/search.png new file mode 100644 index 0000000..78880d7 Binary files /dev/null and b/src/assets/img/search.png differ diff --git a/src/assets/img/setitng.png b/src/assets/img/setitng.png new file mode 100644 index 0000000..757ae28 Binary files /dev/null and b/src/assets/img/setitng.png differ diff --git a/src/assets/img/study.svg b/src/assets/img/study.svg new file mode 100644 index 0000000..dff3c4c --- /dev/null +++ b/src/assets/img/study.svg @@ -0,0 +1,12 @@ + + + + diff --git a/src/assets/img/tab_close.png b/src/assets/img/tab_close.png new file mode 100644 index 0000000..d63a65c Binary files /dev/null and b/src/assets/img/tab_close.png differ diff --git a/src/assets/img/tab_close_all.png b/src/assets/img/tab_close_all.png new file mode 100644 index 0000000..8658dd6 Binary files /dev/null and b/src/assets/img/tab_close_all.png differ diff --git a/src/assets/img/to_top.png b/src/assets/img/to_top.png new file mode 100644 index 0000000..e19d388 Binary files /dev/null and b/src/assets/img/to_top.png differ diff --git a/src/assets/img/view.svg b/src/assets/img/view.svg new file mode 100644 index 0000000..942915f --- /dev/null +++ b/src/assets/img/view.svg @@ -0,0 +1,12 @@ + + + + diff --git a/src/components/LoginForm/FormInput.tsx b/src/components/LoginForm/FormInput.tsx index 4228b2c..16977d3 100644 --- a/src/components/LoginForm/FormInput.tsx +++ b/src/components/LoginForm/FormInput.tsx @@ -20,7 +20,6 @@ function FormInput({value, setValue, type}: InputProps) { } const InputWrap = styled.input` - border: none; background-color: #a9d0f5; height: 4rem; width: 38rem; diff --git a/src/components/Menubar/BarTitle.tsx b/src/components/Menubar/BarTitle.tsx new file mode 100644 index 0000000..90a0e27 --- /dev/null +++ b/src/components/Menubar/BarTitle.tsx @@ -0,0 +1,55 @@ +import styled from 'styled-components'; +import Star from '@assets/img/fav_white.png'; +import Search from '@assets/img/search.png'; +import Close from '@assets/img/menu_close.png'; + +interface OpenProps { + setIsOpen: React.Dispatch>; +} + +function BarTitle({setIsOpen}: OpenProps) { + return ( + + 학부생수강시스템 + + + + setIsOpen(false)}> + + + + + ); +} + +const BarTitleContainer = styled.div` + background: rgb(163, 20, 50); + background: linear-gradient( + 90deg, + rgba(163, 20, 50, 1) 0%, + rgba(51, 77, 97, 1) 100% + ); + height: 4rem; + display: flex; + align-items: center; + justify-content: space-around; +`; + +const BarTitleWrap = styled.div` + ${props => props.theme.texts.subtitle}; + font-size: 1.5rem; + color: ${props => props.theme.colors.white}; +`; + +const IconBox = styled.div` + display: flex; + align-items: center; + column-gap: 0.5rem; +`; + +const CloseBtn = styled.button` + display: flex; + align-items: center; +`; + +export default BarTitle; diff --git a/src/components/Menubar/Menu.tsx b/src/components/Menubar/Menu.tsx new file mode 100644 index 0000000..f5cdfdb --- /dev/null +++ b/src/components/Menubar/Menu.tsx @@ -0,0 +1,78 @@ +import styled from 'styled-components'; +import arrow from '@assets/img/arrow_up.png'; +import hyphen from '@assets/img/menu2_close.png'; +import MenuItem from './MenuItem'; +import {useState} from 'react'; + +interface ItemProps { + id: number; + name: string; + type: string; +} + +const menuItems: ItemProps[] = [ + {id: 0, name: '수강신청', type: 'study'}, + {id: 1, name: '관심과목 담기', type: 'study'}, + {id: 2, name: '강의시간표 조회', type: 'view'}, +]; + +function Menu() { + const [focused, setFocused] = useState(null); + + const handleClick = (id: number) => { + setFocused(id); + }; + + return ( + + + 수강 및 변동신청 + + + + + 수강신청 및 기타 + + + {menuItems.map(item => ( + + ))} + + + ); +} + +const MenuContainer = styled.div``; +const MenuTitleBox = styled.div` + height: 4rem; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 15px; + border-bottom: 1px solid ${props => props.theme.colors.neutral4}; +`; +const MenuTitleWrap = styled.div` + ${props => props.theme.texts.menuTitle}; +`; + +const MenuSubtitleBox = styled(MenuTitleBox)` + ${props => props.theme.texts.menuTitle}; + justify-content: flex-start; + column-gap: 1rem; +`; + +const DetailBox = styled.div` + background-color: ${props => props.theme.colors.neutral5}; + display: flex; + flex-direction: column; + align-items: center; +`; + +export default Menu; diff --git a/src/components/Menubar/MenuItem.tsx b/src/components/Menubar/MenuItem.tsx new file mode 100644 index 0000000..80fd08a --- /dev/null +++ b/src/components/Menubar/MenuItem.tsx @@ -0,0 +1,36 @@ +import styled from 'styled-components'; +import View from '@assets/img/view.svg?react'; +import Study from '@assets/img/study.svg?react'; + +interface DetailProps { + id: number; + type: string; + name: string; + isActive: boolean; + onClick: (id: number) => void; +} + +function MenuItem({id, type, name, isActive, onClick}: DetailProps) { + return ( + onClick(id)}> + {type === 'view' ? : } + {name} + + ); +} + +const DetailWrap = styled.button<{isactive: boolean}>` + ${props => props.theme.texts.tableTitle}; + width: 17.5rem; + height: 2.8rem; + display: flex; + align-items: center; + column-gap: 1rem; + padding-left: 10px; + + background-color: ${props => + props.isactive ? props.theme.colors.primary : 'transparent'}; + color: ${props => props.isactive && props.theme.colors.white}; +`; + +export default MenuItem; diff --git a/src/components/Menubar/Menubar.tsx b/src/components/Menubar/Menubar.tsx deleted file mode 100644 index 16e7537..0000000 --- a/src/components/Menubar/Menubar.tsx +++ /dev/null @@ -1,7 +0,0 @@ -function Menubar() { - return ( -
- ); -} - -export default Menubar; \ No newline at end of file diff --git a/src/components/Menubar/index.tsx b/src/components/Menubar/index.tsx new file mode 100644 index 0000000..e08516d --- /dev/null +++ b/src/components/Menubar/index.tsx @@ -0,0 +1,51 @@ +import styled from 'styled-components'; +import {useState} from 'react'; +import BarTitle from './BarTitle'; +import Menu from './Menu'; +import close from '@assets/img/menu_close.png'; + +function Menubar() { + const [isOpen, setIsOpen] = useState(true); + + return ( + + {isOpen ? ( + + + + + ) : ( + + setIsOpen(true)}> + + + + )} + + ); +} + +const BarContainer = styled.div` + height: 100vh; +`; + +const OpendBar = styled.div` + width: 23rem; +`; + +const ClosedBar = styled.div` + width: 2rem; + height: 100%; + background-color: ${props => props.theme.colors.neutral4}; +`; + +const OpenBtn = styled.button` + width: 100%; + height: 4rem; + background-color: ${props => props.theme.colors.primary}; + > img { + transform: rotate(180deg); + } +`; + +export default Menubar; diff --git a/src/pages/index/Home.tsx b/src/pages/index/Home.tsx index 504f956..6dc66f2 100644 --- a/src/pages/index/Home.tsx +++ b/src/pages/index/Home.tsx @@ -1,15 +1,18 @@ import styled from 'styled-components'; +import Menubar from '@components/Menubar'; function Home() { - return ( - - 강의시간표/수업계획서조회 - - ); + return ( + + + 강의시간표/수업계획서조회 + + ); } const Container = styled.div` - ${props=>props.theme.texts.title}; + ${props => props.theme.texts.title}; + display: flex; `; -export default Home; \ No newline at end of file +export default Home; diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx index 9aaeede..e37b293 100644 --- a/src/styles/GlobalStyle.tsx +++ b/src/styles/GlobalStyle.tsx @@ -31,6 +31,9 @@ const GlobalStyle = createGlobalStyle` cursor: pointer; outline: none; border-radius: 2px; + background:transparent; + border:none; + padding:0; } `; diff --git a/src/styles/theme/Theme.ts b/src/styles/theme/Theme.ts index 4bbc7a5..062f09e 100644 --- a/src/styles/theme/Theme.ts +++ b/src/styles/theme/Theme.ts @@ -15,7 +15,7 @@ const colors = { const texts = { title: { - fontSize: '2.1rem', + fontSize: '2rem', fontWeight: '700', color: '#222', }, @@ -24,6 +24,11 @@ const texts = { fontWeight: '600', color: '#333', }, + menuTitle: { + fontSize: '1.3rem', + fontWeight: '600', + color: '#333', + }, content: { fontSize: '1.2rem', fontWeight: '400',