diff --git a/package-lock.json b/package-lock.json index 2702efe..9714a8d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", + "axios": "^1.7.9", "jotai": "^2.11.0", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -2315,6 +2316,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "license": "MIT" + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -2331,6 +2338,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.7.9", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz", + "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/babel-plugin-macros": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", @@ -2583,6 +2601,18 @@ "dev": true, "license": "MIT" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/compare-func": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz", @@ -2855,6 +2885,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/doctrine": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", @@ -3645,6 +3684,26 @@ "dev": true, "license": "ISC" }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -3655,6 +3714,20 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz", + "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -4833,6 +4906,27 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -5197,6 +5291,12 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index fdf69c8..a925d79 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", + "axios": "^1.7.9", "jotai": "^2.11.0", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/src/App.tsx b/src/App.tsx index b828728..facecfc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,7 +13,7 @@ function App() { } /> - } /> + } /> } /> diff --git a/src/components/FacilityDetail.tsx b/src/components/FacilityDetail.tsx deleted file mode 100644 index 9a0d75e..0000000 --- a/src/components/FacilityDetail.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import React from "react"; -import { FacilityInfo } from "./data/buildingData"; -import styled from "@emotion/styled"; -import { BackButton, LikeButton } from "./Buttons"; -import Divider from "./Divider"; -import { IoMdHeart } from "react-icons/io"; -import { FaAngleLeft } from "react-icons/fa6"; -import { facilityAtom, isPanelOpenAtom } from "../store/building.ts"; -import { useAtom } from "jotai"; -interface FacilityDetailProps { - facility: FacilityInfo; -} - -const FacilityDetail: React.FC = ({ facility }) => { - const [, setFacility] = useAtom(facilityAtom); - const [isPanelOpen] = useAtom(isPanelOpenAtom); - return ( - <> - {isPanelOpen && ( - setFacility(null)}> - - - )} - - - <h2> - {facility.floor}층 {facility.name} - </h2> - <Building>{facility.building} </Building> - - - 좋아요 {facility.like}개 - 싫어요 {facility.dislike}개 - - - - - -

리뷰 {facility.reviewCount}개

