[Feature/#106] Voting, Confirm page

src/pages/promiseStatus/PromiseStatus.tsx

@@ -1,8 +1,8 @@
 import { useSearchParams } from 'react-router-dom';
-import Pending from './components/Pending';
+import Pending from '@/pages/promiseStatus/components/Pending';
 import { PROMISE_STATUS } from '@shared/constant/promiseStatus';
-import Voting from './components/Voting';
-import Confirmed from './components/Confirmed';
+import Voting from '@/pages/promiseStatus/components/Voting';
+import Confirmed from '@/pages/promiseStatus/components/Confirmed';
 
 export default function PromiseStatus() {
   const [searchParams] = useSearchParams();
@@ -14,7 +14,7 @@ export default function PromiseStatus() {
     <>
       {status === PROMISE_STATUS.PENDING && <Pending promiseId={promiseId} isHost={isHost} />}
       {status === PROMISE_STATUS.VOTING && <Voting promiseId={promiseId} isHost={isHost} />}
-      {status === PROMISE_STATUS.CONFIRMED && <Confirmed promiseId={promiseId} isHost={isHost} />}
+      {status === PROMISE_STATUS.CONFIRMED && <Confirmed promiseId={promiseId} />}
     </>
   );
 }

src/pages/promiseStatus/components/Confirmed.css.ts

@@ -0,0 +1,39 @@
+import { style } from '@vanilla-extract/css';
+
+export const confirmedWrapper = style({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  paddingTop: '9.8rem',
+  height: '100vh',
+});
+
+export const containerStyle = style({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: '40px',
+});
+
+export const confirmedText = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: '1rem',
+});
+
+export const promiseDetailWrapper = style({
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const confirmedButton = style({
+  position: 'fixed',
+  bottom: '0',
+  width: '100%',
+  padding: '1.5rem',
+});

src/pages/promiseStatus/components/Confirmed.tsx

@@ -1,8 +1,76 @@
+import { useNavigate } from 'react-router-dom';
+import Container from '@shared/components/container/Container';
+import Text from '@shared/components/text/Text';
+import { mockUpConfirmed } from '../mockUp';
+import KakaoMap from '@shared/components/kakaoMap/KakaoMap';
+import usePlaceSearch from '@shared/components/kakaoMap/hooks/usePlaceSearch';
+import { useState, useEffect } from 'react';
+import { MAP_SIZE } from '@shared/components/kakaoMap/constant/mapSize';
+import PromiseDetail from '@shared/components/promiseDetail/PromiseDetail';
+import { PROMISE_STATUS, PROMISE_STATUS_CONFIG } from '@shared/constant/promiseStatus';
+import Button from '@shared/components/button/Button';
+import { BUTTON_VARIANTS } from '@shared/components/button/constant/button';
+import * as styles from '@/pages/promiseStatus/components/Confirmed.css';
+
 interface ConfirmedProps {
   promiseId: string;
-  isHost: boolean;
 }
-export default function Confirmed({ promiseId, isHost }: ConfirmedProps) {
-  console.log(promiseId, isHost);
-  return <div></div>;
+export default function Confirmed({ promiseId }: ConfirmedProps) {
+  const navigate = useNavigate();
+  const { promiseName, promisePlace, promiseAvailableTimes, promiseMembersNames } = mockUpConfirmed;
+  const { searchPlace } = usePlaceSearch();
+  const [place, setPlace] = useState<{ lat: number; lng: number } | null>(null);
+
+  useEffect(() => {
+    searchPlace(promisePlace.placeAddress)
+      .then(res => res[0])
+      .then(placeData => {
+        if (placeData) {
+          setPlace({ lat: placeData.lat, lng: placeData.lng });
+        }
+      })
+      .catch(error => {
+        console.error('Failed to search place:', error);
+      });
+  }, [searchPlace, promisePlace.placeAddress]);
+
+  const handleClose = () => {
+    console.log(promiseId);
+    navigate(`/`);
+  };
+
+  return (
+    <div className={styles.confirmedWrapper}>
+      <Container className={styles.containerStyle}>
+        <div className={styles.confirmedText}>
+          <Text tag="head_bold_24" color="black">
+            {promiseName}
+          </Text>
+          <Text tag="body_bold_16" color="black">
+            약속이 확정되었어요
+          </Text>
+        </div>
+        <KakaoMap center={place || undefined} size={MAP_SIZE.SMALL} />
+        <div className={styles.promiseDetailWrapper}>
+          <PromiseDetail
+            status={PROMISE_STATUS.CONFIRMED}
+            promiseId={parseInt(promiseId)}
+            promiseName={promiseName}
+            fixedDate={promiseAvailableTimes.date}
+            placeName={promisePlace.placeName}
+            promiseMembersNames={promiseMembersNames}
+          />
+        </div>
+      </Container>
+      <div className={styles.confirmedButton}>
+        <Button
+          text="확인"
+          size="long"
+          variant={BUTTON_VARIANTS.ENABLED}
+          onClick={handleClose}
+          backgroundColor={PROMISE_STATUS_CONFIG.CONFIRMED.color}
+        />
+      </div>
+    </div>
+  );
 }

src/pages/promiseStatus/components/Voting.css.ts

@@ -0,0 +1,52 @@
+import { vars } from '@shared/styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const votingWrapper = style({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  background: vars.color.blue0,
+});
+
+export const containerStyle = style({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '40px',
+  minHeight: 'calc(100vh - 9.8rem - 8rem)',
+  background: vars.color.blue0,
+});
+
+export const votingText = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: '1rem',
+});
+
+export const votingPlaceWrapper = style({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: '2rem',
+});
+
+export const votingButtonWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '1rem',
+  width: '100%',
+});
+
+export const votingButton = style({
+  position: 'sticky',
+  bottom: '0',
+  left: '0',
+  right: '0',
+  width: '100%',
+  padding: '1.5rem',
+});

