remix로 포팅작업 1단계

Author: rotoshine

.gitignore

@@ -1,11 +1,11 @@
-.next
 node_modules
-.env
-.DS_STORE
-public
+
 .cache
-.vscode
-.env.*
-run.sh
-src/__generated__
 .vercel
+.output
+
+public/build
+api/_build
+generated*.ts
+
+legacy

.prettierrc

@@ -8,5 +8,6 @@
   "htmlWhitespaceSensitivity": "css",
   "proseWrap": "preserve",
   "quoteProps": "as-needed",
-  "tabWidth": 2
+  "tabWidth": 2,
+  "printWidth": 120
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

README.md

@@ -1,5 +1,34 @@
-# Band idios homepage
+# Welcome to Remix!
 
-using gatsby.js
+- [Remix Docs](https://remix.run/docs)
 
-https://idiots.band
+## Deployment
+
+After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
+
+If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
+
+```sh
+npm i -g vercel
+vercel
+```
+
+It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
+
+## Development
+
+To run your Remix app locally, make sure your project's local dependencies are installed:
+
+```sh
+npm install
+```
+
+Afterwards, start the Remix development server like so:
+
+```sh
+npm run dev
+```
+
+Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
+
+If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.

api/index.js

@@ -0,0 +1,5 @@
+const { createRequestHandler } = require("@remix-run/vercel");
+
+module.exports = createRequestHandler({
+  build: require("./_build")
+});

app/components/GoodsImage.tsx

@@ -0,0 +1,38 @@
+import { Box, AspectRatio, Image } from '@chakra-ui/react'
+import { StrapiImage } from '~/types/types'
+import { formatsToUrl } from '~/utils/image'
+
+interface Props {
+  imageRatio?: number
+  image: StrapiImage
+  isSoldOut: boolean
+  alt: string
+}
+
+export default function GoodsImage({ imageRatio = 1, image, isSoldOut = false, alt }: Props) {
+  return (
+    <Box position="relative">
+      <AspectRatio ratio={imageRatio} w="100%" objectFit="contain" bgColor="blackAlpha.700">
+        <Image src={formatsToUrl(image?.formats)} objectFit="contain" objectPosition="50% 50%" alt={alt} />
+      </AspectRatio>
+      {isSoldOut && (
+        <Box
+          position="absolute"
+          display="flex"
+          top="0"
+          left="0"
+          zIndex="10"
+          w="100%"
+          h="100%"
+          bgColor="blackAlpha.700"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Box bgColor="gray.900" padding="16px" borderRadius="16px">
+            Soldout!
+          </Box>
+        </Box>
+      )}
+    </Box>
+  )
+}

app/components/MarkdownText.tsx

@@ -0,0 +1,52 @@
+import { Box, BoxProps } from '@chakra-ui/react'
+import { isEmpty, isNil } from 'lodash'
+
+/*
+const markdownIt = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+})
+*/
+interface Props extends BoxProps {
+  markdown?: string
+}
+
+const HASHTAG_REGEX = /#([ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|A-Z|0-9]+)/g
+const MENTION_REGEX = /@([0-9|a-z|A-Z\d-_.]+)/g
+/*
+const toHTML = (markdown: string) =>
+  markdownIt.render(
+    markdown
+      .replace(/\n/g, '<br />')
+      .replace(HASHTAG_REGEX, '<a class="hashtag" href="https://twitter.com/search?q=$1">#$1</a>')
+      .replace(
+        MENTION_REGEX,
+        '<a class="twitter-link" href="https://twitter.com/$1" target="_blank" rel="noopener noreferrer">@$1</a>'
+      )
+  )
+*/
+export default function MarkdownText({ markdown, ...restProps }: Props) {
+  if (isEmpty(markdown) || isNil(markdown)) {
+    return null
+  }
+  return (
+    <>
+      <Box
+        dangerouslySetInnerHTML={{
+          __html: markdown
+            .replace(/\n/g, '<br />')
+            .replace(
+              HASHTAG_REGEX,
+              '<a class="hashtag" href="https://twitter.com/search?q=$1"target="_blank" rel="noopener noreferrer">#$1</a>'
+            )
+            .replace(
+              MENTION_REGEX,
+              '<a class="twitter-link" href="https://twitter.com/$1" target="_blank" rel="noopener noreferrer">@$1</a>'
+            ),
+        }}
+        {...restProps}
+      />
+    </>
+  )
+}

app/components/NavMenu.tsx

@@ -0,0 +1,29 @@
+import { Box, BoxProps } from '@chakra-ui/react'
+import { Link } from 'remix'
+
+interface Props extends BoxProps {
+  link: string
+  title: string
+  text: string
+}
+export default function NavMenu({ link, title, text, onClick, ...restProps }: Props) {
+  const linkItem = (
+    <Box marginLeft="12px" marginRight="12px" {...restProps}>
+      {text}
+    </Box>
+  )
+
+  if (link.startsWith('/')) {
+    return (
+      <Link to={link} title={title}>
+        {linkItem}
+      </Link>
+    )
+  } else {
+    return (
+      <a href={link} target="_blank" rel="noopener noreferrer">
+        {linkItem}
+      </a>
+    )
+  }
+}

app/components/PageContent.tsx

@@ -0,0 +1,12 @@
+import { Box } from '@chakra-ui/react'
+
+interface Props {
+  children: React.ReactNode | React.ReactNode[]
+}
+export default function PageContent({ children }: Props) {
+  return (
+    <Box maxW={['100%', null, null, '1366px']} margin="0 auto" padding={['8px', null, '16px', '24px']}>
+      {children}
+    </Box>
+  )
+}

app/components/ScrollDescription.tsx

@@ -0,0 +1,31 @@
+import { Box, BoxProps } from '@chakra-ui/react'
+import React from 'react'
+
+interface Props extends BoxProps {
+  children: React.ReactNode
+}
+
+export default function ScrollDescription({ children, ...boxProps }: Props) {
+  return (
+    <Box
+      bgColor="whiteAlpha.100"
+      maxH="300px"
+      overflowY="auto"
+      css={{
+        '&::-webkit-scrollbar': {
+          width: '8px',
+        },
+        '&::-webkit-scrollbar-track': {
+          width: '6px',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          background: 'white',
+          borderRadius: '24px',
+        },
+      }}
+      {...boxProps}
+    >
+      {children}
+    </Box>
+  )
+}

app/entry.client.tsx

@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);

app/entry.server.tsx

@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}