🗑️ Chore : 세션 스토리지 사용하여 스플래시 스크린 표시 (#20)

src/App.tsx

@@ -1,19 +1,42 @@
+import React, { useState, useEffect } from 'react'
+import { Routes, Route, Navigate, useNavigate } from 'react-router-dom'
 import SplashScreen from '@pages/SplashScreen/SplashScreen'
 import PostDetail from '@pages/PostDetail/PostDetail'
-import { Routes, Route } from 'react-router-dom'
+import PostDetailPage from '@pages/PostDetail/PostDetailPage'
+import MyPage from './pages/MyPage/MyPage'
+import PostCreate from './pages/PostCreate/PostCreate'
+import NotificationPage from './pages/NotificationPage/NotificationPage'
+import PostList from './pages/PostList/List'
 
 const App = () => {
+  const [isFirstVisit, setIsFirstVisit] = useState(true)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    // 세션 스토리지를 사용
+    const hasVisitedBefore = sessionStorage.getItem('hasVisitedBefore')
+    if (!hasVisitedBefore) {
+      sessionStorage.setItem('hasVisitedBefore', 'true')
+      navigate('/splash')
+    } else {
+      setIsFirstVisit(false)
+    }
+  }, [navigate])
+
   return (
     <Routes>
-       <Route 
-        path="/" 
-        element={<SplashScreen />} />
-      <Route
-        path='/postdetail'
-        element={<PostDetail />}
+      <Route path="/splash" element={<SplashScreen />} />
+      <Route path='/postdetail' element={<PostDetailPage />} />
+      <Route path='/my' element={<MyPage />} />
+      <Route path='/create-post' element={<PostCreate />} />
+      <Route path='/notification' element={<NotificationPage />} />
+      <Route path='/' element={<PostList />} />
+      <Route 
+        path="*" 
+        element={<Navigate to={isFirstVisit ? "/splash" : "/"} replace />} 
       />
     </Routes>
   )
 }
 
-export default App
+export default App

src/components/Bedge/Bedge.css

@@ -1,4 +1,7 @@
 .bedge {
+  display: flex;
+  align-content: center;
+  justify-content: center;
   width: 50px;
   height: 24px;
   margin-right: 5px;
@@ -31,3 +34,8 @@
   background: #dbeddb;
   color: #1c3829;
 }
+
+#author {
+  background: #dbeddb;
+  color: #1c3829;
+}

src/components/Bedge/Bedge.tsx

@@ -1,7 +1,7 @@
 import './Bedge.css'
 
 interface BedgeProps {
-  type: 'mbti' | 'agree' | 'disagree' | 'best' | 'type'
+  type: 'mbti' | 'agree' | 'disagree' | 'best' | 'type' | 'author'
   body: string
 }
 