- - - - 등록 - - - {facility.review.map((review) => ( - <> - - - -
{review.contents}
- - - {review.like} - - -
-
- {review.user} -
-
- {review.date} -
-
- - - ))} - - - ); -}; - -export default FacilityDetail; -const ReviewContainer = styled.div` - padding: 0px 10px; - margin-bottom: 10px; -`; -const Container = styled.div` - width: 400px; - padding: 20px 40px; - overflow: hidden; -`; -const Title = styled.div` - display: flex; - align-items: center; - margin-top: 20px; -`; -const Building = styled.p` - margin-left: 10px; - color: #a7a7a7; -`; -const Like = styled.div` - display: flex; - gap: 10px; - margin: 15px 0px 10px 0px; -`; -const Review = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - margin-top: 10px; - margin-bottom: 5px; - font-weight: 300; -`; -const Input = styled.input` - width: 83%; - height: 35px; - border: none; - background: #f2f2f2; - border-radius: 5px; - padding: 0px 10px; -`; -const ReviewButton = styled.button` - border: none; - width: 15%; - border-radius: 5px; - background: #8099b1; - color: white; - &:hover { - background: #003363; - } -`; -const ReviewInput = styled.div` - display: flex; - justify-content: space-between; - margin-bottom: 25px; - margin-top: 20px; -`; diff --git a/src/components/Building.tsx b/src/components/HomePage/Building.tsx similarity index 86% rename from src/components/Building.tsx rename to src/components/HomePage/Building.tsx index b75ba86..f9751c1 100644 --- a/src/components/Building.tsx +++ b/src/components/HomePage/Building.tsx @@ -1,9 +1,9 @@ import styled from "@emotion/styled"; import Divider from "./Divider.tsx"; -import { buildingData } from "./data/buildingData.ts"; +import { buildingData } from "../data/buildingData.ts"; import Overflow from "./Overflow.tsx"; import { useAtom } from "jotai"; -import { selectedBuildingAtom } from "../store/building.ts"; +import { selectedBuildingAtom } from "../../store/building.ts"; const Building = () => { const [, setSelectedBuilding] = useAtom(selectedBuildingAtom); @@ -13,11 +13,11 @@ const Building = () => { 홍익대학교 - + 내부건물 {buildingData.map((building) => ( - <> +
setSelectedBuilding(building)} @@ -28,8 +28,8 @@ const Building = () => {
운영 시간: {building.time}
 - - + +
))} diff --git a/src/components/BuildingDetail.tsx b/src/components/HomePage/BuildingDetail.tsx similarity index 92% rename from src/components/BuildingDetail.tsx rename to src/components/HomePage/BuildingDetail.tsx index 11d3f17..0a0f17f 100644 --- a/src/components/BuildingDetail.tsx +++ b/src/components/HomePage/BuildingDetail.tsx @@ -1,5 +1,5 @@ import styled from "@emotion/styled"; -import { BuildingInfo, FacilityInfo } from "./data/buildingData"; +import { BuildingInfo, FacilityInfo } from "../data/buildingData"; import Divider from "./Divider"; import { useEffect, useState } from "react"; import FacilityItem from "./FacilityItem.tsx"; @@ -10,7 +10,7 @@ import { isPanelOpenAtom, markFacilityAtom, selectedBuildingAtom, -} from "../store/building.ts"; +} from "../../store/building.ts"; import { BackButton } from "./Buttons.tsx"; interface BuildingDetailProps { building: BuildingInfo; @@ -60,7 +60,7 @@ const BuildingDetail: React.FC = ({ ))} - + {selectedFloor ? `${selectedFloor}층 내부 시설` : "내부 시설"} @@ -87,7 +87,7 @@ const BuildingDetail: React.FC = ({ {building.facilities?.map((facility) => ( - <> +
onFacilityClick?.(facility)} @@ -100,13 +100,13 @@ const BuildingDetail: React.FC = ({ facility.type === markFacility && ( <> - + ) ) : ( <> - + )} @@ -119,19 +119,19 @@ const BuildingDetail: React.FC = ({ facility.type === markFacility && ( <> - + ) ) : ( <> - + )} )} - +
))} diff --git a/src/components/Buttons.tsx b/src/components/HomePage/Buttons.tsx similarity index 99% rename from src/components/Buttons.tsx rename to src/components/HomePage/Buttons.tsx index b8c20a7..2653f85 100644 --- a/src/components/Buttons.tsx +++ b/src/components/HomePage/Buttons.tsx @@ -25,7 +25,6 @@ const BackButton = styled.button` border: none; cursor: pointer; color: white; - `; export { LikeButton, BackButton }; diff --git a/src/components/Divider.tsx b/src/components/HomePage/Divider.tsx similarity index 73% rename from src/components/Divider.tsx rename to src/components/HomePage/Divider.tsx index 5ee4db2..702ebf7 100644 --- a/src/components/Divider.tsx +++ b/src/components/HomePage/Divider.tsx @@ -1,10 +1,10 @@ import styled from "@emotion/styled"; interface DividerProps { - size: boolean; + sizes: boolean; } const Divider = styled.div` width: 100%; - height: ${({ size }) => (size ? "10px" : "1px")}; + height: ${({ sizes }) => (sizes ? "10px" : "1px")}; background: #e9e9e9; margin-bottom: 10px; `; diff --git a/src/components/FacilityItem.tsx b/src/components/HomePage/FacilityItem.tsx similarity index 96% rename from src/components/FacilityItem.tsx rename to src/components/HomePage/FacilityItem.tsx index aedbb9d..aed8cae 100644 --- a/src/components/FacilityItem.tsx +++ b/src/components/HomePage/FacilityItem.tsx @@ -1,6 +1,6 @@ import styled from "@emotion/styled"; import { LikeButton } from "./Buttons.tsx"; -import { FacilityInfo } from "./data/buildingData.ts"; +import { FacilityInfo } from "../data/buildingData.ts"; interface FacilityItemProps { facility?: FacilityInfo | null; } diff --git a/src/components/HomeBoard.tsx b/src/components/HomePage/HomeBoard.tsx similarity index 95% rename from src/components/HomeBoard.tsx rename to src/components/HomePage/HomeBoard.tsx index fc1b743..98c1aa3 100644 --- a/src/components/HomeBoard.tsx +++ b/src/components/HomePage/HomeBoard.tsx @@ -1,16 +1,16 @@ import styled from "@emotion/styled"; import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io"; import Building from "./Building"; -import { FacilityInfo } from "./data/buildingData.ts"; +import { FacilityInfo } from "../data/buildingData.ts"; import BuildingDetail from "./BuildingDetail.tsx"; -import FacilityDetail from "./FacilityDetail.tsx"; +import FacilityDetail from "./facilityDetail/FacilityDetail.tsx"; import { useAtom } from "jotai"; import { facilityAtom, isPanelOpenAtom, selectedBuildingAtom, markFacilityAtom, -} from "../store/building.ts"; +} from "../../store/building.ts"; const HomeBoard: React.FC = () => { const [isPanelOpen, setIsPanelOpen] = useAtom(isPanelOpenAtom); diff --git a/src/components/Overflow.tsx b/src/components/HomePage/Overflow.tsx similarity index 100% rename from src/components/Overflow.tsx rename to src/components/HomePage/Overflow.tsx diff --git a/src/components/HomePage/facilityDetail/FacilityDetail.tsx b/src/components/HomePage/facilityDetail/FacilityDetail.tsx new file mode 100644 index 0000000..aac376e --- /dev/null +++ b/src/components/HomePage/facilityDetail/FacilityDetail.tsx @@ -0,0 +1,107 @@ +import React, { useEffect, useState } from "react"; +import { FacilityInfo } from "../../data/buildingData.ts"; +import styled from "@emotion/styled"; +import { BackButton } from "../Buttons.tsx"; +import Divider from "../Divider.tsx"; +import { FaAngleLeft } from "react-icons/fa6"; +import { facilityAtom, isPanelOpenAtom } from "../../../store/building.ts"; +import { useAtom } from "jotai"; +import { useNavigate } from "react-router-dom"; +import FacilityInform from "./FacilityInform.tsx"; +import ReviewCard from "./ReviewCard.tsx"; +interface FacilityDetailProps { + facility: FacilityInfo; +} + +const FacilityDetail: React.FC = ({ facility }) => { + const [, setFacility] = useAtom(facilityAtom); + const [isPanelOpen] = useAtom(isPanelOpenAtom); + const [isLogin, setIsLogin] = useState(false); + const navigate = useNavigate(); + const fetchData = async () => { + const token = sessionStorage.getItem("accessToken"); + if (token) { + setIsLogin(true); + } + }; + const handleSubmit = () => { + console.log("리뷰 등록"); + }; + useEffect(() => { + fetchData(); + }, []); + return ( + <> + {isPanelOpen && ( + setFacility(null)}> + + + )} + + + + +

