Skip to content

[Merge] #14-booth detailpage UI 구현#19

Merged
Chaem03 merged 6 commits into
LikeLion-at-DGU:developfrom
Chaem03:feat/#14-booth-detailpage
Mar 1, 2025
Merged

[Merge] #14-booth detailpage UI 구현#19
Chaem03 merged 6 commits into
LikeLion-at-DGU:developfrom
Chaem03:feat/#14-booth-detailpage

Conversation

@Chaem03

@Chaem03 Chaem03 commented Feb 28, 2025

Copy link
Copy Markdown
Collaborator

🍀 ISSUE

🛠 Work Type

  • 🐞 버그 수정 : 문제가 발생하는 기능 수정
  • 🌏 배포 : 서비스 배포 작업
  • 🎨 디자인 : 마크업 및 스타일링 작업
  • 📃 문서 작성 : 문서 작성 및 편집
  • ✨ 기능 추가 : 새로운 기능 개발
  • 🔨 리팩토링 : 코드 구조 개선
  • ⚙️ 환경 설정 : 개발 환경 설정 및 구성

🔑 Work Description

  • 부스 상세정보 페이지 UI 구현
  • 클립보드 복사 기능 구현
    -커스텀 훅으로 코드 리팩토링

📸 Screenshot

구현 내용 560px 340px
사진

💻 Key Code

주요 코드 및 설명

const updateTranslateX = () => {
    if (sliderContainerRef.current) {
      const containerWidth = sliderContainerRef.current.offsetWidth;
      setTranslateX(-currentIndex * containerWidth);
    }
  };
//화면 크기 바뀔때마다 containerWidth 재설정 -> 기종에 상관없이 이미지 넓이 100% 채우기 가능 !

@Chaem03 Chaem03 added ✨ Feature 새로운 기능 개발 🔨 Refactor 코드 구조 개선 🎨 Design 마크업 및 스타일링 작업 ☘️ 채민 채민 작업 labels Feb 28, 2025

@sayyyho sayyyho left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

엄청 성장하는 채민님 보면서 자극 많이 받네요 ㅎㅎ 제가 적은 몇 가지만 수정해 봅시다!!

Comment on lines +11 to +28
<S.LionInfoBox>
<S.TextBox>
<img src={calendar} />
<S.TextInfo>모집 기간 | 2월 17일 (월) ~ 3월 9일 (일)</S.TextInfo>
</S.TextBox>
<S.TextBox>
<img src={pencil} />
<S.TextInfo>신청 방법 | 구글 폼</S.TextInfo>
</S.TextBox>
<S.TextBox>
<a
href="https://www.instagram.com/likelion_dongguk"
target="_blank"
rel="noopener noreferrer"
>
<img src={instaIcon} alt="Instagram" />
</a>
<S.TextInfo>@likelion_dongguk</S.TextInfo>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저번에 말씀드린 거 처럼 constants에 children 값들 관리하면 좋을거 같아요!

.writeText(pageUrl)
.then(() => alert("링크가 복사되었습니다!"))
.catch((err) => console.error("링크 복사 실패:", err));
};

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 부분도요! 예를들어, 링크 복사 케이스는 COPY_SUCCESS_MESSAGE 등으로 쓸 수 있겠네요 ㅎㅎ

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

커스텀 훅으로 관리할 때, Data랑 Handler랑 분리해서 넘기면 보다 좋은 코드가 되더라고요 ! 나중에 디벨로 해봐요오 !!

import useCustomNavigate from "../../hooks/useCustomNavigate";
import MAP1 from "../../../public/images/map1.svg";
import MAP2 from "../../../public/images/map2.svg";
import mappin from "../../../public/images/mappin.svg";

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이미지를 하나하나 import 하는 거는 코드 줄을 많이 잡아먹으니까 상수화하는건 어떨까요오??

@Chaem03
Chaem03 merged commit 112c881 into LikeLion-at-DGU:develop Mar 1, 2025
@Chaem03
Chaem03 deleted the feat/#14-booth-detailpage branch March 1, 2025 07:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

☘️ 채민 채민 작업 🎨 Design 마크업 및 스타일링 작업 ✨ Feature 새로운 기능 개발 🔨 Refactor 코드 구조 개선

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feat] 부스 상세 페이지 UI 구현

3 participants