Merge pull request #11 from GDSC-snowflowerthon/feature/3-mypage

Feature/3 mypage

src/pages/MyPage/ChatList/ChatList.css

@@ -0,0 +1,71 @@
+
+.title-chat{
+  color: #ffffff;
+  font-size: 26.245px;
+  font-weight: 800;
+  margin: 40px 0 40px 10px;
+}
+
+
+#container1{
+  width: 360px;
+  background-color:#49BEB7;
+}
+.box1{
+  box-sizing: border-box;
+  width: 330px;
+  height: 100px;
+  border-radius: 19px;
+  background: #FFF;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  margin: 25px;
+  font-size: 16px;
+  margin-bottom: 5px;
+  line-height: 15px;
+  padding: 20px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.write-button{
+  box-sizing: border-box;
+  float: right;
+  margin: 40px;
+  margin-top: 70px;
+  width: 140px;
+  height: 50px;
+  border-radius: 30px;
+  font-size: 16px;
+  color: #fff;
+  background: #085F63;
+  box-shadow: 0px 16px 48px 0px rgba(0, 0, 0, 0.22);
+  padding-bottom: 10px;
+}
+
+.write-icon {
+  width: 30px;
+  height: 30px;
+}
+
+
+.sButton{
+  background-color: #085F63;
+  border-radius: 20px;
+  margin-left: 20px;
+}
+
+.img1{
+  width: 70px;
+  height: 70px;
+}
+.title1{
+  font-size: 16px;
+}
+.content1{
+  color: #15A196;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: -0.408px;
+}

src/pages/MyPage/ChatList/ChatList.jsx

@@ -0,0 +1,55 @@
+//매칭 완료된 채팅방 목록
+import "./ChatList.css"
+
+export default function CheckList(){
+  return(
+    <>
+
+    <div id="container1">
+      <h3 className="title-chat">참여중인 채팅방</h3>
+
+      <div className='box1'>
+        <div className='text-container'>
+          <p className='title1'>글 제목~~~~</p>
+          <div className='content1'>
+            <p>내용~~~~~~~~~~~~~~~</p>
+          </div>
+        </div>
+        <img className="img1" src="./CheckRecord-img.png" alt='눈사진'></img>
+      </div>
+
+      <div className='box1'>
+        <div className='text-container'>
+          <p className='title1'>글 제목~~~~</p>
+          <div className='content1'>
+            <p>내용~~~~~~~~~~~~~~~</p>
+          </div>
+        </div>
+        <img className="img1" src="./CheckRecord-img.png" alt='눈사진'></img>
+      </div>
+
+      <div className='box1'>
+        <div className='text-container'>
+          <p className='title1'>글 제목~~~~</p>
+          <div className='content1'>
+            <p>내용~~~~~~~~~~~~~~~</p>
+          </div>
+        </div>
+      </div>
+
+      <div className='box1'>
+        <div className='text-container'>
+          <p className='title'>글 제목~~~~</p>
+          <div className='content1'>
+            <p>내용~~~~~~~~~~~~~~~</p>
+          </div>
+        </div>
+      </div>
+
+
+
+    </div>
+
+    </>
+  );
+}

src/pages/MyPage/CheckRecord/CheckRecord.css

@@ -0,0 +1,74 @@
+
+.container2{
+  width: 360px;
+  background-color:#49BEB7;
+}
+.box2{
+  box-sizing: border-box;
+  width: 330px;
+  height: 100px;
+  border-radius: 19px;
+  background: #FFF;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  margin: 25px;
+  font-size: 16px;
+  margin-bottom: 5px;
+  line-height: 15px;
+  padding: 20px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+
+.sButton{
+  background-color: #085F63;
+  border-radius: 20px;
+  margin-left: 20px;
+}
+
+.img2{
+  width: 70px;
+  height: 70px;
+}
+.title2{
+  font-size: 16px;
+}
+.content2{
+  color: #15A196;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: -0.408px;
+}
+
+.write-button2{
+  box-sizing: border-box;
+  float: right;
+  margin-top: 70px;
+  margin-bottom: 30px;
+  width: 173px;
+  height: 68px;
+  border-radius: 30px;
+  border: none;
+  font-size: 20px;
+  font-weight: 400;
+line-height: 24px;
+  color: #fff;
+  background: #085F63;
+  box-shadow: 0px 16px 48px 0px rgba(0, 0, 0, 0.22);
+  padding: 16px;
+  display: flex;
+justify-content: center;
+align-items: flex-start;
+}
+
+.write-icon2 {
+  width: 30px;
+  height: 30px;
+  margin-top: 2px;
+}
+.write-button2 p {
+ margin-top: 7px;
+ margin-right: 4px;
+}

src/pages/MyPage/CheckRecord/CheckRecord.jsx

@@ -0,0 +1,59 @@
+
+import "./CheckRecord.css"
+import SearchBar from './SearchBar';
+
+export default function CheckRecord(){
+  return(
+    <div className='container2'>
+      <SearchBar id="search"/>
+
+      <div className='box2'>
+        <div className='text-container'>
+          <p className='title2'>글 제목~~~~</p>
+          <div className='content2'>
+            <p>내용~~~~~~~~~~~~~~~</p>
+          </div>
+        </div>
+        <img className="img2" src="./CheckRecord-img.png" alt='눈사진'></img>
+      </div>
+
+      <div className='box2'>
+        <div className='text-container'>
+          <p className='title2'>글 제목~~~~</p>
+          <div className='content2'>
+            <p>내용~~~~~~~~~~~~~~~</p>
+          </div>
+        </div>
+        <img className="img2" src="./CheckRecord-img.png" alt='눈사진'></img>
+      </div>
+
+      <div className='box2'>
+        <div className='text-container'>
+          <p className='title2'>글 제목~~~~</p>
+          <div className='content2'>
+            <p>내용~~~~~~~~~~~~~~~</p>
+          </div>
+        </div>
+      </div>
+
+      <div className='box2'>
+        <div className='text-container'>
+          <p className='title2'>글 제목~~~~</p>
+          <div className='content2'>
+            <p>내용~~~~~~~~~~~~~~~</p>
+          </div>
+        </div>
+      </div>
+
+      <div className='www'>
+        <button className="write-button2">
+          <p>글작성하기</p>
+          <img className="write-icon2" src='./src/assets/icon/write-button.svg' />
+        </button>
+
+      </div>
+
+    </div>
+
+  );
+}

src/pages/MyPage/CheckRecord/SearchBar.css

@@ -0,0 +1,16 @@
+
+.search-container{
+  display: grid;
+  place-items: center;
+}
+
+.search input[type=text]{
+  margin: 20px 0 40px 40px;
+  background-color: #fff;
+  width: 250px;
+  height: 45px;
+  border-radius: 30px;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  text-align: center;
+  border: none;
+}

src/pages/MyPage/CheckRecord/SearchBar.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import './SearchBar.css';
+
+const searchBar = ({ id }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const handleSearchChange = (e) => {
+    setSearchTerm(e.target.value);
+  };
+
+  const handleSearch = () => {
+    console.log(`검색어(${id}):`, searchTerm);
+  };
+
+  return (
+    <div className='search-container'>
+    <div className="search">
+      <input
+        type="text"
+        placeholder="검색어를 입력하세요"
+        value={searchTerm}
+        onChange={handleSearchChange}
+        id={id}
+      />
+      <button className="sButton" onClick={handleSearch}>검색</button>
+    </div>
+    </div>
+  );
+};
+
+export default searchBar;

src/pages/MyPage/LikeCommunity/LCommunity.css

@@ -0,0 +1,72 @@
+
+#container3{
+  width: 434px;
+}
+.user{
+  display: flex;
+  align-items: center;
+}
+.user p{
+  color: #000;
+  text-align: left;
+
+  margin-top: 15px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 18.261px; 
+  letter-spacing: 0.16px;
+}
+#img{
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  margin: 20px 10px;
+}
+#simg{
+  width: 434px;
+  height: 330px;
+}
+
+.title3{
+  color: #000;
+  font-size: 20px;
+  font-weight: 700;
+  margin: 12px 0px 12px 19px;
+  padding: 0;
+}
+
+.content3{
+  color: #6C757D;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 25px;
+  letter-spacing: 0.16px;
+  margin: 0 0 0 19px;
+}
+
+.line{
+  background: #d9d9d9;
+  height: 3px;
+  border: none;
+  width: 434px;
+  display: flex;
+}
+
+.content-container{
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 27px;
+}
+.content-container p{
+  margin: 0 0 19px 19px;
+
+}
+.like-num{
+  color: #FE0135;
+}
+.like-button{
+  width: 26px;
+  height: 26px;
+}