innerstella · innerstella · Apr 28, 2024 · Apr 28, 2024 · Apr 28, 2024 · Apr 28, 2024
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "/static/css/main.5d684795.css",
-    "main.js": "/static/js/main.0ad55ccb.js",
+    "main.js": "/static/js/main.bbfd1199.js",
     "index.html": "/index.html",
     "main.5d684795.css.map": "/static/css/main.5d684795.css.map",
-    "main.0ad55ccb.js.map": "/static/js/main.0ad55ccb.js.map"
+    "main.bbfd1199.js.map": "/static/js/main.bbfd1199.js.map"
   },
   "entrypoints": [
     "static/css/main.5d684795.css",
-    "static/js/main.0ad55ccb.js"
+    "static/js/main.bbfd1199.js"
   ]
 }
diff --git a/build/assets/svg/ic-heart.svg b/build/assets/svg/ic-heart.svg
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><meta property="og:title" content="직관일기"/><meta property="og:url" content="https://happybaseball-diary.web.app/"/><meta property="og:image" content="https://github.com/innerstella/happybaseball-diary/blob/main/public/assets/png/opengraph.png?raw=true"/><meta property="og:description" content="⚾️ 나의 직관 승률은?"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="직관일기"/><meta name="twitter:description" content="⚾️ 나의 직관 승률은?"/><meta name="twitter:image" content="https://github.com/innerstella/happybaseball-diary/blob/main/public/assets/png/opengraph.png?raw=true"/><title>직관일기</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/><script defer="defer" src="/static/js/main.0ad55ccb.js"></script><link href="/static/css/main.5d684795.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body><script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script><script type="text/javascript">if(!wcs_add)var wcs_add={};wcs_add.wa="1d106f0c7b05040",window.wcs&&wcs_do()</script></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><meta property="og:title" content="직관일기"/><meta property="og:url" content="https://happybaseball-diary.web.app/"/><meta property="og:image" content="https://github.com/innerstella/happybaseball-diary/blob/main/public/assets/png/opengraph.png?raw=true"/><meta property="og:description" content="⚾️ 나의 직관 승률은?"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="직관일기"/><meta name="twitter:description" content="⚾️ 나의 직관 승률은?"/><meta name="twitter:image" content="https://github.com/innerstella/happybaseball-diary/blob/main/public/assets/png/opengraph.png?raw=true"/><title>직관일기</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/><script defer="defer" src="/static/js/main.bbfd1199.js"></script><link href="/static/css/main.5d684795.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body><script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script><script type="text/javascript">if(!wcs_add)var wcs_add={};wcs_add.wa="1d106f0c7b05040",window.wcs&&wcs_do()</script></html>
diff --git a/build/static/js/main.0ad55ccb.js b/build/static/js/main.0ad55ccb.js
diff --git a/build/static/js/main.bbfd1199.js b/build/static/js/main.bbfd1199.js
diff --git a/build/static/js/main.0ad55ccb.js.LICENSE.txt → build/static/js/main.bbfd1199.js.LICENSE.txt b/build/static/js/main.0ad55ccb.js.LICENSE.txt → build/static/js/main.bbfd1199.js.LICENSE.txt
diff --git a/build/static/js/main.0ad55ccb.js.map → build/static/js/main.bbfd1199.js.map b/build/static/js/main.0ad55ccb.js.map → build/static/js/main.bbfd1199.js.map
diff --git a/public/assets/svg/ic-heart.svg b/public/assets/svg/ic-heart.svg
diff --git a/src/components/top-app-bar/index.tsx b/src/components/top-app-bar/index.tsx
@@ -29,7 +29,9 @@ const TopAppBar = ({
     const auth = getAuth();
     signOut(auth)
       .then(() => {
-        navigate("/");
+        localStorage.removeItem("recoil-persist");
+        sessionStorage.clear();
+        navigate("/", { state: { reload: true } });
       })
       .catch((err) => console.error(err));
   };

diff --git a/src/constants/system.ts b/src/constants/system.ts
@@ -0,0 +1 @@
+export const CURR_YEAR = 2024;
diff --git a/src/constants/team.ts b/src/constants/team.ts
@@ -10,3 +10,28 @@ export const TEAM_COLOR: { [key: string]: string } = {
   한화: "#ED702D",
   키움: "#4F0F16",
 };
+
+export const TEAM_LIST = [
+  "LG",
+  "KT",
+  "SSG",
+  "NC",
+  "두산",
+  "KIA",
+  "롯데",
+  "삼성",
+  "한화",
+  "키움",
+];
+
+export const PLACE_LIST = [
+  "고척",
+  "라팍",
+  "랜필",
+  "사직",
+  "이팍",
+  "엔팍",
+  "위팍",
+  "잠실",
+  "챔필",
+];
diff --git a/src/pages/create/Create.style.tsx b/src/pages/create/Create.style.tsx
@@ -4,10 +4,12 @@ export const MainContainer = styled.div`
   padding: 0 25px;
   padding-bottom: 10rem;
   height: 100vh;
-  padding-bottom: 10rem;
   background-color: #fafafa;
   font-family: "SUIT", sans-serif;
   overflow-x: hidden;
+  &::-webkit-scrollbar {
+    display: none;
+  }
   .gap {
     height: 3rem;
   }
@@ -37,15 +39,9 @@ export const MainContainer = styled.div`
 
 export const FabContainer = styled.div`
   position: fixed;
-
   display: flex;
-  width: 100vw;
   justify-content: center;
   height: 5rem;
   bottom: 0rem;
-
-  display: flex;
-  justify-content: center;
-
   z-index: 5;
 `;
diff --git a/src/pages/create/Create.tsx b/src/pages/create/Create.tsx
@@ -25,13 +25,15 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import { loginState } from "../../recoil/system";
+import { PLACE_LIST, TEAM_LIST } from "../../constants/team";
 
 const CreatePage = () => {
   const navigate = useNavigate();
   const loginStatus = useRecoilValue(loginState);
 
   const [selected, setSelected] = useState<Date>();
   const [location, setLocation] = useState("");
+  const [my, setMy] = useState("");
   const [vs, setVs] = useState("");
   const [myScore, setMyScore] = useState(0);
   const [vsScore, setVsScore] = useState(0);
@@ -59,11 +61,12 @@ const CreatePage = () => {
       count = 0;
     }
 
-    if (date && location && vs) {
+    if (date && location && vs && my) {
       const data = {
         realDate: selected,
         date: date,
         location: location,
+        my: my,
         vs: vs,
         myScore: myScore,
         vsScore: vsScore,
@@ -105,37 +108,55 @@ const CreatePage = () => {
             isRequired
             onChange={(e) => setLocation(e.target.value)}
           >
-            <option value="고척">고척</option>
-            <option value="라팍">라팍</option>
-            <option value="랜필">랜필</option>
-            <option value="사직">사직</option>
-            <option value="이팍">이팍</option>
-            <option value="엔팍">엔팍</option>
-            <option value="위팍">위팍</option>
-            <option value="잠실">잠실</option>
-            <option value="챔필">챔필</option>
+            {PLACE_LIST.map((place, idx) => {
+              return (
+                <option key={idx} value={place}>
+                  {place}
+                </option>
+              );
+            })}
+          </Select>
+          {/* 응원팀을 선택해주세요 */}
+          <div className="gap"></div>
+          <div className="label">
+            <img src="assets/svg/ic-heart.svg" alt="응원팀" className="svg" />
+            <p className="text">응원 팀을 선택해주세요</p>
+          </div>
+          <Select
+            placeholder="응원 팀"
+            isRequired
+            onChange={(e) => setMy(e.target.value)}
+          >
+            {TEAM_LIST.filter((team) => team !== vs).map((team, idx) => {
+              return (
+                <option key={idx} value={team}>
+                  {team}
+                </option>
+              );
+            })}
           </Select>
           {/* 상대팀을 선택해주세요 */}
           <div className="gap"></div>
           <div className="label">
-            <img src="assets/svg/ic-solid-fire.svg" alt="vs" className="svg" />
+            <img
+              src="assets/svg/ic-solid-fire.svg"
+              alt="상대팀"
+              className="svg"
+            />
             <p className="text">상대 팀을 선택해주세요</p>
           </div>
           <Select
             placeholder="상대 팀"
             isRequired
             onChange={(e) => setVs(e.target.value)}
           >
-            <option value="LG">LG</option>
-            <option value="KT">KT</option>
-            <option value="SSG">SSG</option>
-            <option value="NC">NC</option>
-            <option value="두산">두산</option>
-            <option value="KIA">KIA</option>
-            <option value="롯데">롯데</option>
-            <option value="삼성">삼성</option>
-            <option value="한화">한화</option>
-            <option value="키움">키움</option>
+            {TEAM_LIST.filter((team) => team !== my).map((team, idx) => {
+              return (
+                <option key={idx} value={team}>
+                  {team}
+                </option>
+              );
+            })}
           </Select>
           {/* 경기 결과를 입력해주세요*/}
           <div className="gap"></div>
@@ -148,7 +169,7 @@ const CreatePage = () => {
             <p className="text">경기 결과를 입력해주세요</p>
           </div>
           <div className="label">
-            <p className="text">우리 팀</p>
+            <p className="text">응원 팀</p>
             <NumberInput
               size="sm"
               maxW={20}
@@ -195,10 +216,10 @@ const CreatePage = () => {
           />
           {/* 기록하기 버튼*/}
         </div>
+        <S.FabContainer>
+          <Button text="기록하기" onClick={() => create()} />
+        </S.FabContainer>
       </S.MainContainer>
-      <S.FabContainer>
-        <Button text="기록하기" onClick={() => create()} />
-      </S.FabContainer>
     </>
   );
 };

diff --git a/src/pages/home/Home.style.tsx b/src/pages/home/Home.style.tsx
@@ -23,10 +23,6 @@ export const FabContainer = styled.div`
   justify-content: center;
   height: 5rem;
   bottom: 0rem;
-
-  display: flex;
-  justify-content: center;
-
   z-index: 5;
 `;
 

diff --git a/src/pages/home/components/CreateButton.tsx b/src/pages/home/components/CreateButton.tsx
@@ -25,6 +25,8 @@ const Container = styled.div`
   border-radius: 0.625rem;
   background: #464646;
 
+  cursor: pointer;
+
   .text {
     margin: 0;
     padding: 1rem;

diff --git a/src/pages/home/components/record/Record.style.tsx b/src/pages/home/components/record/Record.style.tsx
@@ -55,7 +55,7 @@ export const Box2 = styled.div`
 `;
 
 export const WinBox = styled.div`
-  width: 10vw;
+  width: 50px;
   height: auto;
   flex-shrink: 0;
   border-radius: 0rem 0.625rem 0.625rem 0rem;
@@ -74,7 +74,7 @@ export const WinBox = styled.div`
 `;
 
 export const LoseBox = styled.div`
-  width: 10vw;
+  width: 50px;
   height: auto;
   flex-shrink: 0;
   border-radius: 0rem 0.625rem 0.625rem 0rem;
@@ -93,7 +93,7 @@ export const LoseBox = styled.div`
 `;
 
 export const DrawBox = styled.div`
-  width: 10vw;
+  width: 50px;
   height: auto;
   flex-shrink: 0;
   border-radius: 0rem 0.625rem 0.625rem 0rem;

diff --git a/src/pages/home/components/record/Record.tsx b/src/pages/home/components/record/Record.tsx
@@ -5,11 +5,12 @@ import * as S from "./Record.style";
 type Props = {
   date: string;
   location: string;
+  my?: string;
   vs: string;
   score: number[];
 };
 
-const Record = ({ date, location, vs, score }: Props) => {
+const Record = ({ date, location, my, vs, score }: Props) => {
   const navigate = useNavigate();
   // 경기 결과 계산 (1:win, 2: lose, 3:draw)
   const [result, setResult] = useState(0);
@@ -46,10 +47,20 @@ const Record = ({ date, location, vs, score }: Props) => {
             />
             <p className="text">{location}</p>
           </div>
+          {my && (
+            <div className="label-box">
+              <img
+                src="/assets/svg/ic-heart.svg"
+                alt="응원팀"
+                className="svg"
+              />
+              <p className="text">{my}</p>
+            </div>
+          )}
           <div className="label-box">
             <img
-              src="/assets/svg/ic-solid-game.svg"
-              alt="location"
+              src="/assets/svg/ic-solid-fire.svg"
+              alt="상대팀"
               className="svg"
             />
             <p className="text">{vs}</p>

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import * as S from "./Home.style";
 
 import TopAppBar from "../../components/top-app-bar";
@@ -12,6 +12,9 @@ import Banner from "../../components/Banner";
 
 const HomePage = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+
+  const [reload, setReload] = useState(false);
 
   // 로그인 여부
   const [loginStatus, setLoginStatus] = useRecoilState(loginState);
@@ -24,6 +27,14 @@ const HomePage = () => {
       }
     }
   };
+
+  useEffect(() => {
+    if (location.state?.reload === true) {
+      window.location.reload();
+      navigate("/");
+    }
+  }, []);
+
   useEffect(() => {
     const value = localUserData();
     let data;

diff --git a/src/pages/mypage/MyPage.style.tsx b/src/pages/mypage/MyPage.style.tsx
@@ -43,3 +43,16 @@ export const TeamIcon = styled.div<{ team: string }>`
   height: 25px;
   border-radius: 50%;
 `;
+
+export const Box = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+export const OddBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+`;
diff --git a/src/pages/mypage/components/info-box/InfoBox.style.tsx b/src/pages/mypage/components/info-box/InfoBox.style.tsx
@@ -5,6 +5,7 @@ export const Container = styled.div`
   border-radius: 10px;
   background-color: white;
   padding: 10px 10px;
+  width: 100%;
 
   p {
     font-size: 16px;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><meta property="og:title" content="직관일기"/><meta property="og:url" content="https://happybaseball-diary.web.app/"/><meta property="og:image" content="https://github.com/innerstella/happybaseball-diary/blob/main/public/assets/png/opengraph.png?raw=true"/><meta property="og:description" content="⚾️ 나의 직관 승률은?"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="직관일기"/><meta name="twitter:description" content="⚾️ 나의 직관 승률은?"/><meta name="twitter:image" content="https://github.com/innerstella/happybaseball-diary/blob/main/public/assets/png/opengraph.png?raw=true"/><title>직관일기</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/><script defer="defer" src="/static/js/main.0ad55ccb.js"></script><link href="/static/css/main.5d684795.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body><script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script><script type="text/javascript">if(!wcs_add)var wcs_add={};wcs_add.wa="1d106f0c7b05040",window.wcs&&wcs_do()</script></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><meta property="og:title" content="직관일기"/><meta property="og:url" content="https://happybaseball-diary.web.app/"/><meta property="og:image" content="https://github.com/innerstella/happybaseball-diary/blob/main/public/assets/png/opengraph.png?raw=true"/><meta property="og:description" content="⚾️ 나의 직관 승률은?"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="직관일기"/><meta name="twitter:description" content="⚾️ 나의 직관 승률은?"/><meta name="twitter:image" content="https://github.com/innerstella/happybaseball-diary/blob/main/public/assets/png/opengraph.png?raw=true"/><title>직관일기</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/><script defer="defer" src="/static/js/main.bbfd1199.js"></script><link href="/static/css/main.5d684795.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body><script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script><script type="text/javascript">if(!wcs_add)var wcs_add={};wcs_add.wa="1d106f0c7b05040",window.wcs&&wcs_do()</script></html>