�[SP1/Deploy] merge to develop (#271)

* chore: icon naming 변경

related to: #209

* feat: history item 중 objective 공통 컴포넌트 생성

1. 공통 컴포넌트 스타일링
2. progress bar 너비 제거

related to: #209

* feat: 각 objective 클릭 시 border 생성 및 아이콘 애니메이션 추가

related to: #209

* feat: key result component 생성

1. objective component naming 변경
2. kr component를 children으로 넘겨주기

related to: #209

* feat: task component 생성

1. task 공통 component 생성
2. children으로 task 넘겨주기

related to: #209

* design: objective 사이 간격 추가

related to: #209

* fix: children 있을 시에만 렌더링 되도록 수정

related to: #209

* refactor: okr history data 연결

related to: #209

* feat: history 정렬 로직 구현

related to: #209

* feat: 재사용 가능한 category 컴포넌트 생성

related to: #209

* feat: 테마랑 연도 선택 로직 구현

related to: #209

* feat: 카테고리 없으면 비활성화 로직 구현

related to: #209

* refactor: 정렬 로직 be로 넘기기

related to: #209

* fix: type error 해결

related to: #209

* feat: 테마 선택 로직 구현

* chore: type 수정

* refactor: history 최종 refactoring

* chore: 폴더 분리

* chore: 개인정보 처리방침 노션 링크 연결

* chore: 서비스 이용약관 링크 연결

* chore: 불필요한 파일 제거

* refactor: 코리 반영

* fix: reat DOM에서 속성값 인식 못하는 오류 해결

* chore: 카테고리 관련  불필요한 로직 수정

src/History/apis/fetcher.ts

@@ -1,7 +1,12 @@
 import instance from '@apis/instance';
 
-export const getOKRHistory = async (url: string) => {
-  const response = await instance.get(url);
+export const getOKRHistory = async (url: string, category?: string, criteria?: string) => {
+  const response = await instance.get(url, {
+    params: {
+      category,
+      criteria,
+    },
+  });
 
   return response;
 };

src/History/assets/icons/index.ts

@@ -1,5 +1,5 @@
-import CheckIcon from './CheckIcon.svg?react';
-import DropDownIcon from './DropDownIcon.svg?react';
-import FilteringIcon from './FilteringIcon.svg?react';
+import IcCheck from './icCheck.svg?react';
+import IcDropDown from './icDropDown.svg?react';
+import IcSmallDropDown from './icSmallDropDown.svg?react';
 
-export { CheckIcon, DropDownIcon, FilteringIcon };
+export { IcCheck, IcDropDown, IcSmallDropDown };

src/History/components/drawer/CategoryContainer.tsx

@@ -0,0 +1,89 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IcCheck } from '../../assets/icons';
+import { selectedThemeTypes } from '../../type/historyData';
+
+interface ICategoriesProps {
+  label: string;
+  allCategories: selectedThemeTypes[];
+  selectedCategory: string | undefined;
+  historyCategories: selectedThemeTypes[];
+  onCategorySelect: (category: selectedThemeTypes) => void;
+}
+
+const CategoryContainer = ({
+  label,
+  allCategories,
+  selectedCategory,
+  historyCategories,
+  onCategorySelect,
+}: ICategoriesProps) => {
+  return (
+    <div css={categoriesWrapper}>
+      <StTitle>{label}</StTitle>
+      <div css={sortCategories}>
+        {allCategories?.map((category) => {
+          const isHavingCategoryData = historyCategories.includes(category);
+
+          return (
+            <StCategory
+              key={category}
+              isHavingCategoryData={isHavingCategoryData}
+              disabled={!isHavingCategoryData}
+              onClick={() => {
+                onCategorySelect(category);
+              }}
+            >
+              {category === selectedCategory && <IcCheck />}
+              <span>{category}</span>
+            </StCategory>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const categoriesWrapper = css`
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  width: 18.8rem;
+  height: 17.4rem;
+`;
+
+const sortCategories = css`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.1rem 0.6rem;
+`;
+
+const StTitle = styled.label`
+  color: ${({ theme }) => theme.colors.gray_000};
+
+  ${({ theme }) => theme.fonts.body_12_regular};
+`;
+
+const StCategory = styled.button<{ isHavingCategoryData?: boolean }>`
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: 2.7rem;
+  padding: 0.8rem 1rem;
+  color: ${({ theme, isHavingCategoryData }) =>
+    isHavingCategoryData ? theme.colors.gray_000 : theme.colors.gray_450};
+  cursor: ${({ isHavingCategoryData }) => (isHavingCategoryData ? 'pointer' : 'default')};
+  background-color: ${({ theme, isHavingCategoryData }) =>
+    isHavingCategoryData ? theme.colors.background : theme.colors.gray_550};
+  border: 1px solid
+    ${({ theme, isHavingCategoryData }) =>
+      isHavingCategoryData ? theme.colors.gray_350 : theme.colors.gray_450};
+  border-radius: 6px;
+
+  ${({ theme }) => theme.fonts.btn_11_medium};
+`;
+
+export default CategoryContainer;

src/History/components/drawer/HistoryDrawer.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+
+import { HISTORY_THEME } from '../../constants/HISTORY_THEME';
+import { selectedThemeTypes } from '../../type/historyData';
+import CategoryContainer from './CategoryContainer';
+
+interface IHistoryDrawerProps {
+  historyCategories: selectedThemeTypes[];
+  selectedTheme: string | undefined;
+  onSelectTheme: (selectedTheme: selectedThemeTypes) => void;
+}
+
+const HistoryDrawer = ({
+  historyCategories,
+  selectedTheme,
+  onSelectTheme,
+}: IHistoryDrawerProps) => {
+  return (
+    <StHistoryAside>
+      <CategoryContainer
+        label="테마"
+        allCategories={HISTORY_THEME}
+        historyCategories={historyCategories}
+        selectedCategory={selectedTheme}
+        onCategorySelect={onSelectTheme}
+      />
+    </StHistoryAside>
+  );
+};
+
+export default HistoryDrawer;
+
+const StHistoryAside = styled.aside`
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 4rem;
+  width: 23.2rem;
+  height: 100%;
+  padding: 2.4rem 2.2rem;
+  background-color: ${({ theme }) => theme.colors.gray_650};
+`;