Merge branch 'dev'

sullog-official · Jul 1, 2023 · fc01eb2 · fc01eb2
2 parents cbfb367 + 9443846
commit fc01eb2
Show file tree

Hide file tree

Showing 25 changed files with 404 additions and 300 deletions.
diff --git a/src/features/home/components/DrawerContents/DrawerContents.tsx b/src/features/home/components/DrawerContents/DrawerContents.tsx
@@ -2,8 +2,8 @@ import classNames from 'classnames/bind';
 
 import { mapoFlowerIsland } from '@/assets/styles/fonts';
 import DoughnutChart from '@/features/home/components/DoughnutChart';
-import logout from '@/shared/apis/auth/logout';
 import { Button } from '@/shared/components';
+import useAuth from '@/shared/hooks/useAuth';
 import { Statistics } from '@/shared/types/record/statistics';
 
 import styles from './DrawerContents.module.scss';
@@ -15,6 +15,8 @@ type DrawerContentsProps = {
 };
 
 const DrawerContents = ({ statistics }: DrawerContentsProps) => {
+  const { logout } = useAuth();
+
   const recordsCount = Object?.values(statistics?.recordStatisticsMap).reduce(
     (acc, cur) => acc + cur,
     0

diff --git a/src/features/home/components/Map/Map.module.scss b/src/features/home/components/Map/Map.module.scss
@@ -1,9 +1,7 @@
 @use '@styles/themes';
 
 .map-container {
-  position: fixed;
   height: 100vh;
-  width: 100%;
   bottom: env(safe-area-inset-bottom);
 
   @supports (-webkit-touch-callout: none) {

diff --git a/src/features/home/components/Slider/Slider.tsx b/src/features/home/components/Slider/Slider.tsx
@@ -29,7 +29,7 @@ const Slider = ({ items }: SliderProps) => {
               </span>
               <Chip
                 className={cx('tag')}
-                label={item.alcoholTag || '기타'}
+                label={item.alcoholType}
                 type="Primary"
                 appearance="round"
                 size="small"

diff --git a/src/features/search/components/AlcoholCategoryTab/AlcoholCategoryTab.stories.tsx b/src/features/search/components/AlcoholCategoryTab/AlcoholCategoryTab.stories.tsx
@@ -8,7 +8,6 @@ export default {
 
 export const Default: StoryObj<typeof AlcoholCategoryTab> = {
   args: {
-    alcoholCategories: ['Soju', 'FruitWine', 'Makgeolli', 'Etc', 'All'],
-    selectedTab: 'Soju',
+    selectedTab: '소주',
   },
 };
diff --git a/src/features/search/components/AlcoholCategoryTab/AlcoholCategoryTab.tsx b/src/features/search/components/AlcoholCategoryTab/AlcoholCategoryTab.tsx
@@ -1,35 +1,34 @@
 import classNames from 'classnames/bind';
+import { Dispatch, SetStateAction } from 'react';
 
 import AlcoholCategoryTabItem from '@/features/search/components/AlcoholCategoryTabItem';
+import { ALCOHOL_CATEGORIES } from '@/shared/constants/alcohol';
 import { AlcoholTag } from '@/shared/types/alcohol';
 
 import styles from './AlcoholCategoryTab.module.scss';
 
 const cx = classNames.bind(styles);
+const ALL = '전체';
 
 type AlcoholCategoryTabProps = {
-  alcoholCategories: (keyof typeof AlcoholTag)[];
   selectedTab: string;
-  onTabChange: (alcohol: keyof typeof AlcoholTag) => void;
+  onTabChange: Dispatch<SetStateAction<string>>;
 };
 
 const AlcoholCategoryTab = ({
-  alcoholCategories,
   selectedTab,
   onTabChange,
 }: AlcoholCategoryTabProps) => {
   return (
     <div className={cx('wrapper')}>
-      {alcoholCategories.map((category: any) => {
-        return (
-          <AlcoholCategoryTabItem
-            key={category}
-            alcohol={category}
-            isSelected={selectedTab === category}
-            setSelectedTab={onTabChange}
-          />
-        );
-      })}
+      {[...ALCOHOL_CATEGORIES, ALL].map((category: string) => (
+        <AlcoholCategoryTabItem
+          key={category}
+          alcohol={category as keyof typeof AlcoholTag}
+          isSelected={selectedTab === category}
+          setSelectedTab={onTabChange}
+        />
+      ))}
     </div>
   );
 };

diff --git a/src/features/search/components/AlcoholCategoryTabItem/AlcoholCategoryTabItem.stories.tsx b/src/features/search/components/AlcoholCategoryTabItem/AlcoholCategoryTabItem.stories.tsx
@@ -8,70 +8,70 @@ export default {
 
 export const DefaultSoju: StoryObj<typeof AlcoholCard> = {
   args: {
-    alcohol: 'Soju',
+    alcohol: '소주',
     isSelected: false,
   },
 };
 
 export const SelectedSoju: StoryObj<typeof AlcoholCard> = {
   args: {
-    alcohol: 'Soju',
+    alcohol: '소주',
     isSelected: true,
   },
 };
 
 export const DefaultFruitWine: StoryObj<typeof AlcoholCard> = {
   args: {
-    alcohol: 'FruitWine',
+    alcohol: '과실주',
     isSelected: false,
   },
 };
 
 export const SelectedFruitWine: StoryObj<typeof AlcoholCard> = {
   args: {
-    alcohol: 'FruitWine',
+    alcohol: '과실주',
     isSelected: true,
   },
 };
 
 export const DefaultMakgeolli: StoryObj<typeof AlcoholCard> = {
   args: {
-    alcohol: 'Makgeolli',
+    alcohol: '막걸리',
     isSelected: false,
   },
 };
 
 export const SelectedMakgeolli: StoryObj<typeof AlcoholCard> = {
   args: {
-    alcohol: 'Makgeolli',
+    alcohol: '막걸리',
     isSelected: true,
   },
 };
 
 export const DefaultEtc: StoryObj<typeof AlcoholCard> = {
   args: {
-    alcohol: 'Etc',
+    alcohol: '기타',
     isSelected: false,
   },
 };
 
 export const SelectedEtc: StoryObj<typeof AlcoholCard> = {
   args: {
-    alcohol: 'Etc',
+    alcohol: '기타',
     isSelected: true,
   },
 };
 
 export const DefaultAll: StoryObj<typeof AlcoholCard> = {
   args: {
-    alcohol: 'All',
+    alcohol: '전체',
     isSelected: false,
   },
 };
 
 export const SelectedAll: StoryObj<typeof AlcoholCard> = {
   args: {
-    alcohol: 'All',
+    alcohol: '전체',
     isSelected: true,
   },
 };
diff --git a/src/features/search/components/AlcoholCategoryTabItem/AlcoholCategoryTabItem.tsx b/src/features/search/components/AlcoholCategoryTabItem/AlcoholCategoryTabItem.tsx
@@ -10,7 +10,7 @@ const cx = classNames.bind(styles);
 type AlcoholCategoryTabItemProps = {
   alcohol: keyof typeof AlcoholTag;
   isSelected: boolean;
-  setSelectedTab: (alcohol: AlcoholCategoryTabItemProps['alcohol']) => void;
+  setSelectedTab: (alcohol: string) => void;
 };
 
 const AlcoholCategoryTabItem = ({
@@ -30,12 +30,12 @@ const AlcoholCategoryTabItem = ({
       onClick={onClickTab}
       className={cx('button', isSelected && 'clicked')}
     >
-      {alcohol === 'All' ? (
+      {alcohol === '전체' ? (
         <div>all</div>
       ) : (
-        <Icon name={alcohol} size={20} color={svgColor} />
+        <Icon name={AlcoholTag[alcohol]} size={20} color={svgColor} />
       )}
-      <span className={cx('name')}>{AlcoholTag[alcohol]}</span>
+      <span className={cx('name')}>{alcohol}</span>
     </button>
   );
 };

diff --git a/src/features/search/components/SearchBar/SearchBar.module.scss b/src/features/search/components/SearchBar/SearchBar.module.scss
@@ -21,7 +21,6 @@
   display: block;
   flex: 1;
   width: 100%;
-  height: 100%;
   margin-left: 6px;
 }
 

diff --git a/src/pages/api/redirect/kakao.ts b/src/pages/api/redirect/kakao.ts
@@ -0,0 +1,33 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { kakaoLoginCallback } from '@/shared/apis/auth/kakaoLogin';
+import {
+  getTokensFromResponse,
+  setAccessToken,
+  setServerSideRefreshToken,
+} from '@/shared/utils/auth';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const code = req.query.code?.toString();
+
+  if (!code) {
+    res.redirect(307, '/login');
+    return;
+  }
+
+  try {
+    const response = await kakaoLoginCallback(code);
+    const tokens = getTokensFromResponse(response);
+
+    setAccessToken(tokens.accessToken);
+    setServerSideRefreshToken(tokens.refreshToken, res);
+
+    res.redirect(307, '/');
+  } catch (err) {
+    console.error(err);
+    res.redirect(307, '/login');
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -12,7 +12,6 @@ import Icon from '@/shared/components/Icon';
 import PageLayout from '@/shared/components/PageLayout';
 import TopNavigator from '@/shared/components/TopNavigator';
 import { useModal } from '@/shared/hooks/useModal';
-import { alcoholTag } from '@/shared/types/alcohol';
 
 import styles from './index.module.scss';
 
@@ -35,16 +34,24 @@ export default function Home() {
   const [showFilter, setShowFilter] = useState(false);
   const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
 
-  const filteredRecords = useMemo(
-    () =>
-      selectedFilters.includes('전체') || !selectedFilters.length
-        ? records
-        : records.filter(
-            (record) => selectedFilters.includes(alcoholTag[record.alcoholTag]),
-            [records, selectedFilters]
-          ),
-    [records, selectedFilters]
-  );
+  const filteredRecords = useMemo(() => {
+    return selectedFilters.includes('전체') || !selectedFilters.length
+      ? records
+      : records.filter(
+          (record) => {
+            if (record.alcoholType === '소주/증류주') {
+              return selectedFilters.includes('소주');
+            } else if (record.alcoholType === '탁주') {
+              return selectedFilters.includes('막걸리');
+            } else if (record.alcoholType !== '과실주') {
+              return selectedFilters.includes('기타');
+            } else {
+              return selectedFilters.includes(record.alcoholType);
+            }
+          },
+          [records, selectedFilters]
+        );
+  }, [records, selectedFilters]);
 
   const toggleFilter = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();

diff --git a/src/pages/login/index.module.scss b/src/pages/login/index.module.scss
@@ -9,14 +9,6 @@
   background-color: themes.$purple;
 }
 
-.setting-token {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: themes.$floating;
-}
-
 .title-wrapper {
   display: flex;
   flex-direction: column;

diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
@@ -3,69 +3,29 @@ import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
 import { mapoFlowerIsland } from '@/assets/styles/fonts';
-import { kakaoLoginCallback } from '@/shared/apis/auth/kakaoLogin';
 import Icon from '@/shared/components/Icon';
 import PageLayout from '@/shared/components/PageLayout';
-import { TokenKeys } from '@/shared/configs/axios';
-import {
-  NEXT_PUBLIC_KAKAO_BASE_URI,
-  NEXT_PUBLIC_KAKAO_CLIENT_ID,
-  NEXT_PUBLIC_KAKAO_REDIRECT_URI,
-  NEXT_PUBLIC_KAKAO_SCOPE,
-} from '@/shared/constants';
-import { setCookie } from '@/shared/utils/cookie';
+import useAuth from '@/shared/hooks/useAuth';
 
 import styles from './index.module.scss';
 
 const cx = classNames.bind(styles);
 
 const Login = () => {
   const router = useRouter();
-  const { code } = router.query as { code: string };
 
-  const onClickKakaoLoginBtn = () =>
-    (location.href = `${NEXT_PUBLIC_KAKAO_BASE_URI}&client_id=${NEXT_PUBLIC_KAKAO_CLIENT_ID}&scope=${NEXT_PUBLIC_KAKAO_SCOPE}&redirect_uri=${NEXT_PUBLIC_KAKAO_REDIRECT_URI}`);
-
-  const onClickNaverLoginBtn = () => alert('준비중입니다!');
-
-  const setToken = async (code: string) => {
-    const response = await kakaoLoginCallback(code);
-
-    sessionStorage.setItem(TokenKeys.Access, response.headers['authorization']);
-    setCookie(
-      TokenKeys.Refresh,
-      response.headers['refresh'],
-      24 * 60 * 60 * 1000 * 14
-    );
-  };
+  const { loginWithKakao, loginWithNaver, verifyLoggedIn } = useAuth();
 
   useEffect(() => {
-    if (code) {
-      setToken(code)
-        .then(() => {
-          router.push('/');
-        })
-        .catch((e) => {
-          console.error(e);
-        });
-    }
-  }, [code, router]);
-
-  useEffect(() => {
-    const accessToken = sessionStorage.getItem(TokenKeys.Access);
-
-    if (
-      accessToken !== undefined &&
-      accessToken !== 'undefined' &&
-      accessToken !== null
-    ) {
-      router.push('/');
-    }
-  }, [router]);
+    verifyLoggedIn().then((isLoggedIn) => {
+      if (isLoggedIn) {
+        router.push('/');
+      }
+    });
+  }, [router, verifyLoggedIn]);
 
   return (
     <PageLayout className={cx('main')}>
-      {code && <div className={cx('setting-token')} />}
       <div className={cx('title-wrapper')}>
         <h1 className={cx('main-title')} style={mapoFlowerIsland.style}>
           <span>술로그</span>
@@ -77,7 +37,7 @@ const Login = () => {
           type="button"
           aria-label="카카오 로그인"
           className={cx('login-button', 'login-button--kakao')}
-          onClick={onClickKakaoLoginBtn}
+          onClick={loginWithKakao}
         >
           <Icon name="Kakao" size={24} />
           <span>카카오톡 로그인</span>
@@ -86,7 +46,7 @@ const Login = () => {
           type="button"
           aria-label="네이버 로그인"
           className={cx('login-button', 'login-button--naver')}
-          onClick={onClickNaverLoginBtn}
+          onClick={loginWithNaver}
         >
           <Icon name="Naver" size={24} />
           <span>네이버 로그인</span>