Skip to content

GitLab

Commit 02264c7b authored by 우지원's avatar 우지원
Browse files

0628

parent a653751c
Show whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 02264c7b
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./App.css"; import "./App.css";
import HomeProfile from './components/Home/HomeProfile';
import RoomList from './components/Home/RoomList';
import HomeGuestPage from "./pages/HomeGuestPage"; import HomeGuestPage from "./pages/HomeGuestPage";
import HomeUserPage from "./pages/HomeUserPage"; import HomeUserPage from "./pages/HomeUserPage";
import ProfilePage from "./pages/ProfilePage"; import ProfilePage from "./pages/ProfilePage";
...@@ -14,6 +17,7 @@ function App() { ...@@ -14,6 +17,7 @@ function App() {
<Route exact path="/user" component={HomeUserPage} /> <Route exact path="/user" component={HomeUserPage} />
<Route path="/profile/:id" component={ProfilePage} /> <Route path="/profile/:id" component={ProfilePage} />
<Route path="/Room/:id/:channel" component={RoomPage} /> <Route path="/Room/:id/:channel" component={RoomPage} />
<Route path="/Room" component={RoomList} />
</Switch> </Switch>
{/* </AuthProvider> */} {/* </AuthProvider> */}
</Router> </Router>
......
client/src/components/Home/AddRoom.js
View file @ 02264c7b
import React, { useState } from 'react'
const AddRoom = () => { const AddRoom = () => {
return ( return (
<div> <form className="m-3">
AddRoom Component 입니다. <div className="row justify-content-around">
<div className="col">
<h4>참여중인 방목록</h4>
</div>
<button type="button" className="col-2" data-bs-toggle="modal" data-bs-target="#myModal" style={{ backgroundColor: "#FCF4FF", borderColor: "#FCF4FF" }} >
+ </button>
</div>
<div className="modal" id="myModal" tabindex="-1" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<div className="row justify-content-around mt-4 mb-4">
<div className="col-5">
<button type="button" className="p-4" data-bs-toggle="modal" data-bs-target="#joinModal" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#C4C4C4", backgroundColor: "#C4C4C4", padding: '10px' }}>
방참여하기</button>
</div>
<div className="col-5">
<button type="button" className="p-4" data-bs-toggle="modal" data-bs-target="#makeModal" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#C4C4C4", backgroundColor: "#C4C4C4", padding: '10px' }}>
방생성하기</button>
</div>
</div>
</div>
</div>
</div>
</div>
{/* 방참여하기 모달 */}
<div className="modal" id="joinModal" tabindex="-1" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div>방참여하기</div>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<div className="input-group mb-3">
<input type="text" className="form-control" placeholder="참여코드를 입력하세요" aria-label="참여코드를 입력하세요" aria-describedby="basic-addon1" />
</div>
<div className="modal-footer">
<button type="button" className="btn-primary" style={{ borderStyle: "solid", borderRadius: "5px", padding: '15px' }} >확인</button>
</div>
</div>
</div>
</div>
</div>
{/* 방생성하기 모달 */}
<div className="modal" id="makeModal" tabindex="-1" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div>방생성하기</div>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<h5>방프로필사진</h5>
<div class="filebox mb-4">
<input type="file" id="ex_filename" class="upload-hidden" />
</div>
<h5>방이름</h5>
<div className="input-group">
<input type="text" className="form-control" placeholder="방이름을 입력해주세요" aria-label="방이름 입력해주세요" aria-describedby="basic-addon1" />
</div>
<div className="modal-footer">
<button type="button" className="btn-primary" style={{ borderStyle: "solid", borderRadius: "5px", padding: '15px' }} >생성</button>
</div>
</div>
</div>
</div>
</div>
{/* 방리스트 */}
<div className="mb-5">
<div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA_LOGO.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/BORA.png" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div className="row justify-content-start m-2 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<div className="col-2" style={{ width: "37px", height: "37px" }}><img src="/image2.jpg" className="rounded-circle" style={{ width: "37px", height: "37px" }} /></div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
</div> </div>
) </form >
}; );
}
export default AddRoom; export default AddRoom;
client/src/components/Home/HomeProfile.js
View file @ 02264c7b
import React from 'react'
const HomeProfile = () => { const HomeProfile = () => {
return ( return (
<div> <form className="flex-column align-items-center justify-content-center m-2">
HomeProfile Component 입니다. <div className="d-flex justify-content-center">
<img src="/image2.jpg" className="rounded-circle" style={{ width: "157px", height: "157px", borderStyle: "solid", borderColor: "#262626" }} />
</div> </div>
<h1 className="d-flex justify-content-center"> CHERRY </h1>
<h2 className="d-flex justify-content-center"> #0805 </h2>
</form>
) )
}; };
......
client/src/components/Home/Line.js 0 → 100644
View file @ 02264c7b
import React from 'react'
const Line = () => {
return (
<div style={{ backgroundColor: "#262626", width: "auto", height: "2px" }} >
</div>
)
};
export default Line;
\ No newline at end of file
client/src/components/Home/RoomList.js
View file @ 02264c7b
import AddRoom from "./AddRoom"; import AddRoom from "./AddRoom";
import HomeProfile from "./HomeProfile";
import RoomSingle from "./RoomSingle"; import RoomSingle from "./RoomSingle";
import Title from "./Title";
import Line from "./Line";
import { Form } from 'react-bootstrap';
const RoomList = () => { const RoomList = () => {
return ( return (
<div> <Form style={{ backgroundColor: "#FCF4FF" }}>
RoomList Component 입니다. <Title />
<Line />
<HomeProfile />
<Line />
<AddRoom /> <AddRoom />
<RoomSingle /> {/* <Line />
</div> <RoomSingle /> */}
</Form>
); );
}; };
......
client/src/components/Home/Title.js 0 → 100644
View file @ 02264c7b
import React from 'react'
const Title = () => {
return (
<form style={{ backgroundColor: "#FCF4FF" }} className="flex-column align-items-center justify-content-center p-2" >
<div className="d-flex justify-content-center">
<img src="/BORA.png" style={{ width: "160px" }} />
</div>
</form>
)
};
/* const Title = () => {
return (
<form style={{ backgroundColor: "#FCF4FF" }} className="flex-column align-items-center justify-content-center p-2" >
<div className="d-flex justify-content-center">
<img src="/image2.jpg" className="rounded-circle" style={{ width: "157px", height: "157px", borderStyle: "solid", borderColor: "#262626" }} />
<img src='/BORA.png' style={{ width: "160px" }} />
</div>
</form>
)
}; */
export default Title;
client/src/index.js
View file @ 02264c7b
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom'; import ReactDOM from "react-dom";
import './index.css'; import "./index.css";
import 'bootstrap' import "bootstrap";
import App from './App'; import 'bootstrap/dist/css/bootstrap.min.css'
import reportWebVitals from './reportWebVitals'; import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root') document.getElementById("root")
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment