Skip to content

Commit a8beed9

Browse files
cccwon2cccwon2
authored
Merge pull request #115 from FE9-2/feat/albaFormDetail-applicant
Feat: ์•Œ๋ฐ”ํผ ์ง€์›์ž์ผ ๊ฒฝ์šฐ ์ƒ์„ธํŽ˜์ด์ง€ API ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ๊ตฌํ˜„ ์™„๋ฃŒ , UI ๋ฏธ์™„์„ฑ
2 parents c0a1e5a + 07c905a commit a8beed9

File tree

16 files changed

+318
-33
lines changed

16 files changed

+318
-33
lines changed

โ€Ž.github/workflows/chromatic.ymlโ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ jobs:
3636

3737
- name: Chromatic์— ๊ฒŒ์‹œ
3838
id: chromatic
39-
uses: chromaui/action@v1 # Chromatic์˜ GitHub Action
39+
uses: chromaui/action@latest
4040
with:
4141
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ์ฐธ์กฐ
4242
token: ${{ secrets.GITHUB_TOKEN }} # GitHub ์ธ์ฆ ํ† ํฐ

โ€Žnext.config.mjsโ€Ž

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
/** @type {import('next').NextConfig} */
22

3-
import path from "path";
4-
import { fileURLToPath } from "url";
5-
6-
const __filename = fileURLToPath(import.meta.url);
7-
const __dirname = path.dirname(__filename);
8-
93
const nextConfig = {
104
reactStrictMode: true,
115
swcMinify: true,
@@ -17,20 +11,20 @@ const nextConfig = {
1711
port: "",
1812
pathname: "/Albaform/**",
1913
},
14+
{
15+
protocol: "https",
16+
hostname: "lh3.googleusercontent.com",
17+
port: "",
18+
pathname: "/a/**",
19+
},
2020
],
2121
},
22+
// Webpack ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ์ œ๊ฑฐ
2223
webpack(config) {
2324
config.module.rules.push({
2425
test: /\.svg$/,
2526
use: ["@svgr/webpack"],
2627
});
27-
28-
config.module.rules.push({
29-
test: /\.css$/,
30-
use: ["style-loader", "css-loader", "postcss-loader"],
31-
include: [path.resolve(__dirname, "node_modules/react-datepicker"), path.resolve(__dirname, "src/app")],
32-
});
33-
3428
return config;
3529
},
3630
};

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@ export default function LoginPage() {
6363
{isPending ? "๋กœ๊ทธ์ธ ์ค‘..." : "๋กœ๊ทธ์ธ"}
6464
</button>
6565
</div>
66+
<div className="flex items-center justify-center">
67+
<hr className="flex-grow border-t border-grayscale-200" />
68+
<span className="mx-4 text-sm text-grayscale-400">SNS ๊ณ„์ •์œผ๋กœ ๋กœ๊ทธ์ธํ•˜๊ธฐ</span>
69+
<hr className="flex-grow border-t border-grayscale-200" />
70+
</div>
6671
<div className="flex justify-center space-x-6">
6772
<Link
6873
href={`https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.profile&response_type=code&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&state=${encodeURIComponent(

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,11 @@ export default function ApplicantSignupPage() {
106106
{isPending ? "ํšŒ์›๊ฐ€์ž… ์ค‘..." : "ํšŒ์›๊ฐ€์ž…"}
107107
</button>
108108
</div>
109+
<div className="flex items-center justify-center">
110+
<hr className="flex-grow border-t border-grayscale-200" />
111+
<span className="mx-4 text-sm text-grayscale-400">SNS ๊ณ„์ •์œผ๋กœ ํšŒ์›๊ฐ€์ž…ํ•˜๊ธฐ</span>
112+
<hr className="flex-grow border-t border-grayscale-200" />
113+
</div>
109114
<div className="flex justify-center space-x-4">
110115
<Link
111116
href={`https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile&response_type=code&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&state=${encodeURIComponent(

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,11 @@ export default function OwnerSignupPage() {
128128
{isPending ? "ํšŒ์›๊ฐ€์ž… ์ค‘..." : "ํšŒ์›๊ฐ€์ž…"}
129129
</button>
130130
</div>
131+
<div className="flex items-center justify-center">
132+
<hr className="flex-grow border-t border-grayscale-200" />
133+
<span className="mx-4 text-sm text-grayscale-400">SNS ๊ณ„์ •์œผ๋กœ ํšŒ์›๊ฐ€์ž…ํ•˜๊ธฐ</span>
134+
<hr className="flex-grow border-t border-grayscale-200" />
135+
</div>
131136
<div className="flex justify-center space-x-4">
132137
<Link
133138
href={`https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile&response_type=code&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&state=${encodeURIComponent(

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

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
import { useEffect, useState, useRef } from "react";
44
import Link from "next/link";
55
import Image from "next/image";
6+
import { useUser } from "@/hooks/queries/user/me/useUser";
67

78
export default function Home() {
89
const [visibleSections, setVisibleSections] = useState(new Set<string>());
910
const observer = useRef<IntersectionObserver | null>(null);
11+
const { user } = useUser();
1012

1113
useEffect(() => {
1214
// ํด๋ผ์ด์–ธํŠธ ํ™˜๊ฒฝ์—์„œ๋งŒ IntersectionObserver ์‹คํ–‰
@@ -57,11 +59,19 @@ export default function Home() {
5759
<p className="font-nexon-regular mb-4 text-base leading-snug sm:text-lg md:text-xl lg:text-2xl lg:leading-relaxed">
5860
ํ•œ ๊ณณ์—์„œ ๊ด€๋ฆฌํ•˜๋Š” ์•Œ๋ฐ” ๊ตฌ์ธ ํ”Œ๋žซํผ
5961
</p>
60-
<Link href="/login">
61-
<p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
62-
์•Œ๋ฐ”๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ
63-
</p>
64-
</Link>
62+
{user ? (
63+
<Link href="/albaList">
64+
<p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
65+
์•Œ๋ฐ” ๋‘˜๋Ÿฌ๋ณด๊ธฐ
66+
</p>
67+
</Link>
68+
) : (
69+
<Link href="/login">
70+
<p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
71+
์•Œ๋ฐ”๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ
72+
</p>
73+
</Link>
74+
)}
6575
</div>
6676

6777
{/* ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ */}

โ€Žsrc/app/(pages)/albaFormDetail/applicant/[formId]/page.tsxโ€Ž

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
"use client";
2+
3+
import { useParams } from "next/navigation";
4+
import { useUserFormDetail } from "@/hooks/queries/form/userFormDetail";
5+
import React, { useEffect, useState } from "react";
6+
import CardChipIcon from "@/app/components/card/cardList/CardChipIcon";
7+
import Chip from "@/app/components/chip/Chip";
8+
9+
export default function AlbaFormDetailPage() {
10+
const { formId } = useParams(); // useParams๋กœ formId ์ถ”์ถœ
11+
const [formIdState, setFormIdState] = useState<number>(0);
12+
13+
useEffect(() => {
14+
// formId๊ฐ€ ๋ฌธ์ž์—ด๋กœ ์ „๋‹ฌ๋˜๋ฏ€๋กœ ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์ƒํƒœ์— ์ €์žฅ
15+
if (formId) {
16+
setFormIdState(Number(formId)); // formId๋ฅผ ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์ƒํƒœ์— ์ €์žฅ
17+
}
18+
}, [formId]);
19+
20+
// formId๊ฐ€ ์„ค์ •๋˜๋ฉด useUserFormDetail ํ˜ธ์ถœ
21+
const { data, isLoading, error } = useUserFormDetail({ formId: formIdState });
22+
23+
if (isLoading) {
24+
return <div>Loading...</div>;
25+
}
26+
27+
if (error) {
28+
return <div>Error: ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š”๋ฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.</div>;
29+
}
30+
31+
if (!data) {
32+
return <div>๋ฐ์ดํ„ฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.</div>;
33+
}
34+
35+
// ๋ชจ์ง‘ ์ƒํƒœ ๊ณ„์‚ฐ
36+
const recruitmentStatus = new Date(data.recruitmentEndDate) > new Date() ? "๋ชจ์ง‘์ค‘" : "๋ชจ์ง‘์™„๋ฃŒ";
37+
38+
return (
39+
<div className="container flex min-h-screen flex-col">
40+
<div className="h-[562px] bg-black-100">์‚ฌ์ง„์˜์—ญ</div>
41+
<div>
42+
<div className="mt-20 w-[770px] space-y-10">
43+
<div className="flex items-center">
44+
<Chip label={data.isPublic ? "๊ณต๊ฐœ" : "๋น„๊ณต๊ฐœ"} variant={data.isPublic ? "positive" : "negative"} />
45+
<Chip label={recruitmentStatus} variant="positive" />
46+
<p className="text-sm text-grayscale-500">{new Date(data.createdAt).toLocaleString()} ๋“ฑ๋ก</p>
47+
</div>
48+
<div className="mb-4 flex gap-4">
49+
<span className="text-base text-black-400 underline">{data.storeName || "๊ฐ€๊ฒŒ๋ช…"}</span>
50+
<span className="text-grayscale-500">
51+
{data.location || "์œ„์น˜"} ใƒป {"๊ฒฝ๋ ฅ ์ •๋ณด ์—†์Œ"}
52+
</span>
53+
</div>
54+
<p className="text-3xl font-bold">{data.title}</p>
55+
<CardChipIcon
56+
formData={{
57+
updatedAt: new Date(data.updatedAt),
58+
createdAt: new Date(data.createdAt),
59+
isPublic: data.isPublic,
60+
scrapCount: data.scrapCount,
61+
applyCount: data.applyCount,
62+
imageUrls: data.imageUrls,
63+
recruitmentEndDate: new Date(data.recruitmentEndDate),
64+
recruitmentStartDate: new Date(data.recruitmentStartDate),
65+
title: data.title,
66+
id: data.id,
67+
}}
68+
/>
69+
<div className="text-2xl">{data.description}</div>
70+
</div>
71+
</div>
72+
</div>
73+
);
74+
}

โ€Žsrc/app/(pages)/albaFormDetail/layout.tsxโ€Ž

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Suspense } from "react";
2+
3+
export default function AlbaFormDetailLayout({ children }: { children: React.ReactNode }) {
4+
return (
5+
<div className="mx-auto max-w-screen-2xl px-4 py-8">
6+
<Suspense
7+
fallback={
8+
<div className="flex h-[calc(100vh-200px)] items-center justify-center">
9+
<div>๋กœ๋”ฉ ์ค‘...</div>
10+
</div>
11+
}
12+
>
13+
{children}
14+
</Suspense>
15+
</div>
16+
);
17+
}

โ€Žsrc/app/(pages)/albaFormDetail/owner/[id]/page.tsxโ€Ž

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
"use client";
2+
import CardChipIcon from "@/app/components/card/cardList/CardChipIcon";
3+
import Chip from "@/app/components/chip/Chip";
4+
import ChipWithIcon from "@/app/components/chip/ChipWithIcon";
5+
import React from "react";
6+
7+
// ์•Œ๋ฐ”ํผ ์ƒ์„ธ ์‚ฌ์žฅ๋‹˜ ํŽ˜์ด์ง€
8+
export default function AlbaFormDetailPage({ formId }: { formId: number }) {
9+
return (
10+
<div className="container flex min-h-screen flex-col">
11+
<div className="h-[562px] bg-black-100">์‚ฌ์ง„์˜์—ญ</div>
12+
<div>
13+
<div className="mt-20 w-[770px] space-y-10">
14+
<div className="flex items-center">
15+
<Chip label="๊ณต๊ฐœ์—ฌ๋ถ€" variant="positive" />
16+
<Chip label="๋ชจ์ง‘์ค‘" variant="positive" />
17+
<p className="text-sm text-grayscale-500">2024. 05. 04 12:30:54 ๋“ฑ๋ก</p>
18+
</div>
19+
<div className="mb-4 flex gap-4">
20+
<span className="text-base text-black-400 underline">์ฝ”๋“œ์ž‡</span>
21+
<span className="text-grayscale-500">์„œ์šธ ์ข…๋กœ๊ตฌ ใƒป ๊ฒฝ๋ ฅ ๋ฌด๊ด€</span>
22+
</div>
23+
<p className="text-3xl font-bold">์ฝ”๋“œ์ž‡ ์Šคํ„ฐ๋””์นดํŽ˜ ๊ด€๋ฆฌ (์ฃผ๋ง ์˜ค์ „) ๋ชจ์ง‘ํ•ฉ๋‹ˆ๋‹ค ์„œ์šธ ์ข…๋กœ๊ตฌ ์šฉ์‚ฐ๊ตฌ ์„œ๋Œ€๋ฌธ </p>
24+
<CardChipIcon
25+
formData={{
26+
updatedAt: new Date(),
27+
createdAt: new Date(),
28+
isPublic: true,
29+
scrapCount: 0,
30+
applyCount: 0,
31+
imageUrls: [],
32+
recruitmentEndDate: new Date(),
33+
recruitmentStartDate: new Date(),
34+
title: "์ œ๋ชฉ",
35+
id: 1,
36+
}}
37+
/>
38+
<div className="text-2xl">
39+
์ฝ”๋“œ์ž‡ ์Šคํ„ฐ๋”” ์นดํŽ˜์ž…๋‹ˆ๋‹ค. ์ฃผ๋ง ํ† , ์ผ ์˜คํ”ˆ์—…๋ฌด ํ•˜์‹ค ๋ถ„ ๊ตฌํ•ฉ๋‹ˆ๋‹ค. ์„ฑ์‹คํ•˜๊ฒŒ ์ผํ•˜์‹ค ๋ถ„๋“ค๋งŒ ์ง€์› ๋ฐ”๋ž๋‹ˆ๋‹ค.
40+
์ž‘์„ฑํ•œ ์ด๋ ฅ์„œ(์‚ฌ์ง„ ๋ถ€์ฐฉ)๋ฅผ ์•Œ๋ฐ”ํผ์— ์ฒจ๋ถ€ํ•ด์ฃผ์‹œ๊ณ , ์•„๋ž˜์™€ ๊ฐ™์ด ๋ฌธ์ž ๋ณด๋‚ด์ฃผ์„ธ์š”. ๊ทผ๋ฌด ์ค‘ ์ „ํ™”ํ†ตํ™” ๋ถˆ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
41+
์˜ˆ) OOO์ž…๋‹ˆ๋‹ค. __์— ๊ฑฐ์ฃผํ•ฉ๋‹ˆ๋‹ค. ์•Œ๋ฐ”ํผ ์ง€์›. ์ด๋ ฅ์„œ ๊ฒ€ํ†  ํ›„ ๋ฉด์ ‘์ง„ํ–‰์ž์— ํ•œํ•ด ๋ฉด์ ‘์ผ์ • ๊ฐœ๋ณ„
42+
์—ฐ๋ฝ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. ๋งŽ์€ ์ง€์› ๋ฐ”๋ž๋‹ˆ๋‹ค.
43+
</div>
44+
</div>
45+
<div>{/* ์˜ค๋ฅธ์ชฝ ์ฝ˜ํ…์ธ  */}</div>
46+
</div>
47+
</div>
48+
);
49+
}

โ€Žsrc/app/(pages)/albaFormSupportDetail/layout.tsxโ€Ž

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Suspense } from "react";
2+
3+
export default function AlbaFormDetailLayout({ children }: { children: React.ReactNode }) {
4+
return (
5+
<div className="mx-auto max-w-screen-2xl px-4 py-8">
6+
<Suspense
7+
fallback={
8+
<div className="flex h-[calc(100vh-200px)] items-center justify-center">
9+
<div>๋กœ๋”ฉ ์ค‘...</div>
10+
</div>
11+
}
12+
>
13+
{children}
14+
</Suspense>
15+
</div>
16+
);
17+
}

0 commit comments

Comments
ย (0)