Merge pull request #75 from prgrms-fe-devcourse/feature/Deploy-1.1.0

Deploy/version-1.1.0
prgrms-fe-devcourse · Jan 15, 2024 · 75a22c2 · 75a22c2
2 parents a59679d + 3010846
commit 75a22c2
Show file tree

Hide file tree

Showing 78 changed files with 1,693 additions and 652 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,9 @@
 
 ![logo](https://github.com/prgrms-fe-devcourse/FEDC5_looky_heejin/assets/90549862/ceb789a7-3811-4231-b705-1016345d7fbb)
 
-### [서비스 주소](https://www.looky.kr/)
+### [메인 서비스 주소](https://www.looky.kr/)
+
+##### [도메인 만료 시 서비스 주소](https://looky-working.vercel.app/)
 
 ---
 
@@ -18,8 +20,10 @@
 
 ## 팀원 소개
 
-| [김석주](https://github.com/SoJuSo) | [신수영](https://github.com/joyswim) | [오원주](https://github.com/OhWonJu) | [황민호](https://github.com/hellosonic-r) |
+| 팀장 & COO | CKO | CTO | CAO |
 | :-: | :-: | :-: | :-: |
+| **✨최고 운영 책임자** | **✨최고 지식경영 책임자** | **✨최고 기술 책임자** | **✨최고 관리 책임자** |
+| [김석주](https://github.com/SoJuSo) | [신수영](https://github.com/joyswim) | [오원주](https://github.com/OhWonJu) | [황민호](https://github.com/hellosonic-r) |
 | [email protected] | [email protected] | [email protected] | [email protected] |
 | <img src="https://github.com/SoJuSo.png" /> | <img src="https://github.com/joyswim.png" /> | <img src="https://github.com/OhWonJu.png" /> | <img src="https://github.com/hellosonic-r.png" /> |
 
@@ -33,6 +37,16 @@ npm install
 npm run dev
 ```
 
+## 환경 변수 목록
+
+```
+VITE_BASE_URL=
+VITE_CRYPTO_KEY=
+VITE_ADMIN_ID=
+VITE_ADMIN_EMAIL=
+VITE_ADMIN_PASSWORD=
+```
+
 ## 팀 문화 & 컨벤션
 
 [looky Convention 위키](https://github.com/prgrms-fe-devcourse/FEDC5_looky_heejin/wiki/Convention)

diff --git a/index.html b/index.html
@@ -3,6 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta property="og:title" content="looky" />
     <meta property="og:url" content="https://looky.kr/" />
@@ -12,10 +20,6 @@
       property="og:description"
       content="패션에 관심 있는 lookys들을 위한 SNS 서비스. looky"
     />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
-    />
     <title>looky</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "react-merge-refs": "^2.1.1",
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.21.1",
+    "react-toastify": "^9.1.3",
     "react-use": "^17.4.2",
     "redux": "^5.0.0",
     "styled-components": "^6.1.3",

diff --git a/public/looky_spinner.png b/public/looky_spinner.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,6 +8,8 @@ import useEventQuery from "./hooks/useEventQuery";
 import { useLocalStorage } from "./hooks/useLocalStorage";
 import { useMe } from "./hooks/useMe";
 import { NotificationManager } from "./components/Notification";
+import { aesDecrypt } from "./utils/crypto";
+import { Spinner } from "./components/common/Spinner";
 
 const App = () => {
   const [token, setToken] = useLocalStorage("token");
@@ -20,7 +22,8 @@ const App = () => {
   });
 
   if (token !== null) {
-    rootAPI.defaults.headers.common["Authorization"] = "Bearer " + token;
+    rootAPI.defaults.headers.common["Authorization"] =
+      "Bearer " + aesDecrypt(token);
   }
 
   const preload = async () => {
@@ -36,7 +39,7 @@ const App = () => {
           profilePhoto: data.image,
           userName: data.fullName,
         });
-        setAuth({ isLogIn: true, token: token });
+        setAuth({ isLogIn: true, token: aesDecrypt(token) });
       }
     }
   };
@@ -53,7 +56,7 @@ const App = () => {
     prepare();
   }, [isLogIn, token]);
 
-  if (isLoading) return null;
+  if (isLoading) return <Spinner />;
 
   return (
     <>

diff --git a/src/api/queries/createChannel.ts b/src/api/queries/createChannel.ts
@@ -0,0 +1,7 @@
+import { _POST } from "@/api";
+import { ICreateChannelParams } from "@/types/channel";
+
+export const _CREATE_CHANNEL = async (params: ICreateChannelParams) => {
+  const result = await _POST("/channels/create", params);
+  return result?.data;
+};
diff --git a/src/components/Admin/Admin.tsx b/src/components/Admin/Admin.tsx
@@ -0,0 +1,26 @@
+import { useMe } from "@/hooks/useMe";
+import { Button } from "../common";
+import { useUI } from "../common/uiContext";
+
+const { VITE_ADMIN_ID } = import.meta.env;
+
+const Admin = () => {
+  const { id } = useMe();
+  const { setModalView, openModal } = useUI();
+
+  const onClick = () => {
+    setModalView("CREATE_CHANNEL_VIEW");
+    openModal();
+  };
+
+  if (id === VITE_ADMIN_ID)
+    return (
+      <div style={{ margin: "10px 5px", marginBottom: "0" }}>
+        <Button variant="symbol" onClick={onClick}>
+          <span style={{ fontWeight: "bold" }}>채널 추가하기</span>
+        </Button>
+      </div>
+    );
+};
+
+export default Admin;
diff --git a/src/components/Admin/index.tsx b/src/components/Admin/index.tsx
@@ -0,0 +1 @@
+export { default as Admin } from "./Admin";
diff --git a/src/components/SearchTab/index.tsx b/src/components/SearchTab/index.tsx
@@ -1,45 +1,56 @@
-import { NAV_HEIGHT } from "@/constants/uiConstants";
 import { Row } from "@/styles/GlobalStyle";
 import { styled } from "styled-components";
+import { Button } from "../common";
+import { useState } from "react";
 
 const TabWrap = styled(Row)`
   margin-top: 1rem;
-  height: ${`${NAV_HEIGHT - 1}rem`};
-`;
-
-const Tab = styled.div<{ option: TOption }>`
-  background-color: ${({ theme }) => theme.gray_200};
-  flex-grow: 1;
-  text-align: center;
-  line-height: ${`${NAV_HEIGHT - 1}rem`};
-  cursor: pointer;
-  &:first-of-type {
-    border-right: 2px solid ${({ theme }) => theme.white_primary};
-    background-color: ${({ theme, option }) =>
-      option === "user" ? theme.gray_500 : undefined};
-  }
-  &:last-of-type {
-    background-color: ${({ theme, option }) =>
-      option === "post" ? theme.gray_500 : undefined};
-  }
 `;
 
 type TOption = "user" | "post";
 
 interface ISearchTab {
   option: TOption;
-  onClick: () => void;
+  onClick: (tabOption: string) => void;
 }
 
 const SearchTab = ({ option = "user", onClick, ...props }: ISearchTab) => {
+  const [tab, setTab] = useState(option);
+
+  const onClickTab = () => {
+    const newTabOption = tab === "user" ? "post" : "user";
+    setTab(newTabOption);
+    onClick(newTabOption);
+  };
+
   return (
     <TabWrap {...props}>
-      <Tab option={option} onClick={onClick}>
-        {"사용자"}
-      </Tab>
-      <Tab option={option} onClick={onClick}>
-        {"게시글"}
-      </Tab>
+      <Button
+        variant={tab === "user" ? "symbol" : "disabled"}
+        type="button"
+        width="50vh"
+        style={{
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          pointerEvents: tab === "user" ? "none" : undefined,
+        }}
+        onClickHandler={() => onClickTab()}
+      >
+        사용자
+      </Button>
+      <Button
+        variant={tab === "post" ? "symbol" : "disabled"}
+        type="button"
+        width="50vh"
+        style={{
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          pointerEvents: tab === "post" ? "none" : undefined,
+        }}
+        onClickHandler={() => onClickTab()}
+      >
+        게시글
+      </Button>
     </TabWrap>
   );
 };

diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx
@@ -1,9 +1,10 @@
 import styled from "styled-components";
 
 type TShape = "circle" | "round" | "square";
+type TSize = "XXS" | "XS" | "S" | "M" | "L" | "XL";
 
 interface IAvatarProps {
-  size: string;
+  size: TSize;
   shape?: TShape;
   src?: string;
   theme?: string;
@@ -17,6 +18,7 @@ const ShapeToStyle: { [key: string]: string } = {
 };
 
 const SizeToStyle: { [key: string]: string } = {
+  XXS: "26px",
   XS: "32px",
   S: "40px",
   M: "48px",

diff --git a/src/components/common/Button/Button.styles.ts b/src/components/common/Button/Button.styles.ts
@@ -1,6 +1,8 @@
 import styled from "styled-components";
 import tw from "twin.macro";
 
+import { BORDER_TINE_WIDTH } from "@/constants/uiConstants";
+
 const ButtonBaseWrapper = styled.button<any>`
   position: relative;
   overflow: hidden;
@@ -38,8 +40,10 @@ export const Flat = styled(ButtonBaseWrapper)<any>`
 
 export const Neumorp = styled(ButtonBaseWrapper)<any>`
   background-color: ${props => props.theme.white_primary + 30};
+  border-width: ${BORDER_TINE_WIDTH}px;
+  border-color: ${props => props.theme.transparent_30};
   color: ${props =>
-    props.$textColor ? props.$textColor : props.theme.text_primary_color}; 
+    props.$textColor ? props.$textColor : props.theme.text_primary_color};
 
   ${tw`flex justify-center items-center shadow-md hover:shadow-inner transition-shadow`}
 `;

diff --git a/src/components/common/Button/Button.tsx b/src/components/common/Button/Button.tsx
@@ -121,11 +121,10 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
       $rippleColor={rippleColor}
       {...rest}
     >
-      {children}
+      {!loading ? <>{children}</> : <span className="font-semibold">...</span>}
       {useRipple && variant !== "neumorp" && !disabled && (
         <ButtonRipple ref={rippleRef} className="ripple" />
       )}
-      {loading && <i className="pl-2 m-0 flex">{/* <LoadingDots /> */}</i>}
     </ButtonWrapper>
   );
 });

diff --git a/src/components/common/Navigator/TopNavBar/Elements/ChatAvatars.tsx b/src/components/common/Navigator/TopNavBar/Elements/ChatAvatars.tsx
@@ -28,7 +28,7 @@ const AvatarWrapper = styled.div`
 `;
 
 const PartnerName = styled.span`
-  font-size: 0.5rem;
+  font-size: 0.7rem;
   font-weight: 500;
   margin: 0.15rem auto 0 auto;
 `;
@@ -42,9 +42,9 @@ const ChatAvatars = ({
     <ChatAvatarsWrapper>
       <AvatarsWrapper>
         <AvatarWrapper>
-          <Avatar size="XS" shape="circle" src={partnerAvatarSrc} />
+          <Avatar size="XXS" shape="circle" src={partnerAvatarSrc} />
         </AvatarWrapper>
-        <Avatar size="XS" shape="circle" src={myAvatarSrc} />
+        <Avatar size="XXS" shape="circle" src={myAvatarSrc} />
       </AvatarsWrapper>
       <PartnerName>{partnerName}</PartnerName>
     </ChatAvatarsWrapper>