Skip to content

Commit

Permalink
Merge pull request #156 from TripInfoWeb/dev_gathering
Browse files Browse the repository at this point in the history 
Dev gathering
  • Loading branch information
@ssssksss
ssssksss authored Jul 29, 2024
2 parents d788cce + 3bc4f85 commit ac9999e
Show file tree
Hide file tree
Showing 15 changed files with 357 additions and 225 deletions.
28 changes: 28 additions & 0 deletions src/app/api/kakao-map/route.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { NextRequest, NextResponse } from "next/server";

const apiKey = process.env.KAKAO_MAPS_API_KEY; // 환경 변수에서 API 키 가져오기

export async function GET(req: NextRequest) {
if (!apiKey) {
return NextResponse.json(
{ error: "API 키가 설정되어 있지 않습니다." },
{ status: 500 },
);
}

const url = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${apiKey}&autoload=false`;

try {
const response = await fetch(url);
if (!response.ok) {
throw new Error("네트워크 응답이 올바르지 않습니다.");
}
const data = await response.text(); // 원시 스크립트 콘텐츠 얻기
return new NextResponse(data, {
status: 200,
headers: { "Content-Type": "application/javascript" },
});
} catch (error) {
return NextResponse.json({ error: "에러" }, { status: 500 });
}
}
47 changes: 23 additions & 24 deletions src/components/gathering/modal/GatheringCategoryModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
import { CATEGORY_MODAL_CATEGORY_LIST } from "@/constants/gathering/GatheringConstant";
import "@/styles/reactDataRange.css";
import Image from "next/image";
import { useState } from "react";
import { useFormContext } from "react-hook-form";

interface ICategory {
id: number;
name: string;
childrenCategories: ICategory[];
}
interface IGatheringCategoryModalProps {
closeModal: () => void;
categoryList: ICategory[];
}

const GatheringCategoryModal = (props: IGatheringCategoryModalProps) => {
const [mainCategory, setMainCategory] = useState("");
const [subCategory, setSubCategory] = useState("");
const [mainCategoryId, setMainCategoryId] = useState(0);
const [subCategoryId, setSubCategoryId] = useState(0);
const formContext = useFormContext();

const submitHandler = () => {
formContext.setValue("mainCategory", mainCategory);
formContext.setValue("subCategory", subCategory);
formContext.setValue("mainCategoryId", mainCategoryId);
formContext.setValue("subCategoryId", subCategoryId);
formContext.watch();
props.closeModal();
};
Expand All @@ -39,20 +45,15 @@ const GatheringCategoryModal = (props: IGatheringCategoryModalProps) => {
<div className={"flex flex-col gap-y-[1rem] pt-[2rem]"}>
<p className={"h-[2rem] text-lg font-bold text-black"}>카테고리 선택</p>
<div className={"flex flex-wrap gap-x-[1rem] gap-y-[.5rem]"}>
{Object.entries(CATEGORY_MODAL_CATEGORY_LIST).map((i) => (
{props.categoryList.map((i) => (
<button
key={i[0]}
key={i.id}
onClick={() => {
setMainCategory(i[0]);
setSubCategory(
Object.entries(
CATEGORY_MODAL_CATEGORY_LIST[i[0]].subCategory,
)[0][0],
);
setMainCategoryId(i.id);
}}
className={`${mainCategory == i[0] ? "bg-main text-white" : "text-gray1"} flex h-[2.25rem] items-center rounded-[4rem] px-[1rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E9EBED]`}
className={`${mainCategoryId == i.id ? "bg-main text-white" : "text-gray1"} flex h-[2.25rem] items-center rounded-[4rem] px-[1rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E9EBED]`}
>
{i[1].name}
{i.name}
</button>
))}
</div>
Expand All @@ -62,16 +63,14 @@ const GatheringCategoryModal = (props: IGatheringCategoryModalProps) => {
<div
className={"flex min-h-[2.5rem] flex-wrap gap-x-[1rem] gap-y-[.5rem]"}
>
{mainCategory &&
Object.entries(
CATEGORY_MODAL_CATEGORY_LIST[mainCategory].subCategory,
).map((i) => (
{mainCategoryId != 0 &&
props.categoryList.filter(i=>i.id == mainCategoryId)[0].childrenCategories.map((j) => (
<button
key={i[0]}
onClick={() => setSubCategory(i[0])}
className={`${subCategory == i[0] ? "bg-main text-white" : "text-gray1"} flex h-[2.25rem] items-center rounded-[4rem] px-[1rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E9EBED]`}
key={j.id}
onClick={() => setSubCategoryId(j.id)}
className={`${subCategoryId == j.id ? "bg-main text-white" : "text-gray1"} flex h-[2.25rem] items-center rounded-[4rem] px-[1rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E9EBED]`}
>
{i[1]}
{j.name}
</button>
))}
</div>
Expand All @@ -82,7 +81,7 @@ const GatheringCategoryModal = (props: IGatheringCategoryModalProps) => {
"h-[3rem] min-w-[8rem] rounded-[4rem] bg-main px-[1rem] py-[.5rem] text-white disabled:bg-gray1"
}
onClick={() => submitHandler()}
disabled={mainCategory == "" && true}
disabled={subCategoryId == 0 && true}
>
적용하기
</button>
Expand Down
54 changes: 29 additions & 25 deletions src/components/gathering/modal/GatheringPlaceModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import Image from "next/image";
import { useEffect, useState } from "react";
import { useFormContext } from "react-hook-form";
import { useDebounce } from "use-debounce";

interface IGatheringPlaceModalProps {
closeModal: () => void;
}

type placeElement = {
type PlaceElement = {
address_name: string;
category_group_code: string;
category_group_name: string;
Expand All @@ -22,7 +23,7 @@ type placeElement = {
y: string;
};

type placeElement1 = {
type PlaceElement1 = {
address: {
address_name: string;
b_code: string;
Expand Down Expand Up @@ -63,20 +64,20 @@ const GatheringPlaceModal = (props: IGatheringPlaceModalProps) => {
const [placeCustomName, setPlaceCustomName] = useState("");
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
const [placeName, setPlaceName] = useState("");
const [debouncedKeyword] = useDebounce(keyword, 600);
const [_, setRoadAddress] = useState<string>();
const [placeData, setPlaceData] = useState<placeElement1>();
const [placeData, setPlaceData] = useState<PlaceElement1>();
const formContext = useFormContext();

const handleSearch = async (keyword: string) => {
setLoading(true);

try {
const response = await fetch(
`/api/gathering/searchPlace?keyword=${encodeURIComponent(keyword)}`,
{
credentials: "omit"
}
credentials: "omit",
},
);
if (!response.ok) {
throw new Error("Network response was not ok");
Expand Down Expand Up @@ -108,30 +109,32 @@ const GatheringPlaceModal = (props: IGatheringPlaceModalProps) => {
}
};

const pickLocation = (element: placeElement) => {
const pickLocation = (element: PlaceElement) => {
formContext.setValue("placeName", element.place_name);
formContext.setValue("placeSearchId", element.id);
formContext.setValue("placeXAxis", element.x);
formContext.setValue("placeYAxis", element.y);
formContext.setValue("placeAddress", element.road_address_name);
formContext.setValue("xAxis", element.x);
formContext.setValue("yAxis", element.y);
formContext.setValue("searchId", element.id);
formContext.setValue("roadAddressName", element.road_address_name);
formContext.setValue("placeUrl", element.place_url);
formContext.watch();
props.closeModal();
};

const pickAddress = (element: placeElement1) => {
console.log("GatheringPlaceModal.tsx 파일 : ", element);
const pickAddress = (element: PlaceElement1) => {
setRoadAddress(element.road_address.address_name);
setPlaceData(element);
};

const submitHandler = () => {
formContext.setValue("placeName", placeName);
// formContext.setValue("placeSearchId", placeData);
formContext.setValue("placeXAxis", placeData?.x);
formContext.setValue("placeYAxis", placeData?.y);
formContext.setValue("placeAddress", placeData?.road_address.address_name);
// formContext.setValue("placeUrl", placeData.place_url);
const applyAddressHandler = () => {
formContext.setValue("placeName", placeCustomName);
formContext.setValue("xAxis", placeData?.x);
formContext.setValue("yAxis", placeData?.y);
formContext.setValue(
"roadAddressName",
placeData?.road_address.address_name,
);
formContext.setValue("searchId", "");
formContext.setValue("placeUrl", "");
formContext.watch();
props.closeModal();
};
Expand Down Expand Up @@ -231,7 +234,7 @@ const GatheringPlaceModal = (props: IGatheringPlaceModalProps) => {
</p>
) : (
<>
{results.map((result: placeElement, index) => (
{results.map((result: PlaceElement, index) => (
<li
key={index}
className="flex h-[3rem] w-full cursor-pointer flex-col px-[.5rem] py-[.25rem] outline-main hover:rounded-[1rem] hover:outline hover:outline-[2px] hover:outline-offset-[-1px]"
Expand Down Expand Up @@ -314,7 +317,7 @@ const GatheringPlaceModal = (props: IGatheringPlaceModalProps) => {
(i: { road_address: { address_name: string } }) =>
i?.road_address?.address_name != undefined,
)
.map((result: placeElement1, index) => (
.map((result: PlaceElement1, index) => (
<li
key={index}
className="grid h-[3rem] w-full cursor-pointer grid-cols-[auto_8rem] px-[.5rem] py-[.25rem] outline-main hover:rounded-[1rem] hover:outline hover:outline-[2px] hover:outline-offset-[-1px]"
Expand Down Expand Up @@ -379,7 +382,7 @@ const GatheringPlaceModal = (props: IGatheringPlaceModalProps) => {
<input
type="text"
placeholder="장소명을 입력하세요"
onChange={(e) => setPlaceName(e.target.value)}
onChange={(e) => setPlaceCustomName(e.target.value)}
className={
"h-[3.25rem] rounded-[1rem] bg-transparent px-[1rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
}
Expand All @@ -388,9 +391,9 @@ const GatheringPlaceModal = (props: IGatheringPlaceModalProps) => {
className={
"h-[3rem] w-full rounded-[4rem] bg-main px-[1rem] py-[.5rem] text-white disabled:bg-gray1"
}
onClick={() => submitHandler()}
onClick={() => applyAddressHandler()}
disabled={
placeName == "" ||
placeCustomName == "" ||
placeData?.road_address.address_name == undefined
}
>
Expand All @@ -402,4 +405,5 @@ const GatheringPlaceModal = (props: IGatheringPlaceModalProps) => {
</div>
);
};

export default GatheringPlaceModal;
6 changes: 3 additions & 3 deletions src/components/gathering/modal/GatheringScheduleModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const GatheringScheduleModal = (props: IGatheringScheduleModalProps) => {
return date + " " + hour + ":" + minute;
};
formContext.setValue(
"startDateTime",
"scheduleStartDate",
_dateTime(
dateFormat4y2m2d(calendarDate[0].startDate),
startDateTime.hour,
Expand All @@ -54,7 +54,7 @@ const GatheringScheduleModal = (props: IGatheringScheduleModalProps) => {
);
if (calendarDate[0].startDate == calendarDate[0].endDate) {
formContext.setValue(
"endDateTime",
"scheduleEndDate",
_dateTime(
dateFormat4y2m2d(calendarDate[0].startDate),
startDateTime.hour,
Expand All @@ -63,7 +63,7 @@ const GatheringScheduleModal = (props: IGatheringScheduleModalProps) => {
);
} else {
formContext.setValue(
"endDateTime",
"scheduleEndDate",
_dateTime(
dateFormat4y2m2d(calendarDate[0].endDate),
endDateTime.hour,
Expand Down
14 changes: 7 additions & 7 deletions src/components/gathering/modal/GatheringSettingModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,25 +35,25 @@ const GatheringSettingModal = (props: IGatheringSettingModalProps) => {
const [sex, setSex] = useState("all");
const [startAge, setStartAge] = useState(20);
const [endAge, setEndAge] = useState(59);
const [expirationDate, setExpirationDate] = useState<String>("");
const [deadline, setdeadline] = useState<String>("");
const [expirationHour, setExpirationHour] = useState<String>("23");
const [expirationMinute, setExpirationMinute] = useState<String>("0");
const formContext = useFormContext();

const submitHandler = () => {
const expiration =
expirationDate +
deadline +
" " +
expirationHour.padStart(2, "0") +
":" +
expirationMinute.padStart(2, "0");
formContext.setValue("expirationDate", expiration);
formContext.setValue("deadline", expiration);
formContext.setValue(
"permitMinUserAgeYear",
"minAgeYear",
new Date().getFullYear() - startAge,
);
formContext.setValue(
"permitMaxUserAgeYear",
"maxAgeYear",
new Date().getFullYear() - endAge,
);
formContext.watch();
Expand Down Expand Up @@ -87,7 +87,7 @@ const GatheringSettingModal = (props: IGatheringSettingModalProps) => {
className={
"rounded-[1rem] px-[1rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
}
onChange={(e) => setExpirationDate(e.target.value)}
onChange={(e) => setdeadline(e.target.value)}
/>
<select
name="hour"
Expand Down Expand Up @@ -287,7 +287,7 @@ const GatheringSettingModal = (props: IGatheringSettingModalProps) => {
className={
"h-[3rem] min-w-[8rem] rounded-[4rem] bg-main px-[1rem] py-[.5rem] text-white disabled:bg-gray1"
}
disabled={expirationDate == "" && true}
disabled={deadline == "" && true}
onClick={() => submitHandler()}
>
적용하기
Expand Down
10 changes: 5 additions & 5 deletions src/components/gathering/write/Gathering.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const GatheringSetting = (props: IGatheringSettingProps) => {
>
모임 제한 선택
</button>
<div>{formContext.getValues("expirationDate") && "OK"}</div>
<div>{formContext.getValues("deadline") && "OK"}</div>
<Modal isOpen={props.isModal} onClose={() => props.closeModal()}>
<GatheringSettingModal closeModal={() => props.closeModal()} />
</Modal>
Expand All @@ -42,7 +42,7 @@ const GatheringSetting = (props: IGatheringSettingProps) => {
}
>
<div className={"flex h-[2.75rem] items-center"}>
모집 마감일 : {formContext.getValues("expirationDate")}
모집 마감일 : {formContext.getValues("deadline")}
</div>
<div className={"flex h-[2.75rem] items-center"}>
인원 : 1 /{formContext.getValues("totalPersonCount")}
Expand All @@ -57,16 +57,16 @@ const GatheringSetting = (props: IGatheringSettingProps) => {
</span>
<span>
{new Date().getFullYear() -
formContext.getValues("permitMaxUserAgeYear") +
formContext.getValues("maxAgeYear") +
"세"}
</span>
(
<span>
{formContext.getValues("permitMaxUserAgeYear") + "년생"}
{formContext.getValues("maxAgeYear") + "년생"}
</span>
<span>~</span>
<span>
{formContext.getValues("permitMinUserAgeYear") + "년생"}
{formContext.getValues("minAgeYear") + "년생"}
</span>
)
</div>
Expand Down
Loading

0 comments on commit ac9999e

Please sign in to comment.