Skip to content

Commit fec670f

Browse files
qwerty00ui88qwerty00ui88
committed
#5 feat: 통계 모달 필터 API 연결
1 parent 9be3d12 commit fec670f

18 files changed

+9361
-81
lines changed

‎src/assets/cancel.svg

Lines changed: 1 addition & 1 deletion
Loading

‎src/components/FloatingBar.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,12 @@ function FloatingBar({ isOpen, isScrolledDown }: FloatingBarProps) {
6262
<FloatingBarWrapper $isScrolledDown={isScrolledDown} $isOpen={isOpen}>
6363
<Text>
6464
<li>
65-
👉포트폴리오라는거시다~~~!!!👉포트폴리오라는거시다~~~!!!👉포트폴리오라는거시다~~~!!!👉포트폴리오라는거시다~~~!!!
65+
👉추천을 가장 많이 받은 컨텐츠는? 👉비추천을 가장 많이 받은
66+
컨텐츠는? 👉다른 사람의 인생 컨텐츠가 궁금하다면?
6667
</li>
6768
<li>
68-
👉포트폴리오라는거시다~~~!!!👉포트폴리오라는거시다~~~!!!👉포트폴리오라는거시다~~~!!!👉포트폴리오라는거시다~~~!!!
69+
👉추천을 가장 많이 받은 컨텐츠는? 👉비추천을 가장 많이 받은
70+
컨텐츠는? 👉다른 사람의 인생 컨텐츠가 궁금하다면?
6971
</li>
7072
</Text>
7173
</FloatingBarWrapper>

‎src/components/Footer.tsx

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from 'react'
22
import { styled } from 'styled-components'
3-
import { mediumWeight, xsmallSize } from '../style/font'
3+
import { xsmallSize } from '../style/font'
44
import { ReactComponent as Velog } from '../assets/velog.svg'
55
import { ReactComponent as GitHub } from '../assets/github.svg'
66
import { ReactComponent as Gmail } from '../assets/gmail.svg'
7-
import { xsmallRadius } from '../style/border'
87

98
const FooterWrapper = styled.div`
109
display: flex;
@@ -45,14 +44,6 @@ const FooterLeftUl = styled.ul`
4544
}
4645
`
4746

48-
const FooterRightSelect = styled.select`
49-
width: 7rem;
50-
padding: 3px 0 3px 3px;
51-
font-weight: ${mediumWeight};
52-
color: black;
53-
border-radius: ${xsmallRadius};
54-
`
55-
5647
const FooterLinks = styled.ul`
5748
flex: 1;
5849
display: flex;
@@ -95,10 +86,6 @@ function Footer() {
9586
})}
9687
</FooterLeft>
9788
<FooterRight>
98-
<FooterRightSelect name="language">
99-
<option>한국어</option>
100-
<option>영어</option>
101-
</FooterRightSelect>
10289
<FooterLinks>
10390
<Gmail width="24" fill="#848485" />
10491
<GitHub width="24" fill="#848485" />

