Skip to content

[fix] 공고 리스트 UI 수정 #113

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
jeonghwanJay merged 3 commits into from
May 7, 2025
Merged

[fix] 공고 리스트 UI 수정 #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ee8f81e
refactor: 공고 리스트 UI 수정
jeonghwanJay May 7, 2025
9db3b94
Merge branch 'dev' of https://github.com/CodeitPart3/thejulge into EN…
jeonghwanJay May 7, 2025
de8bcee
fix: 헤더, 공고 리스트 페이지, 공고 검색 페이지, 푸터 관련 버그 수정
jeonghwanJay May 7, 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: 2 additions & 2 deletions src/components/NoticeSearchResultHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ export default function NoticeSearchResultHeader({

return (
<div>
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0 mb-6 sm:mb-8">
<h2 className="font-bold text-[1.25rem] md:text-[1.75rem] text-black ">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0 mb-4 ">
<h2 className="font-bold text-[1.25rem] sm:text-[1.75rem] lg:text-[1.75rem] text-black">
{keyword ? (
<>
<span className="text-primary">{keyword}</span>에 대한 공고 목록
Expand Down
24 changes: 12 additions & 12 deletions src/components/Post/PostListSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,16 @@ export default function PostListSlider({
}: PostListSliderProps) {
const lessThanDesktop =
typeof window !== "undefined" && window.innerWidth <= 1024;

const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({
loop: true,
slides: {
perView: 3,
spacing: 14,
perView: 2, // 기본, sm: 2개
spacing: 8,
},
breakpoints: {
"(max-width: 80rem)": {
"(min-width: 1024px)": {
slides: {
// perView: 3,
perView: 2,
perView: 3, // lg 이상: 3개
spacing: 14,
},
},
Expand All @@ -50,12 +48,14 @@ export default function PostListSlider({
if (!posts || posts.length === 0) return null;

return (
<div ref={sliderRef} className="keen-slider !w-[60.25rem] mx-auto">
{posts.map((post) => (
<div key={post.id} className="keen-slider__slide post-slide">
<Post {...post} />
</div>
))}
<div className="w-full px-8 lg:max-w-[60.25rem] mx-auto">
<div ref={sliderRef} className="keen-slider">
{posts.map((post) => (
<div key={post.id} className="keen-slider__slide w-1/2 lg:w-1/3">
<Post {...post} />
</div>
))}
</div>
</div>
);
}
1 change: 1 addition & 0 deletions src/components/SearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export default function SearchInput() {

reset();
navigate(`/search?keyword=${encodeURIComponent(keyword.trim())}`);
setKeyword("");
};

const removeKeyword = () => {
Expand Down
86 changes: 68 additions & 18 deletions src/layouts/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,77 @@ import InstagramIcon from "../assets/logo/instagram.svg";

export default function Footer() {
return (
<footer className="w-full bg-gray-10 py-6 px-4 gap-2">
<div className="max-w-screen-xl mx-auto flex flex-col sm:flex-row items-center justify-between text-gray-50 text-base">
<span>©codeit - 2025</span>
<footer className="bg-gray-100 text-gray-600 py-6 px-4 sm:px-8">
<div className="w-full max-w-[56.25rem] mx-auto">
<div className="hidden sm:flex justify-between items-center">
<div className="text-base text-gray-50 whitespace-nowrap leading-[1.625rem] font-normal">
©codeit - 2025
</div>

<div className="flex gap-6">
<a href="/privacy-policy" className="hover:underline">
Privacy Policy
</a>
<a href="/faq" className="hover:underline">
FAQ
</a>
<div className="flex gap-3 text-base text-gray-50 leading-[1.625rem] font-normal">
<a href="/privacy">Privacy Policy</a>
<a href="/faq">FAQ</a>
</div>

<div className="flex gap-3">
<a href="https://mail.google.com" className="cursor-pointer">
<img
src={EmailIcon}
alt="Email"
className="w-[1.5rem] h-[1.5rem]"
/>
</a>
<a href="https//www.facebook.com" className="cursor-pointer">
<img
src={FacebookIcon}
alt="Facebook"
className="w-[1.5rem] h-[1.5rem]"
/>
</a>
<a href="https://www.instagram.com" className="cursor-pointer">
<img
src={InstagramIcon}
alt="Instagram"
className="w-[1.5rem] h-[1.5rem]"
/>
</a>
</div>
</div>

<div className="flex gap-4">
<img src={EmailIcon} alt="email" className="w-5 h-5" />
<a href="https://www.facebook.com/">
<img src={FacebookIcon} alt="facebook" className="w-5 h-5" />
</a>
<a href="https://www.instagram.com/">
<img src={InstagramIcon} alt="instagram" className="w-5 h-5" />
</a>
<div className="flex flex-col gap-3 sm:hidden mt-4">
<div className="flex flex-wrap gap-4 text-sm justify-between">
<div className="flex flex-wrap gap-4 text-sm font-normal leading-[1.375rem] text-gray-50">
<a href="/privacy">Privacy Policy</a>
<a href="/faq">FAQ</a>
</div>
<div className="flex flex-wrap gap-2.5 text-sm justify-between">
<a href="https://mail.google.com" className="cursor-pointer">
<img
src={EmailIcon}
alt="Email"
className="w-[1.5rem] h-[1.5rem]"
/>
</a>
<a href="https//www.facebook.com" className="cursor-pointer">
<img
src={FacebookIcon}
alt="Facebook"
className="w-[1.5rem] h-[1.5rem]"
/>
</a>
<a href="https://www.instagram.com" className="cursor-pointer">
<img
src={InstagramIcon}
alt="Instagram"
className="w-[1.5rem] h-[1.5rem]"
/>
</a>
</div>
</div>

<div className="text-xs text-gray-50 leading-[1rem] font-normal">
©codeit - 2025
</div>
</div>
</div>
</footer>
Expand Down
6 changes: 3 additions & 3 deletions src/layouts/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function Header() {

return (
<header className="w-full px-4 py-2">
<div className="hidden md:flex gap-5 max-w-screen-xl mx-auto w-full items-center justify-between">
<div className="hidden md:flex gap-5 max-w-screen-lg mx-auto w-full items-center justify-between">
<div className="flex-1 flex items-center gap-[1.5rem]">
<Link to="/" className="inline-block min-w-[7rem]">
<img src={Logo} alt="thejulge" className="w-[7rem] h-[2.625rem]" />
Expand All @@ -36,7 +36,7 @@ export default function Header() {
<button onClick={handleLogout} className="cursor-pointer">
로그아웃
</button>
{user && <Alert userId={user.id} />}
{user && user.type === "employee" && <Alert userId={user.id} />}
</>
) : (
<>
Expand All @@ -59,7 +59,7 @@ export default function Header() {
<button onClick={handleLogout} className="cursor-pointer">
로그아웃
</button>
{user && <Alert userId={user.id} />}
{user && user.type === "employee" && <Alert userId={user.id} />}
</>
) : (
<>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/NoticeListPage/CustomNoticeSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ function CustomNoticeSection({ customNotices }: CustomNoticeSectionProps) {
});

return (
<div className="bg-red-10 h-[23.75rem] md:h-[33.375rem] lg:h-[33.375rem] mx-auto">
<div className="pt-[4rem] w-[60.25rem] mx-auto font-bold text-[1.25rem] md:text-[1.75rem] tracking-[-0.02em] text-black p-4 pl-0">
<div className="bg-red-10 h-[23.75rem] sm:h-[33.375rem] lg:h-[33.375rem] mx-auto">
<div className="pl-[2rem] pt-[2rem] sm:pt-[4rem] lg:pt-[4rem] pt-[1rem] w-[60.25rem] mx-auto font-bold text-[1.25rem] sm:text-[1.75rem] lg:text-[1.75rem] tracking-[-0.02em] text-black p-4 pl-0">
맞춤 공고
</div>
<PostListSlider posts={posts} />
Expand Down
48 changes: 26 additions & 22 deletions src/pages/NoticeListPage/NoticeListPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import type { SortKey } from "@/types/notice";

export default function NoticeListPage() {
const { user } = useUserStore();
const [searchParams] = useSearchParams();
const [searchParams, setSearchParams] = useSearchParams();
const page = Number(searchParams.get("page") ?? 1);
const [selectedSort, setSelectedSort] = useState<SortKey>("time");

Expand Down Expand Up @@ -46,42 +46,46 @@ export default function NoticeListPage() {

const handleSortChange = (value: string) => {
setSelectedSort(value as SortKey);
const newParams = new URLSearchParams(searchParams);
newParams.set("page", "1");
setSearchParams(newParams);
};

const refetchFilteredNotices = () => {
refetch();
};

return (
<section className="w-full space-y-16">
<section className="w-full">
{user?.type && customNotices.length > 0 && (
<CustomNoticeSection customNotices={customNotices} />
)}
<NoticeSearchResultHeader
page={page}
selectedSort={selectedSort}
onChangeSort={handleSortChange}
refetch={refetchFilteredNotices}
/>
<div className="w-full mx-auto lg:max-w-[60.25rem] pt-12 px-8 pb-0">
<NoticeSearchResultHeader
page={page}
selectedSort={selectedSort}
onChangeSort={handleSortChange}
refetch={refetchFilteredNotices}
/>

<div className="min-h-[33.5rem] sm:min-h-[48.75rem]">
{isLoading && (
<p className="text-center text-gray-400 pt-40 sm:pt-60">
공고 불러오는 중
</p>
)}

{!isLoading &&
(posts.length > 0 ? (
<PostList posts={posts} />
) : (
<div className="min-h-[33.5rem] sm:min-h-[48.75rem] ">
{isLoading && (
<p className="text-center text-gray-400 pt-40 sm:pt-60">
조건에 맞는 공고가 없어요.
공고 불러오는 중
</p>
))}
)}
{!isLoading &&
(posts.length > 0 ? (
<PostList posts={posts} />
) : (
<p className="text-center text-gray-400 pt-40 sm:pt-60">
조건에 맞는 공고가 없어요.
</p>
))}
</div>
</div>

<div className="flex justify-center mt-8">
<div className="flex justify-center mt-8 pb-[4rem]">
<PageNation count={total} itemCountPerPage={7} />
</div>
</section>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/NoticeSearchPage/NoticeSearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ export default function NoticeSearchPage() {
};

return (
<section className="w-full px-4 pt-10 sm:pt-15 pb-15 sm:pb-[7.5rem]">
<div className="max-w-[66.25rem] mx-auto flex flex-col">
<section className="w-full pb-15 sm:pb-[4rem]">
<div className="w-full mx-auto lg:max-w-[60.25rem] pt-12 px-8 pb-0">
<NoticeSearchResultHeader
page={page}
keyword={keyword}
Expand Down
32 changes: 0 additions & 32 deletions src/styles/utilities.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,38 +20,6 @@
line-height: 1;
}

.keen-slider__slide {
width: unset !important;
min-width: unset !important;
max-width: unset !important;
flex: 0 0 auto !important;
}
.post-slide {
width: 22.5rem !important;
height: 14.875rem;
}

@media (min-width: 640px) {
.post-slide {
width: 20.75rem !important;
height: 21.875rem;
}
}

@media (min-width: 768px) {
.post-slide {
width: 29.625rem !important;
height: 21.875rem;
}
}

@media (min-width: 1280px) {
.post-slide {
width: 19.5rem !important;
height: 22.5rem;
}
}

@keyframes skeleton {
0% {
opacity: 1;
Expand Down