변경 사항을 배포 브랜치에 반영

src/app/(header)/coupon/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from 'react';
+import { CouponPage } from '@/views/coupon';
+
+const page = () => {
+  return (
+    <Suspense>
+      <CouponPage />
+    </Suspense>
+  );
+};
+
+export default page;

src/entities/community/detail/ui/CommunityContent/index.tsx

@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 import { useState } from 'react';
-import { CommentIcon } from '@/shared/assets/icons';
+import { CommentIcon, ViewsIcon } from '@/shared/assets/icons';
 import HeartIcon from '@/shared/assets/icons/HeartIcon';
 import { PersonIcon, SelectHeartIcon } from '@/shared/assets/svg';
 import { formatIsoDate } from '@/shared/model/formatIsoDate';
@@ -22,6 +22,7 @@ interface CommunityContentProps {
   boardId: string;
   stageId: string;
   currentPage: number;
+  viewCount: number;
   imageUrl?: string;
 }
 
@@ -38,6 +39,7 @@ const CommunityContent = ({
   stageId,
   currentPage,
   imageUrl,
+  viewCount,
 }: CommunityContentProps) => {
   const [liked, setLiked] = useState(isLiked);
   const [likeCountState, setLikeCountState] = useState(likeCount);
@@ -155,6 +157,12 @@ const CommunityContent = ({
               {likeCountState}
             </p>
           </div>
+          <div className={cn('flex', 'items-center', 'gap-8')}>
+            <ViewsIcon />
+            <p className={cn('text-body3s', 'text-caption1s', 'text-gray-300')}>
+              {viewCount}
+            </p>
+          </div>
         </div>
         <p className={cn('text-body3s', 'text-gray-500')}>
           {formatIsoDate(createdAt)}

src/entities/community/ui/CommunityItem/index.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { CommentIcon, HeartIcon } from '@/shared/assets/icons';
+import { CommentIcon, HeartIcon, ViewsIcon } from '@/shared/assets/icons';
 import { CommunityItemProps } from '@/shared/types/community';
 import SportTypelabel from '@/shared/ui/sportTypelabel';
 import { cn } from '@/shared/utils/cn';
@@ -21,7 +21,8 @@ const CommunityItem = ({
     return count >= 100 ? '99+' : count.toString();
   };
 
-  const { boardId, gameCategory, title, commentCount, likeCount } = item;
+  const { boardId, gameCategory, title, commentCount, likeCount, viewCount } =
+    item;
 
   return (
     <Link
@@ -91,6 +92,10 @@ const CommunityItem = ({
             {formatCount(likeCount)}
           </p>
         </div>
+        <div className={cn('flex', 'items-center', 'gap-8')}>
+          <ViewsIcon />
+          <p className={cn('text-body3s', 'text-gray-300')}>{viewCount}</p>
+        </div>
       </div>
     </Link>
   );

src/entities/main/ui/DateContainer/index.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { LeftArrow, RightArrowIcon } from '@/shared/assets/svg';
-import { useSelectDateStore } from '@/shared/stores';
+import { useMyStageIdStore, useSelectDateStore } from '@/shared/stores';
 import { cn } from '@/shared/utils/cn';
 
 const DateContainer = () => {
@@ -29,6 +29,8 @@ const DateContainer = () => {
 
   const { setSelectDate } = useSelectDateStore();
 
+  const { stageId } = useMyStageIdStore();
+
   const dates = Array.from({ length: totalDays }, (_, index) => {
     const date = new Date(today);
     date.setDate(today.getDate() - pastDays + index);
@@ -40,6 +42,40 @@ const DateContainer = () => {
     return { short: `${month}-${day}`, full: `${year}-${month}-${day}` };
   });
 
+  useEffect(() => {
+    const localSelectDate = sessionStorage.getItem('selectDate');
+
+    if (localSelectDate) {
+      const { selectDate: localDate, stageId: localStageId } =
+        JSON.parse(localSelectDate);
+
+      if (localDate !== '') {
+        if (stageId === localStageId) {
+          const matchedDate = dates.find((d) => d.full === localDate);
+
+          if (matchedDate) {
+            setSelectedDate(matchedDate.short);
+            setSelectDate(matchedDate.full);
+            const matchedIndex = dates.findIndex((d) => d.full === localDate);
+            setStartIndex(matchedIndex);
+          } else {
+            const date = new Date(localDate);
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            const short = `${month}-${day}`;
+
+            setSelectedDate(short);
+            setSelectDate(localDate);
+            const matchedIndex = dates.findIndex((d) => d.full === localDate);
+            setStartIndex(matchedIndex);
+          }
+        }
+      }
+
+      sessionStorage.removeItem('selectDate');
+    }
+  }, [dates]);
+
   const todayIndex = dates.findIndex(
     (d) =>
       d.short ===
@@ -48,6 +84,7 @@ const DateContainer = () => {
   const [selectedDate, setSelectedDate] = useState<string>(
     dates[todayIndex].short,
   );
+
   const [startIndex, setStartIndex] = useState(todayIndex);
 
   const handleDateChange = (index: number) => {

src/entities/match/detail/ui/DetailFormation/index.tsx

@@ -147,7 +147,6 @@ const DetailFormation = ({
           const courtRect = courtElement.getBoundingClientRect();
           const svgRect = svg.getBoundingClientRect();
 
-          console.log(svgRect.height);
           setSvgBounds({
             width: Math.max(svgRect.width - 90),
             height: Math.max(svgRect.height - 90),

src/shared/assets/icons/ViewsIcon.tsx

@@ -0,0 +1,27 @@
+interface ViewsIconProps {
+  size?: number;
+  color?: string;
+}
+
+const ViewsIcon = ({ size = 24, color = '#A6A6A6' }: ViewsIconProps) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.231 7.35925C19.5846 6.93506 20.216 6.87778 20.6402 7.23132C21.0644 7.5849 21.1217 8.21626 20.7681 8.6405L15.7681 14.6405C15.5883 14.8563 15.3251 14.9862 15.0445 14.9989C14.764 15.0115 14.4911 14.9055 14.2925 14.7069L10.0552 10.4696L4.75837 16.6503C4.39895 17.0696 3.76851 17.1181 3.34919 16.7587C2.92986 16.3992 2.88137 15.7688 3.24079 15.3495L9.24079 8.34948L9.31208 8.27429C9.48735 8.1082 9.71788 8.01021 9.96149 8.00085C10.2397 7.99024 10.5097 8.09595 10.7066 8.29284L14.9312 12.5175L19.231 7.35925Z"
+        fill={color}
+      />
+      <path
+        d="M2 16C2 15.4696 2.21086 14.961 2.58594 14.5859C2.96101 14.2109 3.46957 14 4 14C4.53043 14 5.03899 14.2109 5.41406 14.5859C5.78913 14.961 6 15.4696 6 16C6 16.5304 5.78914 17.039 5.41406 17.4141C5.03899 17.7891 4.53043 18 4 18C3.46957 18 2.96101 17.7891 2.58594 17.4141C2.21086 17.039 2 16.5304 2 16ZM13 14C13 13.4696 13.2109 12.961 13.5859 12.5859C13.961 12.2109 14.4696 12 15 12C15.5304 12 16.039 12.2109 16.4141 12.5859C16.7891 12.961 17 13.4696 17 14C17 14.5304 16.7891 15.039 16.4141 15.4141C16.039 15.7891 15.5304 16 15 16C14.4696 16 13.961 15.7891 13.5859 15.4141C13.2109 15.039 13 14.5304 13 14ZM8 9C8 8.46957 8.21087 7.96101 8.58594 7.58594C8.96101 7.21087 9.46957 7 10 7C10.5304 7 11.039 7.21087 11.4141 7.58594C11.7891 7.96101 12 8.46957 12 9C12 9.53043 11.7891 10.039 11.4141 10.4141C11.039 10.7891 10.5304 11 10 11C9.46957 11 8.96101 10.7891 8.58594 10.4141C8.21087 10.039 8 9.53043 8 9ZM18 8C18 7.46957 18.2109 6.96101 18.5859 6.58594C18.961 6.21086 19.4696 6 20 6C20.5304 6 21.039 6.21087 21.4141 6.58594C21.7891 6.96101 22 7.46957 22 8C22 8.53043 21.7891 9.03899 21.4141 9.41406C21.039 9.78913 20.5304 10 20 10C19.4696 10 18.961 9.78914 18.5859 9.41406C18.2109 9.03899 18 8.53043 18 8Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default ViewsIcon;

src/shared/assets/icons/index.ts

@@ -19,3 +19,4 @@ export { default as SelectIcon } from './SelectIcon';
 export { default as DeleteIcon } from './DeleteIcon';
 export { default as CommentIcon } from './CommentIcon';
 export { default as HeartIcon } from './HeartIcon';
+export { default as ViewsIcon } from './ViewsIcon';

src/shared/assets/svg/NormalIcon.tsx

@@ -0,0 +1,24 @@
+const NormalIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1.5rem"
+    height="1.5rem"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.58579 7.58579C2.96086 7.21071 3.46957 7 4 7H20C20.5304 7 21.0391 7.21071 21.4142 7.58579C21.7893 7.96086 22 8.46957 22 9V11C22 11.5304 21.7893 12.0391 21.4142 12.4142C21.0391 12.7893 20.5304 13 20 13H13V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V13H4C3.46957 13 2.96086 12.7893 2.58579 12.4142C2.21071 12.0391 2 11.5304 2 11V9C2 8.46957 2.21071 7.96086 2.58579 7.58579ZM13 11H20V9H13V11ZM11 9V11H4V9L11 9Z"
+      fill="#6B6B6B"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.46944 5.01208C8.80934 4.27863 8.12408 3.98923 7.51742 3.9998L7.5 3.99996C7.10218 3.99996 6.72064 4.15799 6.43934 4.4393C6.15804 4.7206 6 5.10213 6 5.49996C6 5.89778 6.15804 6.27931 6.43934 6.56062C6.72064 6.84192 7.10218 6.99996 7.5 6.99996C8.05228 6.99996 8.5 7.44767 8.5 7.99996C8.5 8.55224 8.05228 8.99996 7.5 8.99996C6.57174 8.99996 5.6815 8.63121 5.02513 7.97483C4.36875 7.31845 4 6.42821 4 5.49996C4 4.5717 4.36875 3.68146 5.02513 3.02508C5.67943 2.37078 6.56612 2.00229 7.4912 1.99997C8.81053 1.97987 10.0128 2.62608 10.956 3.67415C11.3497 4.11155 11.6987 4.61777 12 5.17652C12.3013 4.61777 12.6503 4.11155 13.044 3.67415C13.9872 2.62608 15.1895 1.97987 16.5088 1.99997C17.4339 2.00229 18.3206 2.37078 18.9749 3.02508C19.6313 3.68146 20 4.5717 20 5.49996C20 6.42821 19.6313 7.31845 18.9749 7.97483C18.3185 8.63121 17.4283 8.99996 16.5 8.99996C15.9477 8.99996 15.5 8.55224 15.5 7.99996C15.5 7.44767 15.9477 6.99996 16.5 6.99996C16.8978 6.99996 17.2794 6.84192 17.5607 6.56062C17.842 6.27931 18 5.89778 18 5.49996C18 5.10213 17.842 4.7206 17.5607 4.4393C17.2794 4.15799 16.8978 3.99996 16.5 3.99996L16.4826 3.9998C15.8759 3.98923 15.1907 4.27863 14.5306 5.01208C13.8654 5.75118 13.305 6.86255 12.9718 8.23578C12.863 8.68421 12.4614 8.99996 12 8.99996C11.5386 8.99996 11.137 8.68421 11.0282 8.23578C10.695 6.86255 10.1346 5.75118 9.46944 5.01208ZM5 11C5.55228 11 6 11.4477 6 12V19C6 19.2652 6.10536 19.5195 6.29289 19.7071C6.48043 19.8946 6.73478 20 7 20H17C17.2652 20 17.5196 19.8946 17.7071 19.7071C17.8946 19.5195 18 19.2652 18 19V12C18 11.4477 18.4477 11 19 11C19.5523 11 20 11.4477 20 12V19C20 19.7956 19.6839 20.5587 19.1213 21.1213C18.5587 21.6839 17.7957 22 17 22H7C6.20435 22 5.44129 21.6839 4.87868 21.1213C4.31607 20.5587 4 19.7956 4 19V12C4 11.4477 4.44772 11 5 11Z"
+      fill="#6B6B6B"
+    />
+  </svg>
+);
+
+export default NormalIcon;

src/shared/assets/svg/PointCircleIcon.tsx

@@ -1,8 +1,14 @@
-const PointCircleIcon = ({ color = '#A6A6A6' }: { color?: string }) => (
+const PointCircleIcon = ({
+  color = '#A6A6A6',
+  size = '1.25rem',
+}: {
+  color?: string;
+  size?: string;
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="1.25rem"
-    height="1.25rem"
+    width={size}
+    height={size}
     viewBox="0 0 20 20"
     fill="none"
   >

src/shared/assets/svg/RandomIcon.tsx

@@ -0,0 +1,26 @@
+const RandomIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1.5rem"
+    height="1.5rem"
+    viewBox="0 0 25 24"
+    fill="none"
+  >
+    <path
+      d="M15.4865 3.50995C14.0628 3.00916 12.536 2.87441 11.0467 3.11812C9.55727 3.36183 8.15308 3.97616 6.96327 4.90461C5.77346 5.83305 4.83622 7.0458 4.23779 8.43127C3.63936 9.81675 3.39894 11.3305 3.53865 12.8332C3.67837 14.3359 4.19373 15.7793 5.03732 17.0307C5.88092 18.2822 7.02566 19.3013 8.36625 19.9945C9.70683 20.6877 11.2002 21.0326 12.709 20.9976C14.2178 20.9625 15.6935 20.5486 17.0005 19.794C19.4895 18.357 21.1815 15.816 21.5005 13M10.5005 9.99995H10.5105M14.5005 7.99995H14.5105"
+      stroke="#6B6B6B"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12.5 15C13.5 13.6667 14.5 13 15.5 13M20.5 9.00001V9.01001M20.5 6.00001C20.9483 5.99858 21.3832 5.8468 21.735 5.56896C22.0868 5.29112 22.3352 4.90329 22.4406 4.46754C22.5459 4.03179 22.5019 3.5733 22.3158 3.16546C22.1297 2.75762 21.8122 2.42401 21.414 2.21801C21.0162 2.01422 20.5611 1.95103 20.1228 2.03873C19.6845 2.12642 19.2888 2.35984 19 2.70101"
+      stroke="#6B6B6B"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default RandomIcon;

src/shared/assets/svg/index.ts

@@ -44,3 +44,5 @@ export { default as LineStroke } from './LineStroke';
 export { default as TimerIcon } from './TimerIcon';
 export { default as CheckingBoxIcon } from './CheckingBoxIcon';
 export { default as BlueCircle } from './BlueCircle';
+export { default as RandomIcon } from './RandomIcon';
+export { default as NormalIcon } from './NormalIcon';

src/shared/types/community/detail/index.ts

@@ -40,5 +40,6 @@ export interface CommunityDetail {
   author: Author;
   imageUrl: string;
   commentCount: number;
+  viewCount: number;
   comment: Comment[];
 }

src/shared/types/community/index.ts

@@ -22,6 +22,7 @@ interface BoardItem {
   title: string;
   likeCount: number;
   commentCount: number;
+  viewCount: number;
   createdAt: string;
   isFiltered: boolean;
   stageType: StageType;
@@ -45,6 +46,7 @@ export interface CommunityItemProps {
   author: Author;
   likeCount: number;
   commentCount: number;
+  viewCount: number;
 }
 
 enum System {

src/shared/types/coupon/index.ts

@@ -0,0 +1,15 @@
+export interface CouponInfoType {
+  isUsed: boolean;
+  stageId?: number;
+  stageName?: string;
+  couponType?: 'NORMAL' | 'RANDOM';
+  point?: number;
+}
+
+export interface CouponResponseType {
+  isGain: boolean;
+  earnedPoint: number;
+  lostedPoint: number;
+  beforePoint: number;
+  afterPoint: number;
+}

src/shared/ui/match/index.tsx

@@ -18,6 +18,7 @@ import {
   useMatchNoticeStore,
   useMatchStore,
   useMyStageIdStore,
+  useSelectDateStore,
 } from '@/shared/stores';
 import { MatchData } from '@/shared/types/my/bet';
 import { cn } from '@/shared/utils/cn';
@@ -55,6 +56,7 @@ const Match = ({ match }: MatchProps) => {
   const { matchNoticeArr } = useMatchNoticeStore();
   const { bettingMatchArr } = useBettingMatchArrStore();
   const { isAlarmClicked, setIsAlarmClicked } = useAlarmClickStore();
+  const { selectDate } = useSelectDateStore();
   const [isBettingPossible, setIsBettingPossible] = useState(false);
 
   const [adminIdxArr, setAdminIdxArr] = useState<number[]>([]);
@@ -175,6 +177,10 @@ const Match = ({ match }: MatchProps) => {
 
     localStorage.setItem('matchStatus', JSON.stringify(matchStatusData));
     localStorage.setItem('match', JSON.stringify(matchData));
+    sessionStorage.setItem(
+      'selectDate',
+      JSON.stringify({ selectDate, stageId }),
+    );
 
     setMatchStatus(matchStatusData);
     setMatch(matchData);

src/shared/ui/stageMatchContainer/index.tsx

@@ -87,20 +87,27 @@ const StageMatchContainer = ({
             </div>
           ))}
 
-          {matches?.matches.map((match) => (
-            <div
-              key={match.matchId}
-              className={cn(
-                'flex',
-                'midpad:w-[calc(50%-20px)]',
-                'w-full',
-                'shrink-0',
-                'justify-center',
-              )}
-            >
-              <Match match={match} />
-            </div>
-          ))}
+          {matches?.matches
+            .slice()
+            .sort(
+              (a, b) =>
+                new Date(a.startDate).getTime() -
+                new Date(b.startDate).getTime(),
+            )
+            .map((match) => (
+              <div
+                key={match.matchId}
+                className={cn(
+                  'flex',
+                  'midpad:w-[calc(50%-20px)]',
+                  'w-full',
+                  'shrink-0',
+                  'justify-center',
+                )}
+              >
+                <Match match={match} />
+              </div>
+            ))}
         </div>
       </div>
     </div>

src/views/community/detail/ui/CommunityDetailPage/index.tsx

@@ -61,6 +61,7 @@ const CommunityDetailPage = () => {
           stageId={stageId}
           currentPage={currentPage}
           imageUrl={data.imageUrl}
+          viewCount={data.viewCount}
         />
         <CommentInput
           boardId={boardId}

src/views/community/index.ts

@@ -1,2 +1,2 @@
 export { default as CommunityPage } from './ui/CommunityPage';
-export { default as getBoardMock } from './ui/Mock/getBoardMock';
+// export { default as getBoardMock } from './ui/Mock/getBoardMock';