Merge pull request #250 from SaekKkanDa/develop

베포: google adsense 심사용 배포

base/components/Hidden.tsx

@@ -0,0 +1,33 @@
+import { CSSProperties, ReactNode } from 'react';
+import styled from 'styled-components';
+
+export interface HiddenProps {
+  isHidden: boolean;
+  isUseVisibility?: boolean;
+  style?: CSSProperties;
+  children?: ReactNode;
+}
+export function Hidden({
+  isHidden,
+  isUseVisibility = false,
+  style,
+  children,
+}: HiddenProps) {
+  return (
+    <HiddenContainer
+      isHidden={isHidden}
+      isUseVisibility={isUseVisibility}
+      style={style}
+    >
+      {children}
+    </HiddenContainer>
+  );
+}
+
+const HiddenContainer = styled.div<{
+  isHidden: boolean;
+  isUseVisibility: boolean;
+}>`
+  ${({ isUseVisibility, isHidden }) =>
+    isHidden && (isUseVisibility ? 'visiblity : hidden' : 'display : none')}
+`;

base/components/ModalBase.tsx

@@ -0,0 +1,47 @@
+import { ReactElement, ReactNode, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+
+import { Hidden } from '@Base/components/Hidden';
+
+export interface ModalBaseProps {
+  backdropComponent?: ReactElement;
+  children?: ReactNode;
+  isOpen: boolean;
+  onClose?: () => void;
+}
+
+export function ModalBase({
+  backdropComponent = <DefaultBackdrop />,
+  children,
+  isOpen,
+  onClose,
+}: ModalBaseProps) {
+  return createPortal(
+    <Hidden isHidden={!isOpen}>
+      <Container>
+        {cloneElement(backdropComponent, { onClick: onClose })}
+        {children}
+      </Container>
+    </Hidden>,
+    document.body
+  );
+}
+
+export const Container = styled.div`
+  position: relative;
+  height: 100%;
+  max-height: 100dvh;
+  overflow: hidden;
+`;
+
+export const DefaultBackdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #27272a;
+  opacity: 0.5;
+  z-index: 10;
+`;

base/hooks/useModal.tsx

@@ -0,0 +1,28 @@
+import { useCallback, useState } from 'react';
+
+import { isTrue } from '@Base/utils/check';
+
+export interface UseModalProps {
+  defaultMessage?: string;
+  defaultIsOpen?: boolean;
+}
+
+export function useModal({
+  defaultIsOpen = false,
+  defaultMessage = '',
+}: UseModalProps) {
+  const [isOpen, setIsOpen] = useState(defaultIsOpen);
+  const [message, setMessage] = useState(defaultMessage);
+
+  const open = useCallback((message?: string) => {
+    if (isTrue(message)) setMessage(message);
+
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  return { isOpen, message, open, close };
+}

base/hooks/useTrigger.tsx

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { isFalse } from '@Base/utils/check';
+
+export interface UseTriggerProps {
+  triggerFn?: () => boolean;
+  onTrigger?: (reset: () => void) => void;
+}
+
+export function useTrigger({ triggerFn, onTrigger }: UseTriggerProps) {
+  const [isTriggered, setIsTriggered] = useState(false);
+
+  const reset = useCallback(() => {
+    setIsTriggered(false);
+  }, []);
+
+  const trigger = useCallback(() => {
+    setIsTriggered(true);
+  }, []);
+
+  useEffect(() => {
+    if (isFalse(triggerFn)) return;
+
+    if (triggerFn()) {
+      setIsTriggered(true);
+      onTrigger?.(reset);
+    }
+  }, [onTrigger, reset, triggerFn]);
+
+  return { isTriggered, reset, trigger };
+}

base/utils/arrExtension.ts

@@ -0,0 +1,3 @@
+export function createConsecutiveNumbers(length: number, startNum = 0) {
+  return new Array(length).fill(0).map((_, idx) => startNum + idx);
+}

base/utils/check.ts

@@ -0,0 +1,22 @@
+/**
+ * checking object if is null + undefined or not
+ * if object is 0, this functions consider as true
+ */
+export function isFalse<T>(obj: T | undefined | null): obj is undefined | null {
+  if (obj === undefined || obj === null) return true;
+
+  return false;
+}
+
+/**
+ * checking object if is null + undefined or not
+ * if object is 0, this functions consider as true
+ */
+export function isTrue<T>(obj: T | undefined | null): obj is T {
+  return !isFalse(obj);
+}
+
+export function isEmpty<T extends string | Array<unknown>>(obj: T) {
+  if (obj.length === 0) return true;
+  return false;
+}

public/translations/en.json

@@ -1,4 +1,5 @@
 {
+  "confirm": "Confirm",
   "landingTitle_1": "Oppa",
   "titleHighlight": " Colors",
   "landingTitle_2": " ",
@@ -16,9 +17,13 @@
   "modalGuidance_2": " ",
   "confirmButton": "Next",
   "statusContent": " Stage",
-  "explanation_1": "Choose the color looks best on you",
-  "explanation_2": "The color looks good on you gives you",
-  "explanation_3": "more even toned, healthy looking skin",
+  "explanation_1": "Choose a color that looks best on you.",
+  "explanation_2": "The color that looks good on you gives you",
+  "explanation_3": "even tone and healthy looking skin.",
+  "colorChoiceGuideTitle": "Tips for choosing the right color",
+  "colorChoiceGuideExplanation_1": "\"You\" are the one that needs to be focused on, not the color.",
+  "colorChoiceGuideExplanation_2": "With a mismatch? 🙁\n❌ You look too hot / too cold.\n❌ Faces and colors look separate.",
+  "colorChoiceGuideExplanation_3": "With a match? 😊\n⭕️ Facial contours come alive.\n⭕️ Your nose and jawline look sharp.",
   "bonusStatus": "Last Stage",
   "errorMsg": "We have encountered an error",
   "resultTitle": "Your Seasonal Color is",
@@ -209,6 +214,7 @@
   "alertNoImg": "No file chosen",
   "alertSuccessCopy": "Copied Successfully! ✨",
   "alertFailCopy": "Failed to copy...🥲",
-  "alertMacOS": "Chrome browser on Mac is not working. Open in another browser 🥰",
-  "alertKakao": "It is not working on kakaoTalk InAppBrowser.. Open in another browser 🥰"
+  "alertMacOS": "Chrome browser on Mac is not working. Open in another browser. 🥰",
+  "alertKakao": "It is not working on kakaoTalk InAppBrowser. Open in another browser. 🥰",
+  "alertNotSupportedBrowser": "It is not working on this browser. Open in another browser. 🥰"
 }

public/translations/ko.json

@@ -1,4 +1,5 @@
 {
+  "confirm": "확인",
   "landingTitle_1": "오빠! ",
   "titleHighlight": "톤",
   "landingTitle_2": "  많아?",
@@ -19,6 +20,10 @@
   "explanation_1": "얼굴과 잘 어울리는 색을 선택해주세요.",
   "explanation_2": "얼굴과 색이 하나로 이어진 것처럼 조화로워 보이고,",
   "explanation_3": "피부색이 균일하고 맑아 보이는 색이 잘 어울리는 색입니다.",
+  "colorChoiceGuideTitle": "잘 어울리는 색 고르는 🍯TIP",
+  "colorChoiceGuideExplanation_1": "색이 눈에 들어오는 게 아니라 ‘내’가 돋보여야 합니다!",
+  "colorChoiceGuideExplanation_2": "안 어울리는 색은? 🙁\n❌ 너무 더워 보여요\n❌ 얼굴과 색이 분리되어 보여요",
+  "colorChoiceGuideExplanation_3": "잘 어울리는 색은? 😊\n⭕️ 얼굴 윤곽이 살아나요\n⭕️ 콧대와 턱 라인이 날렵해 보여요",
   "bonusStatus": "마지막 단계",
   "errorMsg": "예기치 못한 상황이 발생했습니다.",
   "resultTitle": "당신의 퍼스널 컬러는",
@@ -210,5 +215,6 @@
   "alertSuccessCopy": "링크 복사 성공! ✨",
   "alertFailCopy": "링크 복사에 실패했어요...🥲",
   "alertMacOS": "macOS 환경의 크롬 브라우저에서는 지원하지 않는 기능입니다. 다른 브라우저에서 실행해 주세요. 🥰",
-  "alertKakao": "카카오 인앱 브라우저에서는 지원하지 않는 기능입니다. 다른 브라우저에서 실행해 주세요. 🥰"
+  "alertKakao": "카카오 인앱 브라우저에서는 지원하지 않는 기능입니다. 다른 브라우저에서 실행해 주세요. 🥰",
+  "alertNotSupportedBrowser": "현재 브라우저에서는 지원하지 않는 기능입니다. 다른 브라우저에서 실행해 주세요. 🥰"
 }

robots.txt

@@ -0,0 +1 @@
+Sitemap: https://omct.web.app/sitemap.xml

sitemap.xml

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://omct.web.app/</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>1.00</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/all-types-view</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=springbright</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=springwarm</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=springlight</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=summerlight</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=summercool</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=summermute</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=autumnmute</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=autumnwarm</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=autumndeep</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=winterdeep</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=wintercool</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/result?colorType=winterbright</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://omct.web.app/image-upload</loc>
+  <lastmod>2023-11-05T00:28:50+00:00</lastmod>
+  <priority>0.20</priority>
+</url>
+
+
+</urlset>

src/components/AdSense/index.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+declare global {
+  interface Window {
+    adsbygoogle: unknown[];
+  }
+}
+
+export interface AdSenseProps {
+  'data-ad-slot': string;
+}
+
+export function AdSense(props: AdSenseProps) {
+  useEffect(() => {
+    (window.adsbygoogle = window.adsbygoogle || []).push({});
+  }, []);
+
+  return (
+    <ins
+      className="adsbygoogle"
+      style={{ display: 'block' }}
+      data-ad-client="ca-pub-9551977219354865"
+      data-ad-format="auto"
+      data-full-width-responsive="true"
+      {...props}
+    />
+  );
+}