diff --git a/package-lock.json b/package-lock.json index e95cf46..4ea1fc5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@types/node": "^16.18.76", "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", - "axios": "^1.6.7", + "axios": "^1.6.8", "dotenv": "^16.4.1", "path": "^0.12.7", "react": "^18.2.0", @@ -5213,11 +5213,11 @@ } }, "node_modules/axios": { - "version": "1.6.7", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", - "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==", + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", "dependencies": { - "follow-redirects": "^1.15.4", + "follow-redirects": "^1.15.6", "form-data": "^4.0.0", "proxy-from-env": "^1.1.0" } @@ -9631,9 +9631,9 @@ } }, "node_modules/follow-redirects": { - "version": "1.15.5", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", - "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", "funding": [ { "type": "individual", diff --git a/package.json b/package.json index dc3f351..a7732b9 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "@types/node": "^16.18.76", "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", - "axios": "^1.6.7", + "axios": "^1.6.8", "dotenv": "^16.4.1", "path": "^0.12.7", "react": "^18.2.0", diff --git a/src/Community.tsx b/src/Community.tsx index 6fae3dc..c25b9bc 100644 --- a/src/Community.tsx +++ b/src/Community.tsx @@ -181,7 +181,7 @@ function Community() { - + {Community.map((text:string, index:number) => ( diff --git a/src/Main.tsx b/src/Main.tsx index 06313db..1556056 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -1,251 +1,228 @@ -// Main 컴포넌트 -import React, { useEffect, useState } from 'react'; -import { Route, Routes ,Link } from 'react-router-dom'; +import { PRIMARY_COLOR_BLUE } from "../src/constants"; +import MainContents from "./MainContents"; +import MainContents2 from "./MainContents2"; +import React, { useEffect, useState } from "react"; +import { Route, Routes, Link } from "react-router-dom"; import { BiChevronLeft, BiChevronRight } from "react-icons/bi"; -import styled from 'styled-components' -import { PRIMARY_COLOR_BLUE} from "../src/constants"; -import MainContents from './MainContents'; -import MainContents2 from './MainContents2'; +import styled from "styled-components"; +import axios from "axios"; const MainContainer = styled.div<{ paddingLeft: number }>` -padding-top: 70px; -margin-left: 0; /* 기본값 */ -height: 855px; -padding-left: ${props => props.paddingLeft}px; + padding-top: 70px; + margin-left: 0; + height: 855px; + padding-left: ${(props) => props.paddingLeft}px; `; -const Top = styled.div` -width:100%; -display:flex; -justify-content:center; -align-items: center; -height:36%; +const Top = styled.div` + width: 100%; + display: flex; + justify-content: center; + align-items: center; + height: 36%; `; + const TopButton = styled.button` -background-color: ${PRIMARY_COLOR_BLUE}; -color:white; -border-radius: 15px; -border:0px; -width:40px; -height:40px; -display:flex; -align-items: center; -justify-content: center; + background-color: ${PRIMARY_COLOR_BLUE}; + color: white; + border-radius: 15px; + border: 0px; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; `; -const Slide =styled.div` -height:400px; -width:1200px; -flex-direction: column; -display:flex; -align-items: center; -justify-content: center; +const Slide = styled.div` + height: 400px; + width: 1200px; + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; `; -const SlideImg=styled.img` -width:80%; -height:60%; -`; -const Buttons=styled.div` -margin-top:20px; -display:flex; -width:150px; -justify-content:space-around; +const SlideImg = styled.img` + width: 80%; + height: 60%; `; +const Buttons = styled.div` + margin-top: 20px; + display: flex; + width: 150px; + justify-content: space-around; +`; const ButtonsButton = styled.div` - - width: 10px; + width: 10px; height: 10px; - transform: translateX(-50%); - background-color:#b9b9b9; - + transform: translateX(-50%); + background-color: #b9b9b9; border-radius: 50%; z-index: 1; cursor: pointer; -&.active { - background-color: black; - -} + &.active { + background-color: black; + } `; -const Bottom=styled.div` -height:65%; +const Bottom = styled.div` + height: 65%; `; -const BottomInput=styled.div` -padding-left:90px; -`; -const BottomInputIn=styled.div` -display:flex; -align-items: center; -justify-content: center; -height:30px; -width:220px; -border-right: 50px; -border-radius: 25px; -background-color: ${PRIMARY_COLOR_BLUE}; -`; -const BottomInputInput=styled.input` -border-radius: 25px; -width:80%; -height:60%; -border:none; +const BottomCheck = styled.div` + display: flex; + align-items: center; + justify-content: center; `; - - -const BottomCheck=styled.div` -display:flex; -align-items: center; -justify-content: center; - +const BottomCheckbox = styled.div` + width: 600px; + height: 45px; + display: flex; + align-items: center; + justify-content: center; `; -const BottomCheckbox=styled.div` -width:600px; -height:45px; -display:flex; -align-items: center; -justify-content: center; +const BottomCheckLink = styled(Link)` + width: 35px; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + background-color: white; + border: 1px solid ${PRIMARY_COLOR_BLUE}; + color: ${PRIMARY_COLOR_BLUE}; + height: 35px; + + &:hover { + background-color: ${PRIMARY_COLOR_BLUE}; + color: white; + } `; -const BottomCheckLink=styled(Link)` -width:35px; -display:Flex; -align-items:center; -justify-content:center; -text-decoration:none; -background-color: white; -border:1px solid ${PRIMARY_COLOR_BLUE}; -color: ${PRIMARY_COLOR_BLUE}; -height:35px; - -&:hover { - background-color:${PRIMARY_COLOR_BLUE}; - color:white; -} -`; -const BottomCheckButton=styled.button` -background-color: ${PRIMARY_COLOR_BLUE}; -border:1px solid ${PRIMARY_COLOR_BLUE}; -display:flex; -align-items: center; -justify-content: center; -width:35px; -height:37px; - - -color: white; +const BottomCheckButton = styled.button` + background-color: ${PRIMARY_COLOR_BLUE}; + border: 1px solid ${PRIMARY_COLOR_BLUE}; + display: flex; + align-items: center; + justify-content: center; + width: 35px; + height: 37px; + color: white; `; interface MainProps { - isSidebarOpen: boolean; + isSidebarOpen: boolean; } -const Main: React.FC = ({ isSidebarOpen }) => { - const [currentSlide, setCurrentSlide] = useState(0); - const [paddingLeft, setPaddingLeft] = useState(0); - - const slides = ["예시1", "예시2", "예시3"]; - const images = [ - "https://www.lge.co.kr/kr/upload/admin/storyThumbnail/tvc_codezero_thumb[20230607_105950].jpg", - "https://company.eduwill.net/img/promotion/20230331154337ef62af81-9b54-4e6f-8f86-044e3e55f5fc.png", - "https://www.samchully.co.kr/upload/pr/paperad/l3tppifzgysi7kp3k8re.png" - ]; - - //예시 데이터 덩어리 나중에 교체 - - useEffect(() => { - const interval = setInterval(() => { - nextSlide(); - }, 3000); - return () => clearInterval(interval); - }, [currentSlide]);//3초뒤 슬라이드 넘어가게 만듬 - - useEffect(() => { - const newPaddingLeft = isSidebarOpen ? 200 : 0; - setPaddingLeft(newPaddingLeft); - }, [isSidebarOpen]);//메인페이지 200줄이기 - - - - const nextSlide = () => { - setCurrentSlide(prevSlide => (prevSlide === slides.length - 1 ? 0 : prevSlide + 1)); - }; - const prevSlide = () => {//전 슬라이드로 가게 - setCurrentSlide(prevSlide => (prevSlide === 0 ? slides.length - 1 : prevSlide - 1)); - }; - - const goToSlide = (index: number) => {//해당 슬라이드 번호로 이동 - setCurrentSlide(index); - }; - - - - - - return ( - - - - - - - - - - {slides.map((slide, index) => ( - goToSlide(index)}> - - ))} - - - - - - - - - - - - - - - - } /> - } /> - } /> - } /> - } /> - - - - - - - 1 - 2 - 3 - 4 - 5 - - - - - - - - ); +interface MainDB { + id: number; + images: string; } -export default Main; - - - - +const Main: React.FC = ({ isSidebarOpen }) => { + const [currentSlide, setCurrentSlide] = useState(0); + const [paddingLeft, setPaddingLeft] = useState(0); + const [main, setMain] = useState([]); + + useEffect(() => { + axios + .get("http://localhost:3001/Main") + .then((response) => { + setMain(response.data); + }) + .catch((error) => { + console.log(error); + }); + }, []); + + useEffect(() => { + const interval = setInterval(() => { + nextSlide(); + }, 3000); + return () => clearInterval(interval); + }, [currentSlide]); + + useEffect(() => { + const newPaddingLeft = isSidebarOpen ? 200 : 0; + setPaddingLeft(newPaddingLeft); + }, [isSidebarOpen]); + + const nextSlide = () => { + setCurrentSlide((prevSlide) => + prevSlide === main.length - 1 ? 0 : prevSlide + 1 + ); + }; + const prevSlide = () => { + setCurrentSlide((prevSlide) => + prevSlide === 0 ? main.length - 1 : prevSlide - 1 + ); + }; + + const goToSlide = (index: number) => { + setCurrentSlide(index); + }; + + return ( + + + + + + + 0 ? main[currentSlide].images : ""} + alt="Slide" + /> + + + {main.map((_, id) => ( + goToSlide(id)} + > + ))} + + + + + + + + + + } /> + } /> + } /> + } /> + } /> + + + + + + + + 1 + 2 + 3 + 4 + 5 + + + + + + + + ); +}; +export default Main; diff --git a/src/MainContents.tsx b/src/MainContents.tsx index 1147349..5dc8b66 100644 --- a/src/MainContents.tsx +++ b/src/MainContents.tsx @@ -1,93 +1,95 @@ -import React from 'react'; -import styled from 'styled-components' -const BottomComponent=styled.div` -box-sizing: border-box; -max-width:100%; -display:flex; -flex-wrap: wrap; -height:90%; +import styled from "styled-components"; +import axios from "axios"; +import React, { useState, useEffect } from "react"; +const BottomComponent = styled.div` + box-sizing: border-box; + max-width: 100%; + display: flex; + flex-wrap: wrap; + height: 90%; `; -const BottomComponent1=styled.div` -box-sizing: border-box; -width:25%; -align-items: center; -justify-content: center; -display:flex; +const BottomComponent1 = styled.div` + box-sizing: border-box; + width: 25%; + align-items: center; + justify-content: center; + display: flex; -height:50%;`; -const BottomComponent1Caffee=styled.div` -border-radius: 25px; + height: 50%; +`; +const BottomComponent1Caffee = styled.div` + border-radius: 25px; -width:250px; + width: 250px; -height:200px; -box-shadow: 5px 5px 5px 5px gray; -&:hover{ - height:220px; - width:270px; - transition: 0.5s; -} + height: 200px; + box-shadow: 5px 5px 5px 5px gray; + &:hover { + height: 220px; + width: 270px; + transition: 0.5s; + } `; -const BottomComponent1CaffeeImg=styled.div` -border-style: solid; -border: 0; -border-radius:25px 25px 0px 0px; -background-position: center; -background-repeat: repeat; -background-size:cover; -box-sizing: border-box; +const BottomComponent1CaffeeImg = styled.div` + border-style: solid; + border: 0; + border-radius: 25px 25px 0px 0px; + background-position: center; + background-repeat: repeat; + background-size: cover; + box-sizing: border-box; -width:100%; -height:85%; + width: 100%; + height: 85%; `; -const BottomComponent1CaffeeText=styled.div` -height:15%; -display:flex; -justify-content: space-around; -border: 0; +const BottomComponent1CaffeeText = styled.div` + height: 15%; + display: flex; + justify-content: space-around; + border: 0; + + border-radius: 0px 0px 25px 25px; +`; -border-radius: 0px 0px 25px 25px;`; +interface Ct { + title: string; + img: string; + id: string; +} function MainContents() { - const coffee=[ - "https://a.cdn-hotels.com/gdcs/production161/d1403/b5f1876a-9e64-4d13-ab7a-a0fd2cbc5224.jpg", - "https://img.freepik.com/premium-photo/generative-ai-a-large-bright-cafe-environment-with-chairs-concrete-walls-and-a-hardwood-floor_28914-19636.jpg", - "https://i.namu.wiki/i/5FGUIiyTGl3EkaSlnnRnmoAsPBMkL8w1tVdj5pgDOoydk2T0brSqYsWyLgGqyELwn5oP8HWRhF8A-p8ZyN4FtQ.webp", - "https://cdn.imweb.me/thumbnail/20230522/31017371829ad.jpg", - "https://www.qplace.kr/content/images/2022/10/No.3185------.jpg", - "https://media.istockphoto.com/id/1286692956/ko/%EC%82%AC%EC%A7%84/%EC%9D%98%EC%9E%90%EC%99%80-%ED%85%8C%EC%9D%B4%EB%B8%94%EC%9D%B4-%EC%9E%88%EB%8A%94-%EB%B9%88-%EC%B9%B4%ED%8E%98-%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4.jpg?s=612x612&w=0&k=20&c=dgWlZUPam-dJb_bRpXqCPUyRd-UWaYxCKiFkJT4fYSQ=", - "https://gyeongju.go.kr/upload/content/thumb/20200429/AF0FBCACF6E141DEBAD30FDB6082D979.jpg", - "https://media.istockphoto.com/id/1428594094/ko/%EC%82%AC%EC%A7%84/%EB%82%98%EB%AC%B4-%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%A4%ED%94%BC-%EB%A9%94%EC%9D%B4%EC%BB%A4-%ED%8C%A8%EC%8A%A4%ED%8A%B8%EB%A6%AC-%EB%B0%8F-%ED%8E%9C%EB%8D%98%ED%8A%B8-%EC%A1%B0%EB%AA%85%EC%9D%B4%EC%9E%88%EB%8A%94-%EB%B9%88-%EC%BB%A4%ED%94%BC-%EC%88%8D-%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4.jpg?s=612x612&w=0&k=20&c=5bHJXVEZ4D9zsN_ZV-XVZsTxwxL5GdUOo5D0PPs3fsI=" - ]; - const local = [ - "강서", - "인천", - "김포", - "당정", - "홍대", - "이태원", - "강남", - "판교" - - ]; - return ( - - {[...Array(8)].map((_, index) => ( - - - - - - -
{`카페 ${index + 1}`}
-
{local[index]}
- - - - ))} + const [MainCt, setMainCt] = useState(); + + useEffect(() => { + axios + .get("http://localhost:3001/MainCt") + .then((response) => { + setMainCt(response.data); + }) + .catch((error) => { + console.log(error); + }); + }, []); + + return ( + + {MainCt?.map((ct: Ct) => ( + + + + + +
{`카페 ${ct.id}`}
+
{ct.title}
+ + + + ))} - ); + ); } -export default MainContents; \ No newline at end of file +export default MainContents; diff --git a/src/MyPage.tsx b/src/MyPage.tsx index 83e2479..b730950 100644 --- a/src/MyPage.tsx +++ b/src/MyPage.tsx @@ -1,191 +1,206 @@ -import React from 'react'; -import styled from 'styled-components'; -import { Link } from 'react-router-dom'; -import { AiOutlineUser } from 'react-icons/ai'; -import { PRIMARY_COLOR_BLUE} from "../src/constants"; +import React, { useState, useEffect } from "react"; +import axios from "axios"; +import styled from "styled-components"; +import { Link } from "react-router-dom"; +import { AiOutlineUser } from "react-icons/ai"; +import { PRIMARY_COLOR_BLUE } from "../src/constants"; const MyPageContaine = styled.div` - width: 100%; - height: 880px; - display: flex; - align-items: center; - justify-content: center; + width: 100%; + height: 880px; + display: flex; + align-items: center; + justify-content: center; `; const MyPageContent = styled.div` - box-sizing: border-box; - margin-top: 260px; - background-color: ${PRIMARY_COLOR_BLUE}; - width: 50%; - height: 1000px; + box-sizing: border-box; + margin-top: 260px; + background-color: ${PRIMARY_COLOR_BLUE}; + width: 50%; + height: 1000px; `; const MyPageTop = styled.div` - width: 100%; - height: 300px; - display: flex; - align-items: center; - justify-content: space-around; + width: 100%; + height: 300px; + display: flex; + align-items: center; + justify-content: space-around; `; -const MPTphoto = styled.div` -width: 150px; -height: 150px; -border-radius: 50%; -display: flex; -align-items: center; -justify-content: center; -background-color: white; +const MPTphoto = styled.div` + width: 150px; + height: 150px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background-color: white; +`; +const MPTname = styled.div` + width: 210px; + border-radius: 5px; + height: 30px; + color: ${PRIMARY_COLOR_BLUE}; + display: Flex; + align-items: center; + justify-content: center; + background-color: white; +`; + +const MPTbutton = styled.button` + border-radius: 25px; + border: none; + height: 30px; + width: 150px; + background-color: white; + box-shadow: 3px 3px 3px 3px gray; + color: ${PRIMARY_COLOR_BLUE}; + margin-bottom: 20px; +`; +const MPBfriendContent = styled.div` + background-color: white; + width: 750px; + height: 110px; + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 25px; + padding-left: 25px; + padding-right: 25px; + border-radius: 25px; + color: ${PRIMARY_COLOR_BLUE}; + box-shadow: 3px 3px 3px 3px gray; `; -const MPTname = styled.div` -width: 210px; -border-radius:5px; -height: 30px; -color: ${PRIMARY_COLOR_BLUE}; -display:Flex; -align-items:center; -justify-content:center; -background-color: white;`; - - - - - const MPTbutton= styled.button` - border-radius: 25px; - border: none; - height: 30px; - width:150px; - background-color:white; - box-shadow: 3px 3px 3px 3px gray; - color: ${PRIMARY_COLOR_BLUE}; - margin-bottom:20px; - - `; - const MPBfriendContent = styled.div` - - background-color: white; - width: 750px; - height: 110px; - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 25px; - padding-left: 25px; - padding-right: 25px; - border-radius: 25px; - color: ${PRIMARY_COLOR_BLUE}; - box-shadow: 3px 3px 3px 3px gray; - `; const MyPageBottom = styled.div` - box-sizing: border-box; - display: flex; - flex-direction: column; - justify-content: center; - height: 600px; - width: 85%; - margin: 70px; - `; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + height: 600px; + width: 85%; + margin: 70px; +`; const MPBwrite = styled(Link)` - width: 200px; - height: 50px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 25px; - margin-bottom: 25px; - background-color: white; - border:none; - text-decoration:none; - color: ${PRIMARY_COLOR_BLUE}; - box-shadow: 3px 3px 3px 3px gray; + width: 200px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 25px; + margin-bottom: 25px; + background-color: white; + border: none; + text-decoration: none; + color: ${PRIMARY_COLOR_BLUE}; + box-shadow: 3px 3px 3px 3px gray; `; -const MPBfriendContentButton = styled.button` - - height: 40px; - width: 80px; - border-radius: 15px; - background-color: #d13c3c; - color:white; - border: none; - - `; -const MPBfriendPage=styled(Link)` - height: 40px; - width: 90px; - display: flex; - align-items:center; - justify-content: center; - border-radius: 15px; - margin-right:15px; - color: white; - border:none; - text-decoration:none; - background-color: ${PRIMARY_COLOR_BLUE}; - - +const MPBfriendContentButton = styled.button` + height: 40px; + width: 80px; + border-radius: 15px; + background-color: #d13c3c; + color: white; + border: none; `; - -const MPBfriend=styled.div` -overflow-y:auto; - -`; -const MPBTopBUTTON=styled.div` -display:Flex; -flex-direction:column; +const MPBfriendPage = styled(Link)` + height: 40px; + width: 90px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 15px; + margin-right: 15px; + color: white; + border: none; + text-decoration: none; + background-color: ${PRIMARY_COLOR_BLUE}; `; -const MPTtag =styled.div` -color:white; +const MPBfriend = styled.div` + overflow-y: auto; + width: 850px; + height: 420px; + &::-webkit-scrollbar { + width: 15px; + height: 8px; + border-radius: 6px; + } + &::-webkit-scrollbar-thumb { + background-color: white; + border-radius: 6px; + } `; -const MPBbottomBUTTON=styled.div` -display:flex; +const MPBTopBUTTON = styled.div` + display: Flex; + flex-direction: column; `; -const MyPage = () => { - const friend = [ - "테스트하는 인간", - "늙은 사람", - "강서쪽 사람", - ]; - -const friendDelete=()=>{ -alert("삭제되었습니다."); +const MPTtag = styled.div` + color: white; +`; +const MPBbottomBUTTON = styled.div` + display: flex; +`; +interface Frined { + id: number; + name: string; } +const MyPage = () => { + const friendDelete = () => { + alert("삭제되었습니다."); + }; + const [friend, setFriend] = useState(); - return ( - - - - -
- 이름: 아무이름 - #강서 #프론트엔드 #웹 개발 -
- - 내 정보 수정 - 해시태그 수정 - - - - 내가 쓴 글 목록 - -
내 친구들
- {[...Array(3)].map((_, index) => ( - -
{friend[index]}
- - 친구 페이지 - 친구 삭제 - - -))} - - - - - - ); -} + useEffect(() => { + axios + .get("http://localhost:3001/MyPage") + .then((response) => { + setFriend(response.data); + }) + .catch((error) => { + console.log(error); + }); + }, []); + + return ( + + + + + + +
+ 이름: 아무이름 + #강서 #프론트엔드 #웹 개발 +
+ + 내 정보 수정 + 해시태그 수정 + + + + 내가 쓴 글 목록 +
내 친구들
+ + {friend?.map((fr) => ( + +
{fr.name}
+ + 친구 페이지 + + 친구 삭제 + + + + ))} + + + + + ); +}; export default MyPage; diff --git a/src/constants.tsx b/src/constants.tsx index 2f38ee9..df6a347 100644 --- a/src/constants.tsx +++ b/src/constants.tsx @@ -1,4 +1,3 @@ - export const PRIMARY_COLOR_SKY = "#b7c9e2"; export const PRIMARY_COLOR_WHITE = "#f8f5f1"; -export const PRIMARY_COLOR_BLUE = "#7ba1da"; \ No newline at end of file +export const PRIMARY_COLOR_BLUE = "#7ba1da"; diff --git a/src/json-server/db.json b/src/json-server/db.json new file mode 100644 index 0000000..ece4be1 --- /dev/null +++ b/src/json-server/db.json @@ -0,0 +1,73 @@ +{ + "MyPage": [ + { + "id": 1, + "name": "테스트하는 인간" + }, + { + "id": 2, + "name": "늙은 사람" + }, + { + "id": 3, + "name": "강서쪽 사람" + } + ], + + "Main": [ + { + "id": 1, + "images": "https://www.lge.co.kr/kr/upload/admin/storyThumbnail/tvc_codezero_thumb[20230607_105950].jpg" + }, + { + "id": 2, + "images": "https://company.eduwill.net/img/promotion/20230331154337ef62af81-9b54-4e6f-8f86-044e3e55f5fc.png" + }, + { + "id": 3, + "images": "https://www.samchully.co.kr/upload/pr/paperad/l3tppifzgysi7kp3k8re.png" + } + ], + "MainCt": [ + { + "id": "1", + "title": "강서", + "img": "https://a.cdn-hotels.com/gdcs/production161/d1403/b5f1876a-9e64-4d13-ab7a-a0fd2cbc5224.jpg" + }, + { + "id": "2", + "title": "인천", + "img": "https://img.freepik.com/premium-photo/generative-ai-a-large-bright-cafe-environment-with-chairs-concrete-walls-and-a-hardwood-floor_28914-19636.jpg" + }, + { + "id": "3", + "title": "김포", + "img": "https://i.namu.wiki/i/5FGUIiyTGl3EkaSlnnRnmoAsPBMkL8w1tVdj5pgDOoydk2T0brSqYsWyLgGqyELwn5oP8HWRhF8A-p8ZyN4FtQ.webp" + }, + { + "id": "4", + "title": "당정", + "img": "https://cdn.imweb.me/thumbnail/20230522/31017371829ad.jpg" + }, + { + "id": "5", + "title": "홍대", + "img": "https://www.qplace.kr/content/images/2022/10/No.3185------.jpg" + }, + { + "id": "6", + "title": "이태원", + "img": "https://media.istockphoto.com/id/1286692956/ko/%EC%82%AC%EC%A7%84/%EC%9D%98%EC%9E%90%EC%99%80-%ED%85%8C%EC%9D%B4%EB%B8%94%EC%9D%B4-%EC%9E%88%EB%8A%94-%EB%B9%88-%EC%B9%B4%ED%8E%98-%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4.jpg?s=612x612&w=0&k=20&c=dgWlZUPam-dJb_bRpXqCPUyRd-UWaYxCKiFkJT4fYSQ=" + }, + { + "id": "7", + "title": "강남", + "img": "https://gyeongju.go.kr/upload/content/thumb/20200429/AF0FBCACF6E141DEBAD30FDB6082D979.jpg" + }, + { + "id": "8", + "title": "판교", + "img": "https://media.istockphoto.com/id/1428594094/ko/%EC%82%AC%EC%A7%84/%EB%82%98%EB%AC%B4-%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%A4%ED%94%BC-%EB%A9%94%EC%9D%B4%EC%BB%A4-%ED%8C%A8%EC%8A%A4%ED%8A%B8%EB%A6%AC-%EB%B0%8F-%ED%8E%9C%EB%8D%98%ED%8A%B8-%EC%A1%B0%EB%AA%85%EC%9D%B4%EC%9E%88%EB%8A%94-%EB%B9%88-%EC%BB%A4%ED%94%BC-%EC%88%8D-%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4.jpg?s=612x612&w=0&k=20&c=5bHJXVEZ4D9zsN_ZV-XVZsTxwxL5GdUOo5D0PPs3fsI=" + } + ] +}