Merge branch 'comment/#87' into Community_list/#92

nori-dongsan · Jul 19, 2022 · c76a4a4 · c76a4a4
2 parents 55f61ad + 5fe0c29
commit c76a4a4
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 68 deletions.
diff --git a/components/community/Reply.tsx b/components/community/Reply.tsx
@@ -1,18 +1,35 @@
 import styled from '@emotion/styled';
-import ReplyContent from './ReplyContent';
+import ReplyContent from '../community/ReplyContent';
+import { useState } from 'react';
 
 export default function Reply() {
+  const [inputColor, setInputColor] = useState<boolean>(false);
+  const [replyText, setReplyText] = useState<string>('');
+
+  const handleInputText = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setReplyText(e.target.value);
+  };
+
+  const handleInputColor = () => {
+    replyText.length === 0 ? setInputColor(false) : setInputColor(true);
+  };
+
   return (
     <StReplyWrapper>
       <StReplyTitle>
-        <p>댓글</p>
+        <h1>댓글</h1>
+        <p>23</p>
       </StReplyTitle>
       <StInputForm>
-        <StInputContent>
-          <p>예현맘</p>
-          <input type="text" placeholder="댓글을 남겨보세요" />
+        <StInputContent inputColor={inputColor}>
+          <input
+            type="text"
+            placeholder="댓글을 남겨 보세요"
+            onKeyUp={handleInputColor}
+            onChange={handleInputText}
+          />
         </StInputContent>
-        <StInputBtn>등록</StInputBtn>
+        <StInputBtn inputColor={inputColor}>입력</StInputBtn>
       </StInputForm>
       <ReplyContent
         userNickname="희지맘"
@@ -41,74 +58,88 @@ export default function Reply() {
 const StReplyWrapper = styled.section`
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  justify-content: flex-start;
 `;
-const StReplyTitle = styled.h1`
+const StReplyTitle = styled.article`
   display: flex;
   flex-direction: row;
   align-items: flex-start;
 
-  margin-bottom: 2.87rem;
+  margin-bottom: 2.3rem;
+
+  ${({ theme }) => theme.fonts.t3_19_medium_130}
+
+  h1 {
+    margin-right: 0.4rem;
+
+    color: ${({ theme }) => theme.colors.black};
+  }
 
-  font-style: normal;
-  font-weight: 500;
-  font-size: 2.8rem;
-  line-height: 4rem;
+  p {
+    color: ${({ theme }) => theme.colors.mainDarkgreen};
+  }
 `;
 const StInputForm = styled.article`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 
-  margin-bottom: 6.9rem;
-  padding-left: 4.3rem;
-  padding-right: 3.2rem;
+  margin-bottom: 4.8rem;
 
   width: 77.6rem;
-  height: auto;
-  min-height: 13.6rem;
-
-  border: 0.1rem solid ${({ theme }) => theme.colors.gray005};
-  border-radius: 1rem;
 `;
-const StInputContent = styled.div`
+const StInputContent = styled.div<{ inputColor: boolean }>`
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
-  p {
-    margin-bottom: 0.3rem;
+  input {
+    margin-right: 2.4rem;
+    padding-left: 1.8rem;
 
-    font-style: normal;
-    font-weight: 500;
-    font-size: 23.2351px;
-    line-height: 34px;
-  }
+    width: 67.6rem;
+    height: 4.2rem;
 
-  input {
     font-style: normal;
     font-weight: 400;
     font-size: 21.3762px;
     line-height: 31px;
 
+    color: ${({ theme }) => theme.colors.black};
+
+    ${({ theme }) => theme.fonts.b4_15_regular_146};
+
+    border: 0.1rem solid
+      ${({ theme, inputColor }) =>
+        !inputColor ? theme.colors.gray007 : theme.colors.mainDarkgreen};
+    border-radius: 0.65rem;
+
     &::placeholder {
       font-family: Pretendard;
+
+      color: ${({ theme }) => theme.colors.gray005};
     }
   }
 `;
-const StInputBtn = styled.span`
-  padding: 0.5rem 2.8rem;
-
-  font-style: normal;
-  font-weight: 400;
-  font-size: 23.2351px;
-  line-height: 32px;
-
-  color: ${({ theme }) => theme.colors.mainDarkgreen};
-  background-color: ${({ theme }) => theme.colors.lightGreen};
-  border: 2px solid ${({ theme }) => theme.colors.mainDarkgreen};
-  border-radius: 1rem;
+const StInputBtn = styled.span<{ inputColor: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 7.6rem;
+  height: 4.2rem;
+
+  color: ${({ theme, inputColor }) =>
+    !inputColor ? theme.colors.gray006 : theme.colors.white};
+
+  background-color: ${({ theme, inputColor }) =>
+    !inputColor ? theme.colors.gray003 : theme.colors.mainDarkgreen};
+
+  ${({ theme }) => theme.fonts.b2_18_medium_130};
+
+  border-radius: 0.5rem;
 
   cursor: pointer;
 `;
diff --git a/components/community/ReplyContent.tsx b/components/community/ReplyContent.tsx
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 
 interface ReplyContentProps {
-  userNickname: string;
+  userNickname?: string;
   content: string;
-  createdAt: string;
+  createdAt?: string;
 }
 
 export default function ReplyContent(props: ReplyContentProps) {
@@ -12,53 +12,48 @@ export default function ReplyContent(props: ReplyContentProps) {
     <StReplyContentWrapper>
       <StReplyInfo>
         <p>{userNickname}</p>
-        <span>{createdAt}</span>
       </StReplyInfo>
       <StReplyContents>
         <p>{content}</p>
+        <span>{createdAt} · 신고</span>
       </StReplyContents>
     </StReplyContentWrapper>
   );
 }
 
 const StReplyContentWrapper = styled.section`
   width: 77.6rem;
-  margin-bottom: 3.3rem;
-
-  border-bottom: 0.1rem solid ${({ theme }) => theme.colors.gray005};
+  margin-bottom: 4rem;
 `;
 
 const StReplyInfo = styled.div`
   display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  margin-bottom: 1.1rem;
 
   p {
+    margin-bottom: 0.8rem;
     padding-right: 0.9rem;
 
-    font-style: normal;
-    font-weight: 500;
-    font-size: 23.2351px;
-    line-height: 34px;
-  }
-
-  span {
-    font-style: normal;
-    font-weight: 350;
-    font-size: 19.5174px;
-    line-height: 28px;
+    ${({ theme }) => theme.fonts.b3_16_semibold_140}
   }
 `;
 
 const StReplyContents = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
   margin-bottom: 2.8rem;
 
   p {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 21.3762px;
-    line-height: 31px;
+    margin-bottom: 0.8rem;
+
+    color: ${({ theme }) => theme.colors.black};
+    ${({ theme }) => theme.fonts.b4_15_regular_146}
+  }
+
+  span {
+    color: ${({ theme }) => theme.colors.gray007};
+
+    ${({ theme }) => theme.fonts.b6_13_regular_120}
   }
 `;
diff --git a/styles/emotion.d.ts b/styles/emotion.d.ts
@@ -50,6 +50,7 @@ declare module '@emotion/react' {
       b5_14_medium_140: SerializedStyles;
       b5_14_regular_140: SerializedStyles;
       b6_13_medium_120: SerializedStyles;
+      b6_13_regular_120: SerializedStyles;
       b7_12_bold_120: SerializedStyles;
       b7_12_medium_140: SerializedStyles;
       b7_12_regular_120: SerializedStyles;

diff --git a/styles/theme.ts b/styles/theme.ts
@@ -92,6 +92,7 @@ const fonts = {
   b5_14_medium_140: FONT({ weight: 500, size: 1.4, height: 1.96, spacing: 0 }),
   b5_14_regular_140: FONT({ weight: 400, size: 1.4, height: 1.96, spacing: 0 }),
   b6_13_medium_120: FONT({ weight: 500, size: 1.3, height: 1.56, spacing: 0 }),
+  b6_13_regular_120: FONT({ weight: 400, size: 1.3, height: 1.56, spacing: 0 }),
   b7_12_bold_120: FONT({ weight: 700, size: 1.2, height: 1.44, spacing: 0 }),
   b7_12_medium_140: FONT({ weight: 500, size: 1.2, height: 1.68, spacing: 0 }),
   b7_12_regular_120: FONT({ weight: 400, size: 1.2, height: 1.44, spacing: 0 }),