From 24f58a09642c650d2864e28f5ad398d6b78cd5a0 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:15:14 +0900 Subject: [PATCH 01/18] =?UTF-8?q?Chore(delete=20unused=20file):=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/components/InformCardList.tsx | 47 -------------- src/pages/Home/components/InformHalfCard.tsx | 64 -------------------- 2 files changed, 111 deletions(-) delete mode 100644 src/pages/Home/components/InformCardList.tsx delete mode 100644 src/pages/Home/components/InformHalfCard.tsx diff --git a/src/pages/Home/components/InformCardList.tsx b/src/pages/Home/components/InformCardList.tsx deleted file mode 100644 index 603c7ecf..00000000 --- a/src/pages/Home/components/InformCardList.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import http from '@apis/http'; -import InformCard from '@components/Card/InformCard'; -import { ANNOUNCEMENT_TITLE } from '@constants/announcement'; -import PATH from '@constants/path'; -import useMajor from '@hooks/useMajor'; -import useRouter from '@hooks/useRouter'; -import openLink from '@utils/router/openLink'; -import { AxiosResponse } from 'axios'; -import React from 'react'; - -const InformCardList = () => { - const { major } = useMajor(); - const { routerTo } = useRouter(); - - const onGraduationCardClick = async () => { - const response: AxiosResponse = await http.get( - `/api/graduation?major=${major}`, - ); - const graduationLink = response.data; - openLink(graduationLink); - }; - - return ( - <> - routerTo(PATH.NORMAL_ANNOUNCEMENT('school'))} - /> - routerTo(PATH.NORMAL_ANNOUNCEMENT('major'))} - /> - - - ); -}; - -export default InformCardList; diff --git a/src/pages/Home/components/InformHalfCard.tsx b/src/pages/Home/components/InformHalfCard.tsx deleted file mode 100644 index 76b59243..00000000 --- a/src/pages/Home/components/InformHalfCard.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import Icon from '@components/Common/Icon'; -import styled from '@emotion/styled'; -import useRouter from '@hooks/useRouter'; -import { THEME } from '@styles/ThemeProvider/theme'; -import { IconKind } from '@type/styles/icon'; - -interface InformHalfCardProps { - iconKind: IconKind; - title: string; - subTitle: string; - link: string; -} - -const InformHalfCard = ({ - iconKind, - title, - subTitle, - link, -}: InformHalfCardProps) => { - const { routerTo } = useRouter(); - - return ( - routerTo(link)}> - - - {subTitle} - {title} - - - ); -}; - -export default InformHalfCard; - -const Container = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - width: 39%; - background-color: ${THEME.IVORY}; - padding: 3% 5% 3% 4%; - border-radius: 15px; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - height: 55px; -`; - -const TitleWrapper = styled.div` - display: flex; - flex-direction: column; - padding-left: 7px; -`; - -const Title = styled.h2` - font-size: 16px; - font-weight: bold; -`; - -const SubTitle = styled.h3` - color: ${THEME.TEXT.SEMIBLACK}; - display: flex; - justify-content: flex-end; - font-size: 13px; - padding-bottom: 6px; -`; From 3dfb57dd33c2cb8433a25b1ec6be2268ec2fc3d5 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:16:00 +0900 Subject: [PATCH 02/18] =?UTF-8?q?Chore(add=20image=20size):=20halfCard=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=20=ED=95=A0=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/styles/size.ts | 8 +++++++- src/components/Common/Image/index.tsx | 1 + 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/@types/styles/size.ts b/src/@types/styles/size.ts index 10b73b69..666f693c 100644 --- a/src/@types/styles/size.ts +++ b/src/@types/styles/size.ts @@ -1,6 +1,12 @@ import { CSSProperties } from 'react'; -export type SizeOption = 'large' | 'medium' | 'small' | 'tiny' | 'building'; +export type SizeOption = + | 'large' + | 'medium' + | 'small' + | 'tiny' + | 'halfCard' + | 'building'; export interface Size { height: CSSProperties['height']; diff --git a/src/components/Common/Image/index.tsx b/src/components/Common/Image/index.tsx index b9a24ee7..4bcbdddc 100644 --- a/src/components/Common/Image/index.tsx +++ b/src/components/Common/Image/index.tsx @@ -8,6 +8,7 @@ const imageSize: ImageSize = { medium: setSize(150), small: setSize(100), tiny: setSize(80), + halfCard: setSize(50, 60), building: setSize(100, 180), }; From 56290b6a7c25aa33310af4cc72d249146789f2c4 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:16:30 +0900 Subject: [PATCH 03/18] =?UTF-8?q?Chore(delete=20unused=20color):=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20IVO?= =?UTF-8?q?RY=20=EC=BB=AC=EB=9F=AC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/ThemeProvider/theme.ts | 3 +-- src/styles/emotion.d.ts | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/styles/ThemeProvider/theme.ts b/src/styles/ThemeProvider/theme.ts index 24226f17..fb13eb27 100644 --- a/src/styles/ThemeProvider/theme.ts +++ b/src/styles/ThemeProvider/theme.ts @@ -1,7 +1,7 @@ import { Theme } from '@emotion/react'; export const THEME: Theme = { - BACKGROUND: '#EAEAEA', + BACKGROUND: '#FFFFFF', TEXT: { BLACK: '#000000', @@ -18,5 +18,4 @@ export const THEME: Theme = { }, MODAL_BACKGROUND: 'rgba(0, 0, 0, 0.6)', - IVORY: '#fffef9', }; diff --git a/src/styles/emotion.d.ts b/src/styles/emotion.d.ts index faaddaeb..56ebb19d 100644 --- a/src/styles/emotion.d.ts +++ b/src/styles/emotion.d.ts @@ -18,6 +18,5 @@ declare module '@emotion/react' { }; MODAL_BACKGROUND: string; - IVORY: string; } } From 6b8ea3f2d5efe3015dc044b5c6e14b0c981c4c82 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:17:18 +0900 Subject: [PATCH 04/18] =?UTF-8?q?Chore(add=20color):=20=EC=A7=80=EB=8F=84?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A5=BC=20=EC=A0=9C=EC=99=B8?= =?UTF-8?q?=ED=95=9C=20=EB=82=98=EB=A8=B8=EC=A7=80=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BodyLayout/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/BodyLayout/index.tsx b/src/components/BodyLayout/index.tsx index dc97d7ed..f9241247 100644 --- a/src/components/BodyLayout/index.tsx +++ b/src/components/BodyLayout/index.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { THEME } from '@styles/ThemeProvider/theme'; import React from 'react'; import { Outlet } from 'react-router-dom'; @@ -13,6 +14,7 @@ const BodyLayout = () => { export default BodyLayout; const StyledBodyLayout = styled.div` + background-color: ${THEME.BACKGROUND}; height: calc(100vh - 8vh - 90px); padding: 8vh 0 8vh 0; overflow-y: scroll; From 0972df35cb623503b537e9c1a7b547480e67f480 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:18:04 +0900 Subject: [PATCH 05/18] =?UTF-8?q?Chore(delete=20text):=20InformCard?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EB=8A=94=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/InformCard/index.tsx | 30 ++++++------------------ 1 file changed, 7 insertions(+), 23 deletions(-) diff --git a/src/components/Card/InformCard/index.tsx b/src/components/Card/InformCard/index.tsx index 67b95b32..0671724b 100644 --- a/src/components/Card/InformCard/index.tsx +++ b/src/components/Card/InformCard/index.tsx @@ -50,10 +50,7 @@ const InformCard = ({ - - {title} - {title} 보러가기 - + {title} ); }; @@ -61,31 +58,13 @@ const InformCard = ({ export default InformCard; const Card = styled.div` - padding: 3% 1% 2% 0; + padding: 5% 0 0 0; height: 4rem; display: flex; align-items: center; - - span:nth-of-type(1) { - font-size: 12px; - color: ${THEME.TEXT.GRAY}; - } - - span:nth-of-type(2) { - font-size: 16px; - font-weight: bold; - color: ${THEME.TEXT.BLACK}; - } - transition: all 0.2s ease-in-out; `; -const TextContainer = styled.div` - display: flex; - flex-direction: column; - gap: 5px; -`; - const IconContainer = styled.div` height: 45px; width: 45px; @@ -96,3 +75,8 @@ const IconContainer = styled.div` border-radius: 50%; background-color: ${THEME.PRIMARY}; `; + +const InfoTitle = styled.span` + font-size: 1rem; + font-weight: bold; +`; From 3ec816100e514e28a9341bc66270737a7e1be67a Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:19:18 +0900 Subject: [PATCH 06/18] =?UTF-8?q?Refactor(InformHalfCard):=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80,=20=EC=95=84=EC=9D=B4=EC=BD=98=EC=9D=84=20?= =?UTF-8?q?=EB=AA=A8=EB=91=90=20=EC=82=AC=EC=9A=A9=ED=95=A0=20=EC=88=98=20?= =?UTF-8?q?=EC=9E=88=EB=8F=84=EB=A1=9D=20render=20props=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 채용, 어학, 꿀팁 카드의 UI가 비슷해 재활용 할 수 있도록 리팩토링 진행 - asset props는 render props로써 외부에서 주입 하는 JSX를 반환하는 컴포넌트를 props로 받아 렌더링하기 때문에 유연하게 사용할 수 있게 됨. --- src/components/Card/InformHalfCard/index.tsx | 58 ++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/components/Card/InformHalfCard/index.tsx diff --git a/src/components/Card/InformHalfCard/index.tsx b/src/components/Card/InformHalfCard/index.tsx new file mode 100644 index 00000000..a58bf900 --- /dev/null +++ b/src/components/Card/InformHalfCard/index.tsx @@ -0,0 +1,58 @@ +import styled from '@emotion/styled'; +import { THEME } from '@styles/ThemeProvider/theme'; + +interface InformHalfCardProps extends React.HTMLAttributes { + asset: () => JSX.Element; + title: string; + subTitle: string; +} + +const InformHalfCard = ({ + asset, + title, + subTitle, + ...props +}: InformHalfCardProps) => { + return ( + + {asset()} + + {subTitle} + {title} + + + ); +}; + +export default InformHalfCard; + +const Container = styled.div` + padding: 3% 5% 3% 5%; + width: 90%; + height: 55px; + display: flex; + align-items: center; + justify-content: space-between; + background-color: ${THEME.BACKGROUND}; + border-radius: 15px; + box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px; +`; + +const TitleWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: flex-end; +`; + +const Title = styled.h2` + font-weight: bold; + font-size: 12px; +`; + +const SubTitle = styled.h3` + color: ${THEME.TEXT.SEMIBLACK}; + display: flex; + justify-content: flex-end; + padding-bottom: 6px; + font-size: 10px; +`; From 0f4c6a4c1b1cb66ee0fdf09b0a0661ffb74ee984 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:19:46 +0900 Subject: [PATCH 07/18] =?UTF-8?q?Chore(change=20css):=20css=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/Button/index.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/Common/Button/index.tsx b/src/components/Common/Button/index.tsx index fda2471d..029336c8 100644 --- a/src/components/Common/Button/index.tsx +++ b/src/components/Common/Button/index.tsx @@ -19,22 +19,18 @@ const Button = ({ children, disabled = false, ...props }: ButtonProps) => { export default Button; const StyledButton = styled.button` + height: 50px; + width: 100%; + padding: 10px; + margin: 4px 0; display: flex; justify-content: center; align-items: center; - - cursor: pointer; - - width: 100%; - height: 50px; - margin: 4px 0; - - border-radius: 8px; - padding: 10px; - background-color: ${THEME.BUTTON.BLUE}; color: #ffffff; font-weight: bold; + border-radius: 8px; + cursor: pointer; &:disabled { background-color: ${THEME.BUTTON.GRAY}; From f2d3ef32c0893668d5319e6744799bfccdede216 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:20:06 +0900 Subject: [PATCH 08/18] =?UTF-8?q?Chore(add=20constant):=20=EC=A1=B8?= =?UTF-8?q?=EC=97=85=EC=9A=94=EA=B1=B4=20=EB=AC=B8=EC=9E=90=EC=97=B4=20?= =?UTF-8?q?=EC=83=81=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/announcement.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/constants/announcement.ts b/src/constants/announcement.ts index 7559ee43..e0c2e2b9 100644 --- a/src/constants/announcement.ts +++ b/src/constants/announcement.ts @@ -3,6 +3,7 @@ export const ANNOUNCEMENT_TITLE = { MAROR: '학과 공지사항', LANGUAGE: '어학 공지사항', RECRUIT: '채용 공지사항', + GRADUATION: '졸업요건', }; export const ANNOUNCEMENT_CATEGORY = { From 7877e799734a10cc3a6d646025c4cc1ce3dc3259 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:20:37 +0900 Subject: [PATCH 09/18] =?UTF-8?q?Refactor(Home):=20=ED=99=88=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=EC=84=B1=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EC=83=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/index.tsx | 56 ++++++---------------------------------- 1 file changed, 8 insertions(+), 48 deletions(-) diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index ac3e3ee7..3549752e 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,35 +1,15 @@ -import Carousel from '@components/Carousel'; import styled from '@emotion/styled'; -import InformHalfCard from '@pages/Home/components/InformHalfCard'; -import { THEME } from '@styles/ThemeProvider/theme'; -import InformCardList from './components/InformCardList'; +import ExtraInfo from './components/ExtraInfo'; +import SchoolInfo from './components/SchoolInfo'; +import Whalbe from './components/Whalbe'; const Home = () => { return ( - - 학교 - - - - - - - - 비교과 - - + + + ); }; @@ -39,27 +19,7 @@ export default Home; const Container = styled.div` display: flex; flex-direction: column; - width: 85%; + width: 90%; margin: 0 auto; - padding-bottom: 5%; -`; - -const InformCardWrapper = styled.div` - overflow: hidden; - border-radius: 15px; - padding: 5%; - background-color: ${THEME.IVORY}; - margin-top: 5%; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; -`; - -const InformHalfCardList = styled.div` - display: flex; - justify-content: space-between; - margin-top: 5%; -`; - -const InformTitle = styled.div` - font-size: 20px; - font-weight: bold; + padding-bottom: 15px; `; From 5a0b9ccb9779fd9f2a9317b394eeaebf1fe78ef9 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:21:38 +0900 Subject: [PATCH 10/18] =?UTF-8?q?Feat(SchoolInfo):=20=ED=95=99=EA=B5=90=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=EB=A1=9C=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?= =?UTF-8?q?=ED=95=B4=EC=A3=BC=EB=8A=94=20=EC=B9=B4=EB=93=9C=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 학교, 학과 공지사항 & 졸업요건 --- src/pages/Home/components/SchoolInfo.tsx | 80 ++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 src/pages/Home/components/SchoolInfo.tsx diff --git a/src/pages/Home/components/SchoolInfo.tsx b/src/pages/Home/components/SchoolInfo.tsx new file mode 100644 index 00000000..ecc0a2ed --- /dev/null +++ b/src/pages/Home/components/SchoolInfo.tsx @@ -0,0 +1,80 @@ +import http from '@apis/http'; +import InformCard from '@components/Card/InformCard'; +import { ANNOUNCEMENT_TITLE } from '@constants/announcement'; +import PATH from '@constants/path'; +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; +import useMajor from '@hooks/useMajor'; +import useRouter from '@hooks/useRouter'; +import { THEME } from '@styles/ThemeProvider/theme'; +import openLink from '@utils/router/openLink'; +import { AxiosResponse } from 'axios'; +import React from 'react'; + +const SchoolInfo = () => { + const { major } = useMajor(); + const { routerTo } = useRouter(); + + const onGraduationCardClick = async () => { + const response: AxiosResponse = await http.get( + `/api/graduation?major=${major}`, + ); + const graduationLink = response.data; + + openLink(graduationLink); + }; + + const onTitleClick = () => { + if (major) return; + routerTo('/major-decision'); + }; + + return ( + + + {major ? major : '학과를 선택 해주세요'} + + routerTo(PATH.NORMAL_ANNOUNCEMENT('school'))} + /> + routerTo(PATH.NORMAL_ANNOUNCEMENT('major'))} + /> + + + ); +}; + +export default SchoolInfo; + +const Container = styled.div` + overflow: hidden; + border-radius: 15px; + padding: 5%; + background-color: ${THEME.BACKGROUND}; + margin-top: 5%; + box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px; +`; + +const Title = styled.span<{ hasMajor: boolean }>` + font-size: 1rem; + font-weight: bold; + + ${({ hasMajor }) => + !hasMajor && + css` + color: ${THEME.TEXT.GRAY}; + border-bottom: 1px solid ${THEME.TEXT.GRAY}; + `} +`; From c554abd3386bd6f80e223e2a1f9dd90886a921cb Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:22:05 +0900 Subject: [PATCH 11/18] =?UTF-8?q?Feat(Whalbe):=20=EB=B9=84=EA=B5=90?= =?UTF-8?q?=EA=B3=BC(=EC=9B=A8=EC=9D=BC=EB=B9=84)=20=EC=A0=95=EB=B3=B4?= =?UTF-8?q?=EB=A1=9C=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=ED=95=B4=EC=A3=BC?= =?UTF-8?q?=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/components/Whalbe.tsx | 29 ++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/pages/Home/components/Whalbe.tsx diff --git a/src/pages/Home/components/Whalbe.tsx b/src/pages/Home/components/Whalbe.tsx new file mode 100644 index 00000000..1d73db41 --- /dev/null +++ b/src/pages/Home/components/Whalbe.tsx @@ -0,0 +1,29 @@ +import Carousel from '@components/Carousel'; +import styled from '@emotion/styled'; +import { THEME } from '@styles/ThemeProvider/theme'; +import React from 'react'; + +const Whalbe = () => { + return ( + + 비교과 + + + ); +}; + +export default Whalbe; + +const Container = styled.div` + overflow: hidden; + border-radius: 15px; + padding: 5%; + background-color: ${THEME.BACKGROUND}; + margin-top: 5%; + box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px; +`; + +const Title = styled.div` + font-size: 20px; + font-weight: bold; +`; From d6048286a887e48fe12f8b463af59944922d87e6 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:23:35 +0900 Subject: [PATCH 12/18] =?UTF-8?q?Refactor(TipImage):=20WebpImage=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EC=9E=AC?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/TipCard/TipImage.tsx | 36 +++++++++++------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/src/components/Card/TipCard/TipImage.tsx b/src/components/Card/TipCard/TipImage.tsx index 10db07ed..ba09162c 100644 --- a/src/components/Card/TipCard/TipImage.tsx +++ b/src/components/Card/TipCard/TipImage.tsx @@ -1,31 +1,29 @@ -import Image from '@components/Common/Image'; +import WebpImage from '@components/Common/WebpImage'; import { css } from '@emotion/react'; import React from 'react'; interface TipImageProps { title: string; webpPath: string; - pngPath: string; + normalPath: string; } -const TipImage = ({ title, webpPath, pngPath }: TipImageProps) => { +const TipImage = ({ title, webpPath, normalPath }: TipImageProps) => { return ( - - - {title} - + ); }; From 5259372e58f8c6f5e9fc4a95c1bdc4fb6f12e8ae Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:23:57 +0900 Subject: [PATCH 13/18] =?UTF-8?q?Feat(WebpImage):=20=EA=B2=BD=EB=9F=89=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=A0=8C=EB=8D=94=EB=A7=81?= =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/WebpImage/index.tsx | 28 +++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/components/Common/WebpImage/index.tsx diff --git a/src/components/Common/WebpImage/index.tsx b/src/components/Common/WebpImage/index.tsx new file mode 100644 index 00000000..0b04a02c --- /dev/null +++ b/src/components/Common/WebpImage/index.tsx @@ -0,0 +1,28 @@ +import { SizeOption } from '@type/styles/size'; +import React from 'react'; + +import Image from '../Image'; + +interface WebpImageProps extends React.ImgHTMLAttributes { + wepbPath: string; + normalPath: string; + title: string; + size?: SizeOption; +} + +const WebpImage = ({ + wepbPath, + normalPath, + title, + size = 'medium', + ...props +}: WebpImageProps) => { + return ( + + + {title} + + ); +}; + +export default WebpImage; From c22880524dde2abf862a2623cd32acfd11634083 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:37:20 +0900 Subject: [PATCH 14/18] =?UTF-8?q?Feat(ExtraInfo):=20=ED=99=88=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EB=B3=B4=EC=97=AC=EC=A3=BC?= =?UTF-8?q?=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 취업, 어학, 꿀팁 --- src/pages/Home/components/ExtraInfo.tsx | 68 +++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 src/pages/Home/components/ExtraInfo.tsx diff --git a/src/pages/Home/components/ExtraInfo.tsx b/src/pages/Home/components/ExtraInfo.tsx new file mode 100644 index 00000000..7169cfd0 --- /dev/null +++ b/src/pages/Home/components/ExtraInfo.tsx @@ -0,0 +1,68 @@ +import InformHalfCard from '@components/Card/InformHalfCard'; +import Icon from '@components/Common/Icon'; +import WebpImage from '@components/Common/WebpImage'; +import { + ANNOUNCEMENT_TITLE, + ANNOUNCE_SUB_TITLE, +} from '@constants/announcement'; +import PATH from '@constants/path'; +import { TIP_ROUTING_CARD } from '@constants/tip'; +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; +import useRouter from '@hooks/useRouter'; +import { THEME } from '@styles/ThemeProvider/theme'; +import React from 'react'; + +const ExtraInfo = () => { + const { routerTo } = useRouter(); + + return ( + <> + + } + title={ANNOUNCEMENT_TITLE.RECRUIT} + subTitle={ANNOUNCE_SUB_TITLE.RECURIT} + onClick={() => routerTo(PATH.NORMAL_ANNOUNCEMENT('recruit'))} + /> + } + title={ANNOUNCEMENT_TITLE.LANGUAGE} + subTitle={ANNOUNCE_SUB_TITLE.LANGUAGE} + onClick={() => routerTo(PATH.NORMAL_ANNOUNCEMENT('language'))} + /> + + ( + + )} + title={TIP_ROUTING_CARD.TITLE} + subTitle={TIP_ROUTING_CARD.SUB_TITLE} + onClick={() => routerTo(PATH.TIP.SHORTCUT)} + css={css` + h2 { + font-size: 16px; + } + h3 { + font-size: 12px; + } + `} + /> + + ); +}; + +export default ExtraInfo; + +const FlatContainer = styled.div` + display: flex; + justify-content: space-around; + margin-top: 5%; + margin-bottom: 5%; + gap: 10px; +`; From 71dc2726d5b94becde534d0d10265059369da091 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:37:58 +0900 Subject: [PATCH 15/18] =?UTF-8?q?Chore(add=20constant):=20=EC=B7=A8?= =?UTF-8?q?=EC=97=85,=20=EC=96=B4=ED=95=99=20=EC=A0=95=EB=B3=B4=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=B9=B4=EB=93=9C=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=20=ED=95=A0=20=EC=83=81=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/announcement.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/constants/announcement.ts b/src/constants/announcement.ts index e0c2e2b9..64c16f34 100644 --- a/src/constants/announcement.ts +++ b/src/constants/announcement.ts @@ -6,6 +6,11 @@ export const ANNOUNCEMENT_TITLE = { GRADUATION: '졸업요건', }; +export const ANNOUNCE_SUB_TITLE = { + RECURIT: '채용 정보 확인', + LANGUAGE: '어학 정보 확인', +}; + export const ANNOUNCEMENT_CATEGORY = { SCHOOL: 'school', MAJOR: 'major', From 4ee89a883875735c3e9f7d473aac6a83a0b39eb3 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 16:38:42 +0900 Subject: [PATCH 16/18] =?UTF-8?q?Chore(add=20constant):=20=EA=BF=80?= =?UTF-8?q?=ED=8C=81=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=9D=BC=EC=9A=B0?= =?UTF-8?q?=ED=8C=85=20=EC=B9=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9A=A9=20=ED=95=A0=20?= =?UTF-8?q?=EC=83=81=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/tip.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/constants/tip.ts b/src/constants/tip.ts index 190518ec..89a25428 100644 --- a/src/constants/tip.ts +++ b/src/constants/tip.ts @@ -89,6 +89,13 @@ export const HONEY_TIP_DATA: readonly TipData[] = [ }, ] as const; +export const TIP_ROUTING_CARD = { + WEBP_PATH: '/assets/tipImages/webp/baekgyeong_suprised.webp', + NORMAL_PATH: '/assets/tipImages/png/baekgyeong_suprised.png', + TITLE: '꿀팁 사이트 바로가기', + SUB_TITLE: '부경대 꿀팁 사이트 모음', +}; + export const TIP_TYPE = { SHORTCUT: 'shortcut', HONEY_TIP: 'honeytip', From 75e79c83c4af5c458bae9de9fbe5684a8eaebcd7 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 5 Feb 2024 21:54:26 +0900 Subject: [PATCH 17/18] =?UTF-8?q?Test(Home):=20=ED=99=88=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/Home.test.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/pages/Home/Home.test.tsx b/src/pages/Home/Home.test.tsx index 54523aba..3e376e8d 100644 --- a/src/pages/Home/Home.test.tsx +++ b/src/pages/Home/Home.test.tsx @@ -6,6 +6,10 @@ import '@testing-library/jest-dom'; import Home from './index'; +interface TextInScreen { + [key: string]: string; +} + describe('Home Page 컴포넌트 테스트', () => { it('페이지에 공지사항 및 졸업요건 컴포넌트가 렌더링된다.', () => { render( @@ -18,10 +22,16 @@ describe('Home Page 컴포넌트 테스트', () => { wrapper: MemoryRouter, }, ); - const notificationText = screen.getByText('학교 공지사항'); - expect(notificationText).toBeInTheDocument(); - const requirementText = screen.getByText('졸업요건'); - expect(requirementText).toBeInTheDocument(); + const EXPECTED_TEXT: TextInScreen = { + school: '학교 공지사항 보러가기', + major: '학과 공지사항 보러가기', + graduation: '졸업요건 보러가기', + }; + + Object.keys(EXPECTED_TEXT).forEach((key) => { + const expectedText = screen.getByText(EXPECTED_TEXT[key]); + expect(expectedText).toBeInTheDocument(); + }); }); }); From 7d8d1f498acb1c283105f08867b88b243c406667 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Tue, 6 Feb 2024 21:35:53 +0900 Subject: [PATCH 18/18] =?UTF-8?q?Chore(change=20color):=20=EA=B3=B5?= =?UTF-8?q?=EC=A7=80=EC=82=AC=ED=95=AD=20=EA=B2=80=EC=83=89=20=ED=8F=BC=20?= =?UTF-8?q?=EA=B8=80=EC=A7=9C=20=EC=83=89=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/InformUpperLayout/InformSearchForm.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/InformUpperLayout/InformSearchForm.tsx b/src/components/InformUpperLayout/InformSearchForm.tsx index 4f71707b..1964d17a 100644 --- a/src/components/InformUpperLayout/InformSearchForm.tsx +++ b/src/components/InformUpperLayout/InformSearchForm.tsx @@ -5,6 +5,7 @@ import TOAST_MESSAGES from '@constants/toast-message'; import styled from '@emotion/styled'; import useRouter from '@hooks/useRouter'; import useToasts from '@hooks/useToast'; +import { THEME } from '@styles/ThemeProvider/theme'; import React, { useRef } from 'react'; interface InformSearchForm { @@ -60,12 +61,12 @@ const StyledInput = styled.input` border: 0; border-radius: 15px; background-color: #7a9dd30f; - color: #7a9dd366; + color: ${THEME.TEXT.BLACK}; font-size: 14px; text-indent: 5px; &::placeholder { - color: #7a9dd366; + color: ${THEME.TEXT.GRAY}; font-size: 14px; } box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);