@@ -381,25 +415,29 @@ export default function CollectionMain() {
나의 낭만 모음집
다른 이들의 낭만 편지와 답장을 둘러보세요.
{likebtn==false?
-
{setLikebtn(true); setRecentbtn(false);}}>추천순
+
{setLikebtn(true); setRecentbtn(false);setSortedArray(array.sort((a, b) => b.like - a.like));}}>추천순
:
추천순}
{recentbtn==false?
-
{setLikebtn(false); setRecentbtn(true);}}>최신순
+
{setLikebtn(false); setRecentbtn(true);setSortedArray(array.sort((a, b) => a.id - b.id));}}>최신순
:
최신순}
- {nowItem.map(({text, id}) => (
- handleMouseOver(e,{id})}
- onMouseOut={e=>handleMouseOut(e)}
- >
-
+ {nowItem.map(({text, id, like}) => (
+ showCartHandler(id)}
+ onMouseOut={hideCartHandler}
+ onClick={e=>navigate("/CollectionLetter")}>
+
{handletextlength(text)}
+ {id===hoveredCart?
+
+ {handletextlength(text)}
+ {like}
+
+ :<>}
))}
@@ -428,5 +466,4 @@ export default function CollectionMain() {
)
}
-//map함수로 별개의 요소 접근 방식
-//로그인 구현 수정
\ No newline at end of file
+//인자에 담아 내용 넘겨서 편지 클릭 후 내용 가져오기
\ No newline at end of file
diff --git a/front-end/src/components/RomanticLetterbox/Collection/MyCollection.jsx b/front-end/src/components/RomanticLetterbox/Collection/MyCollection.jsx
index 2814d89..e2d7132 100644
--- a/front-end/src/components/RomanticLetterbox/Collection/MyCollection.jsx
+++ b/front-end/src/components/RomanticLetterbox/Collection/MyCollection.jsx
@@ -1,9 +1,14 @@
-import React, {useState,useEffect} from "react";
+import React, {useState, useEffect} from "react";
import styled from 'styled-components';
import Header from '../../Header/Header';
import twinkle from '../../../assets/img/반짝.svg';
import LetterPaper from '../../../assets/img/편지지.svg';
import { useNavigate } from "react-router-dom";
+import PrivateImg from '../../../assets/img/Unopen.svg';
+import WritingImg from '../../../assets/img/내가쓴편지.svg';
+import WritingImgWhite from '../../../assets/img/내가쓴편지2.svg';
+import ReplyingImg from '../../../assets/img/내가답장한편지.svg';
+import ReplyingImgRed from '../../../assets/img/내가답장한편지2.svg';
const Container = styled.div`
box-sizing: border-box;
@@ -27,10 +32,11 @@ const OverlapContainer = styled.div`
const MainHeader = styled.div`
position:absolute;
- width:990px;
+ width:1050px;
height:88px;
left:460px;
top:130px;
+
`
const ClickHeader=styled.span`
color:red;
@@ -39,7 +45,7 @@ const ClickHeader=styled.span`
height:60px;
padding-bottom:12px;
padding-left:186px;
- padding-right:186px;
+ padding-right:150px;
border-bottom:3.8px solid red;
font-weight:600;
font-family:Pretendard;
@@ -47,48 +53,85 @@ const ClickHeader=styled.span`
cursor:pointer;
`
const BasicHeader=styled.span`
- color: #FFF;
+ color: #CECECE;
position:relative;
width:450px;
height:60px;
padding-bottom:12px;
- padding-left:170px;
+ padding-left:210px;
padding-right:170px;
- border-bottom:0.95px solid #FFF;
- font-weight:180;
+ border-bottom:0.95px solid #CECECE;
+ font-weight:200;
font-family:Pretendard;
font-size:25px;
cursor:pointer;
`
-const ArrayBtn=styled.span`
- color: #757575;
+const HeaderLine=styled.div`
+ position:absolute;
+ margin-left:389px;
+ top:122px;
+ width:600px;
+ margin-top:39px;
+ border-top:0.5px solid #757575;
+`
+const Writing=styled.div`
+ display:inline-block;
+ color: ${props => props.color};
position:relative;
- top:50px;
- border: 0.5px solid #757575;
+ top:80px;
+ border-top: 0.5px solid ${props => props.bordercolor};
+ border-left: 0.5px solid ${props => props.bordercolor};
+ border-bottom: 0.5px solid ${props => props.bordercolor};
cursor:pointer;
+ width:130px;
+ padding-left:60px;
+ height:35px;
+ padding-top:15px;
font-size:20px;
font-family:Pretendard;
font-weight:200;
`
-const ClickedBtn=styled.span`
- color: #FF1F1F;
- border: 0.5px solid #FF1F1F;
+const Replying=styled.div`
+ display:inline-block;
+ color: ${props => props.color};
+ border-top: 0.5px solid ${props => props.bordercolor};
+ border-right: 0.5px solid ${props => props.bordercolor};
+ border-bottom: 0.5px solid ${props => props.bordercolor};
+ border-left: 0.5px solid #FF1F1F;
font-weight:200;
position:relative;
- top:50px;
- padding:5px 40px 5px 40px;
+ top:80px;
+ width:175px;
+ text-align:center;
+ height:35px;
+ padding-left:20px;
+ padding-top:15px;
cursor:pointer;
font-size:20px;
font-family:Pretendard;
`
+const RedWritingImg=styled.img`
+ position:absolute;
+ left:32px;
+ top: 18px;
+ width:19.62px;
+ height:19.57px;
+`
+const WhiteReplyingImg=styled.img`
+ position:absolute;
+ left:16px;
+ width:19.62px;
+ height:19.57px;
+`
const MainBox=styled.div`
position:absolute;
width:1200px;
height:1404px;
left:460px;
- top:260px;
+ top:320px;
`
const LetterBox=styled.div`
+ cursor:pointer;
position:relative;
display:inline-block;
margin-right:80px;
@@ -98,7 +141,6 @@ const LetterBox=styled.div`
`
const LetterPad=styled.img`
width:100%;
- cursor:pointer;
height:100%;
`
const LetterTxt = styled.div`
@@ -111,11 +153,27 @@ const LetterTxt = styled.div`
top:15%;
left:9%;
right:9%;
-`;
+`
+const PrivateTxt=styled.span`
+ font-family:Pretendard;
+ font-size: 12px;
+ position: absolute;
+ font-weight:500;
+ left:14.3%;
+ bottom:9%;
+ color:#1E1E1E;
+`
+const PrivImg=styled.img`
+ position:absolute;
+ left:9%;
+ width:11.04px;
+ height:12px;
+ bottom:9.5%;
+`
const Page=styled.div`
position:absolute;
width: 270px;
- left:850px;
+ left:800px;
bottom:-900px;
`
const PageNumber=styled.span`
@@ -132,6 +190,7 @@ const BeforeBtn=styled.span`
position:absolute;
color: white;
left:-40px;
+ top:-2px;
font-size:24px;
font-family:Pretendard;
font-weight:Medium;
@@ -141,7 +200,7 @@ const AfterBtn=styled.span`
font-size:24px;
position:absolute;
color: white;
- top:1.2px;
+ top:-2px;
right:-80px;
font-family:Pretendard;
font-weight:Medium;
@@ -150,135 +209,53 @@ const AfterBtn=styled.span`
export default function MyCollection() {
- const array=[
- { id:0, text:"0다른like:400 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:400, },
+ const WritingArray=[
+ { id:0, text:"내가쓴거0다른like:400 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:400, open:true },
{ id:1,text:"1 // like:290 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:290, },
+ like:290, open:false},
{ id:2,text:"2 // like:300 다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:300,},
+ like:300, open:false},
{ id:3, text:"3// like:380다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:380,},
+ like:380, open:false},
{ id:4, text:"4다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:20,},
+ like:20, open:false},
{ id:5, text:"5다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:150,},
+ like:150,open:false},
{ id:6, text:"6다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:180,},
+ like:180, open:false},
{ id:7,text:"7다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:56,},
+ like:56, open:true},
{ id:8,text:"8다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:175,},
+ like:175, open:false},
{ id:9, text:"9다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:15, },
+ like:15, open:false},
{ id:10, text:"10다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:200, },
- { id:11, text:"11다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:80, },
- { id:12,text:"12다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:1, },
- { id:13, text:"13다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:14, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:15, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:16, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:17, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:18, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:19, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:20, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:21, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:22, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:23, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:24, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:25, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:26, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:27, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:28, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:29, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:30, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:31,text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:32,text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:33, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:34, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:35, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:36, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:37, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:38, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:39, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:40, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:41, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:42, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:43, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:44, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:45, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:46, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:47, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:48, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:49, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:50, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:51, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:52, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:53, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:54, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:66, },
- { id:55, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:56, text:"56다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:57, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:58, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:59, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:60, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:61, text:"61다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:62, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
- { id:63, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:200, open:false},
+ ]
+ const ReplyingArray=[
+ { id:0, text:"내가답장0다른like:400 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:400, open:true},
+ { id:1,text:"1 // like:290 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:290, open:true},
+ { id:2,text:"2 // like:300 다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:300, open:false},
+ { id:3, text:"3// like:380다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:380, open:false},
+ { id:4, text:"4다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:20, open:false},
+ { id:5, text:"5다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:150, open:false},
+ { id:6, text:"6다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:180, open:true},
+ { id:7,text:"7다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:56, open:true},
+ { id:8,text:"8다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:175, open:false},
+ { id:9, text:"9다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:15, open:false},
+ { id:10, text:"10다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
+ like:200, open:true},
]
const handletextlength=(props)=>{
@@ -289,42 +266,27 @@ export default function MyCollection() {
preview[54]=".";
preview[55]=".";
- return( preview )
+ return( preview );
}
- const [order, setOrder] = useState("like");
- const [likebtn, setLikebtn]=useState(true);
- const [recentbtn, setRecentbtn]=useState(false);
- const [sortedArray, setSortedArray]=useState(array.sort((a, b) => b.like - a.like));
-
- useEffect(()=>{
- if(likebtn===true){
- setOrder("like");
- setSortedArray(array.sort((a, b) => b.like - a.like));
- }else{
- setOrder("id");
- setSortedArray(array.sort((a, b) => a.id - b.id));
- }
- }, [recentbtn]); //sortedArray 비동기 오류
+ const [writingbtn, setWritingbtn]=useState(true);
+ const [Replyingbtn, setReplyingbtn]=useState(false);
+ const [NowArray, setNowArray]=useState(WritingArray);
const [nowPage, setNowPage]=useState(1);
- const [nowItem,setNowItem]=useState([...sortedArray.slice(0,12)]);
- const MaxPage=Math.ceil(array.length/12);
- const PageArray= [...Array(MaxPage)].map((v,i)=>i+1);
+ const [nowItem,setNowItem]=useState([...NowArray.slice(0,12)]);
+ const MaxPage=Math.ceil(NowArray.length/12);
+ const PageArray=[...Array(MaxPage)].map((v,i)=>i+1);
useEffect(()=>{
- setNowItem([...sortedArray.slice((nowPage-1)*12,(nowPage-1)*12+12)]);
- }, [nowPage, recentbtn]);
+ setNowItem([...NowArray.slice((nowPage-1)*12,(nowPage-1)*12+12)]);
+ }, [nowPage, writingbtn]);
const navigate=useNavigate();
const toCollectionMain = () => {
navigate("/CollectionMain");
};
- const toMyWriting = () => {
- navigate("/MyWriting");
- };
-
return(
@@ -334,23 +296,37 @@ export default function MyCollection() {
낭만 모음집
나의 낭만 모음집
- {likebtn==false?
- {setLikebtn(true); setRecentbtn(false);}}>내가 쓴 편지
- :내가 쓴 편지}
- {recentbtn==false?
- {setLikebtn(false); setRecentbtn(true);}}>내가 답장한 편지
- :내가 답장한 편지}
+ {writingbtn === false ?
+ {setWritingbtn(true); setReplyingbtn(false); setNowArray(WritingArray);}}>
+
+ 내가 쓴 편지
+ :
+
+ 내가 쓴 편지}
+ {Replyingbtn === false ?
+ {setWritingbtn(false); setReplyingbtn(true); setNowArray(ReplyingArray);}}>
+
+ 내가 답장한 편지
+ :
+
+ 내가 답장한 편지}
+
- {nowItem.map(({text, id}) => (
-
-
+ {nowItem.map(({text, id, open}) => (
+
+ navigate("/MyWriting", { state: {openstate: `${open}`}})}/>
{handletextlength(text)}
+ {open === false ? 나만보기 : <> }
+ {open === false ? : <>}
- ))}
+ ))}
{Math.ceil(nowPage/5)===1?<>:
@@ -358,7 +334,7 @@ export default function MyCollection() {
{[PageArray.slice((Math.ceil(nowPage/5)-1)*5, (Math.ceil(nowPage/5)-1)*5+5)]
.map((item)=>(
item.map((i)=>(
- i==nowPage ?
+ i===nowPage ?
{i}
@@ -368,7 +344,7 @@ export default function MyCollection() {
))
))}
- {Math.ceil(nowPage/5)==Math.ceil(MaxPage/5)?<>:
+ {Math.ceil(nowPage/5)===Math.ceil(MaxPage/5)?<>:
setNowPage((e)=>e+1)}>{`>`}}
@@ -377,55 +353,4 @@ export default function MyCollection() {
)
}
-//헤더-div 2개씩 각각 만들어서 이미지, span 넣기
-
-/*//내가쓴거, 답장한거 별개의 array 생성
-const Myarray=[
- { id:0, text:"0다른like:400 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:400, },
- { id:1,text:"1 // like:290 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:290, },
- { id:2,text:"2 // like:300 다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:300,},
- { id:3, text:"3// like:380다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:380,},
- { id:4, text:"4다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:20,},
- { id:5, text:"5다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:150,},
- { id:6, text:"6다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:180,},
- { id:7,text:"7다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:56,},
- { id:8,text:"8다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:175,},
- { id:9, text:"9다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:15, },
- { id:10, text:"10다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:200, },
- ]
- const ReplyingArray=[
- { id:0, text:"0다른like:400 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:400, },
- { id:1,text:"1 // like:290 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:290, },
- { id:2,text:"2 // like:300 다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:300,},
- { id:3, text:"3// like:380다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:380,},
- { id:4, text:"4다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:20,},
- { id:5, text:"5다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:150,},
- { id:6, text:"6다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:180,},
- { id:7,text:"7다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:56,},
- { id:8,text:"8다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:175,},
- { id:9, text:"9다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:15, },
- { id:10, text:"10다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:200, },
- ]
-*/
\ No newline at end of file
+//메인화면 흐리게 만드는 기법
\ No newline at end of file
diff --git a/front-end/src/components/RomanticLetterbox/Collection/MyWriting.jsx b/front-end/src/components/RomanticLetterbox/Collection/MyWriting.jsx
index 99a745f..6d635c0 100644
--- a/front-end/src/components/RomanticLetterbox/Collection/MyWriting.jsx
+++ b/front-end/src/components/RomanticLetterbox/Collection/MyWriting.jsx
@@ -2,7 +2,7 @@ import React, {useState,useEffect} from "react";
import styled from 'styled-components';
import Header from '../../Header/Header';
import twinkle from '../../../assets/img/반짝.svg';
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
import IvoryLetter from '../../../assets/img/IvoryLetter.svg';
import PinkLetter from '../../../assets/img/PinkLetter.svg';
import Heart from '../../../assets/img/heart.svg';
@@ -54,15 +54,15 @@ const ClickHeader=styled.span`
cursor:pointer;
`
const BasicHeader=styled.span`
- color: #FFF;
+ color: #CECECE;
position:relative;
width:450px;
height:60px;
padding-bottom:12px;
padding-left:210px;
padding-right:170px;
- border-bottom:0.95px solid #FFF;
- font-weight:180;
+ border-bottom:0.95px solid #CECECE;
+ font-weight:200;
font-family:Pretendard;
font-size:25px;
cursor:pointer;
@@ -133,11 +133,13 @@ const Emoji=styled.img`
`
export default function MyWriting() {
-
- const [open, setOpen]=useState(true); //공개여부
- const [like, setLike]=useState(0); //공감수
const navigate=useNavigate();
+ const location = useLocation();
+ //const [open, setOpen]=useState(location.state.openstate)
+ const opening=(location.state.openstate).toString();
+
+ const [like, setLike]=useState(0); //공감수
const toCollectionMain = () => {
navigate("/CollectionMain");
@@ -146,11 +148,11 @@ export default function MyWriting() {
navigate("/MyCollection");
};
-
return(
+ {console.log(opening)}
낭만 모음집
@@ -166,11 +168,11 @@ export default function MyWriting() {
별이 좋은 곰돌이에게
편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명
-으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼
-요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요.편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요.
+ 으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼
+ 요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요.편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요.
케이크 만드는 고래가
- {open==true ?
+ { opening === "true" ?
setLike(like+1)}/>
setLike(like+1)}/>
@@ -180,8 +182,7 @@ export default function MyWriting() {
setLike(like+1)}/>
: <>
}
-
-
+
From a48b36b2db7fd74ff1d090237be59d8e819d9ea2 Mon Sep 17 00:00:00 2001
From: marshmallowing <114673063+marshmallowing@users.noreply.github.com>
Date: Sun, 11 Feb 2024 11:58:54 +0900
Subject: [PATCH 3/5] =?UTF-8?q?docs:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
=?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/Login/CreateAccount.jsx | 2 +-
front-end/src/components/Login/Loginstart.jsx | 188 ++++++++++++++++--
front-end/src/components/Login/SettingEnd.jsx | 18 ++
front-end/src/components/Login/Signin.jsx | 45 +----
.../CompletedLetterReplying.jsx | 5 +-
5 files changed, 198 insertions(+), 60 deletions(-)
diff --git a/front-end/src/components/Login/CreateAccount.jsx b/front-end/src/components/Login/CreateAccount.jsx
index de4c115..ebf5040 100644
--- a/front-end/src/components/Login/CreateAccount.jsx
+++ b/front-end/src/components/Login/CreateAccount.jsx
@@ -47,7 +47,7 @@ export default function CreateAccount() {
const navigate = useNavigate();
const navigateBack = () => {
- navigate(-1);
+ navigate("/Login");
};
return(
diff --git a/front-end/src/components/Login/Loginstart.jsx b/front-end/src/components/Login/Loginstart.jsx
index 1194c58..1ce3e5d 100644
--- a/front-end/src/components/Login/Loginstart.jsx
+++ b/front-end/src/components/Login/Loginstart.jsx
@@ -5,10 +5,10 @@ import Naver from '../../assets/img/Naver.svg'
import Google from '../../assets/img/Google.svg'
import {useGoogleLogin, GoogleOAuthProvider} from '@react-oauth/google';
import axios from "axios";
+import { useNavigate } from 'react-router-dom';
const KakaoImg = styled.img`
width:600px;
- height:78px;
margin-top:170px;
margin-left:800px;
cursor: pointer;
@@ -16,7 +16,6 @@ const KakaoImg = styled.img`
const NaverImg= styled.img`
width:600px;
- height:78px;
margin-top:35px;
margin-left:800px;
margin-bottom:0px;
@@ -25,9 +24,10 @@ const NaverImg= styled.img`
const GoogleImg = styled.img`
width:600px;
- height:78px;
+ padding-left:50px;
+ padding-right:20px;;
margin-top:35px;
- margin-left:800px;
+ margin-left:750px;
margin-bottom: 200px;
cursor: pointer;
`;
@@ -35,31 +35,187 @@ const GoogleImg = styled.img`
export default function Loginstart() {
const Kakaohandle=()=>{
+ const navigate=useNavigate();
+
const Rest_api_key='f79c5ea8cc5c0dcb00b961c6e5e797cc' //REST API KEY
const redirect_uri = 'http://localhost:3000/CreateAccount' //Redirect URI
const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${Rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`
- const handleLogin = ()=>{
- window.location.href = kakaoURL
- }
+ const code = new URL(window.location.href).searchParams.get("code"); //인가코드 받아오기
+ //백엔드에 인가코드 넘기고 jwt 토큰 받는 코드
+ useEffect(() => {
+ //백엔드로부터 인가코드 넘기고 jwt 토큰 받기
+ (async () => {
+ try {
+ const res = await axios
+ // 백엔드 주소 뒤에 인가코드 붙여서 GET 설정
+ // 백엔드는 이 주소를 통해 뒤에 붙여져있는 인가코드를 전달 받게 된다.
+ .get(
+ `http://ec2-3-35-91-109.ap-northeast-2.compute.amazonaws.com:8081/api/oauth/token?code=${code}`
+ )
+ // 백엔드 쪽에서 보내준 응답 확인
+ .then((response) => {
+ console.log("응답 확인", response);
+ // 이때, 백엔드로부터 받아온 헤더값에 저장되어있는 authorization 을 접근해 token 이라는 변수에 저장
+ const token = response.headers.authorization;
+ // 이 토큰은 프론트엔드, 즉 현재 내 서버에 저장시킨다.
+ window.localStorage.setItem("token", token);
+ });
+ console.log(res);
+ } catch (e) {
+ // 에러 발생 시, 에러 응답 출력
+ console.error(e);
+ }
+
+ // 위에서 setItem 을 사용하여 내부에 저장시킨 토크을 다시 불러온다.
+ // 이때, 내부 저장소에서 가져온 토큰을 다시 token 이라는 변수에 담는다.
+ const token = window.localStorage.getItem("token");
+ //백엔드로 토큰 다시 넘기기
+ try {
+ const res = await axios
+ // 이때, post가 아닌 get으로 접근한다.
+ // 접근 주소는 백엔드에서 설정한 주소로 한다.
+ .get(
+ "http://ec2-3-35-91-109.ap-northeast-2.compute.amazonaws.com:8081/api/user/mypage",
+ {
+ // 헤더값에는 받아온 토큰을 Authorization과 request 에 담아서 보낸다/
+ headers: {
+ Authorization: token,
+ request: token,
+ },
+ }
+ )
+ // 위에서 백엔드가 토큰을 잘받고 처리해서 유저정보를 다시 넘겨준다면, 그 응답을 처리한다.
+ // data 라는 변수에 유저 정보를 저장하고, setItem을 사용해 로컬에 다시 저장한다.
+ .then((data) => {
+ window.localStorage.setItem("profile", data);
+ console.log(data);
+ // 만약, 유저정보를 잘 불러왔다면 navigate를 사용해 프론트엔드에서 설정한 마이페이지 경로를 설정해서 이동시킨다.
+ if (data) {
+ navigate("/CreateAccount");
+ }
+ });
+ } catch (e) {
+ // 에러 발생 시, 에러 응답 출력
+ console.error(e);
+ }
+ })();
+ }, []);
+
return(
-
+ window.location.href = kakaoURL}/>
)
}
const Naverhandle=()=>{
+ const navigate=useNavigate();
+
const naver_client_id='b57dd3KbzMp32o_rFf1B'
const redirect_uri = 'http://localhost:3000/CreateAccount' //Redirect URI
const state="false"
const NaverURL = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${naver_client_id}&state=${state}&redirect_uri=${redirect_uri}`
- const handleLogin = ()=>{
- window.location.href = NaverURL;
- }
+ const code = new URL(window.location.href).searchParams.get("code"); //인가코드 받아오기
+
+ useEffect(()=>{
+ (async ()=> {
+ try {
+ const res = await axios
+ .get(
+ `http://ec2-3-35-91-109.ap-northeast-2.compute.amazonaws.com:8081/api/oauth/token?code=${code}`
+ )
+ .then((response)=>{
+ console.log("응답 확인", response);
+ const token = response.headers.authorization;
+ window.localStorage.setItem("token", token);
+ })
+ console.log(res);
+ } catch(e) {
+ console.error(e);
+ }
+ const token = window.localStorage.getItem("token");
+ try {
+ const res= await axios
+ .get(
+ "http://ec2-3-35-91-109.ap-northeast-2.compute.amazonaws.com:8081/api/user/mypage",
+ {
+ headers: {
+ Authorization: token,
+ request: token,
+ },
+ }
+ )
+ .then((data) => {
+ window.localStorage.setItem("profile", data);
+ console.log(data);
+ if (data) {
+ navigate("/CreateAccount");
+ }
+ });
+ } catch (e) {
+ console.error(e);
+ }
+ })();
+ },[]);
+
return(
-
+ window.location.href = NaverURL}/>
)
}
- const Googlehandle = () => {
+ const Googlehandle=()=>{
+ const navigate=useNavigate();
+
+ const google_client_id="743660424403-m90u60mbrhlgc3hrphv0r65o1df56ffs.apps.googleusercontent.com"
+ const redirect_uri = 'http://localhost:3000/CreateAccount' //Redirect URI
+ const googleURL = `https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?client_id=${google_client_id}&redirect_uri=${redirect_uri}&response_type=code&scope=email`;
+ const code = new URL(window.location.href).searchParams.get("code"); //인가코드 받아오기
+
+ useEffect(()=>{
+ (async ()=> {
+ try {
+ const res = await axios
+ .get(
+ `http://ec2-3-35-91-109.ap-northeast-2.compute.amazonaws.com:8081/api/oauth/token?code=${code}`
+ )
+ .then((response)=>{
+ console.log("응답 확인", response);
+ const token = response.headers.authorization;
+ window.localStorage.setItem("token", token);
+ })
+ console.log(res);
+ } catch(e) {
+ console.error(e);
+ }
+ const token = window.localStorage.getItem("token");
+ try {
+ const res= await axios
+ .get(
+ "http://ec2-3-35-91-109.ap-northeast-2.compute.amazonaws.com:8081/api/user/mypage",
+ {
+ headers: {
+ Authorization: token,
+ request: token,
+ },
+ }
+ )
+ .then((data) => {
+ window.localStorage.setItem("profile", data);
+ console.log(data);
+ if (data) {
+ navigate("/CreateAccount");
+ }
+ });
+ } catch (e) {
+ console.error(e);
+ }
+ })();
+ }, []);
+
+ return(
+ window.location.href = googleURL}/>
+ )
+ }
+
+ /* const Googlehandle = () => {
const googleSocialLogin = useGoogleLogin({
scope: "email profile",
onSuccess: async ({ code }) => {
@@ -82,15 +238,13 @@ export default function Loginstart() {
);
- }
+ }*/
return(
-
- ;
-
+
)
}
\ No newline at end of file
diff --git a/front-end/src/components/Login/SettingEnd.jsx b/front-end/src/components/Login/SettingEnd.jsx
index 54afd59..9e1e620 100644
--- a/front-end/src/components/Login/SettingEnd.jsx
+++ b/front-end/src/components/Login/SettingEnd.jsx
@@ -1,4 +1,6 @@
+import React, {useEffect} from 'react';
import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
const TextContainer=styled.div`
dlsplay: flex;
@@ -18,6 +20,22 @@ const Text = styled.span`
`
export default function SettingEnd() {
+
+ const navigate = useNavigate();
+
+ const timeout = () => {
+ setTimeout(() => {
+ navigate('/MyLetterbox')}, 2000);
+ };
+
+ useEffect(() => {
+ timeout();
+ return () => {
+ clearTimeout(timeout);
+ };
+ });
+
+
return(
{
const storedName=localStorage.getItem('Name');
- const storedEmail=localStorage.getItem('Email');
if(storedName){
setName(storedName);
}
- if(storedEmail){
- setEmail(storedEmail);
- }
localStorage.setItem("Name", name);
- localStorage.setItem("Email", email);
},[]);
@@ -238,7 +224,6 @@ export default function Signin(){
const navigateToTerms = () => {
localStorage.setItem("Name",name);
- localStorage.setItem("Email",email);
navigate("/Terms");
};
@@ -248,21 +233,12 @@ export default function Signin(){
const onSubmit=(e)=>{
e.preventDefault();
- /*
- const regExp=/^[A-Za-z0-9ㄱ-ㅎㅏ-ㅣ가-힣]{1,20}$/;
- if(!regExp.test(name)){
- alert("닉네임을 다시 작성해 주세요.");
- authorInput.current.focus();
- return;
- }*/
if(checkItems.length === data.length){
navigateToMakeLetterbox(name);
} else{
return;
}
}
-
- //const storedName=localStorage.getItem('Name');
return(
@@ -278,26 +254,13 @@ export default function Signin(){
onChange={(event)=>{
setName((event.target.value));
onInputHandler(event);
- //characterCheck(event);
}}
pattern="^[A-Za-z0-9ㄱ-ㅎㅏ-ㅣ가-힣]{1,20}$"
minlength="1"
maxlength="20"
- //ref={authorInput}
/>
{`(`}{length}/20{`)`}
-
- 이메일{'('}선택{')'}
- {
- setEmail((event.target.value));
- }}
- />
-
handleAllCheck(e.target.checked)}
checked={checkItems.length === data.length ? true : false} />
diff --git a/front-end/src/components/RomanticLetterbox/ReplyingLetter/CompletedLetterReplying.jsx b/front-end/src/components/RomanticLetterbox/ReplyingLetter/CompletedLetterReplying.jsx
index dafb0a9..99c6415 100644
--- a/front-end/src/components/RomanticLetterbox/ReplyingLetter/CompletedLetterReplying.jsx
+++ b/front-end/src/components/RomanticLetterbox/ReplyingLetter/CompletedLetterReplying.jsx
@@ -83,6 +83,9 @@ const CompletedLetterReplying = () => {
const handleNavigateToRomainticLetterboxMain = () => {
navigate('/RomanticLetterbox');
};
+ const handleNavigateToCollectionMain = () => {
+ navigate('/CollectionMain');
+ };
return (
@@ -102,7 +105,7 @@ const CompletedLetterReplying = () => {
onClick={handleNavigateToRomainticLetterboxMain}>
낭만우편함으로돌아가기
-
)
-}
\ No newline at end of file
+}
+
+//증가된 좋아요 수 main페이지에 반영하기
+//api연결
\ No newline at end of file
diff --git a/front-end/src/components/RomanticLetterbox/Collection/CollectionMain.jsx b/front-end/src/components/RomanticLetterbox/Collection/CollectionMain.jsx
index 6e0f082..3a40b7b 100644
--- a/front-end/src/components/RomanticLetterbox/Collection/CollectionMain.jsx
+++ b/front-end/src/components/RomanticLetterbox/Collection/CollectionMain.jsx
@@ -133,6 +133,10 @@ const Reply=styled.span`
position: absolute;
font-size: 16px;
line-height: 165%;
+ display: -webkit-inline-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
`
const LikeCnt=styled.div`
position: absolute;
@@ -154,7 +158,6 @@ const LikeImg=styled.img`
height:16px;
right:22.5%;
bottom:9.7%;
-
`
const LetterPad=styled.img`
width:275px;
@@ -170,6 +173,10 @@ const LetterTxt = styled.div`
top:15%;
left:9%;
right:9%;
+ display: -webkit-inline-box ;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
`
const Page=styled.div`
position:absolute;
@@ -212,165 +219,155 @@ export default function CollectionMain() {
const array=[
{ id:0, text:"0다른like:400 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:400, },
+ like:400, reply:"답장이다"},
{ id:1,text:"1 // like:290 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:290, },
+ like:290, reply:"답장이다"},
{ id:2,text:"2 // like:300 다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:300,},
+ like:300,reply:"답장이다"},
{ id:3, text:"3// like:380다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:380,},
+ like:380,reply:""},
{ id:4, text:"4다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:20,},
+ like:20,reply:"다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요."},
{ id:5, text:"5다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:150,},
+ like:150,reply:"다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요."},
{ id:6, text:"6다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:180,},
+ like:180,reply:"답장이다"},
{ id:7,text:"7다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:56,},
+ like:56,reply:"답장이다"},
{ id:8,text:"8다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:175,},
+ like:175,reply:"답장이다"},
{ id:9, text:"9다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:15, },
+ like:15, reply:"답장이다"},
{ id:10, text:"10다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:200, },
+ like:200, reply:"답장이다"},
{ id:11, text:"11다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:80, },
+ like:80, reply:"답장이다"},
{ id:12,text:"12다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:1, },
+ like:1, reply:"답장이다"},
{ id:13, text:"13다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:14, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:15, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:16, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:17, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:18, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:19, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:20, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:21, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:22, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:23, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:24, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:25, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:26, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:27, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:28, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:29, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:30, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:31,text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:32,text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:33, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:34, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:35, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:36, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:37, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:38, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:39, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:40, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:41, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:42, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:43, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:44, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:45, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:46, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:47, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:48, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:49, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:50, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:51, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:52, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:53, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:54, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:66, },
+ like:66, reply:"답장이다"},
{ id:55, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:56, text:"56다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:57, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:58, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:59, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:60, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:61, text:"61다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:62, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:63, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:64, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:65, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:66, text:"66다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:67, text:"67다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:68, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:69, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:70, text:"70다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:71, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:72, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
{ id:73, text:"14다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.다른 이들의 낭만 편지와 답장을 둘러보세요.",
- like:99, },
+ like:99, reply:"답장이다"},
]
- const handletextlength=(props)=>{
- const preview=[...props];
- preview.length=55;
-
- preview[53]=".";
- preview[54]=".";
- preview[55]=".";
-
- return preview;
- }
/*
const location = useLocation();
const userId = (location.state.UserId).toSt;
@@ -405,6 +402,9 @@ export default function CollectionMain() {
setHoveredCart(-1)
}
+ const location = useLocation();
+ const [plus,setPlus]=useState(0);
+
return(
@@ -423,18 +423,20 @@ export default function CollectionMain() {
- {nowItem.map(({text, id, like}) => (
+ {nowItem.map(({text, id, like, reply}) => (
showCartHandler(id)}
onMouseOut={hideCartHandler}
- onClick={e=>navigate("/CollectionLetter")}>
+ onClick={()=>navigate("/CollectionLetter", {state:{lettertext: `${text}`, letterreply:`${reply}`,likecounting:`${like}`}})}>
- {handletextlength(text)}
+ {text}
{id===hoveredCart?
- {handletextlength(text)}
+ {reply==""?
+ 곧 답장이 도착할 거예요 :{`)`}
+ : {reply}}
{like}
:<>}
@@ -465,5 +467,4 @@ export default function CollectionMain() {
)
}
-
-//인자에 담아 내용 넘겨서 편지 클릭 후 내용 가져오기
\ No newline at end of file
+//&& setPlus((location.state.likecnt).toString())}>
diff --git a/front-end/src/components/RomanticLetterbox/Collection/MyCollection.jsx b/front-end/src/components/RomanticLetterbox/Collection/MyCollection.jsx
index e2d7132..24089b1 100644
--- a/front-end/src/components/RomanticLetterbox/Collection/MyCollection.jsx
+++ b/front-end/src/components/RomanticLetterbox/Collection/MyCollection.jsx
@@ -153,6 +153,10 @@ const LetterTxt = styled.div`
top:15%;
left:9%;
right:9%;
+ display: -webkit-inline-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
`
const PrivateTxt=styled.span`
font-family:Pretendard;
@@ -258,17 +262,6 @@ export default function MyCollection() {
like:200, open:true},
]
- const handletextlength=(props)=>{
- const preview=[...props];
- preview.length=55;
-
- preview[53]=".";
- preview[54]=".";
- preview[55]=".";
-
- return( preview );
- }
-
const [writingbtn, setWritingbtn]=useState(true);
const [Replyingbtn, setReplyingbtn]=useState(false);
const [NowArray, setNowArray]=useState(WritingArray);
@@ -321,7 +314,7 @@ export default function MyCollection() {
navigate("/MyWriting", { state: {openstate: `${open}`}})}/>
- {handletextlength(text)}
+ {text}
{open === false ? 나만보기 : <> }
{open === false ? : <>}