Skip to content

Commit 681a72f

Browse files
wibaekwibaek
authored
design: TopNavigation, UniversityCard 디자인 변경, 리팩토링 (#183)
* design: TopNavigation 배경 색 변경 * design: UniversityCard 디자인 변경, 리팩토링 * refactor: Home에서 UniversiyCards 사용하게 변경 * remove: 미사용 import 삭제
1 parent 5431ee3 commit 681a72f

5 files changed

Lines changed: 65 additions & 111 deletions

File tree

‎src/app/Home.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,6 @@ const Home = ({ newsList }: HomeProps) => {
4444

4545
return (
4646
<div className="">
47-
{/* <div className="pl-5">
48-
<CollegeSearch />
49-
</div> */}
50-
5147
<div
5248
className="flex h-[60px] cursor-pointer items-center justify-between border-b border-k-100 px-5 py-3"
5349
onClick={() => alert("해당 기능은 현재 준비중입니다.")}

‎src/app/university/UniversityPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const UniversityPage = ({ universities }: { universities: ListUniversity[] }) =>
100100
color={{ deactiveBtn: "bg-[#f0f0f0]", deactiveBtnFont: "text-[#a2a2a2]", background: "white" }}
101101
style={{ marginTop: "14px", marginLeft: "18px" }}
102102
/>
103-
<UniversityCards colleges={filteredColleges} style={{ marginTop: "12px" }} />
103+
<UniversityCards colleges={filteredColleges} className="mx-5 mt-3" />
104104
</>
105105
);
106106
};

‎src/components/college/UniversityCards.tsx‎

Lines changed: 57 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Image from "next/image";
22
import Link from "next/link";
33

4+
import clsx from "clsx";
5+
46
import { shortenLanguageTestName } from "@/utils/universityUtils";
57

68
import CheveronRightFilled from "@/components/ui/icon/ChevronRightFilled";
@@ -10,66 +12,87 @@ import { ListUniversity } from "@/types/university";
1012
type UniversityCardsProps = {
1113
colleges: ListUniversity[];
1214
style?: React.CSSProperties;
15+
className?: string;
16+
showCapacity?: boolean;
1317
};
1418

15-
const UniversityCards = ({ colleges, style }: UniversityCardsProps) => (
16-
<div className="flex flex-col gap-2.5" style={style}>
19+
const UniversityCards = ({ colleges, style, className, showCapacity = true }: UniversityCardsProps) => (
20+
<div className={clsx("flex flex-col gap-2.5", className)} style={style}>
1721
{colleges.map((university) => (
18-
<UniversityCard key={university.id} university={university} />
22+
<UniversityCard key={university.id} university={university} showCapacity={showCapacity} />
1923
))}
2024
</div>
2125
);
2226
export default UniversityCards;
2327

2428
type UniversityCardProps = {
2529
university: ListUniversity;
30+
showCapacity?: boolean;
2631
};
2732

28-
export const UniversityCard = ({ university }: UniversityCardProps) => {
33+
export const UniversityCard = ({ university, showCapacity = true }: UniversityCardProps) => {
2934
const convertedKoreanName =
3035
university.term !== process.env.NEXT_PUBLIC_CURRENT_TERM
3136
? `${university.koreanName}(${university.term})`
3237
: university.koreanName;
3338

3439
return (
3540
<Link
36-
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"
41+
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"
3742
href={`/university/${university.id}`}
3843
>
39-
<div className="flex flex-shrink-0 items-center">
40-
<Image
41-
className="h-14 w-14 rounded-full object-cover"
42-
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}/${university.logoImageUrl}`}
43-
width={100}
44-
height={100}
45-
alt={convertedKoreanName || "대학 이미지"}
46-
/>
47-
</div>
44+
<div className="flex justify-between px-5 py-3.5">
45+
<div className="flex gap-[23.5px]">
46+
<UniversityLogo logoImageUrl={university.logoImageUrl} />
4847

49-
<div className="ml-[22px] flex flex-grow flex-col">
50-
<span className="truncate text-base font-bold leading-normal text-k-700">{convertedKoreanName}</span>
51-
<div className="flex items-center justify-between">
52-
<span className="text-sm font-medium leading-normal text-k-500">
53-
{university.country} | {university.region}
54-
</span>
55-
<div className="flex items-center">
56-
<span className="text-xs font-semibold leading-normal text-primary">
57-
모집 {university.studentCapacity}명
58-
</span>
59-
<CheveronRightFilled color="black" opacity="0.54" />
48+
<div className="flex flex-col">
49+
<span className="truncate text-base font-bold leading-normal text-k-700">{convertedKoreanName}</span>
50+
<div className="flex items-center gap-2.5">
51+
<span className="text-xs font-medium leading-normal text-k-500">
52+
{university.country} | {university.region}
53+
</span>
54+
{showCapacity && (
55+
<span className="text-xs font-semibold leading-normal text-primary">
56+
모집 {university.studentCapacity}명
57+
</span>
58+
)}
59+
</div>
60+
<LanguageRequirements languageRequirements={university.languageRequirements} />
6061
</div>
6162
</div>
62-
<div className="flex gap-4">
63-
{university.languageRequirements.slice(0, 3).map((requirement) => (
64-
<span
65-
key={requirement.languageTestType}
66-
className="whitespace-nowrap text-xs font-medium leading-normal text-k-500"
67-
>
68-
{shortenLanguageTestName(requirement.languageTestType)} {requirement.minScore}
69-
</span>
70-
))}
63+
<div className="flex items-center">
64+
<CheveronRightFilled color="black" opacity="0.54" />
7165
</div>
7266
</div>
7367
</Link>
7468
);
7569
};
70+
71+
const UniversityLogo = ({ logoImageUrl }: { logoImageUrl: string }) => (
72+
<div className="flex flex-shrink-0 items-center">
73+
<Image
74+
className="h-14 w-14 rounded-full object-cover"
75+
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}/${logoImageUrl}`}
76+
width={62}
77+
height={62}
78+
alt="대학 이미지"
79+
/>
80+
</div>
81+
);
82+
83+
const LanguageRequirements = ({
84+
languageRequirements,
85+
}: {
86+
languageRequirements: ListUniversity["languageRequirements"];
87+
}) => (
88+
<div className="flex gap-4">
89+
{languageRequirements.slice(0, 3).map((requirement) => (
90+
<span
91+
key={requirement.languageTestType}
92+
className="whitespace-nowrap text-xs font-medium leading-normal text-k-500"
93+
>
94+
{shortenLanguageTestName(requirement.languageTestType)} {requirement.minScore}
95+
</span>
96+
))}
97+
</div>
98+
);

‎src/components/home/UniversityList.tsx‎

Lines changed: 3 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
"use client";
22

3-
import Image from "next/image";
43
import Link from "next/link";
54
import { useEffect, useState } from "react";
65

7-
import { shortenLanguageTestName } from "@/utils/universityUtils";
8-
96
import ButtonTab from "@/components/ui/ButtonTab";
10-
import CheveronRightFilled from "@/components/ui/icon/ChevronRightFilled";
117

12-
import { languageTestShortMapping } from "@/types/score";
8+
import UniversityCards from "../college/UniversityCards";
9+
1310
import { ListUniversity, regionMapping } from "@/types/university";
1411

1512
import { getUniversityListPublicApi } from "@/api/university";
@@ -55,74 +52,9 @@ const UniversityList = () => {
5552
}}
5653
/>
5754
</div>
58-
<UniversityCards colleges={universities} />
55+
<UniversityCards colleges={universities} showCapacity={false} />
5956
</div>
6057
);
6158
};
6259