src/pages/promiseStatus/components/Voting.tsx

@@ -1,8 +1,134 @@
+import Header from '@shared/components/header/Header';
+import { IcNavX } from '@svg/index';
+import { useNavigate } from 'react-router-dom';
+import * as styles from '@/pages/promiseStatus/components/Voting.css';
+import Container from '@shared/components/container/Container';
+import Text from '@shared/components/text/Text';
+import { mockUpVoting } from '@/pages/promiseStatus/mockUp';
+import Button from '@shared/components/button/Button';
+import { PROMISE_STATUS_CONFIG } from '@shared/constant/promiseStatus';
+import { BUTTON_VARIANTS } from '@shared/components/button/constant/button';
+import { useState } from 'react';
+
 interface VotingProps {
   promiseId: string;
   isHost: boolean;
 }
 export default function Voting({ promiseId, isHost }: VotingProps) {
-  console.log(promiseId, isHost);
-  return <div></div>;
+  const navigate = useNavigate();
+  const handleClose = () => {
+    console.log(promiseId);
+    navigate(`/`);
+  };
+  const { promiseName, promisePlace, promiseAvailableTimes } = mockUpVoting;
+  const [selectedPlace, setSelectedPlace] = useState<
+    {
+      placeName: string;
+      placeAddress: string;
+    }[]
+  >([]);
+  const [selectedTime, setSelectedTime] = useState<
+    {
+      date: string;
+      startTime: string;
+      endTime: string;
+    }[]
+  >([]);
+
+  const handlePlaceClick = (place: { placeName: string; placeAddress: string }) => {
+    if (selectedPlace.includes(place)) {
+      setSelectedPlace(prev => prev.filter(p => p !== place));
+    } else {
+      setSelectedPlace(prev => [...prev, place]);
+    }
+  };
+
+  const handleTimeClick = (time: { date: string; startTime: string; endTime: string }) => {
+    if (selectedTime.includes(time)) {
+      setSelectedTime(prev =>
+        prev.filter(
+          t => t.date !== time.date && t.startTime !== time.startTime && t.endTime !== time.endTime
+        )
+      );
+    } else {
+      setSelectedTime(prev => [...prev, time]);
+    }
+  };
+
+  const handleVote = () => {
+    console.log(selectedPlace, selectedTime);
+    handleClose();
+  };
+
+  const isFormValid = !isHost && selectedPlace.length > 0 && selectedTime.length > 0;
+
+  return (
+    <div className={styles.votingWrapper}>
+      <Header rightIcon={IcNavX} onClickRightIcon={handleClose} background="blue0" />
+      <Container className={styles.containerStyle}>
+        <div className={styles.votingText}>
+          <Text tag="head_bold_24" color="black">
+            {promiseName}의 최종 투표를 진행해주세요
+          </Text>
+          <Text tag="body_bold_16" color="gray4">
+            최적의 시간과 장소입니다
+          </Text>
+          {isHost && (
+            <Text tag="body_bold_16" color="red1">
+              약속 생성자는 투표 할 수 없습니다.
+            </Text>
+          )}
+        </div>
+
+        <div className={styles.votingPlaceWrapper}>
+          <Text tag="head_bold_18" color="black">
+            약속 장소를 선택해주세요
+          </Text>
+          <div className={styles.votingButtonWrapper}>
+            {promisePlace.map(place => {
+              const isSelected = selectedPlace.includes(place);
+              return (
+                <Button
+                  key={place.placeName}
+                  onClick={() => handlePlaceClick(place)}
+                  variant={isSelected ? BUTTON_VARIANTS.ENABLED : BUTTON_VARIANTS.WHITE}
+                  size="long"
+                  text={place.placeName}
+                  backgroundColor={isSelected ? PROMISE_STATUS_CONFIG.VOTING.color : 'white'}
+                />
+              );
+            })}
+          </div>
+        </div>
+        <div className={styles.votingPlaceWrapper}>
+          <Text tag="head_bold_18" color="black">
+            약속 시간을 선택해주세요
+          </Text>
+          <div className={styles.votingButtonWrapper}>
+            {promiseAvailableTimes.map(time => {
+              const isSelected = selectedTime.includes(time);
+              return (
+                <Button
+                  key={`${time.date}-${time.startTime}-${time.endTime}`}
+                  onClick={() => handleTimeClick(time)}
+                  variant={isSelected ? BUTTON_VARIANTS.ENABLED : BUTTON_VARIANTS.WHITE}
+                  size="long"
+                  text={`${time.date} ${time.startTime.slice(0, 5)}-${time.endTime.slice(0, 5)}`}
+                  backgroundColor={isSelected ? PROMISE_STATUS_CONFIG.VOTING.color : 'white'}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </Container>
+      <div className={styles.votingButton}>
+        <Button
+          text="투표하기"
+          size="long"
+          variant={isFormValid ? BUTTON_VARIANTS.ENABLED : BUTTON_VARIANTS.DISABLED}
+          onClick={handleVote}
+        />
+      </div>
+    </div>
+  );
 }

src/pages/promiseStatus/mockUp.ts

@@ -76,3 +76,63 @@ export const mockUpPlace = {
     },
   ],
 };
+
+export const mockUpVoting = {
+  promiseName: 'KUIT BARO 2차 회의',
+  promisePlace: [
+    {
+      placeName: '강남역 스타벅스',
+      placeAddress: '서울특별시 강남구 역삼동 123-123',
+    },
+    {
+      placeName: '건국대학교 중앙도서관',
+      placeAddress: '서울특별시 강남구 역삼동 123-123',
+    },
+
+    {
+      placeName: '강남역 투썸플레이스',
+      placeAddress: '서울특별시 강남구 역삼동 123-123',
+    },
+    {
+      placeName: '건국대학교 신공학관',
+      placeAddress: '서울특별시 강남구 역삼동 123-123',
+    },
+  ],
+  promiseAvailableTimes: [
+    {
+      date: '2025-04-03',
+      startTime: '12:00:00',
+      endTime: '12:30:00',
+    },
+    {
+      date: '2025-04-03',
+      startTime: '12:00:00',
+      endTime: '12:30:00',
+    },
+    {
+      date: '2025-04-03',
+      startTime: '12:00:00',
+      endTime: '12:30:00',
+    },
+    {
+      date: '2025-04-03',
+      startTime: '12:00:00',
+      endTime: '12:30:00',
+    },
+  ],
+};
+
+export const mockUpConfirmed = {
+  promiseName: 'KUIT BARO 2차 회의',
+  promisePlace: {
+    placeName: '강남역 스타벅스',
+    placeAddress: '서울특별시 강남구 역삼동 123-123',
+  },
+
+  promiseAvailableTimes: {
+    date: '2025-04-03',
+    startTime: '12:00:00',
+    endTime: '12:30:00',
+  },
+  promiseMembersNames: ['John Doe', 'Jane Doe', 'John Smith', 'Jane Smith'],
+};