Merge pull request #113 from hanseulhee/feat/#112

[#112] web accessibility

src/components/Comment/DisqusComments.tsx

@@ -1,5 +1,5 @@
-import { DiscussionEmbed } from "disqus-react";
 import { css } from "@emotion/react";
+import { DiscussionEmbed } from "disqus-react";
 import { useRouter } from "next/router";
 
 const DisqusComments = (post) => {
@@ -26,7 +26,4 @@ export default DisqusComments;
 
 const footer = css`
   overflow: hidden;
-  /* iframe {
-    margin-bottom: 0rem;
-  } */
 `;

src/components/Footer/index.tsx

@@ -1,6 +1,6 @@
 import { css, Theme } from "@emotion/react";
-import Inform from "components/Footer/Inform";
 import GoLink from "components/Footer/GoLink";
+import Inform from "components/Footer/Inform";
 
 function Footer() {
   return (
@@ -34,7 +34,7 @@ const wrapper = (theme: Theme) => css`
 
   width: 100%;
   height: 12rem;
-  color: #d5d8dd;
+  color: ${theme.color.grey500};
   background-color: ${theme.color.grey100};
   font-size: 13px;
   font-weight: ${theme.fontWeight.light};

src/components/Nav/BottomCategory.tsx

@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
-import { useRouter } from "next/router";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { ReactNode } from "react";
 
 interface Props {
@@ -12,7 +12,7 @@ interface Props {
 function BottomCategory({ path, category, icon }: Props) {
   const router = useRouter();
   const click = {
-    color: router.asPath === path ? "#000000" : "#888888",
+    color: router.asPath === path ? "#000000" : "#757575",
     fontWeight: router.asPath === path ? "700" : "500",
   };
   return (

src/components/Nav/SearchBar.tsx

@@ -10,9 +10,14 @@ function SearchBar({ search, onChange }: Props) {
   return (
     <div css={wrapper}>
       <div css={inputWrapper}>
+        <label htmlFor="search" css={labelCss}>
+          🔍
+        </label>
         <input
+          type="text"
+          id="search"
           css={inputCss}
-          placeholder="오늘은 또 무얼 먹어볼까? 🔍"
+          placeholder="오늘은 또 무얼 먹어볼까?"
           value={search}
           onChange={onChange}
         />
@@ -39,15 +44,19 @@ const inputWrapper = css`
   align-items: center;
 `;
 
+const labelCss = css`
+  position: absolute;
+  left: -10px;
+`;
+
 const inputCss = (theme: Theme) => css`
   outline: none;
   border: none;
   background-color: #f4f4f4;
   border-radius: 12px;
   width: 100%;
   height: 100%;
-  padding: 0.77rem 0.815rem;
-
-  font-weight: ${theme.fontWeight.normal};
+  padding: 0.7rem 0.815rem;
   font-size: 0.87rem;
+  font-weight: ${theme.fontWeight.normal};
 `;

src/components/Nav/TopCategory.tsx

@@ -11,15 +11,15 @@ function TopCategory({ path, category }: Props) {
   const router = useRouter();
 
   const click = {
-    color: router.asPath === path ? "#000000" : "#888888",
+    color: router.asPath === path ? "#000000" : "#757575",
     fontSize: "0.94rem",
     fontWeight: router.asPath === path ? "700" : "500",
   };
 
   return (
     <Link href={path}>
       <a css={click}>
-        <div css={navItem}> {category}</div>
+        <div css={navItem}>{category}</div>
       </a>
     </Link>
   );

src/components/Nav/index.tsx

@@ -1,6 +1,6 @@
 import { css, Theme } from "@emotion/react";
-import Category from "components/Nav/TopLink";
 import SearchBar from "components/Nav/SearchBar";
+import Category from "components/Nav/TopLink";
 import Link from "next/link";
 import { ChangeEvent } from "react";
 
@@ -13,19 +13,15 @@ function Nav({ search, onChange }: Props) {
   return (
     <div css={wrapper}>
       <div css={inWrapper}>
-        <Link href="/">
-          <a>
-            <h1 css={logo}>온수냠냠냠</h1>
-          </a>
+        <Link href="/" passHref>
+          <h1 css={logo}>온수냠냠냠</h1>
         </Link>
 
-        <div css={searchWrapper}>
-          <Link href="/Search">
-            <a>
-              <SearchBar search={search} onChange={onChange} />
-            </a>
-          </Link>
-        </div>
+        <Link href="/Search" passHref>
+          <div css={searchWrapper}>
+            <SearchBar search={search} onChange={onChange} />
+          </div>
+        </Link>
       </div>
       <Category />
     </div>

src/components/Review/Introduce.tsx

@@ -1,17 +1,15 @@
 import { css, Theme } from "@emotion/react";
-import Link from "next/link";
 import HelpIcon from "@mui/icons-material/Help";
+import Link from "next/link";
 
 function Introduce() {
   return (
     <section css={sizeWrapper}>
       <div css={contentWrapper}>
         <p css={titleContent}>후기페이지</p>
         <div css={questionMarkWrapper}>
-          <Link href="/Review/Introduce">
-            <a>
-              <HelpIcon css={questionMark} />
-            </a>
+          <Link href="/Review/Introduce" passHref>
+            <HelpIcon css={questionMark} />
           </Link>
         </div>
       </div>

src/pages/Notice/Report.tsx

@@ -1,11 +1,11 @@
 import { css, Theme } from "@emotion/react";
 import IntroText from "components/Text/IntroText";
-import { motion } from "framer-motion";
 import {
+  defaultFadeInLeftVariants,
   defaultFadeInUpVariants,
   staggerOne,
-  defaultFadeInLeftVariants,
 } from "constants/motion";
+import { motion } from "framer-motion";
 
 function Report() {
   return (

src/pages/Notice/index.tsx

@@ -1,10 +1,10 @@
 import { css } from "@emotion/react";
-import InformCard from "components/Card/InformCard";
-import bgLottieRandom from "assets/lottieJSON/random.json";
-import bgLottieHi from "assets/lottieJSON/cardHi.json";
 import bgLottieComm from "assets/lottieJSON/cardComm.json";
+import bgLottieHi from "assets/lottieJSON/cardHi.json";
 import bgLottieInquiry from "assets/lottieJSON/cardInquiry.json";
 import bgLottieReview from "assets/lottieJSON/cardReview.json";
+import bgLottieRandom from "assets/lottieJSON/random.json";
+import InformCard from "components/Card/InformCard";
 import Intro from "components/Notice/Intro";
 
 function Notice() {

src/styles/Theme/theme.ts

@@ -4,10 +4,10 @@ const theme = {
     white: "#fafafa",
     border: "#f2f2f2",
     black: "#000000",
-    yellow: "#fbc531",
+    yellow: "#edb900",
     grey100: "#f9f9f9",
-    grey500: "#888888",
-    grey900: "#5d5d5d",
+    grey500: "#757575",
+    grey900: "#444444",
   },
   fontWeight: {
     light: 300,