Skip to content

style: 네비게이션과 약속잡기 디자인 수정 #38

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

Open
c0c0pang wants to merge 17 commits into
base: main
Choose a base branch
from
Open

style: 네비게이션과 약속잡기 디자인 수정 #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c471e79
style: 네비게이션과 약속잡기 디자인 수정
c0c0pang Apr 4, 2024
6451328
chore: 폰트 추가
c0c0pang Apr 11, 2024
1df3f33
fix: 장소 추가 기능 오류 수정 및 기능 분리
c0c0pang Apr 15, 2024
e88660f
feat: Spoqa font 추가
c0c0pang Apr 15, 2024
5c1e6ce
style: css 변경
c0c0pang Apr 15, 2024
a4135d6
refactor: 버스 로고를 없애고 문구 변경
c0c0pang Apr 15, 2024
0ffa20c
refactor: 로고 제거
c0c0pang Apr 15, 2024
ec00f10
style: 뒤로가기 svg 추가 및 교차 svg 스타일 변경
c0c0pang May 6, 2024
8cc0463
style: css style 수정
c0c0pang May 7, 2024
899da8f
feat: 노선 번호 '반' 추가
c0c0pang May 7, 2024
55c33cb
feat: 취소 버튼 위치 변경
c0c0pang May 7, 2024
e4f9a0f
feat: 텍스트 위치 변경
c0c0pang May 7, 2024
510b8c1
feat: 로고 삭제
c0c0pang May 7, 2024
deee67d
feat: 화면 규격을 맞추기 위해 style 추가
c0c0pang May 7, 2024
16f1e8f
fix: 중복 RecoilRoot 컴포넌트 삭제
c0c0pang May 7, 2024
6c89495
feat: 뒤로가기 버튼으로 변경 및 위치 변경
c0c0pang May 7, 2024
30068fc
perf: 정보 카드 스타일 변경
c0c0pang May 7, 2024
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
Binary file added public/fonts/SpoqaHanSansNeo-Light.otf
View file
Open in desktop
Binary file not shown.
Binary file added public/fonts/SpoqaHanSansNeo-Regular.otf
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion public/images/cross.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/images/i_arrow_back.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 11 additions & 10 deletions src/app/(afterLogin)/@map/(.)bus/_component/busMap.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
2 changes: 1 addition & 1 deletion src/app/(afterLogin)/@map/(.)bus/map/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default function Search() {
<div className={styles.busInfoWrapper}>
<div className={styles.busName}>
<BusIcon />
{busInfo.busNo}
{busInfo.busNo}번
</div>
<div className={styles.mainInfo}>
<div>
Expand Down
29 changes: 9 additions & 20 deletions src/app/(afterLogin)/_component/BusSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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) => {
Expand All @@ -54,20 +53,10 @@ const BusSearch = () => {

return (
<div className={styles.container}>
<div>
<div
style={{
display: "flex",
width: "100%",
justifyContent: "center",
marginBottom: "2rem",
}}
>
<BusLogo />
</div>
<h2 className={styles.intro}>버스 번호 입력</h2>
<div className={styles.inputContainer}>
<div className={styles.intro}>찾고자 하는 버스 <br />번호를 입력해주세요!</div>
<form
style={{ display: "flex", justifyContent: "center" }}
style={{ display: "flex", justifyContent: "center", width: "100%" }}
onSubmit={handleSubmit}
>
<input
Expand All @@ -86,20 +75,20 @@ const BusSearch = () => {
width: "100%",
alignItems: "center",
justifyContent: "center",
padding: "0 2rem",
gap: 20,
}}
>
<h2 className={styles.logoMent}>{result}번 검색결과</h2>
<div className={styles.logoMent}>{result}번 검색결과</div>
<div className={styles.resultWrapper}>
{busLanes.map((lane: any) => (
<div
className={styles.resultCard}
key={lane?.busID}
onClick={() => onBusClicked(lane?.busID, lane)}
>
<div className={styles.basicInfoWrapper}>
{lane?.busNo}
<span>{lane?.busCityName}</span>
<div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
<div style={{ fontSize: '1rem' }}>{lane?.busNo}</div>
<div> {lane?.busCityName}</div>
</div>
<div className={styles.pointWrapper}>
<span>
Expand Down
8 changes: 2 additions & 6 deletions src/app/(afterLogin)/_component/homeLayout.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down
61 changes: 35 additions & 26 deletions src/app/(afterLogin)/bus/_component/busMap.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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 {
Expand All @@ -33,35 +35,39 @@
}

.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 {
display: flex;
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 {
Expand All @@ -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;
}
28 changes: 11 additions & 17 deletions src/app/(afterLogin)/promise/_component/PrmoiseContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -20,7 +21,6 @@ function PromiseContent() {
const newPlaces = placeAdd.filter((element) => {
return element.id !== target;
});

setPlaceAdd(newPlaces);
};

Expand All @@ -34,40 +34,34 @@ 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]);

return (
<div className={styles.promiseContainer}>
{open && <PlaceDialog setOpen={setOpen} setCount={setCount} />}
<div className={styles.logoDiv}>
<Logo />
<div className={styles.logoMent}>
출발지를 입력하고 <br />
장소찾기를 눌러 주세요!
</div>
<div className={styles.logoMent}>
출발지를 입력하고 <br />
장소찾기를 눌러 주세요!
</div>
<div className={styles.logoDiv}>
{placeAdd.map((element, index) => {
return index > 1 ? (
<label className={styles.navSearchDiv} key={element.id}>
<div className={styles.promiseDiv}>
<div
className={styles.promise}
key={element.id}
onClick={() => changePage(element.id)}
>
{element.current}
</div>
<CancelIcon onClick={() => onDelete(element.id)} />
</label>
</div>
) : (
<div
className={styles.promise}
Expand Down
26 changes: 13 additions & 13 deletions src/app/(afterLogin)/promise/_component/dialog.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,31 @@
position: absolute;
left: 80px;
z-index: 90;
top: 50%;
top: 30%;
flex-direction: column;
align-items: center;
justify-content: center;
width: 240px;
border-radius: 1rem;
border-radius: 0.6rem;
gap: 20px;
font-family: "GmarketSansBD";
border: 2px solid black;
background-color: white;
font-family: "GmarketSansM";
box-shadow: 0 2px 10px -7px rgba(0, 0, 0, 1);
background-color: #fdfdfd;
}

.textDialog {
text-align: center;
padding: 10px;
padding: 20px;
}

.inputDialog {
width: 100px;
height: 30px;
width: 10rem;
height: 2rem;
font-size: 14px;
outline: none;
border: 1px solid black;
border-radius: 3px;
padding: 2px;
border: 0.5px solid #9e9d9d;
border-radius: 5px;
padding: 5px;
}

.inputDialog::-webkit-inner-spin-button {
Expand Down Expand Up @@ -59,11 +59,11 @@
font-size: 14px;
transition: 0.3s ease;
border: none;
font-family: "GmarketSansBD";
font-family: "GmarketSansM";
}

.handleButton:hover {
background-color: #00a3ff;
color: white;
color: #fdfdfd;
transition: 0.3s ease;
}
Loading