Merge pull request #423 from Bamdoliro/feat/#421

어드민 원서 상세조회 성적 페이지 중 교과 성적 테이블 개발

apps/admin/src/components/common/SideMenu/SideMenu.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideMenu from "./SideMenu";
+
+export default {
+    component: SideMenu,
+    title: "SideMenu",
+    tags: ["autodocs"],
+} satisfies Meta<typeof SideMenu>;
+
+export const Default: StoryObj<typeof SideMenu> = {
+    args: {
+        children: '교과 성적'
+    },
+};
+
+export const Active: StoryObj<typeof SideMenu> = {
+    args: {
+        children: '교과 성적',
+        active: true
+    },
+};

apps/admin/src/components/common/SideMenu/SideMenu.tsx

@@ -0,0 +1,42 @@
+import { color, font } from '@maru/theme';
+import { flex } from '@maru/utils';
+import { ReactNode } from 'react';
+import styled, { css } from 'styled-components';
+
+interface Props {
+    children: ReactNode;
+    active: boolean;
+    onClick: () => void;
+}
+
+const SideMenu = ({ children, active, onClick }: Props) => {
+    return (
+        <StyledSideMenu $active={active} onClick={onClick}>
+            {children}
+        </StyledSideMenu>
+    );
+};
+
+export default SideMenu;
+
+const StyledSideMenu = styled.button<{ $active: boolean }>`
+    ${flex({ alignItems: 'center' })}
+    ${font.H5}
+    width: 200px;
+    height: 56px;
+    padding: 0px 16px;
+    border-radius: 12px;
+    color: ${color.gray700};
+    background: ${color.white};
+
+    &:hover {
+        background: ${color.gray100};
+    }
+
+    ${(props) =>
+        props.$active &&
+        css`
+            color: ${color.maruDefault};
+            background: ${color.gray100};
+        `}
+`;

apps/admin/src/components/form/FormDetailContent/FormDetailContent.tsx

@@ -8,6 +8,7 @@ import styled from 'styled-components';
 import FormStatus from './FormStatus/FormStatus';
 import Profile from './Profile/Profile';
 import 보호자정보 from './보호자정보/보호자정보';
+import 성적 from './성적/성적';
 import 자기소개서 from './자기소개서/자기소개서';
 import 전형 from './전형/전형';
 import 지원자정보 from './지원자정보/지원자정보';
@@ -20,10 +21,6 @@ interface Props {
 const FormDetailContent = ({ id }: Props) => {
     const [currentFormDetailStep, setCurrentFormDetailStep] = useState('지원자 정보');
 
-    const handleFormDetailStepButtonClick = (formDetailStep: string) => {
-        setCurrentFormDetailStep(formDetailStep);
-    };
-
     return (
         <StyledFormDetailContent>
             <Row gap={48}>
@@ -37,7 +34,7 @@ const FormDetailContent = ({ id }: Props) => {
                             <UnderlineButton
                                 key={`form-detail-step ${index}`}
                                 active={formDetailStep === currentFormDetailStep}
-                                onClick={() => handleFormDetailStepButtonClick(formDetailStep)}>
+                                onClick={() => setCurrentFormDetailStep(formDetailStep)}>
                                 {formDetailStep}
                             </UnderlineButton>
                         ))}
@@ -49,6 +46,7 @@ const FormDetailContent = ({ id }: Props) => {
                             '보호자 정보': <보호자정보 id={id} />,
                             '출신학교 및 학력': <출신학교및학력 id={id} />,
                             전형: <전형 id={id} />,
+                            성적: <성적 id={id} />,
                             자기소개서: <자기소개서 id={id} />,
                         }}
                     />

apps/admin/src/components/form/FormDetailContent/성적/교과성적/교과성적.tsx

@@ -0,0 +1,37 @@
+import { useFormDetailQuery } from '@/services/form/queries';
+import getAchievementLevelsGroupList from '@/utils/functions/getAchievementLevelsGroupList';
+import styled from 'styled-components';
+import 교과성적Header from './교과성적Header/교과성적Header';
+import 교과성적Item from './교과성적Item/교과성적Item';
+
+interface Props {
+    id: number;
+}
+
+const 교과성적 = ({ id }: Props) => {
+    const { data: formDetailData } = useFormDetailQuery(id);
+
+    const achievementLevelsGroupList = getAchievementLevelsGroupList(
+        formDetailData?.grade.subjectList,
+    );
+
+    console.log(achievementLevelsGroupList);
+
+    return (
+        <Styled교과성적>
+            <교과성적Header />
+            {achievementLevelsGroupList.map((group) => (
+                <교과성적Item
+                    subjectName={group.subjectName}
+                    achievementLevel21={group.achievementLevels[0]}
+                    achievementLevel22={group.achievementLevels[1]}
+                    achievementLevel31={group.achievementLevels[2]}
+                />
+            ))}
+        </Styled교과성적>
+    );
+};
+
+export default 교과성적;
+
+const Styled교과성적 = styled.div``;

apps/admin/src/components/form/FormDetailContent/성적/교과성적/교과성적Header/교과성적Header.tsx

