Merge pull request #277 from DguFarmSystem/develop

release: 2025년 5월 개발분 통합 릴리즈

Author: dewbeeny

apps/farminglog/src/components/Header/Header.styled.ts

@@ -183,6 +183,7 @@ export const ProfileContainer = styled.div<{ $isMobile: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: center;
+  cursor: pointer;
 
   height: ${({ $isMobile }) => ($isMobile ? "50px" : "60px")};
   padding-right: ${({ $isMobile }) => ($isMobile ? "0px" : "20px")};

apps/farminglog/src/components/Popup/popup.styled.ts

@@ -217,6 +217,7 @@ export const HeaderPin = styled.div<ResponsiveProps>`
   flex-shrink: 0;
   aspect-ratio: 1/1;
   margin: 3px 6px 0px 6px;
+  cursor: pointer;
 
   border-radius: ${({ $isApp }) => ($isApp ? '6px' : '100px')};
   background: #FF9A4D;

apps/farminglog/src/components/Popup/popup.tsx

@@ -166,6 +166,7 @@ const MyPageLayout: React.FC<PopupProps> = ({
               alt="로그아웃"
               width={isMobile ? 20 : 40}
               height={isMobile ? 20 : 40}
+              style={{ cursor: "pointer" }}
             />
           </button>
         )}
@@ -230,8 +231,7 @@ const MessageLayout: React.FC<PopupProps> = ({
 };
 
 /** 4) INFO 팝업 */
-const InfoLayout: React.FC<PopupProps> = ({
-}) => {
+const InfoLayout: React.FC<PopupProps> = () => {
   const { isMobile, isApp } = useMediaQueries();
 
   return (

apps/farminglog/src/layouts/WhiteContentContainer.styled.ts

@@ -16,6 +16,8 @@ export const MainContainer = styled.div<ResponsiveProps>`
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
+  
+
 `;
 
 export const ContentContainer = styled.div<ResponsiveProps>`
@@ -31,6 +33,7 @@ export const ContentContainer = styled.div<ResponsiveProps>`
 
   border-radius: 5px;
   background: var(--FarmSystem_White, #FCFCFC);
+  border-radius: ${({ $isMobile }) => ($isMobile ? '3px' : '10px')};
 `;
 
 
@@ -45,6 +48,8 @@ export const ContentContainerHeader = styled.div<ResponsiveProps>`
     background: var(--FarmSystem_White, #FCFCFC);
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   `}
+  border-radius: ${({ $isMobile }) =>
+  $isMobile ? '3px 3px 0 0' : '10px 10px 0 0'};
 `;
 
 export const ContentContainerTitle = styled.h1<ResponsiveProps>`
@@ -68,4 +73,5 @@ export const GoBackButton = styled.button<ResponsiveProps>`
   height: ${({ $isApp }) => ($isApp ? '24px' : '35px')};
   flex-shrink: 0;
   margin-left: ${({ $isApp }) => ($isApp ? '0px' : '25px')};
+  cursor: pointer;
 `;

apps/farminglog/src/pages/farminglog/create/index.styled.ts

@@ -320,6 +320,7 @@ export const GoBackButton = styled.button<ResponsiveProps>`
   padding: ${({ $isApp }) => ($isApp ? '5px 17.5px 5px 18.5px' : '15px 30px')};
   justify-content: center;
   align-items: center;
+  cursor: pointer;
 
   border-radius: ${({ $isApp }) => ($isApp ? '5px' : '10px')};
   background: var(--FarmSystem_DarkGrey, #999);
@@ -331,6 +332,7 @@ export const CreateButton = styled.button<ResponsiveProps>`
   padding: ${({ $isApp }) => ($isApp ? '5px 17.5px 5px 18.5px' : '15px 30px')};
   justify-content: center;
   align-items: center;
+  cursor: pointer;
 
   border-radius: ${({ $isApp }) => ($isApp ? '5px' : '10px')};
   background: #5CD282;

apps/farminglog/src/pages/farminglog/view/index.styled.ts

@@ -122,6 +122,7 @@ export const FarmingLogWriteButton = styled.button<ResponsiveProps>`
   gap: 10px;
   flex-shrink: 0;
   aspect-ratio: 1/1;
+  cursor: pointer;
 
   border-radius: 35px;
   background: #5CD282;
@@ -132,4 +133,5 @@ export const FarmingLogWriteButtonImage = styled.img<ResponsiveProps>`
   height: 25px;
   flex-shrink: 0;
   aspect-ratio: 1/1;
+  cursor: pointer;
 `;

apps/farminglog/src/pages/home/Ranking/ranking.styled.ts

@@ -84,7 +84,8 @@ export const Phrase = styled.div<{ isApp: boolean }>`
 export const RankingTitle = styled.div<{ isApp: boolean }>`
   margin-top: 30px;
   display: flex;
-  width: 80%;
+  width: 82%;
+  left: 2%;
   justify-content: ${({ isApp }) => (isApp ? 'space-between' : 'space-around')};
   align-items: center;
 `;
