Skip to content

Commit

Permalink
Merge pull request #8 from glen15/update/origin
Browse files Browse the repository at this point in the history
Update/origin
  • Loading branch information
glen15 authored Nov 3, 2021
2 parents 9378d1a + 8cfbb68 commit c049a50
Show file tree
Hide file tree
Showing 59 changed files with 2,571 additions and 366 deletions.
14 changes: 14 additions & 0 deletions client/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"aws-sdk": "^2.1017.0",
"axios": "^0.23.0",
"dotenv": "^10.0.0",
"font-awesome": "^4.7.0",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-daum-postcode": "^3.0.0",
Expand Down
8 changes: 4 additions & 4 deletions client/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ import { setLogin } from "./modules/isLogin";
import axios from "axios";
import Result from "./pages/TournamentResult";
import Tournament from "./pages/Tournament";
import EditMap from "./components/Post/EditMap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Chatroom from "./pages/Chatroom";

function App() {
const dispatch = useDispatch();
Expand All @@ -49,10 +49,10 @@ function App() {
return (
<div className="app--container">
<Router>
<Header />
{/* <Header /> */}
<Switch>
<Route path="/maptest" component={EditMap} />
<Route path="/chattest" component={Chat} />
<Route exact path="/chat" component={Chat} />
<Route path="/chat/:roomId" component={Chatroom} />
<Route exact path="/">
<Landing />
</Route>
Expand Down
18 changes: 18 additions & 0 deletions client/src/components/Chat/ChatAlert.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from "react";

const ChatAlert = ({ chatData }) => {
const { content, updatedAt } = chatData;

return (
<div className="chat--container alert">
<div className="text">{content}</div>
<div className="time">{`${new Date(updatedAt).getMonth()}-${new Date(
updatedAt
).getDate()} ${new Date(updatedAt).getHours()}:${new Date(
updatedAt
).getMinutes()}`}</div>
</div>
);
};

export default ChatAlert;
25 changes: 14 additions & 11 deletions client/src/components/Chat/ListRoom.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useEffect } from "react";
import { Link } from "react-router-dom";

const ListRoom = ({ roomData }) => {
const { id, img, nickname, content, updatedAt } = roomData;
Expand All @@ -10,18 +11,20 @@ const ListRoom = ({ roomData }) => {

return (
<li>
<div className="img--container">
<div className="img">
<img src={img} alt={nickname} />
<Link to={`chat/${id}`}>
<div className="img--container">
<div className="img">
<img src={img} alt={nickname} />
</div>
</div>
</div>
<div className="userinfo--container">
<div className="username">{nickname}</div>
<div className="lastchat">{content}</div>
</div>
<div className="date--container">
<div className="date">{getDate()}</div>
</div>
<div className="userinfo--container">
<div className="username">{nickname}</div>
<div className="lastchat">{content}</div>
</div>
<div className="date--container">
<div className="date">{getDate()}</div>
</div>
</Link>
</li>
);
};
Expand Down
29 changes: 29 additions & 0 deletions client/src/components/Chat/Message.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";

const Message = ({ chatData }) => {
const userInfo = useSelector((state) => state.userInfo);
const { userId, content, updatedAt } = chatData;
const [isMine, setIsMine] = useState(true);

useEffect(() => {
if (userInfo.userId === userId) {
setIsMine(true);
} else {
setIsMine(false);
}
}, []);

return (
<div className={`chat--container${isMine ? " mine" : ""}`}>
<div className="content--box">{content}</div>
<div className="time">{`${new Date(updatedAt).getMonth()}-${new Date(
updatedAt
).getDate()} ${new Date(updatedAt).getHours()}:${new Date(
updatedAt
).getMinutes()}`}</div>
</div>
);
};

export default Message;
89 changes: 89 additions & 0 deletions client/src/components/CreateDoc/ChooseMap.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { useEffect, useRef, useState } from "react";
import Postcode from "react-daum-postcode";

const { kakao } = window;

const ChooseMap = ({ inputValue, setInputValue }) => {
const container = useRef(null);
const addr = useRef(null);

const [isOn, setIsOn] = useState(false);

useEffect(() => {
let data = inputValue.place.split("|");
const location = new kakao.maps.LatLng(data[0], data[1]);
let map = new kakao.maps.Map(container.current, {
center: location,
}),
marker = new kakao.maps.Marker({
map,
position: location,
}),
infowindow = new kakao.maps.InfoWindow({
map,
position: new kakao.maps.LatLng(Number(data[0]) + 0.0004, data[1]),
content: `<div class="map--infowindow">${
data[3] === "null" ? data[2] : data[3]
}</div>`,
removable: true,
});
}, [inputValue.place]);

// '위도|경도|주소|빌딩이름|리스트에서 보일 주소'
const addrFinder = (data) => {
const geocoder = new kakao.maps.services.Geocoder();
addr.current.textContent = data.address;
console.log("data", data);
geocoder.addressSearch(data.address, (result, status) => {
if (status === "OK") {
console.log(result[0]);
const lat = result[0].y;
const lng = result[0].x;
const place = result[0].road_address.address_name;
const building = result[0].road_address.building_name || "null";
const region = `${result[0].road_address.region_1depth_name} ${result[0].road_address.region_2depth_name} ${result[0].road_address.region_3depth_name}`;
setInputValue({
...inputValue,
place: `${lat}|${lng}|${place}|${building}|${region}`,
});
}
});
};

return (
<div className="post--map--container">
<div className="post--map--input--container">
<div className="post--address" ref={addr}></div>
<button
onClick={() => {
setIsOn(true);
}}
>
주소찾기
</button>
</div>
{isOn ? (
<div
className="modal--backdrop"
onClick={() => {
setIsOn(false);
}}
>
<div className="modal--view postcode">
<Postcode
onComplete={(data) => {
addrFinder(data);
setIsOn(false);
}}
className="post--map--postcode"
/>
</div>
</div>
) : null}

<div className="post--map" ref={container} />
</div>
);
};

export default ChooseMap;
6 changes: 4 additions & 2 deletions client/src/components/CreateDoc/CreateCompleteModal.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useHistory } from "react-router";

export default function CreateCompleteModal({ isModalOpen, openModalHandler }) {
export default function CreateCompleteModal({ isModalOpen, docId }) {
const history = useHistory();
return (
<>
Expand All @@ -9,7 +9,9 @@ export default function CreateCompleteModal({ isModalOpen, openModalHandler }) {
<div className="modal--view">
<div>게시글 생성이 완료되었습니다</div>
<div className="modal--btnContainer">
<button onClick={() => history.replace("/main")}>확인</button>
<button onClick={() => history.replace(`post/${docId}`)}>
확인
</button>
</div>
</div>
</div>
Expand Down
14 changes: 14 additions & 0 deletions client/src/components/CreatePostBtn.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from "react";
import { Link } from "react-router-dom";

const CreatePostBtn = () => {
return (
<div className="fixedBtn create">
<Link to="/doc">
<div>생성</div>
</Link>
</div>
);
};

export default CreatePostBtn;
25 changes: 25 additions & 0 deletions client/src/components/EditDoc/EditCompleteModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { useHistory } from "react-router";

export default function EditCompleteModal({
docId,
isModalOpen,
openModalHandler,
}) {
const history = useHistory();
return (
<>
{isModalOpen ? (
<div className="modal--backdrop">
<div className="modal--view">
<div>게시글 수정이 완료되었습니다</div>
<div className="modal--btnContainer">
<button onClick={() => history.replace(`/post/${docId}`)}>
확인
</button>
</div>
</div>
</div>
) : null}
</>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,14 @@ import Postcode from "react-daum-postcode";

const { kakao } = window;

const EditMap = () => {
const EditMap = ({ inputValue, setInputValue }) => {
const container = useRef(null);
const addr = useRef(null);

const [coordinateData, setCoordinateData] = useState(
"37.5161996814031|127.075939572603|서울 송파구 올림픽로 25|서울종합운동장|서울 송파구 잠실동"
);
const [isOn, setIsOn] = useState(false);

useEffect(() => {
let data = coordinateData.split("|");
console.log(coordinateData);
let data = inputValue.place.split("|");
const location = new kakao.maps.LatLng(data[0], data[1]);
let map = new kakao.maps.Map(container.current, {
center: location,
Expand All @@ -31,7 +27,7 @@ const EditMap = () => {
}</div>`,
removable: true,
});
}, [coordinateData]);
}, [inputValue.place]);

// '위도|경도|주소|빌딩이름|리스트에서 보일 주소'
const addrFinder = (data) => {
Expand All @@ -46,15 +42,22 @@ const EditMap = () => {
const place = result[0].road_address.address_name;
const building = result[0].road_address.building_name || "null";
const region = `${result[0].road_address.region_1depth_name} ${result[0].road_address.region_2depth_name} ${result[0].road_address.region_3depth_name}`;
setCoordinateData(`${lat}|${lng}|${place}|${building}|${region}`);
setInputValue({
...inputValue,
place: `${lat}|${lng}|${place}|${building}|${region}`,
});
}
});
};

return (
<div className="post--map--container">
<div className="post--map--input--container">
<div className="post--address" ref={addr}></div>
<div className="post--address" ref={addr}>
{inputValue.place.split("|")[3] !== "null"
? inputValue.place.split("|")[3]
: inputValue.place.split("|")[2]}
</div>
<button
onClick={() => {
setIsOn(true);
Expand Down
Loading

0 comments on commit c049a50

Please sign in to comment.