feat: 누적 리포트 연도 select 드롭다운 컴포넌트 생성

src/components/Report/LeftSection/Graph/SelectYear/index.tsx

@@ -1,11 +1,67 @@
+import { useRecoilState } from 'recoil';
+import { Dropdown, DropdownProps } from 'semantic-ui-react';
 import styled from '@emotion/styled';
 
+import { selectedYearState } from '@recoil/index';
+import { initYearSelectList } from '@utils/index';
+import theme from '@styles/theme';
+
 const SelectYear = () => {
-  return <Container>select</Container>;
+  const selectYearReport = initYearSelectList();
+  const [selectedYear, setSelectedYear] = useRecoilState(selectedYearState);
+
+  const handleSelect = (
+    _e: React.SyntheticEvent<HTMLElement>,
+    data: DropdownProps
+  ) => {
+    setSelectedYear({ year: Number(data.value) });
+  };
+
+  return (
+    <StyledDropdown
+      selection
+      options={selectYearReport.map(item => ({
+        key: item,
+        text: item,
+        value: item
+      }))}
+      onChange={handleSelect}
+      value={selectedYear.year}
+    />
+  );
 };
 
 export default SelectYear;
 
-const Container = styled.div`
-  // HACK: 이슈 #67에서 작업중
+const StyledDropdown = styled(Dropdown)`
+  &.ui.dropdown {
+    min-width: 200px;
+
+    border-radius: 12px;
+    padding: 10px 20px;
+
+    display: flex;
+    align-items: center;
+
+    color: rgba(60, 60, 67, 0.6);
+    background-color: rgba(247, 248, 252, 1);
+    font-weight: 500;
+
+    .text {
+      color: rgba(60, 60, 67, 0.6);
+    }
+  }
+
+  ${theme.response.tablet} {
+    &.ui.dropdown {
+      min-width: 180px;
+      padding: 5px 15px;
+
+      font-size: 12px;
+    }
+
+    .text {
+      color: rgba(60, 60, 67, 0.6);
+    }
+  }
 `;