[Refactor] 공통 컴포넌트 리팩토링 by dalzzy · Pull Request #43 · Leets-Official/SEEAT-FE

dalzzy · 2025-07-31T16:31:23Z

🔍 관련된 이슈

closed [Refactor] #29 공통 컴포넌트 + 좌석 배치 모달 리팩토링 #29

📝 작업 내용

⚠️대공사를 해서 내용이 좀 많습니다,,

<공통 컴포넌트 리팩토링>

Input : 간단한 스타일 수정
Textarea 리팩토링

placeholderColorType prop 제거
required 시 * 표시 추가
showEmptyWarning / showMinLengthWarning 분리하여 메시지 중복 방지
validation 메시지는 동시에 하나만 보이도록 조건 분기 처리

Header 리팩토링

leftSection, rightSection props로 레이아웃 제어
leftSection: 'BACK' | 'LOGO' | 'NONE' ( 순서대로 -> 뒤로가기 | 텍스트 로고 | 아무것도 x )
rightSection: 'SETTING' | 'DETAIL' | 'KEBAB' | 'NONE' ( 설정 | 리뷰 상세페이지 아이콘들 | 케밥버튼 아이콘 )
타이틀은 children으로 전달.
BackButton, DetailButton 등은 별도 컴포넌트로 분리
BackButton: 기본 동작은 navigate(-1) / 필요 시 커스텀 onClick 가능
DetailButton: 하트 / 북마크 / 케밥 버튼 (리뷰 상세 페이지에서 사용 )
fixed 헤더를 사용해서 모든 하단 컨텐츠에 pt-[44px] 혹은 그 이상.. 값으로 겹침 방지

모달 리팩토링

기존에는 Modal props까지 전역상태관리를 했었는데 modalType과 isOpen만 전역 상태로 관리하고,
나머지 props는 모달을 사용하는 컴포넌트에서 직접 전달하도록 구조 변경
App.tsx에서 불필요해진 <Modal/> 코드 삭제
사용 시 openModal('confirm') 이렇게 모달 타입을 지정한 후

      {modalType === 'confirm' && (
        <ConfirmModal
          title="후기를 등록하시겠어요?"
          subWarningText="탈퇴하면 7일 후 다시 가입할 수 있어요."
          subtitle="등록한 후기는 마이페이지에서 확인할 수 있어요."
          confirmText="등록하기"
          cancelText="취소"
        />
      )}

이런식으로 쓰면 됩니당

모달의 기본 레이아웃( 배경색 흐리게, 위치 ) 은 BaseModal로 분리
나머지는 BaseModal을 기반으로 구현
기존의 모달 컴포넌트는 ConfirmModal로 분리했습니다!

<좌석 배치 모달 리팩토링 + 새 컴포넌트 추가>

좌석 관련 모달 타입을 SeatPicker | SeatFocus | SeatWrite로 분리
→ 좌석 배치 모달의 사용 목적(후기 조회, 리뷰 작성, 특정 좌석 위치 포커싱 등)에 따라 UI가 달라지기 때문에, SeatModal 컴포넌트에서 모달 타입에 따라 각각 다른 컴포넌트를 조건부 렌더링하도록 구현했습니다.
SeatWrite 모달은 선택한 좌석아이디를 전역상태관리하도록 구현했습니다.

📸 스크린샷

2025-08-01.1.20.10.mov

Write 모달 열렸을 때 클릭 시 계속 좌석이 새로고침되는 건 목데이터가 계속 새로운 배열을 만들도록 되어 있어서 그렇습니당,,

Textarea 스타일 수정한 것

🚨 이슈

SeatFocus모달에서 해당하는 좌석의 위치로 포커싱이 되도록 했는데, 오른쪽에 위치한 좌석들은 잘 포커싱이 되는데 왼쪽에 있는 좌석들은 좌석이 표시가 안되는 이슈가 있습니다,,, (영상처럼 K21, K22 이렇게 오른쪽에 있는 좌석들은 잘 뜨는데 K05,K06 이런 좌석들은 표시가 안됨.. )

아마 수정할 부분이 더 있을텐데 우선 여기까지만 구현해놨습니당..

📣 리뷰 요구사항

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성

컴포넌트 리팩토링 후 해당 컴포넌트가 사용된 모든 페이지를 수정하다보니 변경 사항이 좀 많습니다..ㅜㅜ 죄송함니다
내용이 많긴한데 꼼꼼히 ,, 봐주세용..

그리고 제 PR이 머지되면 아마 충돌이 많이 발생할 것 같습니다,,, ㅜㅜ

현재 브랜치에서 해당 페이지를 수정하지 않았다면 모든 변경사항을 incoming 기준으로 병합해주시면 되고,

만약 수정한 부분이 있다면 헤더,모달,input,textarea 관련 코드만 incoming으로 수락해주시면 될 것 같아요..!

변경 범위가 꽤 많아 미리 양해의 말씀 드립니다 ,, 😭😭

✅ 체크리스트

코드가 정상적으로 컴파일되나요?
merge할 브랜치의 위치를 확인했나요?
Label을 지정했나요?
리뷰어를 지정했나요?

sispo3314

변경사항 모두 확인했습니다!! 다른 컴포넌트들까지 수정하시느라 정말 고생하셨어요...
작업내용을 상세하게 적어주셔서 변경된 부분이 많아도 쉽게 파악할 수 있었습니다!! 수고하셨습니당 👏👏

sispo3314 · 2025-07-31T16:56:46Z

src/components/common/Header/DetailButton.tsx

하나하나 prop 지정하기 번거로웠는데 이렇게 컴포넌트로 묶으면 한번에 관리할 수 있겠네요!! 너무 좋은 것 같습니당 👏👏

sispo3314 · 2025-07-31T16:59:13Z

src/components/common/Header/Header.tsx

+  leftSection?: 'BACK' | 'LOGO' | 'NONE';
+  rightSection?: 'SETTING' | 'DETAIL' | 'KEBAB' | 'NONE';


오 이렇게 묶으면 사용하기도 편하고 코드도 훨씬 간결해질 것 같아요! 🙌

sispo3314 · 2025-07-31T17:18:32Z

src/components/common/Input/Input.tsx

