[Feature/new post] 커뮤니티 새로운 글 작성 페이지 구현 by 10hajin15 · Pull Request #30 · CheeUp/CheeUp-FE

10hajin15 · 2024-12-31T08:19:13Z

📍 PR 타입 (하나 이상 선택)

기능 추가
버그 수정
의존성, 환경 변수, 빌드 관련 코드 업데이트
기타 사소한 수정

❗️ 관련 이슈 [#]

📄 개요

게시판 선택 드롭다운 컴포넌트를 구현하였습니다.
(기존 컴포넌트 드롭다운은 다중 선택이라 재사용하기 어려운 부분이 있어 새로 구현하였습니다.)
markdown으로 글을 작성할 수 있도록 구현하였습니다.

🔁 변경 사항

(up, down)Arrow Icon의 width, height, fill을 props로 받아오도록 수정 (#f42bb4a)
게시판 선택 드롭다운 (#d289eb8)
Markdown으로 글 작성할 수 있도록 Editor 구현 (#bf9a18b)

📸 스크린샷

👀 기타 더 이야기해볼 점

단일 선택 가능한 dropdown을 공통 UI 컴포넌트로 구현

junhakjh

이후 메인에 반영될 범용 드롭다운 컴포넌트를 사용하면 좋을 듯 합니다!
요소의 사이즈 관련 css를 설정할 때 px보다는 rem을 지향하면 좋을 것 같아요!
고생하셨습니다 :)

src/components/community/BoardDropdown.tsx

okxooxoo

하진님 고생하셨습니다 :>

okxooxoo · 2024-12-31T09:19:45Z

src/components/community/BoardDropdown.tsx

+        <div className={`text-body2 ${selectedBoard ? 'text-deepgray' : 'text-disabled'}`}>
+          {selectedBoard || '카테고리'}
+        </div>
+        <div className='cursor-pointer' onClick={() => setIsOpen(!isOpen)}>


BoardDropdown 바깥을 클릭하면 close 되도록 하는 코드도 추가되면 좋을 것 같습니다! ☺️

원래는 그런 방식으로 구현을 하였다가, 화살표 아이콘이 명확하게 있어서 화살표 아이콘만 선택해서 드롭다운을 열고 닫고 하는 방식으로 바꾸었습니다. 추후에 공통으로 재사용 가능한 드롭다운을 만들 예정이라 그때 이 부분 반영해서 구현하겠습니다 :)
리뷰 주셔서 감사해요 ☺️

10hajin15 · 2024-12-31T10:12:49Z

이후 메인에 반영될 범용 드롭다운 컴포넌트를 사용하면 좋을 듯 합니다! 요소의 사이즈 관련 css를 설정할 때 px보다는 rem을 지향하면 좋을 것 같아요! 고생하셨습니다 :)

안녕하세요 준하님 🙌

의견 주신대로 재사용한 컴포넌트로 만들면 좋을 것 같아요!
px 대신 rem을 지향하는 의견도 좋다고 생각해요!! 다만, 제가 이번 구현에서 px을 사용한 이유는, 상대 단위는 반응형 디자인에 대응할 수 있지만 아직 반응형 디자인 적용에 대한 명확한 논의가 이루어지지 않아 우선적으로 피그마에서 구현된 디자인을 충실히 구현하고자 px 단위를 사용했습니다. 추후에 제가 맡은 다른 페이지과 함께 반응형을 고려하여 rem으로 일괄적으로 수정하도록 하겠습니다!!

의견 주셔서 감사합니다 :)

okxooxoo

하진님 정말 고생하셨어요! 코드 읽고 많이 배워갑니다!
질문과 건의사항 몇 가지 달았으니 천천히 확인 부탁드립니다 ㅎㅎ
감사합니다 :)

okxooxoo · 2024-12-31T14:31:44Z

src/components/pages/community/post/index.tsx

+        <div className='mt-[32px] flex justify-end'>
+          <Button className='mr-[10px]' type='outlined' onClick={handleCancel}>
+            취소
+          </Button>
+          <Button type='filled' onClick={handleSubmit}>
+            등록
+          </Button>


mr-[10px] 대신에 버튼을 감싸는 div 태그에 gap-4 스타일을 추가하시는 건 어떻게 생각하시나요?!
그렇게 되면 div 안에 새로운 버튼을 추가하더라도 자동으로 간격이 생길 것 같아요! 🙂

okxooxoo · 2024-12-31T14:56:26Z

src/App.tsx

 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import PortfolioPage from '@/components/pages/portfolio';
 import NewPortfolioPage from '@/components/pages/portfolio/new';
+import NewPostPage from '@/components/pages/community/post';


기존에 path을 pages의 하위 폴더명과 일치시키자고 이야기 했던 것 같아요!
따라서 /community/new 경로로 이동하니 post가 아닌 new 폴더에 NewPostPage 컴포넌트를 두는 건 어떠세요오?

엇 경로 수정하면서 폴더명은 수정을 안했네요!!! 감사합니다 :)
수정하겠습니다!

okxooxoo · 2024-12-31T15:04:45Z

src/components/pages/community/post/index.tsx

+              <MDEditor
+                textareaProps={{
+                  placeholder: '제목을 입력하세요.',
+                  maxLength: 30,
+                }}
+                minHeight={44}
+                visibleDragbar={false}
+                value={title}
+                onChange={handleChange(setTitle)}
+                extraCommands={[]}
+                hideToolbar={true}
+                enableScroll={false}
+                preview='edit'
+                className='border border-b-0 border-border shadow-none'
+              />
+            </div>
+            <div className='h-[calc(100%-44px)]'>
+              <MDEditor
+                textareaProps={{
+                  placeholder: '내용을 작성하세요.',
+                }}
+                visibleDragbar={false}
+                height='100%'
+                value={content}
+                onChange={handleChange(setContent)}
+                extraCommands={[]}
+                preview='edit'
+                className='border border-border shadow-none'


자식 컴포넌트 하나하나마다 border 스타일을 추가하는 방법 대신에
이를 감싸는 부모 div에 divide-x 혹은 divide-y을 추가하는 방법도 있어요!

요렇게 하면 좀더 확장성 있게 스타일링 할 수 있을 것 같습니다! ☺️

okxooxoo · 2024-12-31T15:11:11Z

src/index.css

+.title-section .w-md-editor-text {
+  display: flex;
+  align-items: center; 
+  height: 44px;
+}
+
+.title-section textarea.w-md-editor-text-input {


요거 제가 정말 잘 몰라서 그러는데.. w-md-editor-text 어떤 클래스인가요?! 궁금합니다!

react-md-editor 패키지에서 MDEditor 컴포넌트를 사용하고 있는데 거기서 만들어주는 요소 클래스명이에요!!

okxooxoo · 2024-12-31T15:15:25Z

src/components/pages/community/post/index.tsx

+            <MDEditor.Markdown
+              source={content}
+              className='h-[calc(100%-44px)] overflow-auto rounded-b-[3px] px-[20px] py-[10px]'
+            />


실행해봤는데 마크다운 적용되는 에디터 신기하네요! 정말 고생 많으셨습니다 🥰

지금도 너무 마음에 들고 잘 작동하는데,
좌측 에디터에서 텍스트가 추가될 때마다 우측 에디터에서 자동으로 스크롤이 최하단으로 이동했으면 좋겠습니다!
혹시 그 부분은 구현이 많이 어려울까요? 😮 감사합니다!

2024-12-31.11.47.44.mov

* ✨ feat: useCalendar -> useCalendar, useRecruitCalendar로 분리 * ✨ feat: 캘린더 아이콘 추가 * ✨ feat: DatePicker 컴포넌트 구현 * ✨ feat: 공고 이미지, 직무 상세 요강 제외 채용공고 등록 페이지 구현 * ✨ feat: 취업공고 작성 페이지 라우팅 * ♻️ refactor: useTextInput, useId 적용 * ♻️ refactor: dropdown 컴포넌트 rename, 폴더 이동

…into feature/NewPost

junhakjh

고생하셨습니다 :)