‎src/components/Header.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,8 +164,6 @@ function Header() {
164164
'http://localhost:3000'
165165
})
166166
}}
167-
width="4.5rem"
168-
height="2.4rem"
169167
/>
170168
</Menu>
171169
) : (

‎src/components/Outline.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,7 @@ function Outline({
8989
const releaseDate =
9090
(data as MovieDetail).release_date || (data as TVDetail).first_air_date
9191
const { runtime } = data as MovieDetail
92-
// eslint-disable-next-line no-console
93-
console.log(myComment)
92+
9493
return (
9594
data && (
9695
<OutlineWrapper $backdrop={data.backdrop_path}>

‎src/components/SearchBar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const SearchBarWrapper = styled.div<{ $isOpen: boolean }>`
3636
}
3737
`
3838

39-
const CancelButton = styled.button`
39+
export const CancelButton = styled.button`
4040
position: absolute;
4141
top: 20px;
4242
right: 20px;
@@ -128,7 +128,7 @@ function SearchBar({ isOpen, handleSetIsOpen }: SearchBarProps) {
128128
{isOpen ? (
129129
<>
130130
<CancelButton type="button" onClick={handleCancelButton}>
131-
<Cancel width={20} height={20} />
131+
<Cancel />
132132
</CancelButton>
133133
<InputContainer>
134134
<label htmlFor="search">

‎src/components/SignUp1.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,7 @@ function SignUp1({
3131
}}
3232
name="nickname"
3333
/>
34-
<Button
35-
name="닉네임중복"
36-
onClick={() => {}}
37-
width="20rem"
38-
height="3rem"
39-
/>
34+
<Button name="닉네임 중복" onClick={() => {}} />
4035
<label htmlFor="email">이메일</label>
4136
<Input
4237
id="email"

‎src/components/StatModal.tsx

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { useState } from 'react'
22
import styled from 'styled-components'
3-
import { ReactComponent as Good } from '../assets/good.svg'
4-
import { ReactComponent as Bad } from '../assets/bad.svg'
5-
import { ReactComponent as Favorite } from '../assets/favorite.svg'
6-
import Map from './Map'
73
import { TrendingWrapper } from './Trending'
4+
import StatModal1 from './StatModal1'
5+
import { ReactComponent as Cancel } from '../assets/cancel.svg'
6+
import StatModal2 from './StatModal2'
7+
import IconButton from './commons/IconButton'
88

99
const StatModalWrapper = styled(TrendingWrapper)`
1010
display: flex;
@@ -20,38 +20,32 @@ const StatModalWrapper = styled(TrendingWrapper)`
2020
z-index: 3;
2121
`
2222

23-
declare global {
24-
interface Window {
25-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
26-
kakao: any
27-
}
28-
}
29-
30-
const MapSection = styled.div`
31-
width: 100%;
32-
flex: 1;
33-
34-
.overlaybox {
35-
background-color: black;
36-
}
23+
const CancelIconButton = styled.div`
24+
position: absolute;
25+
top: 20px;
26+
right: 20px;
3727
`
3828

3929
function StatModal({ handleClose }: { handleClose: () => void }) {
40-
const [mapPosition] = useState([37.5172, 127.0473])
30+
const [page, setPage] = useState(1)
31+
const [mapPosition] = useState([36.5, 128])
32+
33+
const handlePage = () => {
34+
setPage(page === 1 ? 2 : 1)
35+
}
4136

4237
return (
4338
<StatModalWrapper>
44-
<div>
45-
<Good fill="#019e74" />
46-
<Bad fill="rgb(229, 9, 20)" />
47-
<Favorite fill="#FFD700" />
48-
<button type="button" onClick={handleClose}>
49-
X
50-
</button>
51-
</div>
52-
<MapSection>
53-
<Map mapPosition={mapPosition} />
54-
</MapSection>
39+
<CancelIconButton>
40+
<IconButton onClick={handleClose}>
41+
<Cancel />
42+
</IconButton>
43+
</CancelIconButton>
44+
{page === 1 ? (
45+
<StatModal1 mapPosition={mapPosition} handlePage={handlePage} />
46+
) : (
47+
<StatModal2 handlePage={handlePage} />
48+
)}
5549
</StatModalWrapper>
5650
)
5751
}

‎src/components/StatModal1.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import { ReactComponent as Good } from '../assets/good.svg'
4+
import { ReactComponent as Bad } from '../assets/bad.svg'
5+
import { ReactComponent as Favorite } from '../assets/favorite.svg'
6+
import Map from './Map'
7+
import Button from './commons/Button'
8+
import IconButton from './commons/IconButton'
9+
10+
declare global {
11+
interface Window {
12+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
13+
kakao: any
14+
}
15+
}
16+
17+
const MapSection = styled.div`
18+
width: 100%;
19+
flex: 1;
20+
21+
.overlaybox {
22+
background-color: black;
23+
}
24+
`
25+
26+
const IconButtonSection = styled.div`
27+
display: flex;
28+
gap: 1rem;
29+
`
30+
31+
const ButtonSection = styled.div`
32+
display: flex;
33+
justify-content: space-between;
34+
margin: 1rem 0;
35+
`
36+
37+
function StatModal1({
38+
mapPosition,
39+
handlePage,
40+
}: {
41+
mapPosition: number[]
42+
handlePage: () => void
43+
}) {
44+
return (
45+
<>
46+
<ButtonSection>
47+
<IconButtonSection>
48+
<IconButton onClick={() => {}}>
49+
<Good fill="#019e74" />
50+
</IconButton>
51+
<IconButton onClick={() => {}}>
52+
<Bad fill="rgb(229, 9, 20)" />
53+
</IconButton>
54+
<IconButton onClick={() => {}}>
55+
<Favorite fill="#FFD700" />
56+
</IconButton>
57+
</IconButtonSection>
58+
<Button name="필터로 검색하기" onClick={handlePage} />
59+
</ButtonSection>
60+
<MapSection>
61+
<Map mapPosition={mapPosition} />
62+
</MapSection>
63+
</>
64+
)
65+
}
66+
export default StatModal1

‎src/components/StatModal2.tsx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React, { useEffect, useState } from 'react'
2+
import styled from 'styled-components'
3+
import axios from 'axios'
4+
import Button from './commons/Button'
5+
import DropDown from './commons/DropDown'
6+
7+
const TopSection = styled.div`
8+
display: flex;
9+
justify-content: space-between;
10+
margin: 1rem 0;
11+
`
12+
13+
const FilterSection = styled.div`
14+
select {
15+
margin-right: 1rem;
16+
}
17+
`
18+
19+
function StatModal2({ handlePage }: { handlePage: () => void }) {
20+
const [region1, setRegion1] = useState<string>('서울특별시')
21+
const [region2, setRegion2] = useState<string>('강남구')
22+
const [gender, setGender] = useState<string>('male')
23+
const [ageGroup, setAgeGroup] = useState<string>('20')
24+
25+
useEffect(() => {}, [])
26+
27+
return (
28+
<TopSection>
29+
<FilterSection>
30+
<DropDown
31+
selectId="region1"
32+
onChange={(e) => {
33+
setRegion1(e.target.value)
34+
}}
35+
options={[
36+
{ value: '서울특별시', name: '서울특별시' },
37+
{ value: '경기도', name: '경기도' },
38+
]}
39+
/>
40+
<DropDown
41+
selectId="region2"
42+
onChange={(e) => {
43+
setRegion2(e.target.value)
44+
}}
45+
options={[
46+
{ value: '강남구', name: '강남구' },
47+
{ value: '화성시', name: '화성시' },
48+
]}
49+
/>
50+
<DropDown
51+
selectId="gender"
52+
onChange={(e) => {
53+
setGender(e.target.value)
54+
}}
55+
options={[
56+
{ value: 'male', name: '남성' },
57+
{ value: 'female', name: '여성' },
58+
]}
59+
/>
60+
<DropDown
61+
selectId="ageGroup"
62+
onChange={(e) => {
63+
setAgeGroup(e.target.value)
64+
// eslint-disable-next-line no-console
65+
console.log(e.target.value)
66+
}}
67+
options={[
68+
{ value: '10', name: '10대' },
69+
{ value: '20', name: '20대' },
70+
{ value: '30', name: '30대' },
71+
{ value: '40', name: '40대' },
72+
{ value: '50', name: '50대' },
73+
{ value: '60', name: '60대' },
74+
{ value: '70', name: '70대' },
75+
{ value: '80', name: '80대' },
76+
]}
77+
/>
78+
<Button
79+
name="검색"
80+
onClick={() => {
81+
axios
82+
.get(
83+
'http://localhost/statistics/by-region-gender-ageGroup',
84+
{
85+
params: {
86+
region: `${region1} ${region2}`,
87+
gender,
88+
ageGroup: Number(ageGroup),
89+
},
90+
withCredentials: true,
91+
}
92+
)
93+
.then((response) => {
94+
// eslint-disable-next-line no-console
95+
console.log(response)
96+
})
97+
}}
98+
/>
99+
</FilterSection>
100+
<Button name="지도로 보기" onClick={handlePage} />
101+
</TopSection>
102+
)
103+
}
104+
export default StatModal2

0 commit comments

Comments
 (0)