@@ -47,7 +45,7 @@ export default function InputField({
          'flex h-[48px] w-[335px] items-center rounded-lg border px-3',


textarea에서 w-full을 디폴트로 받고 있어서 여기도 w-full로 수정하면 좋을 것 같아요!! 이건 그냥 제가 해도 됩니당

아항 이거때문에 /review/info 페이지에서 input 너비가 옹졸하게 보인 것이였군여,, 수정했슴니다!!

sispo3314 · 2025-07-31T17:22:21Z

src/components/common/Modal/SeatModal/SeatModal.tsx

여기 케이스별로 모달 분기 처리 깔끔하게 잘 해주신 것 같아요👍👍 타입에 따라서 각 모달이 명확히 분리되어 있어서 가독성도 좋고 추후 유지보수에도 좋을 것 같습니다

soyun-git121 · 2025-08-02T03:50:44Z

src/pages/search/ReviewSearchResult.tsx

헤더 부분들 수정해주셔서 감사합니다ㅜㅜ!

soyun-git121 · 2025-08-02T03:56:43Z

src/components/common/Textarea/Textarea.tsx

+  showEmptyWarning?: boolean;
+  showMinLengthWarning?: boolean;
+  required?: boolean;
+  className?: string;


textarea컴포넌트 구현이 미흡했던거같은데 이런식으로 하면되군용..!

soyun-git121 · 2025-08-02T04:03:10Z

src/pages/my/MyFeedback.tsx

+        <Header leftSection="BACK" rightSection="KEBAB">
+          의견 보내기
+        </Header>


헤더 컴포넌트 수정해서 훨씬깔끔해진거같아용!

soyun-git121

나머지 부분도 코드 다 확인했습니당 작은부분까지 다 수정해주셔서 코드들이 훨씬깔끔해진거같아요! 변경사항많은데 수고하셨습니다ㅜㅜ 머지되면 잘 병합해보겠습니당!

dalzzy added 20 commits July 29, 2025 22:58

refactor: #29 모달 컴포넌트 레이아웃 분리

bbd648a

refactor: #29 modalStore 리팩토링

f7d278a

refactor: #29 불필요한 ModalProps 제거

a5b6dec

refactor: #29 모달 props 관리 방식 변경

8678ad6

refactor: #29 BaseModal에 맞게 Seatpicker, confirm 모달 수정

1ec7db4

refactor: #29 Confirm모달 스타일 리팩토링

2355efb

refactor: #29 외부 클릭 시 모달 닫히도록 수정, 좌석배치모달은 baseModal사용안하도록 수정

7c36043

refactor: #29 좌석배치모달 타입 분리 후 SeatItem 수정

1b724fa

feat: #29 SeatFocus 모달 구현

3eb94f4

style: #29 모달 레이아웃 수정

23417b1

feat: #29 seatWrite 모달 구현

ef12864

feat: #29 components index파일에 모달 추가

075cdff

fix: #29 충돌 해결

65ebf9d

fix: #29 충돌 해결

6085bdc

refactor: #29 리팩토링한 모달에 맞게 코드 수정

d5f068c

refactor: #29 input,textarea 리팩토링

aa2acf3

refactor; #29 헤더 컴포넌트 리팩토링

1ec79ef

refactor: #29 헤더가 사용된 모든 페이지 수정

dcd9e65

refactor: #29 모든페이지에서 헤더 높이만큼 패딩탑 추가

8f015b4

chore: #29 불필요한 코드 제거

6921a28

dalzzy requested review from sispo3314 and soyun-git121 July 31, 2025 16:31

dalzzy self-assigned this Jul 31, 2025

dalzzy added ♻️Refactor 코드 리팩토링 🎨Style 스타일 추가 및 수정 labels Jul 31, 2025

dalzzy linked an issue Jul 31, 2025 that may be closed by this pull request

[Refactor] #29 공통 컴포넌트 + 좌석 배치 모달 리팩토링 #29

Closed

4 tasks

dalzzy added the ✨Feature 새로운 기능 추가 label Jul 31, 2025

dalzzy added 2 commits August 1, 2025 01:33

fix: #29 빌드 에러 해결

b515a80

fix: #29 빌드 에러 해결

29e9775

sispo3314 approved these changes Jul 31, 2025

View reviewed changes

style: #29 input 너비 w-full로 수정

b8569bb

soyun-git121 reviewed Aug 2, 2025

View reviewed changes

soyun-git121 approved these changes Aug 2, 2025

View reviewed changes

dalzzy added 2 commits August 2, 2025 23:16

fix: 충돌 해결

004df93

chore: cursor pointer 추가 및 스타일 수정

da31e12

dalzzy merged commit 2f86b57 into develop Aug 2, 2025
1 check passed

dalzzy deleted the refactor/#29/공통-컴포넌트-리팩토링 branch August 8, 2025 15:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Refactor] 공통 컴포넌트 리팩토링#43

Hidden character warning

[Refactor] 공통 컴포넌트 리팩토링#43
dalzzy merged 25 commits intodevelopfrom
refactor/#29/공통-컴포넌트-리팩토링

dalzzy commented Jul 31, 2025 •

edited

Loading

Uh oh!

sispo3314 left a comment

Uh oh!

sispo3314 Jul 31, 2025

Uh oh!

sispo3314 Jul 31, 2025

Uh oh!

sispo3314 Jul 31, 2025

Uh oh!

dalzzy Jul 31, 2025

Uh oh!

sispo3314 Jul 31, 2025

Uh oh!

soyun-git121 Aug 2, 2025

Uh oh!

soyun-git121 Aug 2, 2025

Uh oh!

soyun-git121 Aug 2, 2025

Uh oh!

soyun-git121 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		leftSection?: 'BACK' \| 'LOGO' \| 'NONE';
		rightSection?: 'SETTING' \| 'DETAIL' \| 'KEBAB' \| 'NONE';

		@@ -47,7 +45,7 @@ export default function InputField({
		'flex h-[48px] w-[335px] items-center rounded-lg border px-3',

Conversation

dalzzy commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 관련된 이슈

📝 작업 내용

<공통 컴포넌트 리팩토링>

<좌석 배치 모달 리팩토링 + 새 컴포넌트 추가>

📸 스크린샷

🚨 이슈

📣 리뷰 요구사항

그리고 제 PR이 머지되면 아마 충돌이 많이 발생할 것 같습니다,,, ㅜㅜ

현재 브랜치에서 해당 페이지를 수정하지 않았다면 모든 변경사항을 incoming 기준으로 병합해주시면 되고,

만약 수정한 부분이 있다면 헤더,모달,input,textarea 관련 코드만 incoming으로 수락해주시면 될 것 같아요..!

변경 범위가 꽤 많아 미리 양해의 말씀 드립니다 ,, 😭😭

✅ 체크리스트

Uh oh!

sispo3314 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!

Choose a reason for hiding this comment

Uh oh!

soyun-git121 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dalzzy commented Jul 31, 2025 •

edited

Loading