Portfolio

코드 리뷰 시에 고쳐도 되지 않을 것 같은 건 바로 approve를 누르자

임포트 문 가독성도 한 번만 생각해보자

알파벳 순, 외부 의존, 내부 의존 등 여러 기준이 있음

⇒ 지금부터 이렇게 적용해두고 리팩토링 때 하죠

⇒ 브랜치 하나 파서 적용

[DK-287] 개인 프로필 UI 구성 by kyubumjang · Pull Request #25 · prgrms-web-devcourse/Team_04_SFam_FE

📌 개요 개인 프로필 UI 구성했습니다! 👩‍💻 구현 내용 styles 폴더 common.ts에 제가 사용하는 Container, Wrapper, Text 스타일들을 넣어놨으니 나중에 UI 구성할때 사용하면 좋을 것 같아요! ✅ PR 포인트 & 궁금한 점 interface 폴더 만들어서 API 때 사용할 타입이나 Style에 사용하는 타입...

https://github.com/prgrms-web-devcourse/Team_04_SFam_FE/pull/25

interface 폴더 ⇒ types 폴더

⇒ rebase시 types로 합치기

로그아웃

버튼 ⇒ 상단과 동일하게 span

⇒ 개인 프로필 수정

Divider 컴포넌트와 Header의 하단 테두리가 길이만 다른데

똑같이 가는 것이 좋을 것 같다

⇒ 리팩토링 때 없애던지 색깔을 바꿔보던지

[DK-290] 메인 페이지 UI 구성 by dustmddus · Pull Request #26 · prgrms-web-devcourse/Team_04_SFam_FE

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.

https://github.com/prgrms-web-devcourse/Team_04_SFam_FE/pull/26

~~공고가 잘린다~~

~~제목, 뱃지, 날짜가 일렬인데 모바일 특성 상 세로 배치가 좋을 것 같다~~

~~제목과 뱃지, 날짜를 한 세트로 구분하면 되지 않을까~~

테마 이용 관련해서


import theme from '@styles/theme'

위 임포트문은 사용하지 않기로 했던 것 같은데 심지어 어떤 곳은 쓰고 어떤 곳은 안 쓰고..


${(props)=> props.theme.color.gray100}

테마 주입을 쓰는 의미가 사라진다
이렇게 하고 싶었다면 ThemeProvider를 없애는 쪽이 좋지 않을까

~~네비게이터 아이콘 크기를 줄였던데~~

~~refactoring 때 다시 키우면 될 듯~~

~~파일명 :~~ ~~style.ts~~ ⇒ ~~styles.ts~~

~~styles로 바꾸기~~

~~린트 룰은 주석처리하지 않기로.~~.

~~임시로 해둔 것 아니면 삭제 후 타입 처리~~

~~컨테이너로 감싸져 있는데 페이지에서~~ ~~div~~ ~~로 한번 더 감쌀 필요가 있을까~~

~~리팩토링 때 수정~~

[DK-294] 팀 프로필 UI 구성 by kyubumjang · Pull Request #27 · prgrms-web-devcourse/Team_04_SFam_FE

https://github.com/prgrms-web-devcourse/Team_04_SFam_FE/pull/27

Heading 컴포넌트에서 :id vs [id]

파파 수정 했어요
하면서 하고 있는데 :id ⇒ [id]

object 형태의 스타일드 컴포넌트 진지하게 고민해볼 필요가 있음

코드 훨씬 예쁜거 같으니까 리팩토링 때 만들어진 것은 삭제

더미 데이터를 만드는 경우 파일 분리를 하면 좋다

API 연동 작업 시에 사라질 것들인데 변경 사항 확인이 쉽다 (파일 삭제 vs 같은 파일 변경 사항 비교)
구현 시 속도 때문에 파일 분리 하는쪽으로

[DK-288] 공고 상세 페이지 UI 구현 by dustmddus · Pull Request #29 · prgrms-web-devcourse/Team_04_SFam_FE

https://github.com/prgrms-web-devcourse/Team_04_SFam_FE/pull/29

~~PR 문항 안 쓰는 거 삭제~~

~~PR 타이틀 형식 맞추자~~

~~[Dk 290] ⇒ 신경 쓰면 될듯~~
~~[DK-290] 공고 상세 페이지 UI~~

~~게시글 url ⇒~~ ~~post~~ vs ~~match~~

~~API url과 맞출 필요가 있는지 고민이 필요하다~~
~~공고글 heading post~~
~~API~~

~~heading url을~~ ~~post/create~~ ⇒ ~~post~~ ~~이유는?~~

~~글 공고 작성 ⇒ create~~

~~filter, map 콜백 함수 매개변수로 i는 좋지 않다고 생각한다~~

~~posts 배열이면 posts.map(post)~~

안 쓰는 코드는 버리는게

아래 같은 경우 matchType에 따른 각 뱃지를 만들어 주는 것이 좋다

styled-components에서 matchType을 받아서 분기


<Badge color={matchType === '개인전' ? `${theme.color.primary}` : `${theme.color.yellow}`}>
	{matchType}
</Badge>

[DK-300] 팀 생성 UI 구성 by kyubumjang · Pull Request #31 · prgrms-web-devcourse/Team_04_SFam_FE

https://github.com/prgrms-web-devcourse/Team_04_SFam_FE/pull/31

border-radius에 1px solid..

이것도 파파가 확인해줘요

isOpen으로 조건부 렌더링도 하고 isOpen으로 display 컨트롤도 한다.

파파가 해줘요 ⇒ 이건 확인하고 삭제하면 될듯

공고 상세에서 status가 WAITING, 그리고 어떤게 있는지

Jira, API 문서 왔다갔다.
Swagger만 보고 해야돼..문서화

reviewButton onClick 처리

아래처럼 먼저 했다가 코드가 조금 안좋다고 느껴져서 id값을 주고 event로 처리했습니다.
e.currentTarget.id 사용해서 click이벤트 처리했습니다.

⇒ 멘토님 한테 한번 여쭤봅시다.

⇒ dataset

id는 접근할 때

⇒ data-id로 변경해둘 게요 ⇒ 기능 구현하는사람이 바꿀것


const handleClick = (value: string) => {
    setReview(value);
  };

			<ReviewButtonItem
				id='best'
        iconSrc={BestIcon}
        iconAlt='best'
        reviewText='최고에요'
        onClick={() => handleClick('best')}
      />
      <ReviewButtonItem
        iconSrc={LikeIcon}
        iconAlt='like'
        reviewText='좋아요'
        onClick={() => handleClick('like')}
      />
      <ReviewButtonItem
        iconSrc={DislikeIcon}
        iconAlt='dislike'
        reviewText='별로에요'
        onClick={() => handleClick('dislike')}
      />

@types 임포트 문제가 있음

@interface 를 써야할 듯..

08.05