Merge pull request #449 from Bamdoliro/feat/#437

feat(ui): Text 컴포넌트 tag prop 추가
Bamdoliro · Oct 16, 2023 · 834cc86 · 834cc86
2 parents 38bcf1d + c21b4a6
commit 834cc86
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 60 deletions.
diff --git a/apps/user/src/app/form/초안작성완료/초안작성완료.tsx b/apps/user/src/app/form/초안작성완료/초안작성완료.tsx
@@ -62,7 +62,6 @@ const 초안작성완료 = () => {
                             ? '원서 접수에 필요한 초안을 모두 작성하셨습니다.'
                             : '원서 작성 중 입력하지 않은 곳이 있습니다.'}
                     </Text>
-
                     <Text fontType="H4" color={color.red}>
                         {isComplete
                             ? '원서 초안 제출 시 부산소프트웨어마이스터고등학교 입학전형에 응시한 것으로\n 처리되며 더 이상 입학원서 수정이 불가능합니다.'

diff --git 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 ? (
-        <StyledFinalResultTable is합격={finalResultData.passed}>
+        <StyledFinalResultTable isPassed={finalResultData.passed}>
             <Column gap={12} width={816}>
                 <ResultTableHeader />
                 <ResultTableItem
                     id={finalResultData.id}
                     name={finalResultData.name}
                     type={finalResultData.type}
-                    is합격={finalResultData.passed}
+                    isPassed={finalResultData.passed}
                 />
             </Column>
-            <ResultTableFooter option="FINAL" is합격={finalResultData.passed} />
+            <ResultTableFooter option="FINAL" isPassed={finalResultData.passed} />
         </StyledFinalResultTable>
     ) : 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
@@ -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 ? (
-        <StyledFirstResultTable is합격={firstResultData.passed}>
+        <StyledFirstResultTable isPassed={firstResultData.passed}>
             <Column gap={12} width={816}>
                 <ResultTableHeader />
                 <ResultTableItem
                     id={firstResultData.id}
                     name={firstResultData.name}
                     type={firstResultData.type}
-                    is합격={firstResultData.passed}
+                    isPassed={firstResultData.passed}
                 />
             </Column>
-            <ResultTableFooter option="FIRST" is합격={firstResultData.passed} />
+            <ResultTableFooter option="FIRST" isPassed={firstResultData.passed} />
         </StyledFirstResultTable>
     ) : 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/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 (
         <StyledResultMain>
             <InfoBox>
-                {option === 'FIRST' ? (
-                    <Column>
-                        <Text fontType="p2" color={color.gray700}>
-                            일시: 2023년 10월 23일 (월) 15:00
-                        </Text>
-                        <Text fontType="p2" color={color.gray700}>
-                            모집 정원: 일반전형 및 특별전형 각각 모집정원의 130% 이내{' '}
-                        </Text>
-                        <Text fontType="p2" color={color.gray700}>
-                            장소: 본교 입학전형 서비스 (마루)
-                        </Text>
-                    </Column>
-                ) : (
-                    <Column>
-                        <Text fontType="p2" color={color.gray700}>
-                            일시: 2023년 11월 2일 (목) 15:00
-                        </Text>
-                        <Text fontType="p2" color={color.gray700}>
-                            모집 정원: 일반전형 36명, 특별전형 28명, 정원 외 전형 3명
-                        </Text>
-                        <Text fontType="p2" color={color.gray700}>
-                            장소: 본교 입학전형 서비스 (마루)
-                        </Text>
-                    </Column>
-                )}
+                <Column>
+                    <Text fontType="p2" color={color.gray700}>
+                        일시: {resultInfoData.date}
+                    </Text>
+                    <Text fontType="p2" color={color.gray700}>
+                        모집 정원: {resultInfoData.capacity}
+                    </Text>
+                    <Text fontType="p2" color={color.gray700}>
+                        장소: 본교 입학전형 서비스 (마루)
+                    </Text>
+                </Column>
             </InfoBox>
             <Button onClick={() => setResultStep('RESULT')} size="LARGE">
                 결과 확인하기

diff --git 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 ? (
         <Column gap={64} alignItems="center">
             <Column gap={24}>
                 {option === 'FIRST' ? (

diff --git 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 (
         <StyledResultTableItem>
             <Row alignItems="center" gap={48}>
@@ -24,15 +24,9 @@ const ResultTableItem = ({ id, name, type, is합격 }: Props) => {
                     {type}
                 </Text>
             </Row>
-            {is합격 ? (
-                <Text fontType="p2" color={color.gray900}>
-                    합격
-                </Text>
-            ) : (
-                <Text fontType="p2" color={color.gray900}>
-                    불합격
-                </Text>
-            )}
+            <Text fontType="p2" color={color.gray900}>
+                {isPassed ? '합격' : '불합격'}
+            </Text>
         </StyledResultTableItem>
     );
 };

diff --git a/apps/user/src/hooks/useGradeCaculation.ts b/apps/user/src/hooks/useGradeCaculation.ts
@@ -29,7 +29,7 @@ const useGradeCalculation = () => {
     const form = useFormValueStore();
 
     const getScoreOf = (achievementLevelKey: AchievementLevelKey) => {
-        const scoreTotal = form.grade.subjectList.reduce((acc, subject) => {
+        const scoreTotal = form.grade.subjectList?.reduce((acc, subject) => {
             const achievementLevel = subject[achievementLevelKey];
             const subjectName = subject.subjectName;
             if (subjectName === '수학' && achievementLevel !== null) {
@@ -39,7 +39,7 @@ const useGradeCalculation = () => {
             }
         }, 0);
         const scoreLength =
-            form.grade.subjectList.filter((subject) => subject[achievementLevelKey] !== null)
+            form.grade.subjectList?.filter((subject) => subject[achievementLevelKey] !== null)
                 .length + 1;
 
         return scoreTotal / scoreLength;

diff --git 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
@@ -12,6 +12,7 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
     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 (
         <StyledText
             style={{ color, textAlign, width, whiteSpace }}
             fontType={fontType}
+            as={tag}
             ellipsis={ellipsis}>
             {children}
         </StyledText>
@@ -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 &&