@@ -14,12 +14,12 @@ interface BedgeProps {
 
 const Bedge = ({ type, body }: BedgeProps) => {
   return (
-    <button
+    <div
       className='bedge'
       id={type}
     >
       {body}
-    </button>
+    </div>
   )
 }
 

src/components/BottomModal/BottomModal.css

@@ -10,6 +10,7 @@
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 9999;
 
   .bottom-modal-line {
     width: 50px;

src/components/Conatiner/Container.tsx

@@ -1,7 +1,19 @@
 import './Container.css'
 
-const Container = ({ children }: { children: JSX.Element | JSX.Element[] }) => {
-  return <div className='container'>{children}</div>
+interface ContainerProps {
+  children: React.ReactNode
+  pageName?: string
+}
+
+const Container = ({ children, pageName }: ContainerProps) => {
+  return (
+    <div
+      className='container'
+      id={pageName}
+    >
+      {children}
+    </div>
+  )
 }
 
 export default Container

src/components/MbtiSelector/MbtiSelector.css

@@ -0,0 +1,108 @@
+.mbti-container {
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: white;
+}
+
+.mbti-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: left;
+}
+
+.mbti-flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.mbti-row {
+  flex: 0 0 calc(50% - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+}
+
+.mbti-label {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.mbti-slider {
+  position: relative;
+  height: 40px;
+  width: 200px; 
+  background-color: #fff;
+  border-radius: 16px;
+  cursor: pointer;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.3s ease-in-out;
+}
+
+.mbti-slider:hover {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+.mbti-slider-option {
+  z-index: 1;
+  font-size: 12px;
+  font-weight: bold;
+  color: #4b5563;
+  transition: color 0.3s ease-in-out;
+  width: 50%;
+  text-align: center;
+  padding: 0 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mbti-slider-button {
+  position: absolute;
+  width: 50%;
+  height: calc(100% - 4px);
+  top: 2px;
+  background-color: #FD3747;
+  border-radius: 14px;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.mbti-slider.left .mbti-slider-button {
+  left: 2px;
+}
+
+.mbti-slider.right .mbti-slider-button {
+  left: calc(50% - 2px);
+}
+
+.mbti-slider.left .mbti-slider-option.left,
+.mbti-slider.right .mbti-slider-option.right {
+  color: white;
+}
+
+.mbti-result {
+  margin-top: 24px;
+  text-align: center;
+}
+
+.mbti-result p {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.mbti-result-text {
+  color: #ef4444;
+  font-weight: bold;
+}
+
+

src/components/MbtiSelector/MbtiSelector.tsx

@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import './MbtiSelector.css';
+
+type MbtiType = 'EI' | 'SN' | 'TF' | 'JP';
+
+interface MbtiState {
+  [key: string]: boolean;
+}
+
+interface MbtiRowProps {
+  label: string;
+  leftOption: string;
+  rightOption: string;
+  isRight: boolean;
+  onChange: () => void;
+}
+
+const MbtiSelector = () => {
+  const [mbti, setMbti] = useState<MbtiState>({
+    EI: false,
+    SN: false,
+    TF: false,
+    JP: false
+  });
+
+  const updateMbti = (key: MbtiType) => {
+    setMbti((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const getMbtiResult = (): string => {
+    return (
+      (mbti.EI ? 'I' : 'E') +
+      (mbti.SN ? 'N' : 'S') +
+      (mbti.TF ? 'F' : 'T') +
+      (mbti.JP ? 'P' : 'J')
+    );
+  };
+
+  return (
+    <div className="mbti-container">
+
+      <div className="mbti-flex-container">
+        <MbtiRow 
+          label="에너지의 방향"
+          leftOption="E (외향형)"
+          rightOption="I (내향형)"
+          isRight={mbti.EI}
+          onChange={() => updateMbti('EI')}
+        />
+        <MbtiRow 
+          label="인식 방식"
+          leftOption="S (감각형)"
+          rightOption="N (직관형)"
+          isRight={mbti.SN}
+          onChange={() => updateMbti('SN')}
+        />
+        <MbtiRow 
+          label="결정 방식"
+          leftOption="T (사고형)"
+          rightOption="F (감정형)"
+          isRight={mbti.TF}
+          onChange={() => updateMbti('TF')}
+        />
+        <MbtiRow 
+          label="삶의 패턴"
+          leftOption="J (판단형)"
+          rightOption="P (인식형)"
+          isRight={mbti.JP}
+          onChange={() => updateMbti('JP')}
+        />
+      </div>
+
+      <div className="mbti-result">
+        <p>선택된 MBTI <span className="mbti-result-text">{getMbtiResult()}</span></p>
+      </div>
+    </div>
+  );
+};
+
+const MbtiRow: React.FC<MbtiRowProps> = ({ label, leftOption, rightOption, isRight, onChange }) => (
+  <div className="mbti-row">
+    <span className="mbti-label">{label}</span>
+    <div className={`mbti-slider ${isRight ? 'right' : 'left'}`} onClick={onChange}>
+      <div className="mbti-slider-option left">{leftOption}</div>
+      <div className="mbti-slider-button"></div>
+      <div className="mbti-slider-option right">{rightOption}</div>
+    </div>
+  </div>
+);
+
+export default MbtiSelector;

src/components/Navigatior/Navigator.css

@@ -12,3 +12,17 @@
   background-color: #fff;
   z-index: 999;
 }
+
+.nav-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-button:focus {
+  outline: none;
+}