@@ -0,0 +1,39 @@
+import { Column, Row, Th } from '@maru/ui';
+import styled from 'styled-components';
+
+const 교과성적Header = () => {
+    return (
+        <Styled교과성적Header>
+            <Row>
+                <Th width={123} height={100} borderTopLeftRadius={12}>
+                    과목
+                </Th>
+                <Column>
+                    <Th width={279} height={50}>
+                        2학년
+                    </Th>
+                    <Row>
+                        <Th option="SECONDARY" width="50%" height={50}>
+                            1학기
+                        </Th>
+                        <Th option="SECONDARY" width="50%" height={50}>
+                            2학기
+                        </Th>
+                    </Row>
+                </Column>
+                <Column>
+                    <Th width={140} height={50} borderTopRightRadius={12}>
+                        3학년
+                    </Th>
+                    <Th option="SECONDARY" width={140} height={50}>
+                        1학기
+                    </Th>
+                </Column>
+            </Row>
+        </Styled교과성적Header>
+    );
+};
+
+export default 교과성적Header;
+
+const Styled교과성적Header = styled.div``;

apps/admin/src/components/form/FormDetailContent/성적/교과성적/교과성적Item/교과성적Item.tsx

@@ -0,0 +1,35 @@
+import { AchievementLevel } from '@/types/form/client';
+import { CellInput, Row, Td } from '@maru/ui';
+
+interface Props {
+    subjectName: string;
+    achievementLevel21: AchievementLevel;
+    achievementLevel22: AchievementLevel;
+    achievementLevel31: AchievementLevel;
+}
+
+const 교과성적Item = ({
+    subjectName,
+    achievementLevel21,
+    achievementLevel22,
+    achievementLevel31,
+}: Props) => {
+    return (
+        <Row height={64}>
+            <Td option="SECONDARY" width={123} height="100%">
+                {subjectName}
+            </Td>
+            <Td width={140} height="100%">
+                <CellInput type="text" value={achievementLevel21} readOnly />
+            </Td>
+            <Td width={140} height="100%">
+                <CellInput type="text" value={achievementLevel22} readOnly />
+            </Td>
+            <Td width={140} height="100%">
+                <CellInput type="text" value={achievementLevel31} readOnly />
+            </Td>
+        </Row>
+    );
+};
+
+export default 교과성적Item;

apps/admin/src/components/form/FormDetailContent/성적/성적.tsx

@@ -0,0 +1,36 @@
+import SideMenu from '@/components/common/SideMenu/SideMenu';
+import { GRADUATION_STEP_LIST } from '@/constants/form/data';
+import { Column, Row } from '@maru/ui';
+import { SwitchCase } from '@toss/react';
+import { useState } from 'react';
+import 교과성적 from './교과성적/교과성적';
+
+interface Props {
+    id: number;
+}
+
+const 성적 = ({ id }: Props) => {
+    const [currentGraduationStep, setCurrentGraduationStep] = useState('교과 성적');
+    return (
+        <Row gap={48}>
+            <Column gap={10}>
+                {GRADUATION_STEP_LIST.map((graduationStep, index) => (
+                    <SideMenu
+                        key={`graduation-step ${index}`}
+                        active={currentGraduationStep === graduationStep}
+                        onClick={() => setCurrentGraduationStep(graduationStep)}>
+                        {graduationStep}
+                    </SideMenu>
+                ))}
+            </Column>
+            <SwitchCase
+                value={currentGraduationStep}
+                caseBy={{
+                    '교과 성적': <교과성적 id={id} />,
+                }}
+            />
+        </Row>
+    );
+};
+
+export default 성적;

apps/admin/src/constants/form/data.ts

@@ -6,3 +6,5 @@ export const FORM_DETAIL_STEP_LIST = [
     '성적',
     '자기소개서',
 ] as const;
+
+export const GRADUATION_STEP_LIST = ['교과 성적', '출결 상황', '봉사 시간', '자격증'] as const;

apps/admin/src/types/form/client.ts

@@ -50,7 +50,7 @@ export interface FormDetail {
     parent: ParentInfo;
     education: EducationInfo;
     grade: {
-        subjectList: StudentSubject[];
+        subjectList: Subject[];
         attendance1: Attendance;
         attendance2: Attendance;
         attendance3: Attendance;
@@ -96,12 +96,16 @@ export interface EducationInfo {
 
 export type AchievementLevel = 'A' | 'B' | 'C' | 'D' | 'E';
 
-export interface StudentSubject {
+export interface AchievementLevelsGroup {
     subjectName: string;
-    achievementLevel21: AchievementLevel;
-    achievementLevel22: AchievementLevel;
-    achievementLevel31: AchievementLevel;
-    score: number;
+    achievementLevels: AchievementLevel[];
+}
+
+export interface Subject {
+    subjectName: string;
+    achievementLevel: AchievementLevel;
+    grade: number;
+    semester: number;
 }
 
 export interface Attendance {

apps/admin/src/utils/functions/getAchievementLevelsGroupList.ts

@@ -0,0 +1,26 @@
+import { AchievementLevelsGroup, Subject } from '@/types/form/client';
+
+/**
+ * Subject[] 타입을 AchievementLevelsGroup[] 타입으로 변환시켜주는 함수입니다.
+ * @param subjectList
+ * @returns
+ */
+function getAchievementLevelsGroupList(subjectList?: Subject[]) {
+    if (!subjectList) return [];
+    return subjectList.reduce((acc: AchievementLevelsGroup[], record) => {
+        let existingSubject = acc.find((subject) => subject.subjectName === record.subjectName);
+
+        if (existingSubject) {
+            existingSubject.achievementLevels.push(record.achievementLevel);
+        } else {
+            acc.push({
+                subjectName: record.subjectName,
+                achievementLevels: [record.achievementLevel],
+            });
+        }
+
+        return acc;
+    }, []);
+}
+
+export default getAchievementLevelsGroupList;