포지션, 스킬 태그 관리 ( #issue 336 )

src/api/admin/tag.api.ts

@@ -0,0 +1,69 @@
+import type { ApiCommonBasicType } from '../../models/apiCommon';
+import type { TagFormType } from '../../models/tags';
+import { httpClient } from '../http.api';
+
+export const postSkillTag = async (formData: FormData) => {
+  try {
+    await httpClient.post<ApiCommonBasicType>(`/skill-tag`, formData);
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const putSkillTag = async ({
+  formData,
+  id,
+}: {
+  formData: FormData;
+  id: number;
+}) => {
+  try {
+    await httpClient.put<ApiCommonBasicType>(`/skill-tag/${id}`, formData);
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const deleteSkillTag = async (id: number) => {
+  try {
+    await httpClient.delete<ApiCommonBasicType>(`/skill-tag/${id}`);
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const postPositionTag = async ({ name }: Pick<TagFormType, 'name'>) => {
+  try {
+    await httpClient.post<ApiCommonBasicType>(`/position-tag`, { name });
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const putPositionTag = async ({
+  name,
+  id,
+}: {
+  name: Pick<TagFormType, 'name'>;
+  id: number;
+}) => {
+  try {
+    await httpClient.put<ApiCommonBasicType>(`/position-tag/${id}`, { name });
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const deletePositionTag = async (id: number) => {
+  try {
+    await httpClient.delete<ApiCommonBasicType>(`/position-tag/${id}`);
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/components/admin/adminTags/AdminTagCRUD.styled.ts

@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+import { SendButton } from '../../user/customerService/inquiry/Inquiry.styled';
+
+export const CRUDContainer = styled.form`
+  width: 100%;
+  height: 100%;
+`;
+
+export const CRUDWrapper = styled.div`
+  width: 70%;
+  height: 100%;
+  display: flex;
+  gap: 1rem;
+  font-size: 1.2rem;
+  justify-content: space-between;
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  gap: 1.5rem;
+  justify-content: center;
+  /* align-items: center; */
+`;
+
+export const CRUDButtonWrapper = styled.div`
+  display: grid;
+  gap: 1rem;
+`;
+
+export const CRUDButton = styled(SendButton)`
+  height: 2.3rem;
+`;
+
+export const CRUDTitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
+
+export const CRUDTitleHead = styled.span``;
+
+export const CRUDTitle = styled.input`
+  border-bottom: 1px solid ${({ theme }) => theme.color.placeholder};
+  padding-left: 0.3rem;
+  font-size: 1rem;
+`;
+
+export const CRUDDefaultButton = styled.button`
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+
+export const CRUDImgWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
+
+export const CRUDImgHead = styled.span``;
+
+export const CRUDImg = styled.img`
+  width: 3rem;
+  border: 1px solid ${({ theme }) => theme.color.grey};
+`;
+
+export const CRUDImgExplore = styled(SendButton)`
+  cursor: pointer;
+  border-radius: ${({ theme }) => theme.borderRadius.primary};
+  padding: 0.4rem 1rem;
+`;
+
+export const CRUDImgExplain = styled.span`
+  max-width: 10rem;
+`;
+
+export const CRUDImgInput = styled.input`
+  visibility: hidden;
+  width: 0;
+  height: 0;
+`;