Skip to content

Commit

Permalink
Feat,Fix Complete reply function, make page,MyPage #19,#16,#5
Browse files Browse the repository at this point in the history
  • Loading branch information
@gusdn010158
gusdn010158 committed Feb 24, 2024
1 parent e365c01 commit 093fb3e
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 83 deletions.
106 changes: 65 additions & 41 deletions src/Community.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { BiDotsVerticalRounded } from "react-icons/bi";
import { AiOutlineEnter } from "react-icons/ai";
import { CgHeart } from "react-icons/cg";
import { BiSubdirectoryRight } from "react-icons/bi";

import { FaHeart } from "react-icons/fa6";
const CommunityComponent = styled.div`
width: 100%;
display: flex;
Expand Down Expand Up @@ -40,13 +40,22 @@ const Communityinput = styled.input`
height: 70px;
width: 70%;
`;
const Replyinput = styled.input`
margin-left:200px;
height: 50px;
width: 50%;
`;

const CommunityButton = styled.button`
border-radius: 25px;
height: 70px;
width: 30%;
`;

const ReplyButton = styled.button`
border-radius: 25px;
height: 50px;
width: 15%;
`;
const CommunityMid = styled.div`
display: flex;
width: 46%;
Expand Down Expand Up @@ -94,7 +103,11 @@ const Answertop = styled.div`
align-items: center;
`;

const Answersetting = styled.div``;
const Answersetting = styled.div`
display:flex;`;


const Answername = styled.div``;
const Answercomponent = styled.div``;
const Cmanswer = styled.div`
Expand All @@ -113,39 +126,49 @@ const Ca = styled.div`

function Community() {
const [inputText, setInputText] = useState("");
const [inputText2, setInputText2] = useState("");
const [Community, setCommunity] = useState<string[]>([]);
const [isChange, setIsChange] = useState(false);
const [is, setIs] = useState(false);

const [heart, setHeart] = useState(false);

const [ReplyText, setReplyText] = useState("");
const [Reply, setReply] = useState<string[]>([]);
const [Change, setChange] = useState(false);


const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputText(e.target.value);
};
const handleChange2 = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputText2(e.target.value);
};
const handleClick = () => {
setCommunity([...Community, inputText]);
setInputText("");
};


const heartClick = () => {
setHeart((prevChange) => !prevChange);
};


const ReplyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setReplyText(e.target.value);
};
const handleReplyClick = () => {
alert("대댓글을 작성하시겠습니까?");
setIsChange((prevIsChange) => !prevIsChange);
setChange((prevChange) => !prevChange);

};

