Merge branch 'main' into feat/schedule-page

junction-asia-2023 · Aug 19, 2023 · 56ac648 · 56ac648
2 parents 898c213 + baf5161
commit 56ac648
Show file tree

Hide file tree

Showing 17 changed files with 414 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link
       href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css"
       rel="stylesheet"

diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "description": "Junction2023 just team",
+  "homepage": "https://junction-asia-2023.github.io/just-label/",
   "scripts": {
     "dev": "yarn && vite",
     "build": "tsc && vite build",
@@ -13,6 +14,7 @@
     "lint:eslint": "eslint src --ext ts,tsx --report-unused-disable-directives",
     "lint:prettier": "prettier --list-different \"src/**/*.{ts,tsx}\"",
     "lint": "npm-run-all -p --print-label \"lint:**\"",
+    "deploy": "yarn build && gh-pages -d dist",
     "preview": "vite preview",
     "prepare": "husky install"
   },
@@ -23,8 +25,8 @@
     "jotai": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0",
-    "react-hook-form": "^7.45.4"
+    "react-hook-form": "^7.45.4",
+    "react-router-dom": "^6.15.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
@@ -36,6 +38,7 @@
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "gh-pages": "^6.0.0",
     "husky": "^8.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.2",

diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/svg/gift1.svg b/public/svg/gift1.svg
diff --git a/public/svg/gift2.svg b/public/svg/gift2.svg
diff --git a/src/features/login/logo.svg → public/svg/logo.svg b/src/features/login/logo.svg → public/svg/logo.svg
diff --git a/src/features/app/Router.tsx b/src/features/app/Router.tsx
@@ -13,6 +13,7 @@ import ErrorContainer from '../shared/error/Container';
 import NotFound from '../shared/error/notfound/NotFound';
 import PreviewContainer from '../preview/Container';
 import ScheduleContainer from '../schedule/Container';
