Merge pull request #288 from MOONSHOT-Team/SP2/feat

SP2/feat -> develop : CBT 이전 수정사항 반영

src/MainDashBoard/components/mainDashBoardOkrTree/MainDashKrNodes.tsx

@@ -14,9 +14,15 @@ interface IMainDashKrNodesProps {
   krIdx: number;
   krList: IKeyResultTypes;
   onShowSideSheet: (krId: number | undefined) => void;
+  currentKrId: number;
 }
 
-export const MainDashKrNodes = ({ krIdx, krList, onShowSideSheet }: IMainDashKrNodesProps) => {
+export const MainDashKrNodes = ({
+  krIdx,
+  krList,
+  onShowSideSheet,
+  currentKrId,
+}: IMainDashKrNodesProps) => {
   if (!krList) return;
   const { krTitle, krId } = krList;
 
@@ -27,6 +33,7 @@ export const MainDashKrNodes = ({ krIdx, krList, onShowSideSheet }: IMainDashKrN
         <StraightLine />
         <StyledIcDrag />
         <StMainDashBox
+          isActive={currentKrId === krId}
           onClick={() => {
             onShowSideSheet(krId);
           }}
@@ -48,9 +55,13 @@ const StyledIcDrag = styled(IcDrag)`
   margin: 0 0.5rem 0 0.6rem;
 `;
 
-const StMainDashBox = styled(StKrBox)`
+const StMainDashBox = styled(StKrBox)<{ isActive: boolean }>`
   color: ${({ theme }) => theme.colors.gray_000};
   cursor: pointer;
+  background-color: ${({ theme, isActive }) =>
+    isActive ? theme.colors.transparent_purple : theme.colors.gray_600};
+  outline-color: ${({ theme, isActive }) =>
+    isActive ? theme.colors.main_darkpurple : theme.colors.gray_500};
 
   ${({ theme }) => theme.fonts.body_13_medium};
 `;

src/MainDashBoard/components/mainDashBoardOkrTree/MainDashboardOKRTree.tsx

@@ -21,9 +21,14 @@ import { MainDashTaskNodes } from './MainDashTaskNodes';
 interface IMainDashboardOKRTreeProps {
   currentOkrData: IMainData;
   onShowSideSheet: (krId: number | undefined) => void;
+  currentKrId: number;
 }
 
-const MainDashboardOKRTree = ({ onShowSideSheet, currentOkrData }: IMainDashboardOKRTreeProps) => {
+const MainDashboardOKRTree = ({
+  onShowSideSheet,
+  currentOkrData,
+  currentKrId,
+}: IMainDashboardOKRTreeProps) => {
   const [viewMode, setViewMode] = useState(OKR_TREE_VIEWS['VIEWOKRTREE']);
   const [editKrId, setEditKrId] = useState<number | undefined>();
   const [editKrList, setEditKrList] = useState<IKeyResultTypes[]>(currentOkrData?.krList);
@@ -77,6 +82,7 @@ const MainDashboardOKRTree = ({ onShowSideSheet, currentOkrData }: IMainDashboar
                     krIdx={krIdx}
                     krList={editKrList[krIdx]}
                     onShowSideSheet={onShowSideSheet}
+                    currentKrId={currentKrId}
                   />
                 )}
                 TaskNodes={(isFirstChild, krIdx, taskIdx) => (

src/MainDashBoard/index.tsx

@@ -38,7 +38,7 @@ const MainDashBoard = () => {
 
   const [showSideSheet, setShowSideSheet] = useState<boolean>(false);
   const [currentGoalId, setCurrentGoalId] = useState<number>();
-  const [currentKrId, setCurrentKrId] = useState<number>(0);
+  const [currentKrId, setCurrentKrId] = useState<number>(-1);
 
   const [showState, setShowState] = useState(DASHBOARD_SHOW_STATE[0]);
   const [targetModal, setTargetModal] = useState<string | null>(null);
@@ -86,7 +86,7 @@ const MainDashBoard = () => {
     setShowState(DASHBOARD_SHOW_STATE[1]);
   };
 
-  const handleCurrentGoalId = (id: number | number) => {
+  const handleCurrentGoalId = (id: number) => {
     if (!id) return;
     setCurrentGoalId(id);
   };
@@ -131,6 +131,7 @@ const MainDashBoard = () => {
 
   const handleCloseSideSheet = () => {
     setShowSideSheet(false);
+    setCurrentKrId(-1);
   };
 
   /** 
@@ -160,6 +161,7 @@ const MainDashBoard = () => {
               <MainDashboardOKRTree
                 onShowSideSheet={handleShowSideSheet}
                 currentOkrData={okrTreeData}
+                currentKrId={currentKrId}
               />
             </section>
             {showSideSheet && (

src/My/components/Badges.tsx

@@ -0,0 +1,82 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { ITEM_LIST } from '../constants/ITEM_LIST';
+
+interface IAcquiredItemList {
+  src: string;
+  title: string;
+  subTitle: string;
+}
+
+const Badges = () => {
+  return (
+    <section css={pageCenter}>
+      <div>
+        <StAcquiredItemsText>획득한 아이템</StAcquiredItemsText>
+        <StAcquiredItemImgWrapper>
+          {ITEM_LIST.map(({ src, title, subTitle }: IAcquiredItemList) => (
+            <StAcquiredItemList key={title}>
+              <img src={src} alt="획득한 아이템 사진" width={184} height={240} />
+              <StAcquiredItemTitle>
+                <StAcquiredItemMainTitle>{title}</StAcquiredItemMainTitle>
+                <StAcquiredItemSubTitle>{subTitle}</StAcquiredItemSubTitle>
+              </StAcquiredItemTitle>
+            </StAcquiredItemList>
+          ))}
+        </StAcquiredItemImgWrapper>
+      </div>
+    </section>
+  );
+};
+
+export default Badges;
+
+const pageCenter = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 6.1rem 8.4rem;
+  margin: 0 auto;
+`;
+
+const StAcquiredItemsText = styled.p`
+  margin-bottom: 1rem;
+  color: ${({ theme }) => theme.colors.gray_000};
+  ${({ theme }) => theme.fonts.title_16_semibold};
+`;
+
+const StAcquiredItemImgWrapper = styled.article`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.6rem 2.4rem;
+  width: 80.8rem;
+  height: 49.6rem;
+`;
+
+const StAcquiredItemList = styled.div`
+  position: relative;
+`;
+
+const StAcquiredItemTitle = styled.div`
+  position: absolute;
+  bottom: 2.8rem;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  align-items: center;
+  justify-content: center;
+  transform: translateX(-50%);
+`;
+
+const StAcquiredItemMainTitle = styled.p`
+  color: ${({ theme }) => theme.colors.gray_100};
+  ${({ theme }) => theme.fonts.btn_14_semibold};
+`;
+
+const StAcquiredItemSubTitle = styled.p`
+  color: ${({ theme }) => theme.colors.gray_200};
+  ${({ theme }) => theme.fonts.body_12_regular};
+`;

src/My/components/Footer.tsx

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+import imgLogoForFooter from '../assets/images/imgLogoForFooter.png';
+import { FOOTER_LIST } from '../constants/FOOTER_LIST';
+
+const Footer = () => {
+  return (
+    <StFooter>
+      <img src={imgLogoForFooter} alt="footer-logo" width={110} height={25} loading="lazy" />
+      {FOOTER_LIST.map(({ label, url, newTab, isBold }) => (
+        <StFooterText key={label} to={url} target={newTab ? '_blank' : '_self'} isBold={isBold}>
+          {label}
+        </StFooterText>
+      ))}
+      <StCopyRightText>&copy; 2024 moonshot</StCopyRightText>
+    </StFooter>
+  );
+};
+
+export default Footer;
+
+const StFooter = styled.footer`
+  position: relative;
+  display: flex;
+  gap: 2.6rem;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 9rem;
+  background-color: #0f0f0f;
+`;
+
+const StFooterText = styled(Link)<{ isBold: boolean }>`
+  ${({ theme }) => theme.fonts.body_13_medium};
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: ${({ isBold }) => (isBold ? '700' : '500')};
+  color: ${({ theme }) => theme.colors.gray_450};
+`;
+
+const StCopyRightText = styled.span`
+  position: absolute;
+  top: 50%;
+  right: 4%;
+  color: ${({ theme }) => theme.colors.gray_400};
+  transform: translateY(-50%);
+
+  ${({ theme }) => theme.fonts.body_13_medium};
+`;

src/My/components/UserInfo.tsx

@@ -0,0 +1,82 @@
+import instance from '@apis/instance';
+import Loading from '@components/Loading';
+import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
+import useSWR from 'swr';
+
+import { getUserInfo } from '../apis/fetcher';
+import profileImg from '../assets/images/profileImg.png';
+
+const UserInfo = () => {
+  const { data: userInfo, isLoading } = useSWR('/v1/user/mypage', getUserInfo);
+  const navigate = useNavigate();
+
+  const handleWithdrawal = async () => {
+    await instance.delete('/v1/user/withdrawal');
+    localStorage.removeItem('ACCESS_TOKEN');
+    localStorage.removeItem('REFRESH_TOKEN');
+
+    navigate('/sign-in');
+  };
+
+  if (isLoading) return <Loading />;
+
+  return (
+    <StUserInfoContainer>
+      <StUserProfileImg
+        src={userInfo?.data.data.profileImgUrl ? userInfo?.data.data.profileImgUrl : profileImg}
+        alt="사용자 사진"
+      />
+      <StUserNickName>{userInfo?.data.data.nickname}</StUserNickName>
+      <StUserIdentification>
+        {userInfo?.data.data.socialPlatform === 'kakao' ? '카카오' : '구글'} 로그인 유저입니다.
+      </StUserIdentification>
+      <StWithdrawalButton onClick={handleWithdrawal}>회원탈퇴</StWithdrawalButton>
+    </StUserInfoContainer>
+  );
+};
+
+export default UserInfo;
+
+const StUserInfoContainer = styled.section`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  align-items: center;
+  width: 34rem;
+  padding-top: 13rem;
+  background-color: ${({ theme }) => theme.colors.gray_650};
+`;
+
+const StUserProfileImg = styled.img`
+  display: inline-flex;
+  width: 12rem;
+  height: 12rem;
+  border: 2px solid ${({ theme }) => theme.colors.gray_400};
+  border-radius: 60px;
+  object-fit: cover;
+`;
+
+const StUserNickName = styled.p`
+  margin: 3rem 0 0.6rem;
+  color: ${({ theme }) => theme.colors.gray_000};
+  ${({ theme }) => theme.fonts.title_20_semibold};
+`;
+
+const StUserIdentification = styled.p`
+  color: ${({ theme }) => theme.colors.gray_350};
+  ${({ theme }) => theme.fonts.body_13_medium};
+`;
+
+const StWithdrawalButton = styled.button`
+  position: absolute;
+  right: 4rem;
+  bottom: 4rem;
+  width: 4.5rem;
+  height: 2rem;
+  ${({ theme }) => theme.fonts.body_13_medium};
+
+  color: ${({ theme }) => theme.colors.gray_450};
+  border-bottom: 1px solid currentcolor;
+`;

src/My/constants/FOOTER_LIST.ts

@@ -0,0 +1,20 @@
+export const FOOTER_LIST = [
+  {
+    label: '서비스 소개',
+    url: '/about',
+    newTab: false,
+    isBold: false,
+  },
+  {
+    label: '서비스 이용약관',
+    url: 'https://moonshot-.notion.site/moonshot-1-0-5068b03a06a245b2b3b89d1b406345fe?pvs=4',
+    newTab: true,
+    isBold: false,
+  },
+  {
+    label: '개인정보 처리방침',
+    url: 'https://moonshot-.notion.site/moonshot-1-0-0cdb3499765349e9aba64474fbba933e',
+    newTab: true,
+    isBold: true,
+  },
+];