Skip to content

Commit 1617262

Browse files
seondyseondy
committed
style: HomePage 불필요 코드 제거
1 parent d5a57f9 commit 1617262

File tree

1 file changed

+91
-79
lines changed

1 file changed

+91
-79
lines changed

‎gamgyul-front/src/pages/HomePage/index.jsx

+91-79
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,57 @@ import { HOME_PAGE_TEXT } from "../../constants/String";
99
import { BasicLayout, Container } from "../../components/common/BasicLayout/layout.style";
1010
import NavigationBar from "../../components/common/NavigationBar";
1111
import { IcRefresh } from "../../assets";
12-
import homeBanner from '../../assets/background/homeBanner.png';
12+
import homeBanner from "../../assets/background/homeBanner.png";
1313

1414
const HomePage = () => {
1515
const navigate = useNavigate();
16-
const [data, setData] = useState({});
16+
const [routeData, setRouteData] = useState([]);
1717
const [shuffledRoutes, setShuffledRoutes] = useState([]);
1818

1919
// const language = window.localStorage.getItem("lanType");
2020
const language = "KR";
2121
const text = HOME_PAGE_TEXT[language];
2222

23+
const themeCategory = [
24+
{ id: "halmang", name: "HALMANG", imgRoute: "", textKey: "CATEGORY_SEOLMUNDAE" },
25+
{ id: "love", name: "LOVE", imgRoute: "", textKey: "CATEGORY_LOVE" },
26+
{ id: "history", name: "HISTORY", imgRoute: "", textKey: "CATEGORY_HISTORY" },
27+
{ id: "myth", name: "MYTH", imgRoute: "", textKey: "CATEGORY_MYTH" },
28+
];
29+
30+
const regionsAtrct = [
31+
{
32+
key: "REGIONS_WESTERN_JEJU",
33+
name: "제주시 서쪽 관광지",
34+
imgRoute: "이미지URL",
35+
},
36+
{
37+
key: "REGIONS_JEJU",
38+
name: "제주시 관광지",
39+
imgRoute: "이미지URL",
40+
},
41+
{
42+
key: "REGIONS_EASTERN_JEJU",
43+
name: "제주시 동쪽 관광지",
44+
imgRoute: "이미지URL",
45+
},
46+
{
47+
key: "REGIONS_WESTERN_SEOGWIPO",
48+
name: "서귀포시 서쪽 관광지",
49+
imgRoute: "이미지URL",
50+
},
51+
{
52+
key: "REGIONS_SEOGWIPO",
53+
name: "서귀포시 관광지",
54+
imgRoute: "이미지URL",
55+
},
56+
{
57+
key: "REGIONS_EASTERN_SEOGWIPO",
58+
name: "서귀포시 동쪽 관광지",
59+
imgRoute: "이미지URL",
60+
},
61+
];
62+
2363
// useEffect(() => {
2464
// const token = "토큰";
2565

@@ -41,60 +81,40 @@ const HomePage = () => {
4181
const fetchData = async () => {
4282
try {
4383
// const response = await fetch("API_URL");
44-
setData({
45-
REGION_ATRCT: [
46-
{
47-
name: "여행루트이름1",
48-
img: "이미지URL1",
49-
},
50-
{
51-
name: "여행루트이름2",
52-
img: "이미지URL2",
53-
},
54-
{
55-
name: "여행루트이름3",
56-
img: "이미지URL3",
57-
},
58-
{
59-
name: "여행루트이름4",
60-
img: "이미지URL4",
61-
},
62-
],
63-
FOLKTALE_ROUTE: [
64-
{
65-
name: "여행루트이름1",
66-
img: "이미지URL1",
67-
},
68-
{
69-
name: "여행루트이름2",
70-
img: "이미지URL2",
71-
},
72-
{
73-
name: "여행루트이름3",
74-
img: "이미지URL3",
75-
},
76-
{
77-
name: "여행루트이름4",
78-
img: "이미지URL4",
79-
},
80-
{
81-
name: "여행루트이름5",
82-
img: "이미지URL5",
83-
},
84-
{
85-
name: "여행루트이름6",
86-
img: "이미지URL6",
87-
},
88-
{
89-
name: "여행루트이름7",
90-
img: "이미지URL7",
91-
},
92-
{
93-
name: "여행루트이름8",
94-
img: "이미지URL8",
95-
},
96-
],
97-
});
84+
setRouteData([
85+
{
86+
name: "여행루트이름1",
87+
img: "이미지URL1",
88+
},
89+
{
90+
name: "여행루트이름2",
91+
img: "이미지URL2",
92+
},
93+
{
94+
name: "여행루트이름3",
95+
img: "이미지URL3",
96+
},
97+
{
98+
name: "여행루트이름4",
99+
img: "이미지URL4",
100+
},
101+
{
102+
name: "여행루트이름5",
103+
img: "이미지URL5",
104+
},
105+
{
106+
name: "여행루트이름6",
107+
img: "이미지URL6",
108+
},
109+
{
110+
name: "여행루트이름7",
111+
img: "이미지URL7",
112+
},
113+
{
114+
name: "여행루트이름8",
115+
img: "이미지URL8",
116+
},
117+
]);
98118
} catch (error) {
99119
console.log(error);
100120
}
@@ -103,11 +123,11 @@ const HomePage = () => {
103123
}, []);
104124

105125
useEffect(() => {
106-
if (data.FOLKTALE_ROUTE && data.FOLKTALE_ROUTE.length > 0) {
107-
const shuffled = shuffleArray(data.FOLKTALE_ROUTE).slice(0, 6);
126+
if (routeData && routeData.length > 0) {
127+
const shuffled = shuffleArray(routeData).slice(0, 6);
108128
setShuffledRoutes(shuffled);
109129
}
110-
}, [data]);
130+
}, [routeData]);
111131

112132
/** 루트 & 관광지 리스트 클릭 */
113133
const handleListClick = (props) => {
@@ -124,7 +144,7 @@ const HomePage = () => {
124144

125145
/** 설화 여행 루트 새로고침 버튼 클릭 */
126146
const handleRefreshClick = () => {
127-
const shuffled = shuffleArray(data.FOLKTALE_ROUTE).slice(0, 6);
147+
const shuffled = shuffleArray(routeData).slice(0, 6);
128148
setShuffledRoutes(shuffled);
129149
};
130150

@@ -147,22 +167,14 @@ const HomePage = () => {
147167
<StyledCategoryName>{text.THEME_ATRCT}</StyledCategoryName>
148168
<nav>
149169
<ul>
150-
<li onClick={() => handleListClick([{ id: "halmang", name: "HALMANG", type: "tale" }, "ATRCT"])}>
151-
<img src="" alt="" />
152-
<p>{text.CATEGORY_SEOLMUNDAE}</p>
153-
</li>
154-
<li onClick={() => handleListClick([{ id: "love", name: "LOVE", type: "tale" }, "ATRCT"])}>
155-
<img src="" alt="" />
156-
<p>{text.CATEGORY_LOVE}</p>
157-
</li>
158-
<li onClick={() => handleListClick([{ id: "history", name: "HISTORY", type: "tale" }, "ATRCT"])}>
159-
<img src="" alt="" />
160-
<p>{text.CATEGORY_HISTORY}</p>
161-
</li>
162-
<li onClick={() => handleListClick([{ id: "myth", name: "MYTH", type: "tale" }, "ATRCT"])}>
163-
<img src="" alt="" />
164-
<p>{text.CATEGORY_MYTH}</p>
165-
</li>
170+
{themeCategory.map((category) => (
171+
<li
172+
onClick={() => handleListClick([{ id: category.id, name: category.name, type: "tale" }, "ATRCT"])}
173+
>
174+
<img src={category.imgRoute} alt="" />
175+
<p>{text[category.textKey]}</p>
176+
</li>
177+
))}
166178
</ul>
167179
</nav>
168180
</StyledThemeAtrct>
@@ -196,9 +208,9 @@ const HomePage = () => {
196208
<StyledCategoryName>{text.REGION_ATRCT}</StyledCategoryName>
197209
<nav>
198210
<ul>
199-
{data.REGION_ATRCT &&
200-
data.REGION_ATRCT.length > 0 &&
201-
data.REGION_ATRCT.map((element, index) => {
211+
{regionsAtrct &&
212+
regionsAtrct.length > 0 &&
213+
regionsAtrct.map((element, index) => {
202214
return (
203215
<RouterLiItem
204216
key={`region-${index}`}

0 commit comments

Comments
 (0)