diff --git a/src/App.tsx b/src/App.tsx index 41cc382..b62f8e2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,9 @@ +import {useEffect} from 'react'; import {Route, Routes} from 'react-router-dom'; import {ThemeProvider} from 'styled-components'; import GlobalStyle from './styles/GlobalStyle'; import {theme} from './styles/theme/Theme'; -// import Home from '@pages/index/Home'; -// import Login from '@pages/index/Login'; -// import ProtectedRoute from './components/ProtectedRoute'; -import {useEffect} from 'react'; - import ReactGA from 'react-ga4'; -import Maintenance from '@pages/Maintenance.tsx'; import ProtectedRoute from '@components/ProtectedRoute.tsx'; import Home from '@pages/index/Home.tsx'; import Login from '@pages/index/Login.tsx'; @@ -27,15 +22,14 @@ function App() { - } /> - } /> + } /> + } /> - // } /> diff --git a/src/apis/api/auth.ts b/src/apis/api/auth.ts index 46122b7..086ac48 100644 --- a/src/apis/api/auth.ts +++ b/src/apis/api/auth.ts @@ -35,3 +35,14 @@ export const refreshAccessToken = async (): Promise => { throw error; } }; + + +export const withdrawal = async (studentId: string)=> { + try { + const {data} = await baseAPI.delete(`/api/auth/withdrawal/${studentId}`); + return data; + } catch (error) { + console.log('Failed User withdrawal'); + throw error; + } +}; \ No newline at end of file diff --git a/src/components/CourseRegister/RegisterFilters.tsx b/src/components/CourseRegister/RegisterFilters.tsx index 61d7462..33a4d78 100644 --- a/src/components/CourseRegister/RegisterFilters.tsx +++ b/src/components/CourseRegister/RegisterFilters.tsx @@ -89,7 +89,6 @@ function RegisterFilters({onSearch, isRegistrationStarted}: FiltersProps) { 조직분류 handleInput(value)} @@ -99,7 +98,6 @@ function RegisterFilters({onSearch, isRegistrationStarted}: FiltersProps) { 년도/학기 handleInput(value)} @@ -110,7 +108,6 @@ function RegisterFilters({onSearch, isRegistrationStarted}: FiltersProps) { 검색 구분 handleSearchOptions(value)} /> @@ -119,7 +116,6 @@ function RegisterFilters({onSearch, isRegistrationStarted}: FiltersProps) { {searchOption} handleSelect('curiTypeCdNm', value)} diff --git a/src/components/CourseRegister/RegisteredList.tsx b/src/components/CourseRegister/RegisteredList.tsx index 5d26cf8..14c0ab2 100644 --- a/src/components/CourseRegister/RegisteredList.tsx +++ b/src/components/CourseRegister/RegisteredList.tsx @@ -25,7 +25,7 @@ interface RegisteredListProps { refreshAll: () => Promise; } -function RegisteredList({ list, refreshAll }: RegisteredListProps) { +function RegisteredList({list, refreshAll}: RegisteredListProps) { const handleAction = async ( _action: string, scheduleId: number | undefined, @@ -64,16 +64,15 @@ const ListContainer = styled.div` `; const ButtonWrap = styled.button` - ${props => props.theme.texts.content}; - // background-color: ${props => props.theme.colors.primary}; - background-color: #46515b; - color: ${props => props.theme.colors.white}; - width: 6rem; - height: 2.4rem; + ${props => props.theme.texts.content}; + background-color: ${props => props.theme.colors.secondary}; + color: ${props => props.theme.colors.white}; + width: 6rem; + height: 2.4rem; - &:hover { - filter: grayscale(15%); - } + &:hover { + filter: grayscale(15%); + } `; export default RegisteredList; diff --git a/src/components/DeleteAccount/DeleteAccountForm.tsx b/src/components/DeleteAccount/DeleteAccountForm.tsx index 550ec74..fa0087e 100644 --- a/src/components/DeleteAccount/DeleteAccountForm.tsx +++ b/src/components/DeleteAccount/DeleteAccountForm.tsx @@ -1,68 +1,30 @@ import {useState} from 'react'; import styled from 'styled-components'; -import FormInput from '@components/LoginForm/FormInput.tsx'; -import {login} from '@/apis/api/auth'; -import {useDispatch} from 'react-redux'; import {useNavigate} from 'react-router-dom'; -import {setUserInfo} from '@/store/userSlice'; -import {baseAPI} from '@/apis/utils/instance'; -import Cookies from 'js-cookie'; - -import copyIcon from '@/assets/img/file-copy-line.png'; -import reloadIcon from '@/assets/img/refresh-line.png'; - - -export type setType = string | number | undefined; +import {withdrawal} from '@/apis/api/auth'; +import FormInput from '@components/LoginForm/FormInput.tsx'; function DeleteAccountForm() { const [id, setId] = useState(''); - const [error, setError] = useState(null); - const dispatch = useDispatch(); + const navigate = useNavigate(); const handleDelete = async () => { - if (!id) { - setError('학번과 비밀번호를 모두 입력해주세요.'); - return; - } - if (id.length < 11) { setError('11자리 이상의 임의 학번을 입력해주세요!'); return; } - if (!isTermsCheck) { - setError('이용약관에 동의하지 않으셨습니다.'); - - window.scrollTo({ - top: document.documentElement.scrollHeight, - behavior: 'smooth' - }); - return; - } - try { - const response = await login({ - studentId: id.toString(), - password: password.toString(), - }); - console.log('Login successful'); - - Cookies.set('accessToken', response.accessToken, {expires: 0.5 / 24}); - baseAPI.defaults.headers.common['Authorization'] = - `Bearer ${response.accessToken}`; - - dispatch( - setUserInfo({ - username: response.username, - }), - ); + const response = await withdrawal(id); + console.log(response); + console.log('Withdrawal successful'); navigate('/'); } catch (error) { - console.error('Login failed', error); - setError('로그인에 실패했습니다. 다시 시도해주세요.'); + console.error('Withdrawal failed', error); + setError('제거 실패'); } }; @@ -71,13 +33,12 @@ function DeleteAccountForm() { 학번 - + navigate('/login')}>로그인 페이지 - {error && {error}} - + 제거 @@ -85,54 +46,54 @@ function DeleteAccountForm() { } const FormContainer = styled.div` - padding: 1.5rem 4rem; - background-color: ${props => props.theme.colors.white}; - border-radius: 0.3rem; - margin-bottom: 2rem; + padding: 1.5rem 4rem; + background-color: ${props => props.theme.colors.white}; + border-radius: 0.3rem; + margin-bottom: 2rem; `; const InputContainer = styled.div` - margin-bottom: 2.5rem; + margin-bottom: 2.5rem; `; const InputBox = styled.div` - margin-top: 2rem; + margin-top: 2rem; `; const LabelWrap = styled.div` - ${props => props.theme.texts.loginContent}; - margin-bottom: 0.7rem; + ${props => props.theme.texts.loginContent}; + margin-bottom: 0.7rem; `; const LoginBtnWrap = styled.button` - width: 100%; - height: 5rem; - background-color: #46515b; - border: none; - border-radius: 5rem; - color: ${props => props.theme.colors.white}; - font-size: 1.7rem; - font-weight: 700; - box-shadow: 0px 4px 5px lightgray; - margin-bottom: 2rem; - - &:hover { - background-color: #c3002fc7; - } + width: 100%; + height: 5rem; + background-color: ${props => props.theme.colors.secondary}; + border: none; + border-radius: 5rem; + color: ${props => props.theme.colors.white}; + font-size: 1.7rem; + font-weight: 700; + box-shadow: 0px 4px 5px lightgray; + margin-bottom: 2rem; + + &:hover { + background-color: #c3002fc7; + } `; const FindWrap = styled.div` - ${props => props.theme.texts.tableTitle}; - color: ${props => props.theme.colors.neutral4}; - float: inline-end; - margin-top: 2rem; - margin-bottom: 2rem; + ${props => props.theme.texts.tableTitle}; + color: ${props => props.theme.colors.neutral4}; + float: inline-end; + margin-top: 2rem; + margin-bottom: 2rem; `; const ErrorMessage = styled.div` - color: red; - margin-bottom: 1rem; - text-align: center; + color: red; + margin-bottom: 1rem; + text-align: center; `; -export default DeleteAccountForm; \ No newline at end of file +export default DeleteAccountForm; diff --git a/src/components/Header/TopMenu.tsx b/src/components/Header/TopMenu.tsx index 92878bf..e140dec 100644 --- a/src/components/Header/TopMenu.tsx +++ b/src/components/Header/TopMenu.tsx @@ -24,7 +24,7 @@ function TopMenu() { return ( - + ); @@ -37,38 +37,13 @@ const TopMenuContainer = styled.div` `; const LogoutBtn = styled.button` - background-image: url(${logout}); - background-size: 1.8rem; - width: 1.8rem; - height: 1.8rem; + background-image: url(${logout}); + background-size: 1.8rem; + width: 1.8rem; + height: 1.8rem; - &:hover { - filter: brightness(20%); - } -`; - -const DropdownWrap = styled.div` - ${props => props.theme.texts.tableTitle}; - font-size: 1.3rem; - display: flex; - align-items: center; - column-gap: 1.5rem; - - > img { - &:hover { - filter: brightness(20%); - } - } -`; - -const GroupWrap = styled.div` - display: flex; - column-gap: 1rem; - - > img { - &:hover { - filter: brightness(20%); - } + &:hover { + filter: brightness(20%); } `; diff --git a/src/components/Header/TopNav.tsx b/src/components/Header/TopNav.tsx index b03956d..56fca4c 100644 --- a/src/components/Header/TopNav.tsx +++ b/src/components/Header/TopNav.tsx @@ -3,8 +3,7 @@ import styled from 'styled-components'; function TopNav() { return ( - {/*Tutorial Sejong 수강신청 연습 시스템*/} - 본 서비스는 실제 수강신청 사이트가 아닙니다. + :  세종대학교 수강신청 연습 사이트 ); } @@ -12,16 +11,12 @@ function TopNav() { const TopNavContatiner = styled.div` display: flex; flex-shrink: 0; + align-items: center; `; -const TopNavWrap = styled.button` - ${props => props.theme.texts.title}; - font-size: 1.6rem; - margin-right: 4rem; - - &:focus { - color: ${props => props.theme.colors.primary}; - } +const TopNavWrap = styled.div` + ${props => props.theme.texts.loginContent}; + font-size: 1.5rem; `; export default TopNav; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 64a6470..097ed75 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -8,6 +8,7 @@ function Header() {
+ 세종 튜토리얼
@@ -20,23 +21,23 @@ function Header() { const HeaderContainer = styled.div` border-top: 0.5rem solid ${props => props.theme.colors.primary}; max-width: 100%; - height: 6rem; + height: 7rem; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; - > div >img { - height: 60px; - padding-left: 5rem; - padding-right: 3.5rem; - } + > div > img { + height: 6rem; + padding-right: 1rem; + } `; const HeaderBox = styled.div` display: flex; flex-grow: 1; + height: 100%; justify-content: space-between; - margin-left: 7.5rem; + margin-left: 2rem; `; export default Header; diff --git a/src/components/LectureList/Filters.tsx b/src/components/LectureList/Filters.tsx index e62d63d..2ad888c 100644 --- a/src/components/LectureList/Filters.tsx +++ b/src/components/LectureList/Filters.tsx @@ -42,7 +42,6 @@ function Filters({onSearch}: FiltersProps) { 조직분류 handleSelect('curiTypeCdNm', value)} @@ -52,7 +51,6 @@ function Filters({onSearch}: FiltersProps) { 년도/학기 handleSelect('curiTypeCdNm', value)} @@ -62,7 +60,6 @@ function Filters({onSearch}: FiltersProps) { 이수구분 handleSelect('curiTypeCdNm', value)} /> @@ -71,7 +68,6 @@ function Filters({onSearch}: FiltersProps) { 선택영역 handleSelect('sltDomainCdNm', value)} /> @@ -80,7 +76,6 @@ function Filters({onSearch}: FiltersProps) { 학과전공 handleSelect('schDeptAlias', value)} /> @@ -100,10 +95,10 @@ function Filters({onSearch}: FiltersProps) { /> - diff --git a/src/components/LoginForm/index.tsx b/src/components/LoginForm/index.tsx index ff472bc..d8f98f6 100644 --- a/src/components/LoginForm/index.tsx +++ b/src/components/LoginForm/index.tsx @@ -12,7 +12,6 @@ import {generateRandomStudentId} from '@/utils/randomUtils.ts'; import copyIcon from '@/assets/img/file-copy-line.png'; import reloadIcon from '@/assets/img/refresh-line.png'; - export type setType = string | number | undefined; function LoginForm({isTermsCheck}: {isTermsCheck: boolean}) { @@ -22,13 +21,16 @@ function LoginForm({isTermsCheck}: {isTermsCheck: boolean}) { const dispatch = useDispatch(); const navigate = useNavigate(); - const [randomStudentId, setRandomStudentId] = useState(generateRandomStudentId); + const [randomStudentId, setRandomStudentId] = useState( + generateRandomStudentId, + ); const handleRandomStudentId = () => { setRandomStudentId(generateRandomStudentId); }; const handleCopyStudentId = () => { - navigator.clipboard.writeText(randomStudentId.toString()) + navigator.clipboard + .writeText(randomStudentId.toString()) .then(() => { alert('복사 완료!'); }) @@ -42,7 +44,7 @@ function LoginForm({isTermsCheck}: {isTermsCheck: boolean}) { return; } - if (id.length < 11) { + if (typeof id === 'string' && id.length < 11) { setError('11자리 이상의 임의 학번을 입력해주세요!'); return; } @@ -52,33 +54,33 @@ function LoginForm({isTermsCheck}: {isTermsCheck: boolean}) { window.scrollTo({ top: document.documentElement.scrollHeight, - behavior: 'smooth' + behavior: 'smooth', }); return; } - try { - const response = await login({ - studentId: id.toString(), - password: password.toString(), - }); - console.log('Login successful'); - - Cookies.set('accessToken', response.accessToken, {expires: 0.5 / 24}); - baseAPI.defaults.headers.common['Authorization'] = - `Bearer ${response.accessToken}`; - - dispatch( - setUserInfo({ - username: response.username, - }), - ); - - navigate('/'); - } catch (error) { - console.error('Login failed', error); - setError('로그인에 실패했습니다. 다시 시도해주세요.'); - } + try { + const response = await login({ + studentId: id.toString(), + password: password.toString(), + }); + console.log('Login successful'); + + Cookies.set('accessToken', response.accessToken, {expires: 0.5 / 24}); + baseAPI.defaults.headers.common['Authorization'] = + `Bearer ${response.accessToken}`; + + dispatch( + setUserInfo({ + username: response.username, + }), + ); + + navigate('/'); + } catch (error) { + console.error('Login failed', error); + setError('로그인에 실패했습니다. 다시 시도해주세요.'); + } }; return ( @@ -88,22 +90,26 @@ function LoginForm({isTermsCheck}: {isTermsCheck: boolean}) { 임의 학번, 비밀번호 생성 {randomStudentId} - reload - copy + + reload + + + copy + 학번 - + 비밀번호 - + {/*아이디 찾기 | 비밀번호 찾기*/} {error && {error}} - + 로그인 @@ -111,80 +117,71 @@ function LoginForm({isTermsCheck}: {isTermsCheck: boolean}) { } const FormContainer = styled.div` - padding: 1.5rem 4rem; - background-color: ${props => props.theme.colors.white}; - border-radius: 0.3rem; - margin-bottom: 2rem; + padding: 1.5rem 4rem; + background-color: ${props => props.theme.colors.white}; + border-radius: 0.3rem; + margin-bottom: 2rem; `; const InputContainer = styled.div` - margin-bottom: 2.5rem; + margin-bottom: 2.5rem; `; const InputBox = styled.div` - margin-top: 2rem; + margin-top: 2rem; `; const RandomStudentIdContainer = styled.div` - display: flex; - justify-content: flex-start; - align-items: center; + display: flex; + justify-content: flex-start; + align-items: center; `; - const RandomStudentIdInput = styled.p` - border-bottom: 1px solid #000000; - padding: 5px 10px; - font-size: 1.7rem; - font-weight: 700; - flex: 1 1 0; + border-bottom: 1px solid #000000; + padding: 5px 10px; + font-size: 1.7rem; + font-weight: 700; + flex: 1 1 0; `; const GenerateButton = styled.button` - display: block; - padding: 10px; - font-size: 1.7rem; - font-weight: 700; - - > img { - width: 20px; - } + display: block; + padding: 10px; + font-size: 1.7rem; + font-weight: 700; + + > img { + width: 20px; + } `; const LabelWrap = styled.div` - ${props => props.theme.texts.loginContent}; - margin-bottom: 0.7rem; -`; - - -const FindWrap = styled.div` - ${props => props.theme.texts.tableTitle}; - color: ${props => props.theme.colors.neutral4}; - float: inline-end; - margin-bottom: 2.5rem; + ${props => props.theme.texts.loginContent}; + margin-bottom: 0.7rem; `; const LoginBtnWrap = styled.button` - width: 100%; - height: 5rem; - background-color: #46515b; - border: none; - border-radius: 5rem; - color: ${props => props.theme.colors.white}; - font-size: 1.7rem; - font-weight: 700; - box-shadow: 0px 4px 5px lightgray; - margin-bottom: 2rem; - - &:hover { - background-color: #c3002fc7; - } + width: 100%; + height: 5rem; + background-color: ${props => props.theme.colors.secondary}; + border: none; + border-radius: 5rem; + color: ${props => props.theme.colors.white}; + font-size: 1.7rem; + font-weight: 700; + box-shadow: 0px 4px 5px lightgray; + margin-bottom: 2rem; + + &:hover { + background-color: #c3002fc7; + } `; const ErrorMessage = styled.div` - color: red; - margin-bottom: 1rem; - text-align: center; + color: red; + margin-bottom: 1rem; + text-align: center; `; export default LoginForm; diff --git a/src/components/Menubar/BarTitle.tsx b/src/components/Menubar/BarTitle.tsx index c1bbd4b..492ebe5 100644 --- a/src/components/Menubar/BarTitle.tsx +++ b/src/components/Menubar/BarTitle.tsx @@ -12,17 +12,11 @@ function BarTitle() { } const BarTitleContainer = styled.div` - background: linear-gradient( - 90deg, - rgba(163, 20, 50, 1) 0%, - rgba(51, 77, 97, 1) 100% - ); + background: ${props => props.theme.colors.secondary}; height: 4rem; display: flex; align-items: center; justify-content: space-around; - border-top-left-radius: 5px; - border-top-right-radius: 5px; `; const BarTitleWrap = styled.div` diff --git a/src/components/Menubar/Menu.tsx b/src/components/Menubar/Menu.tsx index 1a92b71..b0f4a7d 100644 --- a/src/components/Menubar/Menu.tsx +++ b/src/components/Menubar/Menu.tsx @@ -26,13 +26,7 @@ function Menu() { return ( - {/**/} - {/* 수강 및 변동신청*/} - {/* */} - {/**/} - - 수강신청 및 기타 - + 수강신청 및 기타 {menuItems.map(item => ( props.theme.colors.neutral5}; `; -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; + ${props => props.theme.texts.menuTitle}; + justify-content: flex-start; + column-gap: 1rem; `; const DetailBox = styled.div` @@ -73,8 +64,8 @@ const DetailBox = styled.div` display: flex; flex-direction: column; align-items: center; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; `; export default Menu; diff --git a/src/components/Menubar/MenuItem.tsx b/src/components/Menubar/MenuItem.tsx index c4396f6..62e8f08 100644 --- a/src/components/Menubar/MenuItem.tsx +++ b/src/components/Menubar/MenuItem.tsx @@ -14,37 +14,31 @@ interface DetailProps { function MenuItem({id, type, name, isActive, onClick}: DetailProps) { return ( onClick(id)}> - { - type === 'search' - ? - - : - type === 'bookmark' - ? - - : - - } + {type === 'search' ? ( + + ) : type === 'bookmark' ? ( + + ) : ( + + )} {name} ); } const DetailWrap = styled.button<{$isactive: boolean}>` - ${props => props.theme.texts.tableTitle}; - width: 19rem; - height: 2.8rem; - display: flex; - align-items: center; - column-gap: 1rem; - padding-left: 10px; - - border-radius: 5px; - margin-top: 5px; - - background-color: ${props => - props.$isactive ? props.theme.colors.primary : 'transparent'}; - color: ${props => props.$isactive && props.theme.colors.white}; + ${props => props.theme.texts.tableTitle}; + width: 19rem; + height: 2.8rem; + display: flex; + align-items: center; + column-gap: 1rem; + padding-left: 10px; + border-radius: 5px; + margin-top: 5px; + 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/index.tsx b/src/components/Menubar/index.tsx index 0af27ea..9a3f8fc 100644 --- a/src/components/Menubar/index.tsx +++ b/src/components/Menubar/index.tsx @@ -3,7 +3,6 @@ import BarTitle from './BarTitle'; import Menu from './Menu'; function Menubar() { - return ( @@ -13,10 +12,8 @@ function Menubar() { } const BarContainer = styled.div` - width: 210px; - margin-left: 10px; - margin-right: 10px; + width: 21rem; + margin: 0 1rem; `; - export default Menubar; diff --git a/src/components/TabMenu/Tab.tsx b/src/components/TabMenu/Tab.tsx index 15809c6..13d7ce9 100644 --- a/src/components/TabMenu/Tab.tsx +++ b/src/components/TabMenu/Tab.tsx @@ -34,68 +34,52 @@ function Tab({id, label, isActive, onClick}: TabProps) { } const TabContainer = styled.a<{$isactive: boolean}>` - ${props => - props.$isactive - ? props.theme.texts.tabTitleFocus - : props.theme.texts.tabTitle}; - background-color: ${props => - props.$isactive ? props.theme.colors.white : 'transparent'}; - width: calc(99% / 7); - height: 100%; - border: 1px solid #ccc; - border-bottom: none; - border-left: none; - border-top-right-radius: 5px; - border-top-left-radius: 5px; - padding: 0 1rem; - display: flex; - align-items: center; - text-align: center; - cursor: pointer; - filter: ${props => (props.$isactive ? 'grayscale(0)' : 'grayscale(100%)')}; - position: relative; // 위치 상대 설정 추가 - overflow: hidden; // 가상 요소가 밖으로 나가지 않도록 설정 + ${props => + props.$isactive + ? props.theme.texts.tabTitleFocus + : props.theme.texts.tabTitle}; + background-color: ${props => + props.$isactive ? props.theme.colors.white : 'transparent'}; + width: calc(99% / 7); + height: 102%; + border-bottom: none; + border-right: 1px solid #ccc; + padding: 0 1rem; + display: flex; + align-items: center; + text-align: center; + cursor: pointer; + filter: ${props => (props.$isactive ? 'grayscale(0)' : 'grayscale(100%)')}; + position: relative; + overflow: hidden; - &::before { - content: ''; - position: absolute; - left: 0; - right: 0; - top: 0; - height: 3px; - ${props => props.$isactive && css` - background-color: ${props => props.theme.colors.primary}; - `} - } - - > p { - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - word-break: break-all; - margin-right: 1rem; - } + > p { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-break: break-all; + margin-right: 1rem; + } - ${props => - !props.$isactive && - css` - &:hover { - background-color: white; - filter: grayscale(0); - } - `} + ${props => + !props.$isactive && + css` + &:hover { + color: ${props => props.theme.colors.primary}; + filter: grayscale(0); + } + `} `; - const CloseBtn = styled.button` - z-index: 5; - width: 1.8rem; - height: 100%; - background-image: url(${close}); - background-size: 1.8rem; - background-repeat: no-repeat; - background-position-y: center; + z-index: 5; + width: 1.8rem; + height: 100%; + background-image: url(${close}); + background-size: 1.8rem; + background-repeat: no-repeat; + background-position-y: center; `; export default Tab; diff --git a/src/components/TabMenu/index.tsx b/src/components/TabMenu/index.tsx index ee05fd8..7c883a4 100644 --- a/src/components/TabMenu/index.tsx +++ b/src/components/TabMenu/index.tsx @@ -1,7 +1,7 @@ import {useAppDispatch, useAppSelector} from '@/store/hooks'; import styled from 'styled-components'; import Tab from './Tab'; -import {deleteAll, setFocused} from '@/store/modules/tabSlice'; +import {setFocused} from '@/store/modules/tabSlice'; function TabMenu() { const dispatch = useAppDispatch(); @@ -44,5 +44,4 @@ const TabWrap = styled.div` display: flex; `; - export default TabMenu; diff --git a/src/components/Wishlist/Filters.tsx b/src/components/Wishlist/Filters.tsx index 1f59f1f..0be5737 100644 --- a/src/components/Wishlist/Filters.tsx +++ b/src/components/Wishlist/Filters.tsx @@ -59,7 +59,6 @@ function Filters({setSearchResults}: FiltersProps) { } else { // filter.curiNm = searchParams.curiNm; filter.curiNo = searchParams.curiNo; - } if (!searchParams.classNo || searchParams.classNo.length < 2) { setError('분반'); @@ -87,8 +86,6 @@ function Filters({setSearchResults}: FiltersProps) { } try { - - console.log(filter); const data = await getCourseList(filter); setSearchResults(Array.isArray(data) ? data : []); } catch (error) { @@ -155,7 +152,6 @@ function Filters({setSearchResults}: FiltersProps) { 조직분류 {}} @@ -165,7 +161,6 @@ function Filters({setSearchResults}: FiltersProps) { 년도/학기 {}} @@ -176,16 +171,13 @@ function Filters({setSearchResults}: FiltersProps) { 검색구분 handleInputChange('searchType', value || '')} /> {renderSearchForm()} - - 검색 - + 검색 ); @@ -228,22 +220,17 @@ const FilterWrap = styled.div` `; const SearchButton = styled.button` - ${props => props.theme.texts.content}; - //background: linear-gradient( - // 90deg, - // rgba(163, 20, 50, 1) 0%, - // rgba(51, 77, 97, 1) 100% - //); - background-color: #46515b; - color: ${props => props.theme.colors.white}; - min-width: 6.5rem; - height: 2.4rem; - display: flex; - align-items: center; - justify-content: center; - gap: 0.8rem; - border: none; - cursor: pointer; + ${props => props.theme.texts.content}; + background-color: ${props => props.theme.colors.secondary}; + color: ${props => props.theme.colors.white}; + min-width: 6.5rem; + height: 2.4rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.8rem; + border: none; + cursor: pointer; `; export default Filters; diff --git a/src/components/common/FilterButton.tsx b/src/components/common/FilterButton.tsx index f7ba12d..8aca4eb 100644 --- a/src/components/common/FilterButton.tsx +++ b/src/components/common/FilterButton.tsx @@ -19,13 +19,13 @@ interface ButtonProps { } function FilterButton({ - label, - filter, - onSearch, - searchOption, - isRegister = false, - isRegistrationStarted, - }: ButtonProps) { + label, + filter, + onSearch, + searchOption, + isRegister = false, + isRegistrationStarted, +}: ButtonProps) { const dispatch = useAppDispatch(); const studentId = useAppSelector(state => state.userInfo.username); @@ -68,28 +68,19 @@ function FilterButton({ return; }; - return ( - - {label} - - ); + return {label}; } const ButtonWrap = styled.button` - ${props => props.theme.texts.content}; - //background: linear-gradient( - // 90deg, - // rgba(163, 20, 50, 1) 0%, - // rgba(51, 77, 97, 1) 100% - //); - background-color: #46515b; - color: ${props => props.theme.colors.white}; - min-width: 6.5rem; - height: 2.4rem; - display: flex; - align-items: center; - justify-content: center; - gap: 0.8rem; + ${props => props.theme.texts.content}; + background-color: ${props => props.theme.colors.secondary}; + color: ${props => props.theme.colors.white}; + min-width: 6.5rem; + height: 2.4rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.8rem; `; export default FilterButton; diff --git a/src/components/common/SelectBox.tsx b/src/components/common/SelectBox.tsx index e110ccc..c07384c 100644 --- a/src/components/common/SelectBox.tsx +++ b/src/components/common/SelectBox.tsx @@ -9,19 +9,12 @@ interface OptionsInterface { interface SelectProps { options: OptionsInterface[]; - tagged: boolean; disabled?: boolean; sizes: string; onSelect: (value: string) => void; } -function SelectBox({ - options, - tagged, - disabled = false, - sizes, - onSelect, -}: SelectProps) { +function SelectBox({options, disabled = false, sizes, onSelect}: SelectProps) { const [open, setOpen] = useState(false); const [input, setInput] = useState(options[0].value); const [selected, setSelected] = useState(options[0].value); @@ -72,7 +65,6 @@ function SelectBox({ return ( - {/*{tagged && }*/} @@ -131,12 +123,6 @@ const InputContainer = styled.div<{disabled: boolean}>` } `; -const TagWrap = styled.img<{disabled: boolean}>` - position: absolute; - z-index: 2; - filter: ${props => (props.disabled ? 'grayscale(100%)' : 'none')}; -`; - const InputWrap = styled.input` ${props => props.theme.texts.content}; width: calc(100% - 1rem); @@ -155,7 +141,6 @@ const InputWrap = styled.input` const ArrowWrap = styled.img` position: absolute; right: 0.3rem; - `; const SelectWrap = styled.ul` diff --git a/src/pages/index/Login.tsx b/src/pages/index/Login.tsx index 55c9201..6d75f99 100644 --- a/src/pages/index/Login.tsx +++ b/src/pages/index/Login.tsx @@ -8,13 +8,11 @@ import {useState} from 'react'; import {useNavigate} from 'react-router-dom'; function Login() { - const [isTermsCheck, setTermsCheck] = useState(false); const navigate = useNavigate(); const handleTermsCheck = (e: React.ChangeEvent) => { - setTermsCheck(e.target.checked); }; @@ -26,135 +24,149 @@ function Login() { 로그인 - 본 서비스는 실제 수강신청 시스템이 아닙니다. + + 본 서비스는 실제 세종대학교 수강신청 시스템이 아닙니다. +

수강신청 연습사이트 tutorial-sejong 입니다.
임의의 학번을 입력해주시면 됩니다.
- 동일한 학번으로 로그인하면 이전의 관심과목을 불러옵니다. - {/*서비스 이용을 끝낸 후에는 개인정보보호를 위하여 꼭 로그아웃*/} - {/*을 해주시기 바랍니다.*/} - {/*
아이디는 학생은 학번, 교수/직원은{' '}*/} - {/*포털 아이디(이메일아이디)*/} - {/*또는 직번입니다.*/} + 동일한 학번으로 로그인하면 이전의 관심과목을 + 불러옵니다.

- {/**/} - {/**/} - {/**/} - {/**/} [ 장애 문의 ]: tutorialsejong@gmail.com - github window.open('https://github.com/tutorial-sejong')} /> + + github window.open('https://github.com/tutorial-sejong')} + /> + 서비스 이용약관 동의 - 본 서비스는 실제 수강신청 사이트가 아닙니다. + 본 서비스는{' '} + 실제 수강신청 사이트가 아닙니다. - 본 서비스에서 사용하는 학번은 실제 학번이 아닌 11자리 이상의 임의의 학번입니다. + 본 서비스에서 사용하는 학번은{' '} + 실제 학번이 아닌 11자리 이상의 임의의 학번 + 입니다. - 입력하신 비밀번호는 암호화 기술을 사용하여 보호됩니다만, 실제 사용하는 비밀번호가 아닌 임의의 비밀번호를 - 사용하는 것을 추천드립니다. + 입력하신 비밀번호는{' '} + 암호화 기술을 사용하여 보호됩니다만,{' '} + + 실제 사용하는 비밀번호가 아닌 임의의 비밀번호 + + 를 사용하는 것을 추천드립니다. - 본 서비스에서는 사용자가 입력한 학번, 비밀번호, 관심과목, 수강신청 목록이 저장됩니다. + 본 서비스에서는 사용자가 입력한{' '} + 학번, 비밀번호, 관심과목, 수강신청 목록이 + 저장됩니다. - 수집된 정보는 저장된 과목들을 사용자에게 불러오는 용도로만 사용되며, 다른 용도로는 사용되지 않습니다. + 수집된 정보는{' '} + 저장된 과목들을 사용자에게 불러오는 용도 + 로만 사용되며, 다른 용도로는 사용되지 않습니다. 저장된 정보는 매일 자정에 삭제됩니다. - 일요일 전에 관심과목 목록을 삭제하고 싶으시면, navigate('/delete')}>https://tutorial-sejong.com/delete로 접속하여 로그인 시 입력한 학번을 - 입력하시면 됩니다. + 일요일 전에 관심과목 목록을 삭제하고 싶으시면,{' '} + navigate('/delete')}> + https://tutorial-sejong.com/delete + + 로 접속하여 로그인 시 입력한 학번을 입력하시면 됩니다. - 학번을 기억하지 못하실 경우, tutorialsejong@gmail.com으로 메일 주시면 관심과목 목록 및 로그인 시간을 기준으로 삭제를 - 도와드리겠습니다. + 학번을 기억하지 못하실 경우,{' '} + tutorialsejong@gmail.com으로 메일 주시면 + 관심과목 목록 및 로그인 시간을 기준으로 삭제를 도와드리겠습니다. - 만약 관심과목 목록과 로그인 시간으로 확인할 수 없는 경우, 모든 정보를 삭제하도록 하겠습니다. + 만약 관심과목 목록과 로그인 시간으로 확인할 수 없는 경우,{' '} + 모든 정보를 삭제하도록 하겠습니다. - - + + - {/**/} - {/* 세종대학교 05006 서울특별시 광진구 능동로 209 (군자동) |{' '}*/} - {/* TEL */} - {/* 02.3408.3114 | E-MAIL itservice@sejong.ac.kr*/} - {/*
*/} - {/*

COPYRIGHT 2012 SEJONG UNIVERSITY. ALL RIGHTS RESVERED.

*/} - {/**/} ); } const Container = styled.div` - background: url(${Bg}) 50% 50% no-repeat; - background-size: cover; - height: 700px; - background-color: #fafafa; - width: 100%; + background: url(${Bg}) 50% 50% no-repeat; + background-size: cover; + height: 700px; + background-color: #fafafa; + width: 100%; `; const Box = styled.div` - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; `; const LogoWrap = styled.div` - margin: 3rem 0; + margin: 3rem 0; - > img { - width: 150px; - } + > img { + width: 150px; + } `; const TitleWrap = styled.div` - color: ${props => props.theme.colors.white}; - text-align: center; - margin-bottom: 2.5rem; + color: ${props => props.theme.colors.white}; + text-align: center; + margin-bottom: 2.5rem; - > p { - line-height: 2.5rem; - font-weight: 600; - font-size: 1.35rem; - } + > p { + line-height: 2.5rem; + font-weight: 600; + font-size: 1.35rem; + } - > p > em { - color: #ffea9b; - } + > p > em { + color: #ffea9b; + } `; const Title = styled.h1` - font-size: 3.5rem; - font-weight: 700; - margin-bottom: 2rem; + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 2rem; `; const SubTitle = styled.h2` - font-size: 2rem; - font-weight: 700; - margin-bottom: 2rem; + font-size: 2rem; + font-weight: 700; + margin-bottom: 2rem; `; const FormWrap = styled.div` - margin-bottom: 2.5rem; + margin-bottom: 2.5rem; `; // const WarningWrap = styled.p` @@ -163,15 +175,15 @@ const FormWrap = styled.div` // `; const FaqWrap = styled.div` - ${props => props.theme.texts.loginContent}; - - > img { - width: 30px; - cursor: pointer; - display: block; - text-align: center; - margin: 20px auto; - } + ${props => props.theme.texts.loginContent}; + + > img { + width: 30px; + cursor: pointer; + display: block; + text-align: center; + margin: 20px auto; + } `; /*const FooterWrap = styled.div` @@ -190,53 +202,53 @@ const FaqWrap = styled.div` `;*/ const TermsContainer = styled.div` - max-width: 890px; - margin: 0 auto 20px; - padding: 20px; - background-color: #f9f9f9; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + max-width: 890px; + margin: 0 auto 20px; + padding: 20px; + background-color: #f9f9f9; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); `; const CheckboxWrap = styled.div` - display: flex; - justify-content: center; - align-items: center; - margin-left: -0.5rem; - margin-top: 1rem; + display: flex; + justify-content: center; + align-items: center; + margin-left: -0.5rem; + margin-top: 1rem; `; const TermsTitle = styled.h1` - font-size: 24px; - font-weight: bold; - color: #333; - margin-bottom: 20px; + font-size: 24px; + font-weight: bold; + color: #333; + margin-bottom: 20px; `; const List = styled.ul` - list-style: none; - padding: 0; - margin: 0; + list-style: none; + padding: 0; + margin: 0; `; const ListItem = styled.li` - margin-bottom: 10px; - font-size: 16px; - color: #555; - line-height: 2rem; - &::before { - content: '•'; - color: #007bff; - font-weight: bold; - display: inline-block; - width: 1em; - margin-left: -1em; - } + margin-bottom: 10px; + font-size: 16px; + color: #555; + line-height: 2rem; + &::before { + content: '•'; + color: #007bff; + font-weight: bold; + display: inline-block; + width: 1em; + margin-left: -1em; + } `; const Highlight = styled.span` - cursor: pointer; - font-weight: bold; - color: #007bff; + cursor: pointer; + font-weight: bold; + color: #007bff; `; export default Login; diff --git a/src/styles/theme/Theme.ts b/src/styles/theme/Theme.ts index 072c622..0f8db80 100644 --- a/src/styles/theme/Theme.ts +++ b/src/styles/theme/Theme.ts @@ -2,7 +2,7 @@ import {DefaultTheme} from 'styled-components'; const colors = { primary: '#a31432', - secondary: '#334D61', + secondary: '#46515b', neutral1: '#222', neutral2: '#333', neutral3: '#444', diff --git a/src/utils/randomUtils.ts b/src/utils/randomUtils.ts index 24e23fb..93a22ff 100644 --- a/src/utils/randomUtils.ts +++ b/src/utils/randomUtils.ts @@ -4,15 +4,13 @@ export const getRandomInt = (min: number, max: number) => { return Math.floor(Math.random() * (max - min + 1)) + min; }; - export const generateRandomStudentId = () => { const minDigits = 11; const maxDigits = 15; - // 랜덤하게 자리수를 선택 - const numDigits = Math.floor(Math.random() * (maxDigits - minDigits + 1)) + minDigits; + const numDigits = + Math.floor(Math.random() * (maxDigits - minDigits + 1)) + minDigits; - // 선택된 자리수에 맞는 최소값과 최대값 계산 const min = Math.pow(10, numDigits - 1); const max = Math.pow(10, numDigits) - 1;