Feature/issue 65 feat 기술스택 팝오버 구현 #79

nakyoung98 · 2024-03-16T06:19:03Z

File changed가 많아요🥹 이것저것 같이 수정되다보니 늘어났는데 아래만 봐주시면 됩니다

DeleteStackChipList
index
ResetButton
SelectLayout
StackChipList
Stack

📌요구사항

기술스택 팝오버 구현
기술 스택 우선 분류해서 대충 구성해놓기 (추후 보강)

📌작업 진행 상황 (에러, 막혔던 부분, 그외 궁금한것 등등)

기술스택 팝오버 구현

FilterButton에 SelectLayout을 추가한 컴포넌트입니다

SelectLayout

FilterList, StackChipList, ResetButton, DeleteChipList 로 이루어져있어요

onStacksChange

  onStacksChange: (selectedStacks: string[]) => void;

선택된 Stack들을 외부에서 callback으로 관리할 수 있습니다

FilterList

여러 곳에서 쓸 수 있게 범용성을 넓힌 리스트입니다
여러 필터 옵션 중에서 선택할 수 있습니다
필터 목록(filters)과 현재 선택된 필터(currentFilter)를 props로 받아, 사용자가 특정 필터를 클릭할 때 onFilterClick 콜백 함수를 호출합니다

특징

현재 선택된 필터면 검정색, 아니면 회색으로 표시됩니다
마우스가 hover되어있을 때, 현재 선택된 필터가 아니면 색상이 진하게 변합니다

StackChipList

StackChip을 일렬로 나열하는 컴포넌트입니다
반응형 적용 되어있습니다

Props

interface StackChipGridProps {
  selectedStacks: string[];
  filter: StackPositionFilter;
  onStackChipClick: (stack: string) => void;
  className?: string;
}

selectedStacks: 선택된 stack들 정보를 넣으면 선택 css가 반응합니다
filter: 내용을 어떻게 분류처리할 지 입니다, 지정된 relatedPosition에 반응합니다
onStackChipClick: Chip선택하면 하고싶은 행동을 넣으시면 됩니다

DeleteStackChipList

DeleteStackChip이 표시되는 리스트입니다

Props

interface DeleteStackChipListProps {
  stacks: string[];
  onDeleteStack: (stack: string) => void;
  className?: string;
}

stacks: 존재하는 stack들을 넣으면 됩니다
onDeleteStack: chip의 삭제버튼을 누르면 호출되는 callback 함수입니다

Reset

Reset하는 컴포넌트입니다
onReset에 함수를 전달해서, 초기화시 하고싶은 행동을 전달하면, 버튼 클릭시 호출됩니다.

📌스크린샷 / 테스트결과 (선택)

추가 참고사항

STACKS

Stack들을 담아놨습니다
여기서 가져다 쓰시면 됩니다

STACK_NAMES

이걸 통해서 이름만 가져오는 것도 가능합니다

📌이슈 번호

Stack_names는 stack 이름이 모두 저장된 배열, mock 데이터같이 쓸 수 있음

github-actions · 2024-03-16T06:19:16Z

올바르지 않은 PR 형식

올바르지 않은 PR 형식입니다.

참고

PR요청 전 deveop 브랜치에 변동이 있을 경우 꼭! feature 브랜치를 rebase 해주세요.
현재 시점에서 Merge 시 Conflict의 위험이 있습니다.

nakyoung98 · 2024-03-16T06:20:09Z

co-kkiri/src/components/commons/Chips/DefaultChip.tsx

툴팁 표시를 위해서 title={label}이 추가되었습니다

외에는 안보셔도 됩니다

nakyoung98 · 2024-03-16T06:21:13Z

co-kkiri/src/components/commons/Chips/DeleteStackChip.tsx

-    label: string;
-    onClick: (e: MouseEvent<HTMLDivElement>) => void;
+  label: string;
+  onDelete: (stack: string) => void;


onClick이 onDelete로 조금 더 명확한 이름으로 바뀌었습니다
외에는 안보셔도 됩니다

nakyoung98 · 2024-03-16T06:21:52Z

co-kkiri/src/components/commons/Chips/StackChip.tsx

전반적인 CSS 수정이 있었습니다.
안보셔도 괜찮습니다

nakyoung98 · 2024-03-16T06:22:37Z

co-kkiri/src/components/commons/DropDowns/commons/FilterButton.tsx

  return (
    <Container $isSelected={isSelected} onClick={onClick}>
      {selectOption}
      {isSelected ? (
-        <Arrow src={popoverSelected.src} alt={popoverSelected.alt} />
+        <Arrow $isSelected src={popoverSelected.src} alt={popoverSelected.alt} />


toggle Open 상태일 때 화살표 반대로 되도록 해놨습니다
외에는 안보셔도 됩니다

nakyoung98 · 2024-03-16T06:23:10Z

co-kkiri/src/components/commons/Stack.tsx

@@ -1,17 +1,26 @@
 import styled from "styled-components";


Styled 상속을 위해 코드가 좀 추가되었습니다
외에는 안보셔도 됩니다

nakyoung98 · 2024-03-16T06:23:43Z

co-kkiri/src/components/commons/Stack.tsx

  //임시
-  const icon = stack && STACK_ICONS[stack] ? STACK_ICONS[stack] : ICONS.questionMark;
+  const icon: Image =


Image는 새로 만든 타입인데, 저희 이미지들이 공통적으로 {src:string,alt:string} 구조로 되어있어서, 그걸 타입화 시켰습니다

nakyoung98 · 2024-03-16T06:24:19Z

co-kkiri/src/components/commons/Stacks.tsx


 interface StacksProps {
  stacks: string[];
 }

 export default function Stacks({ stacks }: StacksProps) {
  return (
-    <Wrapper>{stacks.length > 0 ? stacks.map((stack) => <Stack key={stack} stack={stack} />) : <Stack />}</Wrapper>
+    <Wrapper>{stacks.length > 0 ? stacks.map((stack) => <StackComponent key={stack} stack={STACKS[stack]} />) : <StackComponent />}</Wrapper>


STACK에 모든 stack 데이터를 넣어놨기 때문에, 이미지와 이름도 그쪽에서 가지고 옵니다

nakyoung98 · 2024-03-16T06:25:23Z