Merge pull request #221 from jung-dam-diary/develop

v1.0.2 HOTFIX
jung-dam-diary · Dec 23, 2021 · 2c89265 · 2c89265
2 parents 4fe06eb + ce25763
commit 2c89265
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 64 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "prop-types": "^15.7.2",
     "qs": "^6.10.2",
     "react": "^17.0.2",
+    "react-datepicker": "^4.5.0",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.0.2",

diff --git a/src/common/utils/getTodayDate.jsx → src/common/utils/getDateStr.jsx b/src/common/utils/getTodayDate.jsx → src/common/utils/getDateStr.jsx
@@ -1,20 +1,21 @@
-const getTodayDate = () => {
-  let today = new Date();
+const getDateStr = (date) => {
+  let today = new Date(date);
+
   let dd = today.getDate();
   let mm = today.getMonth() + 1;
   let yyyy = today.getFullYear();
 
   if (dd < 10) {
-    dd += '0';
+    dd = '0' + dd;
   }
 
   if (mm < 10) {
-    mm += '0';
+    mm = '0' + mm;
   }
 
   today = `${yyyy}-${mm}-${dd}`;
 
   return today;
 };
 
-export default getTodayDate;
+export default getDateStr;
diff --git a/src/common/utils/getDateValidate.jsx b/src/common/utils/getDateValidate.jsx
@@ -0,0 +1,41 @@
+const getDateValidate = (date) => {
+  let checkDate = new Date(date);
+  let today = new Date();
+
+  let dd1 = checkDate.getDate();
+  let mm1 = checkDate.getMonth() + 1;
+  let yyyy1 = checkDate.getFullYear();
+
+  let dd2 = today.getDate();
+  let mm2 = today.getMonth() + 1;
+  let yyyy2 = today.getFullYear();
+  console.log(dd1);
+  console.log(mm1);
+  if (dd1 < 10) {
+    dd1 = '0' + dd1;
+  }
+
+  if (mm1 < 10) {
+    mm1 = '0' + mm1;
+  }
+
+  if (dd2 < 10) {
+    dd2 = '0' + dd2;
+  }
+
+  if (mm2 < 10) {
+    mm2 = '0' + mm1;
+  }
+
+  checkDate = `${yyyy1}-${mm1}-${dd1}`;
+  today = `${yyyy2}-${mm2}-${dd2}`;
+  console.log(checkDate);
+  console.log(today);
+  // 지정 날짜가 현재 날짜 보다 크면 에러 발생 유도
+  const result = checkDate > today;
+  console.log(result);
+
+  return result;
+};
+
+export default getDateValidate;
diff --git a/src/components/domain/DiaryCreateStepOne/index.jsx b/src/components/domain/DiaryCreateStepOne/index.jsx
@@ -1,6 +1,11 @@
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import font from '@assets/fonts';
-import { Input } from '@components/base';
+import DatePicker from 'react-datepicker';
+import { ko } from 'date-fns/esm/locale';
+import color from '@assets/colors';
+
+import 'react-datepicker/dist/react-datepicker.css';
 
 const Container = styled.div`
   margin-top: 80px;
@@ -13,23 +18,41 @@ const Title = styled.span`
   ${font.heading_24};
 `;
 
+const InputStyle = css`
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  border-bottom: 1px solid ${color.brown};
+  background-color: transparent;
+  color: ${color.black};
+  outline: none;
+  ${font.content_18};
+
+  &::placeholder {
+    color: ${color.grey};
+  }
+`;
+
 const ErrorText = styled.span`
   margin-top: 5px;
   font-size: 14px;
   color: red;
 `;
 
-const DiaryCreateStepOne = ({ onChange, date, dateError, getTodayDate }) => {
+const DiaryCreateStepOne = ({ date, setDate, dateError }) => {
   return (
     <Container>
       <Title>날짜를 선택해주세요.</Title>
-      <Input
-        type="date"
+      <DatePicker
+        css={InputStyle}
+        locale={ko}
+        dateFormat="yyyy-MM-dd"
         name="date"
-        onChange={onChange}
-        css={font.content_16}
-        max={getTodayDate()}
-        value={date}
+        onChange={(date) => setDate(date)}
+        placeholderText="일기 기록 날짜를 입력해주세요 !"
+        selected={date}
+        maxDate={new Date()}
       />
       {dateError && <ErrorText>{dateError}</ErrorText>}
     </Container>

diff --git a/src/components/domain/DiaryImages/index.jsx b/src/components/domain/DiaryImages/index.jsx
@@ -45,13 +45,7 @@ const DiaryImages = ({ images }) => {
         <StyledSwiper {...swiperParams}>
           {images.map((image, index) => (
             <SwiperSlide key={index} style={SwiperSlideStyle}>
-              <Image
-                src={image}
-                alt="image"
-                width="100%"
-                height="100%"
-                mode="contain"
-              />
+              <Image src={image} alt="image" width="100%" height="100%" />
             </SwiperSlide>
           ))}
         </StyledSwiper>

diff --git a/src/components/domain/Header/index.jsx b/src/components/domain/Header/index.jsx
@@ -14,7 +14,6 @@ const HeaderContainer = styled.header`
   z-index: 5;
   top: 0;
   left: 0;
-  right: 0;
   width: 100%;
   height: 70px;
   justify-content: center;
@@ -25,11 +24,10 @@ const HeaderContainer = styled.header`
 `;
 
 const HeaderContent = styled.div`
-  display: -webkit-flex;
   display: flex;
-  justify-content: space-between;
-  -webkit-flex: 1;
   flex: 1;
+  width: 100%;
+  margin: 0;
   justify-content: ${({ align }) => align};
 `;
 
@@ -65,7 +63,7 @@ const Header = ({
     <HeaderContainer {...props}>
       <HeaderContent align="left">{leftComponent}</HeaderContent>
       <HeaderContent align="center">{centerComponent}</HeaderContent>
-      <HeaderContent align="right">{rightComponent}</HeaderContent>
+      <HeaderContent align="flex-end">{rightComponent}</HeaderContent>
     </HeaderContainer>
   );
 };
@@ -91,7 +89,6 @@ export const MainHeader = ({ groupTitle, familyMotto, role }) => {
           </TextWrapper>
         </>
       }
-      centerComponent={''}
       rightComponent={
         <GroupWrapper>
           <Button>
@@ -125,9 +122,11 @@ export const ServiceInfoHeader = ({ src }) => {
       leftComponent={<Image src={Logo} alt="logo" block width="38px" />}
       centerComponent={''}
       rightComponent={
-        <Link to="/album/profile">
-          <Avatar src={src} />
-        </Link>
+        <div style={{ textAlign: 'right' }}>
+          <Link to="/album/profile">
+            <Avatar src={src} />
+          </Link>
+        </div>
       }
     />
   );

diff --git a/src/pages/AlbumSettingsEditPage/index.jsx b/src/pages/AlbumSettingsEditPage/index.jsx
@@ -3,7 +3,14 @@ import styled from '@emotion/styled';
 import DefaultContainer from '@styles/DefaultContainer';
 import font from '@assets/fonts';
 import color from '@assets/colors';
-import { Input, Upload, Icon, Button, LoadingModal } from '@components/base';
+import {
+  Input,
+  Upload,
+  Icon,
+  Button,
+  LoadingModal,
+  Modal,
+} from '@components/base';
 import { DetailPageHeader } from '@components/domain';
 import { getAlbumInfo } from '@api/getAlbumInfo';
 import { putAlbumInfo } from '@api/putAlbumInfo';
@@ -37,15 +44,15 @@ const AlbumSettingsEditPageWrapper = styled(DefaultContainer)`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding-top: 60px;
+  padding-top: 50px;
 `;
 
 const ContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin-bottom: 42px;
+  margin-bottom: 38px;
 `;
+
 const ContentTitle = styled.span`
   padding: 0;
   ${font.content_16}
@@ -86,12 +93,15 @@ const AlbumSettingsEditPage = () => {
 
   const [albumInfo, setAlbumInfo] = useState(intialState);
   const [image, setImage] = useState('');
+  const [modalContent, setModalContent] = useState('');
+  const [modalVisible, setModalVisible] = useState(false);
 
   const { values, isLoading, handleChange, handleSubmit } = useForm({
     initialValues: intialState,
     onSubmit: async () => {
       if (image === '' && values.title === '' && values.familyMotto === '') {
-        alert('변경할 앨범 정보가 없습니다.');
+        setModalContent('변경할 앨범 정보가 없습니다.');
+        handleModalVisible(true);
       } else {
         for (let value in albumInfo) {
           if (value === 'id') continue;
@@ -110,9 +120,9 @@ const AlbumSettingsEditPage = () => {
         }
 
         try {
-          const res = await putAlbumInfo(albumId, values);
-          res && alert('성공적으로 변경되었습니다.');
-          goBack();
+          await putAlbumInfo(albumId, values);
+          setModalContent('변경되었습니다.');
+          handleModalVisible(true);
         } catch ({ response }) {
           const { data } = response;
           console.log(data);
@@ -149,7 +159,19 @@ const AlbumSettingsEditPage = () => {
     navigate('../');
   };
 
-  console.log(albumInfo);
+  const handleModalVisible = (visible, to) => {
+    if (visible) {
+      setModalVisible(true);
+    } else {
+      if (to === 'back') {
+        setModalVisible(false);
+        goBack();
+      } else {
+        setModalVisible(false);
+      }
+    }
+  };
+
   const EditLists = (list) =>
     list.map(({ name, text, placeholder, type }, index) => (
       <ContentWrapper key={index}>
@@ -177,9 +199,30 @@ const AlbumSettingsEditPage = () => {
       <DetailPageHeader pageTitle="앨범 정보 수정" handleGoBack={goBack} />
       <LoadingModal isLoading={isLoading} />
       {EditLists(ALBUM_EDIT_LIST)}
-      <Button mode="primary" onClick={handleSubmit}>
+      <Button
+        mode="primary"
+        onClick={handleSubmit}
+        style={{ padding: '18px 0 18px 0', boxSizing: 'border-box' }}
+      >
         확인
       </Button>
+      {modalContent === '변경되었습니다.' ? (
+        <Modal
+          visible={modalVisible}
+          onClose={() => handleModalVisible(false, 'back')}
+          selectable="confirm"
+        >
+          {modalContent}
+        </Modal>
+      ) : (
+        <Modal
+          visible={modalVisible}
+          onClose={() => handleModalVisible(false)}
+          selectable="confirm"
+        >
+          {modalContent}
+        </Modal>
+      )}
     </AlbumSettingsEditPageWrapper>
   );
 };

diff --git a/src/pages/AlbumSettingsPage/index.jsx b/src/pages/AlbumSettingsPage/index.jsx
@@ -39,8 +39,8 @@ const AlbumSettingsPage = () => {
   const navigate = useNavigate();
 
   const albumSettings = (list) =>
-    list.map(({ name, to }) => (
-      <>
+    list.map(({ name, to }, index) => (
+      <div key={index}>
         <SettingsList
           onClick={() => {
             handleToPage(to);
@@ -49,7 +49,7 @@ const AlbumSettingsPage = () => {
           {name}
         </SettingsList>
         <Divider size={6} />
-      </>
+      </div>
     ));
 
   const goBack = () => {