Skip to content

design: TopNavigation, UniversityCard 디자인 변경, 리팩토링 #183

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
wibaek merged 4 commits into from
May 30, 2025
Merged

design: TopNavigation, UniversityCard 디자인 변경, 리팩토링 #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
32a5abb
design: TopNavigation 배경 색 변경
wibaek May 30, 2025
73883f8
design: UniversityCard 디자인 변경, 리팩토링
wibaek May 30, 2025
651ac14
refactor: Home에서 UniversiyCards 사용하게 변경
wibaek May 30, 2025
c7599fc
remove: 미사용 import 삭제
wibaek May 30, 2025
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
4 changes: 0 additions & 4 deletions src/app/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,6 @@ const Home = ({ newsList }: HomeProps) => {

return (
<div className="">
{/* <div className="pl-5">
<CollegeSearch />
</div> */}

<div
className="flex h-[60px] cursor-pointer items-center justify-between border-b border-k-100 px-5 py-3"
onClick={() => alert("해당 기능은 현재 준비중입니다.")}
Expand Down
2 changes: 1 addition & 1 deletion src/app/university/UniversityPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ const UniversityPage = ({ universities }: { universities: ListUniversity[] }) =>
color={{ deactiveBtn: "bg-[#f0f0f0]", deactiveBtnFont: "text-[#a2a2a2]", background: "white" }}
style={{ marginTop: "14px", marginLeft: "18px" }}
/>
<UniversityCards colleges={filteredColleges} style={{ marginTop: "12px" }} />
<UniversityCards colleges={filteredColleges} className="mx-5 mt-3" />
</>
);
};
Expand Down
91 changes: 57 additions & 34 deletions src/components/college/UniversityCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import Image from "next/image";
import Link from "next/link";

import clsx from "clsx";

import { shortenLanguageTestName } from "@/utils/universityUtils";

import CheveronRightFilled from "@/components/ui/icon/ChevronRightFilled";
Expand All @@ -10,66 +12,87 @@ import { ListUniversity } from "@/types/university";
type UniversityCardsProps = {
colleges: ListUniversity[];
style?: React.CSSProperties;
className?: string;
showCapacity?: boolean;
};

const UniversityCards = ({ colleges, style }: UniversityCardsProps) => (
<div className="flex flex-col gap-2.5" style={style}>
const UniversityCards = ({ colleges, style, className, showCapacity = true }: UniversityCardsProps) => (
<div className={clsx("flex flex-col gap-2.5", className)} style={style}>
{colleges.map((university) => (
<UniversityCard key={university.id} university={university} />
<UniversityCard key={university.id} university={university} showCapacity={showCapacity} />
))}
</div>
);
export default UniversityCards;

type UniversityCardProps = {
university: ListUniversity;
showCapacity?: boolean;
};

export const UniversityCard = ({ university }: UniversityCardProps) => {
export const UniversityCard = ({ university, showCapacity = true }: UniversityCardProps) => {
const convertedKoreanName =
university.term !== process.env.NEXT_PUBLIC_CURRENT_TERM
? `${university.koreanName}(${university.term})`
: university.koreanName;

return (
<Link
className="relative mx-5 flex h-[91px] overflow-hidden rounded-lg border border-solid border-k-100 px-5 py-3 hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10"
className="relative h-[91px] overflow-hidden rounded-lg border border-solid border-k-100 hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10"
href={`/university/${university.id}`}
>
<div className="flex flex-shrink-0 items-center">
<Image
className="h-14 w-14 rounded-full object-cover"
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}/${university.logoImageUrl}`}
width={100}
height={100}
alt={convertedKoreanName || "대학 이미지"}
/>
</div>
<div className="flex justify-between px-5 py-3.5">
<div className="flex gap-[23.5px]">
<UniversityLogo logoImageUrl={university.logoImageUrl} />

<div className="ml-[22px] flex flex-grow flex-col">
<span className="truncate text-base font-bold leading-normal text-k-700">{convertedKoreanName}</span>
<div className="flex items-center justify-between">
<span className="text-sm font-medium leading-normal text-k-500">
{university.country} | {university.region}
</span>
<div className="flex items-center">
<span className="text-xs font-semibold leading-normal text-primary">
모집 {university.studentCapacity}명
</span>
<CheveronRightFilled color="black" opacity="0.54" />
<div className="flex flex-col">
<span className="truncate text-base font-bold leading-normal text-k-700">{convertedKoreanName}</span>
<div className="flex items-center gap-2.5">
<span className="text-xs font-medium leading-normal text-k-500">
{university.country} | {university.region}
</span>
{showCapacity && (
<span className="text-xs font-semibold leading-normal text-primary">
모집 {university.studentCapacity}명
</span>
)}
</div>
<LanguageRequirements languageRequirements={university.languageRequirements} />
</div>
</div>
<div className="flex gap-4">
{university.languageRequirements.slice(0, 3).map((requirement) => (
<span
key={requirement.languageTestType}
className="whitespace-nowrap text-xs font-medium leading-normal text-k-500"
>
{shortenLanguageTestName(requirement.languageTestType)} {requirement.minScore}
</span>
))}
<div className="flex items-center">
<CheveronRightFilled color="black" opacity="0.54" />
</div>
</div>
</Link>
);
};

const UniversityLogo = ({ logoImageUrl }: { logoImageUrl: string }) => (
<div className="flex flex-shrink-0 items-center">
<Image
className="h-14 w-14 rounded-full object-cover"
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}/${logoImageUrl}`}
width={62}
height={62}
alt="대학 이미지"
/>
</div>
);

const LanguageRequirements = ({
languageRequirements,
}: {
languageRequirements: ListUniversity["languageRequirements"];
}) => (
<div className="flex gap-4">
{languageRequirements.slice(0, 3).map((requirement) => (
<span
key={requirement.languageTestType}
className="whitespace-nowrap text-xs font-medium leading-normal text-k-500"
>
{shortenLanguageTestName(requirement.languageTestType)} {requirement.minScore}
</span>
))}
</div>
);
74 changes: 3 additions & 71 deletions src/components/home/UniversityList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";

import { shortenLanguageTestName } from "@/utils/universityUtils";

import ButtonTab from "@/components/ui/ButtonTab";
import CheveronRightFilled from "@/components/ui/icon/ChevronRightFilled";

import { languageTestShortMapping } from "@/types/score";
import UniversityCards from "../college/UniversityCards";

import { ListUniversity, regionMapping } from "@/types/university";

import { getUniversityListPublicApi } from "@/api/university";
Expand Down Expand Up @@ -55,74 +52,9 @@ const UniversityList = () => {
}}
/>
</div>
<UniversityCards colleges={universities} />
<UniversityCards colleges={universities} showCapacity={false} />
</div>
);
};

