[Feature/#91] explore page

src/pages/explore/Explore.css.ts

@@ -0,0 +1,41 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '@shared/styles/theme.css';
+
+export const exploreWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '100vh',
+  width: '100%',
+});
+
+export const exploreHeader = style({
+  position: 'sticky',
+  top: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  gap: '1rem',
+  padding: '2rem',
+  backgroundColor: vars.color.blue0,
+  zIndex: 10,
+});
+
+export const addPinIcon = style({
+  width: '4rem',
+  height: '4rem',
+});
+
+export const exploreContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+  backgroundColor: vars.color.blue0,
+});
+
+export const explorePlaces = style({
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: vars.color.blue0,
+  flex: 1,
+});

src/pages/explore/Explore.tsx

@@ -0,0 +1,14 @@
+import * as styles from '@pages/explore/Explore.css';
+import ExploreHeader from '@pages/explore/ExploreHeader';
+import ExploreContent from '@pages/explore/ExploreContent';
+import ExplorePlaces from '@pages/explore/ExplorePlaces';
+
+export default function Explore() {
+  return (
+    <div className={styles.exploreWrapper}>
+      <ExploreHeader />
+      <ExploreContent />
+      <ExplorePlaces />
+    </div>
+  );
+}

src/pages/explore/ExploreContent.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import * as styles from '@pages/explore/Explore.css';
+import CategoryTag from '@shared/components/categoryTag/CategoryTag';
+import type { CategoryType } from '@shared/constant/category';
+import KakaoMap from '@shared/components/kakaoMap/KakaoMap';
+import { MAP_SIZE } from '@shared/components/kakaoMap/constant/mapSize';
+import { mockupPinData } from '@shared/components/kakaoMap/mockup';
+
+export default function ExploreContent() {
+  const [selectedCategory, setSelectedCategory] = useState<CategoryType>('ALL');
+
+  const handleCategorySelected = (category: CategoryType) => {
+    setSelectedCategory(category);
+  };
+
+  // 선택된 카테고리에 따라 Pin Data 필터링
+  const filteredPinData = selectedCategory === 'ALL'
+    ? mockupPinData
+    : mockupPinData.filter(pin =>
+      pin.pinCategories.includes(selectedCategory)
+    );
+
+  return (
+    <div className={styles.exploreContent}>
+      <CategoryTag
+        onTagSelected={handleCategorySelected}
+      />
+      <KakaoMap
+        size={MAP_SIZE.SMALL}
+        pinData={filteredPinData}
+      />
+    </div>
+  );
+}

src/pages/explore/ExploreHeader.tsx

@@ -0,0 +1,33 @@
+import { useState, type ChangeEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+import * as styles from '@pages/explore/Explore.css';
+import InputBar from '@shared/components/inputBar/InputBar';
+import { IcWriteBlue } from '@svg/index';
+
+export default function ExploreHeader() {
+  const navigate = useNavigate();
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+  };
+
+  const handleAddPinClick = () => {
+    navigate('/pin/add');
+  }
+
+  return(
+    <div className={styles.exploreHeader}>
+      <InputBar
+        leftIcon='search'
+        placeholder='장소를 검색하세요'
+        value={searchValue}
+        onChange={handleInputChange}
+      />
+      <IcWriteBlue
+        className={styles.addPinIcon}
+        onClick={handleAddPinClick}
+      />
+    </div>
+  )
+}

src/pages/explore/ExplorePlaces.tsx

@@ -0,0 +1,19 @@
+import * as styles from '@pages/explore/Explore.css';
+import PlaceReviewList from '@shared/components/placeReview/PlaceReview';
+import { reviewCategories } from '@pages/explore/mockup';
+
+export default function ExplorePlaces() {
+  return (
+    <div className={styles.explorePlaces}>
+      {reviewCategories.map((category, index) => (
+        <PlaceReviewList
+          key={index}
+          reviewType={category.reviewType}
+          description={category.description}
+          places={category.places}
+          placeReviewSize={category.placeReviewSize}
+        />
+      ))}
+    </div>
+  );
+}

src/pages/explore/mockup.ts

@@ -0,0 +1,57 @@
+import { mockupPlaces, type PlaceData } from '@shared/components/placeReview/mockup';
+import type { PinListData } from '@pages/placePins/types/Pins';
+
+interface ReviewCategory {
+  reviewType: string;
+  description: string;
+  places: PlaceData[];
+  placeReviewSize: 'SMALL' | 'LARGE';
+}
+
+export const reviewCategories: ReviewCategory[] = [
+  {
+    reviewType: 'BEST',
+    description: '좋아요를 가장 많이 받은 명소',
+    places: mockupPlaces,
+    placeReviewSize: 'SMALL',
+  },
+  {
+    reviewType: '비즈니스',
+    description: '회의와 업무에 딱 맞는 장소',
+    places: mockupPlaces,
+    placeReviewSize: 'LARGE',
+  },
+  {
+    reviewType: '스터디',
+    description: '효율적인 공부를 위한 최적의 장소',
+    places: mockupPlaces,
+    placeReviewSize: 'LARGE',
+  },
+];
+
+export const mockupExplore: PinListData[] = [
+  {
+    pinId: 1,
+    pin: {
+      userName: '이지환',
+      userEmail: 'hong@example.com',
+      profileImage: 'https://example.com/profile.jpg',
+      review: '아주 좋은 장소였습니다.',
+      score: 3,
+      placeName: '서울 광진구 화양동 5-47',
+    },
+    categories: ['아늑한', '키즈존', '북적이는'],
+  },
+  {
+    pinId: 2,
+    pin: {
+      userName: '이지환',
+      userEmail: 'hong@example.com',
+      profileImage: 'https://example.com/profile.jpg',
+      review: '아주 좋은 장소였습니다.',
+      score: 2,
+      placeName: '서울 광진구 화양동 5-47',
+    },
+    categories: ['아늑한', '키즈존', '북적이는'],
+  },
+];

