From 726ed422493079ecd29b196cf9c7f7367f0a01e8 Mon Sep 17 00:00:00 2001 From: SEOKKAMONI Date: Mon, 16 Oct 2023 19:13:55 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat(ui):=20Text=20props=20tag=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../result/FinalResultTable/FinalResultTable.tsx | 10 +++++----- .../result/FirstResultTable/FirstResultTable.tsx | 14 +++++++------- .../result/ResultTableFooter/ResultTableFooter.tsx | 6 +++--- .../result/ResultTableItem/ResultTableItem.tsx | 6 +++--- packages/maru-theme/src/global.ts | 5 ----- packages/maru-ui/src/Text/Text.tsx | 5 ++++- 6 files changed, 22 insertions(+), 24 deletions(-) diff --git a/apps/user/src/components/result/FinalResultTable/FinalResultTable.tsx b/apps/user/src/components/result/FinalResultTable/FinalResultTable.tsx index 2ca4cd380..651cbbc0b 100644 --- a/apps/user/src/components/result/FinalResultTable/FinalResultTable.tsx +++ b/apps/user/src/components/result/FinalResultTable/FinalResultTable.tsx @@ -10,24 +10,24 @@ const FinalResultTable = () => { const { data: finalResultData } = useFinalResultQuery(); return finalResultData ? ( - + - + ) : null; }; export default FinalResultTable; -const StyledFinalResultTable = styled.div<{ is합격: boolean }>` +const StyledFinalResultTable = styled.div<{ isPassed: boolean }>` ${flex({ flexDirection: 'column', alignItems: 'center' })}; - gap: ${(props) => (props.is합격 ? '64px' : '120px')}; + gap: ${(props) => (props.isPassed ? '64px' : '120px')}; `; diff --git a/apps/user/src/components/result/FirstResultTable/FirstResultTable.tsx b/apps/user/src/components/result/FirstResultTable/FirstResultTable.tsx index 1a5d9ec14..dd01d9319 100644 --- a/apps/user/src/components/result/FirstResultTable/FirstResultTable.tsx +++ b/apps/user/src/components/result/FirstResultTable/FirstResultTable.tsx @@ -1,33 +1,33 @@ +import { useFirstResultQuery } from '@/services/result/queries'; import { Column } from '@maru/ui'; import { flex } from '@maru/utils'; +import styled from 'styled-components'; import ResultTableFooter from '../ResultTableFooter/ResultTableFooter'; import ResultTableHeader from '../ResultTableHeader/ResultTableHeader'; import ResultTableItem from '../ResultTableItem/ResultTableItem'; -import styled from 'styled-components'; -import { useFirstResultQuery } from '@/services/result/queries'; const FirstResultTable = () => { const { data: firstResultData } = useFirstResultQuery(); return firstResultData ? ( - + - + ) : null; }; export default FirstResultTable; -const StyledFirstResultTable = styled.div<{ is합격: boolean }>` +const StyledFirstResultTable = styled.div<{ isPassed: boolean }>` ${flex({ flexDirection: 'column', alignItems: 'center' })}; - gap: ${(props) => (props.is합격 ? '64px' : '120px')}; + gap: ${(props) => (props.isPassed ? '64px' : '120px')}; `; diff --git a/apps/user/src/components/result/ResultTableFooter/ResultTableFooter.tsx b/apps/user/src/components/result/ResultTableFooter/ResultTableFooter.tsx index 0966b8a67..915301abc 100644 --- a/apps/user/src/components/result/ResultTableFooter/ResultTableFooter.tsx +++ b/apps/user/src/components/result/ResultTableFooter/ResultTableFooter.tsx @@ -6,14 +6,14 @@ import { useCTAButton } from './ResultTableFooter.hooks'; interface Props { option: ResultOption; - is합격: boolean; + isPassed: boolean; } -const ResultTableFooter = ({ option, is합격 }: Props) => { +const ResultTableFooter = ({ option, isPassed }: Props) => { const { handleGoMainPageButtonClick } = useCTAButton(); const { userData } = useUser(); - return is합격 ? ( + return isPassed ? ( {option === 'FIRST' ? ( diff --git a/apps/user/src/components/result/ResultTableItem/ResultTableItem.tsx b/apps/user/src/components/result/ResultTableItem/ResultTableItem.tsx index 92cfebdf9..2f3abd434 100644 --- a/apps/user/src/components/result/ResultTableItem/ResultTableItem.tsx +++ b/apps/user/src/components/result/ResultTableItem/ResultTableItem.tsx @@ -7,10 +7,10 @@ interface Props { id: number; name: string; type: string; - is합격: boolean; + isPassed: boolean; } -const ResultTableItem = ({ id, name, type, is합격 }: Props) => { +const ResultTableItem = ({ id, name, type, isPassed }: Props) => { return ( @@ -24,7 +24,7 @@ const ResultTableItem = ({ id, name, type, is합격 }: Props) => { {type} - {is합격 ? ( + {isPassed ? ( 합격 diff --git a/packages/maru-theme/src/global.ts b/packages/maru-theme/src/global.ts index 638fb1ef8..3ffc73b3f 100644 --- a/packages/maru-theme/src/global.ts +++ b/packages/maru-theme/src/global.ts @@ -1,9 +1,7 @@ import { createGlobalStyle } from 'styled-components'; -import { reset } from 'styled-reset'; import color from './color'; const GlobalStyle = createGlobalStyle` -${reset} * { box-sizing: border-box; @@ -17,9 +15,6 @@ input[type="radio"] { cursor: pointer; } -p { - display: inline-block; -} a { display: inline-block; diff --git a/packages/maru-ui/src/Text/Text.tsx b/packages/maru-ui/src/Text/Text.tsx index e589439b6..2ee4e5275 100644 --- a/packages/maru-ui/src/Text/Text.tsx +++ b/packages/maru-ui/src/Text/Text.tsx @@ -12,6 +12,7 @@ interface Props extends HTMLAttributes { textAlign?: CSSProperties['textAlign']; ellipsis?: boolean; whiteSpace?: CSSProperties['whiteSpace']; + tag?: 'span' | 'p'; } const Text = ({ @@ -22,11 +23,13 @@ const Text = ({ width, ellipsis = false, whiteSpace = 'nowrap', + tag = 'span', }: Props) => { return ( {children} @@ -35,7 +38,7 @@ const Text = ({ export default Text; -const StyledText = styled.p<{ fontType: Font; ellipsis: boolean }>` +const StyledText = styled.span<{ fontType: Font; ellipsis: boolean }>` ${({ fontType }) => font[fontType]} ${(props) => props.ellipsis && From c21b4a690a24ebc75ecc8796056e95c7cecd2ade Mon Sep 17 00:00:00 2001 From: SEOKKAMONI Date: Mon, 16 Oct 2023 19:43:53 +0900 Subject: [PATCH 2/2] =?UTF-8?q?refactor(user):=20=EA=B1=B0=EC=8A=AC?= =?UTF-8?q?=EB=A6=AC=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...1\354\204\261\354\231\204\353\243\214.tsx" | 1 - .../result/ResultMain/ResultMain.tsx | 47 +++++++++---------- .../ResultTableItem/ResultTableItem.tsx | 12 ++--- apps/user/src/hooks/useGradeCaculation.ts | 4 +- 4 files changed, 27 insertions(+), 37 deletions(-) diff --git "a/apps/user/src/app/form/\354\264\210\354\225\210\354\236\221\354\204\261\354\231\204\353\243\214/\354\264\210\354\225\210\354\236\221\354\204\261\354\231\204\353\243\214.tsx" "b/apps/user/src/app/form/\354\264\210\354\225\210\354\236\221\354\204\261\354\231\204\353\243\214/\354\264\210\354\225\210\354\236\221\354\204\261\354\231\204\353\243\214.tsx" index e0e52a365..766b5c468 100644 --- "a/apps/user/src/app/form/\354\264\210\354\225\210\354\236\221\354\204\261\354\231\204\353\243\214/\354\264\210\354\225\210\354\236\221\354\204\261\354\231\204\353\243\214.tsx" +++ "b/apps/user/src/app/form/\354\264\210\354\225\210\354\236\221\354\204\261\354\231\204\353\243\214/\354\264\210\354\225\210\354\236\221\354\204\261\354\231\204\353\243\214.tsx" @@ -62,7 +62,6 @@ const 초안작성완료 = () => { ? '원서 접수에 필요한 초안을 모두 작성하셨습니다.' : '원서 작성 중 입력하지 않은 곳이 있습니다.'} - {isComplete ? '원서 초안 제출 시 부산소프트웨어마이스터고등학교 입학전형에 응시한 것으로\n 처리되며 더 이상 입학원서 수정이 불가능합니다.' diff --git a/apps/user/src/components/result/ResultMain/ResultMain.tsx b/apps/user/src/components/result/ResultMain/ResultMain.tsx index 6ee0decaf..7102a3ea8 100644 --- a/apps/user/src/components/result/ResultMain/ResultMain.tsx +++ b/apps/user/src/components/result/ResultMain/ResultMain.tsx @@ -11,34 +11,31 @@ interface Props { } const ResultMain = ({ setResultStep, option }: Props) => { + const resultInfoData = + option === 'FIRST' + ? { + date: '2023년 10월 23일 (월) 15:00', + capacity: '일반전형 및 특별전형 각각 모집정원의 130% 이내', + } + : { + date: '2023년 11월 2일 (목) 15:00', + capacity: '일반전형 36명, 특별전형 28명, 정원 외 전형 3명', + }; + return ( - {option === 'FIRST' ? ( - - - 일시: 2023년 10월 23일 (월) 15:00 - - - 모집 정원: 일반전형 및 특별전형 각각 모집정원의 130% 이내{' '} - - - 장소: 본교 입학전형 서비스 (마루) - - - ) : ( - - - 일시: 2023년 11월 2일 (목) 15:00 - - - 모집 정원: 일반전형 36명, 특별전형 28명, 정원 외 전형 3명 - - - 장소: 본교 입학전형 서비스 (마루) - - - )} + + + 일시: {resultInfoData.date} + + + 모집 정원: {resultInfoData.capacity} + + + 장소: 본교 입학전형 서비스 (마루) + +