Skip to content

✨Feat: 타임라인 페이지 완성#18

Merged
puretension merged 11 commits intodevfrom
feature/timeline
Apr 18, 2024
Merged

✨Feat: 타임라인 페이지 완성#18
puretension merged 11 commits intodevfrom
feature/timeline

Conversation

@puretension
Copy link
Copy Markdown
Member

PR 타입 ( 하나 이상의 PR 타입을 선택해주세요 )


  • 기능 추가
  • 버그 수정
  • 의존성, 환경 변수, 빌드 관련 코드 업데이트
  • 기타 사소한 수정

개요

타임라인 페이지 1차적으로 완성했습니다.


스크린샷 2024-04-18 오전 3 02 49 스크린샷 2024-04-18 오전 3 02 49 스크린샷 2024-04-18 오전 3 02 49

변경 사항

타임라인 페이지 틀만 잡아봤습니다! 매우 디테일한 디자인이나, 모바일 반응형 부분은 우선 코드 컨펌을 받고 개선후에 문제가 없다면 적용시키겠습니다.


코드 리뷰시 참고 사항

  • 파일 생성은 무조건 timeline폴더를 상위로 만든후에 넣어두었습니다.
  • 다른 뷰들을 보면, 공통컴포넌트로 뽑아내면 좋을것 같은(ex. HeaderTitle, NumberFilterlingButton)것도 보이긴해서 참고해도 좋을 거 같습니다
  • Web은 너무 미숙해서🥹 피드백 주시면(왜 굳이 이렇게 구현한거지? 등등 전부 좋습니다!) 감사히 반영하겟습니다🙇🏻‍♂️

@puretension puretension self-assigned this Apr 17, 2024
@puretension puretension changed the title Feature/timeline ✨Feat: 타임라인 페이지 완성 #15 Apr 17, 2024
@puretension puretension changed the title ✨Feat: 타임라인 페이지 완성 #15 ✨Feat: 타임라인 페이지 완성 Apr 17, 2024
Copy link
Copy Markdown
Contributor

@bunju20 bunju20 left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!!!

Copy link
Copy Markdown
Member

@bianbbc87 bianbbc87 left a comment

Choose a reason for hiding this comment

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

HeaderTitle, NumberFilterlingButton 공통으로 뽑아내면 너무 좋을 것 같아요! 수고하셨습니다 😄

Copy link
Copy Markdown
Member

@seochan99 seochan99 left a comment

Choose a reason for hiding this comment

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

고생하셨어요~ 다음 PR에 커멘트 반영하셔서 올리시면 될듯!

src={cardImageUrl}
alt={title}
layout='responsive'
width={1600}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

이미지 px로 하기보단 rem으로!

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

px 보다 rem 확인했습니다!

quality={100}
/>
<div className="absolute bottom-10 left-0 p-4">
<h3 className="text-xs text-white">{date}</h3>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

text-white default라 적용안해도 되는걸로압니다! 나중에 빼도 바뀌는거 없으면 빼주세요!

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

아하!! 👍🏻

Comment on lines +1 to +11
/**
* @description
* 날짜 표시 헤더 컴포넌트
* @component DateHeader
* @returns {JSX.Element} DateHeader
* @since 2024.04.17
*/
// components/DateHeader.tsx
import { DateHeaderProps } from "@/interfaces/timeline/timelineDate";
import React from 'react';
const DateHeader: React.FC<DateHeaderProps> = ({ date }) => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

/**
*
*..
*
/ 

주석은 component 바로 위에 적어줘야해요

import를 제일 상단에 올리고 이건 내려주셔야합니다

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

주석 작성 부분(아래 코멘트 포함) 확인했습니다!

Comment on lines +1 to +5
/*
기수별 버튼 컴포넌트(1st, 2nd, 3rd)
*/
import React from 'react';

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

아래 커멘트참고

Comment on lines +1 to +20
/**
* @description
* 각 월별로 그룹화된 타임라인 카드 리스트 섹션 컴포넌트
* ex) 2024 January 하고, 해당 월 카드 리스트 렌더링
* @component
* @param {TimelineCardProps[]} timelineData
* @returns {JSX.Element}
* @since 2024.04.18
*/
import React from 'react';
import groupByMonthYear from "@/utils/timeline/groupByMonthYear";
import DateHeader from "../header/DateHeader";
import TimelineMonthlyCardSection from "../section/TimelineMonthlyCardSection";
import { TimelineCardProps } from "@/interfaces/timeline/timelineCard";

interface TimelineMonthlyPartProps {
timelineData: TimelineCardProps[];
}

const TimelineMonthlyPart: React.FC<TimelineMonthlyPartProps> = ({ timelineData }) => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

여기도

Comment on lines +1 to +10
// utils/groupTimelineData.ts
import { TimelineCardProps } from '@/interfaces/timeline/timelineCard';
import { formatDate } from "./formDate";

/**
* 그룹화 함수: TimelineCardProps 배열을 받아 '년 월'로 그룹화하고 내림차순으로 정렬된 객체를 반환.
* @param {TimelineCardProps[]} data - 타임라인 카드 데이터 배열
* @returns {Record<string, TimelineCardProps[]>} - '년 월'로 그룹화하고 내림차순으로 정렬된 객체
*/
const groupByMonthYear = (data: TimelineCardProps[]): Record<string, TimelineCardProps[]> => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

이렇게 위에도 바꿔주세용

Comment on lines +7 to +14
const borderColor = isActive ? 'white' : '#536E7B';
const textColor = isActive ? 'white' : '#536E7B';

return (
<button
className="w-10 h-8 bg-transparent border rounded-lg text-xs leading-4 px-2 py-1"
style={{ borderWidth: '1.5px', borderColor, color: textColor }}
onClick={() => onClick(label)}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

이거 굳이 상수 안만들고 바로 적용해도 될듯!?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

${
`isActive ? 'white' : 'bg-[#536E7B]';
..
}

뭐 이런식으로

Copy link
Copy Markdown
Contributor

@shimseohyun shimseohyun left a comment

Choose a reason for hiding this comment

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

고생하셨습니다

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

혹시 이거 그라디언트는 css로 주실 수 있으실까요?
이미지 넣을때 하나하나 그라디언트 넣기 너무 힘들 것 같습니다...!
background: linear-gradient(0deg, #1C1D1F 0%, #FFF 100%);

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

넵! 반영하겠습니다!


return (
<button
className="w-10 h-8 bg-transparent border rounded-lg text-xs leading-4 px-2 py-1"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

ㅎㅎㅎ... 다음 수정때 폰트 양식 다 반영해주실 수 있을까요... 너무 늦게말씀드린 것 같다만...

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

당연👍🏻

Copy link
Copy Markdown
Contributor

@naarang naarang left a comment

Choose a reason for hiding this comment

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

수고하셨습니다!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants