+
-
-
-
-
-
+
+
+
+
+
+
+
);
}
const styles = {
- container: styled.nav`
+ wrapper: styled.nav`
+ display: flex;
+ position: relative;
+ z-index: 99999;
+ `,
+
+ container: styled.div`
width: 100%;
+ height: 55px;
display: flex;
justify-content: space-around;
align-items: center;
- padding: 0.75rem 0;
position: fixed;
bottom: 0;
background-color: white;
- z-index: 99999;
button {
all: unset;
@@ -101,7 +107,7 @@ const styles = {
color: ${(props) => (props.$active ? '#605EFF' : '#b0afbc')};
font-family: 'Noto Sans KR';
- font-size: 0.5rem;
+ font-size: 0.7rem;
font-style: normal;
font-weight: 700;
line-height: normal;
@@ -115,6 +121,6 @@ const styles = {
`,
icon: styled.img`
- width: 1.125rem;
+ width: 1.3rem;
`,
};
diff --git a/src/components/travel/ContentsCard.tsx b/src/components/travel/ContentsCard.tsx
index f3d78a8..0376d76 100644
--- a/src/components/travel/ContentsCard.tsx
+++ b/src/components/travel/ContentsCard.tsx
@@ -16,42 +16,18 @@ export function ContentsCard({
const styles = {
container: styled.div<{ $type: 'auto' | 'traveler' | 'edit' }>`
width: 100%;
- height: calc(100% - 34px);
+ height: 76%;
border-radius: 2.6875rem;
background: #fafaff;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
position: absolute;
+ padding: 20px;
display: flex;
- padding: 1.25rem;
flex-direction: column;
align-items: center;
- justify-content: center;
+ justify-content: start;
- top: ${({ $type }) => {
- switch ($type) {
- case 'auto':
- return '12rem';
- case 'traveler':
- return '7rem';
- case 'edit':
- return '9rem';
- default:
- return '12rem';
- }
- }};
-
- padding-bottom: ${({ $type }) => {
- switch ($type) {
- case 'auto':
- return '13rem';
- case 'traveler':
- return '8rem';
- case 'edit':
- return '10rem';
- default:
- return '13rem';
- }
- }};
+ top: 24%;
`,
};
diff --git a/src/components/travel/DetailCard.tsx b/src/components/travel/DetailCard.tsx
index 730a22f..a6d2b0c 100644
--- a/src/components/travel/DetailCard.tsx
+++ b/src/components/travel/DetailCard.tsx
@@ -34,6 +34,8 @@ export function DetailCard({
}) {
const [time, setTime] = useState(place.time ?? '오전');
+ console.log(time);
+
const { data: tourSpot } = useTourSpotData(
place.item.contentId,
place.item.contentTypeId,
@@ -161,20 +163,24 @@ export function DetailCard({
const styles = {
wrapper: styled.div`
width: 100%;
- min-height: 100dvh;
- flex-shrink: 0;
+ height: 100%;
display: flex;
align-items: center;
- justify-content: center;
+ justify-content: start;
scroll-snap-align: start;
- padding: 0.5rem 0.5rem 20rem 0.5rem;
+ padding: 0.5rem;
flex-direction: column;
gap: 1rem;
+ overflow-y: scroll;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
`,
placeCon: styled.div`
width: 100%;
- min-height: 20rem;
+ flex: 1;
border-radius: 10px;
background: #fff;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
@@ -216,7 +222,8 @@ const styles = {
placeImg: styled.img`
width: 100%;
- height: 16rem;
+ object-fit: content;
+ flex: 1;
border-radius: 8px;
margin-top: 0.8rem;
scale: ${(props) => (props.$isNoImage ? 0.5 : 1)};
diff --git a/src/components/travel/Loading.tsx b/src/components/travel/Loading.tsx
index b416410..69aec50 100644
--- a/src/components/travel/Loading.tsx
+++ b/src/components/travel/Loading.tsx
@@ -20,17 +20,18 @@ export function Loading() {
const styles = {
wrapper: styled.div`
width: 100%;
- min-height: 100dvh;
+ height: 100%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
- padding: 0.5rem 0.5rem 20rem 0.5rem;
+ padding: 0.5rem;
position: relative;
div {
display: flex;
+ position: relative;
flex-direction: column;
align-items: center;
gap: 2rem;
@@ -52,20 +53,20 @@ const styles = {
position: relative;
width: 2.5em;
height: 2.5em;
- transform: rotate(165deg);
+ transform: translateY(230%);
}
.loader:before,
.loader:after {
content: '';
position: absolute;
- top: 50%;
left: 50%;
display: block;
width: 0.5em;
height: 0.5em;
border-radius: 0.25em;
- transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%) rotate(165deg);
+ transform-origin: 50% 50%;
}
.loader:before {
diff --git a/src/components/travel/PurpleBackground.tsx b/src/components/travel/PurpleBackground.tsx
index 61bfc90..2a95f8f 100644
--- a/src/components/travel/PurpleBackground.tsx
+++ b/src/components/travel/PurpleBackground.tsx
@@ -60,7 +60,7 @@ function Elements() {
const styles = {
container: styled.div`
width: 100%;
- height: 17rem;
+ height: 30%;
position: relative;
background: linear-gradient(180deg, #6b67f9 0.04%, #3f3d93 90.12%);
padding: 1.25rem;
diff --git a/src/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx
index cd4a6ee..0dd0626 100644
--- a/src/providers/AuthProvider.tsx
+++ b/src/providers/AuthProvider.tsx
@@ -135,7 +135,11 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
return;
}
- if (pathname.startsWith('/login') || token == null) {
+ if (
+ pathname.startsWith('/login') ||
+ pathname.startsWith('sign-up') ||
+ token == null
+ ) {
setLoading(false);
return;
}