feat : CommentInput 기능 추가 (#7)

Ureca-miniproject2 · Sep 21, 2024 · df20de6 · df20de6
1 parent c611a78
commit df20de6
Show file tree

Hide file tree

Showing 19 changed files with 377 additions and 120 deletions.
diff --git a/frontend/src/components/choice/Choice.jsx b/frontend/src/components/choice/Choice.jsx
@@ -12,4 +12,4 @@ export default function Choice(props) {
             <S.ItemList2>{game.secondTitle}</S.ItemList2>
         </S.ItemContainer>
     );
-}
+}
diff --git a/frontend/src/components/choice/Choice.styled.js b/frontend/src/components/choice/Choice.styled.js
@@ -10,6 +10,7 @@ export const ItemContainer = styled.div`
 `;
 
 export const ItemList = styled.div`
+    word-break: keep-all;
     width: 100%;
     padding: 5rem;
     text-align:center;
@@ -26,6 +27,7 @@ export const ItemList = styled.div`
 `;
 
 export const ItemList2 = styled.div`
+    word-break: keep-all;
     width: 100%;
     padding: 5rem;
     text-align:center;

diff --git a/frontend/src/components/commentInput/CommentInput.jsx b/frontend/src/components/commentInput/CommentInput.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import * as S from './CommentInput.styled';
+import ArrowIcon from '../common/icon/ArrowIcon';
+import { useState } from 'react';
+
+export default function CommentInput() {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <>
+      <S.InputContainer>
+        <S.TextInput value={inputValue} onChange={handleInputChange} />
+        <S.ButtonClick isActive={!!inputValue}>
+          <ArrowIcon />
+        </S.ButtonClick>
+      </S.InputContainer>
+    </>
+  );
+}
diff --git a/frontend/src/components/commentInput/CommentInput.styled.js b/frontend/src/components/commentInput/CommentInput.styled.js
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const InputContainer = styled.div`
+  display: flex;
+  margin-top: 24rem;
+  align-items: center;
+  width: 100%;
+`;
+
+export const TextInput = styled.input`
+  width: 81%;
+  height: 5.2rem;
+  border-radius: 1rem;
+  font-size: 1.6rem;
+  font-family: 'Pretendard-medium';
+  padding-left: 2.4rem;
+  background-color: ${(props) => props.theme.colors.gray150};
+`;
+
+export const ButtonClick = styled.button`
+  width: 5.2rem;
+  height: 5.2rem;
+  margin-left: 2rem;
+  border-radius: 1rem;
+  background-color: ${(props) =>
+    props.isActive ? props.theme.colors.black : props.theme.colors.gray350};
+
+  ${(props) =>
+    props.isActive &&
+    `&:hover {
+      background-color: ${props.theme.colors.gray400};
+    }`}
+`;
diff --git a/frontend/src/components/comments/Comments.jsx b/frontend/src/components/comments/Comments.jsx
@@ -1,51 +1,41 @@
 import React from 'react';
-import * as S from './Comments.styled';
 import { useEffect, useState } from 'react';
 import timeAgo from '../../utils/timeAgo';
-import HeartIcon from '../common/icon/HeartIcon';
-
+// import HeartIcon from '../common/icon/HeartIcon';
+import Comment from '../comments/comment/Comment';
+import { Container } from './comments.styled';
 
 export default function Comments() {
-    const [comment, SetComment] = useState([]);
-    useEffect(() => {
-        const a = async () => {
-            const res = await fetch('http://localhost:5173/api/comments');
-            const data = await res.json();
-            console.log(data.data);
-            SetComment(data.data);
-        };
-        a();
-    }, []);
-
-    return (
-        <div>
-            {comment.map((comments) => {
-                console.log(comments.nickname);
-
-                return (
-                    <S.Container>
-                    <S.CommentContainer>
-                        <S.TopContainer key={comments.id}>
-                            <S.NickNameStyle>{comments.nickname}</S.NickNameStyle>
-                            <S.TimeStyle>{comments.time}</S.TimeStyle>
-                            <S.LikeContainer><S.HeartIcon><HeartIcon /></S.HeartIcon><S.LikeStyle>{comments.like}</S.LikeStyle></S.LikeContainer>
-                        </S.TopContainer>
-                        <S.CommentStyle>{comments.comment}</S.CommentStyle>
-                    </S.CommentContainer>
+  const [comment, SetComment] = useState([]);
+  const [comment2, setComment2] = useState([]);
+  useEffect(() => {
+    const a = async () => {
+      const res = await fetch('http://localhost:5173/api/comments');
+      const data = await res.json();
+      console.log(data.data);
+      SetComment(data.data);
+    };
 
-                    <S.CommentContainer2>
-                        <S.TopContainer key={comments.id}>
-                            <S.NickNameStyle>{comments.nickname}</S.NickNameStyle>
-                            <S.TimeStyle>{comments.time}</S.TimeStyle>
-                            <S.LikeContainer><S.HeartIcon><HeartIcon /></S.HeartIcon><S.LikeStyle>{comments.like}</S.LikeStyle></S.LikeContainer>
-                        </S.TopContainer>
-                        <S.CommentStyle>{comments.comment}</S.CommentStyle>
-                    </S.CommentContainer2>
-                    </S.Container>
-                );
-            })}
-            {/* {timeAgo(props.createdAt)} */}
-        </div>
-    );
-};
+    const b = async () => {
+      const res = await fetch('http://localhost:5173/api/comments');
+      const data = await res.json();
+      console.log(data.data);
+      setComment2(data.data);
+    };
+    b();
+    a();
+  }, []);
 
+  return (
+    <>
+      <Comment
+        isBest={true}
+        id="1"
+        nickname="이지영"
+        time="23분 전"
+        like="3"
+        comment="뭘 먹을지 고민해보자 곱창 등갈비 족발 냠냠"
+      />
+    </>
+  );
+}
diff --git a/frontend/src/components/comments/Comments.styled.js b/frontend/src/components/comments/Comments.styled.js
@@ -1,69 +1,97 @@
 import styled from 'styled-components';
 
 export const CommentContainer = styled.div`
-    width: 100%;
-    background-color: ${(props) => props.theme.colors.gray100};
-    border-right: 0.1rem solid ${(props) => props.theme.colors.gray200};
-    padding: 2.5rem;
+  width: 100%;
+  background-color: ${(props) =>
+    props.isBest ? props.theme.colors.gray150 : props.theme.colors.gray100};
+  border-right: 0.1rem solid ${(props) => props.theme.colors.gray200};
+  padding: 2.5rem;
 `;
 
 export const CommentContainer2 = styled.div`
-    width: 100%;
-    background-color: ${(props) => props.theme.colors.gray100};
-    border-left: 0.1rem solid ${(props) => props.theme.colors.gray200};
-    padding: 2.5rem;
+  width: 100%;
+  background-color: ${(props) =>
+    props.isBest ? props.theme.colors.gray150 : props.theme.colors.gray100};
+  border-left: 0.1rem solid ${(props) => props.theme.colors.gray200};
+  padding: 2.5rem;
 `;
 
 export const Container = styled.div`
-    display: flex;
+  display: flex;
+`;
+
+export const BestButton = styled.div`
+  font-family: 'Pretendard-medium';
+  display: flex;
+  width: 4.8rem;
+  height: 2rem;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.primaryBlue};
+  border-radius: 10rem;
+  margin-right: 0.8rem;
+  font-size: 1.2rem;
+`;
+export const BestButton2 = styled.div`
+  font-family: 'Pretendard-medium';
+  display: flex;
+  width: 4.8rem;
+  height: 2rem;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.primaryGreen};
+  border-radius: 10rem;
+  margin-right: 0.8rem;
+  font-size: 1.2rem;
 `;
 
 export const LikeContainer = styled.div`
-    display: flex;
-    margin-left: auto;
+  display: flex;
+  margin-left: auto;
 `;
 
 export const HeartIcon = styled.div`
-    display: flex;
-    width: 1.9rem;
-    height: 1.9rem;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  width: 1.9rem;
+  height: 1.9rem;
+  justify-content: center;
+  align-items: center;
 `;
 
 export const TopContainer = styled.div`
-    width: 100%;
-    display: flex;
-    align-items: center;
+  width: 100%;
+  display: flex;
+  align-items: center;
 `;
 
 export const NickNameStyle = styled.div`
-    font-family: "Pretendard-bold";
-    font-size: 1.6rem;
-    color: ${(props) => props.theme.colors.black};
+  font-family: 'Pretendard-bold';
+  font-size: 1.6rem;
+  color: ${(props) => props.theme.colors.black};
 `;
 
 export const CommentStyle = styled.div`
-    width: 90%;
-    margin-top: 1rem;
-    font-family: "Pretendard-medium";
-    font-size: 1.6rem;
-    color: ${(props) => props.theme.colors.black};
+  word-break: keep-all;
+  width: 85%;
+  margin-top: 1rem;
+  font-family: 'Pretendard-medium';
+  font-size: 1.6rem;
+  color: ${(props) => props.theme.colors.black};
 `;
 
 export const TimeStyle = styled.div`
-    margin-left: 1.2rem;
-    font-family: "Pretendard-semibold";
-    font-size: 1.4rem;
-    color: ${(props) => props.theme.colors.gray300};
+  margin-left: 1.2rem;
+  font-family: 'Pretendard-semibold';
+  font-size: 1.4rem;
+  color: ${(props) => props.theme.colors.gray300};
 `;
 
 export const LikeStyle = styled.div`
-    /* position: absolute; */
-    display: flex;
-    align-items: center;
-    font-family: "Pretendard-semibold";
-    font-size: 1.6rem;
-    margin-left: 0.6rem;
-    color: ${(props) => props.theme.colors.gray300};
-`;
+  /* position: absolute; */
+  display: flex;
+  align-items: center;
+  font-family: 'Pretendard-semibold';
+  font-size: 1.6rem;
+  margin-left: 0.6rem;
+  color: ${(props) => props.theme.colors.gray300};
+`;
diff --git a/frontend/src/components/comments/comment/Comment.jsx b/frontend/src/components/comments/comment/Comment.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import * as S from './Comment.styled';
+// import timeAgo from '../../utils/timeAgo';
+import HeartIcon2 from '../../common/icon/HeartIcon';
+
+export default function Comment(props) {
+  return (
+    <S.CommentContainer isBest={props.isBest}>
+      <S.TopContainer key={props.id}>
+        <S.BestButton isBest={props.isBest}>BEST</S.BestButton>
+        <S.NickNameStyle>{props.nickname}</S.NickNameStyle>
+        <S.TimeStyle>{props.time}</S.TimeStyle>
+        <S.LikeContainer>
+          <S.HeartIcon>
+            <HeartIcon2 fill="#C8C8C8" />
+          </S.HeartIcon>
+          <S.LikeStyle>{props.like}</S.LikeStyle>
+        </S.LikeContainer>
+      </S.TopContainer>
+      <S.CommentStyle>{props.comment}</S.CommentStyle>
+    </S.CommentContainer>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,4 +12,4 @@ export default function Choice(props) { @@
                 <S.ItemList2>{game.secondTitle}</S.ItemList2>
             </S.ItemContainer>
         );
-    }
+    }