6360
export default UniversityList;
64-
65-
type UniversityCardsProps = {
66-
colleges: ListUniversity[];
67-
style?: React.CSSProperties;
68-
};
69-
70-
const UniversityCards = ({ colleges, style }: UniversityCardsProps) => (
71-
<div className="flex flex-col gap-2" style={style}>
72-
{colleges.map((university) => (
73-
<UniversityCard key={university.id} university={university} />
74-
))}
75-
</div>
76-
);
77-
78-
type UniversityCardProps = {
79-
university: ListUniversity;
80-
};
81-
82-
const UniversityCard = ({ university }: UniversityCardProps) => {
83-
const convertedKoreanName =
84-
university.term !== process.env.NEXT_PUBLIC_CURRENT_TERM
85-
? `${university.koreanName}(${university.term})`
86-
: university.koreanName;
87-
return (
88-
<Link
89-
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"
90-
href={`/university/${university.id}`}
91-
>
92-
<div className="flex flex-shrink-0 items-center">
93-
<Image
94-
className="h-14 w-14 rounded-full object-cover"
95-
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}/${university.logoImageUrl}`}
96-
width={100}
97-
height={100}
98-
alt={convertedKoreanName || "대학 이미지"}
99-
/>
100-
</div>
101-
102-
<div className="ml-[22px] flex flex-grow flex-col gap-1">
103-
<div className="flex items-center justify-between">
104-
<span className="text-base font-bold leading-normal text-k-700">{convertedKoreanName}</span>
105-
<div className="flex items-center">
106-
<span className="whitespace-nowrap text-sm font-semibold leading-normal text-primary">
107-
{university.country} | {university.region}
108-
</span>
109-
<CheveronRightFilled color="black" opacity="0.54" />
110-
</div>
111-
</div>
112-
113-
<div className="flex gap-2.5">
114-
{university.languageRequirements.slice(0, 3).map((requirement) => (
115-
<span
116-
key={requirement.languageTestType}
117-
className="whitespace-nowrap text-sm font-medium leading-normal text-k-500"
118-
>
119-
{shortenLanguageTestName(requirement.languageTestType)} {requirement.minScore}
120-
</span>
121-
))}
122-
</div>
123-
</div>
124-
125-
<div className="absolute right-[9.77px] top-[38px] h-6 w-6"></div>
126-
</Link>
127-
);
128-
};

‎src/components/layout/TopNavigation.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { IconCloud } from "@/public/svgs/home";
22

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

0 commit comments

Comments
 (0)