Merge pull request #102 from space-401/feat/createPage

[FE] 충돌 수정, createPage에 게시글 수정 로직  추가

client/.env.sample

@@ -1,3 +1,5 @@
 BASE_URL="백엔드에서 지정한 URL"
 VITE_KAKAO_KEY="카카오 자바스크립트 고유키"
 VITE_KAKAO_REST_API="카카오 로그인 REST API 키"
+VITE_NAVER_CLIENT_ID="네이버 로그인 REST API 키"
+VITE_GOOGLE_CLIENT_ID="구글 로그인 REST API 키"

client/package.json

@@ -38,12 +38,12 @@
     "@types/react-mentions": "^4.1.8",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.5.1",
+    "browser-image-compression": "^2.0.2",
     "chromatic": "^6.24.1",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.9",
     "esbuild": "^0.19.2",
     "framer-motion": "^10.16.2",
-    "gapi-script": "^1.2.0",
     "msw": "^1.3.1",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",

client/src/apis/post/getPostDetail.ts

@@ -1,11 +1,15 @@
 import { axiosInstance } from '@apis/AxiosInstance';
 import { END_POINTS } from '@constants/api';
-import { PostDetailType } from '@type/space.type';
+import { PostDetailType } from '@/types/post.type';
 
 export const getPostDetail = async (postId: number) => {
   const { data } = await axiosInstance.get<PostDetailType>(
+<<<<<<< HEAD
+    END_POINTS.POST_DETAIL(String(postId))
+=======
     END_POINTS.POST + `/${postId}`
+>>>>>>> 6f40f99b6521b1c08c26bc62af5e3c1be30c4346
   );
-
+  console.log('postDetail 호출');
   return data;
 };

client/src/assets/mock/imgString

@@ -0,0 +1 @@
+export const ImgArr = [];

client/src/components/Create/BasicIconModal/BasicIcon.tsx

@@ -0,0 +1,18 @@
+import BasicIcon1 from '@/assets/mock/space1.png';
+import BasicIcon2 from '@/assets/mock/space2.png';
+import BasicIcon3 from '@/assets/mock/space3.png';
+import BasicIcon4 from '@/assets/mock/space4.png';
+import BasicIcon5 from '@/assets/mock/space5.png';
+
+const BasicIcon = () => {
+  const BasicIconArr = [
+    BasicIcon1,
+    BasicIcon2,
+    BasicIcon3,
+    BasicIcon4,
+    BasicIcon5,
+  ];
+  return BasicIconArr;
+};
+
+export default BasicIcon;

client/src/components/Create/BasicIconModal/index.tsx

@@ -0,0 +1,80 @@
+import { Modal, Box } from '@mui/material';
+import S from '@/components/Create/BasicIconModal/style';
+import { ReactComponent as DeleteIcon } from '@/assets/svg/deleteIcon.svg';
+import BasicButton from '@/components/common/BasicButton';
+// import { SetStateAction, Dispatch } from 'react';
+import BasicIcon from './BasicIcon';
+// import { useState } from 'react';
+// import { onConvertToFile } from '@/utils/fileConvertor';
+
+type BasicIconModalPropsType = {
+  isOpen: boolean;
+  modalClose: () => void;
+  setSelectIconIdx: any;
+  selectIconIdx: any;
+};
+
+const BasicIconModal = ({
+  isOpen,
+  modalClose,
+  setSelectIconIdx,
+  selectIconIdx,
+}: BasicIconModalPropsType) => {
+  const BasicIconArr = BasicIcon();
+
+  // const [selectIconIdx, setSelectIconIdx] = useState(0);
+
+  const onSubmitImg = () => {
+    // setIsBasicImg(true, selectIconIdx);
+    // const fileImg = onConvertToFile(BasicIconArr[selectIconIdx], 'spaceImage');
+    // setFileImg(fileImg);
+    modalClose();
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      slotProps={{
+        backdrop: {
+          sx: {
+            backgroundColor: 'rgba(0,0,0,0.6)',
+          },
+        },
+      }}
+    >
+      <Box tabIndex={-1}>
+        <S.Wrapper>
+          <S.Text>아이콘을 선택하세요</S.Text>
+          <S.IconBoxWrapper>
+            {BasicIconArr.map((icon, index) => {
+              return (
+                <S.IconBox
+                  backImg={icon}
+                  isSelected={selectIconIdx == index}
+                  onClick={() => {
+                    setSelectIconIdx(index);
+                  }}
+                />
+              );
+            })}
+          </S.IconBoxWrapper>
+          <DeleteIcon
+            style={{
+              position: 'absolute',
+              right: 20,
+              top: 20,
+              cursor: 'pointer',
+            }}
+            onClick={modalClose}
+          />
+          <S.SubmitBtnWrapper>
+            <BasicButton width={76} onClick={onSubmitImg} fontSize={16}>
+              확인
+            </BasicButton>
+          </S.SubmitBtnWrapper>
+        </S.Wrapper>
+      </Box>
+    </Modal>
+  );
+};
+export default BasicIconModal;

