Merge pull request #24 from EFUB-TEAM4/issue-4

#4 [MyPage] Nickname Input & Calendar
EFUB-TEAM4 · Jul 27, 2022 · 3e44fcb · 3e44fcb
2 parents 8ca1a5e + ba41c34
commit 3e44fcb
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 13 deletions.
diff --git a/src/assets/Pencil/WhiteNormalPencil.svg b/src/assets/Pencil/WhiteNormalPencil.svg
diff --git a/src/assets/Pencil/WhiteOutlinePencil.svg b/src/assets/Pencil/WhiteOutlinePencil.svg
diff --git a/src/assets/index.js b/src/assets/index.js
@@ -17,6 +17,8 @@ export { default as UpWhite } from './Prefer/UpWhite.svg';
 /* Pencil */
 export { default as NormalPencil } from './Pencil/NormalPencil.svg';
 export { default as OutlinePencil } from './Pencil/OutlinePencil.svg';
+export { default as WhiteNormalPencil } from './Pencil/WhiteNormalPencil.svg';
+export { default as WhiteOutlinePencil } from './Pencil/WhiteOutlinePencil.svg';
 /* Close */
 export { default as BlackClose } from './Close/BlackClose.svg';
 export { default as WhiteClose } from './Close/WhiteClose.svg';

diff --git a/src/components/CustomCalendar/index.js b/src/components/CustomCalendar/index.js
@@ -8,7 +8,7 @@ import { StyledRoot, CalendarContainer, Image } from './style';
 
 function CustomCalendar() {
   const [value, onChange] = useState(new Date());
-  const mark = ['2022-07-07', '2022-07-10'];
+  const mark = ['20190707', '20220709', '20220710'];
   return (
     <StyledRoot>
       <CalendarContainer>
@@ -23,15 +23,15 @@ function CustomCalendar() {
           next2Label={null}
           prev2Label={null}
           tileClassName={({ date }) => {
-            if (mark.find(x => x === moment(date).format('YYYY-MM-DD'))) {
+            if (mark.find(x => x === moment(date).format('YYYYMMDD'))) {
               return 'highlight';
             }
             return null;
           }}
           /* eslint-disable */
           tileContent={({ date, view }) => {
             const html = [];
-            if (mark.find(x => x === moment(date).format('YYYY-MM-DD'))) {
+            if (mark.find(x => x === moment(date).format('YYYYMMDD'))) {
               html.push(
                 <NavLink key={0} to={`/MyPage/save/${date}`}>
                   <Image src={CalMoonCloud} alt="record" />

diff --git a/src/pages/MyPage/index.jsx b/src/pages/MyPage/index.jsx
@@ -1,8 +1,9 @@
 /* eslint-disable import/no-unresolved */
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useInput } from 'hooks';
 import { CustomCalendar } from 'components';
-import { User, WhiteLeft } from 'assets';
+import { User, WhiteLeft, WhiteNormalPencil, WhiteOutlinePencil } from 'assets';
 import {
   StyledRoot,
   DesktopHeader,
@@ -19,6 +20,7 @@ import {
 
 function MyPage() {
   const navigate = useNavigate();
+  const [isEditMode, setIsEditMode] = useState(1);
   return (
     <StyledRoot>
       <DesktopHeader>
@@ -35,11 +37,31 @@ function MyPage() {
         </button>
       </MobileHeader>
       <UserWrapper>
-        <UserIcon src={User} alt="UserIcon" />
-        <UserTextWrapper>
-          <NameText>이름</NameText>
-          <EmailText>이메일</EmailText>
-        </UserTextWrapper>
+        <div className="UserInfoWrapper">
+          <UserIcon src={User} alt="UserIcon" />
+          <UserTextWrapper>
+            <NameText
+              placeholder="이름"
+              value={useInput.value}
+              disabled={isEditMode}
+              onChange={useInput.onChange}
+            />
+            <EmailText>이메일</EmailText>
+          </UserTextWrapper>
+        </div>
+        <button
+          type="button"
+          className="EditButton"
+          onClick={() => {
+            setIsEditMode(current => !current);
+          }}
+        >
+          {isEditMode ? (
+            <img src={WhiteNormalPencil} alt="EditButton" />
+          ) : (
+            <img src={WhiteOutlinePencil} alt="EditButton" />
+          )}
+        </button>
       </UserWrapper>
       <CustomCalendar />
       <MobileFooter>

diff --git a/src/pages/MyPage/style.js b/src/pages/MyPage/style.js
@@ -56,11 +56,23 @@ const UserWrapper = styled.div`
   display: flex;
   flex-direction: row;
   margin: 3rem 0;
+  .UserInfoWrapper {
+    display: flex;
+    flex-direction: row;
+  }
+  .EditButton {
+    width: 3rem;
+    height: 3rem;
+    img {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
   ${applyMediaQuery('mobile')} {
+    justify-content: space-between;
     margin: 5rem 0;
   }
 `;
-
 const UserTextWrapper = styled.div`
   height: 5rem;
   display: flex;
@@ -74,14 +86,20 @@ const UserIcon = styled.img`
   height: 5rem;
 `;
 
-const NameText = styled.p`
+const NameText = styled.input`
   color: ${({ theme: { color } }) => color.white};
   font-family: 'Cafe24Ssurround';
   font-size: ${({ theme: { font } }) => font.size.small};
+  font-weight: ${({ theme: { font } }) => font.weight.medium};
+  background: transparent;
+  border: none;
+  ::placeholder {
+    color: ${({ theme: { color } }) => color.white};
+  }
   ${applyMediaQuery('mobile')} {
     font-size: ${({ theme: { font } }) => font.size.semiMedium};
+    width: 50vw;
   }
-  font-weight: ${({ theme: { font } }) => font.weight.medium};
 `;
 
 const EmailText = styled.p`