src/pages/pinAdd/PinAdd.css.ts

@@ -0,0 +1,25 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '@styles/theme.css';
+
+export const pinAddWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  height: '100vh',
+  background: `var(--Linear, linear-gradient(180deg, ${vars.color.baroBlue} 0%, ${vars.color.blue8} 100%))`,
+});
+
+export const submitButton = style({
+  width: '100%',
+  marginRight: '2.1rem',
+  fontSize: vars.font.body_bold_16.fontSize,
+  fontWeight: vars.font.body_bold_16.fontWeight,
+  color: vars.color.white,
+  whiteSpace: 'nowrap',
+  cursor: 'pointer',
+});
+
+export const pinReviewContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+});

src/pages/pinAdd/PinAdd.tsx

@@ -0,0 +1,82 @@
+import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import * as styles from '@pages/pinAdd/PinAdd.css';
+import Header from '@shared/components/header/Header';
+import Container from '@shared/components/container/Container';
+import PinPlaceInput from './component/pinPlaceInput/PinPlaceInput';
+import PinPhotoInput from '@pages/pinAdd/component/pinPhotoInput/PinPhotoInput';
+import PinReviewInput from '@pages/pinAdd/component/pinReviewInput/PinReviewInput';
+import PinScoreInput from '@pages/pinAdd/component/pinScoreInput/PinScoreInput';
+import PinCategoriesInput from '@pages/pinAdd/component/pinCategoriesInput/PinCategoriesInput';
+import ConfirmPopup from './component/confirmPopup/ConfirmPopup';
+import { IcArrowLeft } from '@svg/index';
+import {
+  usePinAddValidation,
+  convertToApiData
+} from '@pages/pinAdd/hook/usePinAddValidation';
+
+export default function PinAdd() {
+  const navigate = useNavigate();
+  const { register, watch, formState: { errors }, setValue, handleSubmit } = usePinAddValidation();
+  const [showConfirmPopup, setShowConfirmPopup] = useState(false);
+
+  const watchedValues = watch();
+
+  const handleBackClick = () => {
+    navigate(-1);
+  };
+
+  const handleSubmitClick = () => {
+    handleSubmit(() => {
+      setShowConfirmPopup(true);
+    })();
+  };
+
+  const handleConfirmClick = () => {
+    const apiData = convertToApiData(watchedValues);
+    console.info(apiData);
+    setShowConfirmPopup(false);
+    navigate('/explore');
+  };
+
+  const handleConfirmClose = () => {
+    setShowConfirmPopup(false);
+  };
+
+  return (
+    <div className={styles.pinAddWrapper}>
+      <Header
+        background='baroblue'
+        leftIcon={() => (
+          <IcArrowLeft onClick={handleBackClick} />
+        )}
+        text='핀 추가'
+        rightIcon={() => (
+          <button
+            type='button'
+            className={styles.submitButton}
+            onClick={handleSubmitClick}
+          >
+            등록
+          </button>
+        )}
+      />
+      <Container className={styles.pinReviewContainer}>
+        <PinPlaceInput />
+        <PinPhotoInput setValue={setValue} errors={errors} />
+        <PinReviewInput register={register} watch={watch} errors={errors} />
+      </Container>
+      <PinScoreInput setValue={setValue} watch={watch} errors={errors} />
+      <PinCategoriesInput setValue={setValue} watch={watch} errors={errors} />
+
+      <ConfirmPopup
+        open={showConfirmPopup}
+        onClose={handleConfirmClose}
+        onConfirm={handleConfirmClick}
+        score={watchedValues.score}
+        max={5}
+        categories={watchedValues.categories}
+      />
+    </div>
+  );
+}

src/pages/pinAdd/component/confirmPopup/ConfirmPopup.css.ts

@@ -0,0 +1,34 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '@shared/styles/theme.css';
+
+export const popupContents = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  padding: '8.2rem 2.4rem 1.4rem 2.4rem',
+  backgroundColor: vars.color.white,
+  borderRadius: '16px 16px 0 0',
+});
+
+export const reviewWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: '1.6rem',
+});
+
+export const categoriesContainer = style({
+  display: 'flex',
+  gap: '0.4rem',
+  alignItems: 'center',
+  marginTop: '3.2rem',
+});
+
+export const categoriesGrid = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignContent: 'flex-start',
+  justifyContent: 'space-between',
+  marginBottom: '4.5rem',
+  rowGap: '0.8rem',
+});