Merge branch 'develop' of github.com:MOONSHOT-Team/MOONSHOT-CLIENT in…

…to develop

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};
+`;