diff --git a/public/fonts/SpoqaHanSansNeo-Light.otf b/public/fonts/SpoqaHanSansNeo-Light.otf new file mode 100644 index 0000000..bd6d4c7 Binary files /dev/null and b/public/fonts/SpoqaHanSansNeo-Light.otf differ diff --git a/public/fonts/SpoqaHanSansNeo-Regular.otf b/public/fonts/SpoqaHanSansNeo-Regular.otf new file mode 100644 index 0000000..0a0ff83 Binary files /dev/null and b/public/fonts/SpoqaHanSansNeo-Regular.otf differ diff --git a/public/images/cross.svg b/public/images/cross.svg index 25a5741..389e989 100644 --- a/public/images/cross.svg +++ b/public/images/cross.svg @@ -1,4 +1,4 @@ - + diff --git a/public/images/i_arrow_back.svg b/public/images/i_arrow_back.svg new file mode 100644 index 0000000..6310d3d --- /dev/null +++ b/public/images/i_arrow_back.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/(afterLogin)/@map/(.)bus/_component/busMap.module.css b/src/app/(afterLogin)/@map/(.)bus/_component/busMap.module.css index f5af797..cef6d44 100644 --- a/src/app/(afterLogin)/@map/(.)bus/_component/busMap.module.css +++ b/src/app/(afterLogin)/@map/(.)bus/_component/busMap.module.css @@ -12,8 +12,10 @@ .busName { display: flex; - font-size: 3rem; - font-weight: 700; + align-items: center; + font-size: 1.5rem; + font-family: "SpoqaR"; + gap: 5px; } .busName path { @@ -30,21 +32,20 @@ .mainInfo { display: flex; flex-direction: column; - align-items: center; - font-size: 1.5rem; - font-weight: 700; - color: gray; + font-size: 1.1rem; + font-family: "SpoqaR"; + gap: 10px; } .modalContainer { display: flex; position: absolute; - width: 600px; z-index: 990; - padding: 2rem; + padding: 1rem; left: 50%; /* 부모 대비 중앙 */ - bottom: 3rem; + bottom: 2%; background-color: white; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); - transform: translateX(-50%); /* 자신의 너비 대비 중앙 정렬 */ + transform: translateX(-50%); + border-radius: 10px; } diff --git a/src/app/(afterLogin)/@map/(.)bus/map/page.tsx b/src/app/(afterLogin)/@map/(.)bus/map/page.tsx index 50e71f2..7c0a85e 100644 --- a/src/app/(afterLogin)/@map/(.)bus/map/page.tsx +++ b/src/app/(afterLogin)/@map/(.)bus/map/page.tsx @@ -66,7 +66,7 @@ export default function Search() {
- {busInfo.busNo} + {busInfo.busNo}번
diff --git a/src/app/(afterLogin)/_component/BusSearch.tsx b/src/app/(afterLogin)/_component/BusSearch.tsx index 989bfc8..98f5896 100644 --- a/src/app/(afterLogin)/_component/BusSearch.tsx +++ b/src/app/(afterLogin)/_component/BusSearch.tsx @@ -4,7 +4,6 @@ import axios from "axios"; import styles from "../bus/_component/busMap.module.css"; import { busInfoState, busState } from "@/src/app/_atom/atom"; import { useSetRecoilState } from "recoil"; -import BusLogo from "@/public/images/busLogo.svg"; import { useRouter } from "next/navigation"; const BusSearch = () => { @@ -41,7 +40,7 @@ const BusSearch = () => { `https://api.odsay.com/v1/api/searchBusLane?lang=0&busNo=${busNo}&apiKey=${process.env.NEXT_PUBLIC_ODSAY_KEY}` ); setBusLanes(response?.data?.result?.lane); - } catch (error) {} + } catch (error) { } }; const onBusClicked = (busID: any, lane: any) => { @@ -54,20 +53,10 @@ const BusSearch = () => { return (
-
-
- -
-

버스 번호 입력

+
+
찾고자 하는 버스
번호를 입력해주세요!
{ width: "100%", alignItems: "center", justifyContent: "center", - padding: "0 2rem", + gap: 20, }} > -

{result}번 검색결과

+
{result}번 검색결과
{busLanes.map((lane: any) => (
{ key={lane?.busID} onClick={() => onBusClicked(lane?.busID, lane)} > -
- {lane?.busNo} - {lane?.busCityName} +
+
{lane?.busNo}
+
{lane?.busCityName}
diff --git a/src/app/(afterLogin)/_component/homeLayout.module.css b/src/app/(afterLogin)/_component/homeLayout.module.css index 8bcc54f..2fb7d7d 100644 --- a/src/app/(afterLogin)/_component/homeLayout.module.css +++ b/src/app/(afterLogin)/_component/homeLayout.module.css @@ -1,19 +1,15 @@ .container { display: flex; flex-direction: column; - background-color: #fff; width: 100dvw; height: 100dvh; overflow: hidden; } .navContainer { - height: 100%; display: grid; - flex-direction: column; - grid-template-columns: 400px auto; - grid-template-rows: 240px auto; - + grid-template-columns: 24em auto; + grid-template-rows: 12em auto; @media screen and (max-width: 1024px) { grid-template-columns: 1fr; } diff --git a/src/app/(afterLogin)/bus/_component/busMap.module.css b/src/app/(afterLogin)/bus/_component/busMap.module.css index c0af3e4..3e97008 100644 --- a/src/app/(afterLogin)/bus/_component/busMap.module.css +++ b/src/app/(afterLogin)/bus/_component/busMap.module.css @@ -1,15 +1,16 @@ .container { - padding-top: 5rem; display: flex; flex-direction: column; align-items: center; - width: 100%; - max-height: 75dvh; overflow: auto; + height: 80dvh; } - -.container::-webkit-scrollbar { - width: 0.7rem; +.inputContainer { + display: flex; + flex-direction: column; + gap: 20px; + padding: 30px; + width: 100%; } .container::-webkit-scrollbar-thumb:hover { @@ -22,9 +23,10 @@ } .logoMent { - font-family: "GmarketSansBD"; - font-size: 22px; - text-align: center; + font-family: "SpoqaL"; + font-size: 1.1rem; + width: 100%; + padding-left: 1rem; } .container:first-child { @@ -33,23 +35,27 @@ } .busInput { - width: 30dvh; - height: 3rem; - font-size: 17px; - border: 2px solid black; - border-radius: 10px; - margin-top: 2rem; - margin-bottom: 2rem; - padding-left: 2rem; + display: flex; + align-items: center; + justify-content: space-between; + padding-right: 10px; + font-family: "SpoqaR"; + font-size: 0.9rem; + height: 2rem; + width: 100%; + color: #2f2f2f; + border-radius: 0.4rem; + padding-left: 0.7rem; + border: 0.13rem solid #c7c8cc; + background-color: #fdfdfd; } .resultWrapper { display: flex; width: 100%; flex-direction: column; - border: 2px solid black; - margin-top: 2rem; - border-radius: 10px; + border-radius: 5px; + font-family: "SpoqaR"; } .resultCard { @@ -57,11 +63,11 @@ width: 100%; justify-content: space-between; flex-direction: column; - font-size: 1.5rem; - border-bottom: 1px solid gray; - height: 7rem; - padding: 1rem 1rem; + border-bottom: 0.1rem solid #c7c8cc; + padding: 1rem; cursor: pointer; + font-size: 0.8rem; + gap: 7px; } .basicInfoWrapper { @@ -74,6 +80,9 @@ } .intro { - font-size: 22px; - text-align: center; + font-family: "SpoqaL"; + font-size: 1.1rem; + text-align: left; + width: 100%; + font-weight: bold; } diff --git a/src/app/(afterLogin)/promise/_component/PrmoiseContent.tsx b/src/app/(afterLogin)/promise/_component/PrmoiseContent.tsx index eca6d2b..3962c3b 100644 --- a/src/app/(afterLogin)/promise/_component/PrmoiseContent.tsx +++ b/src/app/(afterLogin)/promise/_component/PrmoiseContent.tsx @@ -8,6 +8,7 @@ import { useRecoilState, useSetRecoilState } from "recoil"; import Logo from "@/public/images/Logo.svg"; import CancelIcon from "@/public/images/cancel.svg"; import { useRouter } from "next/navigation"; +import useAddPlaces from "@/src/app/_utils/useAddPlaces"; function PromiseContent() { const router = useRouter(); @@ -20,7 +21,6 @@ function PromiseContent() { const newPlaces = placeAdd.filter((element) => { return element.id !== target; }); - setPlaceAdd(newPlaces); }; @@ -34,14 +34,10 @@ function PromiseContent() { }; useEffect(() => { - const newPlaces = []; - for (let i = placeAdd.length; i < placeAdd.length + +count; i++) { - const newPlace = { - id: i, - current: `${i + 1}번째 장소`, - }; - newPlaces.push(newPlace); - } + const placeLength = placeAdd[placeAdd.length - 1].id + 1; + console.log(placeLength, placeAdd) + const newPlaces = useAddPlaces({ placeLength, count }) + console.log(newPlaces) setPlaceAdd([...placeAdd, ...newPlaces]); setCount(0); }, [count]); @@ -49,25 +45,23 @@ function PromiseContent() { return (
{open && } -
- -
- 출발지를 입력하고
- 장소찾기를 눌러 주세요! -
+
+ 출발지를 입력하고
+ 장소찾기를 눌러 주세요!
{placeAdd.map((element, index) => { return index > 1 ? ( -