리뷰 방법 안내 페이지 구현 (issue#52)

frontend/src/apis/authAPI.ts

@@ -1,4 +1,4 @@
-import { UserInfo } from '@/types';
+import type { UserInfo } from '@/types';
 
 //TODO 일단 관심사 별로 API.ts 로 나누어 놓은 것인데,
 // 이 또한 추후에 논의해보아야 할듯 해요 ~ @버건디

frontend/src/components/guide/HowToFork.tsx

@@ -0,0 +1,142 @@
+// TODO 안에 컨텐츠가 어떻게 들어갈지 몰라서 일단 목파일 넣어놓습니다. @버건디
+
+const HowToFork = () => {
+  return (
+    <div id="Inner">
+      <div id="Languages">
+        <a href="http://hy.lipsum.com/">Հայերեն</a>
+        <a href="http://sq.lipsum.com/">Shqip</a>
+        <span className="ltr" dir="ltr">
+          <a href="http://ar.lipsum.com/">‫العربية</a>
+        </span>
+        <a href="http://bg.lipsum.com/">Български</a>
+        <a href="http://ca.lipsum.com/">Català</a>
+        <a href="http://cn.lipsum.com/">中文简体</a>
+        <a href="http://hr.lipsum.com/">Hrvatski</a>
+        <a href="http://cs.lipsum.com/">Česky</a>
+        <a href="http://da.lipsum.com/">Dansk</a>
+        <a href="http://nl.lipsum.com/">Nederlands</a>
+        <a className="zz" href="http://www.lipsum.com/">
+          English
+        </a>
+        <a href="http://et.lipsum.com/">Eesti</a>
+        <a href="http://ph.lipsum.com/">Filipino</a>
+        <a href="http://fi.lipsum.com/">Suomi</a>
+        <a href="http://fr.lipsum.com/">Français</a>
+        <a href="http://ka.lipsum.com/">ქართული</a>
+        <a href="http://de.lipsum.com/">Deutsch</a>
+        <a href="http://el.lipsum.com/">Ελληνικά</a>
+        <span className="ltr" dir="ltr">
+          <a href="http://he.lipsum.com/">‫עברית</a>
+        </span>
+        <a href="http://hi.lipsum.com/">हिन्दी</a>
+        <a href="http://hu.lipsum.com/">Magyar</a>
+        <a href="http://id.lipsum.com/">Indonesia</a>
+        <a href="http://it.lipsum.com/">Italiano</a>
+        <a href="http://lv.lipsum.com/">Latviski</a>
+        <a href="http://lt.lipsum.com/">Lietuviškai</a>
+        <a href="http://mk.lipsum.com/">македонски</a>
+        <a href="http://ms.lipsum.com/">Melayu</a>
+        <a href="http://no.lipsum.com/">Norsk</a>
+        <a href="http://pl.lipsum.com/">Polski</a>
+        <a href="http://pt.lipsum.com/">Português</a>
+        <a href="http://ro.lipsum.com/">Româna</a>
+        <a href="http://ru.lipsum.com/">Pyccкий</a>
+        <a href="http://sr.lipsum.com/">Српски</a>
+        <a href="http://sk.lipsum.com/">Slovenčina</a>
+        <a href="http://sl.lipsum.com/">Slovenščina</a>
+        <a href="http://es.lipsum.com/">Español</a>
+        <a href="http://sv.lipsum.com/">Svenska</a>
+        <a href="http://th.lipsum.com/">ไทย</a>
+        <a href="http://tr.lipsum.com/">Türkçe</a>
+        <a href="http://uk.lipsum.com/">Українська</a>
+        <a href="http://vi.lipsum.com/">Tiếng Việt</a>
+      </div>
+
+      <h1>Lorem Ipsum</h1>
+      <h4>
+        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
+        velit..."
+      </h4>
+      <h5>
+        "There is no one who loves pain itself, who seeks after it and wants to have it, simply
+        because it is pain..."
+      </h5>
+
+      <hr />
+
+      <div id="Content">
+        <div className="boxed">
+          <div id="lipsum">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis enim elementum
+              nulla posuere eleifend. Vestibulum sit amet venenatis libero. Suspendisse porttitor
+              sit amet ligula et placerat. Pellentesque habitant morbi tristique senectus et netus
+              et malesuada fames ac turpis egestas. Cras dignissim non urna in fermentum. Vivamus
+              egestas odio et rutrum ultricies. Aliquam gravida, lectus non tristique commodo,
+              ligula eros ultrices turpis, quis malesuada quam lectus nec metus. Pellentesque
+              habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+            </p>
+            <p>
+              Nullam viverra eu augue id aliquet. Nulla sit amet lobortis ipsum. Suspendisse
+              suscipit viverra ante vitae semper. Aliquam enim felis, iaculis a posuere pharetra,
+              lacinia eu tortor. Aliquam posuere suscipit cursus. Vivamus semper volutpat urna, eu
+              dignissim lectus ullamcorper eget. Duis placerat molestie sapien, nec commodo felis
+              vulputate at.
+            </p>
+            <p>
+              Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+              himenaeos. In vehicula, est id efficitur porta, orci velit ultrices enim, a dignissim
+              augue ligula at felis. Phasellus elementum nibh felis, ac viverra nunc elementum at.
+              Phasellus eu pellentesque libero. In convallis erat diam, vitae hendrerit ante posuere
+              a. In hac habitasse platea dictumst. Pellentesque at lectus eu nulla ullamcorper
+              ornare ut et urna.
+            </p>
+            <p>
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+              curae; Nullam vulputate et nisi et iaculis. Donec iaculis ut nibh venenatis efficitur.
+              Nunc lorem justo, sagittis vitae lacus eu, tincidunt placerat justo. Aenean semper
+              nibh at sodales convallis. Duis ut iaculis arcu. Proin commodo rutrum nisl eget
+              venenatis. Quisque sodales magna sit amet turpis tristique faucibus. Aenean a porta
+              ex, at feugiat risus. Nulla tincidunt consectetur pellentesque. Integer semper, diam
+              quis porttitor porttitor, elit nunc ullamcorper dui, quis consectetur metus enim ac
+              nunc. Nulla egestas justo at auctor fringilla.
+            </p>
+            <p>
+              Mauris pharetra ut eros quis euismod. Sed efficitur erat id dui mollis venenatis. Duis
+              blandit, nisl vel venenatis fermentum, justo purus consectetur nibh, quis rutrum mi
+              eros id est. Sed mattis commodo leo. Donec lacinia mi sed laoreet imperdiet. Mauris ac
+              ex congue, consequat arcu eu, egestas metus. Duis imperdiet diam quis tellus pretium
+              ultricies. Quisque sagittis sit amet nisi id vulputate. Interdum et malesuada fames ac
+              ante ipsum primis in faucibus. Maecenas sagittis enim id porta fringilla. Nunc vel
+              faucibus massa. Nam rhoncus ex quis augue viverra, non aliquet mauris imperdiet. Donec
+              tincidunt enim sed justo posuere tempus. Suspendisse justo velit, vehicula id tellus
+              eu, condimentum posuere nibh.
+            </p>
+          </div>
+          <div id="generated">
+            Generated 5 paragraphs, 397 words, 2706 bytes of{' '}
+            <a href="https://www.lipsum.com/" title="Lorem Ipsum">
+              Lorem Ipsum
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <hr />
+
+      <div className="boxed">
+        <a style={{ textDecoration: 'none' }} href="mailto:help@lipsum.com">
+          help@lipsum.com
+        </a>
+        <br />
+        <a style={{ textDecoration: 'none' }} rel="nofollow" href="/privacy">
+          Privacy Policy
+        </a>
+        ·<button id="pmLink">Privacy Manager</button>
+      </div>
+    </div>
+  );
+};
+
+export default HowToFork;

frontend/src/components/tab/Tab.styled.ts

@@ -0,0 +1,64 @@
+import { keyframes, styled } from 'styled-components';
+
+export const TabPageContainer = styled.div`
+  width: 70rem;
+  height: 100%;
+  margin: 0 auto;
+  padding-top: 3rem;
+`;
+
+export const TabListContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+export const TabCurrentContentContainer = styled.div`
+  word-break: break-all;
+  margin-top: 2rem;
+  animation: ${fadeIn} 0.3s ease-out;
+`;
+
+export const TabContainer = styled.div<{ selected: boolean }>`
+  padding: 10px 20px;
+  cursor: pointer;
+  background: ${({ selected }) => (selected ? 'var(--primary-700)' : 'var(--grey-700)')};
+  font-size: 1.5rem;
+  color: white;
+  border-radius: 1rem 1rem 0 0;
+  margin: 0 5px;
+  transition:
+    background 0.3s,
+    box-shadow 0.3s;
+
+  ${({ selected }) =>
+    selected &&
+    `
+    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+    animation: tabSelected 0.3s ease-out;
+  `}
+
+  &:hover {
+    background: ${({ selected }) => (selected ? 'var(--primary-500)' : 'var(--grey-500)')};
+  }
+
+  @keyframes tabSelected {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+`;

frontend/src/components/tab/Tab.tsx

@@ -0,0 +1,16 @@
+import { useTabs } from '@/hooks/useTabs';
+import { PropsWithChildren } from 'react';
+import * as S from './Tab.styled';
+
+interface TabProps extends PropsWithChildren {
+  index: number;
+}
+
+export default function Tab({ index, children }: TabProps) {
+  const { selectedIndex, handleSelectedIndex } = useTabs();
+  return (
+    <S.TabContainer selected={selectedIndex === index} onClick={() => handleSelectedIndex(index)}>
+      {children}
+    </S.TabContainer>
+  );
+}

frontend/src/components/tab/TabCurrentTab.tsx

@@ -0,0 +1,10 @@
+import { useTabs } from '@/hooks/useTabs';
+import * as S from './Tab.styled';
+
+export default function TabCurrentTab() {
+  const { selectedIndex, tabList } = useTabs();
+
+  return (
+    <S.TabCurrentContentContainer>{tabList[selectedIndex].content}</S.TabCurrentContentContainer>
+  );
+}

frontend/src/components/tab/TabList.tsx

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import * as S from './Tab.styled';
+
+export default function TabList({ children }: PropsWithChildren) {
+  return <S.TabListContainer>{children}</S.TabListContainer>;
+}

frontend/src/components/tab/Tabs.tsx

@@ -0,0 +1,29 @@
+import { TabsContext } from '@/hooks/useTabs';
+import { PropsWithChildren, useState } from 'react';
+import Tab from './Tab';
+import TabList from './TabList';
+import TabCurrentTab from './TabCurrentTab';
+import * as S from './Tab.styled';
+import { TabData } from '@/types';
+
+interface TabsProps extends PropsWithChildren {
+  tabList: TabData[];
+}
+
+export default function Tabs({ children, tabList }: TabsProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const handleSelectedIndex = (index: number) => {
+    setSelectedIndex(index);
+  };
+
+  return (
+    <TabsContext.Provider value={{ selectedIndex, handleSelectedIndex, tabList }}>
+      <S.TabPageContainer>{children}</S.TabPageContainer>
+    </TabsContext.Provider>
+  );
+}
+
+Tabs.List = TabList;
+Tabs.Tab = Tab;
+Tabs.CurrentTab = TabCurrentTab;

frontend/src/components/userProfile/UserProfileDescription.tsx

@@ -1,5 +1,6 @@
-import { ChangeEvent, useState } from 'react';
-import { UserInfo } from '@/types';
+import { useState } from 'react';
+import type { ChangeEvent } from 'react';
+import type { UserInfo } from '@/types';
 import * as S from './UserProfile.styled';
 
 type UserProfileDescription = Pick<UserInfo, 'description'>;

frontend/src/components/userProfile/UserProfileEmail.tsx

@@ -1,4 +1,4 @@
-import { UserInfo } from '@/types';
+import type { UserInfo } from '@/types';
 import * as S from './UserProfile.styled';
 
 type UserProfileEmailProps = Pick<UserInfo, 'email'>;

frontend/src/components/userProfile/UserProfileImage.tsx

@@ -1,5 +1,5 @@
 import * as S from './UserProfile.styled';
-import { UserInfo } from '@/types';
+import type { UserInfo } from '@/types';
 
 //TODO UserInfo 타입에서 재사용할 수 있을것 같아 Pick으로 선언해놓습니다.
 // 인터페이스로 추후에 변경 해도 상관 없어요! @버건디

frontend/src/components/userProfile/UserProfileName.tsx

@@ -1,4 +1,4 @@
-import { UserInfo } from '@/types';
+import type { UserInfo } from '@/types';
 import * as S from './UserProfile.styled';
 
 type UserProfileNameProps = Pick<UserInfo, 'name'>;

frontend/src/constants/messages.ts

@@ -0,0 +1,3 @@
+export const ERROR_MESSAGE = {
+  not_defined_context: '컨텍스트가 정의 되지 않았어요!',
+} as const;

frontend/src/constants/routes.ts

@@ -3,4 +3,5 @@ export const ROUTES = {
   submit: '/submit/:id',
   missionDetail: '/missions/:id',
   profile: '/profile',
+  guide: '/guide',
 } as const;

frontend/src/hooks/useTabs.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react';
+import { ERROR_MESSAGE } from '@/constants/messages';
+import { TabData } from '@/types';
+
+interface TabsContextProps {
+  selectedIndex: number;
+  handleSelectedIndex: (index: number) => void;
+  tabList: TabData[];
+}
+
+// TODO 컨텍스트 폴더를 따로 뺄지 안뺄지 이야기 나눠보아야 할거 같아요 ! @버건디
+
+export const TabsContext = createContext<TabsContextProps | undefined>(undefined);
+
+export const useTabs = (): TabsContextProps => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error(ERROR_MESSAGE.not_defined_context);
+  }
+  return context;
+};

frontend/src/hooks/useUserInfo.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { getUserInfo } from '@/apis/authAPI';
-import { UserInfo } from '@/types';
+import type { UserInfo } from '@/types';
 
 const useUserInfo = () => {
   //TODO 아직 토큰 로직에 관한 부분이 미정이라서

frontend/src/index.tsx

@@ -9,6 +9,7 @@ import MissionDetailPage from './pages/MissionDetailPage';
 import MissionListPage from './pages/MissionListPage';
 import MissionSubmitPage from './pages/MissionSubmitPage';
 import UserProfilePage from './pages/UserProfilePage';
+import GuidePage from './pages/GuidePage';
 
 const queryClient = new QueryClient();
 
@@ -48,6 +49,14 @@ const routes = [
       </App>
     ),
   },
+  {
+    path: ROUTES.guide,
+    element: (
+      <App>
+        <GuidePage />
+      </App>
+    ),
+  },
 ];
 
 const router = createBrowserRouter(routes, {