Skip to content

Commit 29db366

Browse files
cccwon2cccwon2
authored
Merge pull request #258 from FE9-2/dev
12/26 5์‹œ ๋ฐฐํฌ
2 parents 6914962 + 4fc89d8 commit 29db366

File tree

15 files changed

+136
-60
lines changed

15 files changed

+136
-60
lines changed

โ€ŽREADME.mdโ€Ž

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
[![React DatePicker](https://img.shields.io/badge/React%20DatePicker-7.5.0-216BA5)](https://reactdatepicker.com/)
5252
[![React Icons](https://img.shields.io/badge/React%20Icons-5.3.0-E91E63)](https://react-icons.github.io/react-icons)
5353
[![React Hot Toast](https://img.shields.io/badge/React%20Hot%20Toast-2.4.1-FF4444)](https://react-hot-toast.com/)
54+
[![Yet Another React Lightbox](https://img.shields.io/badge/Yet%20Another%20React%20Lightbox-3.17.0-00A5E0)](https://yet-another-react-lightbox.com/)
5455
[![Hello Pangea DnD](https://img.shields.io/badge/Hello%20Pangea%20DnD-17.0.0-yellow)](https://github.com/hello-pangea/dnd)
5556

5657
### ์ง€๋„ & ์†Œ์…œ

โ€Žpackage-lock.jsonโ€Ž

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

โ€Žpackage.jsonโ€Ž

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"react-kakao-maps-sdk": "^1.1.27",
4141
"react-responsive": "^10.0.0",
4242
"tailwind-merge": "^2.5.4",
43+
"yet-another-react-lightbox": "^3.21.7",
4344
"zod": "^3.23.8",
4445
"zustand": "^5.0.1"
4546
},

โ€Žpublic/og-image.pngโ€Ž

-176 KB
Loading

โ€Žsrc/app/(auth)/login/page.tsxโ€Ž

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function LoginPage() {
1919
// ๋กœ๊ทธ์ธ ํ›…๊ณผ ๋กœ๋”ฉ ์ƒํƒœ ๊ด€๋ฆฌ
2020
const { login, isPending } = useLogin();
2121
const [isSocialLogin, setIsSocialLogin] = useState(false);
22-
const [currentProvider, setCurrentProvider] = useState<OAuthProvider>(oauthProviders.GOOGLE);
22+
const [, setCurrentProvider] = useState<OAuthProvider>(oauthProviders.GOOGLE);
2323

2424
// ํผ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๋ฐ ์ƒํƒœ ๊ด€๋ฆฌ
2525
const {
@@ -86,7 +86,7 @@ export default function LoginPage() {
8686
<div className="text-grayscale-900 text-center text-3xl font-bold tracking-tight">๋กœ๊ทธ์ธ</div>
8787
<p className="text-grayscale-600 mt-2 text-center text-sm">
8888
์•„์ง ๊ณ„์ •์ด ์—†์œผ์‹ ๊ฐ€์š”?{" "}
89-
<Link href="/signup" className="font-medium text-primary-orange-300 hover:text-primary-orange-200">
89+
<Link href="/signup" className="font-bold text-primary-orange-300 hover:text-primary-orange-200">
9090
ํšŒ์›๊ฐ€์ž…ํ•˜๊ธฐ
9191
</Link>
9292
</p>

โ€Žsrc/app/(auth)/signup/page.tsxโ€Ž

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function SignupPage() {
1212
<h2 className="text-grayscale-900 text-center text-3xl font-bold tracking-tight">ํšŒ์› ์œ ํ˜• ์„ ํƒ</h2>
1313
<p className="text-grayscale-600 mt-2 text-center text-sm">
1414
์ด๋ฏธ ๊ณ„์ •์ด ์žˆ์œผ์‹ ๊ฐ€์š”?{" "}
15-
<Link href="/login" className="font-medium text-primary-orange-300 hover:text-primary-orange-200">
15+
<Link href="/login" className="font-bold text-primary-orange-300 hover:text-primary-orange-200">
1616
๋กœ๊ทธ์ธํ•˜๊ธฐ
1717
</Link>
1818
</p>
@@ -22,7 +22,7 @@ export default function SignupPage() {
2222
{/* ์ง€์›์ž ํšŒ์›๊ฐ€์ž… ์นด๋“œ */}
2323
<Link
2424
href="/signup/applicant"
25-
className="flex flex-1 flex-col items-center rounded-lg border-2 border-transparent bg-primary-blue-50 p-8 transition-all hover:scale-105 hover:border-primary-orange-300 hover:shadow-lg"
25+
className="flex flex-1 flex-col items-center rounded-lg border-2 border-transparent bg-[#ebfdeb] p-8 transition-all hover:scale-105 hover:border-primary-orange-300 hover:shadow-xl"
2626
>
2727
<div className="flex h-24 w-24 items-center justify-center rounded-full bg-primary-orange-50">
2828
<FaUser className="h-12 w-12 text-primary-orange-300" />

โ€Žsrc/app/(home)/page.tsxโ€Ž

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const slides = [
2323
{
2424
id: 1,
2525
title: "์‰ฝ๊ณ  ๋นจ๋ผ์š”",
26-
content: "1๋ถ„๋งŒ์— ์•Œ๋ฐ”ํผ์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!\n๋งํฌ๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ์–ด๋””์„œ๋“ ์ง€ ์‚ฌ์šฉํ•˜์„ธ์š”.",
26+
content: "1๋ถ„๋งŒ์— ์›Œํฌํผ์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!\n๋งํฌ๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ์–ด๋””์„œ๋“ ์ง€ ์‚ฌ์šฉํ•˜์„ธ์š”.",
2727
image: "/images/land/s2.svg",
2828
},
2929
{
@@ -65,7 +65,7 @@ const slides = [
6565
{
6666
id: 7,
6767
title: "์‰ฝ๊ณ  ๋นจ๋ผ์š”",
68-
content: "1๋ถ„๋งŒ์— ์•Œ๋ฐ”ํผ์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!\n๋งํฌ๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ์–ด๋””์„œ๋“ ์ง€ ์‚ฌ์šฉํ•˜์„ธ์š”.",
68+
content: "1๋ถ„๋งŒ์— ์›Œํฌํผ์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!\n๋งํฌ๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ์–ด๋””์„œ๋“ ์ง€ ์‚ฌ์šฉํ•˜์„ธ์š”.",
6969
image: "/images/land/s2.png",
7070
},
7171
{
@@ -273,7 +273,7 @@ export default function LandingPage() {
273273
src={slides[currentSlide].blackAreaImage || ""}
274274
alt={slides[currentSlide].blackAreaTitle || ""}
275275
fill
276-
className="object-contain transition-transform duration-500 hover:scale-105"
276+
className="object-contain transition-transform duration-500"
277277
sizes="(max-width: 768px) 100vw, 600px"
278278
/>
279279
</div>
@@ -284,7 +284,7 @@ export default function LandingPage() {
284284
{/* ํ…์ŠคํŠธ ์„น์…˜ - ์žฅ์‹ ์š”์†Œ ์ œ๊ฑฐ */}
285285
<motion.div className="relative">
286286
<motion.h2
287-
className="text-center font-hakgyo text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl"
287+
className="text-center font-hakgyo text-4xl font-bold tracking-tight md:text-4xl lg:text-6xl"
288288
style={{
289289
background: "linear-gradient(to right, #71db77, #56c45d)",
290290
WebkitBackgroundClip: "text",
@@ -488,7 +488,7 @@ export default function LandingPage() {
488488
src={slides[currentSlide].image}
489489
alt={slides[currentSlide].title}
490490
fill
491-
className="object-contain transition-transform duration-500 hover:scale-105"
491+
className="object-contain transition-transform duration-500"
492492
sizes="(max-width: 768px) 100vw, 600px"
493493
/>
494494
</div>
@@ -499,7 +499,7 @@ export default function LandingPage() {
499499
{/* ํ…์ŠคํŠธ ์„น์…˜ */}
500500
<motion.div className="relative">
501501
<motion.h2
502-
className="text-center font-hakgyo text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl"
502+
className="text-center font-hakgyo text-4xl font-bold tracking-tight md:text-4xl lg:text-6xl"
503503
style={{
504504
color: "#ffffff",
505505
letterSpacing: "-0.02em",
@@ -585,7 +585,7 @@ export default function LandingPage() {
585585
className={`fixed ${
586586
isLargeScreen
587587
? "right-12 top-1/2 -translate-y-1/2 space-y-4"
588-
: "bottom-12 left-1/2 flex -translate-x-1/2 space-x-4"
588+
: "bottom-12 left-12 flex flex-col space-y-4"
589589
}`}
590590
>
591591
{slides.slice(1).map((_, index) => (

โ€Žsrc/app/(pages)/(workform)/work/[formId]/components/FormImage.tsxโ€Ž

Lines changed: 67 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
1+
"use client";
2+
13
import Image from "next/image";
24
import Indicator from "@/app/components/pagination/Indicator";
35
import { isValidS3Url } from "@/utils/checkS3Url";
6+
import { useState } from "react";
7+
import Lightbox from "yet-another-react-lightbox";
8+
import "yet-another-react-lightbox/styles.css";
9+
import Zoom from "yet-another-react-lightbox/plugins/zoom";
10+
import Counter from "yet-another-react-lightbox/plugins/counter";
11+
import "yet-another-react-lightbox/plugins/counter.css";
412

513
interface FormImageProps {
614
imageUrls: string[];
@@ -9,32 +17,65 @@ interface FormImageProps {
917
}
1018

1119
export default function FormImage({ imageUrls, currentPage, onPageChange }: FormImageProps) {
20+
const [isOpen, setIsOpen] = useState(false);
21+
22+
const handleImageClick = () => {
23+
setIsOpen(true);
24+
};
25+
26+
const slides = imageUrls.map((url) => ({
27+
src: url,
28+
}));
29+
1230
return (
13-
<div className="relative flex h-[300px] justify-center lg:h-[460px]">
14-
{/* ์ด๋ฏธ์ง€ ํ‘œ์‹œ */}
15-
{imageUrls?.map((imageUrl, index) => (
16-
<div
17-
key={imageUrl}
18-
className={`absolute h-full w-full transition-opacity duration-300 ${
19-
index === currentPage ? "opacity-100" : "opacity-0"
20-
}`}
21-
>
22-
<Image
23-
src={imageUrl}
24-
alt={`์•Œ๋ฐ” ์ด๋ฏธ์ง€ ${index + 1}`}
25-
className="h-full w-full rounded-lg object-cover"
26-
priority={index === 0}
27-
fill
28-
/>
29-
</div>
30-
))}
31-
32-
{/* ์ธ๋””์ผ€์ดํ„ฐ */}
33-
{imageUrls.filter((url) => isValidS3Url(url)).length > 1 && (
34-
<div className="absolute bottom-4 left-1/2 -translate-x-1/2">
35-
<Indicator imageCount={imageUrls?.length ?? 0} currentPage={currentPage} onPageChange={onPageChange} />
36-
</div>
37-
)}
38-
</div>
31+
<>
32+
<div className="relative flex h-[300px] justify-center lg:h-[460px]">
33+
{/* ์ด๋ฏธ์ง€ ํ‘œ์‹œ */}
34+
{imageUrls?.map((imageUrl, index) => (
35+
<div
36+
key={imageUrl}
37+
className={`absolute h-full w-full cursor-zoom-in transition-opacity duration-300 ${
38+
index === currentPage ? "opacity-100" : "opacity-0"
39+
}`}
40+
onClick={handleImageClick}
41+
role="button"
42+
tabIndex={0}
43+
onKeyDown={(e) => {
44+
if (e.key === "Enter" || e.key === " ") {
45+
handleImageClick();
46+
}
47+
}}
48+
>
49+
<Image
50+
src={imageUrl}
51+
alt={`์•Œ๋ฐ” ์ด๋ฏธ์ง€ ${index + 1}`}
52+
className="h-full w-full rounded-lg object-cover"
53+
priority={index === 0}
54+
fill
55+
/>
56+
</div>
57+
))}
58+
59+
{/* ์ธ๋””์ผ€์ดํ„ฐ */}
60+
{imageUrls.filter((url) => isValidS3Url(url)).length > 1 && (
61+
<div className="absolute bottom-4 left-1/2 -translate-x-1/2">
62+
<Indicator imageCount={imageUrls?.length ?? 0} currentPage={currentPage} onPageChange={onPageChange} />
63+
</div>
64+
)}
65+
</div>
66+
67+
{/* Lightbox */}
68+
<Lightbox
69+
open={isOpen}
70+
close={() => setIsOpen(false)}
71+
slides={slides}
72+
index={currentPage}
73+
plugins={[Zoom, Counter]}
74+
counter={{ container: { style: { top: "unset", bottom: 0 } } }}
75+
on={{
76+
view: ({ index }) => onPageChange(index),
77+
}}
78+
/>
79+
</>
3980
);
4081
}

โ€Žsrc/app/clientLayout.tsxโ€Ž

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,11 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
3636
// ์ฑ„๋„ํ†ก์„ ํ‘œ์‹œํ•˜์ง€ ์•Š์„ ๊ฒฝ๋กœ๋“ค
3737
const excludePaths = ["/login", "/signup", "/auth/callback"];
3838
const showChannelTalk = !excludePaths.some((path) => pathname.startsWith(path));
39+
const isHome = pathname === "/";
3940

4041
return (
4142
<QueryClientProvider client={queryClient}>
42-
<div className="relative">
43+
<div className={`relative min-h-[80vh] ${!isHome ? "pt-16" : ""}`}>
4344
{children}
4445
<MouseTrail />
4546
<Toaster

โ€Žsrc/app/components/button/default/Button.tsxโ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const Button = ({
4141
const colorStyles = {
4242
orange: {
4343
solid:
44-
"bg-primary-orange-300 text-white hover:bg-primary-orange-200 focus:ring-1 focus:ring-primary-orange-200 focus:outline-none disabled:bg-primary-orange-100 disabled:cursor-not-allowed",
44+
"bg-primary-orange-300 text-white hover:bg-primary-orange-350 focus:ring-1 focus:ring-primary-orange-200 focus:outline-none disabled:bg-primary-orange-100 disabled:cursor-not-allowed",
4545
outlined:
4646
"border-2 border-primary-orange-300 text-primary-orange-300 hover:border-primary-orange-200 hover:text-primary-orange-200 focus:ring-1 focus:ring-primary-orange-200 focus:outline-none disabled:border-primary-orange-100 disabled:text-grayscale-100 disabled:cursor-not-allowed disabled:hover:bg-transparent",
4747
},

0 commit comments

Comments
ย (0)