From d8e4dd954e053590aaa741ca4f25d202bbd5d723 Mon Sep 17 00:00:00 2001 From: goeun kim Date: Sat, 25 Jan 2025 05:18:28 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Fix/#171:=20=EC=9E=85=EB=A0=A5=EC=B0=BD=20?= =?UTF-8?q?=EB=B9=84=ED=9A=8C=EC=9B=90=EC=8B=9C=20disabled?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../input/commentInput/CommentInput.styled.ts | 12 ++++++++---- .../components/input/commentInput/CommentInput.tsx | 6 ++++-- src/pages/CommunityDetail/hooks/useTextInput.ts | 10 +++++++++- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/pages/CommunityDetail/components/input/commentInput/CommentInput.styled.ts b/src/pages/CommunityDetail/components/input/commentInput/CommentInput.styled.ts index 4b8a0c46..5c14cde5 100644 --- a/src/pages/CommunityDetail/components/input/commentInput/CommentInput.styled.ts +++ b/src/pages/CommunityDetail/components/input/commentInput/CommentInput.styled.ts @@ -39,11 +39,17 @@ const errAnimation = ` } `; -export const CardInputWrapper = styled.section<{ $isOverflowed: boolean; $isFocus: boolean }>` +export const CardInputWrapper = styled.section<{ $isOverflowed: boolean; $isFocus: boolean; $isDisabled: boolean }>` width: 100%; padding: 2.2rem 5rem 3rem 2rem; - background: ${({ theme }) => theme.colors.white2}; + background: ${({ theme, $isDisabled }) => ($isDisabled ? theme.colors.gray6 : theme.colors.white2)}; + + & > textarea { + color: ${({ theme, $isDisabled }) => ($isDisabled ? theme.colors.gray2 : theme.colors.gray1)}; + + background: ${({ theme, $isDisabled }) => ($isDisabled ? theme.colors.gray6 : theme.colors.white2)}; + } border: 1px solid ${({ theme, $isOverflowed, $isFocus }) => $isOverflowed ? theme.colors.sys_red : $isFocus ? theme.colors.gray4 : 'none'}; @@ -63,8 +69,6 @@ export const CardInput = styled.textarea` color: ${({ theme }) => theme.colors.gray2}; - background: ${({ theme }) => theme.colors.white2}; - resize: none; &::-webkit-scrollbar { diff --git a/src/pages/CommunityDetail/components/input/commentInput/CommentInput.tsx b/src/pages/CommunityDetail/components/input/commentInput/CommentInput.tsx index 8bd7f93a..1a3d1cef 100644 --- a/src/pages/CommunityDetail/components/input/commentInput/CommentInput.tsx +++ b/src/pages/CommunityDetail/components/input/commentInput/CommentInput.tsx @@ -22,6 +22,7 @@ const CommnetInput = () => { text, isOverflowed, textareaRef, + isLogin, handleTextChange, handleInput, handleInputFocus, @@ -98,7 +99,7 @@ const CommnetInput = () => { return ( - + { onInput={handleInput} onFocus={handleInputFocus} onBlur={handleInputOutfocus} - placeholder="글을 작성해주세요." + placeholder={isLogin ? '글을 작성해주세요.' : '로그인 후 작성 가능합니다'} maxLength={1001} + disabled={!isLogin} /> {text.length}/1,000자 diff --git a/src/pages/CommunityDetail/hooks/useTextInput.ts b/src/pages/CommunityDetail/hooks/useTextInput.ts index bd45e406..3b951635 100644 --- a/src/pages/CommunityDetail/hooks/useTextInput.ts +++ b/src/pages/CommunityDetail/hooks/useTextInput.ts @@ -1,11 +1,18 @@ -import React, { useState, useRef } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; const useTextInput = (maxChars: number = 1000) => { const [text, setText] = useState(''); const [isOverflowed, setIsOverflowed] = useState(false); const textareaRef = useRef(null); const [isFocus, setIsFocus] = useState(false); + const [isLogin, setIsLogin] = useState(false); + useEffect(() => { + const localKey = localStorage.getItem('user'); + if (localKey) { + setIsLogin(true); + } + }, []); const handleTextChange = (e: React.ChangeEvent) => { const value = e.target.value; setText(value); @@ -32,6 +39,7 @@ const useTextInput = (maxChars: number = 1000) => { text, isOverflowed, textareaRef, + isLogin, handleTextChange, handleInput, handleInputFocus, From 5c0382912c6bca57f3ac66c86eb62ce1773d89bf Mon Sep 17 00:00:00 2001 From: goeun kim Date: Sat, 25 Jan 2025 05:58:39 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat/#171:=20=EC=95=8C=EB=A6=BC=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=ED=98=B8=EB=B2=84=EC=8B=9C=20=EC=95=88=EB=82=B4?= =?UTF-8?q?=EB=AC=B8=EA=B5=AC=20=EC=B6=9C=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svgs/img_speak_bubble.svg | 17 +++++++++ src/assets/svgs/ImgSpeakBubble.tsx | 36 +++++++++++++++++++ src/assets/svgs/index.ts | 1 + src/components/common/header/Header.styled.ts | 28 +++++++++++++++ src/components/common/header/Header.tsx | 18 ++++++++-- 5 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 public/svgs/img_speak_bubble.svg create mode 100644 src/assets/svgs/ImgSpeakBubble.tsx diff --git a/public/svgs/img_speak_bubble.svg b/public/svgs/img_speak_bubble.svg new file mode 100644 index 00000000..b02e12c6 --- /dev/null +++ b/public/svgs/img_speak_bubble.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/ImgSpeakBubble.tsx b/src/assets/svgs/ImgSpeakBubble.tsx new file mode 100644 index 00000000..6f0c84a2 --- /dev/null +++ b/src/assets/svgs/ImgSpeakBubble.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; + +const SvgImgSpeakBubble = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + +); +export default SvgImgSpeakBubble; diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts index e5cc931d..cb6069ab 100644 --- a/src/assets/svgs/index.ts +++ b/src/assets/svgs/index.ts @@ -75,6 +75,7 @@ export { default as ImgPopupNonebookmarkScrappost } from './ImgPopupNonebookmark export { default as ImgPopupNonebookmarkScraptool } from './ImgPopupNonebookmarkScraptool'; export { default as ImgPopupQuit84 } from './ImgPopupQuit84'; export { default as ImgPopupWithdrawal84 } from './ImgPopupWithdrawal84'; +export { default as ImgSpeakBubble } from './ImgSpeakBubble'; export { default as ImgSymbollogo } from './ImgSymbollogo'; export { default as ImgTextlogo } from './ImgTextlogo'; export { default as ImgTextlogo177 } from './ImgTextlogo177'; diff --git a/src/components/common/header/Header.styled.ts b/src/components/common/header/Header.styled.ts index 8ba8b6ea..b1930745 100644 --- a/src/components/common/header/Header.styled.ts +++ b/src/components/common/header/Header.styled.ts @@ -66,6 +66,34 @@ export const StyledLink = styled(Link)` ${({ theme }) => theme.fonts.body_16_b_1}; `; +export const HoverContent = styled.section<{ $visible: boolean }>` + position: absolute; + top: 4.1rem; + right: 18.8rem; + display: ${({ $visible }) => ($visible ? 'block' : 'none')}; + + p { + color: ${({ theme }) => theme.colors.white1}; + } +`; + +export const HoverLayout = styled.div` + position: relative; + + p { + position: absolute; + top: 55%; + left: 50%; + z-index: 99; + width: max-content; + + color: ${({ theme }) => theme.colors.white1}; + ${({ theme }) => theme.fonts.body_16_b_1}; + + transform: translate(-50%, -50%); + } +`; + export const AuthDivider = styled.span` margin: 0 0.8rem; diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx index a8eb95d6..6f3489b3 100644 --- a/src/components/common/header/Header.tsx +++ b/src/components/common/header/Header.tsx @@ -1,4 +1,5 @@ -import { IcAlarmBlack24, IcProfileBlack24, ImgDarudalogo40 } from '@assets/svgs'; +import { IcAlarmBlack24, IcProfileBlack24, ImgDarudalogo40, ImgSpeakBubble } from '@assets/svgs'; +import { useState } from 'react'; import { Link } from 'react-router-dom'; import { Category } from './category/Category'; @@ -44,11 +45,17 @@ const Community = () => ( const Auth = () => { const user = localStorage.getItem('user'); + const [isHover, setIsHovered] = useState(false); + if (user) { return ( - + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > @@ -56,6 +63,13 @@ const Auth = () => { + + +
+

지금은 준비 중이에요

+
+ + ); From fda6765f2a57be1399b0f99d92cc94ff7678d008 Mon Sep 17 00:00:00 2001 From: goeun kim Date: Sat, 25 Jan 2025 05:59:17 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Chore/#171:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20react=20import=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/ImgSpeakBubble.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/assets/svgs/ImgSpeakBubble.tsx b/src/assets/svgs/ImgSpeakBubble.tsx index 6f0c84a2..5ad4b508 100644 --- a/src/assets/svgs/ImgSpeakBubble.tsx +++ b/src/assets/svgs/ImgSpeakBubble.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import type { SVGProps } from 'react'; const SvgImgSpeakBubble = (props: SVGProps) => (