[feature] 모집정보, 동아리정보, 소개글 컴포넌트 제작 #65
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- InfoBoxWrapper: 모집정보와 동아리정보 카드 가로로 배치 - InfoBox: 모집정보 동아리정보 카드 컴포넌트 - Title: 카드 종류 - DescriptionContainer: 설명 부분 수직으로 배치 - DescriptionWrapper: 설명 key-value로 묶음 - key가 LeftText, value는 RightText
- IntroduceBoxWrapper: 위치 및 배치 조정 - IntroduceTitle: 타이틀 폰트 설정 - IntroduceContentBox: 소개글 내용 스타일
- react-markdown적용
2 tasks
oesnuj
reviewed
Feb 11, 2025
Comment on lines
8
to
21
| const ClubDetailPage = () => { | ||
| return ( | ||
| <> | ||
| <Header /> | ||
| <Styled.PageContainer> | ||
| <InfoBox /> | ||
| <IntroduceBox /> | ||
| </Styled.PageContainer> | ||
| <Footer /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ClubDetailPage; |
There was a problem hiding this comment.
요기 파일명 오타있네요
ClubDetailPagel.tsx → ClubDetailPage.tsx
oesnuj
reviewed
Feb 11, 2025
Comment on lines
3
to
5
| import InfoBox from '@/pages/ClubDetailPage/components/InfoBox/InfoBox'; | ||
| import IntroduceBox from '@/pages/ClubDetailPage/components/IntroduceBox/IntroduceBox'; | ||
| import * as Styled from '../MainPage/MainPage.styles'; |
There was a problem hiding this comment.
MainPage.styles를 가져온 이유가 궁금해요!
혹시 pageContainer가 필요해서라면, 헤더랑 푸터 들어있고 기본 양쪽 간격을 잡아주는 공통 스타일을 따로 만들어도 좋을 것 같네용 😊
There was a problem hiding this comment.
PageContainer만 필요했어서 가져온건데 공통스타일을 만들어보도록 할게요 !
oesnuj
reviewed
Feb 11, 2025
Comment on lines
+29
to
+30
| {info.descriptions.map((desc, idx) => ( | ||
| <Styled.DescriptionWrapper key={idx}> |
There was a problem hiding this comment.
나중에 API에서 데이터를 받아올 때는 index 대신 id 같은 고유한 값을 key로 사용하는 게 더 좋을 것 같아요!
There was a problem hiding this comment.
네네 index보다 고유id 가 리렌더링 측면에서 좋기 때문에 다시 수정해보겠습니다~
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
- 테두리 안 보이게 설정
- RefObject 리턴타입으로 해당 DOM접근 가능하도록 함 - sectionsRef의 2번째 인덱스로 설정
- flex-direction 을 column으로 설정하여 세로 정렬로 변경 - InfoBox 테두리 제거
- sectionRef에 index로 순서 할당
- sectionRefs로 스크롤될 섹션을 배열로 관리 - scrollTo로 인덱스에 따라 해당 섹션으로 스크롤되도록 함
- useState로 탭 상태 관리 - 현재 탭이 activeTab일 시 조건부로 active 실행
- 모바일버전에만 보이도록 설정 - 버튼에 activd클래스 추가하여 border-bottom 설정
- width가 500px 이내라면 헤더 제거되도록 함
- 스크롤되어야 하는 컴포넌트에 sectionRefs 전달하여 스크롤 섹션으로 추가
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
#️⃣연관된 이슈
📝작업 내용
모집정보, 동아리정보 컴포넌트
소개글 컴포넌트
모바일 버전 추가
그 외
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항