diff --git a/apps/web/src/app/university/application/ScorePageContent.tsx b/apps/web/src/app/university/application/ScorePageContent.tsx index d7be963f..6e030ea7 100644 --- a/apps/web/src/app/university/application/ScorePageContent.tsx +++ b/apps/web/src/app/university/application/ScorePageContent.tsx @@ -1,7 +1,7 @@ "use client"; import { useRouter } from "next/navigation"; -import { useEffect, useMemo, useRef, useState } from "react"; +import { type FormEvent, useEffect, useMemo, useRef, useState } from "react"; import { useGetApplicationsList } from "@/apis/applications"; import ConfirmCancelModal from "@/components/modal/ConfirmCancelModal"; import ButtonTab from "@/components/ui/ButtonTab"; @@ -9,7 +9,9 @@ import Tab from "@/components/ui/Tab"; import { REGIONS_KO } from "@/constants/university"; import type { ScoreSheet as ScoreSheetType } from "@/types/application"; import type { RegionKo } from "@/types/university"; +import ApplicationSectionTitle from "./_components/ApplicationSectionTitle"; import ScoreSearchBar from "./ScoreSearchBar"; +import ScoreSearchField from "./ScoreSearchField"; import ScoreSheet from "./ScoreSheet"; const PREFERENCE_CHOICE: ("1순위" | "2순위" | "3순위")[] = ["1순위", "2순위", "3순위"]; @@ -79,7 +81,7 @@ const ScorePageContent = () => { }, [scoreResponseData, regionFilter, searchValue]); // (이하 코드는 동일) - const handleSearch = (event: React.FormEvent) => { + const handleSearch = (event: FormEvent) => { event.preventDefault(); const keyword = searchRef.current?.value || ""; setRegionFilter(""); @@ -91,6 +93,9 @@ const ScorePageContent = () => { if (searchRef.current) { searchRef.current.value = keyword; } + setRegionFilter(""); + setSearchValue(keyword); + setSearchActive(false); }; const handleSearchClick = () => { @@ -121,35 +126,23 @@ const ScorePageContent = () => { const hotKeyWords = ["RMIT", "오스트라바", "칼스루에", "그라츠", "추오", "프라하", "보라스", "빈", "메모리얼"]; return ( -
+
+ {searchActive ? ( -
- {/* Title for the popular searches section */} -
인기 검색
- - {/* Container for the keyword buttons */} -
- {hotKeyWords.map((word) => ( - - ))} -
+
+
) : ( <> - +
+ +
{ setSearchValue(""); setRegionFilter(newRegion as RegionKo | ""); }} - style={{ padding: "10px 0 10px 18px" }} + style={{ padding: "10px 0 10px 8px" }} /> -
+
{scoreSheets.map((choice) => ( ))} diff --git a/apps/web/src/app/university/application/ScoreSearchBar.tsx b/apps/web/src/app/university/application/ScoreSearchBar.tsx index 2f402fe0..1242605d 100644 --- a/apps/web/src/app/university/application/ScoreSearchBar.tsx +++ b/apps/web/src/app/university/application/ScoreSearchBar.tsx @@ -1,26 +1,26 @@ -import type { RefObject } from "react"; +import type { FormEvent, RefObject } from "react"; import { IconSearchFilled } from "@/public/svgs"; type ScoreSearchBarProps = { onClick: () => void; textRef: RefObject; - searchHandler: (_e: React.FormEvent) => void; + searchHandler: (_e: FormEvent) => void; }; const ScoreSearchBar = ({ onClick, textRef, searchHandler }: ScoreSearchBarProps) => (
e.key === "Enter" && onClick()} - className="flex h-[53px] flex-row items-center border-b border-bg-700" + className="flex h-12 flex-row items-center rounded-lg bg-white pl-3 shadow-sdwB" onSubmit={searchHandler} role="search" > -
diff --git a/apps/web/src/app/university/application/ScoreSearchField.tsx b/apps/web/src/app/university/application/ScoreSearchField.tsx index 50eece29..058e817c 100644 --- a/apps/web/src/app/university/application/ScoreSearchField.tsx +++ b/apps/web/src/app/university/application/ScoreSearchField.tsx @@ -5,12 +5,12 @@ type ScoreSearchFieldProps = { const ScoreSearchField = ({ keyWords, setKeyWord }: ScoreSearchFieldProps) => (
-
인기 검색
-
+
인기 검색
+
{keyWords.map((keyWord) => ( -
+ + - {/* 테이블 바디 (토글) */} - {tableOpened && ( -
+ {tableOpened ? ( +
{scoreSheet.applicants.map((applicant) => ( -
- +
+ {applicant.nicknameForApply} @@ -39,18 +37,11 @@ const ScoreSheet = ({ scoreSheet }: { scoreSheet: ScoreSheetType }) => { {applicant.testScore} - - {/* {applicant.isMine && ( - - - - )} */} -
))}
- )} - + ) : null} +
); }; diff --git a/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx b/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx new file mode 100644 index 00000000..c1ca0111 --- /dev/null +++ b/apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx @@ -0,0 +1,18 @@ +import BlockBtn from "@/components/button/BlockBtn"; + +type ApplicationBottomActionBarProps = { + label: string; + onClick: () => void; +}; + +const ApplicationBottomActionBar = ({ label, onClick }: ApplicationBottomActionBarProps) => { + return ( +
+
+ {label} +
+
+ ); +}; + +export default ApplicationBottomActionBar; diff --git a/apps/web/src/app/university/application/_components/ApplicationSectionTitle.tsx b/apps/web/src/app/university/application/_components/ApplicationSectionTitle.tsx new file mode 100644 index 00000000..64f4d513 --- /dev/null +++ b/apps/web/src/app/university/application/_components/ApplicationSectionTitle.tsx @@ -0,0 +1,16 @@ +type ApplicationSectionTitleProps = { + title: string; + description?: string; + className?: string; +}; + +const ApplicationSectionTitle = ({ title, description, className = "" }: ApplicationSectionTitleProps) => { + return ( +
+

{title}

+ {description ?

{description}

: null} +
+ ); +}; + +export default ApplicationSectionTitle; diff --git a/apps/web/src/app/university/application/apply/ConfirmStep.tsx b/apps/web/src/app/university/application/apply/ConfirmStep.tsx index 9fe28dd6..26cdc5d3 100644 --- a/apps/web/src/app/university/application/apply/ConfirmStep.tsx +++ b/apps/web/src/app/university/application/apply/ConfirmStep.tsx @@ -1,8 +1,9 @@ import clsx from "clsx"; -import BlockBtn from "@/components/button/BlockBtn"; import { IconCheck } from "@/public/svgs/mentor"; import type { ListUniversity } from "@/types/university"; +import ApplicationBottomActionBar from "../_components/ApplicationBottomActionBar"; +import ApplicationSectionTitle from "../_components/ApplicationSectionTitle"; type ConfirmStepProps = { universityList: ListUniversity[]; @@ -11,42 +12,33 @@ type ConfirmStepProps = { const ConfirmStep = ({ universityList, onNext }: ConfirmStepProps) => { return ( -
- {/* 상단 컨텐츠 */} -
+
+
-

- 지원하기 완료 -

-

- 지원은 총 3번만 수정 가능하며, -
- 제출 완료 후 성적을 변경 하실 수 없습니다. -

- - {/* 지원 학교 목록 카드 */} -
-
- {universityList.map((university, index) => ( -
- {index + 1}지망 - {university.koreanName} -
- ))} -
-
+ - {/* 하단 버튼 */} -
- 제출하기 +
+
+ {universityList.map((university, index) => ( +
+ {index + 1}지망 + {university.koreanName} +
+ ))} +
+
); }; diff --git a/apps/web/src/app/university/application/apply/DoneStep.tsx b/apps/web/src/app/university/application/apply/DoneStep.tsx index ca75cc34..1b297fde 100644 --- a/apps/web/src/app/university/application/apply/DoneStep.tsx +++ b/apps/web/src/app/university/application/apply/DoneStep.tsx @@ -1,22 +1,25 @@ import { useRouter } from "next/navigation"; import BlockBtn from "@/components/button/BlockBtn"; import Image from "@/components/ui/FallbackImage"; +import ApplicationSectionTitle from "../_components/ApplicationSectionTitle"; const DoneStep = () => { const router = useRouter(); return ( -
- 지원 완료 -
- 학교 지원이 -
- 완료 - 되었어요! +
+
+
+ 지원 완료 +
+
-
+
{ router.push("/university/application"); }} diff --git a/apps/web/src/app/university/application/apply/EmptyGPA.tsx b/apps/web/src/app/university/application/apply/EmptyGPA.tsx index 93ad376f..cbd0aa40 100644 --- a/apps/web/src/app/university/application/apply/EmptyGPA.tsx +++ b/apps/web/src/app/university/application/apply/EmptyGPA.tsx @@ -1,19 +1,24 @@ import Link from "next/link"; import { IconSolidConnectionSmallLogo } from "@/public/svgs/my"; +import ApplicationSectionTitle from "../_components/ApplicationSectionTitle"; const EmptyGPA = () => { return ( -
- -

- 지원할 수 있는 성적이 없어요. -
- 성적부터 입력해 볼까요? -

+
+
+
+ +
+ +
성적 등록하러가기 diff --git a/apps/web/src/app/university/application/apply/GpaStep.tsx b/apps/web/src/app/university/application/apply/GpaStep.tsx index 43e7b468..1c56bb53 100644 --- a/apps/web/src/app/university/application/apply/GpaStep.tsx +++ b/apps/web/src/app/university/application/apply/GpaStep.tsx @@ -2,11 +2,12 @@ import { useState } from "react"; import ScoreCard from "@/app/university/score/ScoreCard"; -import BlockBtn from "@/components/button/BlockBtn"; import TextModal from "@/components/modal/TextModal"; import Tab from "@/components/ui/Tab"; import { toast } from "@/lib/zustand/useToastStore"; import { type GpaScore, ScoreSubmitStatus } from "@/types/score"; +import ApplicationBottomActionBar from "../_components/ApplicationBottomActionBar"; +import ApplicationSectionTitle from "../_components/ApplicationSectionTitle"; type GpaStepProps = { gpaScoreList: GpaScore[]; @@ -17,11 +18,21 @@ type GpaStepProps = { const GpaStep = ({ gpaScoreList, curGpaScore, setCurGpaScore, onNext }: GpaStepProps) => { const [isModalOpen, setIsModalOpen] = useState(false); + + const handleNext = () => { + if (curGpaScore === null) { + setIsModalOpen(true); + return; + } + onNext(); + }; + return ( <>
+ {}} /> -
+
{gpaScoreList.map((score) => (
-
-
- { - if (curGpaScore === null) { - setIsModalOpen(true); - return; - } - onNext(); - }} - > - 다음 - -
-
+ setIsModalOpen(false)} diff --git a/apps/web/src/app/university/application/apply/LanguageStep.tsx b/apps/web/src/app/university/application/apply/LanguageStep.tsx index 687f2136..b27c67bf 100644 --- a/apps/web/src/app/university/application/apply/LanguageStep.tsx +++ b/apps/web/src/app/university/application/apply/LanguageStep.tsx @@ -2,11 +2,12 @@ import { useState } from "react"; import ScoreCard from "@/app/university/score/ScoreCard"; -import BlockBtn from "@/components/button/BlockBtn"; import TextModal from "@/components/modal/TextModal"; import Tab from "@/components/ui/Tab"; import { toast } from "@/lib/zustand/useToastStore"; import { type LanguageTestScore, languageTestScoreInfo, ScoreSubmitStatus } from "@/types/score"; +import ApplicationBottomActionBar from "../_components/ApplicationBottomActionBar"; +import ApplicationSectionTitle from "../_components/ApplicationSectionTitle"; type LanguageStepProps = { languageTestScoreList: LanguageTestScore[]; @@ -22,11 +23,21 @@ const LanguageStep = ({ onNext, }: LanguageStepProps) => { const [isModalOpen, setIsModalOpen] = useState(false); + + const handleNext = () => { + if (curLanguageTestScore === null) { + setIsModalOpen(true); + return; + } + onNext(); + }; + return ( <>
+ {}} /> -
+
{languageTestScoreList.map((score) => (
-
-
- { - if (curLanguageTestScore === null) { - setIsModalOpen(true); - return; - } - onNext(); - }} - > - 다음 - -
-
+ setIsModalOpen(false)} diff --git a/apps/web/src/app/university/application/apply/UniversityStep.tsx b/apps/web/src/app/university/application/apply/UniversityStep.tsx index ac7cea50..bbbfd7c2 100644 --- a/apps/web/src/app/university/application/apply/UniversityStep.tsx +++ b/apps/web/src/app/university/application/apply/UniversityStep.tsx @@ -2,11 +2,12 @@ import { useState } from "react"; -import BlockBtn from "@/components/button/BlockBtn"; import TextModal from "@/components/modal/TextModal"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/Select"; import type { ListUniversity } from "@/types/university"; +import ApplicationBottomActionBar from "../_components/ApplicationBottomActionBar"; +import ApplicationSectionTitle from "../_components/ApplicationSectionTitle"; type UniversityStepProps = { universityList: ListUniversity[]; @@ -27,100 +28,94 @@ const UniversityStep = ({ universityList, curUniversityList, setCurUniversityLis const isDisabled = (universityId: number, currentIndex: number) => curUniversityList.some((pickedId, i) => i !== currentIndex && pickedId === universityId); + const handleNext = () => { + if (curUniversityList.length === 0 || curUniversityList[0] === 0) { + setIsModalOpen(true); + return; + } + onNext(); + }; + return ( <> -
-
- - 본 과정 완료 후, 지원자 현황을 확인 할 수 있습니다. - -
-
해외 파견 학교를 검색하세요.
-
-
- - -
-
- - +
+ +
+

본 과정 완료 후, 지원자 현황을 확인할 수 있습니다.

+
+
+ + +
+
+ + +
+
+ + +
-
- - -
-
-
-
-
- { - if (curUniversityList.length === 0 || curUniversityList[0] === 0) { - setIsModalOpen(true); - setCurUniversityList(curUniversityList.filter((id) => id !== null)); - return; - } - onNext(); - }} - > - 다음 -
+ setIsModalOpen(false)} diff --git a/apps/web/src/app/university/application/page.tsx b/apps/web/src/app/university/application/page.tsx index a17cff3a..54af993b 100644 --- a/apps/web/src/app/university/application/page.tsx +++ b/apps/web/src/app/university/application/page.tsx @@ -12,7 +12,7 @@ const ScorePage = () => { return ( <> -
+