export default UniversityList;

type UniversityCardsProps = {
colleges: ListUniversity[];
style?: React.CSSProperties;
};

const UniversityCards = ({ colleges, style }: UniversityCardsProps) => (
<div className="flex flex-col gap-2" style={style}>
{colleges.map((university) => (
<UniversityCard key={university.id} university={university} />
))}
</div>
);

type UniversityCardProps = {
university: ListUniversity;
};

const UniversityCard = ({ university }: UniversityCardProps) => {
const convertedKoreanName =
university.term !== process.env.NEXT_PUBLIC_CURRENT_TERM
? `${university.koreanName}(${university.term})`
: university.koreanName;
return (
<Link
className="relative flex h-[91px] overflow-hidden rounded-lg border border-solid border-k-100 px-5 py-4 hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10"
href={`/university/${university.id}`}
>
<div className="flex flex-shrink-0 items-center">
<Image
className="h-14 w-14 rounded-full object-cover"
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}/${university.logoImageUrl}`}
width={100}
height={100}
alt={convertedKoreanName || "대학 이미지"}
/>
</div>

<div className="ml-[22px] flex flex-grow flex-col gap-1">
<div className="flex items-center justify-between">
<span className="text-base font-bold leading-normal text-k-700">{convertedKoreanName}</span>
<div className="flex items-center">
<span className="whitespace-nowrap text-sm font-semibold leading-normal text-primary">
{university.country} | {university.region}
</span>
<CheveronRightFilled color="black" opacity="0.54" />
</div>
</div>

<div className="flex gap-2.5">
{university.languageRequirements.slice(0, 3).map((requirement) => (
<span
key={requirement.languageTestType}
className="whitespace-nowrap text-sm font-medium leading-normal text-k-500"
>
{shortenLanguageTestName(requirement.languageTestType)} {requirement.minScore}
</span>
))}
</div>
</div>

<div className="absolute right-[9.77px] top-[38px] h-6 w-6"></div>
</Link>
);
};
5 changes: 4 additions & 1 deletion src/components/layout/TopNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { IconCloud } from "@/public/svgs/home";

const TopNavigation = () => (
<div className="fixed top-0 z-30 flex h-[56px] w-full max-w-[600px] items-center bg-primary">
<div
className="fixed top-0 z-30 flex h-14 w-full max-w-[600px] items-center"
style={{ background: "linear-gradient(269deg, var(--Primary-Color, #5950F6) 1.26%, #2AA4E2 100%)" }}
>
<div className="flex items-center gap-1.5 pl-5">
<IconCloud />
<span className="text-[17px] font-semibold text-k-0">Solid Connection</span>
Expand Down