계획표 페이지 UI 작업 (#60)

* feat: 계획표 화면으로 라우터 추가

* feat: 아이콘 이미지 asset 추가

* fix: 계획 페이지 라우터 변경

* fix: 계획표 페이지 페이지 컴포넌트 수정

* feat: 꿈틀나무 페이지 UI 구현

* feat: 뒤로가기 버튼 UI 구현

* fix: 꿈틀나무 UI 수정

* feat: 계획 수정 페이지 UI 구현

---------

Co-authored-by: jwoo08 <[email protected]>

src/App.tsx

@@ -31,7 +31,7 @@ function App() {
               <Route path={'/home'} element={<HomePage />} />
               <Route path={'/write'} element={<WritePage />} />
               <Route path={'/userinfo'} element={<UserInfoPage />} />
-              <Route path={'/plan'} element={<PlanPage />} />
+              <Route path={'/plan/:planId'} element={<PlanPage />} />
               <Route path={'/planimg'} element={<DownloadImgPage />} />
               <Route path={'*'} element={<ErrorPage />} />
             </Routes>

src/components/common/Modal/ModalBackdrop.tsx

@@ -7,4 +7,5 @@ export const ModalBackdrop = styled.div`
   right: 0;
   top: 0;
   bottom: 0;
+  z-index: 1000;
 `;

src/components/home/PlanBox.tsx

@@ -1,7 +1,9 @@
 import styled, { css } from 'styled-components';
 import { ProgressCircle } from './ProgressCircle';
+import { useNavigate } from 'react-router-dom';
 
 interface PlanBoxProps {
+  planId: number;
   mainplan: string;
   subplans: string[];
   startdate: string;
@@ -14,10 +16,22 @@ export const PlanBox = ({ ...props }: PlanBoxProps) => {
   const mainColors = ['#9D9BFF', '#FFC066', '#FF7EBC', '#4ED99C'];
   const darkColors = ['#6D6AFF', '#FF9600', '#FF3898', '#00AD7C'];
 
+  const navigate = useNavigate();
+
+  const handleClickMainText = (planId: number) => {
+    navigate(`/plan/${planId}`);
+  };
+
   return (
     <PlanBoxContainer color={mainColors[props.color]}>
       <InfoContainer>
-        <MainPlanText>{props.mainplan}</MainPlanText>
+        <MainPlanText
+          onClick={() => {
+            handleClickMainText(props.planId);
+          }}
+        >
+          {props.mainplan}
+        </MainPlanText>
         <StartDateText color={darkColors[props.color]}>
           {props.startdate}~
         </StartDateText>

src/components/plan/BackBtn.tsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+
+export const BackBtn = () => {
+  const navigate = useNavigate();
+
+  const handleClickBtn = () => {
+    navigate('/home');
+  };
+
+  return (
+    <BackButton onClick={handleClickBtn}>
+      <img
+        src={import.meta.env.BASE_URL + './icon/leftarrow_icon.svg'}
+        alt="뒤로가기"
+      />
+    </BackButton>
+  );
+};
+
+const BackButton = styled.button`
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  width: 28px;
+  height: 28px;
+
+  border-radius: 50%;
+  border: none;
+  background-color: ${({ theme }) => theme.colors.green};
+  z-index: 300;
+
+  img {
+    width: 22px;
+    height: 22px;
+  }
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

src/components/plan/PlanContent.tsx

@@ -16,9 +16,12 @@ export const PlanContent = () => {
 
 const PlanContentContainer = styled.div`
   position: absolute;
-  top: 0;
+  top: 40px;
   left: 50%;
   transform: translate(-50%, 0);
 `;
 
-const BackgroundImg = styled.img``;
+const BackgroundImg = styled.img`
+  border: none;
+  outline: none;
+`;

src/components/plan/PlanLayout.tsx

@@ -2,7 +2,6 @@ import styled from 'styled-components';
 
 import { TopImgContent } from './TopImgContent';
 import { PlanContent } from './PlanContent';
-import { BottomContent } from './BottomContent';
 
 export const PlanLayout = () => {
   return (
@@ -12,17 +11,17 @@ export const PlanLayout = () => {
       <BottomBackground />
       {/*계획표 이미지, 텍스트*/}
       <PlanContent />
-      {/*이미지 저장 버튼*/}
-      <BottomContent />
       {/*상단 이미지들*/}
       <TopImgContent />
     </LayoutContainer>
   );
 };
 
 const LayoutContainer = styled.div`
+  padding-top: 40px;
   height: 100vh;
   position: relative;
+  background-color: #ccedff;
 `;
 
 const TopBackground = styled.div`
@@ -33,7 +32,7 @@ const TopBackground = styled.div`
 
 const BottomBackground = styled.div`
   width: 100%;
-  height: 80px;
+  height: 100%;
   //height: calc(100vh - 500px);
   background-color: #8cd27b;
 `;

src/components/plan/TopImgContent.tsx

@@ -25,7 +25,7 @@ const TopImgContentContainer = styled.div`
 
 const CloudImg = styled.img`
   position: absolute;
-  top: 15px;
+  top: 60px;
   left: 15px;
 
   width: 120px;

src/components/plan/ViewToggle.tsx

@@ -0,0 +1,101 @@
+import styled from 'styled-components';
+
+enum PlanView {
+  Image = 'Image',
+  Graph = 'Graph',
+}
+interface ViewToggleProps {
+  view: PlanView;
+  setView: React.Dispatch<React.SetStateAction<PlanView>>;
+}
+export const ViewToggle = ({ view, setView }: ViewToggleProps) => {
+  const handleClickToggleBtn = () => {
+    if (view === PlanView.Image) setView(PlanView.Graph);
+    else setView(PlanView.Image);
+  };
+  return (
+    <ViewToggleContainer>
+      <ToggleBtn
+        className={view === PlanView.Image ? 'selected' : ''}
+        onClick={handleClickToggleBtn}
+      >
+        {view === PlanView.Image ? (
+          <img
+            src={import.meta.env.BASE_URL + './icon/apple_icon_selected.svg'}
+            alt="꿈틀나무"
+          />
+        ) : (
+          <img
+            src={import.meta.env.BASE_URL + './icon/apple_icon.svg'}
+            alt="꿈틀나무"
+          />
+        )}
+        꿈틀나무
+      </ToggleBtn>
+      <ToggleBtn
+        className={view === PlanView.Graph ? 'selected' : ''}
+        onClick={handleClickToggleBtn}
+      >
+        {view === PlanView.Graph ? (
+          <img
+            src={import.meta.env.BASE_URL + './icon/pen_icon_selected.svg'}
+            alt="만다라트"
+          />
+        ) : (
+          <img
+            src={import.meta.env.BASE_URL + './icon/pen_icon.svg'}
+            alt="만다라트"
+          />
+        )}
+        만다라트
+      </ToggleBtn>
+    </ViewToggleContainer>
+  );
+};
+
+const ViewToggleContainer = styled.div`
+  position: absolute;
+  top: 28px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 300;
+
+  width: 140px;
+  height: 32px;
+  padding: 4px;
+  border-radius: 8px;
+
+  background-color: ${({ theme }) => theme.colors.gray_300};
+
+  display: flex;
+  justify-content: space-between;
+`;
+
+const ToggleBtn = styled.button`
+  width: 64px;
+  height: 24px;
+  border-radius: 4px;
+  padding: 0;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-family: 'PretendardMedium';
+  font-size: 12px;
+  background-color: ${({ theme }) => theme.colors.gray_300};
+  color: ${({ theme }) => theme.colors.gray_600};
+  &.selected {
+    background-color: white;
+    color: ${({ theme }) => theme.colors.green};
+    box-shadow: 1px 1px 8px 0px #d9d9d9;
+  }
+
+  img {
+    width: 12px;
+    height: 12px;
+    margin-right: 2px;
+  }
+
+  transition: background-color 0.1s ease;
+`;

src/components/planedit/DoneModal.tsx

@@ -0,0 +1,102 @@
+import styled from 'styled-components';
+import { Modal } from '@components/common/Modal';
+import { ModalHeader, HeaderContent, CloseBtn } from './EditModal';
+
+interface DoneModalProps {
+  isOpenModal: boolean;
+  setIsOpenModal: React.Dispatch<React.SetStateAction<boolean>>;
+  plan: string;
+}
+export const DoneModal = ({
+  isOpenModal,
+  setIsOpenModal,
+  plan,
+}: DoneModalProps) => {
+  return (
+    <Modal
+      width="320px"
+      height="200px"
+      padding="16px 24px"
+      isOpenModal={isOpenModal}
+      setIsOpenModal={setIsOpenModal}
+    >
+      <DoneModalContainer>
+        <ModalHeader>
+          <HeaderContent>목표 완료</HeaderContent>
+          <CloseBtn
+            onClick={() => {
+              setIsOpenModal(false);
+            }}
+          >
+            <img
+              src={import.meta.env.BASE_URL + './icon/close_icon.svg'}
+              alt="닫기"
+            />
+          </CloseBtn>
+        </ModalHeader>
+        <PlanContent>
+          <PlanText>"{plan}"</PlanText>
+          <GuideText>목표를 완료하셨나요?</GuideText>
+        </PlanContent>
+        <BottomBtnContainer>
+          <CancelBtn>아직이에요</CancelBtn>
+          <DoneBtn>완료했어요</DoneBtn>
+        </BottomBtnContainer>
+      </DoneModalContainer>
+    </Modal>
+  );
+};
+
+const DoneModalContainer = styled.div``;
+
+const PlanContent = styled.div`
+  width: 100%;
+  height: 100px;
+  margin: 8px 0;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+`;
+
+const PlanText = styled.div`
+  width: 100%;
+  font-family: 'Pretendard';
+  color: ${({ theme }) => theme.colors.green};
+  text-align: center;
+`;
+const GuideText = styled.div`
+  width: 100%;
+  text-align: center;
+
+  font-family: 'PretendardMedium';
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.gray_900};
+`;
+
+const BottomBtnContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const BottomBtn = styled.button`
+  width: 132px;
+  height: 28px;
+  border-radius: 4px;
+  border: none;
+  padding: 0;
+
+  font-family: 'Pretendard';
+  font-size: 11px;
+`;
+
+export const CancelBtn = styled(BottomBtn)`
+  background-color: white;
+  border: 1px solid ${({ theme }) => theme.colors.green};
+  color: ${({ theme }) => theme.colors.green};
+`;
+
+export const DoneBtn = styled(BottomBtn)`
+  background-color: ${({ theme }) => theme.colors.green};
+  color: white;
+`;