Style : 컨벤션에 따라 변수명, 함수명 변경

- 함수명과 변수명은 카멜 케이스, jsx는 파스칼 케이스 - props를 보기 편하게 고쳤습니다.
team-3-in · Feb 8, 2024 · 96db077 · 96db077
1 parent 9d90d50
commit 96db077
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 32 deletions.
diff --git a/frontend/src/components/Main/UserModal.tsx → ...end/src/components/Main/ProfileToggle.tsx b/frontend/src/components/Main/UserModal.tsx → ...end/src/components/Main/ProfileToggle.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { media } from '../../style/mediaQuery';
 
-const Wapper = styled.div`
+const Wrapper = styled.div`
   ${media.smallMobile`
     top: 36px;
     padding: 10px;
@@ -72,9 +72,9 @@ const ModalImg = styled.img<{ size: string }>`
   height: ${(props) => props.size};
 `;
 
-function UserModal() {
+function ProfileToggle() {
   return (
-    <Wapper>
+    <Wrapper>
       <ModalBox>
         <ModalIconBox color="#FF2868">
           <ModalImg
@@ -95,8 +95,8 @@ function UserModal() {
         </ModalIconBox>
         <p>회원정보</p>
       </ModalBox>
-    </Wapper>
+    </Wrapper>
   );
 }
 
-export default UserModal;
+export default ProfileToggle;
diff --git a/...d/src/components/common/NavigationBar.tsx → .../components/common/ClickNavigationBox.tsx b/...d/src/components/common/NavigationBar.tsx → .../components/common/ClickNavigationBox.tsx
@@ -1,16 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import { media } from '../../style/mediaQuery';
+import { NavigationBarProps } from '../../types/NavigationBarProps';
 
-interface NavProps {
-  color: string;
-  size: string;
-  path: string;
-  sub?: string;
-  title: string;
-}
-
-const Wapper = styled.div`
+const Wrapper = styled.div`
   ${media.smallMobile`
     width: 200px;
     height: 50px;
@@ -105,31 +98,37 @@ const Arrow = styled.p`
   font-weight: 500;
 `;
 
-function NavigationBar(props: NavProps) {
+function ClickNavigationBox({
+  color,
+  size,
+  path,
+  sub,
+  title,
+}: NavigationBarProps) {
   return (
-    <Wapper>
+    <Wrapper>
       {/* 아이콘 + 제목 박스 */}
       <Box>
         {/* 아이콘 박스의 색깔을 string으로 받습니다 */}
 
-        <IconBox color={props.color}>
+        <IconBox color={color}>
           {/* desktop 사이즈의 img size와 path를 string으로 받습니다 */}
           <Img
-            size={props.size}
-            src={`${process.env.PUBLIC_URL}/img/${props.path}.webp`}
+            size={size}
+            src={`${process.env.PUBLIC_URL}/img/${path}.webp`}
             alt="connect"
           />
         </IconBox>
         {/* subTitle이 있으면 넣고 없으면 빼주세요 */}
         <DescBox>
-          <SubTitle>{props.sub}</SubTitle>
-          <Title>{props.title}</Title>
+          <SubTitle>{sub}</SubTitle>
+          <Title>{title}</Title>
         </DescBox>
       </Box>
       {/* 화살표 */}
       <Arrow>{'>'}</Arrow>
-    </Wapper>
+    </Wrapper>
   );
 }
 
-export default NavigationBar;
+export default ClickNavigationBox;
diff --git a/frontend/src/pages/Loading.tsx b/frontend/src/pages/Loading.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import MoonLoader from 'react-spinners/MoonLoader';
 
-const Wapper = styled.div`
+const Wrapper = styled.div`
   width: 100%;
   height: 100vh;
   display: flex;
@@ -18,13 +18,13 @@ const LoadImg = styled.img`
 function Loading() {
   return (
     <>
-      <Wapper>
+      <Wrapper>
         <MoonLoader color="#333333" loading size={45} speedMultiplier={0.5} />
         <LoadImg
           src={`${process.env.PUBLIC_URL}/img/loading.webp`}
           alt="loading"
         />
-      </Wapper>
+      </Wrapper>
     </>
   );
 }

diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { media } from '../style/mediaQuery';
 import { useNavigate } from 'react-router-dom';
-import UserModal from '../components/Main/UserModal';
-import NavigationBar from '../components/common/NavigationBar';
+import ProfileToggle from '../components/Main/ProfileToggle';
+import ClickNavigationBox from '../components/common/ClickNavigationBox';
 
 const Wrapper = styled.div`
   ${media.smallMobile`
@@ -210,7 +210,7 @@ const Arrow = styled.p`
 
 function Main() {
   const navigate = useNavigate();
-  const [openModal, setOpenModal] = useState<boolean>(false);
+  const [isShowing, setShowing] = useState(false);
   return (
     <Wrapper>
       <Header>
@@ -221,13 +221,13 @@ function Main() {
         >
           <HomeImg src={`${process.env.PUBLIC_URL}/img/home.webp`} alt="home" />
         </HomeBtn>
-        <Btn onClick={() => setOpenModal((pre) => !pre)}>
+        <Btn onClick={() => setShowing((pre) => !pre)}>
           <SkillImg
             src={`${process.env.PUBLIC_URL}/img/skill.webp`}
             alt="skill"
           />
         </Btn>
-        {openModal && <UserModal />}
+        {isShowing && <ProfileToggle />}
       </Header>
       <LetText>Let’s Go</LetText>
       <ProblemBox>
@@ -275,7 +275,7 @@ function Main() {
           <Arrow>{'>'}</Arrow>
         </ContBox>
       </ProblemBox>
-      <NavigationBar
+      <ClickNavigationBox
         color="#5562EA"
         size="22px"
         path="reportIcon"

diff --git a/frontend/src/types/NavigationBarProps.ts b/frontend/src/types/NavigationBarProps.ts
@@ -0,0 +1,7 @@
+export type NavigationBarProps = {
+  color: string;
+  size: string;
+  path: string;
+  sub?: string;
+  title: string;
+};