From faca8ca1047ad13049b1997ba5cb59d0d06b7b3f Mon Sep 17 00:00:00 2001 From: Brokyeom Date: Tue, 19 Jul 2022 04:36:19 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[=20=20feat=20=20]=20=EB=8C=93=EA=B8=80=20G?= =?UTF-8?q?UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/community/Reply.tsx | 115 ++++++++++++++++---------- components/community/ReplyContent.tsx | 45 +++++----- styles/emotion.d.ts | 1 + styles/theme.ts | 1 + 4 files changed, 95 insertions(+), 67 deletions(-) diff --git a/components/community/Reply.tsx b/components/community/Reply.tsx index a16b27a..920d961 100644 --- 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(false); + const [replyText, setReplyText] = useState(''); + + const handleInputText = (e: React.ChangeEvent) => { + setReplyText(e.target.value); + }; + + const handleInputColor = () => { + replyText.length === 0 ? setInputColor(false) : setInputColor(true); + }; + return ( -

댓글

+

댓글

+

23

 - -

예현맘

- + + - 등록 + 등록 theme.fonts.t3_19_medium_130} - font-style: normal; - font-weight: 500; - font-size: 2.8rem; - line-height: 4rem; + h1 { + margin-right: 0.4rem; + + color: ${({ theme }) => theme.colors.black}; + } + + p { + color: ${({ theme }) => theme.colors.mainDarkgreen}; + } `; const StInputForm = styled.article` display: flex; @@ -62,53 +85,61 @@ const StInputForm = styled.article` 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; +const StInputBtn = styled.span<{ inputColor: boolean }>` + display: flex; + justify-content: center; + align-items: center; + + width: 7.6rem; + height: 4.2rem; - font-style: normal; - font-weight: 400; - font-size: 23.2351px; - line-height: 32px; + color: ${({ theme, inputColor }) => + !inputColor ? theme.colors.gray006 : theme.colors.white}; - color: ${({ theme }) => theme.colors.mainDarkgreen}; - background-color: ${({ theme }) => theme.colors.lightGreen}; - border: 2px solid ${({ theme }) => theme.colors.mainDarkgreen}; - border-radius: 1rem; + background-color: ${({ theme, inputColor }) => + !inputColor ? theme.colors.gray003 : theme.colors.mainDarkgreen}; + + ${({ theme }) => theme.fonts.b2_18_medium_130}; + + border-radius: 0.5rem; cursor: pointer; -`; +`; \ No newline at end of file diff --git a/components/community/ReplyContent.tsx b/components/community/ReplyContent.tsx index 0a55c05..1c7260a 100644 --- 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,10 +12,10 @@ export default function ReplyContent(props: ReplyContentProps) {

{userNickname}

- {createdAt}

{content}

+ {createdAt} · 신고 ); @@ -23,42 +23,37 @@ export default function ReplyContent(props: ReplyContentProps) { 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 index de64555..876d91d 100644 --- 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 index 597ab71..30966fc 100644 --- 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 }), From 5fe0c291c38b435438283c16a526b6eff8c5eca9 Mon Sep 17 00:00:00 2001 From: Brokyeom Date: Tue, 19 Jul 2022 04:47:29 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[=20=20chore=20=20]=20StInputBtn=20?= =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/community/Reply.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/community/Reply.tsx b/components/community/Reply.tsx index 920d961..1ff3fe7 100644 --- a/components/community/Reply.tsx +++ b/components/community/Reply.tsx @@ -29,7 +29,7 @@ export default function Reply() { onChange={handleInputText} /> - 등록 + 입력 ` border-radius: 0.5rem; cursor: pointer; -`; \ No newline at end of file +`;