const ChangeClick = () => {
setCommunity([...Community, inputText]);
setInputText("");
setIsChange((prevIsChange) => !prevIsChange);
setIs(true);
const ReplyClick = () => {
setReply([...Reply, ReplyText]);
setReplyText("");
setChange((prevChange) => !prevChange);

};


return (
<CommunityComponent>
<CommunityBox>

<CommunityDetail>
<Detailtop>
<Detailtitle>제목 뭐시기</Detailtitle>
Expand All @@ -160,46 +183,46 @@ function Community() {



{Community.map((text:any, index:any) => (
{Community.map((text:string, index:number) => (
<Communityanswer key={index}>
<Answertop>
<Answername>이름</Answername>
<Answersetting>
<CgHeart />/<AiOutlineEnter onClick={handleReplyClick} />/<BiDotsVerticalRounded />
<Answersetting >
<div onClick={heartClick}>{heart?(<CgHeart />):(<FaHeart />)}</div>/<div onClick={handleReplyClick} ><AiOutlineEnter /></div>/<div><BiDotsVerticalRounded /></div>
</Answersetting>
</Answertop>
<Answercomponent>{text}</Answercomponent>
</Communityanswer>
))}

{is&&(
Community.map((inputText2:any, index:any) => (
<Ca>
<BiSubdirectoryRight size="40"/>

{Reply.map((Text2:string, index:number) => (
<Ca key={index}>
<BiSubdirectoryRight size="40" />
<Cmanswer>
<Answertop>
<Answername>이름</Answername>
<Answersetting>
<CgHeart />/<AiOutlineEnter onClick={handleReplyClick} />/<BiDotsVerticalRounded />
<div onClick={heartClick}>{heart?(<CgHeart />):(<FaHeart />)}</div>/<BiDotsVerticalRounded />
</Answersetting>
</Answertop>
<Answercomponent>{inputText2}</Answercomponent>
<Answercomponent>{Text2}</Answercomponent>
</Cmanswer>
</Ca>
))
)}


{isChange&& (
<>
<input
value={inputText2}
onChange={handleChange2}
placeholder="내용을 입력하세요"
/>
<button onClick={ChangeClick}>대댓글 쓰기</button>
</>
)}
))}



{Change&& (
<>
<Replyinput
value={ReplyText}
onChange={ReplyChange}
placeholder="내용을 입력하세요"
/>
<ReplyButton onClick={ReplyClick}>대댓글 쓰기 </ReplyButton>
</>
)}
</CommunityBottom>

<CommunityMid>
Expand All @@ -211,12 +234,13 @@ function Community() {
<CommunityButton onClick={handleClick}>
답장하기
</CommunityButton>


</CommunityMid>

</CommunityBox>
</CommunityComponent>
);
}

export default Community;


71 changes: 48 additions & 23 deletions src/Make.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ flex-direction:column;
`;
const MakeLeftNumber=styled.div`
background-Color:gray;
font-size:100px;
width:500px;
height:500px;
border-radius:50%;
Expand Down Expand Up @@ -54,28 +55,39 @@ display:flex;
`;

const MakeRight=styled.div`
width:50%;
margin-top:100px;
display:flex;
align-items:center;
justify-content:center;
height:80%;
height:660px;
flex-direction:column;
`;
const MakeRightTitle=styled.div`
background-color:gray;
width:700px;
height:50px;
width:600px;
max-height:50px;
border-radius:25px;
display:flex;
align-items:center;
justify-content:center;
`;
const MakeRightFriend =styled.div`

const MakeRightfriend=styled.div`
display:flex;
`;
const MakeRightinput =styled.input`
height:70px;
width:600px;
display:flex;
align-items:center;
`;

const MakeRightbutton =styled.button`
display:flex;
align-items:center;
`;
const MakeRightCenter=styled.div`
height:550px;
overflow-y: auto;
`;
const MakeBottom=styled.div`
width:100%;
height:15%;
Expand All @@ -99,43 +111,56 @@ interface MainProps {

const Make: React.FC<MainProps> = ({ isSidebarOpen }) =>{
const [pL, setPL] = useState(0);
const[number,setNumber]=useState(0);

const Click = () => {
alert("선택 완료");

};
useEffect(() => {
const Left = isSidebarOpen ? 200 : 0;
setPL(Left);
}, [isSidebarOpen]);


const plus=()=>{
setNumber(number+1);
}
const minus=()=>{
setNumber(number-1);
}
return (
<>
<MainContainer paddingLeft={pL}>
<MakeTop>
<MakeLeft>
<MakeLeftNumber>
1
{number}
</MakeLeftNumber>
<MakeLeftButtonBox>
<MakeLeftButton><BiChevronLeft size="40" /></MakeLeftButton>
<MakeLeftIn>1</MakeLeftIn>
<MakeLeftButton><BiChevronRight size="40" /></MakeLeftButton>
<MakeLeftButton><BiChevronLeft size="40" onClick={minus}/></MakeLeftButton>
<MakeLeftIn>{number}</MakeLeftIn>
<MakeLeftButton><BiChevronRight size="40" onClick={plus}/></MakeLeftButton>
</MakeLeftButtonBox>

</MakeLeft>


<MakeRight>
<MakeRightTitle>
같이 공부 할 친구를 입력하세요!
</MakeRightTitle>
<MakeRightFriend>
아이디를 입력하세요
</MakeRightFriend>
<MakeRightFriend>
asdsdasas
</MakeRightFriend>
<MakeRightFriend>
asdsdasas
</MakeRightFriend>
<MakeRightFriend>
asdsdasas
</MakeRightFriend>
<MakeRightCenter>
{Array.from({ length: number }).map((_, index) => (
<MakeRightfriend>
<MakeRightinput/>
<MakeRightbutton onClick={Click}>확인</MakeRightbutton>
</MakeRightfriend>
))}
</MakeRightCenter>
</MakeRight>


</MakeTop>

<MakeBottom>
Expand Down
Loading

0 comments on commit 093fb3e

Please sign in to comment.