Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
travel
Commits
e928e6d8
Commit
e928e6d8
authored
Jul 04, 2022
by
Lee Soobeom
Browse files
Merge remote-tracking branch 'origin/snowmaan' into develop
parents
06bbb0bc
2762e04b
Changes
4
Hide whitespace changes
Inline
Side-by-side
frontend/src/Pages/pic.ts
0 → 100644
View file @
e928e6d8
let
url
=
[
{
themeid
:
"
surfing
"
,
cityid
:
"
Seoul
"
,
url
:
"
https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg
"
,
name
:
"
종로 서핑
"
},
{
themeid
:
"
surfing
"
,
cityid
:
"
Busan
"
,
url
:
"
https://cdn.crowdpic.net/detail-thumb/thumb_d_1F5AF0BCBB2F43EF3C5B79DA763D3CFB.jpg
"
,
name
:
"
해운대 서핑
"
},
{
themeid
:
"
surfing
"
,
cityid
:
"
Daegoo
"
,
url
:
"
https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg
"
,
name
:
"
대구 서핑
"
},
{
themeid
:
"
activity
"
,
cityid
:
"
Seoul
"
,
url
:
"
https://cdn.pixabay.com/photo/2019/05/17/13/36/umbrella-4209724__340.jpg
"
,
name
:
"
서대문 번지점프
"
},
{
themeid
:
"
sking
"
,
cityid
:
"
Kwangjoo
"
,
url
:
"
https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg
"
,
name
:
"
광주 스키
"
},
{
themeid
:
"
camping
"
,
cityid
:
"
Seoul
"
,
url
:
"
https://cdn.pixabay.com/photo/2021/11/16/11/13/man-6800728__340.jpg
"
,
name
:
"
강남 캠핑
"
},
{
themeid
:
"
boat
"
,
cityid
:
"
Sejong
"
,
url
:
"
https://cdn.pixabay.com/photo/2018/02/19/22/21/water-3166432__340.jpg
"
,
name
:
"
조치원 보트
"
},
{
themeid
:
"
activity
"
,
cityid
:
"
Sejong
"
,
url
:
"
https://media.istockphoto.com/photos/vertical-woman-is-wraped-in-bungee-jumping-picture-id1391927451?b=1&k=20&m=1391927451&s=170667a&w=0&h=haNtVpNjhj58PsjRi8N_RbyYfxZsFfKdb3NJi7NPdDI=
"
,
name
:
"
번지점프
"
},
{
themeid
:
"
activity
"
,
cityid
:
"
Busan
"
,
url
:
"
https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg
"
,
name
:
"
레일바이크
"
},
{
themeid
:
"
activity
"
,
cityid
:
"
Daegoo
"
,
url
:
"
https://cdn.pixabay.com/photo/2017/06/17/10/55/hot-air-balloon-2411851__340.jpg
"
,
name
:
"
열기구
"
},
{
themeid
:
"
activity
"
,
cityid
:
"
Jeju
"
,
url
:
"
https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg
"
,
name
:
"
스카이다이빙
"
},
{
themeid
:
"
activity
"
,
cityid
:
"
Incheon
"
,
url
:
"
https://cdn.pixabay.com/photo/2015/03/11/15/19/divers-668777__480.jpg
"
,
name
:
"
인천 스쿠버다이빙
"
},
{
themeid
:
"
activity
"
,
cityid
:
"
Daejeon
"
,
url
:
"
https://media.istockphoto.com/photos/playing-water-skiing-or-wakeboard-picture-id1021580500?b=1&k=20&m=1021580500&s=170667a&w=0&h=dL-mrlLeoQGrNBhbyAS-rN0TcpFg9s41D3WVKUoZgNo=
"
,
name
:
"
수상스키
"
},
{
themeid
:
"
desert
"
,
cityid
:
"
Incheon
"
,
url
:
"
https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg
"
,
name
:
"
인천 사막
"
},
{
themeid
:
"
activity
"
,
cityid
:
"
Woolsan
"
,
url
:
"
https://cdn.pixabay.com/photo/2022/06/15/23/08/germany-7264701__340.jpg
"
,
name
:
"
클라이밍
"
},
{
themeid
:
"
zoo
"
,
cityid
:
"
Daejeon
"
,
url
:
"
https://cdn.pixabay.com/photo/2020/06/10/18/45/africa-5283871__340.jpg
"
,
name
:
"
대전 동물원
"
},
{
themeid
:
"
activity
"
,
cityid
:
"
Dokdo
"
,
url
:
"
https://cdn.pixabay.com/photo/2020/04/19/08/03/adventure-5062314__340.jpg
"
,
name
:
"
산
"
},
{
themeid
:
"
cave
"
,
cityid
:
"
Seoul
"
,
url
:
"
https://cdn.pixabay.com/photo/2016/08/23/16/34/italy-1614931__340.jpg
"
,
name
:
"
서울 동굴
"
},
];
export
default
function
getpic
(){
return
url
;
};
\ No newline at end of file
frontend/src/pages/body.tsx
View file @
e928e6d8
import
React
,
{
useEffect
,
MouseEvent
}
from
"
react
"
;
import
React
,
{
useEffect
,
MouseEvent
}
from
"
react
"
;
import
{
BrowserRouter
,
Route
,
Routes
,
Link
,
Outlet
,
useSearchParams
}
from
"
react-router-dom
"
;
import
{
Outlet
,
useSearchParams
}
from
"
react-router-dom
"
;
import
Theme
from
"
./theme
"
;
import
Theme
from
"
./theme
"
;
import
getUrl
from
"
../url
"
import
Citylist
from
"
./citylist
"
;
import
getpic
from
"
./pic
"
;
const
initSearchParams
=
{
"
theme
"
:
""
,
"
city
"
:
""
}
const
initSearchParams
=
{
"
theme
"
:
"
1
"
,
"
city
"
:
"
1
"
}
export
default
function
Body
()
{
export
default
function
Body
()
{
const
[
searchParams
,
setSearchParams
]
=
useSearchParams
(
initSearchParams
)
const
[
searchParams
,
setSearchParams
]
=
useSearchParams
(
initSearchParams
)
let
getpics
=
getpic
();
useEffect
(()
=>
{
useEffect
(()
=>
{
console
.
log
(
searchParams
.
get
(
'
theme
'
),
searchParams
.
get
(
'
city
'
))
console
.
log
(
searchParams
.
get
(
'
theme
'
),
searchParams
.
get
(
'
city
'
))
setSearchParams
(
searchParams
)
//
setSearchParams(searchParams)
},
[])
},
[])
const
h
andleClick
=
(
event
:
MouseEvent
<
HTMLButtonElement
>
)
=>
{
const
themeH
andleClick
=
(
event
:
MouseEvent
<
HTMLButtonElement
>
)
=>
{
console
.
log
(
`theme id=
${
event
.
currentTarget
.
id
}
`
)
console
.
log
(
`theme id=
${
event
.
currentTarget
.
id
}
`
)
setSearchParams
({
...
Object
.
fromEntries
(
searchParams
),
theme
:
event
.
currentTarget
.
id
,
})
}
}
let
url
=
getUrl
();
const
cityHandleClick
=
(
event
:
MouseEvent
<
HTMLButtonElement
>
)
=>
{
return
(
console
.
log
(
`city id=
${
event
.
currentTarget
.
id
}
`
)
setSearchParams
({
...
Object
.
fromEntries
(
searchParams
),
city
:
event
.
currentTarget
.
id
})
}
<
div
className
=
"flex flex-col px-5 py-5"
>
const
Idpics
=
getpics
.
filter
(
p
=>
<
Theme
handleClick
=
{
handleClick
}
/>
p
.
themeid
==
searchParams
.
get
(
'
theme
'
)
&&
<
div
className
=
"flex flex-col md:flex-row px-5 py-40 "
>
p
.
cityid
==
searchParams
.
get
(
'
city
'
)
<
div
className
=
"flex flex-row justify-evenly md:flex-col md:basis-1/5 bg-gray-400 rounded "
>
)
<
button
>
01
</
button
>
<
button
>
02
</
button
>
return
(
<
button
>
03
</
button
>
<
div
className
=
"flex flex-col px-1 py-1"
>
<
button
>
04
</
button
>
<
Theme
handleClick
=
{
themeHandleClick
}
/>
<
button
>
06
</
button
>
<
div
className
=
"flex flex-col md:flex-row py-10 "
>
<
button
>
07
</
button
>
<
Citylist
handleClick
=
{
cityHandleClick
}
/>
<
button
>
05
</
button
>
<
div
className
=
"overflow-y-auto flex mr:10 md:basis-4/5 grid grid-rows-3 grid-cols-5"
>
<
button
>
08
</
button
>
{
Idpics
.
map
((
pic
,
index
:
number
)
=>
(
<
button
>
09
</
button
>
<
div
className
=
"m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md"
key
=
{
index
}
>
<
button
>
10
</
button
>
<
img
src
=
{
pic
.
url
}
className
=
"w-full h-10 md:h-20 object-cover"
/>
{
/* citylist */
}
<
p
className
=
"text-center text-xs"
>
{
pic
.
name
}
</
p
>
</
div
>
</
div
>
<
div
className
=
"flex md:basis-4/5 grid grid-rows-3 grid-cols-5 outline"
>
))
}
{
url
.
map
(
url
=>
(
</
div
>
<
div
className
=
"flex justify-items-center"
key
=
{
url
.
url
}
>
{
url
.
url
}
</
div
>
))
}
{
/* pic */
}
</
div
>
</
div
>
<
Outlet
/>
</
div
>
</
div
>
<
Outlet
/>
// Body Page
</
div
>
);
// Body Page
};
);
};
frontend/src/pages/citylist.tsx
View file @
e928e6d8
import
React
from
"
react
"
;
import
React
,
{
MouseEventHandler
}
from
"
react
"
;
export
default
function
Citylist
()
{
type
CityProps
=
{
return
(
handleClick
:
MouseEventHandler
;
<
div
>
citylist
</
div
>
// Citylist Page
}
);
export
default
function
Citylist
({
handleClick
}:
CityProps
)
{
return
(
<
div
className
=
"overflow-auto flex flex-row mb-10 md:flex-col md:basis-1/5 md:mr-10 bg-gray-400 rounded "
>
<
button
id
=
{
"
Seoul
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5 hover:underline"
>
seoul
</
button
>
<
button
id
=
{
"
Busan
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5 hover:underline"
>
Busan
</
button
>
<
button
id
=
{
"
Incheon
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5 hover:underline"
>
Incheon
</
button
>
<
button
id
=
{
"
Daegoo
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5 hover:underline"
>
Daegoo
</
button
>
<
button
id
=
{
"
Kwangjoo
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5 hover:underline"
>
Kwangjoo
</
button
>
<
button
id
=
{
"
Daejeon
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5 hover:underline"
>
Daejeon
</
button
>
<
button
id
=
{
"
Woolsan
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5 hover:underline"
>
woolsan
</
button
>
<
button
id
=
{
"
Sejong
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5 hover:underline"
>
Sejong
</
button
>
<
button
id
=
{
"
Dokdo
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5 hover:underline"
>
Dokdo
</
button
>
<
button
id
=
{
"
Jeju
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5 hover:underline"
>
jeju
</
button
>
{
/* citylist */
}
</
div
>
// Citylist Page
);
};
};
\ No newline at end of file
frontend/src/pages/theme.tsx
View file @
e928e6d8
import
React
,
{
MouseEvent
,
MouseEventHandler
}
from
"
react
"
;
import
React
,
{
useEffect
,
MouseEvent
,
MouseEventHandler
}
from
"
react
"
;
import
{
Outlet
,
useSearchParams
}
from
"
react-router-dom
"
;
type
ThemeProps
=
{
type
ThemeProps
=
{
handleClick
:
MouseEventHandler
;
handleClick
:
MouseEventHandler
;
}
}
export
default
function
Theme
({
handleClick
}:
ThemeProps
)
{
export
default
function
Theme
({
handleClick
}:
ThemeProps
)
{
return
(
return
(
<
div
className
=
"flex flex-cols-10 justify-evenly w-full bg-emerald-400 rounded "
>
<
div
className
=
"overflow-x-scroll flex bg-emerald-400 rounded "
>
<
button
id
=
{
"
01
"
}
onClick
=
{
handleClick
}
>
서핑
</
button
>
<
button
id
=
{
"
surfing
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5"
>
서핑
</
button
>
<
button
>
액티비티
</
button
>
<
button
id
=
{
"
activity
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5"
>
액티비티
</
button
>
<
button
>
캠핑
</
button
>
<
button
id
=
{
"
camping
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5 "
>
캠핑
</
button
>
<
button
>
스키
</
button
>
<
button
id
=
{
"
sking
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5"
>
스키
</
button
>
<
button
>
보트
</
button
>
<
button
id
=
{
"
boat
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5"
>
보트
</
button
>
<
button
>
사막
</
button
>
<
button
id
=
{
"
desert
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5"
>
사막
</
button
>
<
button
>
골프
</
button
>
<
button
id
=
{
"
golf
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5"
>
골프
</
button
>
<
button
>
동굴
</
button
>
<
button
id
=
{
"
cave
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5"
>
동굴
</
button
>
<
button
>
문화재
</
button
>
<
button
id
=
{
"
history
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5"
>
문화재
</
button
>
<
button
>
동물원
</
button
>
<
button
id
=
{
"
zoo
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5"
>
동물원
</
button
>
</
div
>
<
button
id
=
{
"
cycling
"
}
onClick
=
{
handleClick
}
className
=
"shrink-0 px-5"
>
사이클링
</
button
>
);
</
div
>
);
};
};
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment