design : Activities 페이지(seminar,challenge,community) 퍼블리싱 및 개발 #12
Conversation
JjungminLee
changed the title
|
확인했습니다!! 수고 많으셨어요 ㅠㅠㅠ 저도 conflict 걱정했는데, 제가 tailwind.config 와 constant/color 만 수정하고 제 UI 에는 적용을 안 해놓은 상황이라, 정민님꺼로 덮어쓰는 게 더 효율적일 거 같아요!! |
넵! 좋아요 저도 사실 그렇게 하면 좋을것 같다고 생각했어요! 머지 후 conflict나면 제가 수정해서 푸쉬해둘게요:) |
디자인이랑 align이 안맞더라구요! 확인 한번 부탁드려요! 1번이랑 2번바뀔때 textArea height도 한번 확인하면 좋을 것 같아요!
디자인 내용
|
해당 내용은 두가지 중 하나로 고쳐놓으면 좋을 것 같아요~!
|
src/app/components/TabBar/TabBar.tsx
Outdated
| const activeIndex = items.findIndex((item) => item.isActive); | ||
| const totalTabs = items.length; | ||
|
|
||
| const getUnderlineWidth = (index: number) => { |
There was a problem hiding this comment.
type TabPosition = 'left' | 'center' | 'right';
const getUnderlineWidth = (index: number, totalTabs: number): string => {
const position: TabPosition = index === 0
? 'left'
: index === totalTabs - 1
? 'right'
: 'center';
const widthMap = {
left: '33.33%', // 왼쪽 탭
center: '35%', // 가운데 탭
right: '33.33%' // 오른쪽 탭
};
return widthMap[position];
};There was a problem hiding this comment.
TabPosition은 정적으로 바뀌지 않는 값이 3개로 결정적이니,
Type 정의를 해 놓는것도 하나의 방법이에요!
해당 함수에 전달된 인덱스와 totalTab 인자(Tab을 파라미터로 넣을지는 취향에 따라서..!)에 따라서 인자를 우선 받구요!
if문을 삼항연산자로 정리한 후 정의 된 타입에 따라서 넓이를 반환해주는 매핑작업 코드영역을 만들어 주면 코드 영역이 분리되어 읽기 좋아진답니당
There was a problem hiding this comment.
유지보수성이 좋은 코드네요!_! 타입 정의하는 방식으로 고쳐놨습니다!
const widthMap = { left: '33.33%', // 왼쪽 탭 center: '35%', // 가운데 탭 right: '33.33%' // 오른쪽 탭 };
이 부분은
Record로 빼서 좀 더 유연성을 줘봤습니닷
There was a problem hiding this comment.
헤더, 이미지 섹션, 내용을 컴포넌트로 분리해서 작업하면 좋을 것 같아요!
한 파일에 모여있는 내용을 컴포넌트로 분리해서 작업하면 조금 더 가독성이 높을 것 같습니다 😃
| setEndX(e.clientX); | ||
| }; | ||
|
|
||
| // 포인터 종료 시 스와이프 방향에 따라 슬라이드 변경 |
There was a problem hiding this comment.
제스처 구현에 고생 많으셨네요..
이후에 시간이 된다면
https://use-gesture.netlify.app/docs/options/
해당 라이브러리 사용해보는 것도 방법입니다! 👀
| @@ -8,7 +8,7 @@ import Community from "../Community"; | |||
| const TabContent = () => { | |||
| const { items } = useContext(TabBarContext); | |||
| const activeTab = items.find((item) => item.isActive); | |||
| console.log(activeTab?.label); | |||
|
|
|||
| @@ -73,7 +72,7 @@ const Challenge = () => { | |||
|
|
|||
| <section className="flex justify-center pb-12"> | |||
| <Image | |||
| src={ChallengeMainImg} | |||
| src="/challenge_main.webp" | |||
이것은 저의 실수입니다. 위치 고정해두었습니닷 |
|
1️⃣ 어떤 작업을 했나요? (Summary)
제가 탭으로 구성해서.. 하나의 브랜치에서 할수 밖에 없더라구요..ㅠ_ㅠ 원래 이슈별로 따로 브랜치를 파고 진행했어야했는데 빨리 작업을 끝내야할 것 같아 이렇게 된 점 정말 죄송합니다 ㅠ_ㅠ (머리 100번 조아리는중)
기존 코드에 영향을 미치지 않는 변경사항
기존 코드에 영향을 미치는 변경사항
버그 픽스
x
2️⃣ 알아두시면 좋아요!
Seminar 탭
라우팅이 되는것이 아닌 single page에서 화면이 바뀌어야 하기에 context-api를 통해 작업했습니다.
components/TabBar에서 관련코드를 확인하실 수 있습니다.
디자이너님께 추후 확인 후 작업할 예정입니다.
-> 캐러셀이 맞는거 같은데 관련 데이터들을 추린 후 재작업 할 예정입니다
KakaoTalk_Video_2025-02-02-09-01-58.mp4
Challnege탭
KakaoTalk_Video_2025-02-02-10-00-32.mp4
Community 탭
https://github.com/user-attachments/assets/7eff7cd0-7eb4-4eb1-94cb-b3b922145369
3️⃣ 추후 작업
[Seminar]
[Challenge]
[Community]
4️⃣ 체크리스트 (Checklist)
main브랜치의 최신 코드를pull받았나요?