+import EventContainer from '../event/Container';
 
 const router = createRoutesFromElements(
   <Route
@@ -29,6 +30,7 @@ const router = createRoutesFromElements(
     <Route path="setting" element={<SettingContainer />} />
     <Route path="preview" element={<PreviewContainer />} />
     <Route path="schedule" element={<ScheduleContainer />} />
+    <Route path="event" element={<EventContainer />} />
     <Route path="*" element={<NotFound />} />
   </Route>,
 );

diff --git a/src/features/event/Container.tsx b/src/features/event/Container.tsx
@@ -0,0 +1,31 @@
+import { FunctionComponent } from 'react';
+
+import useEventContainer from './hooks/useEventContainer';
+
+import giftLogo from '/svg/gift1.svg';
+import giftOpenLogo from '/svg/gift2.svg';
+import './event.scss';
+
+const EventContainer: FunctionComponent = () => {
+  const { open, handleImageClick } = useEventContainer();
+  return (
+    <div className="event-container">
+      <div className="wrap">
+        <div className="content">
+          <span className="label">JUNCTION Event</span>
+          <div className="title">
+            Who is the lucky one who got the winning gift?
+          </div>
+        </div>
+        <div className="gift" onClick={handleImageClick}>
+          <img src={open ? giftOpenLogo : giftLogo} alt="gift" />
+        </div>
+        <div className="description">
+          Press the gift box and check the winning results
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventContainer;
diff --git a/src/features/event/event.scss b/src/features/event/event.scss
@@ -0,0 +1,53 @@
+.event-container {
+	height: calc(100vh - 77px);
+
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		.content {
+			padding-top: 183px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+
+			.label {
+				color: #ffffff;
+				background-color: #000000;
+				padding: 3px 8px;
+				font-size: 14px;
+				font-weight: 500;
+				line-height: 24px;
+				letter-spacing: 0em;
+				text-align: center;
+			}
+			.title {
+				padding: 8px 0px 24px 0px;
+				font-size: 24px;
+				font-weight: 700;
+				line-height: 36px;
+				letter-spacing: 0em;
+				text-align: center;
+			}
+		}
+		.gift {
+			cursor: pointer;
+
+			:hover {
+				// TODO: 좌우 애니메이션
+			}
+		}
+		.description {
+			padding-top: 14px;
+			color: #9797AE;
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 24px;
+			letter-spacing: 0em;
+			text-align: center;
+		}
+	}
+}
diff --git a/src/features/event/hooks/useEventContainer.tsx b/src/features/event/hooks/useEventContainer.tsx
@@ -0,0 +1,24 @@
+import { useAtom } from 'jotai';
+import { useLayoutEffect, useState } from 'react';
+
+import { titleAtom } from '../../shared/layout/atom';
+
+const useEventContainer = () => {
+  const [open, setOpen] = useState(false);
+  const [, setTitle] = useAtom(titleAtom);
+
+  useLayoutEffect(() => {
+    setTitle({ back: true, title: 'Event' });
+  }, []);
+
+  const handleImageClick = () => {
+    setOpen(true);
+  };
+
+  return {
+    open,
+    handleImageClick,
+  };
+};
+
+export default useEventContainer;
diff --git a/src/features/login/Container.tsx b/src/features/login/Container.tsx
@@ -1,9 +1,10 @@
 import { FunctionComponent } from 'react';
 
 import useLogin from './hooks/useLogin';
-import logo from './logo.svg';
 import './style/index.scss';
 
+import logo from '/svg/logo.svg';
+
 const LoginContainer: FunctionComponent = () => {
   const { errors, register, handleSubmit, onSubmit } = useLogin();
 

diff --git a/src/features/shared/error/notfound/NotFound.tsx b/src/features/shared/error/notfound/NotFound.tsx
@@ -1,12 +1,13 @@
 import { FunctionComponent } from 'react';
-import { useNavigate } from 'react-router-dom';
 
-import { URL } from '../../constants/url';
 import './notfound.scss';
+import { removeItem } from '../../utils/storage';
 
 const NotFound: FunctionComponent = () => {
-  const navigate = useNavigate();
-  const handleHomeClick = () => navigate(URL.home);
+  const handleHomeClick = () => {
+    removeItem('user');
+    window.location.reload();
+  };
 
   return (
     <div className="not-found">

diff --git a/src/features/shared/layout/components/Title.tsx b/src/features/shared/layout/components/Title.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { titleAtom } from '../atom';
 
+import logo from '/svg/logo.svg';
 import backLogo from '/svg/back.svg';
 
 const LayoutTitle: FunctionComponent = () => {
@@ -18,12 +19,20 @@ const LayoutTitle: FunctionComponent = () => {
 
   return (
     <div className="layout-title under-line">
-      <div className="left">
+      <div className={`left ${back ? 'has' : ''}`}>
         {back && (
           <img src={backLogo} alt="Back Logo" onClick={handleBackClick} />
         )}
       </div>
-      <div className="title">{title}</div>
+      <div className="title">
+        {title === 'CardMe' ? (
+          <div className="logo">
+            <img className="logo" src={logo} alt="logo" />
+          </div>
+        ) : (
+          title
+        )}
+      </div>
       <div className="left" />
     </div>
   );

diff --git a/src/features/shared/layout/layout.scss b/src/features/shared/layout/layout.scss
@@ -12,7 +12,7 @@
   justify-content: space-between;
   align-items: center;
   height: 61px;
-  padding: 8px;
+  padding: 0px 8px;
   gap: 8px;
 
   &.under-line {
@@ -26,6 +26,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
+    &.has {
+      cursor: pointer;
+    }
   }
 
   .title {
@@ -35,9 +39,13 @@
     height: 36px;
     padding: 6px 8px;
     gap: 10px;
-    font-weight: 500;
-    font-size: 24px;
+    font-weight: 700;
+    font-size: 16px;
     line-height: 24px;
+
+    .logo {
+      height: 24px;
+    }
   }
 }
 

diff --git a/src/features/shared/utils/storage.ts b/src/features/shared/utils/storage.ts
@@ -18,6 +18,17 @@ export const setItem = (item: STORAGE_KEY, value: any) => {
   try {
     const stringValue = JSON.stringify(value);
     window.localStorage.setItem(item, stringValue);
+    return true;
+  } catch (e) {
+    console.error(e);
+    return false;
+  }
+};
+
+export const removeItem = (item: STORAGE_KEY) => {
+  try {
+    window.localStorage.removeItem(item);
+    return true;
   } catch (e) {
     console.error(e);
     return false;

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,12 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+import { homepage } from './package.json';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})
+export default defineConfig(({ mode }) => {
+  return {
+    plugins: [react()],
+    base: mode === 'production' ? homepage : '/',
+  };
+});