junhakjh · 2025-01-03T06:01:31Z

src/components/pages/community/post/index.tsx

+  const [content, setContent] = useState<string>('');
+  const [selectedBoard, setSelectedBoard] = useState<string>('카테고리');
+
+  const handleChange = (setter: React.Dispatch<React.SetStateAction<string>>) => {


useState를 사용하지 않고, 저희 프로젝트의 커스텀 훅에 있는 useTextInput을 사용하면 handleChange라는 함수가 없어도 될 것 같아요!

GuKBABjOa

하진님 수고하셨습니다

10hajin15 added 5 commits December 31, 2024 15:52

✨ feat: SVG 컴포넌트 width, height, fill 동적으로 설정 가능하도록 수정

f42bb4a

🚚 chore: react-md-editor 패키지 설치

7f42e99

✨ feat: 새로운 글 작성 경로 /community/new 설정

dc58c88

💄 style: react-md-editor 스타일 수정

c861f32

✨ feat: BoardDropdown 컴포넌트 구현

d289eb8

10hajin15 added the ✨ Feature label Dec 31, 2024

10hajin15 requested review from GuKBABjOa, junhakjh and okxooxoo December 31, 2024 08:48

10hajin15 self-assigned this Dec 31, 2024

junhakjh reviewed Dec 31, 2024

View reviewed changes

src/components/community/BoardDropdown.tsx Show resolved Hide resolved

✨ feat: 커뮤니티 새로운 글 작성 페이지 구현

bf9a18b

okxooxoo reviewed Dec 31, 2024

View reviewed changes

🐛 fix: 제목 입력 칸 세로로 중앙 정렬되도록 수정!

0518a5b

10hajin15 changed the title ~~[Feature/new post] 게시판 선택 드롭다운 컴포넌트 구현~~ [Feature/new post] 커뮤니티 새로운 글 작성 페이지 구현 Dec 31, 2024

okxooxoo reviewed Dec 31, 2024

View reviewed changes

junhakjh and others added 11 commits January 1, 2025 12:03

🚚 chore: react-md-editor 패키지 설치

46eac53

✨ feat: 새로운 글 작성 경로 /community/new 설정

60e3269

💄 style: react-md-editor 스타일 수정

663fe11

✨ feat: BoardDropdown 컴포넌트 구현

da94c4d

✨ feat: 커뮤니티 새로운 글 작성 페이지 구현

adfe56e

🐛 fix: 제목 입력 칸 세로로 중앙 정렬되도록 수정!

a76f4e8

Merge branch 'feature/NewPost' of https://github.com/CheeUp/CheeUp-FE …

64969ba

…into feature/NewPost

♻️ refactor: ArrowIcon 타입 수정

d004ab4

♻️ refactor: 커뮤니티 새 글 등록 경로 수정

ab05816

♻️ refactor: ArrowIcon props 수정

1239a21

minjumost removed the ✨ Feature label Jan 3, 2025

junhakjh reviewed Jan 3, 2025

View reviewed changes

GuKBABjOa reviewed Jan 5, 2025

View reviewed changes

Comments

Conversation

10hajin15 commented Dec 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📍 PR 타입 (하나 이상 선택)

❗️ 관련 이슈 [#]

📄 개요

🔁 변경 사항

📸 스크린샷

👀 기타 더 이야기해볼 점

Uh oh!

junhakjh left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

okxooxoo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

10hajin15 commented Dec 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

okxooxoo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

junhakjh left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GuKBABjOa left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

10hajin15 commented Dec 31, 2024 •

edited

Loading

10hajin15 commented Dec 31, 2024 •

edited

Loading