Merge branch 'dev' into feature/veronica

README.md

@@ -1,2 +1,34 @@
 # 5-HRTH-ustock-fe
 카카오 테크 부트캠프 과정 파이널 프로젝트 프론트엔드 리포지토리
+
+<br><br>
+# 💡 **프로젝트 소개**
+<br>
+### 핵심 키워드
+1. elle 키워드
+2. veronica 키워드
+3. lucy 키워드
+
+### 사용한 데이터
+- 한국투자증권 api 주식 데이터
+- 크롤링한 뉴스 데이터
+- 54 건의 유저 데이터 + 전체 유입 유저
+
+<br><br>
+# 🛠️  아키텍쳐
+(새로이 그릴 예정)
+
+<br><br>
+
+# 📍 기술스택
+|분류|기술|
+|:- |:- |
+|Language|<img src="https://img.shields.io/badge/TypeScript-blue?style=for-the-badge&logo=typescript&logoColor=white">|
+|Framework|<img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=white"/>
+|Remote Data|<img src="https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=Axios&logoColor=white"/>
+|Data Management|<img src="https://img.shields.io/badge/Zustand-gray?style=for-the-badge&logo=Zustand&logoColor=white"/> <img src="https://img.shields.io/badge/Tanstack Query-FF4154?style=for-the-badge&logo=ReactQuery&logoColor=white"/>
+|Library|<img src="https://img.shields.io/badge/Styled components-DB7093?style=for-the-badge&logo=StyledComponents&logoColor=white"/> <img src="https://img.shields.io/badge/React spring-E00033?style=for-the-badge&logo=ReactSpring&logoColor=white"/> <img src="https://img.shields.io/badge/Embla Carousel-FAFAFA?style=for-the-badge&logo=EmblaCarousel&logoColor=white"/> <img src="https://img.shields.io/badge/Lottie-00FFDA?style=for-the-badge&logo=Lottie&logoColor=white"/> <img src="https://img.shields.io/badge/Frarmer Motion-0055FF?style=for-the-badge&logo=Framer&logoColor=white"/> <img src="https://img.shields.io/badge/Sweetalert-F6D70?style=for-the-badge&logo=Sweetalert&logoColor=white"/> <img src="https://img.shields.io/badge/ApexCharts-ECD53F?style=for-the-badge&logo=ApexCharts&logoColor=white"/>
+|DevOps|<img src="https://img.shields.io/badge/Github-181717?style=for-the-badge&logo=Github&logoColor=white"/> <img src="https://img.shields.io/badge/Github Actions-2088FF?style=for-the-badge&logo=Github Actions&logoColor=white"/> <img src="https://img.shields.io/badge/Amazon S3-569A31?style=for-the-badge&logo=Amazon S3&logoColor=white"/> <img src="https://img.shields.io/badge/Amazon CloudFront-FFFF66?style=for-the-badge&logo=Amazon CloudFront&logoColor=white"/>
+
+
+<br><br><br>

src/Component/Dropdown/gameDropdown.tsx

@@ -1,7 +1,7 @@
 import { Variants, motion } from "framer-motion";
 import { useState } from "react";
 import { Colors } from "../../Styles/Colors";
-import { Stock, useStock } from "../../store/stockContext";
+import { StocksStore, useStock } from "../../store/stockContext";
 import styled from "styled-components";
 import {
   itemVariants,
@@ -17,10 +17,19 @@ export interface StockItemProps {
   onSelectStock: (stockId: number) => void;
 }
 
+interface Stock {
+  stockId: number;
+  name: string;
+  current: number;
+  prev: number;
+  change: number;
+  changeRate: number;
+}
+
 const StockItem: React.FC<StockItemProps> = ({ onSelectStock }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedStock, setSelectedStock] = useState<string | null>(null);
-  const { stockData } = useStock();
+  const { stockData, setStockData } = StocksStore();
   const { purchaseHints, setPurchaseHints } = useHintStore();
 
   const toggleDropdown = () => {

src/Component/GoogleLogin/callback.tsx

@@ -1,12 +1,13 @@
 import axios from "axios";
 import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useAuth } from "../../contexts/authContext";
+import { useAuthStore } from "../../contexts/authContext";
 
 const CallBackPage = () => {
   const [loading, setLoading] = useState(true);
   const navigate = useNavigate();
-  const { login } = useAuth();
+  // const { login } = useAuth();
+  const { login } = useAuthStore();
   const hasFetchedRef = useRef(false);
 
   const handleHome = () => {

src/Component/Layout/Layout.tsx

@@ -2,7 +2,6 @@ import { useLocation } from "react-router-dom";
 import Header from "./Header/Header";
 import NavBar from "./NavBar/NavBar";
 import styled from "styled-components";
-import { useAuth } from "../../contexts/authContext";
 import BentoBar from "../../Game/Main/BentoBar/bentoBar";
 
 const Main = styled.main`