client/src/components/Create/BasicIconModal/style.ts

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import { flexCenter } from '@/styles/common';
+
+const Wrapper = styled.div`
+  flex-direction: column;
+  ${flexCenter}
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 812px;
+  height: 324px;
+  transform: translate(-50%, -50%);
+  background: ${({ theme }) => theme.COLOR['gray-5']};
+  border-radius: 10px;
+  color: ${({ theme }) => theme.COLOR.white};
+  gap: 30px;
+`;
+
+const IconBoxWrapper = styled.div`
+  display: flex;
+  gap: 16px;
+  margin-bottom: 70px;
+`;
+
+const IconBox = styled.div<{ backImg: string; isSelected: boolean }>`
+  width: 140px;
+  height: 140px;
+  background-color: ${({ theme }) => theme.COLOR['gray-3']};
+  border-radius: 10px;
+  background-image: url(${({ backImg }) => backImg});
+  background-size: cover;
+  opacity: ${({ isSelected }) => (isSelected ? 1 : 0.5)};
+  transition: opacity 0.3s ease-in-out;
+`;
+
+const Text = styled.div`
+  text-align: center;
+  font-family: Pretendard;
+  font-size: ${({ theme }) => theme.TEXT_SIZE['text-24']};
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+const SubmitBtnWrapper = styled.div`
+  position: absolute;
+  right: 20px;
+  bottom: 24.5px;
+`;
+
+const S = {
+  Wrapper,
+  IconBox,
+  Text,
+  IconBoxWrapper,
+  SubmitBtnWrapper,
+};
+
+export default S;

client/src/components/Create/CreateSelectBox/index.tsx

@@ -17,8 +17,24 @@ const CreateSelectBox = (props: SelectBoxProps) => {
     ListItem,
     labelName,
     setState,
+    selectState,
   } = props;
-  const [select, setSelect] = useState<selectType[]>([]);
+
+  // useEffect(() => {
+  //   if (labelName === '사용자') {
+  //     id = state.userId;
+  //     title = state.userName;
+  //     imgUrl = state.imgUrl;
+  //   } else {
+  //     // id = state.userId;
+  //     // title = state.userName;
+  //     // imgUrl = state.imgUrl;
+  //   }
+  // }, []);
+
+  const [select, setSelect] = useState<selectType[]>(
+    selectState ? selectState : []
+  );
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [searchValue, setSearchValue] = useState('');
 

client/src/components/Create/CreateUserModal/index.tsx

@@ -0,0 +1,26 @@
+import { Modal, Box } from '@mui/material';
+import { useCreateUserModal } from '@/store/modal';
+import S from './style';
+
+const CreateUserModal = () => {
+  const { isOpen, ModalClose } = useCreateUserModal();
+  return (
+    <Modal
+      open={isOpen}
+      onClose={ModalClose}
+      slotProps={{
+        backdrop: {
+          sx: {
+            backgroundColor: 'rgba(0,0,0,0.6)',
+          },
+        },
+      }}
+    >
+      <Box tabIndex={-1}>
+        <S.Wrapper></S.Wrapper>
+      </Box>
+    </Modal>
+  );
+};
+
+export default CreateUserModal;

client/src/components/Create/CreateUserModal/style.ts

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import { flexCenter } from '@/styles/common';
+
+const Wrapper = styled.div`
+  flex-direction: column;
+  ${flexCenter}
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 482px;
+  transform: translate(-50%, -50%);
+  background: ${({ theme }) => theme.COLOR['gray-5']};
+  border-radius: 20px;
+`;
+
+const Content = styled.div<{ fontSize: number; lightgrey: boolean }>`
+  width: 100%;
+  ${flexCenter}
+  padding-bottom:24px;
+  padding-top: 24px;
+  border-bottom: 1px solid var(--grey-4, #5f5f5f);
+  color: ${({ theme }) => theme.COLOR.white};
+  font-size: ${({ fontSize }) => fontSize}px;
+  background-color: ${({ lightgrey, theme }) =>
+    lightgrey ? theme.COLOR['gray-4'] : theme.COLOR['gray-5']};
+
+  &:first-child {
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+  }
+`;
+
+const S = {
+  Wrapper,
+  Content,
+};
+
+export default S;