리뷰 {facility.reviewCount}개

+ + + {} : () => navigate("/login")} + /> + 등록 + + + {facility.review.map((review) => ( +
+ + +
+ ))} + + + ); +}; + +export default FacilityDetail; + +const Container = styled.div` + width: 400px; + padding: 20px 40px; + overflow: hidden; +`; + +const Review = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + margin-top: 10px; + margin-bottom: 5px; + font-weight: 300; +`; +const Input = styled.input` + cursor: pointer; + width: 83%; + height: 35px; + border: none; + background: #f2f2f2; + border-radius: 5px; + padding: 0px 10px; +`; +const ReviewButton = styled.button` + border: none; + width: 15%; + border-radius: 5px; + background: #8099b1; + color: white; + &:hover { + background: #003363; + } +`; +const ReviewInput = styled.form` + display: flex; + justify-content: space-between; + margin-bottom: 25px; + margin-top: 20px; +`; diff --git a/src/components/HomePage/facilityDetail/FacilityInform.tsx b/src/components/HomePage/facilityDetail/FacilityInform.tsx new file mode 100644 index 0000000..ee43a9b --- /dev/null +++ b/src/components/HomePage/facilityDetail/FacilityInform.tsx @@ -0,0 +1,60 @@ +import styled from "@emotion/styled"; +import { FacilityInfo } from "../../data/buildingData.ts"; +import { LikeButton } from "../Buttons.tsx"; +interface FacilityInformProps { + facility: FacilityInfo; +} +const FacilityInform: React.FC = ({ facility }) => { + const handleLike = async (like: boolean) => { + if (sessionStorage.getItem("accessToken")) { + if (like) { + facility.like += 1; + } else { + facility.dislike += 1; + } + } else { + alert("로그인을 해주세요"); + } + }; + + return ( + <> + + + <h2> + {facility.floor}층 {facility.name} + </h2> + <Building>{facility.building} </Building> + + + handleLike(true)}> + 좋아요 {facility.like}개 + + handleLike(false)}> + 싫어요 {facility.dislike}개 + + + + + ); +}; +export default FacilityInform; +const Title = styled.div` + display: flex; + align-items: center; + margin-top: 20px; +`; +const Building = styled.p` + margin-left: 10px; + color: #a7a7a7; +`; +const Like = styled.div` + display: flex; + gap: 10px; + margin: 15px 0px 10px 0px; +`; +const Container = styled.div` + width: 400px; + padding: 20px 40px; + overflow: hidden; +`; diff --git a/src/components/HomePage/facilityDetail/ReviewCard.tsx b/src/components/HomePage/facilityDetail/ReviewCard.tsx new file mode 100644 index 0000000..0950caa --- /dev/null +++ b/src/components/HomePage/facilityDetail/ReviewCard.tsx @@ -0,0 +1,54 @@ +import { IoMdHeart } from "react-icons/io"; +import { LikeButton } from "../Buttons"; +import styled from "@emotion/styled"; + +interface ReviewCardProps { + review: { + contents: string; + like: number; + user: string; + date: string; + }; +} +const ReviewCard: React.FC = ({ review }) => { + const handleLike = () => { + console.log("좋아요"); + }; + return ( + + +
{review.contents}
+ handleLike()}> + + {review.like} + + +
+
+ {review.user} +
+
{review.date}
+
+ + ); +}; +export default ReviewCard; +const ReviewContainer = styled.div` + padding: 0px 10px; + margin-bottom: 10px; +`; +const Review = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + margin-top: 10px; + margin-bottom: 5px; + font-weight: 300; +`; diff --git a/src/components/data/buildingData.ts b/src/components/data/buildingData.ts index dc11343..281d35e 100644 --- a/src/components/data/buildingData.ts +++ b/src/components/data/buildingData.ts @@ -59,7 +59,7 @@ export const buildingData: BuildingInfo[] = [ floor: "3", type: 1, name: "화장실", - like: 0, + like: 3, dislike: 0, reviewCount: 2, review: [ @@ -109,7 +109,7 @@ export const buildingData: BuildingInfo[] = [ floor: "7", type: 3, name: "카페트리", - like: 4, + like: 10, dislike: 2, reviewCount: 1, review: [ @@ -126,7 +126,7 @@ export const buildingData: BuildingInfo[] = [ floor: "3", type: 1, name: "화장실", - like: 3, + like: 9, dislike: 0, reviewCount: 2, review: [ diff --git a/src/components/pages/Homepage.tsx b/src/components/pages/Homepage.tsx index 9d0f29c..89a64b7 100644 --- a/src/components/pages/Homepage.tsx +++ b/src/components/pages/Homepage.tsx @@ -1,5 +1,5 @@ import styled from "@emotion/styled"; -import HomeBoard from "../HomeBoard.tsx"; +import HomeBoard from "../HomePage/HomeBoard.tsx"; import Kakaomap from "../map/Kakaomap.tsx"; import NavBar from "../nav/NavBar.tsx"; import { BuildingInfo } from "../data/buildingData.ts"; diff --git a/src/libs/axios.tsx b/src/libs/axios.tsx new file mode 100644 index 0000000..87ce826 --- /dev/null +++ b/src/libs/axios.tsx @@ -0,0 +1,19 @@ +import axios from "axios"; +const baseURL = "http://15.164.98.149:8080/v1/"; +const instance = axios.create({ + baseURL, + timeout: 15000, +}); + +instance.interceptors.request.use( + (config) => { + const token = sessionStorage.getItem("accessToken"); + if (token) { + config.headers.Authorization = `Bearer ${token}`; + } + return config; + }, + (error) => { + return Promise.reject(error); + } +); diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..0f32683 --- /dev/null +++ b/vercel.json @@ -0,0 +1,3 @@ +{ + "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] +}