@@ -124,6 +125,7 @@ export const RankingItem = styled.div<{
   align-items: center;
   background-color: ${({ bgColor }) => bgColor};
   border-radius: 12px;
+  cursor: pointer;
 
   border: ${({ isMe }) => (isMe ? '3px solid #29d4a7' : 'none')};
 `;
@@ -173,7 +175,7 @@ export const ProfileIcon = styled.img`
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 4px;
+  /* padding: 4px; */
 `;
 
 export const ColumnBox = styled.div`

apps/farminglog/src/pages/home/Ranking/ranking.tsx

@@ -98,6 +98,8 @@ export default function RankingPreview() {
           · 랭킹은 씨앗을 기준으로 매일 자정마다 정렬돼요.
           <br />
           · 씨앗은 트랙별 우수활동자 심사에 반영돼요.
+          <br />
+          · 친구 프로필을 눌러 응원할 수 있어요!
         </S.PhaseDesc>
 
         <S.RankingTitle isApp={isApp}>

apps/farminglog/src/pages/ranking/index.styles.tsx

@@ -169,18 +169,21 @@ export const ColumnBox = styled.div`
 
 export const RankingTitle = styled.div<{ isApp: boolean }>`
   margin-top: 30px;
-  margin-bottom: -30px;
+  margin-bottom: -40px;
   display: flex;
   flex-direction: row;
-  width: 80%;
-  justify-content: ${({ isApp }) => (isApp ? 'space-around' : 'space-around')};
+  left: 2%;
+  width: 82%;
+  justify-content: ${({ isApp }) => (isApp ? 'space-between' : 'space-around')};
   align-items: center;
+  border-radius: ${({ isApp }) => (isApp ? '3px' : '10px')};
 `;
 
 export const RankingTitleText = styled.div<{ isApp: boolean }>`
   width: ${({ isApp }) => (isApp ? '75px' : '90px')};
   font-size: ${({ isApp }) => (isApp ? '9px' : '12px')};
   margin-bottom: 10px;
+  text-align: center;
 `;
 
 
@@ -190,6 +193,7 @@ export const RankingList = styled.div`
   gap: 8px;
   width: 100%;
   align-items: center;
+  padding-bottom: 40px;
 `;
 
 export const RankingItem = styled.div<{
@@ -207,6 +211,7 @@ export const RankingItem = styled.div<{
   border-radius: 12px;
   padding: ${({ isApp }) => (isApp ? '20px' : '16px')};
   border: ${({ isMe }) => (isMe ? '3px solid #29D4A7' : 'none')};
+  cursor: pointer;
 `;
 
 
@@ -283,3 +288,30 @@ export const Balloon = styled.img`
   height: auto;
   z-index: 10;
 `;
+
+
+export const PhaseTitle = styled.div<{$isMobile: boolean }>`
+  font-family: 'Pretendard Variable';
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 30px;
+  letter-spacing: -0.24px;
+
+  text-align: center;          /* 가로 중앙 */
+  display: flex;              
+  align-items: center;         /* 세로 중앙 */
+  justify-content: center;
+  margin-bottom: -30px;     
+`;
+
+export const PhaseDesc = styled.div<{ $isMobile: boolean }>`
+  display: inline-flex;
+  margin: 0 auto;
+  justify-content: flex-start;
+  font-size: ${({ $isMobile }) => ($isMobile ? '14px' : '16px')};
+  font-weight: 400;
+  font-family: "Pretendard Variable";
+  line-height: ${({ $isMobile }) => ($isMobile ? '20px' : '30px')};
+  letter-spacing: ${({ $isMobile }) => ($isMobile ? '-0.12px' : '-0.24px')};
+
+`;

apps/farminglog/src/pages/ranking/index.tsx

@@ -5,7 +5,6 @@ import * as S from './index.styles';
 import useMediaQueries from '@/hooks/useMediaQueries';
 import FarmLogo from '../../assets/Icons/FarmSystem_Logo.png';
 import Crown from '../../assets/Icons/crown.png';
-import Sign from '@/components/Ranking/sign';
 import CheerBalloon from './components/CheerBalloon';
 import { useUserRankingQuery } from '@/services/query/useUserRankingQuery';
 import { convertTrackToString } from '@/utils/convertTrackToString';
@@ -14,11 +13,11 @@ import WhiteContentContainer from '@/layouts/WhiteContentContainer';
 import Popup from "@/components/Popup/popup"; 
 import { useUserInfoQuery } from "@repo/auth/services/query/useUserInfoQuery";
 
-const headerTexts = [
-  '랭킹은 씨앗을 기준으로 매일 자정마다 정렬돼요.',
-  '씨앗은 트랙별 우수활동자 심사에 반영돼요.',
-  '친구의 프로필을 눌러 응원할 수 있어요!'
-];
+// const headerTexts = [
+//   '랭킹은 씨앗을 기준으로 매일 자정마다 정렬돼요.',
+//   '씨앗은 트랙별 우수활동자 심사에 반영돼요.',
+//   '친구의 프로필을 눌러 응원할 수 있어요!'
+// ];
 
 export default function Main() {
   const navigate = useNavigate();
@@ -57,7 +56,16 @@ export default function Main() {
   return (
     <WhiteContentContainer title='랭킹' >
 
-        <Sign isApp={isApp} isMobile={isMobile} texts={headerTexts} />
+        <S.PhaseTitle $isMobile={isMobile}>
+           씨앗이 쌓이면, 랭킹이 바로 올라요!
+        </S.PhaseTitle>
+        <S.PhaseDesc $isMobile={isMobile}>
+          · 랭킹은 씨앗을 기준으로 0시간마다 정렬돼요.
+          <br />
+          · 씨앗은 트랙별 우수활동자 심사에 반영돼요.
+          <br />
+          · 친구 프로필을 눌러 응원할 수 있어요!
+        </S.PhaseDesc>
 
         <S.RankingTitle isApp={isApp}>
           <S.RankingTitleText isApp={isApp}>순위</S.RankingTitleText>