[ feat ] 검색 필터 모달 퍼블리싱 #25

minjeoong · 2024-11-21T16:54:15Z

🔥 Related Issues

close [ Feat ] 검색 필터 모달 구현 #22

✅ 작업 리스트

🔧 작업 내용

검색 필터 모달 퍼블리싱
input form 컴포넌트 구현하였습니다.
모달 하단 fog 효과 구현하였습니다.
cityGroup 컴포넌트 안에 cityButton 을 넣어 구현하였습니다.
오키나와만 클릭되었을 때 button 토글 되도록 하였습니다.
모달이 닫히는 기준은 'Back Button 눌렀을 때' 와, '오키나와를 누른 후 검색버튼을 누를 때' 이고,
disabled 된 버튼 상태에서는 모달이 닫히지 않도록 구현하였습니다.
기획 당시에 정한 것 처럼, 오키나와 제외한 다른 나라는 눌리지 않도록 하였습니다.
토글 버튼은 그저 div 입니다..

🧐 새로 알게된 점

🤔 궁금한 점

fog 효과를 하다가, 스크롤이 내려갔을 때 없어지는 event 를 좀 구현하려고 노력했는데,

스크롤이 바닥에 닫는 기준이 모호
화면 사이즈가 변경됨에 따라 동적으로 있다가 없다가 효과를 바꿔줘야함

이 두가지 이슈를 중점으로 두고 몇시간 해보다가 시간이 좀 더 할애될 것 같아서
우선 내려두고 캘린더로 넘어가야할 것 같습니다.
우선 지금은 화면을 좀 더 길게하여 스크롤이 좀 더 길게 내려가도록 해서 눈속임을 해두었고,
후에 시간이 남는다면 돌아와서 진행해보도록 하겠습니다,,, ㅠ

📸 스크린샷 / GIF / Link

렌더링 될 때 모달이 무조건 열리게 하여 구현한 상태입니다. 머지할 때는 해제해두겠습니다!

2024-11-22.01.52.26.mov

KIMGEONHWI

크게 수정해야할 부분은 없어 보이네요! 고생하셨습니다.
구두로 이야기 했던 것 처럼, 오키나와를 제외한 다른 도시를 클릭하여도 검색하기 버튼이 활성화는 되지만 모달이 닫히지는 않도록 해주세요! 모달이 닫히는 이벤트는 오키나와가 선택되었을 때만 가능하게요.

KIMGEONHWI · 2024-11-23T17:14:05Z

src/components/home/CalenderModal.tsx

+		<>
+			<PriceModal isVisible={isModalOpen} onModalClose={onModalToggle} />
+		</>


p5: 빈태그 삭제해도 괜찮을거 같아요

이거 캘린더라 일부러 이렇게 해두신거아니예요? ㅋㅋㅋㅋㅋ 안에 내용 더 넣으려고 밖에서 묶어둔 것 같은디

맞숩니다,,

KIMGEONHWI · 2024-11-23T17:16:23Z

src/pages/home/cityGroups.ts

p5: 상수데이터는 src/constants 폴더 생성해서 해당 폴더에 위치할 수 있도록 해주세요!

넵 수정 커밋 날렸습니다!

KIMGEONHWI · 2024-11-23T17:24:42Z

src/components/home/SearchModal.tsx

+	const onOkinawaClicked = (state: boolean) => {
+		setIsButtonClicked(state);
+	};


p2: 해당 이벤트 핸들러 네이밍을 onOkinawaClicked보다는 네이밍 컨벤션에 맞추어 handleOkinawaClick을 사용하는 것이 어떨까요? 또한, 클릭 시 상태가 직곽적이지 못한 것 같아. 다음과 같이 수정하는 것은 어떨까요?

Suggested change

const onOkinawaClicked = (state: boolean) => {

setIsButtonClicked(state);

};

const handleOkinawaClick = () => {

setIsButtonClicked((prev) => !prev);

};

오 좋습니다 !!
요거 함수 onClick 으로 아예 변경 될 예정으로 로직이 아예 변경되었어유

KIMGEONHWI · 2024-11-23T17:26:44Z

src/components/home/SearchModal.tsx

+			>
+				검색하기
+			</Button>
+			<FogEffect showFogEffect={showFogEffect} />


p2: 상태 정의는 되어있는데 상태가 바뀌는 로직이 존재하지 않는 것 같아요. pr에 작성해주신 것처럼 아직 완벽하게 구현되지 못해서 그런걸까요?

넵 맞습니다 구현하다가 로직 다 지워버려서 우선 state 만 남겨둔 상태입니다!

KIMGEONHWI · 2024-11-23T17:27:04Z

src/components/home/SearchModal.tsx

+
+const ScrollWrap = styled.div`
+	overflow-y: auto;
+	height: 800px;


p4: rem으로 수정해주세요.

변경 커밋 날렸습니다

ayla-12 · 2024-11-25T06:34:37Z

src/styles/theme.ts

@@ -22,6 +22,7 @@ const colors = {
 	grey30: '#C1C7CF',
 	grey20: '#E0E3E5',
 	grey10: '#EFF1F2',
+	skygrey: '#EEF3F9',


p5: 대체 왜 스카이그레이만 쏙 빠졌던 것일까요... 추가해주셔서 감사합니다

ayla-12 · 2024-11-25T06:36:03Z

src/pages/home/index.tsx

+	});
+
+	const onModalToggle = (modal: 'search' | 'calender') => {
+		console.log(isModalOpen);


p5: 나중에 home 페이지랑 합치고 나서 콘솔로그 지우면 좋을 것 같아요!

수정 커밋 날렸습니당

ayla-12 · 2024-11-25T06:38:53Z

src/components/home/CityGroup.tsx

+const CityButton = ({ name, onClick }: buttonProps) => {
+	return <StyledButton onClick={onClick}>{name}</StyledButton>;
+};


p5: 한 파일 내 이렇게 컴포넌트 만들어서 써도 되는군요..? 저는 props 필요한 컴포넌트 필요할 때마다 파일 분리해서 썼는데 간단한건 파일 내에 써도 되겠다는 생각이 드네요...

ayla-12 · 2024-11-25T06:40:11Z

src/components/common/Button.tsx

+import styled, { css } from 'styled-components';
+
+interface props {
+	onClick: () => void;


p5: 제 코드에 Button 끌고와서 사용하다가 고치긴 했지만..!! disable 상태일때도 OnClick을 요구하더라구요.. 혹시 요건 별 문제 없으셨는지? 저는 그래서 OnClick에 물음표 추가하긴했는데 다른 방법이 있는건지 궁금합니다!

ayla-12

안녕하세요 민정님 코리가 늦었죠!!!... 거의 고칠게 없어서 그냥 질문정도로만 달았습니다 ㅎㅎ 수고많으셨습니다~~~

minjeoong · 2024-11-25T09:54:32Z

모두 수정 완료 했습니당
건휘오빠 토글만 머지되면 수정반영하고 머지할게요!

# Conflicts: # src/assets/svg/index.ts # src/pages/home/home.tsx # yarn.lock

# Conflicts: # src/assets/svg/index.ts

minjeoong · 2024-11-26T10:27:47Z

충돌 난 부분 우선 이렇게 해두었습니다!

minjeoong added 9 commits November 21, 2024 21:14

fix : 컴포넌트 네이밍 변경

9f810a4

feat : inputForm 컴포넌트 구현

a48531d

feat : 기본 뼈대 구성

e7fc021

feat : CityGroup 컴포넌트 구현

7eadbde

feat : CityButton 컴포넌트 추가

2815d3e

feat : fog 효과

7ec5351

feat : 오키나와만 클릭되도록

8b79b81

feat : input form flex 수정

3ea8fce

feat : toggle 수정

3769e48

minjeoong requested review from KIMGEONHWI, ayla-12 and heesunee November 21, 2024 16:54

minjeoong self-assigned this Nov 21, 2024

minjeoong added the ✨ feat 기능 구현 label Nov 21, 2024

KIMGEONHWI requested changes Nov 23, 2024

View reviewed changes

ayla-12 reviewed Nov 25, 2024

View reviewed changes

ayla-12 approved these changes Nov 25, 2024

View reviewed changes

minjeoong added 6 commits November 25, 2024 18:09

fix : 오키나와 외에 것도 클릭 되도록, 근데 오키나와만 버튼을 활성화 하도록 변경

38b81cf

fix : constans 로 상수데이터 옮기기

394efac

fix : rem 변경

ceb0c9b

fix : 콘솔 로그 제거

1669162

fix : max-width 부모에게 상속받도록 수정

3949b1b

fix : 밖으로 clickedCity 상태 나오도록

95d7c37

minjeoong added 3 commits November 25, 2024 18:56

feat : 얀락

696b12c

feat : 모달 초기 상태 false 로 변경

b0967c2

Merge remote-tracking branch 'origin/develop' into feat/#22/search-modal

d4dfd18

# Conflicts: # src/assets/svg/index.ts # src/pages/home/home.tsx # yarn.lock

minjeoong added 3 commits November 26, 2024 19:02

Merge remote-tracking branch 'origin/develop' into feat/#22/search-modal

e61469a

# Conflicts: # src/assets/svg/index.ts

feat : 모달 수정

72923a4

feat : 가연이 코드 수정

a5412cb

minjeoong merged commit 21bf892 into develop Nov 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ feat ] 검색 필터 모달 퍼블리싱 #25

[ feat ] 검색 필터 모달 퍼블리싱 #25

minjeoong commented Nov 21, 2024 •

edited

Loading

KIMGEONHWI left a comment

KIMGEONHWI Nov 23, 2024

ayla-12 Nov 25, 2024

minjeoong Nov 25, 2024

KIMGEONHWI Nov 23, 2024

minjeoong Nov 25, 2024

KIMGEONHWI Nov 23, 2024

minjeoong Nov 25, 2024

KIMGEONHWI Nov 23, 2024

minjeoong Nov 25, 2024

KIMGEONHWI Nov 23, 2024

minjeoong Nov 25, 2024

ayla-12 Nov 25, 2024

ayla-12 Nov 25, 2024

minjeoong Nov 25, 2024

ayla-12 Nov 25, 2024

ayla-12 Nov 25, 2024

ayla-12 left a comment

minjeoong commented Nov 25, 2024

minjeoong commented Nov 26, 2024

[ feat ] 검색 필터 모달 퍼블리싱 #25

[ feat ] 검색 필터 모달 퍼블리싱 #25

Conversation

minjeoong commented Nov 21, 2024 • edited Loading

🔥 Related Issues

✅ 작업 리스트

🔧 작업 내용

🧐 새로 알게된 점

🤔 궁금한 점

📸 스크린샷 / GIF / Link

KIMGEONHWI left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ayla-12 left a comment

Choose a reason for hiding this comment

minjeoong commented Nov 25, 2024

minjeoong commented Nov 26, 2024

minjeoong commented Nov 21, 2024 •

edited

Loading