Skip to content

feat: 모의지원 페이지 UI를 멘토 디자인 톤으로 공통화 #448

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
manNomi merged 1 commit into from
Feb 18, 2026
Merged

feat: 모의지원 페이지 UI를 멘토 디자인 톤으로 공통화 #448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 20 additions & 27 deletions apps/web/src/app/university/application/ScorePageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
"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";
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순위"];
Expand Down Expand Up @@ -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("");
Expand All @@ -91,6 +93,9 @@ const ScorePageContent = () => {
if (searchRef.current) {
searchRef.current.value = keyword;
}
setRegionFilter("");
setSearchValue(keyword);
setSearchActive(false);
};

const handleSearchClick = () => {
Expand Down Expand Up @@ -121,35 +126,23 @@ const ScorePageContent = () => {
const hotKeyWords = ["RMIT", "오스트라바", "칼스루에", "그라츠", "추오", "프라하", "보라스", "빈", "메모리얼"];

return (
<div className="gap-4 px-5">
<div className="px-5">
<ApplicationSectionTitle
className="mb-3 mt-5"
title="지원자 현황"
description="지원 순위와 지역 필터로 원하는 학교 현황을 빠르게 확인할 수 있어요."
/>
<ScoreSearchBar onClick={handleSearchClick} textRef={searchRef} searchHandler={handleSearch} />

{searchActive ? (
<div className="p-4 font-sans">
{/* Title for the popular searches section */}
<div className="ml-5 mt-[18px] text-black typo-sb-7">인기 검색</div>

{/* Container for the keyword buttons */}
<div className="ml-5 mt-2.5 flex flex-wrap gap-2">
{hotKeyWords.map((word) => (
<button
key={word}
// Button styling for each keyword
className="flex items-center justify-center gap-2.5 rounded-full bg-k-50 px-3 py-[5px] text-black transition-colors typo-medium-2 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
onClick={() => {
handleSearchField(word);
handleSearch(new Event("submit") as unknown as React.FormEvent);
}}
type="button"
>
{word}
</button>
))}
</div>
<div className="mt-3 rounded-lg bg-white py-4 shadow-sdwB">
<ScoreSearchField keyWords={hotKeyWords} setKeyWord={handleSearchField} />
</div>
) : (
<>
<Tab choices={PREFERENCE_CHOICE} choice={preference} setChoice={setPreference} />
<div className="mt-4 rounded-lg bg-white px-2 shadow-sdwB">
<Tab choices={PREFERENCE_CHOICE} choice={preference} setChoice={setPreference} />
</div>
<ButtonTab
choices={REGIONS_KO}
choice={regionFilter}
Expand All @@ -158,10 +151,10 @@ const ScorePageContent = () => {
setSearchValue("");
setRegionFilter(newRegion as RegionKo | "");
}}
style={{ padding: "10px 0 10px 18px" }}
style={{ padding: "10px 0 10px 8px" }}
/>

<div className="mx-auto mt-2.5 flex w-full flex-col gap-3 overflow-x-auto">
<div className="mx-auto mt-3 flex w-full flex-col gap-3 overflow-x-auto pb-4">
{scoreSheets.map((choice) => (
<ScoreSheet key={choice.koreanName} scoreSheet={choice} />
))}
Expand Down
10 changes: 5 additions & 5 deletions apps/web/src/app/university/application/ScoreSearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<HTMLInputElement>;
searchHandler: (_e: React.FormEvent) => void;
searchHandler: (_e: FormEvent) => void;
};

const ScoreSearchBar = ({ onClick, textRef, searchHandler }: ScoreSearchBarProps) => (
<form
onClick={onClick}
onKeyDown={(e) => 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"
>
<input
className="w-full border-0 pl-6 text-gray-400 outline-0 typo-regular-1"
className="w-full border-0 pl-2 text-k-500 outline-0 placeholder:text-k-300 typo-regular-2"
placeholder="해외 파견 학교를 검색하세요."
ref={textRef}
/>
<button className="cursor-pointer border-0 bg-white pr-[11px]" type="submit" aria-label="검색">
<button className="cursor-pointer border-0 bg-transparent pr-3" type="submit" aria-label="검색">
<IconSearchFilled />
</button>
</form>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/app/university/application/ScoreSearchField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ type ScoreSearchFieldProps = {

const ScoreSearchField = ({ keyWords, setKeyWord }: ScoreSearchFieldProps) => (
<div>
<div className="ml-5 mt-[18px] text-black typo-sb-7">인기 검색</div>
<div className="ml-5 mt-[10px] flex flex-wrap gap-2">
<div className="px-5 text-k-800 typo-sb-7">인기 검색</div>
<div className="mt-2 flex flex-wrap gap-2 px-5">
{keyWords.map((keyWord) => (
<button
key={keyWord}
className="flex items-center justify-center gap-[10px] rounded-full bg-bg-50 px-3 py-[5px] text-black typo-medium-2"
className="flex items-center justify-center gap-[10px] rounded-full bg-k-50 px-3 py-[5px] text-k-800 transition-colors hover:bg-k-100 typo-medium-2"
onClick={() => setKeyWord(keyWord)}
type="button"
>
Expand Down
41 changes: 16 additions & 25 deletions apps/web/src/app/university/application/ScoreSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,25 @@ const ScoreSheet = ({ scoreSheet }: { scoreSheet: ScoreSheetType }) => {
const [tableOpened, setTableOpened] = useState(false);

return (
// 테이블 전체 컨테이너
<button
onClick={() => setTableOpened(!tableOpened)}
className="w-full overflow-hidden rounded-lg border border-gray-200"
>
{/* 테이블 헤더 */}
<div className="flex h-10 items-center justify-between bg-k-50 px-4">
<p className="truncate text-black typo-sb-7">
<div className="w-full overflow-hidden rounded-lg bg-white shadow-sdwB">
<button
onClick={() => setTableOpened(!tableOpened)}
className="flex min-h-12 w-full items-center justify-between border-b border-k-50 bg-k-50 px-4 text-left"
type="button"
>
<p className="truncate text-k-900 typo-sb-7">
{scoreSheet.koreanName} ({scoreSheet.applicants.length}/{scoreSheet.studentCapacity})
</p>
<button type="button" aria-label="더보기" className="cursor-pointer border-none bg-transparent p-1">
<span className="flex h-6 w-6 items-center justify-center">
<IconExpandMoreFilled className={`transition-transform duration-300 ${tableOpened ? "rotate-180" : ""}`} />
</button>
</div>
</span>
</button>

{/* 테이블 바디 (토글) */}
{tableOpened && (
<div className="divide-y divide-gray-200">
{tableOpened ? (
<div className="divide-y divide-k-50">
{scoreSheet.applicants.map((applicant) => (
<div key={applicant.nicknameForApply} className="flex h-10 items-center px-3 text-gray-600 typo-medium-3">
<span className="min-w-[30px] flex-1 overflow-hidden whitespace-nowrap text-black typo-regular-2">
<div key={applicant.nicknameForApply} className="flex min-h-12 items-center px-4 text-k-600 typo-medium-3">
Comment on lines 26 to +27
Copy link

@coderabbitai coderabbitai bot Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Search for nicknameForApply type definition and usage
rg -n "nicknameForApply" --type ts -A 3 -B 3

Repository: solid-connection/solid-connect-web

Length of output: 1579

🏁 Script executed:

# Find the ScoreSheetType definition
rg -n "ScoreSheetType|type ScoreSheet" --type ts -A 10 -B 2

Repository: solid-connection/solid-connect-web

Length of output: 7060

🏁 Script executed:

# Search for applicant type definition
rg -n "applicant.*type|interface.*applicant" --type ts -A 5 -B 2 -i

Repository: solid-connection/solid-connect-web

Length of output: 1404

🏁 Script executed:

# Find the ScoreSheet type/interface definition
rg -n "type ScoreSheet|interface ScoreSheet" --type ts -A 15 -B 2

Repository: solid-connection/solid-connect-web

Length of output: 1048

🏁 Script executed:

# Check the full application.ts file to see all type definitions
cat -n apps/web/src/types/application.ts | head -40

Repository: solid-connection/solid-connect-web

Length of output: 1095

nicknameForApply를 React의 key로 사용할 때는 유일성이 보장되어야 합니다.

현재 코드에서 문제점:

  1. 타입 정의 확인
    nicknameForApply는 Applicant 인터페이스에서 단순 string 타입으로만 정의되어 있으며, 유일성 보장이 없습니다.

  2. 잠재적 위험
    동일한 ScoreSheet 내에서 두 지원자가 같은 닉네임을 사용할 경우, React의 재조정이 제대로 작동하지 않아 UI 업데이트 오류가 발생할 수 있습니다.

  3. 권장 개선안

    • 서버에서 제공하는 고유 ID(예: id, applicantId)가 있다면 그것을 key로 사용하세요.
    • 유일성이 보장되지 않으면 배열의 인덱스를 잠시 사용할 수 있지만, 이상적이지는 않습니다.
    • API 스펙상 nicknameForApply의 유일성이 보장된다면, 타입 정의에 명시적으로 표기하는 것이 좋습니다.
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/app/university/application/ScoreSheet.tsx` around lines 26 - 27,
The map is using applicant.nicknameForApply as the React key but uniqueness
isn't guaranteed; update the mapping in ScoreSheet.tsx to use a guaranteed
unique field (e.g., applicant.id or applicant.applicantId) inside the
scoreSheet.applicants.map callback and fall back to a stable alternative (such
as the array index) only if no unique id exists; also update the Applicant
type/signature to reflect a unique identifier (e.g., add id: string) if the API
guarantees it so future code uses that unique property instead of
nicknameForApply.

<span className="min-w-[30px] flex-1 overflow-hidden whitespace-nowrap text-k-900 typo-regular-2">
{applicant.nicknameForApply}
</span>
<span className="min-w-[30px] flex-1 overflow-hidden whitespace-nowrap text-center typo-medium-2">
Expand All @@ -39,18 +37,11 @@ const ScoreSheet = ({ scoreSheet }: { scoreSheet: ScoreSheetType }) => {
<span className="min-w-[30px] flex-1 overflow-hidden whitespace-nowrap text-center typo-medium-2">
{applicant.testScore}
</span>
<span className="flex w-[18px] flex-none items-center justify-center">
{/* {applicant.isMine && (
<Link href="/university/application/apply">
<IconEditFilled />
</Link>
)} */}
</span>
</div>
))}
</div>
)}
</button>
) : null}
</div>
);
};

Expand Down
18 changes: 18 additions & 0 deletions apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import BlockBtn from "@/components/button/BlockBtn";

type ApplicationBottomActionBarProps = {
label: string;
onClick: () => void;
};

const ApplicationBottomActionBar = ({ label, onClick }: ApplicationBottomActionBarProps) => {
return (
<div className="fixed bottom-14 w-full max-w-app bg-white">
<div className="mb-[37px] px-5">
<BlockBtn onClick={onClick}>{label}</BlockBtn>
</div>
</div>
);
};
Comment on lines +8 to +16
Copy link

@coderabbitai coderabbitai bot Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Search for fixed bottom positioning patterns
echo "=== Searching for 'fixed bottom' patterns ==="
rg "fixed bottom" --type=tsx -C 3

echo -e "\n=== Searching for max-w-app usage with fixed positioning ==="
rg "fixed.*max-w-app|max-w-app.*fixed" --type=tsx -C 2

echo -e "\n=== Checking app container structure ==="
rg "max-w-app" --type=tsx -C 1 | head -50

Repository: solid-connection/solid-connect-web

Length of output: 328

🏁 Script executed:

#!/bin/bash
# Search for fixed bottom positioning patterns in tsx files
echo "=== Searching for 'fixed bottom' in tsx files ==="
rg "fixed.*bottom" -g '*.tsx' -C 3

echo -e "\n=== Searching for ApplicationBottomActionBar usage ==="
rg "ApplicationBottomActionBar" -g '*.tsx' -C 2

echo -e "\n=== Checking the app layout structure for centering ==="
rg "max-w-app" -g '*.tsx' -C 2 | head -80

echo -e "\n=== Looking for fixed elements with centering utilities ==="
rg "fixed.*(left-|translate-)" -g '*.tsx' -C 2

Repository: solid-connection/solid-connect-web

Length of output: 28109

고정 위치 지정 요소에 가로 중앙 정렬이 누락되었습니다.

fixed 요소는 뷰포트를 기준으로 배치되므로, 현재 패턴(fixed bottom-14 w-full max-w-app)으로는 넓은 화면에서 앱 컨테이너와 정렬이 맞지 않을 수 있습니다. 다른 유사 컴포넌트들이 사용 중인 패턴을 참고하여 수정해주세요:

  1. 현재 패턴 (문제)

    • fixed bottom-14 w-full max-w-app (중앙 정렬 없음)

  2. 권장 패턴 (적용됨)

    • fixed bottom-0 left-0 right-0 w-full 래퍼 + 내부에 mx-auto w-full max-w-app px-5
    • 참고: UniversityScreen, StudyStatusScreen 등에서 이미 사용 중
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@apps/web/src/app/university/application/_components/ApplicationBottomActionBar.tsx`
around lines 8 - 16, The fixed bottom bar in ApplicationBottomActionBar is not
horizontally centered; update the element tree so the outer wrapper uses a
full-viewport fixed container (e.g., fixed bottom-0 left-0 right-0 w-full) and
move sizing/centering to an inner wrapper that uses mx-auto w-full max-w-app
px-5 before rendering <BlockBtn>; modify the JSX inside the
ApplicationBottomActionBar component to follow that wrapper pattern so the bar
aligns with other screens like UniversityScreen and StudyStatusScreen.


export default ApplicationBottomActionBar;
16 changes: 16 additions & 0 deletions apps/web/src/app/university/application/_components/ApplicationSectionTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
type ApplicationSectionTitleProps = {
title: string;
description?: string;
className?: string;
};

const ApplicationSectionTitle = ({ title, description, className = "" }: ApplicationSectionTitleProps) => {
return (
<div className={className}>
<h2 className="text-k-900 typo-bold-5">{title}</h2>
{description ? <p className="mt-1 text-k-500 typo-regular-2">{description}</p> : null}
</div>
);
};

export default ApplicationSectionTitle;
58 changes: 25 additions & 33 deletions apps/web/src/app/university/application/apply/ConfirmStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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[];
Expand All @@ -11,42 +12,33 @@ type ConfirmStepProps = {

const ConfirmStep = ({ universityList, onNext }: ConfirmStepProps) => {
return (
<div className="flex flex-col items-center justify-between bg-white p-5 font-sans">
{/* 상단 컨텐츠 */}
<div className="flex w-full flex-1 flex-col items-center justify-center text-center">
<div className="my-5 px-5 pb-40">
<div className="flex items-center justify-center">
<IconCheck />
<h1 className="mt-4 text-secondary typo-bold-1">
지원하기 <span className="text-k-800">완료</span>
</h1>
<p className="mt-2 text-k-500 typo-regular-2">
지원은 총 3번만 수정 가능하며,
<br />
제출 완료 후 성적을 변경 하실 수 없습니다.
</p>

{/* 지원 학교 목록 카드 */}
<div className="mt-8 w-full rounded-lg border border-secondary bg-white p-2 shadow-sdwC">
<div className="space-y-2">
{universityList.map((university, index) => (
<div
key={university.id}
className={clsx(
"flex items-center justify-between px-4 py-5 typo-regular-2",
index < universityList.length - 1 && "border-b border-gray-100",
)}
>
<span className="text-gray-600 typo-medium-2">{index + 1}지망</span>
<span className="text-blue-600 typo-sb-9 hover:underline">{university.koreanName}</span>
</div>
))}
</div>
</div>
</div>
<ApplicationSectionTitle
className="mt-4 text-center"
title="지원 내용을 확인해주세요"
description="제출 후에는 성적을 변경할 수 없습니다. 선택한 학교를 한 번 더 확인해주세요."
/>

{/* 하단 버튼 */}
<div className="mt-10 w-full">
<BlockBtn onClick={onNext}>제출하기</BlockBtn>
<div className="mt-5 rounded-lg bg-white p-4 shadow-sdwB">
<div className="space-y-2">
{universityList.map((university, index) => (
<div
key={university.id}
className={clsx(
"flex items-center justify-between px-4 py-4 typo-regular-2",
index < universityList.length - 1 && "border-b border-k-50",
)}
>
<span className="text-k-500 typo-medium-2">{index + 1}지망</span>
<span className="text-primary typo-sb-9">{university.koreanName}</span>
</div>
))}
</div>
</div>
<ApplicationBottomActionBar label="제출하기" onClick={onNext} />
</div>
);
};
Expand Down
21 changes: 12 additions & 9 deletions apps/web/src/app/university/application/apply/DoneStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="mt-52 flex h-full flex-col items-center justify-center gap-6">
<Image src="/images/survey-complete-icon.png" width={120} height={120} alt="지원 완료" />
<div className="text-center font-serif text-k-800 typo-sb-2">
학교 지원이
<br />
<span className="text-secondary">완료</span>
되었어요!
<div className="mt-24 px-5">
<div className="rounded-lg bg-white px-6 py-8 text-center shadow-sdwB">
<div className="flex justify-center">
<Image src="/images/survey-complete-icon.png" width={120} height={120} alt="지원 완료" />
</div>
<ApplicationSectionTitle
className="mt-4"
title="학교 지원이 완료되었어요"
description="지원자 현황에서 경쟁률을 바로 확인할 수 있어요."
/>
</div>

<div className="mt-10 flex w-full flex-col gap-3 px-5 pt-8">
<div className="mt-6 flex w-full flex-col gap-3">
<BlockBtn
className="bg-primary-900 text-white"
onClick={() => {
router.push("/university/application");
}}
Expand Down
21 changes: 13 additions & 8 deletions apps/web/src/app/university/application/apply/EmptyGPA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
import Link from "next/link";

import { IconSolidConnectionSmallLogo } from "@/public/svgs/my";
import ApplicationSectionTitle from "../_components/ApplicationSectionTitle";

const EmptyGPA = () => {
return (
<div className="mt-52 flex flex-col items-center justify-center gap-2 rounded-lg text-center">
<IconSolidConnectionSmallLogo />
<p className="text-k-300">
지원할 수 있는 성적이 없어요.
<br />
성적부터 입력해 볼까요?
</p>
<div className="mt-24 px-5">
<div className="rounded-lg bg-white px-6 py-8 text-center shadow-sdwB">
<div className="flex justify-center">
<IconSolidConnectionSmallLogo />
</div>
<ApplicationSectionTitle
className="mt-4"
title="지원할 수 있는 성적이 없어요"
description="성적을 먼저 등록하면 모의지원 진행이 가능해요."
/>
</div>
<Link
href="/university/score"
className="mt-2 h-13 w-60 rounded-full bg-gradient-to-l from-primary to-secondary p-4 text-white typo-sb-9"
className="mt-6 flex h-13 w-full items-center justify-center rounded-lg bg-primary text-white typo-medium-1"
>
성적 등록하러가기
</Link>
Expand Down
Loading