From f03c11da3eb70c16602cdbf1b77bb682493a464d Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 11:16:15 +0900 Subject: [PATCH 01/96] Add writePage --- src/app/write/page.tsx | 11 ++++++++++ src/pageContainer/index.ts | 1 + src/pageContainer/write/index.tsx | 18 ++++++++++++++++ src/pageContainer/write/style.ts | 35 +++++++++++++++++++++++++++++++ 4 files changed, 65 insertions(+) create mode 100644 src/app/write/page.tsx create mode 100644 src/pageContainer/write/index.tsx create mode 100644 src/pageContainer/write/style.ts diff --git a/src/app/write/page.tsx b/src/app/write/page.tsx new file mode 100644 index 00000000..a499b681 --- /dev/null +++ b/src/app/write/page.tsx @@ -0,0 +1,11 @@ +import { Write } from '@/pageContainer'; + +import type { Metadata } from 'next'; + +export const metadata: Metadata = { + title: '게시물 작성 페이지', +}; + +const WritePage = () => ; + +export default WritePage; diff --git a/src/pageContainer/index.ts b/src/pageContainer/index.ts index 4c834d8e..ba6f3659 100644 --- a/src/pageContainer/index.ts +++ b/src/pageContainer/index.ts @@ -2,3 +2,4 @@ export { default as MentorRegister } from './register/mentor'; export { default as MyInfoPage } from './mypage'; export { default as SignIn } from './signin'; export { default as SignUp } from './signup'; +export { default as Write } from './write'; diff --git a/src/pageContainer/write/index.tsx b/src/pageContainer/write/index.tsx new file mode 100644 index 00000000..f2400edb --- /dev/null +++ b/src/pageContainer/write/index.tsx @@ -0,0 +1,18 @@ +'use client'; + +import * as S from './style'; + +const Write = () => { + alert(); + return ( + + 200자 이내 내용 작성* + + + ); +}; + +export default Write; diff --git a/src/pageContainer/write/style.ts b/src/pageContainer/write/style.ts new file mode 100644 index 00000000..768eec14 --- /dev/null +++ b/src/pageContainer/write/style.ts @@ -0,0 +1,35 @@ +import styled from '@emotion/styled'; + +export const TextAreaContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; + padding-left: 1rem; +`; + +export const SmallNoticeText = styled.p` + ${({ theme }) => theme.typo.body2}; + color: ${({ theme }) => theme.color.grey[600]}; +`; + +export const CustomTextArea = styled.textarea<{ isError: boolean }>` + ${({ theme }) => theme.typo.body1}; + color: ${({ theme }) => theme.color.black}; + padding: 1rem; + border: 0.0625rem solid + ${({ theme, isError }) => + isError ? theme.color.error : theme.color.grey[100]}; + border-radius: 0.625rem; + + ::placeholder { + ${({ theme }) => theme.typo.body1}; + color: ${({ theme }) => theme.color.grey[400]}; + } + + :focus { + outline: none; + border: 0.0625rem solid + ${({ theme, isError }) => + isError ? theme.color.error : theme.color.skyBlue[400]}; + } +`; From 98d810f2bba0cfb1a240e6c078622ffb5ea9c507 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 11:23:20 +0900 Subject: [PATCH 02/96] Add pageTitle --- src/pageContainer/write/index.tsx | 30 ++++++++++++++++++------------ src/pageContainer/write/style.ts | 13 +++++++++++++ 2 files changed, 31 insertions(+), 12 deletions(-) diff --git a/src/pageContainer/write/index.tsx b/src/pageContainer/write/index.tsx index f2400edb..918e1a62 100644 --- a/src/pageContainer/write/index.tsx +++ b/src/pageContainer/write/index.tsx @@ -2,17 +2,23 @@ import * as S from './style'; -const Write = () => { - alert(); - return ( - - 200자 이내 내용 작성* - - - ); -}; +import { Header } from '@/components'; + +const Write = () => ( + <> +
+ + 게시물 작성 + + 200자 이내 내용 작성* + + + + +); export default Write; diff --git a/src/pageContainer/write/style.ts b/src/pageContainer/write/style.ts index 768eec14..e881f763 100644 --- a/src/pageContainer/write/style.ts +++ b/src/pageContainer/write/style.ts @@ -1,5 +1,15 @@ import styled from '@emotion/styled'; +export const WriteContainer = styled.div` + padding-top: 6.875rem; +`; + +export const PageTitle = styled.h4` + ${({ theme }) => theme.typo.h4}; + color: ${({ theme }) => theme.color.black}; + margin-bottom: 1.5rem; +`; + export const TextAreaContainer = styled.div` display: flex; flex-direction: column; @@ -15,6 +25,9 @@ export const SmallNoticeText = styled.p` export const CustomTextArea = styled.textarea<{ isError: boolean }>` ${({ theme }) => theme.typo.body1}; color: ${({ theme }) => theme.color.black}; + height: 11rem; + resize: none; + word-break: keep-all; padding: 1rem; border: 0.0625rem solid ${({ theme, isError }) => From d861855ebb377c71a7ff7f41d522b38d64ef0047 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 11:31:21 +0900 Subject: [PATCH 03/96] Add button --- src/pageContainer/write/index.tsx | 3 +++ src/pageContainer/write/style.ts | 18 ++++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/src/pageContainer/write/index.tsx b/src/pageContainer/write/index.tsx index 918e1a62..0f38afb8 100644 --- a/src/pageContainer/write/index.tsx +++ b/src/pageContainer/write/index.tsx @@ -18,6 +18,9 @@ const Write = () => ( /> + + 등록 + ); diff --git a/src/pageContainer/write/style.ts b/src/pageContainer/write/style.ts index e881f763..f3387235 100644 --- a/src/pageContainer/write/style.ts +++ b/src/pageContainer/write/style.ts @@ -46,3 +46,21 @@ export const CustomTextArea = styled.textarea<{ isError: boolean }>` isError ? theme.color.error : theme.color.skyBlue[400]}; } `; + +export const ButtonContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + position: absolute; + bottom: 5rem; + width: 37.5rem; +`; + +export const Button = styled.button` + ${({ theme }) => theme.typo.button}; + background-color: ${({ theme }) => theme.color.skyBlue[400]}; + color: ${({ theme }) => theme.color.white}; + border-radius: 0.625rem; + width: 27.5rem; + height: 2.75rem; +`; From b3b90a2d088e6682c02c8340a2e0ba48d4172d38 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 14:06:33 +0900 Subject: [PATCH 04/96] Add schema --- src/schemas/postContentForm.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/schemas/postContentForm.ts diff --git a/src/schemas/postContentForm.ts b/src/schemas/postContentForm.ts new file mode 100644 index 00000000..056fb412 --- /dev/null +++ b/src/schemas/postContentForm.ts @@ -0,0 +1,5 @@ +import { z } from 'zod'; + +export const postContentFormSchema = z.object({ + name: z.string().min(1, { message: '1글자 이상 입력해주세요.' }), +}); From d4d7b7f9ee2c98911600d0e87e5120adbbbc4e58 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 14:06:45 +0900 Subject: [PATCH 05/96] Add postContentFormType --- src/types/form/postContentForm.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/types/form/postContentForm.ts diff --git a/src/types/form/postContentForm.ts b/src/types/form/postContentForm.ts new file mode 100644 index 00000000..48079f20 --- /dev/null +++ b/src/types/form/postContentForm.ts @@ -0,0 +1,5 @@ +import type { postContentFormSchema } from '@/schemas'; + +import type { z } from 'zod'; + +export type PostContentFormType = z.infer; From 38fc59345980b133380a8e33629289597cf46403 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 14:15:40 +0900 Subject: [PATCH 06/96] Update form --- src/pageContainer/write/index.tsx | 59 +++++++++++++++++++++---------- src/pageContainer/write/style.ts | 11 ++---- src/schemas/index.ts | 1 + src/schemas/postContentForm.ts | 2 +- src/styles/theme.ts | 1 + 5 files changed, 46 insertions(+), 28 deletions(-) diff --git a/src/pageContainer/write/index.tsx b/src/pageContainer/write/index.tsx index 0f38afb8..ea894aa9 100644 --- a/src/pageContainer/write/index.tsx +++ b/src/pageContainer/write/index.tsx @@ -1,27 +1,48 @@ 'use client'; +import { useState } from 'react'; + +import { useForm } from 'react-hook-form'; +import type { SubmitHandler } from 'react-hook-form'; + import * as S from './style'; import { Header } from '@/components'; +import type { PostContentFormType } from '@/types/form/postContentForm'; + +const Write = () => { + const [inputValue, setInputValue] = useState(''); + + const { register, handleSubmit } = useForm({ + defaultValues: { + content: '', + }, + }); + + const onSubmit: SubmitHandler = (data) => { + setInputValue(data.content); + }; -const Write = () => ( - <> -
- - 게시물 작성 - - 200자 이내 내용 작성* - - - - - 등록 - - -); + return ( + <> +
+ + 게시물 작성 + + 200자 이내 내용 작성* + + + + 등록 + + {inputValue} {/*test*/} + + + ); +}; export default Write; diff --git a/src/pageContainer/write/style.ts b/src/pageContainer/write/style.ts index f3387235..ad4d91a5 100644 --- a/src/pageContainer/write/style.ts +++ b/src/pageContainer/write/style.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -export const WriteContainer = styled.div` +export const WriteForm = styled.form` padding-top: 6.875rem; `; @@ -22,17 +22,15 @@ export const SmallNoticeText = styled.p` color: ${({ theme }) => theme.color.grey[600]}; `; -export const CustomTextArea = styled.textarea<{ isError: boolean }>` +export const TextField = styled.textarea` ${({ theme }) => theme.typo.body1}; color: ${({ theme }) => theme.color.black}; height: 11rem; resize: none; word-break: keep-all; padding: 1rem; - border: 0.0625rem solid - ${({ theme, isError }) => - isError ? theme.color.error : theme.color.grey[100]}; border-radius: 0.625rem; + border: 1px solid ${({ theme }) => theme.color.grey[150]}; ::placeholder { ${({ theme }) => theme.typo.body1}; @@ -41,9 +39,6 @@ export const CustomTextArea = styled.textarea<{ isError: boolean }>` :focus { outline: none; - border: 0.0625rem solid - ${({ theme, isError }) => - isError ? theme.color.error : theme.color.skyBlue[400]}; } `; diff --git a/src/schemas/index.ts b/src/schemas/index.ts index afdb5427..4f333926 100644 --- a/src/schemas/index.ts +++ b/src/schemas/index.ts @@ -1,2 +1,3 @@ export * from './mentorInfoForm'; +export * from './postContentForm'; export * from './tempMentorSearchForm'; diff --git a/src/schemas/postContentForm.ts b/src/schemas/postContentForm.ts index 056fb412..adb70415 100644 --- a/src/schemas/postContentForm.ts +++ b/src/schemas/postContentForm.ts @@ -1,5 +1,5 @@ import { z } from 'zod'; export const postContentFormSchema = z.object({ - name: z.string().min(1, { message: '1글자 이상 입력해주세요.' }), + content: z.string().min(1, { message: '1글자 이상 입력해주세요.' }), }); diff --git a/src/styles/theme.ts b/src/styles/theme.ts index cf9bfa68..cf081215 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -71,6 +71,7 @@ const color = { 400: '#A5A6A9', 300: '#B4B5B7', 200: '#CBCCCE', + 150: '#D8D9DA', 100: '#EFF0F2', 50: '#F5F6F8', }, From 9298d76fe18eb8dbe74f5f6da843881c8895f8b8 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 14:38:43 +0900 Subject: [PATCH 07/96] Update style --- src/pageContainer/write/style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pageContainer/write/style.ts b/src/pageContainer/write/style.ts index ad4d91a5..7893664a 100644 --- a/src/pageContainer/write/style.ts +++ b/src/pageContainer/write/style.ts @@ -30,7 +30,7 @@ export const TextField = styled.textarea` word-break: keep-all; padding: 1rem; border-radius: 0.625rem; - border: 1px solid ${({ theme }) => theme.color.grey[150]}; + border: 0.0625rem solid ${({ theme }) => theme.color.grey[150]}; ::placeholder { ${({ theme }) => theme.typo.body1}; @@ -39,6 +39,7 @@ export const TextField = styled.textarea` :focus { outline: none; + border: 0.0625rem solid ${({ theme }) => theme.color.skyBlue[400]}; } `; From 3b89dc60f5be44f1153139c08840cfa3b7175fa9 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 17:51:29 +0900 Subject: [PATCH 08/96] Delete writePage --- src/app/write/page.tsx | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/app/write/page.tsx diff --git a/src/app/write/page.tsx b/src/app/write/page.tsx deleted file mode 100644 index a499b681..00000000 --- a/src/app/write/page.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Write } from '@/pageContainer'; - -import type { Metadata } from 'next'; - -export const metadata: Metadata = { - title: '게시물 작성 페이지', -}; - -const WritePage = () => ; - -export default WritePage; From 6f1ecad04e7a1af9bfc55c22aaea00fa8e0ec6d5 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 17:56:43 +0900 Subject: [PATCH 09/96] Delete useless code --- src/components/TextArea/index.tsx | 42 ++++++------------------------- src/components/TextArea/style.ts | 29 --------------------- 2 files changed, 8 insertions(+), 63 deletions(-) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index ea894aa9..4d320a3e 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -2,46 +2,20 @@ import { useState } from 'react'; -import { useForm } from 'react-hook-form'; -import type { SubmitHandler } from 'react-hook-form'; - import * as S from './style'; -import { Header } from '@/components'; -import type { PostContentFormType } from '@/types/form/postContentForm'; - const Write = () => { const [inputValue, setInputValue] = useState(''); - const { register, handleSubmit } = useForm({ - defaultValues: { - content: '', - }, - }); - - const onSubmit: SubmitHandler = (data) => { - setInputValue(data.content); - }; - return ( - <> -
- - 게시물 작성 - - 200자 이내 내용 작성* - - - - 등록 - - {inputValue} {/*test*/} - - + + + + + ); }; diff --git a/src/components/TextArea/style.ts b/src/components/TextArea/style.ts index 7893664a..81ad89b3 100644 --- a/src/components/TextArea/style.ts +++ b/src/components/TextArea/style.ts @@ -4,12 +4,6 @@ export const WriteForm = styled.form` padding-top: 6.875rem; `; -export const PageTitle = styled.h4` - ${({ theme }) => theme.typo.h4}; - color: ${({ theme }) => theme.color.black}; - margin-bottom: 1.5rem; -`; - export const TextAreaContainer = styled.div` display: flex; flex-direction: column; @@ -17,11 +11,6 @@ export const TextAreaContainer = styled.div` padding-left: 1rem; `; -export const SmallNoticeText = styled.p` - ${({ theme }) => theme.typo.body2}; - color: ${({ theme }) => theme.color.grey[600]}; -`; - export const TextField = styled.textarea` ${({ theme }) => theme.typo.body1}; color: ${({ theme }) => theme.color.black}; @@ -42,21 +31,3 @@ export const TextField = styled.textarea` border: 0.0625rem solid ${({ theme }) => theme.color.skyBlue[400]}; } `; - -export const ButtonContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - position: absolute; - bottom: 5rem; - width: 37.5rem; -`; - -export const Button = styled.button` - ${({ theme }) => theme.typo.button}; - background-color: ${({ theme }) => theme.color.skyBlue[400]}; - color: ${({ theme }) => theme.color.white}; - border-radius: 0.625rem; - width: 27.5rem; - height: 2.75rem; -`; From 873d4749fcc8d916437bcb1dcf9c62b2354ab2e3 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 19:29:06 +0900 Subject: [PATCH 10/96] Add useAutoSizeTextArea --- src/hooks/index.ts | 1 + src/hooks/useAutoSizeTextArea.ts | 14 ++++++++++++++ 2 files changed, 15 insertions(+) create mode 100644 src/hooks/useAutoSizeTextArea.ts diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 61292356..b5ace914 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,2 +1,3 @@ export * from './api'; +export * from './useAutoSizeTextArea'; export * from './useForwardRef'; diff --git a/src/hooks/useAutoSizeTextArea.ts b/src/hooks/useAutoSizeTextArea.ts new file mode 100644 index 00000000..a415ed50 --- /dev/null +++ b/src/hooks/useAutoSizeTextArea.ts @@ -0,0 +1,14 @@ +import { useEffect } from 'react'; + +export const useAutosizeTextArea = ( + textAreaRef: HTMLTextAreaElement | null, + value: string +) => { + useEffect(() => { + if (textAreaRef) { + textAreaRef.style.height = '0px'; + const scrollHeight = textAreaRef.scrollHeight; + textAreaRef.style.height = scrollHeight + 'px'; + } + }, [textAreaRef, value]); +}; From 71eeafb7ed0b948f9649736730f4620bc584241a Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 19:31:18 +0900 Subject: [PATCH 11/96] Add uploadIcon --- src/assets/UploadIcon.tsx | 17 +++++++++++++++++ src/assets/index.ts | 1 + 2 files changed, 18 insertions(+) create mode 100644 src/assets/UploadIcon.tsx diff --git a/src/assets/UploadIcon.tsx b/src/assets/UploadIcon.tsx new file mode 100644 index 00000000..f3e1441a --- /dev/null +++ b/src/assets/UploadIcon.tsx @@ -0,0 +1,17 @@ +const UploadIcon = () => ( + + + + +); + +export default UploadIcon; diff --git a/src/assets/index.ts b/src/assets/index.ts index f974775e..8dae0e97 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -28,3 +28,4 @@ export { default as SNSIcon } from './SNSIcon'; export { default as SearchIcon } from './SearchIcon'; export { default as SearchNotFoundIcon } from './SearchNotFoundIcon'; export { default as TriangleIcon } from './TriangleIcon'; +export { default as UploadIcon } from './UploadIcon'; From 642732006d186b067d46768bb00f3d22ace0bb3c Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 19:35:10 +0900 Subject: [PATCH 12/96] Update sylte --- src/components/TextArea/index.tsx | 31 +++++++++++++++++-------- src/components/TextArea/style.ts | 38 +++++++++++++++++++++---------- 2 files changed, 48 insertions(+), 21 deletions(-) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index 4d320a3e..08e3e1e2 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -1,21 +1,34 @@ 'use client'; -import { useState } from 'react'; +import { useState, useRef } from 'react'; import * as S from './style'; +import { UploadIcon } from '@/assets'; +import { useAutosizeTextArea } from '@/hooks'; + const Write = () => { const [inputValue, setInputValue] = useState(''); + const textAreaRef = useRef(null); + + useAutosizeTextArea(textAreaRef.current, inputValue); return ( - - - - - + + setInputValue(e.target.value)} + ref={textAreaRef} + /> + {inputValue.length > 0 && ( + + {inputValue.length}/200 + + + )} + ); }; diff --git a/src/components/TextArea/style.ts b/src/components/TextArea/style.ts index 81ad89b3..ff94e7a0 100644 --- a/src/components/TextArea/style.ts +++ b/src/components/TextArea/style.ts @@ -1,25 +1,26 @@ import styled from '@emotion/styled'; -export const WriteForm = styled.form` - padding-top: 6.875rem; -`; - export const TextAreaContainer = styled.div` display: flex; - flex-direction: column; - gap: 0.5rem; - padding-left: 1rem; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 0 0.75rem 1.25rem; + width: 37.5rem; + height: auto; + border: 0.0625rem solid ${({ theme }) => theme.color.grey[150]}; + border-radius: 0.625rem; `; export const TextField = styled.textarea` ${({ theme }) => theme.typo.body1}; color: ${({ theme }) => theme.color.black}; - height: 11rem; + width: 100%; + min-height: 1.5rem; resize: none; - word-break: keep-all; - padding: 1rem; - border-radius: 0.625rem; - border: 0.0625rem solid ${({ theme }) => theme.color.grey[150]}; + border: 0; + padding: 0; + overflow: visible; + height: 0; ::placeholder { ${({ theme }) => theme.typo.body1}; @@ -31,3 +32,16 @@ export const TextField = styled.textarea` border: 0.0625rem solid ${({ theme }) => theme.color.skyBlue[400]}; } `; + +export const UploadWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 0.25rem; + align-items: center; + justify-content: center; +`; + +export const MaxLengthNotice = styled.span` + ${({ theme }) => theme.typo.caption}; + color: ${({ theme }) => theme.color.grey[400]}; +`; From e588f822f29191d79425b68e5d13477e8c651634 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 19:59:07 +0900 Subject: [PATCH 13/96] Update focus --- src/components/TextArea/index.tsx | 29 ++++++++++++++++++++++++++--- src/components/TextArea/style.ts | 14 ++++++-------- 2 files changed, 32 insertions(+), 11 deletions(-) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index 08e3e1e2..ab0cf63b 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useRef } from 'react'; +import { useState, useRef, useEffect } from 'react'; import * as S from './style'; @@ -10,11 +10,32 @@ import { useAutosizeTextArea } from '@/hooks'; const Write = () => { const [inputValue, setInputValue] = useState(''); const textAreaRef = useRef(null); + const [isFocused, setIsFocused] = useState(false); useAutosizeTextArea(textAreaRef.current, inputValue); + // textArea의 focus를 컨트롤합니다. -> focus시 border 변경. + useEffect(() => { + const currentTextAreaRef = textAreaRef.current; + + const onFocus = () => setIsFocused(true); + const offFocus = () => setIsFocused(false); + + if (currentTextAreaRef) { + currentTextAreaRef.addEventListener('focus', onFocus); + currentTextAreaRef.addEventListener('blur', offFocus); + } + + return () => { + if (currentTextAreaRef) { + currentTextAreaRef.removeEventListener('focus', onFocus); + currentTextAreaRef.removeEventListener('blur', offFocus); + } + }; + }, []); + return ( - + { {inputValue.length > 0 && ( {inputValue.length}/200 - + )} diff --git a/src/components/TextArea/style.ts b/src/components/TextArea/style.ts index ff94e7a0..d3d5e422 100644 --- a/src/components/TextArea/style.ts +++ b/src/components/TextArea/style.ts @@ -1,13 +1,15 @@ import styled from '@emotion/styled'; -export const TextAreaContainer = styled.div` +export const TextAreaContainer = styled.div<{ isFocused: boolean }>` display: flex; align-items: center; gap: 0.75rem; - padding: 0.75rem 0 0.75rem 1.25rem; + padding: 0.75rem 1.25rem 0.75rem 1.25rem; width: 37.5rem; height: auto; - border: 0.0625rem solid ${({ theme }) => theme.color.grey[150]}; + border: 0.0625rem solid + ${({ theme, isFocused }) => + isFocused ? theme.color.skyBlue[400] : theme.color.grey[150]}; border-radius: 0.625rem; `; @@ -21,16 +23,12 @@ export const TextField = styled.textarea` padding: 0; overflow: visible; height: 0; + outline: none; ::placeholder { ${({ theme }) => theme.typo.body1}; color: ${({ theme }) => theme.color.grey[400]}; } - - :focus { - outline: none; - border: 0.0625rem solid ${({ theme }) => theme.color.skyBlue[400]}; - } `; export const UploadWrapper = styled.div` From 4a916082903f2c3bafeac2437983c9889d8770c5 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 20:12:46 +0900 Subject: [PATCH 14/96] Add export --- src/components/TextArea/index.tsx | 4 ++-- src/components/index.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index ab0cf63b..9953c160 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -7,7 +7,7 @@ import * as S from './style'; import { UploadIcon } from '@/assets'; import { useAutosizeTextArea } from '@/hooks'; -const Write = () => { +const TextArea = () => { const [inputValue, setInputValue] = useState(''); const textAreaRef = useRef(null); const [isFocused, setIsFocused] = useState(false); @@ -55,4 +55,4 @@ const Write = () => { ); }; -export default Write; +export default TextArea; diff --git a/src/components/index.ts b/src/components/index.ts index 7a0bcbcb..0c4a5068 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -18,6 +18,7 @@ export { default as SearchBar } from './SearchBar'; export { default as SearchNotFound } from './SearchNotFound'; export { default as Select } from './Select'; export { default as TempMentorCard } from './TempMentorCard'; +export { default as TextArea } from './TextArea'; export { default as ToolTip } from './ToolTip'; export { default as UserStatusSelect } from './UserStatusSelect'; // export { default as RegisterForm } from './RegisterForm'; From 52293fc8c675116799c6959abf2f5bc292347bce Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 23 Nov 2023 20:17:38 +0900 Subject: [PATCH 15/96] Delete useless code --- src/schemas/index.ts | 1 - src/schemas/postContentForm.ts | 5 ----- src/types/form/postContentForm.ts | 5 ----- 3 files changed, 11 deletions(-) delete mode 100644 src/schemas/postContentForm.ts delete mode 100644 src/types/form/postContentForm.ts diff --git a/src/schemas/index.ts b/src/schemas/index.ts index 4f333926..afdb5427 100644 --- a/src/schemas/index.ts +++ b/src/schemas/index.ts @@ -1,3 +1,2 @@ export * from './mentorInfoForm'; -export * from './postContentForm'; export * from './tempMentorSearchForm'; diff --git a/src/schemas/postContentForm.ts b/src/schemas/postContentForm.ts deleted file mode 100644 index adb70415..00000000 --- a/src/schemas/postContentForm.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { z } from 'zod'; - -export const postContentFormSchema = z.object({ - content: z.string().min(1, { message: '1글자 이상 입력해주세요.' }), -}); diff --git a/src/types/form/postContentForm.ts b/src/types/form/postContentForm.ts deleted file mode 100644 index 48079f20..00000000 --- a/src/types/form/postContentForm.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { postContentFormSchema } from '@/schemas'; - -import type { z } from 'zod'; - -export type PostContentFormType = z.infer; From 5341e6a9e840876d8b9854deca6feca38a1582b8 Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Fri, 24 Nov 2023 03:29:37 +0900 Subject: [PATCH 16/96] Update Header nav --- src/components/Header/index.tsx | 7 +++++-- src/components/Header/style.ts | 5 +++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 16d98959..27a02d8a 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -37,9 +37,12 @@ const Header: React.FC = ({ clearList }) => { - + + 커뮤니티 + + {/* 멘토 컨택 - + */} {!data && ( 멘토 등록 )} diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts index 4c12fef8..732ff051 100644 --- a/src/components/Header/style.ts +++ b/src/components/Header/style.ts @@ -37,6 +37,11 @@ export const LogoLink = styled(Link)` column-gap: 0.38rem; `; +export const CommunityLink = styled(Link)` + ${({ theme }) => theme.typo.body1}; + color: ${({ theme }) => theme.color.grey[400]}; +`; + export const MentorContact = styled.button` ${({ theme }) => theme.typo.body1}; color: ${({ theme }) => theme.color.grey[400]}; From b1f09674c84519103157c8820e2c50805d27b805 Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Fri, 24 Nov 2023 03:30:03 +0900 Subject: [PATCH 17/96] Remove unused code --- src/components/Header/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 27a02d8a..905579a1 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -21,8 +21,6 @@ const Header: React.FC = ({ clearList }) => { const { push } = useRouter(); - const comingSoonToast = () => toast.info('곧 출시 예정입니다. 감사합니다.'); - const handleProfileClick = () => { if (data) push('/mypage'); else toast.info('멘티인 사용자에게는 지원되지 않는 기능입니다.'); From a837376f50a43ca724f92cc236be73eaed59d99c Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 25 Nov 2023 17:05:52 +0900 Subject: [PATCH 18/96] Update uploadIcon --- src/assets/UploadIcon.tsx | 12 ++++++------ src/components/TextArea/index.tsx | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/assets/UploadIcon.tsx b/src/assets/UploadIcon.tsx index f3e1441a..43d254ec 100644 --- a/src/assets/UploadIcon.tsx +++ b/src/assets/UploadIcon.tsx @@ -1,14 +1,14 @@ const UploadIcon = () => ( - + diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index 9953c160..1983e7cd 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -45,7 +45,7 @@ const TextArea = () => { /> {inputValue.length > 0 && ( - {inputValue.length}/200 + {200 - inputValue.length} From aad47093d9868ed328c50cca5c6ae924a4ec1d3a Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 25 Nov 2023 17:22:38 +0900 Subject: [PATCH 19/96] Update style --- src/components/TextArea/index.tsx | 15 +++++++++------ src/components/TextArea/style.ts | 4 ++++ src/hooks/useAutoSizeTextArea.ts | 7 +++++-- 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index 1983e7cd..c5e2f21b 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -11,10 +11,11 @@ const TextArea = () => { const [inputValue, setInputValue] = useState(''); const textAreaRef = useRef(null); const [isFocused, setIsFocused] = useState(false); + const [isMultiLine, setIsMultiLine] = useState(false); - useAutosizeTextArea(textAreaRef.current, inputValue); + useAutosizeTextArea(textAreaRef.current, inputValue, setIsMultiLine); - // textArea의 focus를 컨트롤합니다. -> focus시 border 변경. + // textArea의 focus를 컨트롤합니다. -> focus 시 border 변경. useEffect(() => { const currentTextAreaRef = textAreaRef.current; @@ -37,7 +38,7 @@ const TextArea = () => { return ( setInputValue(e.target.value)} @@ -45,10 +46,12 @@ const TextArea = () => { /> {inputValue.length > 0 && ( - {200 - inputValue.length} - + )} diff --git a/src/components/TextArea/style.ts b/src/components/TextArea/style.ts index d3d5e422..4188b678 100644 --- a/src/components/TextArea/style.ts +++ b/src/components/TextArea/style.ts @@ -43,3 +43,7 @@ export const MaxLengthNotice = styled.span` ${({ theme }) => theme.typo.caption}; color: ${({ theme }) => theme.color.grey[400]}; `; + +export const UploadButton = styled.button` + display: flex; +`; diff --git a/src/hooks/useAutoSizeTextArea.ts b/src/hooks/useAutoSizeTextArea.ts index a415ed50..dbfd6fb4 100644 --- a/src/hooks/useAutoSizeTextArea.ts +++ b/src/hooks/useAutoSizeTextArea.ts @@ -1,14 +1,17 @@ +import type { Dispatch, SetStateAction } from 'react'; import { useEffect } from 'react'; export const useAutosizeTextArea = ( textAreaRef: HTMLTextAreaElement | null, - value: string + value: string, + setIsMultiLine: Dispatch> ) => { useEffect(() => { if (textAreaRef) { textAreaRef.style.height = '0px'; const scrollHeight = textAreaRef.scrollHeight; + setIsMultiLine(scrollHeight > 24); textAreaRef.style.height = scrollHeight + 'px'; } - }, [textAreaRef, value]); + }, [textAreaRef, value, setIsMultiLine]); }; From 207e654899eeafd9cac335fa28cebf9c56c32d4d Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 25 Nov 2023 19:57:24 +0900 Subject: [PATCH 20/96] Delete grey 150 --- src/components/TextArea/style.ts | 2 +- src/styles/theme.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/TextArea/style.ts b/src/components/TextArea/style.ts index 4188b678..c1591514 100644 --- a/src/components/TextArea/style.ts +++ b/src/components/TextArea/style.ts @@ -9,7 +9,7 @@ export const TextAreaContainer = styled.div<{ isFocused: boolean }>` height: auto; border: 0.0625rem solid ${({ theme, isFocused }) => - isFocused ? theme.color.skyBlue[400] : theme.color.grey[150]}; + isFocused ? theme.color.skyBlue[400] : theme.color.grey[200]}; border-radius: 0.625rem; `; diff --git a/src/styles/theme.ts b/src/styles/theme.ts index cf081215..cf9bfa68 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -71,7 +71,6 @@ const color = { 400: '#A5A6A9', 300: '#B4B5B7', 200: '#CBCCCE', - 150: '#D8D9DA', 100: '#EFF0F2', 50: '#F5F6F8', }, From 727603e1dc8147d3f617fb175c6af30976e0565f Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 25 Nov 2023 20:08:17 +0900 Subject: [PATCH 21/96] Add textArea in page --- src/pageContainer/gwangya/index.tsx | 5 ++++- src/pageContainer/gwangya/style.ts | 5 +++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pageContainer/gwangya/index.tsx b/src/pageContainer/gwangya/index.tsx index 73748832..35f4a7f3 100644 --- a/src/pageContainer/gwangya/index.tsx +++ b/src/pageContainer/gwangya/index.tsx @@ -2,7 +2,7 @@ import * as S from './style'; -import { Header } from '@/components'; +import { Header, TextArea } from '@/components'; const Gwangya = () => ( <> @@ -15,6 +15,9 @@ const Gwangya = () => ( + +